2021 年 JavaScript 开发者行业路线图

2025-05-25

2021 年 JavaScript 开发者行业路线图

2021 年 JavaScript 开发者行业路线图

如果您正在准备 JavaScript 面试，请访问learnersbucket.com 。您将找到 DSA、系统设计和 JavaScript 问题。

成为前端开发人员的行业重点路线图。

本指南是我根据行业内受欢迎程度推荐的用于学习前端开发各个方面的库/框架。

本路线图面向正在尝试理解前端的新手。如果您已经熟悉前端开发，并希望探索新的视角，欢迎探索。

注意：如果您发现问题，请评论，我会尽力修复。如果您喜欢，请与他人分享。

先决条件

  • 很好地理解核心编程概念。
  • 已经熟悉 Web 的工作原理，例如 HTTP 和 RESTful API 等 Web 协议和约定。
  • 熟悉基本的命令行操作。

目录

HTML

HTML 是一种（超文本标记语言），它并非一种编程语言。它是一种标记语言，用于指示 Web 浏览器如何构建您所访问的网页。它可以复杂，也可以简单，这取决于 Web 开发人员的意愿。

HTML 由一系列元素组成，您可以使用这些元素来包围、包裹或标记内容的不同部分，以使其以特定方式显示或操作。封闭的标签可以将内容转换为超链接以连接到其他页面，或者将文字设置为斜体等等。例如，请考虑以下一行文本：

<p>Hello World!.</p>
Enter fullscreen mode Exit fullscreen mode

下图表示 HTML 的解剖结构。

HTML 剖析 (MDN)

从 SEO 角度来看，HTML 非常重要，因此 HTML5 引入了许多新标签，这对 SEO 优化确实有帮助。

除此之外，可访问性也是 HTML 中需要学习的重要内容，以确保每个人都可以通过不同的设备访问 Web 应用程序。

HTML 中需要学习的内容。

  • 语义 HTML (HTML5)
  • 可访问性
  • DOM

预计学习时间：10 至 15 天（每天 3 至 4 小时）。

学习链接。

CSS：层叠样式表

层叠样式表 (CSS) 是一种样式表语言，用于描述以 HTML 或 XML（包括 SVG、MathML 或 XHTML 等 XML 方言）编写的文档的呈现方式。CSS 描述了元素在屏幕、纸张、语音或其他媒体上的呈现方式。

理解 CSS 至关重要，它看似简单，实际操作起来却相当复杂。编写跨设备/浏览器的样式有时会非常具有挑战性。

css 下需要研究的东西。

  • CSS 特殊性
  • CSS预处理器
  • CSS 重置/规范化
  • CSS 架构（BEM）
  • 浮点数
  • 弹性盒和网格
  • SVG
  • 媒体查询
  • 显示属性
  • 位置属性
  • 动画
  • 伪类

预计学习时间：10 – 15 天（每天 3 – 4 小时）。

学习链接。

高级 CSS

CSS 现在已经很先进，并且提供了使用正常的编程概念，如定义变量、函数、使用OOP 概念等。它有许多扩展，有助于更有效地使用它。

萨斯

Sass 代表 Syntactically Awesome Stylesheet，是一种预处理器脚本语言，可解释或编译为层叠样式表 (CSS)。

预计学习时间：7 – 10 天（每天 3 – 4 小时）。

学习链接

较少的

Less（代表精简样式表）是 CSS 的向后兼容语言扩展。

Less 通过变量、混合宏、操作和函数等动态行为扩展了 CSS。Less 可在服务器端和客户端运行。

学习链接

JavaScript

JavaScript 或 ECMAScript 是 Web 语言，它是一种用途极为广泛的编程语言，我们可以使用它来构建 Web 服务器、原生移动应用程序、Web 应用程序和桌面应用程序。

由于其类型比较松散，学习起来容易，但精通起来却很难。练习是掌握它的关键。

近年来，JavaScript 有了很大的改进，许多新功能被添加到该语言中，使其更加强大。

ECMAScript 2015（以前称为 ECMAScript 6）已发布，其中进行了重大功能更新，之后每年都会向该语言添加新功能，新版本的 ECMAScript 被称为 ESNext。

如果你想了解JavaScript 的历史，这里有一篇很棒的文章。

由于浏览器必须在发布新功能后实现它们才能使用，这需要时间，因此Babel等工具使开发人员能够在他们的应用程序中编写这些新功能，因为 Babel将它们转换为浏览器兼容的代码。

随着Nodejs的发展，JavaScript 能够从 Web 转移到任何地方，现在您可以将 JavaScript 用作服务器端语言，并且几乎可以在所有平台、Web、移动、桌面、物联网等上使用。

预计学习时间：30 – 45 天（每天 3 – 4 小时）。

学习链接（基础）。

需要涵盖的主题可以提高语言水平。

  • 这
  • 当前执行函数
  • 关闭
  • Null 与 undefined
  • 循环与映射
  • 调用、应用和绑定
  • 提升
  • 范围
  • 属性与特性
  • 三元运算符
  • 承诺与回调
  • 对象、对象冻结
  • 可变与不可变
  • 象征
  • 柯里化
  • 去抖动
  • 节流
  • 异步与延迟
  • 事件冒泡和捕获
  • 原型和原型继承
  • 递归思考
  • 本地存储和会话存储
  • 跨域资源共享 (CORS)
  • 总和(a)(b)(c)…(n)
  • Web 存储 API
  • 事件循环
  • Web套接字
  • 单页应用程序
  • 服务器端渲染
  • 优化
  • 关键渲染路径
  • 延迟加载数据

高级学习链接

单页应用程序（SPA）

传统上，网站都是通过服务器端渲染构建的。浏览器从服务器接收 HTML 并进行渲染。当页面刷新或用户导航到其他页面时，服务器会发送新的 HTML。

然而，单页应用程序 (SPA) 使用客户端渲染。浏览器从服务器加载初始页面，以及整个应用程序所需的脚本（框架、库、应用程序代码）和样式表。当用户导航到其他页面时，不会触发页面刷新。页面的 URL 通过HTML5 History API更新。新页面所需的新数据（通常为 JSON 格式）由浏览器通过向服务器发送AJAX请求来检索。然后，SPA 使用在初始页面加载时已下载的 JavaScript 数据动态更新页面。这种模式类似于原生移动应用程序的工作方式。

优势

  • Web 应用程序给人更原生的感觉，并且响应速度更快，因为由于全页面刷新，页面导航之间不会出现闪烁。
  • 由于我们不必一次又一次地重复获取相同的资源，因此我们只需要发出更少的 HTTP 请求，而且有效负载大小更小，处理速度更快。
  • 服务器和客户端是解耦的，这意味着我们可以独立开发针对不同平台（例如移动设备、聊天机器人、智能手表）的新客户端，而无需修改服务器代码。客户端也可以使用新的技术栈进行开发。

缺点

  • 由于大多数资源都是在 Web 应用程序首次加载时获取的，因此这可能会影响应用程序的初始加载时间。
  • 您的服务器上还需要执行一个额外的步骤，即将其配置为将所有请求路由到单个入口点，并允许客户端路由从那里接管。
  • SEO 问题：SPA 依赖于 JavaScript 来渲染内容，但并非所有搜索引擎在抓取过程中都会执行 JavaScript，因此它们可能会在您的页面上看到空内容。这会无意中损害您应用的搜索引擎优化 (SEO)。为了解决这个问题，您可以进行服务器端渲染，或者使用 Prerender 等服务来“在浏览器中渲染 JavaScript，保存静态 HTML，然后将其返回给爬虫”。

在涉及 SEO 的情况下以及在我们构建博客等小规模应用程序时，服务器端应用程序仍然是首选。

但是，对于大型企业应用程序来说，具有客户端-服务器关系的 SPA 应用程序是首选，因为客户端和服务器代码可以独立开发和发布，所以明确的客户端-服务器分离对于更大的工程团队来说可以更好地扩展。

如今，Web 开发者将自己开发的产品称为 Web 应用，而不是网站。虽然这两个术语之间没有严格的区别，但 Web 应用往往具有高度的交互性和动态性，允许用户执行操作并接收响应。

虽然 jQuery 仍然可以用于服务器端应用程序，为每个页面添加用户交互功能。但 jQuery 处理大型应用程序并不容易。毕竟，jQuery 主要是一个用于 DOM 操作的库，而不是一个框架。

为了实现这一目标，JavaScript 框架应运而生，它提供了对 DOM 的更高级别的抽象，允许你将状态保存在内存中，而不是 DOM 中。使用框架还能带来重用构建应用的推荐概念和最佳实践的好处。

对于不熟悉代码库但有框架使用经验的初级开发人员来说，上手会容易得多，因为代码是按照他们熟悉的结构组织的。此外，流行的框架拥有强大的社区支持、教程和指南，这使得它们很容易上手。

预计学习时间：7 – 10 天（每天 3 – 4 小时）。

学习链接

React（用于创建单页应用程序的库）

除了React之外，没有其他 JavaScript 库能够席卷当今的前端生态系统。React 是由 Facebook 的精英们构建并开源的库。在 React 中，开发人员可以为其 Web 界面编写组件并将它们组合在一起。

前端开发正转向基于组件的开发模式，即每个组件独立开发，然后组合在一起形成功能，最终使用这些功能构建 Web 应用。React 鼓励你用 JavaScript 编写 HTML 和 CSS。这听起来像是一个疯狂的想法，因为它与现有的分别编写 HTML、JavaScript 和 CSS 的良好实践背道而驰。但是，如果你将 HTML、CSS 和 JavaScript 的作用域限定在组件级别，那么开发过程中就不会出现冲突，而且不同的组件也可以在设计时独立开发，彼此之间没有任何依赖关系。

React 的特点。

  • 声明式：你描述的是你想在视图中看到什么，而不是如何实现它。每个组件都有自己的状态，你只需在组件内部更改状态，视图就会根据状态进行更新。只需查看方法中的 HTML 代码，就可以轻松确定组件的外观render()。
  • 函数式：每个组件都是一个 JavaScript 纯函数，包含props（外部数据）和state（内部数据）。纯函数易于测试，函数式组件也是如此。
  • 可维护性：React 强制使用组合而非继承来实现可扩展性和可复用性，因此以基于组件的方式编写视图可以提高可复用性。由于每个组件的逻辑和视图都局限于自身，因此维护起来更容易。
  • 高性能：React 使用虚拟 DOM 的概念，当状态或属性发生变化时，它会重新渲染所有内容。为什么需要虚拟 DOM？虽然现代 JavaScript 引擎速度很快，但读取和写入 DOM 的速度很慢。React 在内存中保留 DOM 的轻量级虚拟表示。重新渲染所有内容是一个误导性术语。在 React 中，它实际上是指重新渲染 DOM 的内存表示，而不是实际的 DOM 本身。当组件的底层数据发生变化时，将创建一个新的虚拟表示，并将其与之前的表示进行比较。然后将差异（所需的最少更改）修补到真实的浏览器 DOM。
  • 易于学习：- React 具有很少的 API，这些 API 保持不变且几乎不会改变，除此之外，它是最大的社区之一，提供一系列工具、开源 UI 组件和大量在线资源，帮助您开始学习 React。

多年来，性能甚至超越 React 的新视图库层出不穷。React 或许并非目前速度最快的库，但就其生态系统、整体使用体验和优势而言，它仍然是最优秀的库之一。Facebook 也在努力通过重写底层协调算法来提升 React 的速度。React 引入的理念教会了我们如何编写更优质的代码、更易于维护的 Web 应用，并让我们成为更优秀的工程师。

预计学习时间：30 – 45 天（每天 3 – 4 小时）。

学习链接

替代方案

状态管理 – Flux/Redux

React 是一个库，而不是一个框架，并且不处理视图以下的层。

随着应用规模的扩大，你可能会发现应用结构变得有些混乱。应用中的组件可能需要共享和显示一些通用数据，但在 React 中并没有优雅的方法来处理这些问题。毕竟，React 只是视图层，它并不规定如何按照传统的 MVC 范式构建应用的其他层，例如模型和控制器。为了解决这个问题，Facebook 发明了Flux，这是一种应用架构，它利用单向数据流来补充 React 的可组合视图组件。

综上所述，Flux模式有如下特点：

  • 单向数据流：- 使应用程序更可预测，因为可以轻松跟踪更新。
  • 关注点分离：Flux 架构中的每个部分都有明确的职责，并且高度解耦。
  • 与声明式编程配合良好： - 商店可以向视图发送更新，而无需指定如何在状态之间转换视图。

由于 Flux 本身并非一个框架，开发人员尝试提出许多 Flux 模式的实现。最终，一个明显的赢家脱颖而出，那就是Redux。Redux结合了 Flux、命令模式和Elm 架构的思想，是当今开发人员在 React 中使用的事实上的状态管理库。其核心概念是：

  • Appstate由单个普通的旧 JavaScript 对象 (POJO) 描述。
  • 调度一个action（也是一个 POJO）来修改状态。
  • Reducer是一个纯函数，它接受当前状态和动作来产生新状态。

这些概念听起来很简单，但它们非常强大，因为它们使应用程序能够：

  • 将其状态呈现在服务器上，并在客户端启动。
  • 跟踪、记录和回溯整个应用程序中的变化。
  • 轻松实现撤消/重做功能。

Redux 的创建者Dan Abramov非常用心地编写了详细的 Redux 文档，并制作了全面的视频教程，帮助用户学习Redux 的基础知识和高级技能。这些资源对于学习 Redux 来说非常有用。

虽然 Redux 不一定非要和 React 一起使用，但强烈建议使用，因为它们可以很好地协同工作。React 和 Redux 有很多共同的理念和特质。

您的应用可能需要处理异步调用，例如发出远程 API 请求。redux -thunk和redux-saga就是为了解决这些问题而创建的。它们可能需要一些时间来理解，因为它们需要了解函数式编程和生成器。我们的建议是仅在需要时才处理它们。

react-redux是 Redux 的官方 React 绑定，非常容易学习。

预计学习时间：7 – 10 天（每天 3 – 4 小时）。

学习链接

选择

CSS 模块

CSS 为 HTML 增添了交互性，它用于定义 HTML 元素的外观以及根据屏幕、兄弟元素等进行调整的方式。我们都知道，编写优秀的 CSS 代码非常困难，需要多年的经验积累才能精进。我们面临的主要问题是编写可扩展且可维护的 CSS，并且能够适应不同的屏幕和设备。为了更轻松地使用 CSS，经验丰富的前端开发人员设计了一些方法论，指导人们如何为复杂的项目编写有序的 CSS，例如使用SMACSS、BEM、SUIT CSS等。

这些方法论的缺点在于它们非常脆弱，它们被人为地通过惯例和指南强制执行。一旦开发人员不遵守，它们就会崩溃。

您可能已经意识到，前端生态系统中充斥着各种工具，而这些工具的发明也是为了部分解决大规模编写 CSS 时遇到的一些问题。“大规模”意味着许多开发人员正在开发同一个大型项目并使用相同的样式表。目前，社区尚未就使用 JS 编写 CSS达成一致，我们希望有一天，所有 Flux 实现中能够出现一个赢家，就像 Redux 一样。目前，我们寄希望于CSS 模块。CSS 模块是对现有 CSS 的改进，旨在解决 CSS 中全局命名空间的问题；它使您能够编写默认为本地的样式，并将其封装到组件中。此功能是通过工具实现的。使用 CSS 模块，大型团队可以编写模块化且可重用的 CSS，而不必担心冲突或覆盖应用程序的其他部分。但是，最终，CSS 模块仍会被编译成浏览器可识别的常规全局命名空间 CSS，因此学习和理解原始 CSS 的工作原理仍然很重要。

如果您是 CSS 的初学者，Codecademy 的HTML 和 CSS 课程将是您不错的入门课程。接下来，学习Sass 预处理器，它是 CSS 语言的扩展，改进了语法并提高了样式的可重用性。学习上面提到的 CSS 方法，最后学习 CSS 模块。

预计学习时间：7-10天（每天3-4小时）。尝试使用SMACSS/BEM方法和/或CSS模块来设计你的应用。

学习链接

替代方案

可维护性

代码的阅读频率远高于编写频率。当你在一个大型团队中工作，并且参与多个项目的多个团队时，高度重视代码的可读性、可维护性和稳定性就显得尤为重要。实现这些目标的方法有：“广泛的测试”、“一致的编码风格”和“类型检查”。

同样，当你在一个团队中时，分享相同的实践也变得非常重要。如果你是初学者，请阅读JavaScript 项目指南。

JavaScript 代码检查 – ESLint

Linter 是一种静态分析代码并查找问题的工具，它可以有效预防 bug/运行时错误，同时还能强制执行代码风格。在拉取请求 (PR) 审核期间，审核人员无需对代码风格留下挑剔的评论，从而节省时间。ESLint是一款用于 lint JavaScript 代码的工具，具有高度可扩展性和可定制性。团队可以编写自己的 lint 规则来强制执行自定义风格。在 Grab，我们使用 Airbnb 的eslint -config-airbnb预设，该预设已根据Airbnb JavaScript 风格指南中的通用良好代码风格进行配置。

大多数情况下，使用 ESLint 就像在项目文件夹中调整配置文件一样简单。如果你不为 ESLint 编写新规则，那么学习它就没什么可学的。只要注意错误出现时，用 Google 搜索一下，找到推荐的样式就行了。

预计学习时间：2 – 3 天（每天 3 – 4 小时）。

学习链接

替代方案

CSS 代码检查 – stylelint

如前所述，编写优秀的 CSS 代码非常困难。使用 CSS 静态分析工具有助于维护我们的 CSS 代码质量和编码风格。我们使用 stylelint 来检查 CSS 代码。与 ESLint 类似，stylelint 采用高度模块化的设计，允许开发者启用/禁用规则并编写自定义插件。除了 CSS 之外，stylelint 还能够解析 SCSS，并且实验性地支持 Less 格式，这降低了大多数现有代码库采用它的门槛。

一旦您学会了 ESLint，考虑到它们的相似性，学习 stylelint 将会毫不费力。stylelint 目前正被 Facebook、Github 和 WordPress 等大公司使用。

预计学习时间：2 – 3 天（每天 3 – 4 小时）。

学习链接

替代方案

格式化代码 – Prettier

另一个用于强制 JavaScript 和 CSS 保持一致编码风格的工具是 Prettier。

大多数情况下，建议在 ESLint 和 stylelint 的基础上构建 Prettier，并将其集成到工作流程中。这样可以通过提交钩子自动将代码格式化为一致的样式，开发人员无需花费时间手动调整代码风格。

请注意，Prettier 仅强制执行代码风格，而不会检查代码中的逻辑错误。因此，它不能替代 linters。

预计学习时间：2-3 天（每天 3-4 小时）。为你的代码编辑器添加 Prettier 扩展。

学习链接

测试 – Jest + Enzyme

以上所有内容都有助于防止错误/运行时错误，但一旦构建完成，就必须进行测试以确保其满足所有要求并按预期工作。

Jest是 Facebook 推出的测试库，旨在让测试过程变得轻松无痛。与 Facebook 的其他项目一样，它提供了开箱即用的出色开发体验。测试可以并行运行，从而缩短测试时间。在监视模式下，默认情况下，只运行已更改文件的测试。我们特别喜欢的一项功能是“快照测试”。Jest 可以保存 React 组件和 Redux 状态的生成输出，并将其保存为序列化文件，这样您就无需手动生成预期输出。Jest 还内置了模拟、断言和测试覆盖率功能。一个库搞定一切！

React 自带了一些测试工具，但Airbnb 开发的Enzyme可以通过类似 jQuery 的 API 更轻松地生成、断言、操作和遍历 React 组件的输出。建议使用 Enzyme 来测试 React 组件。

Jest 和 Enzyme 让编写前端测试变得轻松有趣。当编写测试变得轻松愉快时，开发人员会编写更多测试。React 组件和 Redux Action/Reducer 的职责和接口定义清晰，因此测试起来也相对容易。对于 React 组件，我们可以测试给定一些 props 后，所需的 DOM 是否渲染完成，以及回调函数是否在某些模拟用户交互时触发。对于 Redux Reducer，我们可以测试给定一个先前状态和一个 Action 后，是否生成最终状态。

Jest 和 Enzyme 的文档非常简洁，阅读一下就足以了解它们。

预计学习时间：7 – 10 天（每天 3 – 4 小时）。

学习链接

替代方案

部署和托管

版本控制系统 – GIT

Git是一款用于跟踪任意文件集更改的软件，通常用于在软件开发过程中协调协作开发源代码的程序员之间的工作。其目标包括速度、数据完整性以及对分布式非线性工作流（在不同系统上运行的数千个并行分支）的支持。

从它的定义中，你应该已经明白了为什么使用 GIT，它帮助我们追踪文件和文件夹。如果项目中的任何部分有任何添加或修改，你都可以使用 git 进行追踪。

您的本地系统上会跟踪更改，并与维护整个代码库的远程存储库（中央系统）相对应。

当我们团队合作时，每个人都负责不同的工作，因此我们需要一个中央代码库来维护整个代码库。代码更改完成后，您可以将更改推送到中央代码库，并根据需要拉取其他代码。

GitHub是一家使用 Git 进行软件开发和版本控制的互联网托管服务提供商。所有主流云服务提供商都提供自己的中央存储库存储服务。

熟悉基本的 git 命令对于在协作环境中工作非常重要。

预计学习时间：7 – 10 天（每天 3 – 4 小时）。

学习链接

替代方案

包管理 – NPM

优秀的开发人员会做聪明的工作而不是辛苦的工作，如果已经构建了某些东西，那么明智的做法是利用它而不是自己构建一些东西。

因此，为了下载和管理所有这些，我们需要一个包管理器。Npm （Node 包管理器）是由 npm, Inc. 维护的 JavaScript 编程语言包管理器。

Npm 是 JavaScript 运行时环境 Node.js 的默认包管理器。它由一个命令行客户端（也称为 npm）和一个包含公共和付费私有包的在线数据库（称为 npm 仓库）组成。可以通过客户端访问仓库，并通过 npm 网站浏览和搜索可用的包。包管理器和仓库由 npm, Inc. 管理。

所有使用 npm 下载的包都注册在package.json文件中，并且文件和文件夹都存储在里面node_modules。

package-lock.json是另一个文件，每次向项目添加新包时都会更新。它会在 npm 修改node_modules树 或 的任何操作时自动生成package.json。它描述了生成的确切树，以便后续安装能够生成相同的树，无论中间依赖项如何更新。

该文件旨在提交到源存储库中，并用于多种用途：

  • 描述依赖关系树的单一表示，以保证团队成员、部署和持续集成安装完全相同的依赖关系。-为用户提供一种“时间旅行”功能，使其能够回到 node_modules 的先前状态，而无需提交目录本身。-通过可读的源代码控制差异，提高树更改的可见性。-通过允许 npm 跳过对先前安装的软件包的重复元数据解析来优化安装过程。

预计学习时间：3 – 4 天（每天 3 – 4 小时）。

学习链接

选择

构建系统 – webpack

这部分内容会尽量简短，因为设置 webpack 可能是一个繁琐的过程，对于那些已经被前端开发中大量新知识压得喘不过气的开发者来说，可能会让他们望而却步。简而言之，webpack 是一个模块打包器，它将前端项目及其依赖项编译成最终的打包文件，提供给用户。通常情况下，项目已经设置好了 webpack 的配置，开发者很少需要更改它。但从长远来看，了解 webpack 仍然大有裨益。热重载和 CSS 模块等功能正是得益于 webpack 才得以实现。

我们发现SurviveJS的 webpack 教程是学习 webpack 的最佳资源。它是官方文档的良好补充，我们建议先学习教程，之后需要进一步定制时再参考官方文档。

预计学习时间：7 – 10 天（每天 3 – 4 小时）。

学习链接

替代方案

部署 – CI/CD

当您将代码提交到 github 并且您的拉取请求获得批准并合并到代码库中时，在将其部署到任何云服务之前，它必须再次生成构建和运行测试集，以确保生产过程中不会出现问题。

为此，我们经常使用工具来帮助我们进行持续集成和部署。Jenkins 是最受欢迎的持续集成和持续交付服务器提供商之一。

它可以帮助我们运行：

  • 为项目运行 linting。
  • 运行项目的单元测试。
  • 如果所有测试用例都通过，则使用 webpack 生成一个生产包到构建目录中。

一旦设置和配置完成，它可以自动/手动触发以运行构建管道，并且一旦生成构建，就可以使用发布管道进行部署。

通常有一个单独的团队（Devops）负责配置和设置 CI/CD 环境，但如果你愿意，仍然可以学习。熟悉一些基本知识总是好的。

预计学习时间：3 – 4 天（每天 3 – 4 小时）。

学习链接

替代方案

托管和 CDN

传统上，收到网页请求的 Web 服务器会在服务器上渲染内容，并返回一个包含动态内容的 HTML 页面供请求者使用。这被称为服务器端渲染。正如前面“单页应用”部分所述，现代 Web 应用程序不涉及服务器端渲染，使用提供静态资源文件的 Web 服务器即可。Nginx 和 Apache 都是可行的选择，并且无需太多配置即可启动和运行。需要注意的是，Web 服务器必须配置为将所有请求路由到单个入口点，并允许客户端路由接管。前端路由的流程如下：

  • Web 服务器接收针对特定路由的 HTTP 请求，例如/user/john。
  • 无论服务器接收哪条路由，index.html都从静态资产目录提供服务。
  • 应该index.html包含加载处理客户端路由的 JavaScript 框架/库的脚本。
  • 客户端路由库读取当前路由，并与 MVC（或相关的等效框架）框架沟通当前路由。
  • MVC JavaScript 框架会根据路由渲染所需的视图，必要时可能还会从 API 获取数据。例如，加载UsersController，获取用户名 john 的用户数据（以 JSON 格式），将数据与视图合并，然后渲染到页面上。

提供静态内容的一个好做法是使用缓存并将其放在 CDN 上。我们使用Amazon Simple Storage Service (S3)托管静态网站内容，并使用Amazon CloudFront作为 CDN。我们发现这是一个经济实惠且可靠的解决方案，能够满足我们的需求。

S3 提供了“使用此存储桶来托管网站”选项，该选项实质上将所有路由的请求定向到存储桶的根，这意味着我们不需要具有特殊路由配置的自己的 Web 服务器。

我们在 S3 上托管的 Web 应用程序的一个示例是Hub。

除了托管网站之外，我们还使用 S3 来托管每次成功的 CI 构建生成的构建文件。

在 Visual Studio Code 中使用扩展，您可以直接在 Azure 上部署静态站点并托管它。

预计学习时间：3 – 4 天（每天 3 – 4 小时）。

学习链接

替代方案

高级主题

静态类型 – Typescript

静态类型在编写应用程序时带来诸多好处。它们可以及早发现代码中常见的 bug 和错误。类型还可以作为代码的文档形式，提高代码的可读性。随着代码库的不断扩大，我们越来越意识到类型的重要性，因为它们能让我们在重构时更有信心。当每个对象持有什么样的值以及每个函数的期望是什么时，团队的新成员加入项目也会变得更加容易。

为代码添加类型会带来语法冗长和学习难度的双重负担。但这种学习成本是预先付出的，并会随着时间的推移而摊销。在代码可维护性至关重要且开发人员会随时间推移而变化的复杂项目中，添加类型带来的益处大于弊端。

在 JavaScript 中添加静态类型方面，目前最有竞争力的两个语言是 Facebook 的 Flow 和微软的 TypeScript。目前为止，这场战斗还没有明显的胜负。

你可以选择其中任何一种，但我个人更喜欢 TypeScript。它是 JavaScript 的严格语法超集，并为 JavaScript 添加了可选的静态类型。TypeScript 专为开发大型应用程序而设计，可以转译为 JavaScript。由于 TypeScript 是 JavaScript 的超集，因此现有的 JavaScript 程序也可以是有效的 TypeScript 程序。

TypeScript 可用于开发客户端和服务器端执行的 JavaScript 应用程序（与 Node.js 或 Deno 类似）。有多种转编译选项可供选择。您可以使用默认的 TypeScript 检查器，也可以调用 Babel 编译器将 TypeScript 转换为 JavaScript。

预计学习时间：7 – 10 天（每天 3 – 4 小时）。

学习链接

替代方案

移动应用程序开发 – React Native

现在，仅使用 HTML、CSS 和 JavaScript 即可创建跨设备的移动应用程序。这为 Web 开发人员迁移到不同平台并使用相同技术进行开发开辟了广阔的前景。

React Native 是一个用于构建原生移动应用的 JavaScript 框架。React Native 将 React 的声明式 UI 框架引入 iOS 和 Android 平台。借助 React Native，您可以使用原生 UI 控件并完全访问原生平台。

以下特性使得 React Native 成为一个不错的选择。

  • 声明式：React 让创建交互式 UI 变得轻而易举。声明式视图使你的代码更具可预测性，也更易于调试。
  • 基于组件：构建管理其状态的封装组件，然后将它们组合起来以形成复杂的 UI。
  • 开发者速度：数秒内即可查看本地更改。JavaScript 代码的更改可以实时重新加载，无需重建原生应用。
  • 可移植性：在 iOS、Android 和其他平台之间重复使用代码。

预计学习时间：20 – 30 天（每天 3 – 4 小时）。

学习链接

替代方案

桌面应用程序开发 – Electron JS

不仅移动应用，现在你还可以使用 HTML、CSS 和 JavaScript 来构建桌面应用。目前最流行的框架是ElectronJs。

ElectronJs 结合了Chromium 渲染引擎和Node.js运行时，允许使用 Web 技术开发桌面 GUI 应用程序。

Electron 应用程序包含多个进程。其中包括一个“主”进程和多个“渲染”进程。主进程运行应用程序逻辑，并可以启动多个渲染进程，渲染 HTML 和 CSS 文件，从而呈现用户屏幕上显示的窗口。

如果启用，主进程和渲染进程都可以与 Node.js 集成一起运行。

Electron 的大部分 API 都是用 C++ 或 Objective-C 编写的，然后通过 JavaScript 绑定直接暴露给应用程序代码。

预计学习时间：20 – 30 天（每天 3 – 4 小时）。

学习链接

替代方案

服务器端渲染 – Next.js

在利用服务器和客户端解耦开发能力的同时，进行服务器端渲染仍然是一个可行的选择，或者两者兼顾，一部分内容可以在服务器端渲染，另一部分内容可以根据客户端的需求进行更新。这确实有助于提升应用程序的性能。

Next.js是一个基于 Node.js 构建的开源开发框架，支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。React 文档将 Next.js 列入“推荐工具链”中，并建议开发人员在“使用 Node.js 构建服务器端渲染网站”时将其作为解决方案。传统的 React 应用程序在客户端浏览器中渲染所有内容，而 Next.js 则用于扩展此功能，使其涵盖在服务器端渲染的应用程序。

预计学习时间：10 – 20 天（每天 3 – 4 小时）。

学习链接

替代方案

渐进式 Web 应用程序 (PWA)：Web 开发的未来。

渐进式 Web 应用程序 (PWA) 是一种通过 Web 交付的应用软件，使用 HTML、CSS 和 JavaScript 等常见 Web 技术构建。它旨在适用于任何使用符合标准的浏览器的平台，包括桌面设备和移动设备。

渐进式 Web 应用程序 (PWA) 使用现代 API 构建和增强，以提供增强的功能、可靠性和可安装性，同时通过单一代码库覆盖任何设备上的任何人、任何地点。

渐进式网页应用

PWA 的三大应用支柱：

  • 功能强大：在现代 API、WebAssembly 以及新的和即将推出的 API 之间，Web 应用程序比以往任何时候都更加强大，而且这些功能还在不断增长。
  • 可靠：无论网络如何，可靠的渐进式 Web 应用程序都感觉快速且可靠。
  • 可安装：已安装的渐进式 Web 应用在独立窗口中运行，而非浏览器标签页。它们可从用户的主屏幕、Dock、任务栏或工具架启动。您可以在设备上搜索这些应用，并使用应用切换器在它们之间切换，让它们感觉像是安装设备的一部分。

什么才是优秀的渐进式 Web 应用程序？

  • 快速启动，持续保持：性能对于任何在线体验的成功都至关重要，因为高性能网站比性能低下的网站更能吸引和留住用户。网站应该专注于优化以用户为中心的性能指标。
  • 可在任何浏览器中运行：用户可以使用他们选择的任何浏览器在安装之前访问您的 Web 应用程序。
  • 响应任何屏幕尺寸：用户可以在任何屏幕尺寸上使用您的 PWA，并且所有内容都可以在任何视口尺寸上使用。
  • 提供自定义离线页面：当用户离线时，将他们保留在您的 PWA 中比返回到默认浏览器离线页面可提供更无缝的体验。
  • 可安装：在其设备上安装或添加应用程序的用户往往会更多地使用这些应用程序。
  • 完全可访问：所有用户交互均符合 WCAG 2.0 可访问性要求。
  • 可以通过搜索发现：您的 PWA 可以通过搜索轻松发现。
  • 适用于任何输入类型：您的 PWA 可同样通过鼠标、键盘、手写笔或触摸使用。
  • 为权限请求提供上下文：当请求使用强大 API 的权限时，提供上下文并仅在需要 API 时询问。
  • 遵循健康代码的最佳实践：保持代码库健康可以更轻松地实现您的目标并提供新功能。

预计学习时间：7 – 15 天（每天 3 – 4 小时）。

学习链接

杂项文章

本文基于Grab 的“前端指南”，我只是添加了一些额外的内容。

文章来源：https://dev.to/learnersbucket/industry-focused-roadmap-to-be-javascript-developer-2021-1m2b
Devto 翻译
PREV
Vanilla JS 代码片段
NEXT
我在隔离期间创建了 31 个 React 组件，这是在 React 中创建的不同组件的列表。