Cody Lindley 编著 原文地址

本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。

下载：PDF | epub

翻译&校验：neekychan(微博) 和 freedom

前端开发者手册2019 - 图1

概要

这是一本每个人都可以用来学习前端开发实践的指南。它大致总结和讨论了前端工程的实践：如何学习它以及在2019年实践它时会使用到的工具。

它是专门为以后准备从事前端开发和目前正在实践前端开发的人提供专业的学习材料和开发工具等资源而编写的。其次，它可以被管理人员、CTO、讲师和猎头用来了解前端开发的实践。

本手册的内容包含Web技术（HTML、CSS、DOM 和 JavaScript）及直接构建在这些开源技术之上的解决方案。书中引用和讨论的材料要么是课堂上最好的，要么是解决问题的最新材料。

本书对于前端开发者而言，不应该被认为是对所有资源的综合概述。其价值在于对足够多的分类信息进行简洁、集中、及时地整合，以免有人会偏向于某个领域苦苦探索。

这本手册的内容更新每年发布一次。到目前为止，这已经是第四年发布的版本。

在手册中有什么：

第0章介绍了今年前端开发的简要回顾和发展趋势。第1章和第2章简要介绍了前端开发的规则和实践。第3章和第4章组织并推荐了学习路径和资源。第5章组织和列出前端开发者使用的工具，第6章重点介绍前端信息的来源。

欢迎在Github中贡献内容、提供建议和修正：

https://github.com/FrontendMasters/front-end-handbook-2019

第0章 回顾2018并展望未来

0.1 回顾2018

0.2 展望2019

第1章 前端开发者是什么？

本章阐述了前端开发和前端开发者训练的基本说明。

Web前端开发，也称为客户端开发，是为网站或Web应用程序生成HTML、CSS和JavaScript的实践，以便用户可以直接看到它们并与之交互。与前端开发相关的挑战是，用于前端创建网站的工具和技术不断变化，因此开发者需要持续了解该领域是如何发展的。 设计一个网站的目的，就是确保当用户打开网站时，看到的信息被格式化成易于阅读且相关联的。更复杂的是，现在用户使用大量、不同的屏幕尺寸和分辨率的设备，从而迫使设计师在设计网站的时候不得不考虑这些问题，他们需要确保页面能够在不同的浏览器(跨浏览器)、不同的操作系统(跨平台)和不同的设备(跨设备)中正确运行，这就需要开发者进行仔细的规划。 — 维基百科

前端开发者手册2019 - 图2

图片来源：https://www.upwork.com/hiring/development/front-end-developer/

前端开发者…

前端开发者使用Web技术（HTML、CSS和JavaScript）来设计和开发网站以及Web应用，这些技术通常运行在开放的Web平台或作为非Web平台本地运行时环境(如React Native)。

一个人通过学习构建一个依赖于HTML、CSS和JavaScript的网站或Web应用程序进入前端开发领域。这些应用程序通常在Web浏览器中运行，但也能运行于无头浏览器、WebView或者的本地运行时环境中运行。下面将详析这四种运行时场景：

（最常见的）Web浏览器

Web浏览器是用来检索、展示、遍历WWW信息的软件。通常，浏览器运行在台式电脑或者笔记本电脑、平板电脑和手机上，但最近几乎能在任何设备（如冰箱、汽车等等）上找到浏览器。

最常见的Web浏览器（按使用次数排序）是：

无头浏览器

无头浏览器是一种没有图形用户界面的Web浏览器，可以通过命令行界面以编程方式控制该界面，以实现Web页面自动化(例如，功能测试、抓取、单元测试等)。
可以将无头浏览器看作可以从命令行以编程方式运行的浏览器，该命令行可以检索和遍历Web页面代码。

最常见的无头浏览器有：

webview

webview被用在原生操作系统上，在原生应用程序中运行Web页面。可以将webview想象成是网页浏览器的一个iframe或一个单标签，它被嵌入在设备里所运行的原生应用程序(例如，iOS、android、windows)中。

webview开发最常见的解决方案有:

  • Cordova (手机和平板的原生应用程序)
  • NW.js (桌面应用程序)
  • Electron (桌面应用程序)

Web原生技术

最后，前端开发者可以从Web浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。最近，开发环境正被设想成可以利用Web技术(例如，CSS和JavaScript)来构建原生应用程序，而不使用Web引擎。

这些环境的一些例子有:

注： 1、确定你已经清楚地理解了“Web平台”的含义。阅读“Web开放平台”的维基百科页面。探索构成Web平台相关的众多技术。

第2章 前端开发实践：概要

本章节将从“前端开发者是如何形成的”开始，分析并广泛讲述前端开发工程的实践。

2.1 如何成为一名前端开发者

如何成为一名前端开发者呢？这个非常复杂的问题，可以根据下面的路线图思考一下：

前端开发者手册2019 - 图3
图片来源: https://github.com/kamranahmedse/developer-roadmap

现在一般来说，没人会指望大学毕业能取得前端工程学位。而且，我很少听到或见到有前端开发者，他们可能拥有一个不受欢迎的计算机科学学位或平面设计学位，最终却要专业地编写HTML、CSS和JavaScript。在我看来，现在从事前端工作的大多数人似乎都是自学成才的，或者是从设计和计算机科学领域跨界进入前端领域的。

如果你现在想开始成为一名前端开发者，我将大致遵循以下的流程开始说明（第3章和第4章会深入学习资源的更多细节）。

  1. 大致了解Web平台是如何运作的。确保你了解HTML、CSS、DOM、JavaScript、域名、DNS、URL、HTTP、浏览器和服务器与客户端这些概念“是什么”和“使用在哪里”。不要从一开始就深入专研任何东西，只需要了解正在发挥作用的各个部分以及它们是如何组合在一起的。从构建简单的Web页面开始。
  2. 学习HTML
  3. 学习CSS
  4. 学习JavaScript
  5. 学习DOM
  6. 学习用户界面设计的基础原理 (UI模式、交互设计、用户体验设计和可用性)
  7. 学习CLI和命令行
  8. 学习软件工程的实践（例如，应用程序设计与架构、模板、Git、测试、监控、自动化、代码质量和开发方法论）
  9. 不要固执己见，用任何对你的大脑有意义的东西(例如，Webpack、React和Mobx)定制你的工具箱
  10. 学习Node.js

简单地说一下学习建议，在学习抽象概念前，先学习基础的底层技术。不要学习jQuery，先学DOM。不要学SASS，先学CSS。不要学习JSX，先学HTML，不要学TypeScript，先学JavaScript。不要学Handlebars，先学JavaScript ES6模板，不要学BootStrap，先学UI模式。

最近出现了许多未经认证的、昂贵的前端代码学校和训练营。这些学校通常是由那些来自官方学院的老师遵循传统教学模式授课（课程大纲、考试、小考、专题、小组专题和成绩等）。

谨记，如果你正考虑参加一个高价的培训项目，那就选择网上的吧！所有的知识你都可以从网上学到而且几乎不怎么花钱。然而，如果你需要某人告诉你如何低成本学习，你应该考虑传统的教师主导的课堂配置。除此之外，我不知道还有什么职业是可以通过互联网免费学习的、每月几美元的录像课程会员资格筛选费以及强烈的求知欲。

举个例子，如果你从今天就开始，以下有几个自学的资源供你选择：

当你准备开始的时候，你应该会对大部分复杂的内容感到担忧。抽象（例如，jQuery）落入错误的人手中，让人看起来是种高级的技能。但始终隐藏着一个事实，开发者对基础和底层的概念理解较差。

假设，在这个过程中你不单只是学习，也在实践你所学和研究的工具。有些人建议实践只是为了学习，当其他人建议只学习如何去实践的时候，我建议你找一种与你大脑运作方式相匹配的方法去实践。但是，可以肯定的是，这是一种融合。所以，不要只看不实践。学习，实践。学习，实践。不停地重复，因为事情总是变化得很快。这就是为什么要学习基本原理而不是抽象概念十分重要。

2.2 前端职称

最近几年来，两种不同类型的前端开发者之间，在前端领域一直存在着巨大分歧。一方面，专注于JavaScript的程序员，他们为前端运行时编写JavaScript，他们可能拥有计算机科学技能和软件开发背景。他们很可能视HTML和CSS为一种抽象（例如，JSX和CSS in JS）。另一方面，很可能是非计算机科学出身的开发者，他们专注于HTML，CSS和JavaScript，因为它们专门属于UI。在2019年，进入或尝试了解前端开发者领域时，你能绝对能感受到这种分歧。“前端开发者”这个术语没有明确的定义，没有明确的词语来说明正在讨论的是哪种类型的前端开发者。

以下是各种前端职称的列表和描述（记住职称是很难）。最常用的前端开发者职称是，“前端开发者”或“前端工程师”。注意，任何带有“前端”，“客户端”，“Web UI”，“HTML”，“CSS”或“JavaScript”字眼职位的人，通常是指在HTML，CSS，DOM和JavaScript上有一定程度专业知识的人。

前端开发者：描述在一定程度上精通HTML、CSS、DOM和JavaScript并在Web平台上实现这些技术的开发者的通用职称。

前端工程师（JavaScript开发者或全栈JavaScript开发者）：这个职称授予给来自计算机科学、工程学背景，且能使用这些技术进行前端工作的开发者。这种角色一般要求具备计算机科学知识和多年的软件开发经验。当职称中包含“JavaScript应用程序”时，表明需要开发者必须是具有高级编程、软件开发和应用程序开发技能的高级JavaScript开发者，同时也拥有多年构建前端软件应用的经验。

CSS和HTML开发者：这个前端职称描述的是除了JavaScript和应用程序之外，开发者对HTML和CSS具有一定熟练度。

Web前端设计师：包含“设计师”的职称，表明设计师需要具备前端技能（HTML 和 CSS）以及专业的设计(视觉设计和交互设计)技能。

UI（用户界面）开发者或工程师：当头衔中包含“交互”和“UI”时，表明开发者除了应具备交互设计能力，还需具备前端开发者技能和前端工程师技能。

移动或平板电脑前端开发者：包含“移动”和“平板”的职称，有在移动或平板电脑设备运行的前端开发经验（要么是原生的，要么是在Web平台上，比如在浏览器上）。

前端SEO专家：包含“SEO”的职称，描述的是开发者具备以SEO策略来设计前端技术的丰富经验。

前端无障碍专家：包含“无障碍”的职称，描述的是开发者具备以支持无障碍要求和标准来设计前端技术的丰富经验。

前端运维开发：包含“运维开发”的职称，描述的是开发者具备与合作、集成、部署、自动化和质量相关软件开发实践的丰富经验。

前端测试或QA：包含“测试或QA”的职称，描述的是开发者具备测试和管理软件，包含单元测试，功能性测试，用户测试，A/B测试的丰富经验。

注： 1、如果你在职称中遇到“全栈”或“网页开发者”这些术语，被雇主用于描述负责Web或应用程序开发各个方面的角色。比如，前端（可能包括设计）和后端。

2.3 前端开发者必备的Web技能

前端开发者手册2019 - 图4

下面是被前端开发者所使用的核心Web技能（可以考虑按顺序学习它们）：

  1. 超文本链接（HTML）
  2. 层叠样式表（CSS）
  3. 同意资源定位（URLs）
  4. 超文本传输协议（HTTP）
  5. JavaScript编程语言（ECMAScript 262）
  6. JavaScript对象表示法（JSON）
  7. 文档对象模型（DOM）
  8. Web API（HTML5以及相关 或 浏览器API）
  9. Web内容无障碍指引（WCAG）& 无障碍的富网络应用程序（ARIA）

一个所有网页相关规范的综合性列表，请参阅platform.html5.org或MDN Web API。

下面是刚刚提到的9种技术的定义，并提供了每种技术的相关文档和规范的链接。

超文本标记链接（HTML）

超文本标记语言，通常称为HTML，是一种用于创建网页的标准标记语言。Web浏览器能读取HTML文件并将其渲染成看可视化或可听的网页。HTML描述了一个网站的结构语义以及表示的线索，使之成为一种标记语言而非编程语言。 - 维基百科 & 中文地址

大部分相关规范和文档：

层叠样式表（CSS）

层叠样式表（CSS）是一种样式表语言，用于描述用标记语言编写的文档的外观和格式。尽管经常用于改变用HTML和XHTML所编写的网页和用户界面的样式，该语言能应用于任何类型的XML文档，包括纯XML、SVG和XUL。与HTML和JavaScript一样，CSS是基础技术，被大部分网站用于创建具有视觉吸引力的网页、Web应用程序的用户界面以及许多移动应用程序的用户界面的基础技术。 — 维基百科 & 中文地址

大部分相关规范和文档：

超文本传输协议（HTTP）

超文本传输协议（HTTP）一种用于分布式、协作的，超媒体信息系统的应用层协议。HTTP是WWW的数据通讯的基础。 — 维基百科 & 中文地址

大部分相关规范：

统一资源定位（URL）

统一资源定位（URL）（也称为Web地址）是一种对资源的引用，指定了资源在计算机网络的位置和检索的机制。URL是一种特定类型的统一资源标识符(uniform resource identifier, URI)，尽管许多人将这两个术语混在一起使用。URL表示可访问指定资源的方法，但并非每个URI皆如此。URL常见于引用Web页面（http），但也用于文件传输(ftp)、电子邮件(mailto)、数据库访问(JDBC)和许多其他应用程序。 - 维基百科 & 中文地址

大部分相关规范：

文档对象模型（DOM）

文档对象模型(Document Object Model, DOM)是一种在跨平台和语言无关性的约定，用于表示HTML，XHTML和XML文档中的对象并与之交互。每个文档的节点都组织在一个树结构中，称为DOM树。可以使用对象上的方法对DOM树中的对象进行寻址和操作。DOM的公共接口在其应用程序编程接口(API)中指定。 - 维基百科 & 中文地址

大部分相关规范和文档：

JavaScript编程语言（ECMAScript 262）

JavaScript是一种高级、动态、无类型和解释的编程语言。它已通过ECMAScript实现语言的标准化。除了HTML和CSS，它也是万维网内容生产中三大基本技术之一。大多数网站中都采用这种技术，并且已被所有的现代Web浏览器所支持，不需要插件。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程、命令式编程以及函数式编程。它有一个用于处理文本、数组、日期和正则表达式的API，但不包括任何I/O操作，比如网络、存储或图形工具，这些都依赖于它所嵌入的主机环境。 - 维基百科 & 中文地址

大部分相关规范和文档：

Web API (HTML5以及相关)

当使用JavaScript为Web编写代码时，有非常多可用的API。下面列出了开发Web应用程序或站点时可能使用的所有接口(即对象类型)。 - Mozilla

大部分相关文档：

JavaScript对象表示法（JSON）

这是一种用于异步浏览器和服务器通信(AJAJ)的主要数据格式，在很大程度上替代了XML（被AJAX使用）。虽然JSON最初源于JavaScript脚本语言，但它是一种独立于语言的数据格式。解析和生成JSON数据的代码在许多编程语言中都是可用的。JSON格式最初由Douglas Crockford所制定。它目前由两个相互竞争的标准描述，RFC 7159和ECMA-404。ECMA标准非常简单，只描述允许的语法语法，而RFC还提供了一些语义和安全性方面的考虑。JSON的正式网络媒体类型是application/json。JSON的文件扩展名是.json。 - 维基百科 & 中文地址

大部分相关规范：

Web内容无障碍指南(WCAG)和无障碍的富互联网应用程序(ARIA)

无障碍是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了两者的“直接访问”(即和“间接访问”，意思是与某人的辅助技术(例如，计算机屏幕阅读器)的兼容性。 - 维基百科 & 中文地址

2.4 潜在的前端开发者技能

前端开发者手册2019 - 图5
图片来源：http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

对于任何一种专业类型的前端开发者角色，假设已经具备对HTML、CSS、DOM、JavaScript、HTTP、URL和Web浏览器这些基本技能的高级理解。

除了上述的技能，前端开发者可能还需要特别擅长以下一项或多项技能:

  • 内容管理系统(CMS)
  • Node.js
  • 跨浏览器测试
  • 跨平台测试
  • 单元测试
  • 跨设备测试
  • 无障碍和WAI-ARIA
  • 搜索引擎优化（SEO）
  • 交互或用户界面设计
  • 用户体验
  • 可用性
  • 电商系统
  • 门户系统
  • 线框图
  • CSS布局和网格
  • DOM操作（比如：jQuery）
  • 移动端的Web性能
  • 加载测试
  • 性能测试
  • 渐进式增强和优雅降级
  • 版本控制（比如：Git）
  • MVC、MVVM、MV*
  • 函数式编程
  • 数据格式 （比如：JSON，XML）
  • 数据API (比如：Restful API)
  • Web字体嵌入
  • 矢量图形（SVG）
  • 正则表达式
  • 微数据和微格式
  • 任务运行器，构建工具，自动化进程工具
  • 响应式网页设计
  • 面向对象编程
  • 应用程序框架
  • 模块
  • 依赖管理
  • 包管理
  • JavaScript动画
  • CSS动画
  • 图表和图形
  • UI部件
  • 代码质量测试
  • 代码覆盖测试
  • 代码复杂度分析
  • 集成测试
  • 命令行和CLI
  • 模板策略
  • 模板引擎
  • 单页应用
  • Web和浏览器安全性
  • 浏览器开发者工具

2.5 前端开发者跨设备开发

前端开发者使用HTML、CSS和JS，通常运行在以下操作系统(简称OS)的web平台(例如Web浏览器)上：

通常这些操作系统运行在以下一种或多种设备上：

  • 台式电脑
  • 手提电脑和上网本
  • 手机
  • 平板电脑
  • 电视
  • 手表
  • 其他（例如：任何能想象的到的东西，汽车、冰箱、电灯、恒温器等等）

前端开发者手册2019 - 图6

图片来源:https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/

普遍来说，前端技术能够运行在上述操作系统和使用在以下运行时的Web平台设备中：

2.6 团队的前端

前端开发者通常只是团队中设计和开发Web站点、web应用程序或基于web技术运行的原生应用程序的一员。

一个为Web平台构建专业Web站点或软件的开发团队，通常至少包含以下角色。

  • 视觉设计师（字体、色彩、间距、表情、视觉概念与主题）
  • UI设计师、交互设计师、信息体系结构师（线框，指定所有用户的交互和UI功能，结构化信息）
  • 前端开发者（编写可以运行在客户端或设备上的代码）
  • 后端开发者（编写运行在服务器的代码）

这些角色是依据重叠的技能排序的。前端开发者通常比后端开发更擅长于处理UI或交互设计以及后端开发。团队成员通过承担重叠角色的职责来担任多个角色的情况并不少见。

假设上面提到的团队是由项目负责人或某种产品负责人(即，利益相关者、项目经理、项目负责人等等)

一个更大的web团队可能包括以下上面没有提及到的角色:

  • SEO分析师
  • 开发运维工程师
  • 性能工程师
  • API开发者
  • 数据库管理员
  • QA工程师或测试员

2.7 全栈开发者

前端开发者手册2019 - 图7

全栈开发者这个称谓有几种含义。如此之多，以至于这个称谓尚未有一个明确的定义。仅考虑下面所展示的两个调查结果。这些结果可能更可信，成为一名全栈开发者是很常见的。但是，在我近20年的经验中，这绝不是专业领域的普遍情况。

前端开发者手册2019 - 图8

图片来源: https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz

前端开发者手册2019 - 图9

图片来源: https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types

设计和开发一个网站或web应用程序的角色需要在视觉设计、UI和交互设计、前端开发和后端开发等领域拥有深厚的技能和丰富的经验。任何能在专业水平上胜任以上这4个角色中的一个或多个的人都是极其罕见的。

从实用的角度来看，你应该寻求成为这些角色(视觉设计、交互设计或IA、前端开发、后端开发)之一的专家，或者寻求聘请这样的专家。那些声称在一个或多个这样的角色上具有专家水平的人是非常稀有的。

然而，考虑到JavaScript已经涵盖了技术栈的所有层面(即Node.js)，寻找一个既能开发前端和后端的全栈JS开发者已经不是那么神秘了。通常，这些全栈开发者只能解决JavaScript。一个能为前端、后端、API和数据库代码的开发者不再像以前那样荒谬(不包括视觉设计、交互设计和CSS)。在我看来依旧很神秘，但不再像以前那样不寻常。因此，我不建议开发者成为一名”全栈”开发者。在少数情况下，这行得通。但一般来说，作为一个塑造职业生涯的一般概念上前端开发者，我会专注于前端技术。

2.8 前端面试

准备：

测试:

你可能会被问到的问题:

你的提问:

2.9 前端求职公告

存在大量的技术职位招聘渠道。以下精简的列表是当前用于寻求前端职位/职业最相关资源。

注： 1、想作为一个前端开发者进行远程工作，留意这些相关的远程办公公司。

2.10 前端薪酬

美国全国的平均水平，一个中级前端开发者的薪酬在6.5万美元到10万美元之间。

当然，对于刚刚进入前端领域的新人来说，大概是40K美元，这取决于你工作的地点和经验。

注： 1、一个领导级别或者高级的前端开发者或工程师可以住他想住的任何地方（也就是远程办公）而且年薪超过15万美元（访问angel.co、注册、留意超过15万美元年薪的前端职位或在Stack Overflow Jobs测试你的薪水范围）

第3章 学习前端开发：自学资源和建议

本章重点介绍了个人可以用来指导自己的学习过程和成为职业的前端开发者的许多资源（视频培训，书籍等）。

所有的学习资源（文章，书籍，视频，截屏视频等）将包括免费和付费资料之分。 付费材料将以[付费]表示。

3.1 学习互联网Web

互联网是一个互联计算机网络的全球系统，它使用互联网协议套件（TCP/IP）连接全球数十亿台设备。 它是一个由数百万个本地到全球范围的私人、公共、学术、商业和政府网络组成的网络中的网络，通过广泛的电子、无线和光纤网络技术相互连接。 因特网承载广泛的信息资源和服务，例如互联超文本文档和万维网（WWW）的应用、电子邮件、电话和用于文件共享的对等网络。 — 维基百科 & 中文地址

前端开发者手册2019 - 图10

图片来源: https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/

前端开发者手册2019 - 图11

图片来源: http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/

3.2 学习Web浏览器

Web浏览器（通常称为浏览器）是用于在万维网上检索，呈现和遍历信息资源的软件应用程序。 信息资源由统一资源标识符（URI/URL）标识，并且可以是网页、图像、视频或其他内容。 资源中存在的超链接使用户能够轻松地将其浏览器导航到相关资源。 虽然浏览器主要用于万维网，但它们也可用于访问私有网络中的Web服务器或文件系统中的文件提供的信息。 — 维基百科 & 中文地址

（在桌面和移动设备上）最常用的浏览器是：

  1. Chrome（引擎：Blink + V8）
  2. Firefox（引擎：Gecko + SpiderMonkey）
  3. Internet Explorer（引擎：Trident + Chakra）
  4. Safari（引擎：Webkit + SquirrelFish）

前端开发者手册2019 - 图12

图片来源: http://gs.statcounter.com/browser-market-share

浏览器和Web技术（API）的演变

最常用的无头浏览器是：

浏览器如何工作

浏览器优化：

浏览器比较

浏览器Hack

浏览器开发

前端开发者过去花了很多时间在几个不同的浏览器中开发代码。 这个问题曾经比今天严重多了。 现在，抽象工具（例如，React，Webpack，Post-CSS，Babel等）与现代浏览器相结合，使浏览器开发变得相当容易。 新的挑战不是用户将使用哪种浏览器，而是他们将在哪个设备上运行浏览器。

安全浏览器

大多数现代浏览器的最新版本被认为是安全浏览器。 也就是说，理论上，它们应该在不提示用户的情况下自动更新。 这种向自我更新浏览器的转变一直是对不自动更新的旧浏览器缓慢替代的过程。

浏览器的选择

截至今天，大多数前端开发者使用Chrome和“Chrome Dev Tools”来开发前端代码。 但是，最常用的现代浏览器都提供了一种开发者工具。 选择哪一个作为开发工具是主观的。 更重要的问题是知道有哪些浏览器，你必须支持哪些设备，然后进行适当的测试。

3.3 学习域名系统（DNS）

域名系统（DNS）是用于计算机、服务、连接到Internet或专用网络的任何资源的分层分布式命名系统。 它将各种信息与分配给每个参与实体的域名相关联。 最重要的是，它将人们可以轻易记忆的域名转换为全球计算机服务和设备所需的数字IP地址。 域名系统是大多数互联网服务功能的重要组成部分，因为它是互联网的主要目录服务。 - 维基百科 & 中文地址

前端开发者手册2019 - 图13

图像来源: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg

3.4 学习HTTP网络协议（包括CORS和WebSockets）

HTTP — 超文本传输协议（HTTP）是用于分布式协作超媒体信息系统的应用程序协议。 HTTP是万维网数据通信的基础。 — 维基百科 & 中文地址

HTTP说明

HTTP文档

HTTP视频、文章和教程

HTTP状态码

CORS — 跨域资源共享（CORS）是一种允许从来自资源的域外的另一个域请求网页上的受限资源（例如，字体）的机制。 — 维基百科 & 中文地址

CORS说明

CORS

WebSocket — WebSocket是一种通过单个TCP连接提供全双工通信通道的协议。WebSocket协议在2011年由IETF标准化为RFC 6455，Web IDL中的WebSocket API由W3C标准化。 — 维基百科 & 中文地址

WebSocket

3.5 学习虚拟主机

网络托管服务是一种互联网托管服务，允许个人和组织通过万维网访问其网站。 Web主机是指在客户使用或租用的服务器上提供空间以及提供Internet连接（通常在数据中心中）的公司。 — 维基百科 & 中文地址

基础学习：

前端开发者手册2019 - 图14

图片来源: https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg

3.6 学习前端开发基础

3.7 学习用户界面和交互设计

用户界面设计 — 用户界面设计（UI）或用户界面工程是机器和软件（如计算机，家用电器，移动设备和其他电子设备）的用户界面设计，重点是最大化用户体验。 用户界面设计的目标是在完成用户目标（以用户为中心的设计）方面使用户的交互尽可能简单有效。 — 维基百科 & 中文地址

交互设计模式 — 设计模式是记录常见设计问题解决方案的正式方式。 这个想法是由建筑师克里斯托弗亚历山大介绍用于城市规划和建筑建造，并已适用各种其他学科，包括教学和教学，开发组织和过程，软件架构和设计。 — 维基百科 & 中文地址

用户体验设计 — 用户体验设计（UXD或UED或XD）是通过改善用户与产品之间交互中提供的可用性，可触达性和愉悦来提高用户满意度的过程。 用户体验设计包括传统的人机交互（HCI）设计，并通过解决用户所感知的产品或服务的所有方面来扩展它。 — 维基百科 & 中文地址

人机交互 - 人机交互（HCI）研究计算机技术的设计和使用，特别关注人（用户）和计算机之间的接口。 人机交互领域的研究人员都观察了人类与计算机交互的方式以及设计技术，这些技术可以让人类以新颖的方式与计算机进行交互。 — 维基百科 & 中文地址

我建议阅读以下关于此事的规范性文本，以便可以支持和有能力构建可用的用户界面。

3.8 学习HTML和CSS

HTML — 超文本标记语言，通常称为HTML，是用于创建网页的标准标记语言。 Web浏览器可以读取HTML文件并将其呈现为可见或可听的网页。 HTML在语义上描述了网站的结构以及用于表示的提示，使其成为标记语言，而不是编程语言。 — 维基百科 & 中文地址

CSS — 层叠样式表(CSS)是一种样式表语言，用于描述用标记语言编写的文档的外观和格式。 虽然最常用于更改用HTML和XHTML编写的网页和用户界面的样式，但该语言可以应用于任何类型的XML文档，包括纯XML，SVG和XUL。 与HTML和JavaScript一起，CSS是大多数网站使用的基础技术，用于创建具有视觉吸引力的网页，Web应用程序的用户界面以及许多移动应用程序的用户界面。 — 维基百科 & 中文地址

就像要建造房屋，人们可能会认为HTML是结构而CSS是绘画和装饰。

基础学习：

掌握CSS：

参考文献和文档：

词汇：

规范标准：

CSS框架：

书写规范

3.9 学习搜索引擎优化

搜索引擎优化（SEO）是影响搜索引擎未付费结果中网站或网页可见性的过程 - 通常称为“自然”，“有机”或“获得”结果。 通常，较早（或在搜索结果页面上排名更高），并且搜索结果列表中出现更频繁的网站，它将从搜索引擎的用户收到的访问者越多。 SEO可以针对不同类型的搜索，包括图像搜索，本地搜索，视频搜索，学术搜索，新闻搜索和行业特定的垂直搜索引擎。 — 维基百科& 中文地址

前端开发者手册2019 - 图15

图像来源: https://visual.ly/community/infographic/computers/how-does-seo-work

基础学习：

3.10 学习JavaScript

JavaScript是一种高级，动态，无类型和解释型编程语言。 它已在ECMAScript语言规范中标准化。 除HTML和CSS外，它还是万维网内容制作的三大基本技术之一; 大多数网站都使用它，所有没有插件的现代网络浏览器都支持它。 JavaScript是基于原型的第一类函数，使其成为一种多范式语言，支持面向对象，命令式和函数式编程风格。 它具有用于处理文本，数组，日期和正则表达式的API，但不包括任何I/O，例如网络，存储或图形工具，在嵌入它的主机环境中依赖它们。 — 维基百科& 中文地址

入门:

基础学习：

掌握：

JavaScript函数式:

参考文献和文档：

词汇/百科全书/专业术语：

标准/规范：

样式：

不推荐使用的JS学习资源：

JS搜索可视化:

3.11 学习DOM、BOM、CSSOM和jQuery

DOM — 文档对象模型（DOM）是一种跨平台且与语言无关的约定，用于表示HTML，XHTML和XML文档中的对象并与之交互。 每个文档的节点都以树结构组织，称为DOM树。 可以通过使用对象上的方法来寻址和操纵DOM树中的对象。 DOM的公共接口在其应用程序编程接口（API）中指定。 —维基百科 & 中文地址

BOM — 浏览器对象模型（BOM）是一种特定于浏览器的约定，指的是Web浏览器公开的所有对象。 与文档对象模型不同，没有标准的实现和严格的定义，因此浏览器供应商可以自由地以任何方式实现BOM。 — 维基百科 & 中文地址

jQuery — jQuery是一个跨平台的JavaScript库，旨在简化HTML的客户端脚本。 jQuery是目前使用最流行的JavaScript库，安装在网络上前1000万个流量最高的网站中的65％。 jQuery是根据MIT许可证授权的免费开源软件。 — 维基百科 & 中文地址

理想的学习路线，肯定是最困难的，首先学习JavaScript，然后是DOM，然后是jQuery。 但是，要做一些对你的大脑有意义的事情。 大多数前端开发者通过首先学习jQuery来学习JavaScript然后学习DOM。 无论你采取什么样的学习路线，都要确保JavaScript，DOM和jQuery不会变成黑盒子。

基础学习：

掌握：

参考文献/文档：

标准/规范：

3.12 学习Web动画

基础学习:

标准和规范：

3.13 学习Web字体、图标和图像

网络排版是指在万维网上使用字体。当HTML最初创建时，字体和样式完全由每个Web浏览器的设置控制。Netscape于1995年引入<font>标记之前，还没有任何单独的Web页面控制字体显示的机制，该标记随后被标准化为HTML 3.2规范。但是，标签指定的字体必须安装在用户的计算机上，或者使用备用字体，比如浏览器的默认sans-serif或monospace字体。1996年发布了第一个层叠样式表规范，提供了相同的功能。

1998年发布了CSS2规范，试图通过添加字体匹配、合成和下载来改进字体选择过程。这些技术没有得到太多的应用，并且在CSS2.1规范中被删除了。然而，在1997年Internet Explorer发布的4.0版本中增加了对字体下载功能的支持。字体下载后来包含在CSS3字体模块中，并在Safari 3.1、Opera 10和Mozilla Firefox 3.5中实现。这随后增加了人们对Web排版和字体下载的兴趣。 — 维基百科 & 中文地址

字体:

图标:

图像:

3.14 学习无障碍

无障碍是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了两者的“直接访问”(即，无辅助)和“间接访问”的意思是与某人的辅助技术(例如，计算机屏幕阅读器)的兼容性。

无障碍可以看作是“访问的能力”，并从某些系统或实体中获益。该概念的重点是使残疾人或特殊需要的人能够获得服务，或通过使用辅助技术使他们能够获得服务;然而，无障碍方面的研究和开发给每个人都带来了好处。

无障碍不要与可用性混淆，可用性是指特定用户可以在特定的使用上下文中使用产品(如设备、服务或环境)来实现特定目标的有效性、效率和满意度。

无障碍与通用设计密切相关，通用设计是一个创造产品的过程，使具有尽可能广泛的能力的人能够使用这些产品，并在尽可能广泛的情况下进行操作。这是为了让所有人(无论他们是否有残疾)都能接触到这些东西。 — 维基百科 & 中文地址

基础学习:

标准和规范:

3.15 学习Web API 和浏览器API

前端开发者手册2019 - 图16

图片来源: http://www.evolutionoftheweb.com/

BOM(浏览器对象模型)和DOM(文档对象模型)并不是浏览器内部唯一可以在Web平台上使用的浏览器API。所有不是特定的DOM或BOM，而是用于对浏览器进行编程的接口，都可以被看作是Web或Browser API(不幸的是，过去有些API被称为HTML5 API，它混淆了它们自己的特性和标准化，与指定HTML5标记语言的实际HTML5规范相混淆)。注意，Web或浏览器API确实包括设备API(例如，Navigator.getBattery())，这些API可以通过浏览器在平板电脑和手机设备上使用。

你应该了解Web API 和浏览器API，并在适当的地方学习它们。要熟悉所有这些API，可以使用一个很好的工具来研究HTML5test.com针对最流行的5个浏览器的测试结果。

MDN有大量关于Web API 和浏览器API的信息。

请记住，并非每个API都是由W3C或WHATWG指定的。

除了MDN之外，你可能还会发现以下资源对学习所有Web API 和浏览器API很有帮助:

3.16 学习JSON（JavaScript对象表示法）

JSON是一种开放的标准格式，它使用可读的文本来传输由属性值对组成的数据对象。它是用于异步浏览器/服务器通信(AJAJ)的主要数据格式，在很大程度上替代了XML(AJAX使用的就是这种方式)。

虽然JSON最初源于JavaScript脚本语言，但它是一种独立于语言的数据格式。解析和生成JSON数据的代码在许多编程语言中都是可用的。

JSON格式最初由Douglas Crockford指定。它目前有两个相互竞争的标准描述，RFC 7159和ECMA-404。ECMA标准非常简单，只描述允许的语法语法，而RFC还提供了一些语义和安全性方面的考虑。JSON的官方Internet媒体类型是application/json。JSON文件名扩展名是.json。 — 维基百科 & 中文地址

基础学习:

参考文献和文档：

标准和规范：

架构设计:

3.17 学习JS模板

JavaScript模板通常用于将视图的各个部分(UI)与逻辑和模型(数据或JSON)分离的MV*解决方案。

注意到JavaScript 2015(ES6)添加了一个名为“字符串模板”的原生模板机制。此外，最近模板已经被JSX、一个模板元素或HTML字符串之类的东西所取代。

如果我不使用React和JSX，我会首先使用JavaScript的“字符串模板”，当它也没有时，我会选择nunjucks。

3.18 学习静态站点生成器

静态站点生成器，通常使用服务器端代码(比如，ruby、php、python、nodeJS等)，从静态文本或数据+模板生成静态HTML文件，这些模板将静态地从服务器发送到客户端，而不具有动态性质。

基础学习:

3.19 通过JS学习计算机科学

3.20 学习前端应用程序架构

基础学习:

弃用学习的资料:

到目前为止，还没有多少关于这个主题的一般内容。学习如何构建前端、SPA和JavaScript应用程序的大部分内容都是假设你已经决定使用Angular、Ember、React或Aurelia等工具了。

2019年，这是我学习React和Mobx以及Apollo/graphql的建议。

3.21 学习数据API设计

3.22 学习React

React入门

精通React

一旦你熟练掌握React，就可以学习更健壮的状态管理方案，比如 MobX。如果你拥有丰富的函数式编程经验的开发者，请查看Redux。当你需要帮助去理解React的setState以外的状态管理方式，“React的高级状态管理（如：Redux和MobX）”

3.23 学习应用程序状态管理

3.24 学习渐进式网页应用（PWA）

与传统应用程序不同的是，PWA混合了普通网页（网站）和移动应用程序。这种新的应用程序模型试图将大多数现代浏览器提供的功能与移动体验的好处结合起来。 在2015年，设计师朗西斯·贝里曼(Frances Berriman)和Google Chrome工程师亚历克斯·拉塞尔(Alex Russell)创造了”PWA“这一术语，用此来描述利用现代浏览器所支持的新特性的应用程序，包括Service Workers和Web App Manifests，让用户将网页应用程序升级为原生操作系统的一等应用程序。 依据Google开发者的介绍，这些特性是：

  • 渐进式 - 适用于所有用户，不考虑浏览器的选择，因为其以渐进式增强为核心原则构建的。
  • 连通性独立 - 适用于任何形式：桌面、移动、平板或未出现的形式。
  • 类App - 对用于来说更像一款app，以其app风格的交互和导航。
  • 实时 - 得益于service worker更新进程，可以时刻保持更新。
  • 安全 - 通过HTTPS可以防止窥探和确保内容不被篡改。
  • 发现 - 得益于W3C manifests[6]和services woker注册范围允许搜索引擎检索到它们，可以识别为”应用程序“。
  • 重新接触 - 通过推送通知等特性可以轻易让用户重新接触。
  • 可安装的 - 允许用户在首屏中“保存”他们认为最有用的应用。免除了使用应用商店的麻烦。
  • 可链接的 - 通过URL可以轻易分享应用，并且不需要复杂的安装。

— 维基百科

3.25 学习JS API设计

3.26 学习浏览器网页开发者工具

网页开发者能使用网页开发工具进行测试和debug他们的代码。这与网站构建工具和IDE不同，它不是帮助开发者直接创造网页，而是用于去测试用户所看见的网站或网页应用界面的工具。 网页开发工具作为浏览器的插件或浏览器内置功能出现。现时最流行的网页浏览器,如Google Chrome、Firefox、Opera、Internet Explorer和Safari都内置了网页工具帮助来网页开发者，许多附加的插件都能在他们引以为傲的插件下载中心找到。 网页开发工具允许开发者使用各种网页技术，包括HTML，CSS，DOM，JavaScript以及网页浏览器处理的其他组件。由于对网页浏览器日益增长的需求，流行的网页浏览器已经包含了更多面向开发者的特性。 — 维基百科

虽然大部分浏览器都配备了网页开发者工具，但Chrome开发者工具是目前来说被谈及最多和最广泛使用的。

我建议学习和使用Chrome网页开发者工具，简单而言，因为最好的网页开发者工具学习资源都是以Chrome DevTools而展开的。

学习Chrome网页开发工具：

Chrome开发者工具文档：

3.27 学习命令行（CLI）

命令行界面或命令语言解释器（CLI），也叫做命令行用户界面，控制台用户界面和字符用户界面（CUI），是一种与用户（或客户端）的计算机程序交互的手段，以连续的文本行（命令行）的形式向程序发出命令。 — 维基百科

基础学习：

进阶学习：

3.28 学习Node.js

Node.js是一种开源，跨平台的运行时环境，用于开发服务端网页应用。Node.js程序是用JavaScript编写并且能运行在OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, IBM System z and IBM i上的Node.js运行时。它由Node.js基金会托管和支持，Linux基金会的一个合作性的项目。 Node.js提供一个事件驱动架构和一个非阻塞性 I/O API，被设计用于优化应用的通量和实时网页应用的可扩展性。它使用了Google V8 JavaScript引擎来执行代码，并且大比例的基础模块都是由JavaScript所编写。Node.js拥有一个内置的库，让应用程序无需使用诸如Apache HTTP服务器，Nginx或IIS等软件即可成为一个Web服务器。 — 维基百科

基础学习：

3.29 学习模块

基础学习：

参考文献与文档：

3.30 学习模块Loader和Bundler

Webpack:

Rollup:

Parcel:

3.31 学习包管理器

包管理器或包管理系统是一组软件集合的工具，它可以通过一致的方式自动执行安装，更新，配置以及移除计算机操作系统软件包的过程。它通常维护了一个软件依赖和版本信息的数据库，以防止软件无法匹配和丢失前置依赖。 — 维基百科

基础学习：

3.32 学习版本控制

软件配置管理组件，版本控制，也就是修正管理和源码管理，是一种对文档，计算机程序，大型网站和其他信息集合的变更管理。变更常用数字和字母代码表示，术语叫做“修订数字”，“修订等级”或“修订”。举个例子，一个初始的文档集是“修订1”，当产生第一个变更时，得到的集合就是“修订2”，如此类推。每个修订都与时间戳以及做修改的人有关。修订能够用来对比，复原和与某种类型的文件进行合并。 — 维基百科

Git是现今最常见用于版本控制解决方案。学习它吧！

基础学习：

进阶学习：

参考文献与文档：

3.33 学习构建和任务自动化

构建自动化是自动创建软件构建和相关过程的过程，包括：将计算机源代码编译为二进制代码、打包二进制代码和运行自动化测试。 - 维基百科 & 中文链接

基础学习：

参考文献与文档：

Gulp是伟大的。然而，你应该只需要执行npm run。在转向你应用程序栈的额外复杂性之前，你应该问一下自己，npm run是否可以完成这样工作。如果你需要更多功能，再使用Gulp。

阅读：

3.34 学习站点性能优化

Web性能优化，WPO或网站优化是关于提升那些在用户web浏览器中已下载和已展示web页面的速度的只是知识领域。随着全球平局网络速度的提升，网站管理者和站长应该考虑呈现给用户的网站耗时。 — 维基百科

基础学习：

3.35 学习测试

单元测试 - 在计算机编程中，单元测试是一种软件测试的方法，它是源代码的独立单元，一个或多个计算机程序模块集合，以及关联的控制数据，使用程序和操作程序，以确定他们是否适合可用。直观地，可以将单元视为程序中最小的可测试部分。 — 维基百科 & 中文地址 功能性测试 - 功能性测试是一种质量保证的过程和黑盒测试。其测试用例基于被测试软件组件的规范。功能通过提供输入和校验输出来进行测试，很少考虑其内部程序架构（与白盒测试不同）。功能性测试经常用来表示系统是做何用的？ — 维基百科 集成测试 - 集成测试（有时也叫做集成与测试，缩写I&T）是软件测试中的阶段，在这个阶段，单个软件模块被组合一起并以一组进行测试。这阶段出现于单元测试之后，校验测试之前。集成测试将已经单元测试的输入模块作为输入模块，将它们分组为更大的聚合，将集成测试计划中定义的测试应用于这些聚合，并将集成系统作为输出交付给系统测试。 - 维基百科

基础学习：

3.36 学习无头浏览器

无头浏览器指的是没有图形用户界面的web浏览器。 在一个类似于流行web浏览器环境下，无头浏览器提供web页面的自动化控制，但无头浏览器是通过命令行界面或使用网络通讯进行操作。无头浏览器对于测试web页面特别有用，正如普通浏览器一样能够渲染和理解HTML，包括样式化元素，如页面布局，色彩，字体选择，JavaScript和AJAX的执行，这在使用其他测试方法的时候往往不可用。Google在2019年声明，使用无头浏览器能够帮助他们的搜索引擎从使用AJAX的网站中索引内容。 — 维基百科

PhantomJS已不再维护，并由Headless Chrome接手。

3.37 学习离线开发

离线开发（又叫离线优先）是设备开发事件的一个知识点和讨论点，这些设备不会经常连接到互联网或电源。

基础学习：

3.38 学习Web安全、浏览器安全和应用程序安全

3.39 学习多设备开发

前端开发者手册2019 - 图17

图片来源: http://bradfrost.com/blog/post/this-is-the-web/

网站和网页应用能够运行在许多各种不同的计算机、手提电脑、平板电脑和手机上，也能运行在新式设备上（比如手表、温度调节器、冰箱等）。你确定你将会支持哪种设备以及怎样开发来支持这些设备，称为“多设备开发策略”。以下，我列举了最常见的多设备开发策略。

  • 为所有设备构建一个响应式（RWD）网站或应用程序。
  • 为所有设备构建一个可适配且渐进式增强的网站或应用程序。
  • 为了每个独立设备或一组设备构建一个网站，web应用，原生应用或混合应用。
  • 尝试使用策略1，2，3中的小部分和部分来改造你已经构建的东西。

基础学习：

第4章 学习前端开发：讲师指导资源和建议

本章重点介绍了通过前端开发学校、课程、计划和训练营等一些讲师指导学习的选择。

以下表格包含一小部分由教师指导的课程（计划、学校和训练营）。 使用该表可以大致了解可用的内容和课程的成本、持续时间和位置。 （请注意，信息可能会实时更新）

公司 方案 估计价格 现场支持 远程 周期
Betamore 前端Web开发 3,000 Baltimore, MD 10周
BLOC 成为前端开发者 4,999 是 16周(每周25小时) 或 32周(每周10小时)
General Assembly 前端Web开发 3,500 多个地点 8周，每周2天，每天3小时
Thinkful 前端Web开发 300/月 是 3个月，每周15小时
图灵软件设计学院 前端工程 20,000 Denver, CO 7个月全职

注：

  1. 有关评估学校、课程、计划和训练营的完整列表，请查看switchup.org或coursereport.com。

如果你负担不起（可能非常昂贵的）定向教育，使用回放屏幕录像、书籍和文章进行自学，也是自学前端开发的可行方法。

第5章 前端开发工具

本章讲述了行业的工具。 在研究工具本身之前，一定要了解一组工具所属的类别。请注意，仅仅因为列出了一个工具，或者记录了一类工具，这并不等于我认为前端开发者应该学习并使用它。 选择自己的工具箱。 我只是提供常见的工具箱选项而已。

5.1 Doc/API浏览工具

浏览常见的开发者文档和API参考工具。

备忘单：

5.2 SEO工具

常规SEO工具：

用于查找SEO工具的工具：

5.3 原型图和线框工具

创建：

协作和展示：

5.4 图表工具

5.5 HTTP和网络工具

5.6 代码编辑工具

源代码编辑器是一种文本编辑器程序，专门用于程序员编辑计算机程序的源代码。 它可以是独立的应用程序，也可以内置在集成开发环境（IDE）或者在Web浏览器中。 源代码编辑器是最基本的编程工具，因为程序员的基本工作是编写和编辑源代码。 - 维基百科

使用Notepad或者TextEdit等简单的文本编辑应用程序可以最低限度地编辑前端代码。但是，大多数前端从业者使用专门设计的代码编辑器来编辑编程语言。

可以这么说，代码编辑器有各种类型和大小。 选择哪一个都是相当主观的。 选择一个从里到外地学习，然后继续学习HTML、CSS、DOM和JavaScript。

但是，我坚信，代码编辑器应该具有以下特性（默认情况下或者通过插件）：

  1. 关于如何使用编辑器的良好文档
  2. 关于HTML、CSS和JavaScript的代码质量报告（即提示、校验和错误信息）。
  3. 为HTML、CSS和JavaScript提供语法高亮显示。
  4. 为HTML、CSS和JavaScript提供代码补全。
  5. 可以通过插件机制进行定制。
  6. 提供大型第三方插件库和社区插件库，可以根据自己的喜好自定义编辑器。
  7. 小巧、简单、不与代码耦合（即不需要编辑代码）。

代码编辑器：

在线代码编辑器：

可共享和可运行的简易代码编辑器：

用于共享有限数量的可立即运行的代码。不是真正的代码编辑器，而是用于在Web浏览器中共享少量可立即运行代码的工具。

我推荐使用Visual Studio Code，因为该工具的质量以及对编辑器的持续改进，其由Microsoft提供支持，因此不会停止它的维护和减慢它的更新速度。它被广泛使用：

前端开发者手册2019 - 图18

图片来源: https://2018.stateofjs.com/other-tools/text_editors

5.7 浏览器工具

修正浏览器的JS实用工具：

用于确定某个浏览器是否支持某个属性或者标签的常规参考工具：：

浏览器开发和调试工具：

用于确定某个浏览器是否支持某个对象的JavaScript实用程序：

浏览器广泛支持的Polyfill和Shim

浏览器的托管测试和自动化：

无头浏览器:

自动化浏览器

用于功能测试和monkey测试。

浏览器Hack

浏览器同步工具：

浏览器列表：

在不同的前端工具之间共享目标浏览器，例如Autoprefixer、Stylelint和babel-preset-env。

5.8 HTML工具

HTML模板、样板和新手入门学习工具包：

HTML Polyfill：

转译：

参考：

Linting和提示：

优化

在线创建、生成和实验的工具：

编码规范

工作流：

HTML大纲视图：

本月在GitHub上流行的HTML库：

https://github.com/trending?l=html&since=monthly

5.9 CSS工具

CSS实用工具:

CSS框架(实用工具 + UI):

纯移动端的CSS框架：

CSS重置：

CSS重置(又叫“重置CSS”)是一组简短的、通常经过压缩(缩小)的CSS规则，用于将所有HTML元素的样式重置为一致的基线。 —cssreset.com

转译：

参考文献:

校验和提示:

代码格式化和美化：

优化：

在线创建、生成和测试工具:

CSS架构设计：

编辑和框架约定：

风格指南资源：

CSS in JS:

本月在GitHub上流行的CSS库：

https://github.com/trending?l=css&since=monthly

5.10 DOM工具

DOM库和框架：

DOM实用工具：

DOM事件工具：

DOM性能工具：

参考文献：

DOM Polyfill和Shim:

虚拟DOM:

5.11 JavaScript工具

JS使用工具：

转换JavaScript对象工具:

转译和类型检查(ES to ES):

类型检查(ES to ES):

转译(ES to ES):

代码分析引擎：

校验提示和风格校验:

单元测试：

单元测试的测试断言：

用于单元测试的测试间谍、存根和Mocks:

代码格式化和美化：

性能测试：

可视化、静态分析、复杂度、覆盖工具：

优化:

混淆：

可分享和可运行的代码编辑器:

在线正则表达式编辑器和可视化工具:

编写规范工具：

本月在GitHub上流行的JS库：

https://github.com/trending?l=javascript&since=monthly

被依赖最多的NPM包：

https://www.npmjs.com/browse/depended

5.12 无头内容管理系统工具

站点生成器列表：

5.13 静态站点生成器工具

站点生成器列表：

5.14 无障碍工具

指南

网站扫描仪

颜色对比测试

低视力模拟器

屏幕阅读器

可读性测试

文章

5.15 应用程序框架（桌面、移动、平板电脑等）工具

前端应用程序框架:

原生混合移动WebView (即浏览器引擎驱动) 框架:

这些解决方案通常使用Cordova、crosswalk或者自定义WebView作为到原生API的桥梁。

原生混合移动开发Webview(即浏览器引擎驱动)环境、平台和工具:

这些解决方案通常使用Cordova、crosswalk或者自定义WebView作为到原生API的桥梁。

原生桌面应用程序框架:

原生移动应用程序框架(又叫JavaScript原生应用程序)

这些解决方案在运行时使用JS引擎来解释JS并将其连接到本地API。无需使用浏览器引擎或者WebView。UI由原生UI组件构造。

参考文献和演示应用程序:

性能：

如果你是前端JavaScript应用程序开发新手，我建议从Vue.js开始。然后我会把React应用到工作中。然后我也会学习 Angular 2+, Ember, or Aurelia。

如果你正在构建一个与数据交互最少的简单网站(主要是静态内容的网站)，那么应该避免使用前端框架。使用像Gulp and jQuery这样的任务运行器可以完成很多工作，同时避免了不必要的学习和使用应用程序框架工具的复杂性。

想要比“React”精巧的框架，考虑一下“Preact”。
Preact试图以用尽可能少的代码来重新创建React(或类似的库，如Mithril)的核心价值主张，并优先为ES2015提供支持。目前该库大约为3kb(minified和gzipped)。

5.16 管理JavaScript应用程序的工具

5.17 状态工具

5.18 渐进式Web应用程序工具：

5.19 GUI开发和构建工具

5.20 模板和数据绑定工具

模板:

模板和双向数据绑定:

虚拟DOM模板:

5.21 UI小部件和组件工具包

Web平台：

Web平台上React规范

原生桌面、笔记本电脑、上网本应用程序通过网络平台 (即NW.js和Electron一起使用):

如果需要一组基础UI小部件和组件，可以从Semantic UI开始。
如果你正在构建一些需要网格、电子表格或主网格的东西，你必须查看Kendo UI或者Webix。请记住，这些解决方案中的大多数仍然需要jQuery。

5.22 数据可视化（例如，图表）工具

JS库:

Widget和组件:

服务（用于嵌入和分享的托管数据可视化服务）：

5.23 图形（SVG、canvas、WebGL）工具

常规:

Canvas:

SVG:

WebGL:

5.24 动画工具

CSS和JavaScript实用工具：

Polyfills/Shims:

动画的参考文献：

5.25 JSON工具

在线编辑器：

格式化和验证：

查询工具：

生成模拟JSON工具:

在线JSON模拟API工具：

公开的JSON API列表：

本地JSON模拟API工具:

JSON规格和模式：

5.26 占位符内容工具

图像：

Device Mockups：

文本：

用户数据：

5.27 测试工具

软件测试框架：

单元测试：

单元测试的测试断言：

用于单元测试的测试监听，存根和模拟：

浏览器的托管测试和自动化：

集成和功能测试：

浏览器自动化：

UI测试工具：

死链和错误链接自动检测器：

HTTP存根

5.28 前端数据存储工具（即客户端中的数据存储解决方案）

5.29 模块加载和打包工具

5.30 模块和包源码仓库工具

5.31 托管工具

常规的

静态的

5.32 项目管理和代码托管工具

5.33 协作和通信工具

编码和GitHub协作与沟通：

5.34 内容托管管理和API工具

无头内容管理系统工具:

自托管的无头内容管理系统工具:

托管内容管理系统:

静态的内容管理系统工具:

5.35 后端和API工具

数据和后端服务，也叫BAAS：

数据和后端

用户管理服务：

搜索

5.36 离线工具

更多相关工具，请查看 这里。

5.37 安全工具

编码工具：

安全扫描仪/评估器/测试仪：

参考文献：

5.38 构建工具

任务或构建工具：

自用任务或构建工具：

在接触Gulp之前，确保npm scripts或yarn script是否符合要求。 请阅读“我为什么留下npm Scripts抛弃了Gulp和Grunt”。

5.39 部署工具

运行时监控：

常规监控工具：

5.41 JavaScript错误报告和监控

5.42 性能工具

报告：

JS工具：

预算：

参考文献和文件：

清单：

5.43 查找工具的工具

5.44 文档生成工具

第6章 前端社区、简报、新闻网站和播客

一般的前端简报、新闻和播客：

HTML/CSS简报：

JavaScript简报、新闻和播客：

前端社区

注： 1.需要更多简报、新闻网站和播客看看超赞咨讯。 2.通过搜索https://www.meetup.com/查找本地前端开发社区