摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。

Cody Lindley 編著 原文地址

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

下載：PDF | epub

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

完整文章，請訪問 前端開發者手冊2019

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

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

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

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

這本手冊的內容更新每年發布一次。到目前為止，這已經是第四年發布的版本。

在手冊中有什么：

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

歡迎在Github中貢獻內容、提供建議和修正：

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

React在去年發布了幾個值得關注的版本，包括生命周期函數、context API，suspense、React hooks。

微軟終于收購了Github。

用CSS可以創建字體啦。

過去我稱之為前端驅動的應用程序，被稱作“無服務”。不幸的是，這言過于實了。然而，JAMstack這個術語似乎確實引起了很多開發者的共鳴。

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

Vue今年比React獲得更多的Github star。但使用方面React仍然占據主導地位。

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

DeskGap和Neutralino.js作為NW.js和Electron的替代品出現。

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

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

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

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

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

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

CSS變量在現代Web瀏覽器當中得到了支持。

CSS in JS風格爆發了，有些人卻對此產生了質疑。

ES模塊已經可以在現代瀏覽器中使用，動態導入也即將支持。我們甚至看見圍繞這一事實的一些工具因此發生變化。

許多人認識到端到端的測試方式是正確地進行測試的起點，這在很大程度上要歸功于Cypress(換而言之，先Cypress，再Jest)。

雖然Webpack今年再次被大量使用，但許多開發者發現Parcel更容易啟動和運行。

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

今年Babel 7 發布，這可是一件大事，因為距離上一次大版本發布已經是三年前了。

大家意識到JavaScript變化太快的事實之后，開始談論在你學習諸如React之類的東西之前需要知道什么。競爭是實實在在的。

大多數開發者通過Apollo發現了GraphQL，并將其視為數據API的下一個發展方向。

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

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

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

無可否認，TypeScript今年收獲了大量用戶。

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

以后希望會有更多這樣的事情發生。“遠離Sass”。

通過https://cssdb.org關注和學習CSS即將新增的功能（和可能新增的功能），仍然是一個不錯的主意。

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

Prepack將繼續發展。

GraphQL將繼續被大量采用。

2019年，“JavaScript現狀”調查的作者將新增“CSS現狀”調查。

關注Web動畫API。

你認識的人會嘗試說服你去使用TypeScript。

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

JAMStack將會繼續。

一套代碼多端運行的趨勢仍會繼續。

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

此外，越來越多項目開始拋棄jQuery，轉而使用原生DOM的解決方案。

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

本章闡述了前端開發和前端開發者訓練的基本說明。

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

圖片來源：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瀏覽器（按使用次數排序）是：

Chrome

Safari

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

Firefox

Edge

無頭瀏覽器

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

最常見的無頭瀏覽器有：

Headless Chromium

Zombie

slimerjs

puppeteer

webview

webview被用在原生操作系統上，在原生應用程序中運行Web頁面。可以將webview想象成是網頁瀏覽器的一個iframe或一個單標簽，它被嵌入在設備里所運行的原生應用程序(例如，iOS、android、windows)中。

webview開發最常見的解決方案有:

Cordova (手機和平板的原生應用程序)

NW.js (桌面應用程序)

Electron (桌面應用程序)

Web原生技術

最后，前端開發者可以從Web瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。最近，開發環境正被設想成可以利用Web技術(例如，CSS和JavaScript)來構建原生應用程序，而不使用Web引擎。

這些環境的一些例子有:

Flutter

React Native

NativeScript

注：
1、確定你已經清楚地理解了“Web平臺”的含義。閱讀“Web開放平臺”的維基百科頁面。探索構成Web平臺相關的眾多技術。

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

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

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

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

如果你現在想開始成為一名前端開發者，我將大致遵循以下的流程開始說明（第3章和第4章會深入學習資源的更多細節）。

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

學習HTML

學習CSS

學習JavaScript

學習DOM

學習用戶界面設計的基礎原理 (UI模式、交互設計、用戶體驗設計和可用性)

學習CLI和命令行

學習軟件工程的實踐（例如，應用程序設計與架構、模板、Git、測試、監控、自動化、代碼質量和開發方法論）

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

學習Node.js

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

最近出現了許多未經認證的、昂貴的前端代碼學校和訓練營。這些學校通常是由那些來自官方學院的老師遵循傳統教學模式授課（課程大綱、考試、小考、專題、小組專題和成績等）。

謹記，如果你正考慮參加一個高價的培訓項目，那就選擇網上的吧！所有的知識你都可以從網上學到而且幾乎不怎么花錢。然而，如果你需要某人告訴你如何低成本學習，你應該考慮傳統的教師主導的課堂配置。除此之外，我不知道還有什么職業是可以通過互聯網免費學習的、每月幾美元的錄像課程會員資格篩選費以及強烈的求知欲。

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

從Web開始 [閱讀]

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

前端大師學習之路 觀看

Web開發介紹 觀看

Treehouse理工大學學位 觀看

無學位的Web前端開發者 觀看

成為Web前端開發者 觀看

freeCodeCamp互動

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

假設，在這個過程中你不單只是學習，也在實踐你所學和研究的工具。有些人建議實踐只是為了學習，當其他人建議只學習如何去實踐的時候，我建議你找一種與你大腦運作方式相匹配的方法去實踐。但是，可以肯定的是，這是一種融合。所以，不要只看不實踐。學習，實踐。學習，實踐。不停地重復，因為事情總是變化得很快。這就是為什么要學習基本原理而不是抽象概念十分重要。

最近幾年來，兩種不同類型的前端開發者之間，在前端領域一直存在著巨大分歧。一方面，專注于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或應用程序開發各個方面的角色。比如，前端（可能包括設計）和后端。

下面是被前端開發者所使用的核心Web技能（可以考慮按順序學習它們）：

超文本鏈接（HTML）

層疊樣式表（CSS）

同意資源定位（URLs）

超文本傳輸協議（HTTP）

JavaScript編程語言（ECMAScript 262）

JavaScript對象表示法（JSON）

文檔對象模型（DOM）

Web API（HTML5以及相關 或 瀏覽器API）

Web內容無障礙指引（WCAG）& 無障礙的富網絡應用程序（ARIA）

一個所有網頁相關規范的綜合性列表，請參閱platform.html5.org或MDN Web API。

下面是剛剛提到的9種技術的定義，并提供了每種技術的相關文檔和規范的鏈接。

超文本標記鏈接（HTML）

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

大部分相關規范和文檔：

W3C HTML規范大全

[HTML元素]持續更新標準(https://html.spec.whatwg.org/...

全局屬性

W3C的HTML5.2標準

W3C的HTML5.3標準

HTML屬性參考

HTML元素參考

[HTML語法]持續更新標準(https://html.spec.whatwg.org/...

層疊樣式表（CSS）

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

大部分相關規范和文檔：

W3C CSS規范大全

層疊樣式表2.2版本（CSS 2.2）規范

CSS參考

超文本傳輸協議（HTTP）

超文本傳輸協議（HTTP）一種用于分布式、協作的，超媒體信息系統的應用層協議。HTTP是WWW的數據通訊的基礎。
— 維基百科 & 中文地址

大部分相關規范：

超文本傳輸協議 -- HTTP/1.1

HTTP/2

統一資源定位（URL）

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

大部分相關規范：

統一資源定位器（URL）

URL持續更新標準

文檔對象模型（DOM）

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

大部分相關規范和文檔：

DOM持續更新標準

W3C DOM4

UI事件

JavaScript編程語言（ECMAScript 262）

JavaScript是一種高級、動態、無類型和解釋的編程語言。它已通過ECMAScript實現語言的標準化。除了HTML和CSS，它也是萬維網內容生產中三大基本技術之一。大多數網站中都采用這種技術，并且已被所有的現代Web瀏覽器所支持，不需要插件。JavaScript是一門基于原型、函數先行的語言，是一門多范式的語言，它支持面向對象編程、命令式編程以及函數式編程。它有一個用于處理文本、數組、日期和正則表達式的API，但不包括任何I/O操作，比如網絡、存儲或圖形工具，這些都依賴于它所嵌入的主機環境。
- 維基百科 & 中文地址

大部分相關規范和文檔：

ECMAScript? 2018 語言規范

ECMAScript語言規范大全

Web API (HTML5以及相關)

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

大部分相關文檔：

Web API接口

JavaScript對象表示法（JSON）

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

大部分相關規范：

JSON介紹

JSON API

JSON數據交換格式

Web內容無障礙指南(WCAG)和無障礙的富互聯網應用程序(ARIA)

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

網頁無障礙倡議（WAI）

Web內容無障礙指南（WCAG）的現狀

圖片來源：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和瀏覽器安全性

瀏覽器開發者工具

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

Android

Chromium

iOS

OS X(例如： MacOS)

Ubuntu(或某個Linux操作系統)

Windows

通常這些操作系統運行在以下一種或多種設備上：

臺式電腦

手提電腦和上網本

手機

平板電腦

電視

手表

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

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

普遍來說，前端技術能夠運行在上述操作系統和使用在以下運行時的Web平臺設備中：

網頁瀏覽器（例如：Chrome，IE，Safari，Firefox）

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

WebView或瀏覽器標簽（iframe）被嵌入在原生應用中，橋接原生API運行。WebView應用通常包含由Web技術構造的UI。（例如：HTML、CSS和JS）（例如：Apache Cordova、NW.js、 Electron）

由Web技術構建的原生應用程序，在運行時通過原生API的橋接進行解析。UI將使用原生UI部分（例如：iOS原生控制）而非Web技術。（例子：NativeScript，React Native）

前端開發者通常只是團隊中設計和開發Web站點、web應用程序或基于web技術運行的原生應用程序的一員。

一個為Web平臺構建專業Web站點或軟件的開發團隊，通常至少包含以下角色。

視覺設計師（字體、色彩、間距、表情、視覺概念與主題）

UI設計師、交互設計師、信息體系結構師（線框，指定所有用戶的交互和UI功能，結構化信息）

前端開發者（編寫可以運行在客戶端或設備上的代碼）

后端開發者（編寫運行在服務器的代碼）

這些角色是依據重疊的技能排序的。前端開發者通常比后端開發更擅長于處理UI或交互設計以及后端開發。團隊成員通過承擔重疊角色的職責來擔任多個角色的情況并不少見。

假設上面提到的團隊是由項目負責人或某種產品負責人(即，利益相關者、項目經理、項目負責人等等)

一個更大的web團隊可能包括以下上面沒有提及到的角色:

SEO分析師

開發運維工程師

性能工程師

API開發者

數據庫管理員

QA工程師或測試員

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

圖片來源: 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

設計和開發一個網站或web應用程序的角色需要在視覺設計、UI和交互設計、前端開發和后端開發等領域擁有深厚的技能和豐富的經驗。任何能在專業水平上勝任以上這4個角色中的一個或多個的人都是極其罕見的。

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

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

準備：

2017年前端開發者面試準備

出色的前端面試

前端面試手冊

前端面試流程揭秘

測試:

Web前端開發測試

JavaScript Web測試

你可能會被問到的問題:

所有JavaScript開發者都應該知道的10個面試題

前端職位面試題

Web前端開發測試

前端開發者面試題

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

你的提問:

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

存在大量的技術職位招聘渠道。以下精簡的列表是當前用于尋求前端職位/職業最相關資源。

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、想作為一個前端開發者進行遠程工作，留意這些相關的遠程辦公公司。

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

當然，對于剛剛進入前端領域的新人來說，大概是40K美元，這取決于你工作的地點和經驗。

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

完整文章，請訪問 前端開發者手冊2019