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

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

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

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

抽象語法樹在前端的應(yīng)用

旖美信息技術(shù)前端開發(fā)經(jīng)理陳國興演講的主題為《抽象語法樹與Javascript》，他主要介紹了使用抽象語法樹（Abstract Syntax Tree）對前端代碼進行重構(gòu)、Babel轉(zhuǎn)譯原理、代碼轉(zhuǎn)換等內(nèi)容。

旖美信息技術(shù)前端開發(fā)經(jīng)理 陳國興

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

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

其次是規(guī)范，開發(fā)者要實現(xiàn)一個編程語言，就需要寫一棵語法樹。這棵樹需要有一個規(guī)范，例如函數(shù)的類型、名稱，都有一套完整的規(guī)范。

抽象語法樹的應(yīng)用場景主要包括：代碼的升降級、格式化（美化）代碼、生成代碼結(jié)構(gòu)圖、代碼壓縮優(yōu)化、代碼轉(zhuǎn)換、語言編譯（解釋）器等。

基于Vue開發(fā)微信小程序和原生App

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

DCloud CTO 崔紅保

據(jù)介紹，使用mpvue開發(fā)小程序，開發(fā)者將在小程序技術(shù)體系的基礎(chǔ)上獲取到以下能力：

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

·完整的Vue.js開發(fā)體驗；

·方便的Vuex數(shù)據(jù)管理方案：方便構(gòu)建復雜應(yīng)用；

·快捷的webpack構(gòu)建機制：自定義構(gòu)建策略、開發(fā)階段hotReload；

·支持使用npm外部依賴；

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

·H5代碼轉(zhuǎn)換編譯成小程序目標代碼的能力。

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

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

基于Vue開發(fā)的項目，在小程序上已經(jīng)可以正常運行了。如果實現(xiàn)一套和小程序一樣的App運行時環(huán)境，就可以發(fā)布成App了。

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

Weex在魅族小程序中的實踐

魅族高級工程師張興業(yè)表示，一直以來，魅族也在思考是否可以根據(jù)自己的業(yè)務(wù)創(chuàng)造一套適合自己的小程序方案，升級現(xiàn)有的動態(tài)化方案。也正是基于這種思考，同時結(jié)合Flyme系統(tǒng)中應(yīng)用的重運營屬性，魅族基于Weex技術(shù)實現(xiàn)了自己的小程序方案。

魅族高級工程師 張興業(yè)

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

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

1、系統(tǒng)級渲染引擎：UI渲染、Native 通信、應(yīng)用數(shù)據(jù)緩存、系統(tǒng)級渲染引擎；

2、管理平臺：應(yīng)用創(chuàng)建、上架、下架、升級等功能；

·可靠的版本管理系統(tǒng)：包括版本、灰度發(fā)布、內(nèi)測、邀測、回退、更新、推送管理。

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

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

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

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

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

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

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

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

·關(guān)于部署：通過開發(fā)小程序管理平臺，支持版本內(nèi)測。

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

·國際化：結(jié)合Vuejs的國際化開發(fā)經(jīng)驗，給出了小程序的國際化方案。

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

滴滴前端工程化思維

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

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

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

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

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

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

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

所以，前端工程化思維中不能只局限于前端一個領(lǐng)域進行思考，而是要與后端溝通，從全局考慮。如何把API做到好用，如何讓業(yè)務(wù)架構(gòu)師規(guī)劃好，這些都是工程化思維。因此，工程化不只是由前端一個人來實現(xiàn)的。

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

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

【51CTO原創(chuàng)稿件，合作站點轉(zhuǎn)載請注明原文作者和出處為51CTO.com】