摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。

Cody Lindley 編著 原文地址

本手冊由Frontend Masters贊助，通過深入現(xiàn)代化的前端工程課程來提高你的技能。

下載：PDF | epub

翻譯&校驗(yàn)：neekychan(微博) 和 freedom

完整文章，請?jiān)L問 前端開發(fā)者手冊2019

這是一本每個人都可以用來學(xué)習(xí)前端開發(fā)實(shí)踐的指南。它大致總結(jié)和討論了前端工程的實(shí)踐：如何學(xué)習(xí)它以及在2019年實(shí)踐它時會使用到的工具。

它是專門為以后準(zhǔn)備從事前端開發(fā)和目前正在實(shí)踐前端開發(fā)的人提供專業(yè)的學(xué)習(xí)材料和開發(fā)工具等資源而編寫的。其次，它可以被管理人員、CTO、講師和獵頭用來了解前端開發(fā)的實(shí)踐。

本手冊的內(nèi)容包含Web技術(shù)（HTML、CSS、DOM 和 JavaScript）及直接構(gòu)建在這些開源技術(shù)之上的解決方案。書中引用和討論的材料要么是課堂上最好的，要么是解決問題的最新材料。

本書對于前端開發(fā)者而言，不應(yīng)該被認(rèn)為是對所有資源的綜合概述。其價(jià)值在于對足夠多的分類信息進(jìn)行簡潔、集中、及時地整合，以免有人會偏向于某個領(lǐng)域苦苦探索。

這本手冊的內(nèi)容更新每年發(fā)布一次。到目前為止，這已經(jīng)是第四年發(fā)布的版本。

在手冊中有什么：

第0章介紹了今年前端開發(fā)的簡要回顧和發(fā)展趨勢。第1章和第2章簡要介紹了前端開發(fā)的規(guī)則和實(shí)踐。第3章和第4章組織并推薦了學(xué)習(xí)路徑和資源。第5章組織和列出前端開發(fā)者使用的工具，第6章重點(diǎn)介紹前端信息的來源。

歡迎在Github中貢獻(xiàn)內(nèi)容、提供建議和修正：

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

React在去年發(fā)布了幾個值得關(guān)注的版本，包括生命周期函數(shù)、context API，suspense、React hooks。

微軟終于收購了Github。

用CSS可以創(chuàng)建字體啦。

過去我稱之為前端驅(qū)動的應(yīng)用程序，被稱作“無服務(wù)”。不幸的是，這言過于實(shí)了。然而，JAMstack這個術(shù)語似乎確實(shí)引起了很多開發(fā)者的共鳴。

谷歌今年提供了一些簡潔的工具來幫助網(wǎng)頁加載更快，比如squoosh和quicklink

Vue今年比React獲得更多的Github star。但使用方面React仍然占據(jù)主導(dǎo)地位。

RE:DOM引入了一個類似于React的解決方案，但沒有使用虛擬DOM和JSX。

DeskGap和Neutralino.js作為NW.js和Electron的替代品出現(xiàn)。

2017年，HTML和CSS前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。2018年，分歧變得越來越大、越來越深，且越來越多人開始感受到這種分歧。

今年，和最近幾年一樣，有成堆的應(yīng)用和框架的解決方案嘗試角逐成為主流的JavaScript應(yīng)用程序工具（例如React、Angular、Vue等）讓我為你列舉一下，它們是Radi.js, DisplayJS, Stimulus, Omi, Quasar。

JavaScript框架開始提供自己的語言使其編譯成JavaScript（例如Mint）。

CodeSandbox逐漸成為在線代碼共享的主流解決方案。

CSS Grid和CSS Flexbox已經(jīng)完全被現(xiàn)代瀏覽器所支持，并且得到了一些重大的進(jìn)展。但許多人仍然對使用哪一種和如何使用存在困惑。

許多人已經(jīng)意識到使用類型體系（例如TypeScript和Flow）的長期成本。有些人得出的結(jié)論是，基于類型體系與基于模塊體系（如AMD、Require.js）并不一樣，前者帶來的問題遠(yuǎn)比其解決方案更多。至少，許多開發(fā)者意識到，如果在大型代碼庫中需要類型，那么與包含類型的語言(Reason、Purescript、Elm)相比，束縛在類型體系中并不理想。

CSS變量在現(xiàn)代Web瀏覽器當(dāng)中得到了支持。

CSS in JS風(fēng)格爆發(fā)了，有些人卻對此產(chǎn)生了質(zhì)疑。

ES模塊已經(jīng)可以在現(xiàn)代瀏覽器中使用，動態(tài)導(dǎo)入也即將支持。我們甚至看見圍繞這一事實(shí)的一些工具因此發(fā)生變化。

許多人認(rèn)識到端到端的測試方式是正確地進(jìn)行測試的起點(diǎn)，這在很大程度上要?dú)w功于Cypress(換而言之，先Cypress，再Jest)。

雖然Webpack今年再次被大量使用，但許多開發(fā)者發(fā)現(xiàn)Parcel更容易啟動和運(yùn)行。

今年最重要的問題之一是，JavaScript的成本是多少？

今年Babel 7 發(fā)布，這可是一件大事，因?yàn)榫嚯x上一次大版本發(fā)布已經(jīng)是三年前了。

大家意識到JavaScript變化太快的事實(shí)之后，開始談?wù)撛谀銓W(xué)習(xí)諸如React之類的東西之前需要知道什么。競爭是實(shí)實(shí)在在的。

大多數(shù)開發(fā)者通過Apollo發(fā)現(xiàn)了GraphQL，并將其視為數(shù)據(jù)API的下一個發(fā)展方向。

在NPM和Yarn上Gulp及其相關(guān)工具退居二線，但這并未能阻止微軟與Just合作。

今年，人們不僅可以lint/hint HTML、CSS和JavaScript，還可以對Web自身lint/hint。

《2018年前端工具調(diào)查報(bào)告》值得一讀，就算你僅僅是想了解jQuery還有多少使用量。

無可否認(rèn)，TypeScript今年收獲了大量用戶。

VScode成為了代碼編輯器的首選。

以后希望會有更多這樣的事情發(fā)生。“遠(yuǎn)離Sass”。

通過https://cssdb.org關(guān)注和學(xué)習(xí)CSS即將新增的功能（和可能新增的功能），仍然是一個不錯的主意。

Google的WebP圖像格式今年得到大部分現(xiàn)代瀏覽器的支持。

Prepack將繼續(xù)發(fā)展。

GraphQL將繼續(xù)被大量采用。

2019年，“JavaScript現(xiàn)狀”調(diào)查的作者將新增“CSS現(xiàn)狀”調(diào)查。

關(guān)注Web動畫API。

你認(rèn)識的人會嘗試說服你去使用TypeScript。

swc-project將會與Babel競爭一席之地。

JAMStack將會繼續(xù)。

一套代碼多端運(yùn)行的趨勢仍會繼續(xù)。

對于大型代碼庫，更多開發(fā)者將會轉(zhuǎn)向像ReasonML這樣的語言，而不是JavaScript或者TypeScript。

此外，越來越多項(xiàng)目開始拋棄jQuery，轉(zhuǎn)而使用原生DOM的解決方案。

Web組件!在這一點(diǎn)上，我不知道Web組件將如何發(fā)揮作用。事實(shí)是，它們不會消失，一旦炒作結(jié)束，他們就不能獲得太多的勢頭和使用。

本章闡述了前端開發(fā)和前端開發(fā)者訓(xùn)練的基本說明。

Web前端開發(fā)，也稱為客戶端開發(fā)，是為網(wǎng)站或Web應(yīng)用程序生成HTML、CSS和JavaScript的實(shí)踐，以便用戶可以直接看到它們并與之交互。與前端開發(fā)相關(guān)的挑戰(zhàn)是，用于前端創(chuàng)建網(wǎng)站的工具和技術(shù)不斷變化，因此開發(fā)者需要持續(xù)了解該領(lǐng)域是如何發(fā)展的。
設(shè)計(jì)一個網(wǎng)站的目的，就是確保當(dāng)用戶打開網(wǎng)站時，看到的信息被格式化成易于閱讀且相關(guān)聯(lián)的。更復(fù)雜的是，現(xiàn)在用戶使用大量、不同的屏幕尺寸和分辨率的設(shè)備，從而迫使設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站的時候不得不考慮這些問題，他們需要確保頁面能夠在不同的瀏覽器(跨瀏覽器)、不同的操作系統(tǒng)(跨平臺)和不同的設(shè)備(跨設(shè)備)中正確運(yùn)行，這就需要開發(fā)者進(jìn)行仔細(xì)的規(guī)劃。
— 維基百科

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

前端開發(fā)者...

前端開發(fā)者使用Web技術(shù)（HTML、CSS和JavaScript）來設(shè)計(jì)和開發(fā)網(wǎng)站以及Web應(yīng)用，這些技術(shù)通常運(yùn)行在開放的Web平臺或作為非Web平臺本地運(yùn)行時環(huán)境(如React Native)。

一個人通過學(xué)習(xí)構(gòu)建一個依賴于HTML、CSS和JavaScript的網(wǎng)站或Web應(yīng)用程序進(jìn)入前端開發(fā)領(lǐng)域。這些應(yīng)用程序通常在Web瀏覽器中運(yùn)行，但也能運(yùn)行于無頭瀏覽器、WebView或者的本地運(yùn)行時環(huán)境中運(yùn)行。下面將詳析這四種運(yùn)行時場景：

（最常見的）Web瀏覽器

Web瀏覽器是用來檢索、展示、遍歷WWW信息的軟件。通常，瀏覽器運(yùn)行在臺式電腦或者筆記本電腦、平板電腦和手機(jī)上，但最近幾乎能在任何設(shè)備（如冰箱、汽車等等）上找到瀏覽器。

最常見的Web瀏覽器（按使用次數(shù)排序）是：

Chrome

Safari

Internet Explorer (備注: 不含Edge, 特指IE9至IE11)

Firefox

Edge

無頭瀏覽器

無頭瀏覽器是一種沒有圖形用戶界面的Web瀏覽器，可以通過命令行界面以編程方式控制該界面，以實(shí)現(xiàn)Web頁面自動化(例如，功能測試、抓取、單元測試等)。
可以將無頭瀏覽器看作可以從命令行以編程方式運(yùn)行的瀏覽器，該命令行可以檢索和遍歷Web頁面代碼。

最常見的無頭瀏覽器有：

Headless Chromium

Zombie

slimerjs

puppeteer

webview

webview被用在原生操作系統(tǒng)上，在原生應(yīng)用程序中運(yùn)行Web頁面?？梢詫ebview想象成是網(wǎng)頁瀏覽器的一個iframe或一個單標(biāo)簽，它被嵌入在設(shè)備里所運(yùn)行的原生應(yīng)用程序(例如，iOS、android、windows)中。

webview開發(fā)最常見的解決方案有:

Cordova (手機(jī)和平板的原生應(yīng)用程序)

NW.js (桌面應(yīng)用程序)

Electron (桌面應(yīng)用程序)

Web原生技術(shù)

最后，前端開發(fā)者可以從Web瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。最近，開發(fā)環(huán)境正被設(shè)想成可以利用Web技術(shù)(例如，CSS和JavaScript)來構(gòu)建原生應(yīng)用程序，而不使用Web引擎。

這些環(huán)境的一些例子有:

Flutter

React Native

NativeScript

注：
1、確定你已經(jīng)清楚地理解了“Web平臺”的含義。閱讀“Web開放平臺”的維基百科頁面。探索構(gòu)成Web平臺相關(guān)的眾多技術(shù)。

本章節(jié)將從“前端開發(fā)者是如何形成的”開始，分析并廣泛講述前端開發(fā)工程的實(shí)踐。

如何成為一名前端開發(fā)者呢？這個非常復(fù)雜的問題，可以根據(jù)下面的路線圖思考一下：

圖片來源: https://github.com/kamranahmedse/developer-roadmap

現(xiàn)在一般來說，沒人會指望大學(xué)畢業(yè)能取得前端工程學(xué)位。而且，我很少聽到或見到有前端開發(fā)者，他們可能擁有一個不受歡迎的計(jì)算機(jī)科學(xué)學(xué)位或平面設(shè)計(jì)學(xué)位，最終卻要專業(yè)地編寫HTML、CSS和JavaScript。在我看來，現(xiàn)在從事前端工作的大多數(shù)人似乎都是自學(xué)成才的，或者是從設(shè)計(jì)和計(jì)算機(jī)科學(xué)領(lǐng)域跨界進(jìn)入前端領(lǐng)域的。

如果你現(xiàn)在想開始成為一名前端開發(fā)者，我將大致遵循以下的流程開始說明（第3章和第4章會深入學(xué)習(xí)資源的更多細(xì)節(jié)）。

大致了解Web平臺是如何運(yùn)作的。確保你了解HTML、CSS、DOM、JavaScript、域名、DNS、URL、HTTP、瀏覽器和服務(wù)器與客戶端這些概念“是什么”和“使用在哪里”。不要從一開始就深入專研任何東西，只需要了解正在發(fā)揮作用的各個部分以及它們是如何組合在一起的。從構(gòu)建簡單的Web頁面開始。

學(xué)習(xí)HTML

學(xué)習(xí)CSS

學(xué)習(xí)JavaScript

學(xué)習(xí)DOM

學(xué)習(xí)用戶界面設(shè)計(jì)的基礎(chǔ)原理 (UI模式、交互設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)和可用性)

學(xué)習(xí)CLI和命令行

學(xué)習(xí)軟件工程的實(shí)踐（例如，應(yīng)用程序設(shè)計(jì)與架構(gòu)、模板、Git、測試、監(jiān)控、自動化、代碼質(zhì)量和開發(fā)方法論）

不要固執(zhí)己見，用任何對你的大腦有意義的東西(例如，Webpack、React和Mobx)定制你的工具箱

學(xué)習(xí)Node.js

簡單地說一下學(xué)習(xí)建議，在學(xué)習(xí)抽象概念前，先學(xué)習(xí)基礎(chǔ)的底層技術(shù)。不要學(xué)習(xí)jQuery，先學(xué)DOM。不要學(xué)SASS，先學(xué)CSS。不要學(xué)習(xí)JSX，先學(xué)HTML，不要學(xué)TypeScript，先學(xué)JavaScript。不要學(xué)Handlebars，先學(xué)JavaScript ES6模板，不要學(xué)BootStrap，先學(xué)UI模式。

最近出現(xiàn)了許多未經(jīng)認(rèn)證的、昂貴的前端代碼學(xué)校和訓(xùn)練營。這些學(xué)校通常是由那些來自官方學(xué)院的老師遵循傳統(tǒng)教學(xué)模式授課（課程大綱、考試、小考、專題、小組專題和成績等）。

謹(jǐn)記，如果你正考慮參加一個高價(jià)的培訓(xùn)項(xiàng)目，那就選擇網(wǎng)上的吧！所有的知識你都可以從網(wǎng)上學(xué)到而且?guī)缀醪辉趺椿ㄥX。然而，如果你需要某人告訴你如何低成本學(xué)習(xí)，你應(yīng)該考慮傳統(tǒng)的教師主導(dǎo)的課堂配置。除此之外，我不知道還有什么職業(yè)是可以通過互聯(lián)網(wǎng)免費(fèi)學(xué)習(xí)的、每月幾美元的錄像課程會員資格篩選費(fèi)以及強(qiáng)烈的求知欲。

舉個例子，如果你從今天就開始，以下有幾個自學(xué)的資源供你選擇：

從Web開始 [閱讀]

你想這樣成為一名前端工程師嗎 [觀看]

前端大師學(xué)習(xí)之路 觀看

Web開發(fā)介紹 觀看

Treehouse理工大學(xué)學(xué)位 觀看

無學(xué)位的Web前端開發(fā)者 觀看

成為Web前端開發(fā)者 觀看

freeCodeCamp互動

當(dāng)你準(zhǔn)備開始的時候，你應(yīng)該會對大部分復(fù)雜的內(nèi)容感到擔(dān)憂。抽象（例如，jQuery）落入錯誤的人手中，讓人看起來是種高級的技能。但始終隱藏著一個事實(shí)，開發(fā)者對基礎(chǔ)和底層的概念理解較差。

假設(shè)，在這個過程中你不單只是學(xué)習(xí)，也在實(shí)踐你所學(xué)和研究的工具。有些人建議實(shí)踐只是為了學(xué)習(xí)，當(dāng)其他人建議只學(xué)習(xí)如何去實(shí)踐的時候，我建議你找一種與你大腦運(yùn)作方式相匹配的方法去實(shí)踐。但是，可以肯定的是，這是一種融合。所以，不要只看不實(shí)踐。學(xué)習(xí)，實(shí)踐。學(xué)習(xí)，實(shí)踐。不停地重復(fù)，因?yàn)槭虑榭偸亲兓煤芸?。這就是為什么要學(xué)習(xí)基本原理而不是抽象概念十分重要。

最近幾年來，兩種不同類型的前端開發(fā)者之間，在前端領(lǐng)域一直存在著巨大分歧。一方面，專注于JavaScript的程序員，他們?yōu)榍岸诉\(yùn)行時編寫JavaScript，他們可能擁有計(jì)算機(jī)科學(xué)技能和軟件開發(fā)背景。他們很可能視HTML和CSS為一種抽象（例如，JSX和CSS in JS）。另一方面，很可能是非計(jì)算機(jī)科學(xué)出身的開發(fā)者，他們專注于HTML，CSS和JavaScript，因?yàn)樗鼈儗ｉT屬于UI。在2019年，進(jìn)入或嘗試了解前端開發(fā)者領(lǐng)域時，你能絕對能感受到這種分歧。“前端開發(fā)者”這個術(shù)語沒有明確的定義，沒有明確的詞語來說明正在討論的是哪種類型的前端開發(fā)者。

以下是各種前端職稱的列表和描述（記住職稱是很難）。最常用的前端開發(fā)者職稱是，“前端開發(fā)者”或“前端工程師”。注意，任何帶有“前端”，“客戶端”，“Web UI”，“HTML”，“CSS”或“JavaScript”字眼職位的人，通常是指在HTML，CSS，DOM和JavaScript上有一定程度專業(yè)知識的人。

前端開發(fā)者：描述在一定程度上精通HTML、CSS、DOM和JavaScript并在Web平臺上實(shí)現(xiàn)這些技術(shù)的開發(fā)者的通用職稱。

前端工程師（JavaScript開發(fā)者或全棧JavaScript開發(fā)者）：這個職稱授予給來自計(jì)算機(jī)科學(xué)、工程學(xué)背景，且能使用這些技術(shù)進(jìn)行前端工作的開發(fā)者。這種角色一般要求具備計(jì)算機(jī)科學(xué)知識和多年的軟件開發(fā)經(jīng)驗(yàn)。當(dāng)職稱中包含“JavaScript應(yīng)用程序”時，表明需要開發(fā)者必須是具有高級編程、軟件開發(fā)和應(yīng)用程序開發(fā)技能的高級JavaScript開發(fā)者，同時也擁有多年構(gòu)建前端軟件應(yīng)用的經(jīng)驗(yàn)。

CSS和HTML開發(fā)者：這個前端職稱描述的是除了JavaScript和應(yīng)用程序之外，開發(fā)者對HTML和CSS具有一定熟練度。

Web前端設(shè)計(jì)師：包含“設(shè)計(jì)師”的職稱，表明設(shè)計(jì)師需要具備前端技能（HTML 和 CSS）以及專業(yè)的設(shè)計(jì)(視覺設(shè)計(jì)和交互設(shè)計(jì))技能。

UI（用戶界面）開發(fā)者或工程師：當(dāng)頭銜中包含“交互”和“UI”時，表明開發(fā)者除了應(yīng)具備交互設(shè)計(jì)能力，還需具備前端開發(fā)者技能和前端工程師技能。

移動或平板電腦前端開發(fā)者：包含“移動”和“平板”的職稱，有在移動或平板電腦設(shè)備運(yùn)行的前端開發(fā)經(jīng)驗(yàn)（要么是原生的，要么是在Web平臺上，比如在瀏覽器上）。

前端SEO專家：包含“SEO”的職稱，描述的是開發(fā)者具備以SEO策略來設(shè)計(jì)前端技術(shù)的豐富經(jīng)驗(yàn)。

前端無障礙專家：包含“無障礙”的職稱，描述的是開發(fā)者具備以支持無障礙要求和標(biāo)準(zhǔn)來設(shè)計(jì)前端技術(shù)的豐富經(jīng)驗(yàn)。

前端運(yùn)維開發(fā)：包含“運(yùn)維開發(fā)”的職稱，描述的是開發(fā)者具備與合作、集成、部署、自動化和質(zhì)量相關(guān)軟件開發(fā)實(shí)踐的豐富經(jīng)驗(yàn)。

前端測試或QA：包含“測試或QA”的職稱，描述的是開發(fā)者具備測試和管理軟件，包含單元測試，功能性測試，用戶測試，A/B測試的豐富經(jīng)驗(yàn)。

注：
1、如果你在職稱中遇到“全?！被颉熬W(wǎng)頁開發(fā)者”這些術(shù)語，被雇主用于描述負(fù)責(zé)Web或應(yīng)用程序開發(fā)各個方面的角色。比如，前端（可能包括設(shè)計(jì)）和后端。

下面是被前端開發(fā)者所使用的核心Web技能（可以考慮按順序?qū)W習(xí)它們）：

超文本鏈接（HTML）

層疊樣式表（CSS）

同意資源定位（URLs）

超文本傳輸協(xié)議（HTTP）

JavaScript編程語言（ECMAScript 262）

JavaScript對象表示法（JSON）

文檔對象模型（DOM）

Web API（HTML5以及相關(guān) 或 瀏覽器API）

Web內(nèi)容無障礙指引（WCAG）& 無障礙的富網(wǎng)絡(luò)應(yīng)用程序（ARIA）

一個所有網(wǎng)頁相關(guān)規(guī)范的綜合性列表，請參閱platform.html5.org或MDN Web API。

下面是剛剛提到的9種技術(shù)的定義，并提供了每種技術(shù)的相關(guān)文檔和規(guī)范的鏈接。

超文本標(biāo)記鏈接（HTML）

超文本標(biāo)記語言，通常稱為HTML，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。Web瀏覽器能讀取HTML文件并將其渲染成看可視化或可聽的網(wǎng)頁。HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義以及表示的線索，使之成為一種標(biāo)記語言而非編程語言。
- 維基百科 & 中文地址

大部分相關(guān)規(guī)范和文檔：

W3C HTML規(guī)范大全

[HTML元素]持續(xù)更新標(biāo)準(zhǔn)(https://html.spec.whatwg.org/...

全局屬性

W3C的HTML5.2標(biāo)準(zhǔn)

W3C的HTML5.3標(biāo)準(zhǔn)

HTML屬性參考

HTML元素參考

[HTML語法]持續(xù)更新標(biāo)準(zhǔn)(https://html.spec.whatwg.org/...

層疊樣式表（CSS）

層疊樣式表（CSS）是一種樣式表語言，用于描述用標(biāo)記語言編寫的文檔的外觀和格式。盡管經(jīng)常用于改變用HTML和XHTML所編寫的網(wǎng)頁和用戶界面的樣式，該語言能應(yīng)用于任何類型的XML文檔，包括純XML、SVG和XUL。與HTML和JavaScript一樣，CSS是基礎(chǔ)技術(shù)，被大部分網(wǎng)站用于創(chuàng)建具有視覺吸引力的網(wǎng)頁、Web應(yīng)用程序的用戶界面以及許多移動應(yīng)用程序的用戶界面的基礎(chǔ)技術(shù)。
— 維基百科 & 中文地址

大部分相關(guān)規(guī)范和文檔：

W3C CSS規(guī)范大全

層疊樣式表2.2版本（CSS 2.2）規(guī)范

CSS參考

超文本傳輸協(xié)議（HTTP）

超文本傳輸協(xié)議（HTTP）一種用于分布式、協(xié)作的，超媒體信息系統(tǒng)的應(yīng)用層協(xié)議。HTTP是WWW的數(shù)據(jù)通訊的基礎(chǔ)。
— 維基百科 & 中文地址

大部分相關(guān)規(guī)范：

超文本傳輸協(xié)議 -- HTTP/1.1

HTTP/2

統(tǒng)一資源定位（URL）

統(tǒng)一資源定位（URL）（也稱為Web地址）是一種對資源的引用，指定了資源在計(jì)算機(jī)網(wǎng)絡(luò)的位置和檢索的機(jī)制。URL是一種特定類型的統(tǒng)一資源標(biāo)識符(uniform resource identifier, URI)，盡管許多人將這兩個術(shù)語混在一起使用。URL表示可訪問指定資源的方法，但并非每個URI皆如此。URL常見于引用Web頁面（http），但也用于文件傳輸(ftp)、電子郵件(mailto)、數(shù)據(jù)庫訪問(JDBC)和許多其他應(yīng)用程序。
- 維基百科 & 中文地址

大部分相關(guān)規(guī)范：

統(tǒng)一資源定位器（URL）

URL持續(xù)更新標(biāo)準(zhǔn)

文檔對象模型（DOM）

文檔對象模型(Document Object Model, DOM)是一種在跨平臺和語言無關(guān)性的約定，用于表示HTML，XHTML和XML文檔中的對象并與之交互。每個文檔的節(jié)點(diǎn)都組織在一個樹結(jié)構(gòu)中，稱為DOM樹。可以使用對象上的方法對DOM樹中的對象進(jìn)行尋址和操作。DOM的公共接口在其應(yīng)用程序編程接口(API)中指定。
- 維基百科 & 中文地址

大部分相關(guān)規(guī)范和文檔：

DOM持續(xù)更新標(biāo)準(zhǔn)

W3C DOM4

UI事件

JavaScript編程語言（ECMAScript 262）

JavaScript是一種高級、動態(tài)、無類型和解釋的編程語言。它已通過ECMAScript實(shí)現(xiàn)語言的標(biāo)準(zhǔn)化。除了HTML和CSS，它也是萬維網(wǎng)內(nèi)容生產(chǎn)中三大基本技術(shù)之一。大多數(shù)網(wǎng)站中都采用這種技術(shù)，并且已被所有的現(xiàn)代Web瀏覽器所支持，不需要插件。JavaScript是一門基于原型、函數(shù)先行的語言，是一門多范式的語言，它支持面向?qū)ο缶幊?、命令式編程以及函?shù)式編程。它有一個用于處理文本、數(shù)組、日期和正則表達(dá)式的API，但不包括任何I/O操作，比如網(wǎng)絡(luò)、存儲或圖形工具，這些都依賴于它所嵌入的主機(jī)環(huán)境。
- 維基百科 & 中文地址

大部分相關(guān)規(guī)范和文檔：

ECMAScript? 2018 語言規(guī)范

ECMAScript語言規(guī)范大全

Web API (HTML5以及相關(guān))

當(dāng)使用JavaScript為Web編寫代碼時，有非常多可用的API。下面列出了開發(fā)Web應(yīng)用程序或站點(diǎn)時可能使用的所有接口(即對象類型)。
- Mozilla

大部分相關(guān)文檔：

Web API接口

JavaScript對象表示法（JSON）

這是一種用于異步瀏覽器和服務(wù)器通信(AJAJ)的主要數(shù)據(jù)格式，在很大程度上替代了XML（被AJAX使用）。雖然JSON最初源于JavaScript腳本語言，但它是一種獨(dú)立于語言的數(shù)據(jù)格式。解析和生成JSON數(shù)據(jù)的代碼在許多編程語言中都是可用的。JSON格式最初由Douglas Crockford所制定。它目前由兩個相互競爭的標(biāo)準(zhǔn)描述，RFC 7159和ECMA-404。ECMA標(biāo)準(zhǔn)非常簡單，只描述允許的語法語法，而RFC還提供了一些語義和安全性方面的考慮。JSON的正式網(wǎng)絡(luò)媒體類型是application/json。JSON的文件擴(kuò)展名是.json。
- 維基百科 & 中文地址

大部分相關(guān)規(guī)范：

JSON介紹

JSON API

JSON數(shù)據(jù)交換格式

Web內(nèi)容無障礙指南(WCAG)和無障礙的富互聯(lián)網(wǎng)應(yīng)用程序(ARIA)

無障礙是指為殘疾人設(shè)計(jì)產(chǎn)品、設(shè)備、服務(wù)或環(huán)境。無障礙設(shè)計(jì)的概念確保了兩者的“直接訪問”(即和“間接訪問”，意思是與某人的輔助技術(shù)(例如，計(jì)算機(jī)屏幕閱讀器)的兼容性。
- 維基百科 & 中文地址

網(wǎng)頁無障礙倡議（WAI）

Web內(nèi)容無障礙指南（WCAG）的現(xiàn)狀

圖片來源：http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

對于任何一種專業(yè)類型的前端開發(fā)者角色，假設(shè)已經(jīng)具備對HTML、CSS、DOM、JavaScript、HTTP、URL和Web瀏覽器這些基本技能的高級理解。

除了上述的技能，前端開發(fā)者可能還需要特別擅長以下一項(xiàng)或多項(xiàng)技能:

內(nèi)容管理系統(tǒng)(CMS)

Node.js

跨瀏覽器測試

跨平臺測試

單元測試

跨設(shè)備測試

無障礙和WAI-ARIA

搜索引擎優(yōu)化（SEO）

交互或用戶界面設(shè)計(jì)

用戶體驗(yàn)

可用性

電商系統(tǒng)

門戶系統(tǒng)

線框圖

CSS布局和網(wǎng)格

DOM操作（比如：jQuery）

移動端的Web性能

加載測試

性能測試

漸進(jìn)式增強(qiáng)和優(yōu)雅降級

版本控制（比如：Git）

MVC、MVVM、MV*

函數(shù)式編程

數(shù)據(jù)格式 （比如：JSON，XML）

數(shù)據(jù)API (比如：Restful API)

Web字體嵌入

矢量圖形（SVG）

正則表達(dá)式

微數(shù)據(jù)和微格式

任務(wù)運(yùn)行器，構(gòu)建工具，自動化進(jìn)程工具

響應(yīng)式網(wǎng)頁設(shè)計(jì)

面向?qū)ο缶幊?/p>

應(yīng)用程序框架

模塊

依賴管理

包管理

JavaScript動畫

CSS動畫

圖表和圖形

UI部件

代碼質(zhì)量測試

代碼覆蓋測試

代碼復(fù)雜度分析

集成測試

命令行和CLI

模板策略

模板引擎

單頁應(yīng)用

Web和瀏覽器安全性

瀏覽器開發(fā)者工具

前端開發(fā)者使用HTML、CSS和JS，通常運(yùn)行在以下操作系統(tǒng)(簡稱OS)的web平臺(例如Web瀏覽器)上：

Android

Chromium

iOS

OS X(例如： MacOS)

Ubuntu(或某個Linux操作系統(tǒng))

Windows

通常這些操作系統(tǒng)運(yùn)行在以下一種或多種設(shè)備上：

臺式電腦

手提電腦和上網(wǎng)本

手機(jī)

平板電腦

電視

手表

其他（例如：任何能想象的到的東西，汽車、冰箱、電燈、恒溫器等等）

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

普遍來說，前端技術(shù)能夠運(yùn)行在上述操作系統(tǒng)和使用在以下運(yùn)行時的Web平臺設(shè)備中：

網(wǎng)頁瀏覽器（例如：Chrome，IE，Safari，F(xiàn)irefox）

無頭瀏覽器（例如：Headless Chromium）

WebView或?yàn)g覽器標(biāo)簽（iframe）被嵌入在原生應(yīng)用中，橋接原生API運(yùn)行。WebView應(yīng)用通常包含由Web技術(shù)構(gòu)造的UI。（例如：HTML、CSS和JS）（例如：Apache Cordova、NW.js、 Electron）

由Web技術(shù)構(gòu)建的原生應(yīng)用程序，在運(yùn)行時通過原生API的橋接進(jìn)行解析。UI將使用原生UI部分（例如：iOS原生控制）而非Web技術(shù)。（例子：NativeScript，React Native）

前端開發(fā)者通常只是團(tuán)隊(duì)中設(shè)計(jì)和開發(fā)Web站點(diǎn)、web應(yīng)用程序或基于web技術(shù)運(yùn)行的原生應(yīng)用程序的一員。

一個為Web平臺構(gòu)建專業(yè)Web站點(diǎn)或軟件的開發(fā)團(tuán)隊(duì)，通常至少包含以下角色。

視覺設(shè)計(jì)師（字體、色彩、間距、表情、視覺概念與主題）

UI設(shè)計(jì)師、交互設(shè)計(jì)師、信息體系結(jié)構(gòu)師（線框，指定所有用戶的交互和UI功能，結(jié)構(gòu)化信息）

前端開發(fā)者（編寫可以運(yùn)行在客戶端或設(shè)備上的代碼）

后端開發(fā)者（編寫運(yùn)行在服務(wù)器的代碼）

這些角色是依據(jù)重疊的技能排序的。前端開發(fā)者通常比后端開發(fā)更擅長于處理UI或交互設(shè)計(jì)以及后端開發(fā)。團(tuán)隊(duì)成員通過承擔(dān)重疊角色的職責(zé)來擔(dān)任多個角色的情況并不少見。

假設(shè)上面提到的團(tuán)隊(duì)是由項(xiàng)目負(fù)責(zé)人或某種產(chǎn)品負(fù)責(zé)人(即，利益相關(guān)者、項(xiàng)目經(jīng)理、項(xiàng)目負(fù)責(zé)人等等)

一個更大的web團(tuán)隊(duì)可能包括以下上面沒有提及到的角色:

SEO分析師

開發(fā)運(yùn)維工程師

性能工程師

API開發(fā)者

數(shù)據(jù)庫管理員

QA工程師或測試員

全棧開發(fā)者這個稱謂有幾種含義。如此之多，以至于這個稱謂尚未有一個明確的定義。僅考慮下面所展示的兩個調(diào)查結(jié)果。這些結(jié)果可能更可信，成為一名全棧開發(fā)者是很常見的。但是，在我近20年的經(jīng)驗(yàn)中，這絕不是專業(yè)領(lǐng)域的普遍情況。

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

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

設(shè)計(jì)和開發(fā)一個網(wǎng)站或web應(yīng)用程序的角色需要在視覺設(shè)計(jì)、UI和交互設(shè)計(jì)、前端開發(fā)和后端開發(fā)等領(lǐng)域擁有深厚的技能和豐富的經(jīng)驗(yàn)。任何能在專業(yè)水平上勝任以上這4個角色中的一個或多個的人都是極其罕見的。

從實(shí)用的角度來看，你應(yīng)該尋求成為這些角色(視覺設(shè)計(jì)、交互設(shè)計(jì)或IA、前端開發(fā)、后端開發(fā))之一的專家，或者尋求聘請這樣的專家。那些聲稱在一個或多個這樣的角色上具有專家水平的人是非常稀有的。

然而，考慮到JavaScript已經(jīng)涵蓋了技術(shù)棧的所有層面(即Node.js)，尋找一個既能開發(fā)前端和后端的全棧JS開發(fā)者已經(jīng)不是那么神秘了。通常，這些全棧開發(fā)者只能解決JavaScript。一個能為前端、后端、API和數(shù)據(jù)庫代碼的開發(fā)者不再像以前那樣荒謬(不包括視覺設(shè)計(jì)、交互設(shè)計(jì)和CSS)。在我看來依舊很神秘，但不再像以前那樣不尋常。因此，我不建議開發(fā)者成為一名"全棧"開發(fā)者。在少數(shù)情況下，這行得通。但一般來說，作為一個塑造職業(yè)生涯的一般概念上前端開發(fā)者，我會專注于前端技術(shù)。

準(zhǔn)備：

2017年前端開發(fā)者面試準(zhǔn)備

出色的前端面試

前端面試手冊

前端面試流程揭秘

測試:

Web前端開發(fā)測試

JavaScript Web測試

你可能會被問到的問題:

所有JavaScript開發(fā)者都應(yīng)該知道的10個面試題

前端職位面試題

Web前端開發(fā)測試

前端開發(fā)者面試題

（由一位前端工程師所編著的）前端JavaScript最佳面試題)

你的提問:

一份開發(fā)者可向未來老板提問的開放列表

存在大量的技術(shù)職位招聘渠道。以下精簡的列表是當(dāng)前用于尋求前端職位/職業(yè)最相關(guān)資源。

authenticjobs.com

careers.stackoverflow.com

css-tricks.com/jobs

frontenddeveloperjob.com

glassdoor.com

jobs.github.com

linkedin.com

remote.co

weworkremotely.com

www.smashingmagazine.com/jobs/

注：
1、想作為一個前端開發(fā)者進(jìn)行遠(yuǎn)程工作，留意這些相關(guān)的遠(yuǎn)程辦公公司。

美國全國的平均水平，一個中級前端開發(fā)者的薪酬在6.5萬美元到10萬美元之間。

當(dāng)然，對于剛剛進(jìn)入前端領(lǐng)域的新人來說，大概是40K美元，這取決于你工作的地點(diǎn)和經(jīng)驗(yàn)。

注：
1、一個領(lǐng)導(dǎo)級別或者高級的前端開發(fā)者或工程師可以住他想住的任何地方（也就是遠(yuǎn)程辦公）而且年薪超過15萬美元（訪問angel.co、注冊、留意超過15萬美元年薪的前端職位或在Stack Overflow Jobs測試你的薪水范圍）

完整文章，請?jiān)L問 前端開發(fā)者手冊2019