前端开发者手册

前端开发者手册2019

Cody Lindley 编著 原文地址

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

下载：PDF | epub

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

完整文章，请访问 前端开发者手册2019

前端开发者手册2019

概要

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

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

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

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

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

在手册中有什么：

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

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

github.com/FrontendMas…

第0章 回顾2018并展望未来

0.1 回顾2018

0.2 展望2019

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

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

Web前端开发，也称为客户端开发，是为网站或Web应用程序生成HTML、CSS和JavaScript的实践，以便用户可以直接看到它们并与之交互。与前端开发相关的挑战是，用于前端创建网站的工具和技术不断变化，因此开发者需要持续了解该领域是如何发展的。

设计一个网站的目的，就是确保当用户打开网站时，看到的信息被格式化成易于阅读且相关联的。更复杂的是，现在用户使用大量、不同的屏幕尺寸和分辨率的设备，从而迫使设计师在设计网站的时候不得不考虑这些问题，他们需要确保页面能够在不同的浏览器(跨浏览器)、不同的操作系统(跨平台)和不同的设备(跨设备)中正确运行，这就需要开发者进行仔细的规划。

— 维基百科

图片来源：www.upwork.com/hiring/deve…

前端开发者...

前端开发者使用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 如何成为一名前端开发者

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

图片来源: github.com/kamranahmed…

现在一般来说，没人会指望大学毕业能取得前端工程学位。而且，我很少听到或见到有前端开发者，他们可能拥有一个不受欢迎的计算机科学学位或平面设计学位，最终却要专业地编写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技能

下面是被前端开发者所使用的核心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 潜在的前端开发者技能

图片来源：blog.naustud.io/2015/06/bas…

对于任何一种专业类型的前端开发者角色，假设已经具备对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浏览器)上：

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

  • 台式电脑

  • 手提电脑和上网本

  • 手机

  • 平板电脑

  • 电视

  • 手表

  • 其他（例如：任何能想象的到的东西，汽车、冰箱、电灯、恒温器等等）

图片来源:www.enterpriseirregulars.com/104084/roun…

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

2.6 团队的前端

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

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

  • 视觉设计师（字体、色彩、间距、表情、视觉概念与主题）

  • UI设计师、交互设计师、信息体系结构师（线框，指定所有用户的交互和UI功能，结构化信息）

  • 前端开发者（编写可以运行在客户端或设备上的代码）

  • 后端开发者（编写运行在服务器的代码）

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

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

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

  • SEO分析师

  • 开发运维工程师

  • 性能工程师

  • API开发者

  • 数据库管理员

  • QA工程师或测试员

2.7 全栈开发者

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

图片来源: medium.freecodecamp.com/we-asked-15…

图片来源: insights.stackoverflow.com/survey/2017…

设计和开发一个网站或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测试你的薪水范围）

完整文章，请访问 前端开发者手册2019

关注下面的标签，发现更多相似文章
 
前端
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mouseleo/p/11060657.html