新時代前端的自我修養—2017 D2主題分享記錄及個人思考

願風裁塵，以心御匠

岑安 2017 D2主題分享：前端做爲技術人的思考

這個主題必定是一個資深的大前端，纔有底氣去探討的。做爲一個初入門的小前端，圍過來一塊兒思考下，至少讓將來的路，少一些迷霧。

所謂前端發展歷程

前端的發展歷程，得益於HTML+CSS+JS能力的發展。從web1.0時代的信息展現/數據提交/樣式美化到應用時代的MVC/SPA/MVVM及伴隨而出的各類工程化工具/模塊化概念/異步編程，再到所謂雲+端時代的RN/Weex/Nodejs，一切得益於標準的規範化，標準賦予了HTML+CSS+JS更強大的能力，前端開發者們擁有了更強大的權利，也就擔負起了更多的責任。前端代碼也已複雜到前端開發者們不得不採用傳統軟件工程的開發思路，以更好的管理負擔的項目。

階段困境和解法

這裏的階段能夠理解爲前端發展歷程的幾個階段，我更願意看作是一個前端開發者自身成長的幾個階段。我更願意從這個分享中讀到的，是做爲一個渴望成長的前端在每一個階段所要具有的基本要素。

• 後web1.0時代

WebPage從Hyperlink的本質衍生到ContentProvider的能力

這一階段的前端開發工種，自身的關注點是在內容提供者（ContentProvider）上的。內容的承載、排版和閱讀體驗，是這一階段前端工做的重心，也是一個初級前端的崗位職責：

1. 基礎組件，Tab、Dialog、Slider...
2. JS功能函數複用，Prototype、Validate、Format...
3. CSS佈局&排版的最佳實踐
4. xhml規範，語義化

雖然叫後Web1.0時代，可是在至關長時間內，這個時代並不會過去，大批入門前端所要面臨的第一份挑戰依然是如何佈局好一個頁面，糾結relative和static的區別，JS的數據類型有哪些，原型鏈是個啥。即使簡單易上手如<img src="../vue.png" width="20" alt="vue"/>Vue.js，也在起步教程一開始，明確告知：

官方指南假設你已瞭解關於 HTML、CSS 和 JavaScript 的 中級知識。若是你剛開始學習前端開發，將框架做爲你的第一步可能不是最好的主意——掌握好基礎知識再來吧！

固然，對於中後臺開發者們，藉助各類前端開發框架，同樣能夠作出看起來很漂亮的頁面，但那毫不應該是一個有追求的前端開發者所向往的。

• 應用時代 MVC、SPA、MV**

從WebPage到WebApp級別的應用時代迫切須要解決的是怎麼向傳統軟件工程靠攏

這一階段的核心問題在於如何向傳統軟件工程靠攏，而產生這個問題的緣由就是應用時代的前端項目複雜度從Weboage升級到了Webapp級別。這個時代的關鍵詞是框架、工程化、富交互和性能。

1. 從JQ到MV*、MV**
2. 模塊化規範，CommonJs、AMD、CMD、ES6
3. 前端工程化，包管理、研發全流程、部署能力、工程化服務
4. 應用富交互，互動、可視化

這一階段，提到了框架、模塊、工程化和性能，私覺得這一階段纔是一個前端開發者真正成長的階段。深究框架、模塊和性能，掌握工程化開發流程，纔算真的入了前端的門。

• 雲 + 端

無線崛起+泛NodeJs時代怎麼迴歸技術服務業務自己

研發模式、雲計算、面向五新

1. 萬物上雲以後的中後臺能力 + 開發者服務能力
2. 端贊成+泛Node帶來的的研發模式和組織的重組
3. 新零售的線下場景，大LBS、IOT
4. 新金融、新制造、新技術、新能源

以目前我的理解，中後臺開發能力、開發者服務能力、研發模式和組織的重組，爲新的業務需求提供技術方案，這些依賴技術的擴展和積澱帶來的能力，纔是大前端真正進階之路。

此階段亦能夠理解爲迴歸技術，服務業務。岑安老師分享中提到的一點，從業務到技術的思考路徑，在這一階段必不可少：

1. 需求和項目分階段，連成線來看
2. 從過去的狀態和問題推導下一階段業務方向
3. 從下一階段的業務挑戰推導技術挑戰
4. 從技術挑戰拆解項目技術

這一思考路徑，對於整個技術架構的組織和分解有着不可或缺的參考意義。

關於「思考」

從分享一開始，我看到的就是一個前端成長的各個階段。那就有必要思考一下，如今的我在哪一個階段，在各個階段如何有效的成長。

• 入門

這一階段對應着前面的後Web1.0時代。HTML+CSS+JS是繞不過去的坎，relative和static，原型鏈做用域閉包，也都是不得不弄明白的東西。這個階段，有深有淺，淺了也能幹活，但日後走，又不得不回來，W3C標準來回翻，瀏覽器工做原理各類查。這一階段可長可短，長了後期好理解，短了後期還得回來補。

• 成長

這階段對應着應用時代。也是我一段時間來一直迷茫和糾結的階段，開頭提到的迷霧，也是我在這個階段遭遇到的迷霧，該學點什麼，不會的太多，要學的實在太多。趁機思考，也算是列一下近期的學習計劃和重點。

1. 基礎回爐：夯實基礎很必要，好比JS基礎之數據類型、HTTP基礎、服務器基礎理解、瀏覽器工做原理基礎、性能分析及優化等等
2. 原理探究：設計模式的學習與理解，好比VisulaDOM實現思路、VisulaDOM的Diff思路、CommonJs模塊化實現
3. 代碼分析：高效、易讀代碼與代碼組織及設計思路的理解
4. ES6實踐：熟悉ES6開發習慣，更深刻理解狀態機、Promise、Async/Await等應用場景
5. 工程化工具：好比WebPack進行更復雜的場景配置
6. 其餘前端理念實現的思路與簡單實踐，部分新技術的簡單實踐
7. 常見業務場景模擬與實現及分析

• 將來

雲 + 端。站在眼前的高度，作好眼前成長這些事就好。

將來再去思考吧。也許久了，會有新的見解，但目前，這些纔是真的重要的。