前端开发者手册2019

时间  2019-11-17
标签 前端 开发者 手册 栏目 职业生涯 繁體版
原文   原文链接

Cody Lindley 编著 原文地址javascript

本手册由Frontend Masters赞助，经过深刻现代化的前端工程课程来提升你的技能。css

下载：PDF | epubhtml

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

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

前端开发者手册2019

概要

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

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

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

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

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

在手册中有什么：

第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引擎。

这些环境的一些例子有:

注：

一、肯定你已经清楚地理解了“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测试的丰富经验。

注：

一、若是你在职称中遇到“全栈”或“网页开发者”这些术语，被雇主用于描述负责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 前端求职公告

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

注：

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

2.10 前端薪酬

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

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

注：

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程