如何提高開發效率-前端技術選型篇

1.Web的本質

web的本質是什麼？web世界的兩大主角 request & response 幾乎說明了一切，客戶端（瀏覽器）向服務器發起一個請求（request），服務器在收到請求後返回一個響應（response）給客戶端，客戶端接收到服務器的響應後把結果展現給用戶。瀏覽器做爲萬千客戶端中最流行最標準的一種，爲開發人員作了絕大部分底層工做，使得咱們只需關注Web的前端與後端。

後端一般負責數據存取相關的工做，前端一般負責展現結果給用戶。不一樣的應用場景下，前端與後端的複雜度可能存在不一樣。好比在咱們的開票系統中，查詢開票數據、處理用戶的開票請求都是後端去完成的，前端只負責在頁面上展現後端的處理結果。而在一些網頁遊戲中，前端可能比後端複雜。好比某個遊戲的場景裏，遊戲主角去打一個怪，使用了各類技能，最後把這個怪打死了。在這個過程裏，對於後端來講，可能只須要把主角打的怪的數量加1，主角的血加1，主角的分數加1。而前端這個時候可能須要根據用戶的技能來渲染各類特效，可能還須要通過一些算法來判斷給對方的傷害值。
比較了上面的兩種應用場景以後再來看看咱們的業務系統。在咱們的系統中，有些是不須要前端的，好比Job和MQ的listener。這類系統的交互對象是另外的系統，此時只須要處理完業務邏輯就能夠，不負責展現結果給用戶。而像帳單這類負責展現數據給用戶的系統則對前端的要求較高，這類系統的交互對象是人，因此這類系統對用戶體驗、性能等指標要求都比較高。

在咱們公司的應用中，web系統（運行在tomcat容器中）包含service、mq和web。其中service和mq都不須要用戶界面，通常只有web須要開發網頁做爲用戶界面。APP的後端也是web，但這類web一般只提供標準的http接口，安卓客戶端和iOS客戶端經過http接口和後端系統進行交互，此時的用戶界面由客戶端提供，此處暫不討論。

2.影響Web性能的因素

影響web性能的因素不少，能夠參考經典問題：從輸入網址到瀏覽器顯示頁面發生了什麼
這個經典問題中的任何一個環節均可能影響用戶的體驗，一般來講優化思路有如下幾種：

前端

• 靜態資源走CDN
• 壓縮&合併靜態資源（js&css&圖片）
• 緩存
• 啓用GZIP支持
• css放在html頂部，js放在html底部

後端

• 多數據中心部署
• SQL層優化
• 合理的JVM參數設置

Web性能優化方案不少，可是實際上咱們的Web系統QPS並不高（帳單首頁天天不到1W，其餘web系統訪問量更低），而且線上環境幾乎都考慮了以上問題，因此以上的各類優化點並不用開發者太關心。相比之下，咱們更關心的是開發效率。

3.Web前端開發技術選型

在Web性能並不是關鍵問題的狀況下，經過使用合適的框架能夠明顯提升開發效率。直白點講，提高開發效率的宗旨就是：能一行代碼搞定的事情就不要寫更多的代碼了！！！
如下列舉幾種適合咱們公司web前端開發的技術選型方案

• A.jQuery
  毋庸置疑，jQuery做爲資深的JavaScript框架在操做Dom方面有着不可替代的地位，特別是其對ajax接口的封裝簡化了ajax操做。但jQuery也有其侷限性，好比在雙向數據綁定方面。
• B.Vue.js
  vue.js在GitHub上有近60K的star，入門門檻低簡單易上手，能夠極大簡化前端開發的一些操做。結合jQuery使用簡直perfect。參考文檔 http://cn.vuejs.org/v2/guide/
• C.layui
  layui是國內的一款開源庫，其中包含了彈層組件、日期組件、分頁組件和符合現代審美的css庫。此次開發提報系統中90%以上的css類都來自layui，簡直不能更省心。 主頁 http://www.layui.com/
• D.Handlebars 模板引擎
  Handlebars在PC帳單前端項目中已有使用，主要是結合彈層使用。詳情參考文檔 http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
  各類JS模板引擎對比數據參考 http://blog.csdn.net/wuchengzhi82/article/details/8938122

此外，對於先後端分離的項目，前端項目須要壓縮上傳至CDN，目前的開發環境已提供這個功能。