作者：科迪·林黎（Cody Lindley），由「前端大師（Frontend Masters）」傾情贊助。

這是一本可供任何人使用的指南，用于學(xué)習(xí)前端開發(fā)實踐。該指南大體上勾勒出了前端工程的輪廓，同時也討論了前端工程的實踐：2017 年，如何學(xué)習(xí)前端工程，用什么工具來實踐？

筆者有意將本書打造為一份專業(yè)資料，為想要或正在實踐的前端開發(fā)者們提供學(xué)習(xí)材料和開發(fā)工具。其次，它同樣可供主管、CTO、講師和獵頭們深入探索前端開發(fā)實踐。

本書內(nèi)容偏向于 WEB 技術(shù)（HTML、CSS、DOM、JavaScript）和以這些技術(shù)為根基直接構(gòu)建而成的開源技術(shù)。書中引用和討論的材料要么就是同類翹楚，要么就是解決問題的流行方案。

本書不是一本囊括所有前端可用資源的綜合綱領(lǐng)。其價值在于為恰好夠用的分類信息搜羅簡潔、聚焦且符合時宜的甄選內(nèi)容，以免在特別話題下鉆了牛角尖。

預(yù)期本書每年都迭代一次內(nèi)容。

本書分為三部分。

第一部分：前端實踐

第一部分概述了前端工程實踐。

第二部分：學(xué)習(xí)前端開發(fā)

第二部分指出了學(xué)習(xí)成為一個前端開發(fā)者所需的自學(xué)資源和教學(xué)資源（譯者注：教學(xué)資源包括有講師指導(dǎo)的付費(fèi)課程、計劃、學(xué)院和訓(xùn)練營）。

第三部分：前端開發(fā)工具

第三部分簡要地介紹和指出了一些前端圈內(nèi)的工具。

文章目錄

• 前端開發(fā)者是什么？
• 2016 前端開發(fā)回顧
• 展望 2017
• 第一部分. 前端實踐
  • 前端職稱
  • 前端開發(fā)者所使用的技術(shù)
  • 前端開發(fā)技能
  • 前端開發(fā)者為 ... 而開發(fā)
  • 團(tuán)隊里的前端
  • 全能型人才/全棧神話
  • 前端面試
  • 前端開發(fā)職位公示
  • 前端開發(fā)薪資
  • 前端開發(fā)者是如何誕生的
• 第二部分：學(xué)習(xí)前端開發(fā)
  • 自學(xué)
    • 關(guān)于互聯(lián)網(wǎng)／WEB
    • 學(xué)習(xí) Web 瀏覽器
    • 學(xué)習(xí)域名系統(tǒng)（又叫 DNS）
    • 學(xué)習(xí) HTTP/Networks（包括 CORS 和 WebSockets）
    • 學(xué)習(xí)網(wǎng)頁寄存（通稱虛擬主機(jī)）
    • 學(xué)習(xí)前端開發(fā)
    • 學(xué)習(xí)用戶界面／交互設(shè)計
    • 學(xué)習(xí) HTML 和 CSS
    • 學(xué)習(xí)搜索引擎優(yōu)化
    • 學(xué)習(xí) JavaScript
    • 學(xué)習(xí) Web 動畫
    • 學(xué)習(xí) DOM、BOM 和 jQuery
    • 學(xué)習(xí)網(wǎng)頁字體 & 圖標(biāo)
    • 學(xué)習(xí)可訪問性相關(guān)知識
    • 學(xué)習(xí) web／瀏覽器 API
    • 學(xué)習(xí) JSON (JavaScript 對象表示法)
    • 學(xué)習(xí) JS 模板
    • 學(xué)習(xí)靜態(tài)網(wǎng)頁生成器
    • 通過JS學(xué)習(xí)計算機(jī)科學(xué)
    • 學(xué)習(xí)前端應(yīng)用架構(gòu)
    • 學(xué)習(xí)數(shù)據(jù)（例如，JSON）API 的設(shè)計
    • 學(xué)習(xí) React & Redux
    • 學(xué)習(xí)漸進(jìn)式 Web 應(yīng)用
    • 學(xué)習(xí)設(shè)計 JS API
    • 學(xué)習(xí)web開發(fā)工具
    • 學(xué)習(xí)命令行的使用
    • 學(xué)習(xí) Node.js
    • 學(xué)習(xí) JS 模塊系統(tǒng)
    • 學(xué)習(xí)模塊加載和打包工具
    • 學(xué)習(xí)包管理工具
    • 學(xué)習(xí)版本控制
    • 學(xué)習(xí)構(gòu)建及任務(wù)自動化技術(shù)
    • 學(xué)習(xí)網(wǎng)站性能優(yōu)化
    • 學(xué)習(xí)測試
    • 學(xué)習(xí)無頭瀏覽器
    • 學(xué)習(xí)離線開發(fā)
    • 學(xué)習(xí)網(wǎng)絡(luò)／瀏覽器／應(yīng)用的安全
    • 多平臺開發(fā)學(xué)習(xí)
  • 導(dǎo)向?qū)W習(xí)
    • 前端課程
  • 前端開發(fā)學(xué)習(xí)的起點
  • 前端資訊、新聞?wù)竞筒タ?/a>
• 第三部分：前端開發(fā)工具
  • Doc/API 瀏覽工具
  • SEO 工具
  • 原型設(shè)計和線框圖工具
  • 制圖工具
  • HTTP / 網(wǎng)絡(luò)工具
  • 代碼編輯工具
  • 瀏覽器上的神兵利器
  • HTML 工具
  • CSS 工具
  • DOM 工具
  • JavaScript 工具
  • 靜態(tài)網(wǎng)頁構(gòu)建工具
  • 無障礙訪問工具
  • 應(yīng)用程序框架工具（臺式機(jī)、手機(jī)、平板電腦等）
  • 漸進(jìn)式 Web 應(yīng)用工具
  • 腳手架工具
  • 常規(guī)前端開發(fā)工具
  • 模版／數(shù)據(jù)綁定工具
  • UI 組件 & 組件包
  • 數(shù)據(jù)可視化工具（例如圖表）
  • 圖形工具（例如 SVG、Canvas、WebGL）
  • 動畫工具
  • JSON 工具
  • 占位符內(nèi)容工具
  • 測試工具
  • 前端數(shù)據(jù)存儲工具 (例如客戶端的數(shù)據(jù)存儲方案)
  • 模塊加載／打包工具
  • 模塊／包管理工具
  • 托管工具
  • 項目管理以及代碼托管工具
  • 協(xié)作與溝通工具
  • 內(nèi)容管理 托管／API 工具
  • 后端即服務(wù)工具
  • 離線工具
  • 安全工具
  • 構(gòu)建工具
  • 部署工具
  • 網(wǎng)站／應(yīng)用監(jiān)控工具
  • JavaScript 錯誤報告／監(jiān)控
  • 性能工具
  • 尋找工具的工具

下載 .pdf、.epub、或 .mobi 格式的電子書:

• 中文：https://www.gitbook.com/book/sqrtthree/front-end-handbook-2017/details
• 英文：https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details

貢獻(xiàn)內(nèi)容、提建議或者修復(fù) GitHub 上的 bugs:

• https://github.com/xitu/front-end-handbook-2017

本文檔基于 Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License 協(xié)議發(fā)布。

致謝

• 滬江Web前端團(tuán)隊
• 掘金翻譯計劃