同构(Isomorphic) web 是什么鬼？

最近遇到一个需求，需要快速开发一个可适配多种终端的H5 app，要求有比较好的用户体验（说白了就是界面切换快），同时也需要支持SEO（Search Engine Optimization），说人话就是对各种爬虫友好：）凭我个人经验来说对于体验要求高的H5，前端应尽量采取SPA（Single Page Application）架构，但是通常SPA无法做SEO，虽然可以单独为SEO写一套页面，但是这个工作量就增加了不少。那么有没有鱼与熊掌兼得的解决方案呢？经过一翻search，发现还真有一帮和我一样想“偷懒”的程序猿们：），看来偷懒推动科技进步一点也没错，哈哈。他们还给这个技术起了一个有Big的名字－“isomorphic web apps”即同构web应用。

Java让跨主机环境编程变得可能（编写一次，到处运行Write Once，Run Anywhere）

Nodejs将这种理念更进一步（一种语言，到处运行One Program language, Run Anywhere），同构web是以Nodejs环境为基础衍生的一种前端架构模式。

1）WHAT－什么是同构web app？

我们回顾一下web开发技术的演进.

a) 瘦客户端web应用（主流）

瘦客户端架构

架构特点：

一个功能一个页面

透过服务器端模版技术给前端输出HTML页面

切换页面加载

SEO友好

b) 胖客户端web应用（SPA单页面）

SPA胖客户端架构

架构特点：

透过Javascript UI库，动态产生界面DOM树

使用AJAX与后台进行数据交互

界面切换快

SEO不友好

C) 同构web应用

同构web架构

架构特点：

易维护，客户端与服务器端会共享部分代码（执行环境不同）

界面切换快速（SPA应用体验）

SEO友好（每个界面可独立访问，服务器输出HTML）

2）WHY－哪些场景需要同构web app?

要求加载速度快，界面切换快（如混合app），同时需要支持SEO

比如电商，o2o应用，论坛／Blog等。

如果说Isomorphic web你还比较陌生，那么这些产品你应该不会陌生Flickr，Instagram，Airbnb，Asana等，他们都采用同构技术架构自己的web app。

3）HOW－怎么构建同构web app？

现在有很多框架可以帮助你开发这类应用，比如Meteor，Airbnb开源的Rendr，其中最著名的一个可能是Facebook开源的Reactjs，笔者也建议从Reactjs开始学习同构web应用，这里有一份完整的教程：

https://github.com/kdchang/reactjs101/blob/master/Ch10/react-redux-server-rendering-isomorphic-javascript.md

另外如果想体验使用Reactjs + Redux + Express搭建的同构应用案例，可以访问DigME：

http://digdigme.com