web服务弹性伸缩_我如何为实际用户构建可伸缩的现代Web应用程序
web服务弹性伸缩
This post details the languages, libraries, and tools that I’m using to build Skilled.dev, a platform to prepare developers to succeed in coding interviews.
这篇文章详细介绍了我用来构建Skilled.dev的语言，库和工具， Skilled.dev是一个平台，旨在帮助开发人员成功地编写采访访谈。
TLDR (TLDR)
UX + Performance + Scalable + Customizable
UX +性能+可扩展+可自定义
My decisions focus on automating parts of the process that would prevent me from doing what I want to do — building a product that provides a ton of value to my users. I optimize for fast iteration speed, developer experience, and scalability, without sacrificing control or customization when it’s needed.
我的决定集中在流程的某些部分的自动化上，这些部分可能会阻止我做自己想做的事情-开发一种为用户提供大量价值的产品。 我为快速迭代速度，开发人员体验和可伸缩性进行了优化，而无需在需要时牺牲控制或自定义。
Cost: $77 all-in right now. This is all in infrastructure costs and likely won’t grow to be more much expensive for a while. There will be additional costs like email marketing and transaction fees.
费用：77美元，现在全额支付 。 这全部是基础设施成本，很可能在一段时间内不会变得更加昂贵。 会有电子邮件营销和交易费用之类的额外费用。
Stress Test Results: I sent 10000 page requests over the course of 1 minute (167 per second) and the infrastructure didn’t flinch. The overall response time average was 990ms, and the 95th percentile database response time was 75ms. The $7 dyno I’m using didn’t cross 60% usage. I used loader.io to perform the test. This is 10k page views, but I haven’t added up the additional calls it makes inside the page which would be many more.
压力测试结果 ：我在1分钟内发送了10000个页面请求(每秒167个)，而基础架构没有退缩。 总体平均响应时间为990ms，第95个百分位数的数据库响应时间为75ms。 我正在使用的$ 7 dyno没有超过60％的使用率。 我使用loader.io进行测试。 这是10k的页面浏览量，但是我没有将它在页面内进行的其他调用加起来的数量会更多。
You can find a more in-depth analysis towards the end of the article in the “Stress Test and Scalability” section.
在“压力测试和可伸缩性”部分中，您可以在本文结尾处找到更深入的分析。
介绍 (Intro)
Skilled.dev is a user-focused app where the UX is essential to teaching as effectively as possible, and I think it has parallels with a broad category of products. I also want to move beyond the standard programming tutorials and show why we use certain tools and how to we can leverage them to rapidly build applications that scale, even if you’re a solo developer or on a small team.
Skilled.dev是一个以用户为中心的应用程序，其中UX对于尽可能有效地教学至关重要，我认为它与广泛的产品类别具有相似之处。 我还想超越标准的编程教程，并说明为什么我们使用某些工具，以及如何利用它们来快速构建可扩展的应用程序，即使您是一个单独的开发人员或一个小型团队也是如此。
I’m also starting a YouTube channel where I’ll be sharing insight into our projects (Level Up Coding, Skilled.dev, gitconnected.com) and walk you through the code and how we build things. I’ll also be creating videos for coding interview questions and provide career growth advice.
我还将启动一个YouTube频道 ，在该频道中 ，我将分享对我们项目的了解(Level Up Coding，Skilled.dev，gitconnected.com)，并向您介绍代码以及我们如何构建事物。 我还将创建用于编码面试问题的视频，并提供职业发展建议。
我的堆栈 (My Stack)
I’ll briefly mention the tools here and go into more detail in the rest of the article for why I chose each one.
我将在此处简要提及这些工具，并在本文的其余部分中详细介绍为什么我选择每种工具。
At the end of the article, I’ll also provide screenshots of how I’ve structured the code.
在文章的结尾，我还将提供如何构造代码的屏幕截图。
前端($ 0) (Frontend ($0))
TypeScript (with auto-generated types through GraphQL)
TypeScript (通过GraphQL自动生成的类型)
React (Next.js for SSR + static site generation)
React (用于SSR的Next.js +静态站点生成)
CSS-in-JS using Styled Components
使用样式化组件的 CSS-in-JS
Apollo for GraphQL API consumption
Apollo用于GraphQL API的使用
MDX for writing lesson content
MDX用于编写课程内容
后端($ 0) (Backend ($0))
GraphQL using Hasura
使用Hasura的GraphQL
- Lambda functions through Next.js
Lambda通过Next.js函数 - PostgreSQL
PostgreSQL - Authentication is hand-rolled initially to prevent vendor lock-in
最初会手动进行身份验证，以防止供应商锁定
基础设施($ 77) (Infrastructure ($77))
Frontend / serverless API deployed to Vercel
部署到Vercel的前端/无服务器API
GraphQL API deployed to Heroku
GraphQL API部署到Heroku
GitHub for storing code
GitHub用于存储代码
Sentry for bugs and application crashes
哨兵的错误和应用程序崩溃
开发资源 (Dev Resources)
Having the right workflow makes you as effective as possible. These aren’t part of my code stack, but I think it’s worthing mentioning because they save me a ton of time.
拥有正确的工作流程将使您尽可能地高效。 这些不是我的代码堆栈的一部分，但是我认为值得一提，因为它们为我节省了大量时间。
Daily.dev (Daily.dev)
The first is daily.dev. They aggregate and algorithmically sort the best developer news as a new tab in your browser. This has saved me a ton of time by finding the content I care about without needing to switch between different websites.
第一个是daily.dev 。 他们将最佳开发者新闻汇总并按算法排序，作为浏览器中的新标签页。 通过查找所需内容，无需在其他网站之间切换，这为我节省了很多时间。
TabNine (TabNine)
A tool I discovered recently that has made me way more productive in my text editor is TabNine. It’s an autocompletion tool that’s powered by AI. In many cases, it feels like it codes for me. For example, it has recognized the patterns I use for writing styles where I call the outer div a Wrapper:
我最近发现的一个工具TabNine使我的文本编辑器更加高效。 这是一个由AI驱动的自动完成工具。 在许多情况下，感觉像是为我编码。 例如，它已经识别出我用于编写样式的模式，其中我将外部div称为Wrapper ：
One bonus for me is that I’m writing my content for lessons in my text editor using Markdown, and TabNine is smart enough to suggest words and spell check for English sentences as well as code.
对我来说，一个好处是，我可以使用Markdown在文本编辑器中编写课程内容，TabNine足够聪明，可以建议单词和英语句子以及代码的拼写检查。
Here’s a brief example of TabNine, but you’ll also notice in some of the images/screen recordings in the article.
这是TabNine的简短示例，但您还将在文章中的某些图像/屏幕记录中注意到。
前端($ 0) (Frontend ($0))
打字稿 (TypeScript)
TypeScript has transformed the frontend and should be strongly considered for any production project. It makes our code safer (by at least 38% according to Airbnb), integrates with our text editors to improve productivity, and makes our code more readable.
TypeScript改变了前端，应该在任何生产项目中都强烈考虑。 它使我们的代码更安全( 根据Airbnb至少达到38％ )，与我们的文本编辑器集成以提高生产率，并使我们的代码更具可读性。
But that’s not even the best part — TypeScript seamlessly integrates with GraphQL to generate types for your client and React hook fetches (more on this later). Honestly, it’s like programming with cheat codes. Just put in a couple of keystrokes, and the autocompletion basically writes all your code and builds your components for you. I use graphql-code-generator, but there are other options.
但这还不是最好的部分-TypeScript与GraphQL无缝集成以为您的客户端和React钩子获取生成类型(稍后会详细介绍)。 老实说， 这 就像 使用作弊代码进行编程 一样 。 只需输入几次击键，自动完成功能就可以编写所有代码并为您构建组件。 我使用graphql-code-generator ，但是还有其他选择。
There is admittedly some upfront cost to learning TypeScript and maintaining it, but I couldn’t imagine working on a project without it at this point.
诚然，学习TypeScript和维护它需要一定的前期成本，但我无法想象目前没有它就可以进行项目。
与Next.jsReact (React with Next.js)
I’ll be brief on the React part because most people know what it is at this point. I know it’s up for debate, but to me React is still the best library to build UI. The core team is strong, the library is constantly improving, and the community huge. Also (if things go well
web服务弹性伸缩_我如何为实际用户构建可伸缩的现代Web应用程序相关推荐
- python web实战视频教程_知乎萧井陌大神Python Flask WEB后端班课程实战视频教程
[课程内容] 第1章 网址组成.端口.HTTP协议.web服务器 第2章 作业讲解.服务器框架.html和getpost传递参数 第3章 基本框架.框架解释.model解释 第4章 cookie讲解. ...
- bim 模型web页面展示_基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案
互联网技术的兴起极大得改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大家感受最深刻的可能是游戏.电商.O2O等和我们生活息息相关的行业,但这 ...
- 学python能干web前端吗_【29岁，想转行，是学web前端还是python？】-看准网
我是在上海站参加的海康的校招,面试一共三轮,笔试+技术面+hr面,总体难度都不大. 1.笔试 笔试是在宣讲会结束之后进行的,就是在同济大学的一个阶梯教室,不同岗位试卷不一样,我当时投的是java岗,题 ...
- 小程序 和 web 功能对比_小程序官方推出的Kbone，是如何解决Web 端和小程序同构痛点的？...
小程序作为一种新兴地连接用户与服务的方式,相信大家都或多或少接触过.对于开发者来说,它是一种类似 Web 但又不同于 Web 的开发模式,它提供了一套自定义的 API 和文件组织方式,这无疑带给开发者 ...
- web重启tomcat_使用docker构建jdk镜像和web服务镜像
一.构建jdk镜像 FROM centos WORKDIR /home/lily ADD jdk-8u91-linux-x64.tar.gz /home/lily RUN mv jdk1.8.0_91 ...
- 微服务弹性伸缩与负载均衡
微服务弹性伸缩与负载均衡 微服务如何实现弹性伸缩 云帮的应用弹性伸缩有不同的层次.类型及形式,且进行伸缩操作对用户是无影响的,服务不会有任何的中断(平滑伸缩).由于平台是基于容器技术的,因此伸缩的最小 ...
- Java web小项目_个人主页（2）—— 边缘加速原理与实现
摘自:Java web小项目_个人主页(2)-- 边缘加速原理与实现 作者:丶PURSUING 发布时间: 2021-03-27 14:44:40 网址:https://blog.csdn.net/w ...
- Java web小项目_个人主页（1）—— 云环境搭建与项目部署
摘自:Java web小项目_个人主页(1)-- 云环境搭建与项目部署 作者:丶PURSUING 发布时间: 2021-03-26 23:59:39 网址:https://blog.csdn.net/ ...
- 高性能 高可用 可弹性伸缩_性能，可伸缩性和活力
高性能 高可用 可弹性伸缩 本文是我们名为Java Concurrency Essentials的学院课程的一部分. 在本课程中,您将深入探讨并发的魔力. 将向您介绍并发和并发代码的基础知识,并学习诸 ...
最新文章
- .net的字符串插值，格式化字符串
- 计算机一级c基础知识,计算机一级考试MSOffice基础试题
- BJUI选择时间后点击导出提示未选择时间
- PetShop4,错误提示：System.Web.Security.SqlMembershipProvider”要求一个与架构版本“1”兼容的数据...
- SQL字符串处理--按分割符拆分字符串T-SQL to Split a varchar into Words
- Symbian 资源文件解析
- down perm什么意思_没想到“羽绒服”竟叫down coat！为啥有个down？
- Apollo的学习笔记
- Zabbix安装界面显示PHP time zone 为“红色”的解决办法
- EB开发乱码处理总结
- “AI超人”李开复慢下来的投资节奏
- 用Python对PDF文字颜色加深
- Python烤地瓜案例
- python复数的实部和虚部都是整数嘛_数字类型
- Windows下代码比较工具Meld diff 以及 VScode配置，解决“Meld Diff Error: Error running diff command! StdErr: ‘meld‘ �
- 浙江高考python 学生采访_实录｜我采访了12个在校大学生，高考前100天他们这样过...
- Python3.8.5安装教程
- java 打印 日历 详细 注解_java 打印日历
- hihocoder买零食
- 李开复：长尾效应带给媒体的不是威胁