【51CTO.com原創稿件】如今，移動終端的崛起已經超過PC，設備、系統以及語言的不統一，致使前端開發的難度越來越大。在具體的實際操作中，前端需要考慮開發幾個不同的版本來應對不同尺寸的設備展現，相對而言非常浪費人力、物力。

因此，大前端時代應運而生，一次開發適用所有平臺，開發者再也不用為一個APP適配安卓和iOS兩種模式而憂心了。目前各家公司都在利用HTML5開發各種需求。另一方面，云計算的迅猛崛起必然導致未來一切云端化，比如操作系統，各種應用程序未來都將云端化。

WOT2018全球運維與技術峰會“前端工程實踐”分論壇

那么，如何利用H5技術和云端化功能去解決這些問題？WOT2018全球運維與技術峰會剛剛落下帷幕，在為期兩天的會議中，十二個分論壇的四十余位講師進行了精彩的內容分享，其中，在“前端工程實踐”分論壇，主要圍繞著前端技術的創新發展、應用實踐以及未來趨勢等進行經驗共享。

抽象語法樹在前端的應用

旖美信息技術前端開發經理陳國興演講的主題為《抽象語法樹與Javascript》，他主要介紹了使用抽象語法樹（Abstract Syntax Tree）對前端代碼進行重構、Babel轉譯原理、代碼轉換等內容。

旖美信息技術前端開發經理 陳國興

抽象語法樹是代碼結構轉換成一棵類似于樹狀的結構，然后再去執行。從樹根開始，相當于是一棵倒過來的樹，然后一直往上延伸。在這個樹中，有很多種類型的語言，例如函數、加減表達式等，所以開發者就要把這些語言一一轉換。最終，開發者把所學到的語言和語法轉換成一棵樹，然后再根據這棵樹繼續做接下來的工作。

首先就是工具，常用的工具包括Astexplorer、Recast、Jscodeshift、Acorn、Esprima、Escodegen、Estree spec等網站。開發者可以把代碼貼到這些網站上，就會自動轉換成為語法樹。

其次是規范，開發者要實現一個編程語言，就需要寫一棵語法樹。這棵樹需要有一個規范，例如函數的類型、名稱，都有一套完整的規范。

抽象語法樹的應用場景主要包括：代碼的升降級、格式化（美化）代碼、生成代碼結構圖、代碼壓縮優化、代碼轉換、語言編譯（解釋）器等。

基于Vue開發微信小程序和原生App

DCloud CTO崔紅保介紹了使用mpvue開發微信小程序的技術路線，之后從分析微信小程序的運行時框架出發，講解如何使用Vue數據綁定替代小程序框架的數據綁定、基于Vue模板（SFCs）實現小程序組件（WXML），以及HTML5 Plus模擬小程序的JS API，從而完成跨平臺的App開發。***，還從跨端需求及平臺特性的角度，給出了開發者應遵循的開發規范及條件編譯方案。

DCloud CTO 崔紅保

據介紹，使用mpvue開發小程序，開發者將在小程序技術體系的基礎上獲取到以下能力：

·徹底的組件化開發能力：提高代碼復用性；

·完整的Vue.js開發體驗；

·方便的Vuex數據管理方案：方便構建復雜應用；

·快捷的webpack構建機制：自定義構建策略、開發階段hotReload；

·支持使用npm外部依賴；

·使用Vue.js命令行工具vue-cli快速初始化項目；

·H5代碼轉換編譯成小程序目標代碼的能力。

mpvue構建流程是整個項目最核心的地方之一，通過webpack，完成了template轉換為WXML和樣式轉換優化以及其他的若干代碼的拼接壓縮混淆等操作，最終使之可以運行在微信小程序的環境中。

在核心實現方面，mpvue將小程序的數據綁定功能，托管給了Vue。小程序負責視圖層展示，所有業務邏輯收斂到 Vue.js 中，Vue.js 數據變更后同步到小程序。數據更新發端于小程序，處理自 Vue.js，Vue.js 數據變更后再同步到小程序。

基于Vue開發的項目，在小程序上已經可以正常運行了。如果實現一套和小程序一樣的App運行時環境，就可以發布成App了。

在iOS上，小程序的JavaScript代碼是運行在JavaScriptCore中，是由WKWebView來渲染的，環境有iOS8、iOS9、iOS10。在Android上，小程序的JavaScript代碼是通過 X5 JSCore來解析，是由X5基于Mobile Chrome 53/57內核來渲染的。

Weex在魅族小程序中的實踐

魅族高級工程師張興業表示，一直以來，魅族也在思考是否可以根據自己的業務創造一套適合自己的小程序方案，升級現有的動態化方案。也正是基于這種思考，同時結合Flyme系統中應用的重運營屬性，魅族基于Weex技術實現了自己的小程序方案。

魅族高級工程師 張興業

魅族小程序是公司內部的一套無需安裝的小程序方案，集成了魅族內部的服務，包括登錄、埋點、push、支付等等。經過和微信小程序與快應用的對比，魅族最終選擇Weex方案。Weex是一套構建高性能、可擴展的原生應用跨平臺開發方案，魅族更關注高性能，快穩省才是重點，這也是魅族選擇Weex的原因。

小程序方案主要包括系統級渲染引擎、管理平臺、FlymeUI三大模塊。

1、系統級渲染引擎：UI渲染、Native 通信、應用數據緩存、系統級渲染引擎；

2、管理平臺：應用創建、上架、下架、升級等功能；

·可靠的版本管理系統：包括版本、灰度發布、內測、邀測、回退、更新、推送管理。

·監控度量體系：監控小程序啟動時間、頁面渲染時間、頁面滑動幀率、各種crash日志、流量、電量等問題和指導標準。通過無痕埋點的方式卡頓、不流暢、內存爆掉問題。

·多維度的數據分析系統：包括日活、月活、留存、機型、地域、支持自定義埋點。主要依托大數據能力，通過埋點SDK上報數據，通過小程序id區分。

3、FlymeUI：Flyme風格UI以及相關使用文檔，開發輔助項。目前提供了30+的Flyme風格UI，極大提升開發效率。

小程序方案重點優化包括啟動性能、長列表、動畫、安全、熱更新、國際化、夜間模式、部署等。

·啟動性能：小程序的啟動包括服務端獲取應用的信息、CDN下載***文件、小程序初始化、小程序首屏頁面渲染四個部分。

·長列表：Week提供的list確實很強大了，提供了loading、refresh組件。

·動畫：Week提供了兩種動畫方案。一是animation  module，包括位置、大小、旋轉角度、背景顏色和透明度。二是手勢交互，包括touch、pan、swipe、longpress。

·安全：主要包括沙盒機制、權限控制、安全域、文件簽名、Https。

·關于部署：通過開發小程序管理平臺，支持版本內測。

·夜間模式：支持Flyme 7的夜間模式，提供了應用自身的夜間模式方案；

·國際化：結合Vuejs的國際化開發經驗，給出了小程序的國際化方案。

此外，Weex也有AI方面的能力，可通過AI模型下發實現接口復用，可實現兩個應用場景，例如掃福等固定場景可以使用模型下發；識圖，支持LOGO識別、語音識別可以使用云端識別。

滴滴前端工程化思維

滴滴汽車開放平臺部前端負責人譙洪敏的演講主題是《滴滴前端工程化思維》。滴滴作為全球***汽車運營商，不僅能夠為用戶帶來豐厚的收入回報、更自由的選擇訂單，也能夠打通司機與租賃公司的信息不對稱。

滴滴汽車開放平臺部前端負責人 譙洪敏

在業務高速發展的過程中，滴滴面臨的業務系統越來越復雜，包括團隊成員越來越多、跨團隊協作越來越多、業務系統越來越復雜、框架越來越多、性能要求越來越高、可維護性越來越差等問題。因此，這就需要運用工程化的管理思想來解決，最終使其更加靈活、高效、穩定、簡單。

在工程領域，包括分層分域、基礎架構、系統、運維平臺、數據庫、平臺中間件、產品線規劃、持續交付、規范制定、流程管控。譙洪敏認為，前端所做的工作其實和這些方面都有關系。但有所不同的是，前端更多的是關注模塊化、組件化、規范化、自動化、流程規范、倉庫管理、性能優化、資源控制（異步、同步、按需、預加載、依賴管理、合并、內嵌）、系統部署、效率工具等方面。

前端首先涉及到的就是組件與模塊設計。所謂組件，就是要把Container Components（容器組件模型）和Presentational Components（展示組件模型）進行分治。目前，主流的組件包括antd、element、material、cube-ui、mand-mobile。

其次，就是進行粒度控制，包括UI級、BC業務組件級、Page頁面級、Module模塊級、項目級。

第三是治理。前端有很多開發業務，在開發一套系統時，很多人都在想一定要考慮到5年甚至10年以后，其實很多系統往往幾個月就要重新寫。現在很多系統架構特別復雜，沒有規范性。因此，開發者在進行大量治理時，***的方式就是根據SPA，進行前端的梳理和規劃，而后在接入層給前端的就是一些非常簡單、比較規范的API。

所以，前端工程化思維中不能只局限于前端一個領域進行思考，而是要與后端溝通，從全局考慮。如何把API做到好用，如何讓業務架構師規劃好，這些都是工程化思維。因此，工程化不只是由前端一個人來實現的。

第四是按需加載。前端如何做到性能優化、按需加載、更快的下載是前端工程化思想中非常重要的問題。下載包括三種模式：樓層模式、Code Splitting模式、babel-plugin-import模式。

大前端時代是WEB統一的時代，利用HTML5，不但可以開發傳統的網站，做炫酷的網頁動態效果，更可以采用BS架構開發應用程序、開發手機端WEB應用、移動端Native應用程序、智能設備等，從而讓人們的生活更加的豐富多彩。來自前端領域的四位講師結合自身經驗的分享想必能夠為您提供新的思路與靈感，以上即為WOT2018全球軟件與運維技術峰會“前端工程實踐”分論壇四位講師演講的重點內容，更多關于WOT的內容請關注51cto.com。

【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】