從微前端到智能化：2020前端開源技術趨勢

毫無疑問 TypeScript 將成爲很長一段時間的主流，大型前端開源項目大都已經或正在全面擁抱 TypeScript，他能讓我們擁有很多面嚮對象語言、強類型語言才具備的先進特性，能幫助我們提升代碼質量，降低團隊協作上的成本和風險，如果我們的項目還未轉過來，是時候動手了。但一個開源項目的質量跟語言本身並無直接關係，更別說 TypeScript 本身依舊還只是帶「靜態類型檢查」的「弱類型」語言，OO並不是必須的，用原生 JS 也一樣能寫出優雅的封裝與繼承，更讓人期待的是WebAssembly（www.zhihu.com/questio…） 的潛力被真正開發出來後，前端終將語言無關，前端在研發的是人機交互界面上的產物。瀏覽器技術和雲計算的進化將加速前端構建和資源加載的變革Webpack 5 正式版發佈，通過物理緩存大幅提升構建性能，在短期內還會是主流構建工具；但隨着 ES Modules 成爲主流，CJS 淡出，ESM CDN 大範圍使用後構建工具將轉向 Bundless，Webpack 不可避免也會逐漸退出歷史舞臺。特別是當 HTTP/2 到來，支持請求與響應的多路複用來，HTTP 首部字段被大大壓縮，傳輸效率會得到極大的提升，屆時我們將不再需要對資源文件進行合併操作，構建工具也會隨之加速進化。C/S 到 B/S 再到 C/S歷史總在不斷重複輪迴中循環上升，互聯網，特別是雲的出現讓軟件從 C/S 走向了 B/S，甚至如 WebAssembly 技術的出現，我們能更低成本的將原先的客戶端軟件移植到瀏覽器上去，一切看上去都是朝着 B/S 發展。然而我們也要看到另外一個趨勢，自成生態的巨型應用如微信、支付寶、Facebook 等正在收斂瀏覽器上軟件至他們的客戶端上，背後的典型技術是小程序、PWA，我們甚至已經看到了出現在 PC 客戶端上小程序。而藉助如 Electron 這類項目，很多 B/S 模式的軟件服務在推出自己的客戶端以謀求用戶更專注的使用體驗，特別是很多傳統以 C/S 模式提供服務的軟件推出客戶端會更貼合用戶的心智。這是我們看到的歷史輪迴，但接下來的這段 C/S 歷程跟過去的 C/S 所用到的技術已經完全不一樣了，不管是小程序、PWA還是Service Worker、Electron、這 Client 端上開源項目會迎來一個春天。新興交互場景將喚起 Micro UIMicro Frontends （micro-frontends.org/） 正風生水起，然而它不過是已經風靡多年但仍備受爭議的Microservice Architecture（microservices.io/） 在前端的應用，可以幫我們更好地去解決複雜應用的開發和維護問題。在人機交互，用戶如何在一個複雜的產品中找到此時此刻最需要的一個 UI，仍然是一個未被很好地解決的問題。用戶常常迷失在一個個大型 APP 複雜的 UI 中，然而很多時候我們只是需要一個能高效完成某項工作的 UI，姑且稱爲 Micro UI 吧。在銀河帝國等科幻小說及科幻電影中，常常能看到一種叫“信息窗”的黑科技，這樣的每個信息窗就是一個 Micro UI。隨着 AI、AR、VR 、IOT 持續推進後，設備將越來越懂人，信息和數據的呈現也將越來越生動化，這些在科幻中才出現的東西在未來 10 年一定有一些會變成現實 ，這種 UI 的開發方式也將爲前端的開發方式帶來質的變化。RPA & Marchine Driven UI在 AI 和 IOT 時代，如果你依然堅持認爲應用一定是一個需要由專業人士設計開發，並且由用戶通過手機主動使用 Web 產品的話，那麼你將有較大概率過未來。RPA 這個遠古時代活躍在遊戲外掛的古老的技術在 AI、標準化產品飛速發展的正在煥發着升級，UiPath（www.uipath.com/）、Zapier（zapier.com/）、Microsoft Power Platform（flow.microsoft.com/zh…） 、UI Bot（www.uibot.com.cn/） 等工具正在改變很多行業的工作方式，而以 Google Assistant 爲代表的智能助理正在改變人們使用電腦的方式。作爲前端，我們要考慮是：UI 不僅是被人消費的，還可以被機器消費，甚至只需要描述你的意圖，這些非常需要一種高效的方式讓你的應用可以被機器人來驅動。甚至應用已經不再是一個當下我們能看到的，而是一個個機器人了，而我們提供的則是：RPA 機器人制作工具、可以被 RPA 來驅動的標準 UI。如何設計與實現可以被機器人、人同時使用的 UI 是我們面臨的一大挑戰。圖形技術依舊會是界面上的熱點儘管腦機交互已經在實驗室裏孵化，但未來十年眼睛依舊還是人類獲取外界信息最主要的通道，圖形化可以比文字快十倍甚至萬倍的速度清晰有效地傳達信息，這是人類經歷漫長進化習得的強大視覺化思考本能。在數據愈加豐富、使用場景愈加多樣的下一個十年，如何高效的從數據中獲得洞察依舊會有強烈的訴求，前端這個最接近數據可視化能力模型要求的工種依舊會是這個領域的主力。而另一方面，未來會出現新的「屏」，不管是 IOT 下的實屏還是 VR、AR 下的虛屏，當下已經相當完備和標準化的繪圖 API 最有機會被新「屏」優先支持和採用，在這基礎上利用圖形技術實現一套新的 UI 基礎設施甚至語言都是有可能的。前端智能化前端近年來一直嘗試提升效率，可視化研發、搭建體系、工程&工具、端多解決方案等等都是爲了解決效率，但天花板已然出現，下一步必然會引入智能化能力，在原來的技術體系&產品上，注入自然語言識別、圖像識別的能力，使得效能的發生一系列質的變化，來突破這個天花板。更大層面上，運用智能化能力來解決工作中的問題，會逐步成爲前端的必備能力和思考方式。就算不想去蹭人工智能的熱，事實上是你不得不接受並開始學習人工智能，大量簡單如千人千面的Banner、營銷活動頁已經純粹通過人工智能自動化生產，並不需要前端去參與研發，複雜如中後臺的表單、表格、圖表展現也已經可以通過提供接口智能推導出最佳的頁面實現，只需要一行代碼輸入數據就能出可視化圖表，甚至從設計稿直接生成頁面也將變成現實。前端智能化的項目將會越來越多，任何時候開始都不晚，但不開始就晚了。端到端的研發隨着雲原生和業務平臺能力逐步完備，前端運用Serverless能力來完成端到端的研發工作會逐步成爲一種趨勢，在這個趨勢的背後，會面臨兩個挑戰，一方面是需要將現有的工具和平臺延展到Serverless上，在支持Serverless的同時，必須將端到端一體化的來看待，包括：研發工具、監控體系、質量體系等等；另一方面對人員自身能力和意識有了新的要求。前端這個崗位的職能邊界和能力範圍的會發現變化。基於前端智能化與端到端的研發方向上，是未來前端開源上的最具吸引力的項目；而在整體的層面上，前端具備吸引力的項目會有兩個方面的特徵：在現有相關體系上提出新的理念和思想；隨着框架、構建庫等基礎設施收斂，類似的重複性的開源項目會減少，但創新並不會停止，等到更多關注和認可的一定是能力在基礎設施上提出新的理念和思想的項目。在現有相關體系上與其他領域產生鏈接；有些技術未必是剛剛出現，但今天重新受到前端業內的關注，比如WebAssembly，因爲大家發現了新的運用場景。未來將現有前端技術與其他技術領域相結合的項目和設計，會受到開源社區的更多關注。螞蟻金服“共戰‘疫情’，技術破局”數字課堂線火熱直播中，螞蟻金服產品專家夏海宏將爲大家帶來《雲上異步解耦和分佈式事務一致性的最佳實踐—SOFAStack 消息隊列》的主題分享，全面解讀SOFAStack消息隊列如何輕鬆實現異步解耦、削峯填谷，保證分佈式事務一致性。