感謝圖靈社區(qū)的電子書(shū)閱讀獎(jiǎng)勵(lì)計(jì)劃。
閱讀前的疑問(wèn)
同構(gòu)、服務(wù)端渲染、首屏直出、前后端分離，這些都是與nodejs有關(guān)的技術(shù)，出現(xiàn)在視野中的頻率越來(lái)越高，也是時(shí)候該去了解了。
雖然之前已經(jīng)知道首屏直出，能夠很好的優(yōu)化用戶(hù)訪(fǎng)問(wèn)頁(yè)面的體驗(yàn)，原理是在服務(wù)端直接將渲染好的html返回給瀏覽器，甚至?xí)⒁恍?code>關(guān)鍵css也插入到html中，實(shí)現(xiàn)首屏1s內(nèi)展現(xiàn)。
服務(wù)端渲染（SSR）是在了解vue/react之后看到的，使用框架存在SEO的問(wèn)題，所以出現(xiàn)了服務(wù)端渲染，同樣是服務(wù)器直接將渲染好的頁(yè)面返回給瀏覽器，無(wú)需在瀏覽器端獲取數(shù)據(jù)后組裝頁(yè)面。
前后端分離，同樣是基于SEO的考慮，前后端只通過(guò)api交互，于是引入一層nodejs渲染頁(yè)面，達(dá)到優(yōu)化SEO的目的。
這些名詞都集中在“服務(wù)器渲染頁(yè)面”這個(gè)點(diǎn)上，而同構(gòu)呢，也是一樣嗎，和這些名詞有什么區(qū)別嗎，我?guī)е@些疑問(wèn)閱讀這本書(shū)，帶給我的答案遠(yuǎn)超我想要的。
書(shū)中的同構(gòu)
簡(jiǎn)單來(lái)說(shuō)，同構(gòu) JavaScript 應(yīng)用就是在瀏覽器客戶(hù)端和 Web 應(yīng)用服務(wù)器端間共享同一套 JavaScript 代碼的應(yīng)用。
共享！代碼！
難道同構(gòu)不是如之前所想，在服務(wù)器渲染頁(yè)面嗎？
是，其實(shí)服務(wù)端渲染就是同構(gòu)的一種實(shí)現(xiàn)？可以為我們帶來(lái)如下好處：
- SEO
- 減輕服務(wù)器負(fù)擔(dān)
- 提高開(kāi)發(fā)速度
- 首屏加載速度
- 純 JavaScript 技術(shù)棧
可以看到有SEO與首屏加載速度，同構(gòu)是更為前沿的方案嗎？
如書(shū)中所言，同構(gòu)是更為先進(jìn)的架構(gòu)，有趣的是這里提到了架構(gòu)，在閱讀上一本《前端架構(gòu)設(shè)計(jì)》時(shí)，就感覺(jué)前端沒(méi)有架構(gòu)，那這里的架構(gòu)又是指什么呢，前端到底有沒(méi)有架構(gòu)呢？
前端架構(gòu)
嚴(yán)格意義上來(lái)說(shuō)，前端當(dāng)然是有架構(gòu)的，當(dāng)代碼量越來(lái)越龐大，是必然要有架構(gòu)來(lái)使之便于維護(hù)、理解。
但這本書(shū)中的架構(gòu)，是將 web 應(yīng)用作為一個(gè)整體來(lái)看待，所以架構(gòu)是包含了后端，而架構(gòu)發(fā)展如下：
傳統(tǒng) Web -> SPA -> 同構(gòu)應(yīng)用
有趣的是作者以一個(gè)虛擬的開(kāi)發(fā)者從傳統(tǒng)過(guò)渡到同構(gòu)的工作經(jīng)歷來(lái)向我們介紹了這一發(fā)展，而這也恰恰是這段時(shí)間前端開(kāi)發(fā)者的真實(shí)寫(xiě)照。
他們具體是什么呢？
傳統(tǒng) Web
即前端寫(xiě)模板，后端套模板的刀耕火種時(shí)代，絕大部分邏輯都是在服務(wù)器端進(jìn)行，SEO是天生的。
SPA
當(dāng)ajax如火如荼時(shí)，SPA 的概念被提出了，前端有了長(zhǎng)足的發(fā)展，但之前未出現(xiàn)的SEO問(wèn)題被擺上臺(tái)面。
同構(gòu)
自豪的宣稱(chēng)自己兼具兩者優(yōu)點(diǎn)。
當(dāng)然前兩者我們已經(jīng)很熟悉了，SPA現(xiàn)在正大量存在于我們的世界，同構(gòu)是我們不熟悉的，但也是我們要熟悉的。
實(shí)踐
這本書(shū)只有第一部分在介紹同構(gòu)的理論知識(shí)，剩下的都是偏實(shí)戰(zhàn)的內(nèi)容，對(duì)我來(lái)說(shuō)我更想多了解一些理論上的東西，因?yàn)檫€沒(méi)有機(jī)會(huì)在正式生產(chǎn)環(huán)境使用nodejs。
如果我當(dāng)前正在開(kāi)發(fā)一個(gè)基于nodejs的新聞網(wǎng)站（我的同事正在進(jìn)行的），我絕對(duì)會(huì)覺(jué)得這本書(shū)恰逢其時(shí)。
第二部分從零開(kāi)始，介紹了一個(gè)同構(gòu)應(yīng)用的開(kāi)發(fā)歷程，每一步都很詳細(xì)，甚至作為nodejs開(kāi)發(fā)的入門(mén)例子也是足夠了。
2017年11月23日14:58:08 補(bǔ)充
提供的源碼已經(jīng)無(wú)法運(yùn)行，hapi這個(gè)庫(kù)已經(jīng)更新，但是自己的官方文檔都沒(méi)有更新，導(dǎo)致要按照作者的步驟無(wú)法實(shí)現(xiàn)。
而且這個(gè)例子并不能很好讓讀者有代入感，太多的抽象也不適合新手；有經(jīng)驗(yàn)的就更不想看這些抽象的代碼。其實(shí)看這本書(shū)，更多的是想要了解所謂的“同構(gòu)”背后的原理，前面大篇幅的代碼已經(jīng)云里霧里，導(dǎo)致想要從中獲取到信息非常困難。
真實(shí)世界
當(dāng)然，從零開(kāi)始基本是不可能的了，無(wú)論是react還是vue都已經(jīng)提供了服務(wù)端渲染方案，沒(méi)有必要也沒(méi)有理由去自己開(kāi)發(fā)。
正因?yàn)槿绱撕?jiǎn)單能夠?qū)崿F(xiàn)我們的同構(gòu)應(yīng)用，于是便會(huì)思考，這樣做好嗎，最佳實(shí)踐是怎么樣的？
這本書(shū)提供了一些真實(shí)案例供參考，很貼心。
總結(jié)
這本書(shū)的“干貨”很多，無(wú)論是想要立即開(kāi)始實(shí)現(xiàn)自己的同構(gòu)應(yīng)用，或者說(shuō)服務(wù)端渲染的人，還是對(duì)于只想了解什么是同構(gòu)的人，都能有所收獲（當(dāng)然前者收獲會(huì)更大），如果有機(jī)會(huì)，同構(gòu)應(yīng)用將會(huì)是開(kāi)發(fā)方案的首選。
2017年11月23日14:58:08 補(bǔ)充
只有前面的理論部分有價(jià)值，后面的代碼已經(jīng)價(jià)值不大了。
