最近遇到一個(gè)需求，需要快速開發(fā)一個(gè)可適配多種終端的H5 app，要求有比較好的用戶體驗(yàn)（說(shuō)白了就是界面切換快），同時(shí)也需要支持SEO（Search Engine Optimization），說(shuō)人話就是對(duì)各種爬蟲友好：）憑我個(gè)人經(jīng)驗(yàn)來(lái)說(shuō)對(duì)于體驗(yàn)要求高的H5，前端應(yīng)盡量采取SPA（Single Page Application）架構(gòu)，但是通常SPA無(wú)法做SEO，雖然可以單獨(dú)為SEO寫一套頁(yè)面，但是這個(gè)工作量就增加了不少。那么有沒(méi)有魚與熊掌兼得的解決方案呢？經(jīng)過(guò)一翻search，發(fā)現(xiàn)還真有一幫和我一樣想“偷懶”的程序猿們：），看來(lái)偷懶推動(dòng)科技進(jìn)步一點(diǎn)也沒(méi)錯(cuò)，哈哈。他們還給這個(gè)技術(shù)起了一個(gè)有Big的名字－“isomorphic web apps”即同構(gòu)web應(yīng)用。
Java讓跨主機(jī)環(huán)境編程變得可能（編寫一次，到處運(yùn)行Write Once，Run Anywhere）
Nodejs將這種理念更進(jìn)一步（一種語(yǔ)言，到處運(yùn)行One Program language, Run Anywhere），同構(gòu)web是以Nodejs環(huán)境為基礎(chǔ)衍生的一種前端架構(gòu)模式。
1）WHAT－什么是同構(gòu)web app？
我們回顧一下web開發(fā)技術(shù)的演進(jìn).
a) 瘦客戶端web應(yīng)用（主流）
架構(gòu)特點(diǎn)：
一個(gè)功能一個(gè)頁(yè)面
透過(guò)服務(wù)器端模版技術(shù)給前端輸出HTML頁(yè)面
切換頁(yè)面加載
SEO友好
b) 胖客戶端web應(yīng)用（SPA單頁(yè)面）
架構(gòu)特點(diǎn)：
透過(guò)Javascript UI庫(kù)，動(dòng)態(tài)產(chǎn)生界面DOM樹
使用AJAX與后臺(tái)進(jìn)行數(shù)據(jù)交互
界面切換快
SEO不友好
C) 同構(gòu)web應(yīng)用
架構(gòu)特點(diǎn)：
易維護(hù)，客戶端與服務(wù)器端會(huì)共享部分代碼（執(zhí)行環(huán)境不同）
界面切換快速（SPA應(yīng)用體驗(yàn)）
SEO友好（每個(gè)界面可獨(dú)立訪問(wèn)，服務(wù)器輸出HTML）
2）WHY－哪些場(chǎng)景需要同構(gòu)web app?
要求加載速度快，界面切換快（如混合app），同時(shí)需要支持SEO
比如電商，o2o應(yīng)用，論壇／Blog等。
如果說(shuō)Isomorphic web你還比較陌生，那么這些產(chǎn)品你應(yīng)該不會(huì)陌生Flickr，Instagram，Airbnb，Asana等，他們都采用同構(gòu)技術(shù)架構(gòu)自己的web app。
3）HOW－怎么構(gòu)建同構(gòu)web app？
現(xiàn)在有很多框架可以幫助你開發(fā)這類應(yīng)用，比如Meteor，Airbnb開源的Rendr，其中最著名的一個(gè)可能是Facebook開源的Reactjs，筆者也建議從Reactjs開始學(xué)習(xí)同構(gòu)web應(yīng)用，這里有一份完整的教程：
另外如果想體驗(yàn)使用Reactjs + Redux + Express搭建的同構(gòu)應(yīng)用案例，可以訪問(wèn)DigME：
