最近碰了個壁,公司開發的一個新項目裏我大膽地提出要先後端徹底分離,用JavaScript模板引擎、ajax、路由等技術替代繁瑣的先後端混合的業務邏輯,項目進行到一半前輩提出來僅僅靠前端的力量沒法知足公司對SEO的要求。是放棄以前的工做從新改用後端velocity模板引擎來渲染頁面,把工做重心轉交給Java後端,仍是堅持走全後端分離路線可是另闢一條蹊徑呢? 最後又來了個大膽的決定——用nodeJS搭一箇中間層來渲染數據,彌補前端模板引擎和路由沒法作到的SEO友好性工做。年輕就是任選,哈哈 ^_^html
你們一致認同的先後端分離的例子就是SPA(Single-page application),全部用到的展示數據都是後端經過異步接口(AJAX/JSONP)的方式提供的,前端只管展示。
從某種意義上來講,SPA確實作到了先後端分離,但這種方式存在兩個問題:前端
WEB服務中,SPA類佔的比例不多。不少場景下還有同步/同步+異步混合的模式,SPA不能做爲一種通用的解決方案。java
現階段的SPA開發模式,接口一般是按照展示邏輯來提供的,有時候爲了提升效率,後端會幫咱們處理一些展示邏輯,這就意味着後端仍是涉足了View層的工做,不是真正的先後端分離。node
SPA式的先後端分離,是從物理層作區分(認爲只要是客戶端的就是前端,服務器端的就是後端),這種分法已經沒法知足咱們先後端分離的需求,咱們認爲從職責上劃分才能知足目前咱們的使用場景:web
不一樣的開發模式各有各的適用場景,沒有哪種徹底取代另一種。ajax
在業務邏輯複雜的系統裏,咱們最怕維護先後端混雜在一塊兒的代碼,由於沒有約束,M-V-C每一層均可能出現別的層的代碼,日積月累,徹底沒有維護性可言。
雖然先後端分離沒辦法徹底解決這種問題,可是能夠大大緩解。由於從物理層次上保證了你不可能這麼作。express
電商網站Web基本上都是基於MVC框架webx,架構決定了前端只能依賴後端。
因此咱們的開發模式依然是,前端寫好靜態demo,後端翻譯成VM模版,這種模式的問題就不說了,被吐槽了好久。json
直接基於後端環境開發也很痛苦,配置安裝使用都很麻煩。爲了解決這個問題,咱們發明了各類工具,好比VMarket,可是前端仍是要寫VM,並且依賴後端數據,效率依然不高。後端
另外,後端也無法擺脫對展示的強關注,從而專心於業務邏輯層的開發。瀏覽器
性能優化若是隻在前端作空間很是有限,因而咱們常常須要後端合做才能碰撞出火花,但因爲後端框架限制,咱們很難使用Comet、Bigpipe等技術方案來優化性能。
爲了解決以上提到的一些問題,咱們進行了不少嘗試,開發了各類工具,但始終沒有太多轉機,主要是由於咱們只能在後端給咱們劃分的那一小塊空間去發揮。只有真正作到先後端分離,咱們才能完全解決以上問題。
前端:負責View和Controller層。
後端:負責Model層,業務處理/數據等。
試想一下,若是前端掌握了Controller,咱們能夠作url design,咱們能夠根據場景決定在服務端同步渲染,仍是根據view層數據輸出json數據,咱們還能夠根據表現層需求很容易的作Bigpipe,Comet,Socket等等,徹底是需求決定使用方式。
若是想實現上圖的分層,就必然須要一種web服務幫咱們實現之前後端作的事情,因而就有了標題提到的「基於NodeJS的全棧式開發」
這張圖看起來簡單並且很好理解,但沒嘗試過,會有不少疑問。
這些問題要說清楚不容易,下面說下個人認識過程。
現階段咱們主要之後端MVC的模式進行開發,這種模式嚴重阻礙了前端開發效率,也讓後端不能專一於業務開發。
解決方案是讓前端能控制Controller層,可是若是在現有技術體系下很難作到,由於不可能讓全部前端都學java,安裝後端的開發環境,寫VM。
NodeJS就能很好的解決這個問題,咱們無需學習一門新的語言,就能作到之前開發幫咱們作的事情,一切都顯得那麼天然。
分層就涉及每層之間的通信,確定會有必定的性能損耗。可是合理的分層能讓職責清晰、也方便協做,會大大提升開發效率。分層帶來的損失,必定能在其餘方面的收益彌補回來。另外,一旦決定分層,咱們能夠經過優化通信方式、通信協議,儘量把損耗降到最低。
舉個例子:
淘寶寶貝詳情頁靜態化以後,仍是有很多須要實時獲取的信息,好比物流、促銷等等,由於這些信息在不一樣業務系統中,因此須要前端發送5,6個異步請求來回填這些內容。
有了NodeJS以後,前端能夠在NodeJS中去代理這5個異步請求,還能很容易的作Bigpipe,這塊的優化能讓整個渲染效率提高不少。
可能在PC上你以爲發5,6個異步請求也沒什麼,可是在無線端,在客戶手機上創建一個HTTP請求開銷很大,有了這個優化,性能一下提高好幾倍。
相對於只切頁面/作demo,確定是增長了一點,可是當前模式下有聯調、溝通環節,這個過程很是花時間,也容易出bug,還很難維護。
因此,雖然工做量會增長一點,可是整體開發效率會提高不少。
另外,測試成本能夠節省不少。之前開發的接口都是針對表現層的,很難寫測試用例。若是作了先後端分離,甚至測試均可以分開,一撥人專門測試接口,一撥人專一測試UI(這部分工做甚至能夠用工具代替)。
隨着Node大規模使用,系統/運維/安所有門的同窗也必定會加入到基礎建設中,他們會幫助咱們去完善各個環節可能出現的問題,保障系的穩定性。
咱們的初衷是作先後端分離,若是考慮這個問題就有點違背咱們的初衷了。即便用Node替代Java,咱們也沒辦法保證不出現今天遇到的種種問題,好比職責不清。咱們的目的是分層開發,專業的人,專一作專業的事。基於JAVA的基礎架構已經很是強大並且穩定,並且更適合作如今架構的事情。
最上端是服務端,就是咱們常說的後端。後端對於咱們來講,就是一個接口的集合,服務端提供各類各樣的接口供咱們使用。由於有Node層,也不用侷限是什麼形式的服務。對於後端開發來講,他們只用關心業務代碼的接口實現。
服務端下面是Node應用。
Node應用中有一層Model Proxy與服務端進行通信。這一層主要目前是抹平咱們對不一樣接口的調用方式,封裝一些view層須要的Model。
Node層還能輕鬆實現原來vmcommon,tms(引用淘寶內容管理系統)等需求。
Node層要使用什麼框架由開發者本身決定。不過推薦使用express+xTemplate的組合,xTemplate能作到先後端公用。
怎麼用Node你們本身決定,可是使人興奮的是,咱們終於可使用Node輕鬆實現咱們想要的輸出方式:JSON/JSONP/RESTful/HTML/BigPipe/Comet/Socket/同步、異步,想怎麼整就怎麼整,徹底根據你的場景決定。
瀏覽器層在咱們這個架構中沒有變化,也不但願由於引入Node改變你之前在瀏覽器中開發的認知。
引入Node,只是把本該就前端控制的部分交由前端掌控。
技術上不會有太多須要去創新和研究的,已經有很是多現成的積累。其實關鍵是一些流程的打通和通用解決方案的積累,相信隨着更多的項目實踐,這塊慢慢會變成一個穩定的流程。
基於node的全棧式開發模式淘寶是個很好的例子,技術開源,咱們大能夠充分借鑑它們成功的經驗。好了,文字介紹你們看的可能不是很爽,最後留一個在線的幻燈片,也是來自淘寶的,感興趣的能夠看一看。
@ 幻燈片 《淘寶先後端分離實踐》