將來的前端工程師

做者簡介：aoto 螞蟻金服·數據體驗技術團隊

如下我說的都是我的觀點，比較宏觀粗淺，主要針對的是前端工程師自己，沒有深刻技術和業務細節，請謹慎參考。

職能概覽

前端工程師首先是個程序員，其次也是個軟件工程師，他們工做在離用戶最近的地方，負責人機交互和用戶體驗，雖然叫「前端」，但其實他們的工做邊界其實已經很寬了。展望將來，我想前端的工做會繼續分化，也會繼續融合，分工是工業革命以來社會高效協做的主要推進力，之後很長一段時間應該也會維持這種形態，融合的原始推進力也是提升效率。分化和融合是不斷的演化和互吸取轉化的，不過核心的東西我想仍是不會有太大變化。

觀點

1. 繼續分化（領域、行業、技術棧）
2. 繼續融合（端技術、Web全棧技術、人工智能與端技術）
3. 核心不變（計算機科學本質、軟件工程思想與實踐、程序員職業素養）

1. 繼續分化

領域

前端領域會繼續分化，例如阿里內部的前端就已經有中後臺、圖形、端技術、泛Node、開發者服務5個大方向了，每一個大方向也會細分，舉一些例子：

• 中後臺：有云控制檯、信息&資產管理平臺、內部研發&項目管理平臺、人工智能&機器學習平臺、數據研發分析平臺，企業內部信息平臺等。具體產品如阿里雲控制檯、ERP、PAI、DeepInsight、阿里內外、Basecamp等。
• 圖形：有基礎圖形庫、3D圖形、數據可視化、流程圖等。具體產品如G二、DataV、阿里雲城市大腦、滴滴智能交通調度圖、雙十一大屏等。
• 端技術：有移動端（iOS、Android、MobileWeb、PWA、小程序）、PC端（客戶端、Web端）、觸屏電腦、各類監控大屏、智能手錶手環，智能汽車&家居屏幕等。具體產品如淘寶支付寶的App、PC主站、移動H5站，阿里郎、VS Code、雙十一大屏、UC瀏覽器UWP版本、各類智能手錶、手環、汽車、家居屏幕等。
• 泛Node：有工具鏈、Web框架、IoT、客戶端（Electron、NW）等。具體產品如DEF/Atool/F2E-Test（阿里前端開發者工具）、Egg.js、阿里雲的IoT應用、VS Code等。
• 開發者服務：有應用開發運維平臺、組件市場等。具體產品如阿里雲的應用搭建平臺Boat、Fusion-Design組件市場，支付寶小程序開發者工具等。
• ...

行業

• 2B
  • 信息管理、財務、建築、航天、水利、金融、製造等傳統行業軟件以及阿里提出的五新：新零售，新制造，新金融，新技術和新能源，新技術賦能傳統行業
  • SAAS軟件及服務：如Teambition、Trello、釘釘企業版、Basecamp、Growing.io
• 2C
  • 移動App：如微信、微博
  • PC工具應用：如Google Doc
  • 產品展現類網站：如阿里雲、支付寶官網
• ...

技術棧

• React（Native）
• Angular（NativeScript）
• Vue（Weex）
• ...

2. 繼續融合

端技術

• 前端、客戶端技術思想的融合

  • 組件化（組件化搭建頁面）
  • 組件生命週期鉤子函數（如iOS ViewController）
  • MV*（如MVVM設計就來源於微軟客戶端開發框架）

• 大前端的統一

  • 虛擬DOM技術：React/ReactNative/ReactCanvas
  • 各類移動設備內核和引擎的統一：WebKit/V8
  • Web技術文檔的統一：Mozilla Web Docs

Web全棧技術

• 前端、後端技術思想的融合
  • MV*（如前端的第一個MVC框架Backbone.js就來自於Ruby on Rails開發者）
  • AOP、依賴注入（Angular）
  • GraphQL（SQL）
  • IndexedDB（Database）
  • ...

人工智能與端技術

• 人工智能、前端技術的融合
  • 端是最終觸達用戶的節點
  • 端數據採集->後端機器學習、數據分析->智能推薦呈現
• 物聯網、前端技術的融合
  • 智能家居/汽車/工業設備多是有屏幕的，同時能夠基於如JerryScript這樣的JS執行引擎使用Node.js開發聯網應用

3. 核心不變

也就是計算機科學本質/軟件工程思想與實踐/程序員職業素養。這個就不是一段文字能夠涵蓋的了，這裏不作詳細論述。

歷史回顧

回顧過前端的演化，主要參見最底下的相關資源，下圖簡要回顧一下95年以來軟件開發和前端歷史：

前端的將來

那些生存空間愈來愈小的產業

有一些切分體會

• 小規模移動App：移動App市場被一些巨頭把持，小規模App生存空間愈來愈小
• PC信息導航類網站（網址、購物、論壇、生活）：如今移動優先，並且有智能推薦，而且是強社交

無界面交互

Web前端能作一些事，主要是大前端的範疇

• 會話式界面（視頻語音會話、語音搜索：WebRTC，開源語音庫：Common Voice）
• 感官式界面（視覺：WebAR/WebVR）
• 無界面，將來會有大量IoT設備（IoT有本身的通訊協議和規範，前端的工做是在用戶看不見的後臺）

富界面交互

大量工做須要前端來作

• 平常辦公軟件（複雜應用，而且慢慢從桌面程序演化爲Web）：Office、Email、文檔管理、產品設計、項目管理、代碼編輯器
• 大數據/AI配套軟件（複雜應用，而且慢慢從桌面程序演化爲Web）：須要大量的後臺系統來作數據分析/機器學習
• 播放器/遊戲：H5代替Flash，如Web Audio、Web Video、Canvas
• 容器/DSL/內核/小程序：支付寶/微信/釘釘容器，內核（也就是UC、QQ瀏覽器內核），及其自定義DSL（若是未來手機的底層能力均可以上浮到小程序，頗有想象空間）
• 產品信息展現類網站（炫酷應用）：各類智能設備官網、大企業官網

將來在哪裏

回顧觀點

1. 繼續分化（領域細分、行業細分、技術棧細分）
2. 繼續融合（端技術融合、Web全棧、人工智能與端技術的融合）
3. 核心不變（計算機科學本質、軟件工程思想與實踐、程序員職業素養）

一些建議

1. 關心人工智能的發展，思考TA在前端領域可能產生的應用場景
   • 視覺稿自動生成代碼
   • 根據用戶使用習慣自動排出最符合該用戶習慣的界面
   • 收集用戶數據在前端實時作學習和分析，如deeplearn.js
   • ...
2. 相信前端的將來，Web的力量
   • WebKit
   • V8
   • Flexbox：Yoga
   • ...
3. 結合公司業務特色有重點的關注前端的某些方面，畢竟技術服務於業務

---

以上都是我的觀點。

相關資源

• Web開發這十年：http://www.infoq.com/cn/articles/web-development-ten-years
• GUI應用架構十年變遷：https://segmentfault.com/a/1190000006016817
• 大話前端時代一：https://halfrost.com/vue_ios_modularization/
• 寫給初學前端工程師的一封信：https://zhuanlan.zhihu.com/p/28536429
• 母雞與前端工程師：http://www.ruanyifeng.com/blog/2016/07/hen-and-front-end-engineer.html
• 李開復人工智能預言：http://tech.sina.com.cn/it/2017-05-20/doc-ifyfkqks4361454.shtml
• 《無界面交互》：https://book.douban.com/subject/26947799/

---

後記：前端的發展超出了全部人的想象力，將來確定是難以預測的，也沒有作預測的必要，咱們要作的仍是踏實作好眼前的事情，「過往不戀、當下不雜、將來不迎」，與君共勉！

對咱們團隊感興趣的能夠關注專欄或者發送簡歷至'tao.qit####alibaba-inc.com'.replace('####', '@')，歡迎有志之士加入~

原文地址：github.com/ProtoTeam/b…