2019年一半已過，這些大前端技術(shù)你都GET了嗎？- 上篇

一晃眼2019年已過大半，年初信誓旦旦要學習新技能的小伙伴們立的flag都完成的怎樣了？2019年對于大前端技術(shù)領(lǐng)域而言變化不算太大，目前三大技術(shù)框架日趨成熟，短期內(nèi)不大可能出現(xiàn)顛覆性的前端框架(內(nèi)心OS：出了也學不動了)。

本文結(jié)合個人和團隊經(jīng)歷對2019上半年做個技術(shù)總結(jié)，將各類技術(shù)框架/語言/工具分作兩個維度：

技術(shù)采用生命周期

* 創(chuàng)新者（Innovators）：技術(shù)的冒險者，第一時間嘗試新技術(shù)
* 早期采用者（Early Adopters）：技術(shù)早期采用者，具備一定探索精神，某個領(lǐng)域的意見領(lǐng)袖
* 早期大眾（early majority）：技術(shù)早期大眾使用者，深思熟慮者，往往采用相對成熟的技術(shù)
* 晚期大眾（late majority）：技術(shù)的平民老百姓，跟隨趨勢采用當前主流的技術(shù)
* 落后者（laggards）：技術(shù)的落后者，長時間不更新技術(shù)棧，存在大量技術(shù)債
技術(shù)方向
按照大前端技術(shù)架構(gòu)圖進行分層，大體分為：狀態(tài)管理、UI組件、小程序、跨平臺、框架層、編程語言、工程化、監(jiān)控、測試和服務(wù)端。
? 2019上半年大前端技術(shù)總結(jié)
狀態(tài)管理


隨著React、Vue這類前端框架的流行，組件化開發(fā)成為主流，然而隨著頁面復雜度越來越高，在一個組件文件中，要做UI渲染、事件處理、狀態(tài)管理等等事情，于是一個文件變的越來越復雜。同時，頁面組件層級變的復雜后，跨組件間的數(shù)據(jù)通信也變的很繁瑣，需要將數(shù)據(jù)上提到父節(jié)點，通過property傳輸數(shù)據(jù)、回調(diào)方法更新父節(jié)點狀態(tài)等等。

Facebook首先提出Flux框架，引入單向數(shù)據(jù)流的編程模式，把Action和Store從View中解耦出去，極大的優(yōu)化了原有狀態(tài)管理的架構(gòu)。

?


Redux=Flux+Reducer，由于Store的唯一性加上Reducer純函數(shù)，使得數(shù)據(jù)狀態(tài)具有可預測性，于是配套出現(xiàn)了很多基于TimeMachine機制的調(diào)試工具，極大的提升了研發(fā)調(diào)試效率。不過由于Reducer的純函數(shù)性質(zhì)，對于一些異步請求的副作用又要引入中間件，導致了一定的復雜度。

?


Vuex作為Vue框架的狀態(tài)管理的不二選擇，核心思想和Flux/Redux一脈相承，弱化了Reducer的概念而改用Mutations，使得整套框架更易于理解了。
?
?

?

Mobx是一個非常輕量級的狀態(tài)管理框架，引入了observable state、computed
value，極大的簡化了狀態(tài)修改的方式，相對于Redux減少了不少模板代碼，上手迅速使用友好，不過由于缺乏Redux這類的強制規(guī)范，需要在使用中進行必要約束。

dva是螞蟻金服出品的數(shù)據(jù)狀態(tài)管理框架，dva=React+Redux+Saga，通過約定大大簡化了編程體驗，值得持續(xù)關(guān)注。


狀態(tài)管理不是每個前端應(yīng)用都必須使用的，要結(jié)合自身業(yè)務(wù)復雜度來決定，只有業(yè)務(wù)邏輯有一定復雜度需要做到各個模塊解耦才考慮采用，如果一個Todo都用上Redux，我懷疑你是在炫技~

UI組件


在前端三大框架還未一統(tǒng)江湖的時候，組件庫百花爭鳴有Dojo、Bootstrap、Extjs等等。自從React橫空出世，組件化變成了前端開發(fā)的標準模式，同時也應(yīng)運而生了兩大UI組件庫：基于React的Ant
Design和基于Vue的ElementUI。


作為兩大成熟UI組件庫，如果你的系統(tǒng)是屬于中后臺業(yè)務(wù)，對于UI定制化要求不那么嚴格，那么這兩個一定是不二選擇，兩者功能上沒有太大區(qū)別，基礎(chǔ)UI控件、多語言、主題配置等等要啥有啥，唯一的風險就是圣誕節(jié)給你來個下雪的彩蛋（政府網(wǎng)站高危預警）。

UI組件庫可以持續(xù)關(guān)注Web
Components，畢竟是Chrome瀏覽器親生的，背后有Google這個老爹撐腰，而且現(xiàn)在React/Vue不也變的越來越像Web
Components了嗎？
另外前端數(shù)據(jù)可視化、3D化也是一個很好方向，一些酷炫的前端庫小伙伴們可以擼起來了~

小程序


2019年小程序百花齊放，各大超級App都推出了自己的小程序應(yīng)用，前端同學們要支持眾多小程序，摸摸頭發(fā)又稀疏了不少吧（em...離資深研發(fā)又邁出了堅實的一步）。小程序的實現(xiàn)有多種方式，需要結(jié)合自身的業(yè)務(wù)場景來做選擇。

選擇一，小程序原生開發(fā)方式，以微信為主開發(fā)小程序，再通過少量修改移植到其他平臺（工作量多少沒有做過不好估計，但既然當初支付寶小程序demo都抄微信的，感覺應(yīng)該不大吧~）
選擇二，H5內(nèi)嵌開發(fā)方式，天然多平臺跨端，但會有些許性能損失，也會有些功能限制，例如微信里面的消息通知不能通過H5來推送
選擇三，mpvue這類基于某種框架的開發(fā)方式，mpvue就是基于vue框架來開發(fā)小程序，對于熟悉vue的同學學習曲線很低，同時也可以實現(xiàn)代碼邏輯的復用
選擇四，Taro跨多端的實現(xiàn)方式，支持用 React 的開發(fā)方式編寫一次代碼，生成能運行在微信/百度/支付寶/字節(jié)跳動/ QQ
小程序、快應(yīng)用、H5、React Native 等的應(yīng)用。對于功能需要同時滿足多個小程序應(yīng)用的場景比較適合。

跨平臺

錦濤在Qcon分享 -?美團移動端動態(tài)化實踐
<https://links.jianshu.com/go?to=https%3A%2F%2Fqcon.infoq.cn%2F2018%2Fbeijing%2Fpresentation%2F492>
中總結(jié)了業(yè)界和美團在移動端跨平臺&動態(tài)化的實踐，可以看到公司在跨平臺&動態(tài)化方面進行了多維度的研究和投入，這樣可以適用于不同的業(yè)務(wù)形態(tài)。
?
?
? ?
自從移動端有了iOS、Android兩大平臺，在加上原有的H5
Web端，跨平臺就成了這幾年大前端最熱鬧的地方，畢竟一個功能實現(xiàn)三套換誰都不樂意干，于是在用戶體驗和研發(fā)體驗中的一場拉鋸戰(zhàn)就開始了，各大廠商各顯神通。


最早出現(xiàn)的是Phonegap這類基于WebView的實現(xiàn)方式，由于WebView天然跨平臺能力很好的解決了展示層的問題，然后通過jsBridge打通WebView和Native之間通信，使得瀏覽器中的H5代碼也能有原生能力。這種方式研發(fā)體驗最好，但是用戶體驗最差。

然后就是React Native、Weex、Picasso，它們基于Virtual
Dom或者模板語言，通過js代碼編寫UI，然后渲染成原生組件，完美了實現(xiàn)了用戶體驗和研發(fā)體驗的平衡。但要用好這些框架還是需要對性能優(yōu)化、差異性抹平、工程化有比較高的要求，小團隊小公司慎用，否則入坑容易出坑難。

今年大熱是Flutter，可以持續(xù)關(guān)注，技術(shù)架構(gòu)很優(yōu)秀，野心很龐大，大有一統(tǒng)江湖的氣勢。

跨平臺熱熱鬧鬧多年，我個人認為當前的解決方案都是折中方案，隨著手機性能逐步優(yōu)化、瀏覽器原生能力的增強，也許大家都會回歸本源，走上H5這條道路。

框架層


上半年框架層沒有太大變化，依舊三大前端框架把持：React，Vue，Angular。從團隊使用情況來看，React、Vue依舊是主流，Angular似乎慢慢不那么受待見，也許太難學了吧(手動捂臉)

React
16.x上半年發(fā)布，推出了不少新特性，例如hooks、lazy、suspense等等，如果是React技術(shù)棧的同學鼓勵第一時間進行嘗試。hooks還需要再多多實踐，整體實現(xiàn)理念和原有class方式有很大不同，習慣了原有的生命周期的寫法的同學還需要適應(yīng)。

Vue 3.x難產(chǎn)至今，根據(jù)路線圖3.0會有大量的更新，比如virtual
dom的重寫、框架會更小更快、全面擁抱TypeScript、使用Proxy來實現(xiàn)檢測機制等等。呼喚尤大大趕緊更新，vue的同學恨的牙癢癢的，下半年的KPI就指望這個啦~


Angular近期沒有太多關(guān)注，不過Angular是一個真正意義的MVVM框架，不比React或者Vue其實都是View框架，所以這是一個大而全的框架。但是團隊方面期望技術(shù)棧進行收斂，所以這方面就沒有太多的投入了。


在框架層，可以持續(xù)關(guān)注PWA和WebAssembly，PWA對于弱網(wǎng)環(huán)境的用戶體驗提升很有幫助，而且還可以作為桌面應(yīng)用的技術(shù)框架。WebAssembly可以讓前端在高密度計算性能上得到很大提升，不過應(yīng)用場景有限。

已經(jīng)寫了不少了，大家也看的挺辛苦的吧，剩下的部分等我下篇再更新。由于個人精力有限并且結(jié)合當前團隊情況，一定有不少缺失，歡迎小伙伴們補充。

有興趣同學可以關(guān)注微信公眾號奶爸碼農(nóng)，不定期分享關(guān)于投資、理財、IT的信息：
?
?

廣告時間：上海美團點評招聘前端資深/專家工程師，歡迎小伙伴們加入，可以發(fā)郵件給 wangdan53[AT]meituan.com。

• ? 上一篇：持續(xù)學習——程序猿的軍備競賽
• ? 下一篇：每天用SpringBoot，還不懂RESTful API返回統(tǒng)一數(shù)據(jù)格式是怎么實現(xiàn)的？