NodeJS讓前端與後端更友好的分手

學問

---

 

 

最近「上層建築」在興起國學熱，因此公司幾個月前決定開發一款名叫「學問」的有關於國學的app。

 

 

APP的詳情頁面仍是由web來顯現具體內容，有些相似於新聞頁，圖文混排什麼的web是最適合幹這個的了，因此團隊決定用WEB來實現詳情頁。

 

團隊對WEB頁的要求是：

• 頁面在訪問後離線依然能夠查看。

• 首屏展示速度要快，不容許長時間白屏或loading。

項目現狀

 

後端提供的都是以JSON爲數據格式的API接口供Native端使用，一樣提供給WEB的也是JSON格式的API接口

 

那麼意味着WEB工做流程是

 

1. 打開web，加載基本資源，如CSS，JS等
2. 發起一個ajax請求再到服務端請求數據，同時展現loading
3. 獲得json格式的數據後再根據邏輯選擇模板渲染出」DOM字符串"
4. 將」DOM字符串」插入頁面中webview渲染出DOM結構

 

這些步驟都由用戶所使用的設備中逐步執行，也就是說用戶的設備性能與APP的運行速度聯繫的更緊

換句話說就是若是用戶的設備很低端，那麼APP打開頁面的速度會越慢。

 

若是是在PC端的瀏覽器中基本不成問題，由於如今瀏覽器性能已經很是好了。但在低端的Android機器上的webview性能可就難說了。

並且離線後還得要查看已訪問過的頁面，實現最好的方式就是用HTML5的離線存儲技術了，但離線存儲存的是整個頁面的HTML及資源，不會存JSON數據

用本地數據庫存把JSON數據也存下來？靠，太複雜了吧...

只能是服務端直接輸出HTML結構渲染頁面，而不是API輸出JSON再由客戶端渲染頁面。

 

讓服務端人員來寫頁面？

---

 

 

確實能夠依照之前老的方式，本身寫出HTML的靜態頁面交給服務端人員，再套上JSP或PHP服務端語言，可是..

因爲服務端人員對前端HTML結構不熟悉套代碼時形成各類錯誤常常出現。並且很難找出BUG，相信作前端的程序猿應該都體會過..

也有不少前端人員不得不開始學習JSP或PHP來應付這樣的場景，全棧工程師麼-_-!..

 

 

 

一種折中的解決方案

---

 

我看到過某些公司的某些頁面，在首屏頁面head的某個<script>中輸出大量的JSON數據

大概是這樣

<script>
     var _jsonData = [{a: 1}, {a: 2}, …];
</script>

 

 

我猜想大概是想省去首屏發起ajax請求，直接將JSON輸出到頁面中，由JS來完成DOM構建。

這樣在必定程度上提升了首屏渲染速度，前端人員又不用去寫服務端程序

 

我沒用這種方式，由於沒人管我，我就是這麼任性..

 

 

 

Er...更激進的解決方案

---

 

關注NodeJS好久了一直沒怎麼用，並且NodeJS已經發展了不少年，如今大公司應用的愈來愈多，能夠參考NodeJS應用公司列表-》

作爲前端人員，NodeJS真的很容易上手，語法就是JAVASCRIPT麼。

據說淘寶啊什麼的前端人員已經開始用NodeJS這麼作了，大公司就是先進啊。嗯，咱們盛大文學也是大公司-_-!，那麼上吧騷年！

用NodeJS來作爲橋樑架接服務器端API輸出的JSON。如圖：

 

瀏覽器(webview)再也不直接請求JSP的API，而是

• 瀏覽器請求服務器端的NodeJS
• NodeJS再發起HTTP去請求JSP
• JSP依然原樣API輸出JSON給NodeJS
• NodeJS收到JSON後再渲染出HTML頁面
• NodeJS直接將HTML頁面flush到瀏覽器

 

這樣，瀏覽器獲得的就是普通的HTML頁面，而不用再發ajax去請求服務器了。

 

這樣作的好處：

• app的WEB頁能夠實現離線存儲技術
• 頁面首屏渲染更快
• 因爲NodeJS與頁面在同一個域名下，因此就不用跨域了，而不用HTML5輸出頭信息這樣的方式去實現跨域了
• 服務端與客戶端邏輯都由前端人員控制都是使用JAVASCRIPT語言，前端程序猿能夠更好的控制和優化，套頁面什麼的不容易出錯
• 真正服務端程序人員不須要再關心頁面的渲染邏輯，僅須要關心數據的處理

 

這樣作的壞處：

• 增長了前端人員的工做
• 前端人員須要對服務端程序有必定的瞭解
• 服務端須要架起NodeJS服務
• 經過NodeJS架接後臺服務過程當中通訊時間上必然有一部分損失

 

好在NodeJS安裝比較簡單，各類插件也很是豐富

 

項目中實際應用經驗

---

 

用ExpressJS框架搭建NodeJS的WEB服務感受棒棒噠！

真的很簡單，三下兩下就搞定了，我這麼菜的人都行，說明真的很簡單！

注意點：

頁面中動態部分，如：評論，閱讀人數，讚的人員等這些動態數據仍是須要用ajax請求

這些動態數據須要動態的插入DOM中不然這些數據會被離線存儲給緩存住，每次打開都是同樣的數據不會再更新，

除非.appcache文件更新，這樣確定不合理，嗯對，就是不合理

因此那些動態數據仍是能夠根據原先的邏輯去直接請求JSP或PHP之類的服務端提供的API接口，固然跨域什麼的就看項目需求與項目環境了。

 

ExpressJS中默認的模板是EJS，而瀏覽器中我使用的是artTemplate.js，好吧我真的喜歡artTemplate.js

一查發現artTemplate也有NodeJS版本的，就這樣服務端與瀏覽器端均可以使用artTemplate來作爲渲染模板了，能夠說是無縫啊，嘿嘿

 

最後要說的

第一次在正式項目中使用NodeJS仍是挺興奮的，感受前端的路子又多了一條。

第一次麻，都緊張，都快....

er..就怕因爲對NodeJS的不瞭解最後形成致命的錯誤，而致使項目延期。

 

 

如今已經上線了目前只有Android版本，掃一掃便可

 

 

===================================================================

轉載處請註明：博客園(池中物,王二狗)willian12345@126.com