十多年前的前端,開發者還在為兼容 IE6 而頭疼,框架上 jQuery 是老大,有追求的前端開發可能會使用 Zepto.js 以減少網頁體積。這個時候,前端頁面主要還是以 PC 為主,這個時候根本沒有移動前端的概念,在小小的手機屏幕上流量的頁面則是以純文本為主。
在 2011 ~ 2014 年之間的歷史階段里,模塊化的思路占為主導。當時為了進行 Assets 資源加載器的設計,就制定了模塊化的協議規范。當時比較流行的模塊化協議就是 AMD(RequireJS)、CMD(Seajs 為代表)、KMD(Kissy 為代表)。在淘寶、天貓,Kissy 應用的很火,所以 KMD 主導天下;在支付寶及外部社區,Seajs 應用的很火,所以 CMD 主導天下,玉伯大大的名氣和威望也在前端圈里特別高;而 AMD 在國外比較流行,但漸漸也被后來出現的 CommonJS 規范削弱了氣勢。
隨著 3G、4G 的發展和 iOS 和 Android 手機在市場的普及量大增,PC 業務主戰場也逐漸過渡到移動端。前端的思維模式由 PC 轉向了移動端,并向 App 的用戶體驗看齊。移動端的 HTML5 協議支持不完善,前端的生產配套不全,Android 的屏幕碎片化,所以那個時候的前端開發移動端頁面適配的痛苦要遠遠超過 PC 時代。
在前端社區,Angular、React、Vue、RN (React Native) 這樣的 MV* 框架一個接著一個出現,讓前端接受了數據驅動思想的洗禮之外,還借助 RN 完成了移動端的體驗升級,包括后來的 Weex、Flutter。
在這個階段,前端開始有了終端的底層架構組,開始構思前端頁面在移動終端上的加載性能和用戶體驗表現。在阿里巴巴內部,為了解決多端復用的問題,Rax 借助 VDOM 打通 WebView 和 Weex 兩端,一套代碼跑天下。
隨著初代 iPhone 的發布,大屏幕手機逐漸變成了主流,移動端的需求開始爆發。在淘寶天貓,每年雙十一的移動端成交額逐年攀升,并逐漸占領絕 對領 先地位。前端的領域也隨著這種趨勢逐漸細分,按照場景可以簡單分為移動(無線)前端開發和中后臺前端開發。
移動前端開發面向的是消費者端的 Web 與 輕 App 業務場景,在這個場景下,淘系經過多年的營銷活動沉淀,逐漸形成了移動端獨特的、輕量級的解決方案,以及模塊維度的、面向運營的頁面搭建系統。
中后臺前端則是面向企業 ERP、CRM 、OA 等偏后的業務場景,如商家后臺等系統。在這個場景下,借助飛冰、Fusion Design 等中后臺物料,形成可視化的中后臺搭建解決方案,為業務的前端、開發或產品角色提供一站式中后臺生產解決方案。
移動客戶端開發和前端開發是兩條沒有交集的平行線,但現在我們越來越擁抱兩者的合作產物:混合式(Hybird)應用開發,或者用最近比較火的一個概念 -- 大前端技術。
從技術的表現形式思考,本質上客戶端開發與前端開發都是終端技術,它的特點是直接面向用戶 UI 編程。
隨著 iOS + Android 確立了移動操作系統的統治地位,前端開發者也在尋找使用操作系統提供的能力進行業務開發的模式。Web 的開發方式遠比 iOS 和 Android 更加方便和高效,Web 上層出不窮的各種庫和框架也遠比 Android 和 iOS 的各種庫和框架方便的多。Web 上我們可以方便的使用各種前端框架,及時預覽效果(想想大型 Android/iOS 工程的編譯時間)。
從阿里巴巴的角度來看,隨著中臺化的理念逐漸被接受:業務需要追求快速發展,前臺的 UI 和需求會隨著商業決策快速迭代,前端和客戶端不同的崗位也形成了分工化的研發模式。
前端向上,前置作為業務方的唯 一接口,逐漸演變為大前端的業務層。在這一層,它的職責是負責定義規范,通過框架規范業務的開發過程,同時封裝統一的解決方案和工程化能力,將重復的工作抽離。
客戶端向下扎,解耦業務需求,轉為大前端的架構層,給上層的業務開發者提供能力支持。通過將客戶端的系統級 API 以及宿主應用的能力暴露給上層前端,提高前端頁面對更多富交互場景的承載能力。