最近1年多，前后端同構(gòu)慢慢變成一個(gè)流行詞，也許很多人還停留在前后端分離的最佳實(shí)踐道路上，但實(shí)際上又有一批人已經(jīng)從簡(jiǎn)單的服務(wù)端渲染走向探索最佳前后端同構(gòu)方案的路上了。不過，我只是膜拜后者的過客。
雖然大家可以去網(wǎng)絡(luò)搜索一下相關(guān)的概念解釋，但這里我還是簡(jiǎn)單列舉一下，我理解的術(shù)語(yǔ)。
1、前端渲染：瀏覽器一側(cè)使用js，借助模版或vue、react、angular等框架做的DOM結(jié)構(gòu)生成。
2、后端渲染：服務(wù)器一側(cè)，使用php、nodejs等技術(shù)實(shí)現(xiàn)DOM結(jié)構(gòu)生成，并在HTTP請(qǐng)求中返回給瀏覽器。
3、同構(gòu)：瀏覽器一側(cè)的JS、HTML和服務(wù)器一側(cè)使用的JS、HTML使用同樣的開發(fā)結(jié)構(gòu)，同樣的開發(fā)思路，同樣的開發(fā)模式，盡可能實(shí)現(xiàn)代碼復(fù)用。
明確一點(diǎn)，作為有追求的前端開發(fā)，我們不應(yīng)該盲目跟風(fēng)，一切需要從實(shí)際出發(fā)。
那么，首先，我們需要了解為什么會(huì)有同構(gòu)這個(gè)概念出現(xiàn)。
Web開發(fā)的歷程是很有趣的，最初php、asp的年代，一切內(nèi)容都是服務(wù)器渲染的；
再后來(lái)為了節(jié)省服務(wù)器資源，也更大限度利用客戶端緩存，又出現(xiàn)了前后端分離的模式，從而有了專業(yè)的前端開發(fā)和后臺(tái)開發(fā)。此時(shí)Web的特點(diǎn)是，js和html放到靜態(tài)目錄，也可以CDN擴(kuò)散，并以ajax方式獲取后臺(tái)的數(shù)據(jù)，在前端進(jìn)行DOM組裝。這種開發(fā)方式沿用至今，這是一個(gè)好的工作模式，專業(yè)的人做專業(yè)的事，確實(shí)有利于工作效率提高。
再而，隨著nodejs的流行，前端jser們又開始蠢蠢欲動(dòng)，嘗試吞并web接入這個(gè)后臺(tái)的前沿地盤，把后臺(tái)推到更后。大概2014年后，又出現(xiàn)了很多nodejs直出的方案，把頁(yè)面數(shù)據(jù)都一次在HTML的請(qǐng)求中返回，無(wú)需瀏覽器端再發(fā)起ajax獲取數(shù)據(jù)，而且服務(wù)器端把DOM結(jié)構(gòu)都渲染好，瀏覽器按trunk直接做圖形渲染即可。不得不說，這個(gè)方案帶來(lái)了很多好處：首屏速度更快，瀏覽器更省電。當(dāng)然，隨之而來(lái)的，就是更復(fù)雜的工作模式，jser需要做服務(wù)器端的邏輯，甚至一些代碼需要同時(shí)用在瀏覽器和nodejs上。
針對(duì)前邊的問題，同構(gòu)的探討就開始了。。。
百度搜一下前后端同構(gòu)，清一色的vue、react。這些確實(shí)是同構(gòu)，但我認(rèn)為范圍太窄，同構(gòu)不是框架帶來(lái)的問題，而是因?yàn)榍昂蠖霜?dú)立渲染這種架構(gòu)層面帶來(lái)的問題。
當(dāng)然，那些同構(gòu)探討也是非常有價(jià)值的，但不在本文的討論范圍內(nèi)，在這里我更想表達(dá)一下，如何從實(shí)際項(xiàng)目需求的角度來(lái)看，找出自己所需的同構(gòu)之道。
畢竟，要知道，同構(gòu)不是為了跟風(fēng)耍酷，也不是為了跳槽面試的時(shí)候博點(diǎn)好感。同構(gòu)，是為了提高用戶體驗(yàn)的同時(shí)，提高團(tuán)隊(duì)的工作效率。
接下來(lái)，我想根據(jù)項(xiàng)目的類型，說說自己的看法。
第一種，單頁(yè)面應(yīng)用。
這個(gè)網(wǎng)站很類似一個(gè)APP，確實(shí)很有必要做成單頁(yè)應(yīng)用，有助于提高用戶體驗(yàn)。
如果第一步選擇了單頁(yè)面應(yīng)用，這里就衍生了另外的問題——SEO。而react等框架做了服務(wù)器渲染，最大目的其實(shí)也是解決SEO。
既然瀏覽器端選擇了某個(gè)框架，例如React，而同時(shí)又考慮nodejs直出提高首屏的速度，那么就沒有討價(jià)還價(jià)的余地了，當(dāng)然上react全家桶，前后端都用react。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式