摘要:總結(jié)我覺得,以后基于的全棧式開發(fā)的模式將會越來越流行,這也會引領(lǐng)前端步入工程化時代。歡迎繼續(xù)關(guān)注本博的更新中間層實踐一基于的全棧式開發(fā)中間層實踐二搭建項目框架中間層實踐三配置中間層實踐四模板引擎中間層實踐五中間層的邏輯處理
版權(quán)聲明:更多文章請訪問我的個人站Keyon Y,轉(zhuǎn)載請注明出處。前言
近期公司有個新項目,由于后端人手不足,我果斷的提議用node中間層的方案,得到了老大的支持,所以一次大單嘗試就來了。
Node中間層允許前端來做網(wǎng)站路由、頁面渲染、SEO優(yōu)化,對以往從來不接觸這些內(nèi)容的前端選手來說,正是鍛煉我們網(wǎng)站架構(gòu)的好機(jī)會。
另外,這也是一次深入了解Node的好機(jī)會,準(zhǔn)備好迎接即將到來的前端工程化時代。
在說這個話題之前,先給大家分享一篇文章(【探索】NodeJS中間層搭建),它讓我對node中間層的理解更加深刻,特別是最后的來自淘寶的PPT。
現(xiàn)有開發(fā)模式的適用場景玉伯提到的幾種開發(fā)模式,各有各的適用場景,沒有哪一種完全取代另外一種。
比如后端為主的MVC,做一些同步展現(xiàn)的業(yè)務(wù)效率很高,但是遇到同步異步結(jié)合的頁面,與后端開發(fā)溝通起來就會比較麻煩。
Ajax為主SPA型開發(fā)模式,比較適合開發(fā)APP類型的場景,但是只適合做APP,因為SEO等問題不好解決,對于很多類型的系統(tǒng),這種開發(fā)方式也過重。
前后端分離從職責(zé)上劃分,node中間層實現(xiàn)了前后端分離:
前端:負(fù)責(zé)View和Controller層
后端:只負(fù)責(zé)Model層,業(yè)務(wù)處理/數(shù)據(jù)等
拿我們公司來說,之前的網(wǎng)站前臺的項目,是基于后端的MVC,在遇到同步和異步結(jié)合的頁面時候,和后端頻繁溝通,對前后端來說都是很痛苦的。
對前端來說,發(fā)揮的空間十分的有限,例如:性能優(yōu)化,只在前端做是很有限的,是需要和后端配合才能實現(xiàn)的,比如 隨后的部分我會寫道的無刷新加載。
前端掌握了Controller,就可以做路由設(shè)計、網(wǎng)站目錄結(jié)構(gòu)、網(wǎng)站前端架構(gòu)。
掌握了View,就可以通過后端模板引擎(jade/pug,Ejs,swig等),邊寫邊綁數(shù)據(jù)。更別提,pug之流 還有mixin,讓我們對 html進(jìn)行函數(shù)化,大大提高效率。
NodeJS讓前端無需學(xué)習(xí)一門新的語言,就能做到這些事情。
基于NodeJS“全?!笔介_發(fā)下面的這張圖很簡單形象的說明了Node中間層
中間層的性能問題多加了一層通訊,肯定會有一定的性能損耗。但分層帶來的損失,一定能在其他方面的收益彌補回來,而且合理的分層能讓職責(zé)清晰、方便協(xié)作,大大提升開發(fā)效率。也可以通過優(yōu)化通訊方式和協(xié)議,盡可能把損耗降到最低。
拿我公司的網(wǎng)站舉例:一個靜態(tài)化的詳情頁面上有很多(動態(tài))的數(shù)據(jù),用戶資料、評論信息、訂單等等,需要5、6個異步請求,node中間層可以代理這些請求,輕松實現(xiàn)Bigpipe。Node什么都能做,為什么還要JAVA/PHP?
在PC上你覺得發(fā)5,6個異步請求也沒什么,但是在無線端,在客戶手機(jī)上建立一個HTTP請求開銷很大,有了這個優(yōu)化,性能一下提升好幾倍。
我們的初衷是做前后端分離,如果考慮這個問題就有點違背我們的初衷了。即使用Node替代Java/PHP,我們也沒辦法保證不出現(xiàn)今天遇到的種種問題,比如職責(zé)不清。我們的目的是分層開發(fā),專業(yè)的人,專注做專業(yè)的事。基于JAVA/PHP的基礎(chǔ)架構(gòu)已經(jīng)非常強(qiáng)大而且穩(wěn)定,而且更適合做現(xiàn)在架構(gòu)的事情。
前端的任務(wù)更重要了常見的前后端分離的開發(fā)模式中,后端為前端提供了路由結(jié)構(gòu)和頁面的數(shù)據(jù)綁定,前端只需要切頁面和少量的邏輯。
在node中間層中,前端不僅僅要切頁面和做頁面邏輯,還要做url design、頁面數(shù)據(jù)綁定、聯(lián)調(diào)與溝通,還要考慮SEO的問題,偽靜態(tài)頁面、title/keyword設(shè)置、網(wǎng)站地圖,甚至包括錯誤日志等等。
雖然前端的工作量增加了不少,但是基于模塊化的開發(fā),讓總體的效率提升了。
對于后端程序員,接口整合的工作交給了前端服務(wù)器進(jìn)行處理,同時和前端耦合度大大降低,工作量和工作效率都減少了。
另外,由于前后端分離,測試都可以分開來了,專門測試接口的和專門測試ui層。
總結(jié)我覺得,以后基于NodeJs的全棧式開發(fā)的模式將會越來越流行,這也會引領(lǐng)前端步入工程化時代。但是要把Node全棧開發(fā)變成一個穩(wěn)定的、方便的開發(fā)工具,還有很多路要走。這次公司的交易平臺項目就是一個很好的實踐,接下來,請繼續(xù)關(guān)注我對這個項目的總結(jié),希望能給各位帶來靈感。
歡迎繼續(xù)關(guān)注本博的更新
Node中間層實踐(一)——基于NodeJS的全棧式開發(fā)
Node中間層實踐(二)——搭建項目框架
Node中間層實踐(三)——webpack配置
Node中間層實踐(四)——模板引擎pug
Node中間層實踐(五)——express-中間層的邏輯處理
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/92711.html
摘要:的意思是,如果碰到不能的情況,就整頁刷新首頁路由開發(fā)環(huán)境中使用了,需要將每一個的配置中寫上歡迎繼續(xù)關(guān)注本博的更新中間層實踐一基于的全棧式開發(fā)中間層實踐二搭建項目框架中間層實踐三配置中間層實踐四模板引擎中間層實踐五中間層的邏輯處理 版權(quán)聲明:更多文章請訪問我的個人站Keyon Y,轉(zhuǎn)載請注明出處。 這里沒什么可說的,webpack的配置和插件實在太多了,用的時候查文檔就行了。 項目地...
摘要:項目地址腳手架使用過,的同學(xué)都清楚,官方推薦的安裝方式是通過專用的來快速搭建一個由編譯打包的項目框架。用在層的模塊化,在中間層實現(xiàn)了模塊化。這樣,從中間層到前端都實現(xiàn)了熱加載。 版權(quán)聲明:更多文章請訪問我的個人站Keyon Y,轉(zhuǎn)載請注明出處。 項目地址:https://github.com/KeyonY/NodeMiddle 腳手架? 使用過angular2,vue2的同學(xué)都清楚,官...
Github上的腳手架實在太多,可能大多數(shù)都是只專注在前端的web開發(fā),例如流行的React生態(tài)中的create-react-app和Vue生態(tài)中的Vue-cli, 但是可能作為像我一樣的全棧開發(fā),一個只關(guān)注在前端開發(fā)的腳手架滿足不了所有的需求,我們可能需要開發(fā)更復(fù)雜的全棧JS的項目,所以這里介紹又一個基于NodeJS的全棧開發(fā)框架 koa-web-kit,不一定適合所有人,但至少又多了個選擇?。...
摘要:技術(shù)棧覺得好的歡迎點個。前端后端部署演示全棧式的開發(fā)多人在線聊天室項目只適配了移動端,請使用瀏覽器的手機(jī)視圖查看。之前刪除了一個文件,但是沒有刪除中的對應(yīng)值。編譯時會報上面的錯誤。 技術(shù)棧 覺得好的歡迎點個star ^_^。 前端:Express & EJS & ES6 & Less & Gulp 后端:Express & SocketIO & MongoDB & REST API ...
閱讀 2748·2021-11-25 09:43
閱讀 2542·2021-09-22 15:29
閱讀 1261·2021-09-22 15:17
閱讀 3723·2021-09-03 10:36
閱讀 2293·2019-08-30 13:54
閱讀 1827·2019-08-30 11:23
閱讀 1235·2019-08-29 16:58
閱讀 1348·2019-08-29 16:14