前端開發者手冊2019

時間  2019-11-08
標籤 前端 開發者 手冊 欄目 職業生涯 简体版
原文   原文鏈接

前端開發者手冊2019

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中貢獻內容、提供建議和修正：

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

第0章 回顧2018並展望將來

0.1 回顧2018

0.2 展望2019

第1章 前端開發者是什麼？

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

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

無頭瀏覽器

無頭瀏覽器是一種沒有圖形用戶界面的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 如何成爲一名前端開發者

如何成爲一名前端開發者呢？這個很是複雜的問題，能夠根據下面的路線圖思考一下：


圖片來源: 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測試的豐富經驗。

注：

一、若是你在職稱中遇到「全棧」或「網頁開發者」這些術語，被僱主用於描述負責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 潛在的前端開發者技能


圖片來源：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瀏覽器)上：

一般這些操做系統運行在如下一種或多種設備上：

  • 臺式電腦
  • 手提電腦和上網本
  • 手機
  • 平板電腦
  • 電視
  • 手錶
  • 其餘（例如：任何能想象的到的東西，汽車、冰箱、電燈、恆溫器等等）

圖片來源: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 全棧開發者

全棧開發者這個稱謂有幾種含義。如此之多，以致於這個稱謂還沒有有一個明確的定義。僅考慮下面所展現的兩個調查結果。這些結果可能更可信，成爲一名全棧開發者是很常見的。可是，在我近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)。在我看來依舊很神祕，但再也不像之前那樣不尋常。所以，我不建議開發者成爲一名"全棧"開發者。在少數狀況下，這行得通。但通常來講，做爲一個塑造職業生涯的通常概念上前端開發者，我會專一於前端技術。

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教程