SACC 2018十年架構(gòu)成長，前端與移動開發(fā)者的創(chuàng)新與挑戰(zhàn)！

【IT168 評論】十年的風(fēng)雨同舟，十年的相濡以沫！SACC（中國系統(tǒng)架構(gòu)師大會）已成為中國架構(gòu)師領(lǐng)域最具影響力品牌，是CTO、研發(fā)總監(jiān)、系統(tǒng)架構(gòu)師，研發(fā)工程師、IT經(jīng)理等人群的饕餮大餐。

2018年10月19日，由IT168旗下ITPUB企業(yè)社區(qū)平臺主辦的第十屆中國系統(tǒng)架構(gòu)師大會(SACC2018)來到了第三天，依舊熱情不減。基礎(chǔ)架構(gòu)運維、容器技術(shù)、架構(gòu)成長、前端架構(gòu)、大數(shù)據(jù)分析、與區(qū)塊鏈應(yīng)用等8大專場內(nèi)容分上午、下午兩部分，齊頭并進?，F(xiàn)場座無虛席，互動不斷。

本文聚焦于前端開發(fā)與移動架構(gòu)專場，詳細(xì)解讀前端架構(gòu)在不同企業(yè)的具體實踐。

兔展雷宗民：小團隊的基礎(chǔ)設(shè)施建設(shè)之路

對于大多數(shù)初創(chuàng)公司的小團隊而言，面臨的問題包括初級技術(shù)水平的成員占比較高，基礎(chǔ)設(shè)施不完善，但是卻要求用更短的時間和更少的資源來完成任務(wù)。

代碼開發(fā)講究效率、規(guī)范和質(zhì)量三大關(guān)鍵點，在前面背景下很難做到代碼、文檔統(tǒng)一，雷老師分享了兔展內(nèi)部通過代碼來描述接口、自動生成文檔來統(tǒng)一解決此類問題。

在開發(fā)團隊，前端和后端的糾纏也是也是一大問題。項目之間的牽扯與部署權(quán)限混亂在前后端團隊之間時有發(fā)生，兔展從開始的統(tǒng)一賬號提交發(fā)展到后期提交發(fā)布管理平臺，以此防止出現(xiàn)問題責(zé)任不明確和內(nèi)容修改等問題。

  蘇寧李曉健：蘇寧視頻云前端系統(tǒng)架構(gòu)的演變歷程

 現(xiàn)在很多的系統(tǒng)也都由客戶端慢慢的向WEB端轉(zhuǎn)移，所以WEB端內(nèi)容已經(jīng)不再是只用來做靜態(tài)內(nèi)容的展示，現(xiàn)在的WEB端已經(jīng)體現(xiàn)出了很多之前在后端才有的一些邏輯和交互，前端也在不停的增加著業(yè)務(wù)代碼，在用戶體驗上也有較高的要求，這些包括頁面的響應(yīng)速度和數(shù)據(jù)的動態(tài)獲取等等，這些原因也是近幾年前端快速發(fā)展的根本原因。

前端的業(yè)務(wù)日漸復(fù)雜，那代碼量自然也會隨之增加，這就帶來了一系列的問題，比如代碼的維護更加困難，團隊的協(xié)同開發(fā)更加麻煩，頁面去加載和解析這些資源也會變慢等等。要想更好的解決這些問題，就需要一個合理的架構(gòu)。下圖是李曉健老師分享的蘇寧視頻云如何搭建一個合適的架構(gòu)。

當(dāng)然架構(gòu)沒有最好的，只有更合適的，并且不同的團隊，不同的產(chǎn)品也相差較大，所以想要找到一個合理的架構(gòu)就需要我們根據(jù)自身情況不斷的去總結(jié)和完善。

阿里巴巴林陽：H5頁面呈現(xiàn)體驗解決方案

近年來的前端發(fā)展多集中在工程化方案上，很多框架也是在這個思維上進行解決方案的梳理，而忽略了H5在交互上具有更強的優(yōu)勢。而當(dāng)H5內(nèi)嵌在客戶端內(nèi)，結(jié)合更多樣的業(yè)務(wù)場景，對資源加載、性能要求、模塊高可用都提出了新的挑戰(zhàn)。

演講圍繞 H5頁面如何深入用戶體驗，構(gòu)建漸進式Web App，做到頁面加載呈現(xiàn)媲美原生應(yīng)用，并使網(wǎng)站加載速度更快，更具備彈性展開細(xì)化討論。在涉及h6可控性差和模塊加載速度慢以及頁面渲染效果方面都有深入探討。

林陽老師在會上還分享了用h6做的蘋果操作系統(tǒng)界面，在演示demo中，圖片的加載是不同于其他h6的逐幀加載，demo中是加載圖片完成后再進行展示，實現(xiàn)途徑有兩種，一種是圖片的加載時用JavaScript控制顯示，第二種是把JavaScript做出的邏輯寫到css引擎上，通過css的語法就可以讓開發(fā)者實現(xiàn)這樣的呈現(xiàn)效果。中間還有很多頁面渲染和加載的具體細(xì)節(jié)，可點擊林陽老師的demo進行查看，地址： http://ioing.com/#!demo/app-ios!/ 。

  汽車之家羅飛飛：汽車之家React Native應(yīng)用實踐。

 為了支撐業(yè)務(wù)高速發(fā)展，汽車之家在客戶端動態(tài)化方案上，一直在披荊斬棘，持續(xù)演進。從Hybrid、插件化、卡片化，到ReactNative方案的引入，動態(tài)能力變得日益強大。React Native作為Facebook開源的使用JavaScript語言編寫原生應(yīng)用的一項技術(shù)，其兼顧了開發(fā)效率與應(yīng)用性能，是目前跨平臺開發(fā)框架的極佳選擇，適合于業(yè)務(wù)的大規(guī)模使用。但對開發(fā)者來說，React Native的實踐道路上仍然有很多現(xiàn)實的技術(shù)坑。

RN整體性能雖然不錯，但RN的方案并不是完美的。RN原生提供的組件并不多；RN給出了一些非?；A(chǔ)的Api，很多時候，不能滿足業(yè)務(wù)快速發(fā)展的需要。一些交互非常復(fù)雜、頁面非常復(fù)雜、需要頻繁的更新、需要一些手勢交互的場景，RN 仍有些內(nèi)存跟性能的瓶頸。穩(wěn)定性上，也有比較大的提升空間；為此汽車之間建設(shè)一個配套保障平臺（做功能支撐），

為使用RN做業(yè)務(wù)開發(fā)的同學(xué)，提供一整套從開發(fā)，到上線，到線上質(zhì)量保證功能支撐。這些對業(yè)務(wù)來說是非常重要的。

總結(jié)：React Native兼顧了開發(fā)效率與應(yīng)用性能，是目前動態(tài)化方案的極佳選擇，適合于追求高性能、快速迭代、平臺級的APP。同時，React Native項目也在持續(xù)演進之中，大規(guī)模使用時需要一個團隊進行定制改造與維護。（當(dāng)然，這也是豐儉由人，依具體業(yè)務(wù)而定）

在本屆SACC大會的《前端架構(gòu)與移動開發(fā)》專場，我們了解了不同企業(yè)在前端架構(gòu)設(shè)計等方面的實踐優(yōu)化。第十屆中國系統(tǒng)架構(gòu)師大會準(zhǔn)備了三天傳統(tǒng)技術(shù)大會演講，兩天深度主題培訓(xùn)，更多精彩議題歡迎訪問大會專題頁面(http://zt.it168.com/topic/sacc2018/)。