前端開發者指南（2017）

參與者（排名不分前後）：blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993; pobusama; yanyixin; zhouyao

關於譯者：生於憂患，死於安樂。滬江翻譯小組其行十人，技術參差，然其心一也。前端技術博大精深，旁枝末節，種類繁多，然學習之道，不進則退。每思及此，遑遑不可終日，於閒暇時筆耕不輟，月餘，得此書中譯本。秉持利人利己的美好心願，此舉志在爲前端社區貢獻綿薄之力，策人策己皆有所裨益。期間翻譯，校對，統籌，整理，再審，各方助力，不一而足。與君共勉。

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

這是一本可供任何人使用的指南，用於學習前端開發實踐。該指南大致上勾勒出了前端工程的輪廓，同時也討論了前端工程的實踐：2017 年，如何學習前端工程，用什麼工具來實踐？

筆者有意將本書打造爲一份專業資料，爲想要或正在實踐的前端開發者們提供學習材料和開發工具。其次，它一樣可供主管、CTO、講師和獵頭們深刻探索前端開發實踐。

本書內容偏向於 WEB 技術（HTML、CSS、DOM、JavaScript）和以這些技術爲根基直接構建而成的開源技術。書中引用和討論的材料要麼就是同類翹楚，要麼就是解決問題的流行方案。

本書不是一本囊括全部前端可用資源的綜合綱領。其價值在於爲剛好夠用的分類信息蒐羅簡潔、聚焦且符合時宜的甄選內容，以避免在特別話題下鑽了牛角尖。

預期本書每一年都迭代一次內容。

本書分爲三部分。

第一部分：前端實踐

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

第二部分：學習前端開發

第二部分指出了學習成爲一個前端開發者所需的自學資源和教學資源（譯者注：教學資源包括有講師指導的付費課程、計劃、學院和訓練營）。

第三部分：前端開發工具

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

文章目錄

• 前端開發者是什麼？
• 2016 前端開發回顧
• 展望 2017
• 第一部分. 前端實踐
  • 前端職稱
  • 前端開發者所使用的技術
  • 前端開發技能
  • 前端開發者爲 ... 而開發
  • 團隊裏的前端
  • 全能型人才/全棧神話
  • 前端面試
  • 前端開發職位公示
  • 前端開發薪資
  • 前端開發者是如何誕生的
• 第二部分：學習前端開發
  • 自學
    • 關於互聯網／Web
    • 學習 Web 瀏覽器
    • 學習域名系統（又叫 DNS）
    • 學習 HTTP/Networks（包括 CORS 和 WebSockets）
    • 學習網頁寄存（通稱虛擬主機）
    • 學習前端開發
    • 學習用戶界面／交互設計
    • 學習 HTML 和 CSS
    • 學習搜索引擎優化
    • 學習 JavaScript
    • 學習 Web 動畫
    • 學習 DOM、BOM 和 jQuery
    • 學習網頁字體 & 圖標
    • 學習可訪問性相關知識
    • 學習 Web／瀏覽器 API
    • 學習 JSON (JavaScript 對象表示法)
    • 學習 JS 模板
    • 學習靜態網頁生成器
    • 經過JS學習計算機科學
    • 學習前端應用架構
    • 學習數據（例如，JSON）API 的設計
    • 學習 React & Redux
    • 學習漸進式 Web 應用
    • 學習設計 JS API
    • 學習Web開發工具
    • 學習命令行的使用
    • 學習 Node.js
    • 學習 JS 模塊系統
    • 學習模塊加載和打包工具
    • 學習包管理工具
    • 學習版本控制
    • 學習構建及任務自動化技術
    • 學習網站性能優化
    • 學習測試
    • 學習無頭瀏覽器
    • 學習離線開發
    • 學習網絡／瀏覽器／應用的安全
    • 多平臺開發學習
  • 導向學習
    • 前端課程
  • 前端開發學習的起點
  • 前端資訊、新聞站和播客
• 第三部分：前端開發工具
  • Doc/API 瀏覽工具
  • SEO 工具
  • 原型設計和線框圖工具
  • 製圖工具
  • HTTP / 網絡工具
  • 代碼編輯工具
  • 瀏覽器上的神兵利器
  • HTML 工具
  • CSS 工具
  • DOM 工具
  • JavaScript 工具
  • 靜態網頁構建工具
  • 無障礙訪問工具
  • 應用程序框架工具（臺式機、手機、平板電腦等）
  • 漸進式 Web 應用工具
  • 腳手架工具
  • 常規前端開發工具
  • 模版／數據綁定工具
  • UI 組件 & 組件包
  • 數據可視化工具（例如圖表）
  • 圖形工具（例如 SVG、Canvas、WebGL）
  • 動畫工具
  • JSON 工具
  • 佔位符內容工具
  • 測試工具
  • 前端數據存儲工具 (例如客戶端的數據存儲方案)
  • 模塊加載／打包工具
  • 模塊／包管理工具
  • 託管工具
  • 項目管理以及代碼託管工具
  • 協做與溝通工具
  • 內容管理 託管／API 工具
  • 後端即服務工具
  • 離線工具
  • 安全工具
  • 構建工具
  • 部署工具
  • 網站／應用監控工具
  • JavaScript 錯誤報告／監控
  • 性能工具
  • 尋找工具的工具

---

下載 .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

貢獻內容、提建議或者修復 GitHub 上的 bugs:

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

---

致謝

• 滬江Web前端團隊
• 掘金翻譯計劃
  

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

滬江Web前端上海團隊招聘【Web前端架構師】，有意者簡歷至：zhouyao@hujiang.com

簽名贈書 | 滬江Web前端技術團隊撰寫的《移動Web前端高效開發實戰》免費大放送