因為種種原因，本周離職~ 需要總結(jié)下目前的前端技術(shù)，思前想后唯有畫圖，才能清晰的交接給小伙伴
各位看官如果您看出哪里不妥，請留言評論，幫我進(jìn)步成長
廢話少說先上圖~
原生開發(fā)的優(yōu)/缺點
優(yōu)點：
- 用戶體驗極佳，渲染速度快于H5，動畫效果絢麗等等
- 直接可調(diào)用原生功能（通訊錄、攝像頭等等）
- 可離線使用
- 調(diào)試透明
缺點：
- 開發(fā)成本高
- 兼容設(shè)備有限
- 商店內(nèi)容限制
- 用戶更新不能控制
混合開發(fā)的優(yōu)/缺點
優(yōu)點：
- 從人員和時間成本上，學(xué)習(xí)成本低，開發(fā)效率高于原生開發(fā)
- 兼容多個平臺，ios/android/M站/微信/小程序
- 控制用戶更新，無需等待發(fā)包
- 無商店內(nèi)容限制
- 可離線使用
缺點：
- 用戶體驗不如純原生應(yīng)用，沒有絢麗的效果，渲染/響應(yīng)速度慢，動畫支持不好等等
- 整體打包文件比較大
- 調(diào)試稍繁瑣
- 需要定義私有協(xié)議調(diào)用原生功能（通訊錄、攝像頭等等）
基于以上幾點，我們制定了，
首頁+搜索列表是原生界面，活動專題頁+產(chǎn)品詳情+預(yù)訂流程頁+支付均為H5混合頁面的技術(shù)體系
源碼托管及工作流
基于github flow，適合每周二/四上線，上線完成Master合并到future分支。
指引閱讀：http://www.ruanyifeng.com/blog/2015/12/git-workflow.html
本地服務(wù)跑起來
node / nginx / iis 起一個資源站點服務(wù)，再起一個站點服務(wù)用于托管頁面(如果資源沒有單獨域名就更方便了)
數(shù)據(jù)模擬+數(shù)據(jù)綁定
如果后臺有數(shù)據(jù)了，直接調(diào)用即可。
如果沒有可以用http://www.easy-mock.com
前端時間多前端綁定，后端人多后端綁定。去年用的ng1，現(xiàn)在在重構(gòu)到vue2，切換無壓力~
測試環(huán)境
git 提交代碼到 gitlab服務(wù)器，gitlab發(fā)出hook鉤子給 服務(wù)器jenkins，Jenkins接收信息，觸發(fā) 前端構(gòu)建
hosts綁定 服務(wù)器IP，打開瀏覽器即可
開發(fā)調(diào)試
M站: hosts綁定本機(jī)，chrome模擬機(jī)，sourceMap調(diào)試
app：charles/fiddler，手機(jī)指向電腦IP代理，開發(fā)走debug包，調(diào)試模式，打開safari 或者 chrome://inspect ，sourceMap調(diào)試
前端代碼規(guī)范
gulp有實體文件名大小寫及eslint規(guī)范檢查的task.
eslint約束團(tuán)隊定制配置，米有遵循airbnb...統(tǒng)一編輯器及格式化代碼插件規(guī)范
構(gòu)建工具
有人會問圖上為什么會有g(shù)runt/gulp/webpack同時存在，其實是因為pc/移動用得不同構(gòu)建工具，做了代碼抽離后又用到webpack....
持續(xù)集成
gitlab + jenkins + 釘釘
gitlab 鉤子 給 Jenkins ，Jenkins構(gòu)建完成 post 給釘釘機(jī)器人一個消息，提示~
代碼單元測試
目前沒有...karma還沒引用...這里需要速度跟進(jìn)下
線上問題收集
senTry 有調(diào)研，but并沒有投入生產(chǎn)環(huán)境
H5離線機(jī)制
gulp計算出資源文件的crc32，生成實體version.txt，在debug包直接讀取，在release/store包讀取后臺接口里面的version.txt（避免version.txt的cdn問題），進(jìn)行文件下載、對比、更新~
可離線可在線瀏覽，有靜態(tài)資源/數(shù)據(jù)的緩存機(jī)制
活動專輯頁
前端產(chǎn)品模板直接渲染，運營人員自行在后臺維護(hù)好產(chǎn)品，前端調(diào)用即可。
人員
前后端聯(lián)調(diào)成本很低，組內(nèi)人員工作橫向切換成本也基本為0
不足
這里其實才是最想談的，不足有很多，希望以后有機(jī)會去實現(xiàn)
- 沒用前端路由，沒用虛擬DOM，頁面跳來跳去的時候無論在M站還是app白屏?xí)r間是真長....
- 標(biāo)準(zhǔn)化只是用了eslint的一丟丟，grunt/gulp/webpack在win服務(wù)器上的打包速度最快也要20s，有機(jī)會換個centOS試試
- Sass+Rem+計算html根font-size 的書寫方式雖然萬金油，但是小部分手機(jī)適配，字體適配還需要仔細(xì)
- 整個前端目錄結(jié)構(gòu)只是拆分成業(yè)務(wù)模塊，沒有組件起來~ 還需要和設(shè)計多溝通，思維重新搞，重構(gòu)來過~
- 靜態(tài)資源的上線流程和機(jī)制還能更加自動化，更加便捷的獨立部署
- 數(shù)據(jù)還是后臺.net同事提供，可以用express/koa，前端搞個中間層，搞成合適的數(shù)據(jù)結(jié)構(gòu)，同時需要多像后臺同事學(xué)習(xí)請教
- H5離線機(jī)制 有更好的打包解決方法，但是需要時間來優(yōu)化迭代
- 對于線上報錯，單元測試上還需要多擠出時間，調(diào)研，落地
- 活動專輯的設(shè)想二期是 前端組件 都是運營人員直接后臺拖拽生成頁面的，只是沒機(jī)會啦~
- 單次開發(fā)，多地使用，寫一遍代碼M站點/APP/小程序都適合的工具還沒開發(fā)落地，已經(jīng)看到有項目落地了
- 最重要的前端大忌：不夠仔細(xì)，人太懶，
最后感想
- 小伙伴們都很棒，10個人雖然各奔東西，但是一起擼代碼上線，一起擼串喝酒的回憶很好
- 自己成長不少，技術(shù)提升、每周分享演講，異地溝通技巧等等，在把專業(yè)/非專業(yè)的講給大家的時候，對自己也是成長
- 這一年多變的有點話嘮，能帶給大家的就這么多了，但是都是真實的，希望以后還能再合作~
- 前端組是承前啟后的組，只要不是步子太大，不扯到蛋的都很free~ 前端組積極向上，公司氛圍也不會差到哪里去的
- 寫的比較寬泛，剩余的有時間接著再補(bǔ)充~~
