建站
咨詢
售后
建站咨詢
新聞中心
【稿件】如今，移動(dòng)終端的崛起已經(jīng)超過(guò)PC，設(shè)備、系統(tǒng)以及語(yǔ)言的不統(tǒng)一，致使前端開(kāi)發(fā)的難度越來(lái)越大。在具體的實(shí)際操作中，前端需要考慮開(kāi)發(fā)幾個(gè)不同的版本來(lái)應(yīng)對(duì)不同尺寸的設(shè)備展現(xiàn)，相對(duì)而言非常浪費(fèi)人力、物力。
因此，大前端時(shí)代應(yīng)運(yùn)而生，一次開(kāi)發(fā)適用所有平臺(tái)，開(kāi)發(fā)者再也不用為一個(gè)APP適配安卓和iOS兩種模式而憂心了。目前各家公司都在利用HTML5開(kāi)發(fā)各種需求。另一方面，云計(jì)算的迅猛崛起必然導(dǎo)致未來(lái)一切云端化，比如操作系統(tǒng)，各種應(yīng)用程序未來(lái)都將云端化。
WOT2018全球運(yùn)維與技術(shù)峰會(huì)“前端工程實(shí)踐”分論壇
那么，如何利用H5技術(shù)和云端化功能去解決這些問(wèn)題？WOT2018全球運(yùn)維與技術(shù)峰會(huì)剛剛落下帷幕，在為期兩天的會(huì)議中，十二個(gè)分論壇的四十余位講師進(jìn)行了精彩的內(nèi)容分享，其中，在“前端工程實(shí)踐”分論壇，主要圍繞著前端技術(shù)的創(chuàng)新發(fā)展、應(yīng)用實(shí)踐以及未來(lái)趨勢(shì)等進(jìn)行經(jīng)驗(yàn)共享。
抽象語(yǔ)法樹(shù)在前端的應(yīng)用
旖美信息技術(shù)前端開(kāi)發(fā)經(jīng)理陳國(guó)興演講的主題為《抽象語(yǔ)法樹(shù)與Javascript》，他主要介紹了使用抽象語(yǔ)法樹(shù)（Abstract Syntax Tree）對(duì)前端代碼進(jìn)行重構(gòu)、Babel轉(zhuǎn)譯原理、代碼轉(zhuǎn)換等內(nèi)容。
旖美信息技術(shù)前端開(kāi)發(fā)經(jīng)理 陳國(guó)興
抽象語(yǔ)法樹(shù)是代碼結(jié)構(gòu)轉(zhuǎn)換成一棵類似于樹(shù)狀的結(jié)構(gòu)，然后再去執(zhí)行。從樹(shù)根開(kāi)始，相當(dāng)于是一棵倒過(guò)來(lái)的樹(shù)，然后一直往上延伸。在這個(gè)樹(shù)中，有很多種類型的語(yǔ)言，例如函數(shù)、加減表達(dá)式等，所以開(kāi)發(fā)者就要把這些語(yǔ)言一一轉(zhuǎn)換。最終，開(kāi)發(fā)者把所學(xué)到的語(yǔ)言和語(yǔ)法轉(zhuǎn)換成一棵樹(shù)，然后再根據(jù)這棵樹(shù)繼續(xù)做接下來(lái)的工作。
首先就是工具，常用的工具包括Astexplorer、Recast、Jscodeshift、Acorn、Esprima、Escodegen、Estree spec等網(wǎng)站。開(kāi)發(fā)者可以把代碼貼到這些網(wǎng)站上，就會(huì)自動(dòng)轉(zhuǎn)換成為語(yǔ)法樹(shù)。
其次是規(guī)范，開(kāi)發(fā)者要實(shí)現(xiàn)一個(gè)編程語(yǔ)言，就需要寫(xiě)一棵語(yǔ)法樹(shù)。這棵樹(shù)需要有一個(gè)規(guī)范，例如函數(shù)的類型、名稱，都有一套完整的規(guī)范。
抽象語(yǔ)法樹(shù)的應(yīng)用場(chǎng)景主要包括：代碼的升降級(jí)、格式化（美化）代碼、生成代碼結(jié)構(gòu)圖、代碼壓縮優(yōu)化、代碼轉(zhuǎn)換、語(yǔ)言編譯（解釋）器等。
基于Vue開(kāi)發(fā)微信小程序和原生App
DCloud CTO崔紅保介紹了使用mpvue開(kāi)發(fā)微信小程序的技術(shù)路線，之后從分析微信小程序的運(yùn)行時(shí)框架出發(fā)，講解如何使用Vue數(shù)據(jù)綁定替代小程序框架的數(shù)據(jù)綁定、基于Vue模板（SFCs）實(shí)現(xiàn)小程序組件（WXML），以及HTML5 Plus模擬小程序的JS API，從而完成跨平臺(tái)的App開(kāi)發(fā)。***，還從跨端需求及平臺(tái)特性的角度，給出了開(kāi)發(fā)者應(yīng)遵循的開(kāi)發(fā)規(guī)范及條件編譯方案。
DCloud CTO 崔紅保
據(jù)介紹，使用mpvue開(kāi)發(fā)小程序，開(kāi)發(fā)者將在小程序技術(shù)體系的基礎(chǔ)上獲取到以下能力：
·徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性；
·完整的Vue.js開(kāi)發(fā)體驗(yàn)；
·方便的Vuex數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用；
·快捷的webpack構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段hotReload；
·支持使用npm外部依賴；
·使用Vue.js命令行工具vue-cli快速初始化項(xiàng)目；
·H5代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力。
mpvue構(gòu)建流程是整個(gè)項(xiàng)目最核心的地方之一，通過(guò)webpack，完成了template轉(zhuǎn)換為WXML和樣式轉(zhuǎn)換優(yōu)化以及其他的若干代碼的拼接壓縮混淆等操作，最終使之可以運(yùn)行在微信小程序的環(huán)境中。
在核心實(shí)現(xiàn)方面，mpvue將小程序的數(shù)據(jù)綁定功能，托管給了Vue。小程序負(fù)責(zé)視圖層展示，所有業(yè)務(wù)邏輯收斂到 Vue.js 中，Vue.js 數(shù)據(jù)變更后同步到小程序。數(shù)據(jù)更新發(fā)端于小程序，處理自 Vue.js，Vue.js 數(shù)據(jù)變更后再同步到小程序。
基于Vue開(kāi)發(fā)的項(xiàng)目，在小程序上已經(jīng)可以正常運(yùn)行了。如果實(shí)現(xiàn)一套和小程序一樣的App運(yùn)行時(shí)環(huán)境，就可以發(fā)布成App了。
在iOS上，小程序的JavaScript代碼是運(yùn)行在JavaScriptCore中，是由WKWebView來(lái)渲染的，環(huán)境有iOS8、iOS9、iOS10。在Android上，小程序的JavaScript代碼是通過(guò) X5 JSCore來(lái)解析，是由X5基于Mobile Chrome 53/57內(nèi)核來(lái)渲染的。
Weex在魅族小程序中的實(shí)踐
魅族高級(jí)工程師張興業(yè)表示，一直以來(lái)，魅族也在思考是否可以根據(jù)自己的業(yè)務(wù)創(chuàng)造一套適合自己的小程序方案，升級(jí)現(xiàn)有的動(dòng)態(tài)化方案。也正是基于這種思考，同時(shí)結(jié)合Flyme系統(tǒng)中應(yīng)用的重運(yùn)營(yíng)屬性，魅族基于Weex技術(shù)實(shí)現(xiàn)了自己的小程序方案。
魅族高級(jí)工程師 張興業(yè)
魅族小程序是公司內(nèi)部的一套無(wú)需安裝的小程序方案，集成了魅族內(nèi)部的服務(wù)，包括登錄、埋點(diǎn)、push、支付等等。經(jīng)過(guò)和微信小程序與快應(yīng)用的對(duì)比，魅族最終選擇Weex方案。Weex是一套構(gòu)建高性能、可擴(kuò)展的原生應(yīng)用跨平臺(tái)開(kāi)發(fā)方案，魅族更關(guān)注高性能，快穩(wěn)省才是重點(diǎn)，這也是魅族選擇Weex的原因。
小程序方案主要包括系統(tǒng)級(jí)渲染引擎、管理平臺(tái)、FlymeUI三大模塊。
1、系統(tǒng)級(jí)渲染引擎：UI渲染、Native 通信、應(yīng)用數(shù)據(jù)緩存、系統(tǒng)級(jí)渲染引擎；
2、管理平臺(tái)：應(yīng)用創(chuàng)建、上架、下架、升級(jí)等功能；
·可靠的版本管理系統(tǒng)：包括版本、灰度發(fā)布、內(nèi)測(cè)、邀測(cè)、回退、更新、推送管理。
·監(jiān)控度量體系：監(jiān)控小程序啟動(dòng)時(shí)間、頁(yè)面渲染時(shí)間、頁(yè)面滑動(dòng)幀率、各種crash日志、流量、電量等問(wèn)題和指導(dǎo)標(biāo)準(zhǔn)。通過(guò)無(wú)痕埋點(diǎn)的方式卡頓、不流暢、內(nèi)存爆掉問(wèn)題。
·多維度的數(shù)據(jù)分析系統(tǒng)：包括日活、月活、留存、機(jī)型、地域、支持自定義埋點(diǎn)。主要依托大數(shù)據(jù)能力，通過(guò)埋點(diǎn)SDK上報(bào)數(shù)據(jù)，通過(guò)小程序id區(qū)分。
3、FlymeUI：Flyme風(fēng)格UI以及相關(guān)使用文檔，開(kāi)發(fā)輔助項(xiàng)。目前提供了30+的Flyme風(fēng)格UI，極大提升開(kāi)發(fā)效率。
小程序方案重點(diǎn)優(yōu)化包括啟動(dòng)性能、長(zhǎng)列表、動(dòng)畫(huà)、安全、熱更新、國(guó)際化、夜間模式、部署等。
·啟動(dòng)性能：小程序的啟動(dòng)包括服務(wù)端獲取應(yīng)用的信息、CDN下載***文件、小程序初始化、小程序首屏頁(yè)面渲染四個(gè)部分。
·長(zhǎng)列表：Week提供的list確實(shí)很強(qiáng)大了，提供了loading、refresh組件。
·動(dòng)畫(huà)：Week提供了兩種動(dòng)畫(huà)方案。一是animation module，包括位置、大小、旋轉(zhuǎn)角度、背景顏色和透明度。二是手勢(shì)交互，包括touch、pan、swipe、longpress。
·安全：主要包括沙盒機(jī)制、權(quán)限控制、安全域、文件簽名、Https。
·關(guān)于部署：通過(guò)開(kāi)發(fā)小程序管理平臺(tái)，支持版本內(nèi)測(cè)。
·夜間模式：支持Flyme 7的夜間模式，提供了應(yīng)用自身的夜間模式方案；
·國(guó)際化：結(jié)合Vuejs的國(guó)際化開(kāi)發(fā)經(jīng)驗(yàn)，給出了小程序的國(guó)際化方案。
此外，Weex也有AI方面的能力，可通過(guò)AI模型下發(fā)實(shí)現(xiàn)接口復(fù)用，可實(shí)現(xiàn)兩個(gè)應(yīng)用場(chǎng)景，例如掃福等固定場(chǎng)景可以使用模型下發(fā)；識(shí)圖，支持LOGO識(shí)別、語(yǔ)音識(shí)別可以使用云端識(shí)別。
滴滴前端工程化思維
滴滴汽車開(kāi)放平臺(tái)部前端負(fù)責(zé)人譙洪敏的演講主題是《滴滴前端工程化思維》。滴滴作為全球***汽車運(yùn)營(yíng)商，不僅能夠?yàn)橛脩魩?lái)豐厚的收入回報(bào)、更自由的選擇訂單，也能夠打通司機(jī)與租賃公司的信息不對(duì)稱。
滴滴汽車開(kāi)放平臺(tái)部前端負(fù)責(zé)人 譙洪敏
在業(yè)務(wù)高速發(fā)展的過(guò)程中，滴滴面臨的業(yè)務(wù)系統(tǒng)越來(lái)越復(fù)雜，包括團(tuán)隊(duì)成員越來(lái)越多、跨團(tuán)隊(duì)協(xié)作越來(lái)越多、業(yè)務(wù)系統(tǒng)越來(lái)越復(fù)雜、框架越來(lái)越多、性能要求越來(lái)越高、可維護(hù)性越來(lái)越差等問(wèn)題。因此，這就需要運(yùn)用工程化的管理思想來(lái)解決，最終使其更加靈活、高效、穩(wěn)定、簡(jiǎn)單。
在工程領(lǐng)域，包括分層分域、基礎(chǔ)架構(gòu)、系統(tǒng)、運(yùn)維平臺(tái)、數(shù)據(jù)庫(kù)、平臺(tái)中間件、產(chǎn)品線規(guī)劃、持續(xù)交付、規(guī)范制定、流程管控。譙洪敏認(rèn)為，前端所做的工作其實(shí)和這些方面都有關(guān)系。但有所不同的是，前端更多的是關(guān)注模塊化、組件化、規(guī)范化、自動(dòng)化、流程規(guī)范、倉(cāng)庫(kù)管理、性能優(yōu)化、資源控制（異步、同步、按需、預(yù)加載、依賴管理、合并、內(nèi)嵌）、系統(tǒng)部署、效率工具等方面。
前端首先涉及到的就是組件與模塊設(shè)計(jì)。所謂組件，就是要把Container Components（容器組件模型）和Presentational Components（展示組件模型）進(jìn)行分治。目前，主流的組件包括antd、element、material、cube-ui、mand-mobile。
其次，就是進(jìn)行粒度控制，包括UI級(jí)、BC業(yè)務(wù)組件級(jí)、Page頁(yè)面級(jí)、Module模塊級(jí)、項(xiàng)目級(jí)。
第三是治理。前端有很多開(kāi)發(fā)業(yè)務(wù)，在開(kāi)發(fā)一套系統(tǒng)時(shí)，很多人都在想一定要考慮到5年甚至10年以后，其實(shí)很多系統(tǒng)往往幾個(gè)月就要重新寫(xiě)?，F(xiàn)在很多系統(tǒng)架構(gòu)特別復(fù)雜，沒(méi)有規(guī)范性。因此，開(kāi)發(fā)者在進(jìn)行大量治理時(shí)，***的方式就是根據(jù)SPA，進(jìn)行前端的梳理和規(guī)劃，而后在接入層給前端的就是一些非常簡(jiǎn)單、比較規(guī)范的API。
所以，前端工程化思維中不能只局限于前端一個(gè)領(lǐng)域進(jìn)行思考，而是要與后端溝通，從全局考慮。如何把API做到好用，如何讓業(yè)務(wù)架構(gòu)師規(guī)劃好，這些都是工程化思維。因此，工程化不只是由前端一個(gè)人來(lái)實(shí)現(xiàn)的。
第四是按需加載。前端如何做到性能優(yōu)化、按需加載、更快的下載是前端工程化思想中非常重要的問(wèn)題。下載包括三種模式：樓層模式、Code Splitting模式、babel-plugin-import模式。
大前端時(shí)代是WEB統(tǒng)一的時(shí)代，利用HTML5，不但可以開(kāi)發(fā)傳統(tǒng)的網(wǎng)站，做炫酷的網(wǎng)頁(yè)動(dòng)態(tài)效果，更可以采用BS架構(gòu)開(kāi)發(fā)應(yīng)用程序、開(kāi)發(fā)手機(jī)端WEB應(yīng)用、移動(dòng)端Native應(yīng)用程序、智能設(shè)備等，從而讓人們的生活更加的豐富多彩。來(lái)自前端領(lǐng)域的四位講師結(jié)合自身經(jīng)驗(yàn)的分享想必能夠?yàn)槟峁┬碌乃悸放c靈感，以上即為WOT2018全球軟件與運(yùn)維技術(shù)峰會(huì)“前端工程實(shí)踐”分論壇四位講師演講的重點(diǎn)內(nèi)容，更多關(guān)于WOT的內(nèi)容請(qǐng)關(guān)注。
【原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為.com】
當(dāng)前題目：【W(wǎng)OT2018】大前端時(shí)代來(lái)臨，H5和云端化如何破解開(kāi)發(fā)難題？
標(biāo)題來(lái)源：http://m.5511xx.com/article/djhdshc.html
