如何构建单页WEB应用

简单来说，是因为单页应用具有组件化，复用性，易于维护等多方面优点，场景主要在控制台应用，管理后台等等，当然通过服务器渲染做成网站应用的也有。

Gmail、Evernote、Trello，Teambition…都是单页应用的成功案例，拥有更好的用户体验，对单页应用来说模块化的开发和设计显得相当重要。

SPA历史

首先单页应用，我首先想到的是ExtJS，重量级的UI组件，开发者基本上不需要写HTML代码，全部通过new Component的方式，来展示UI，构建应用。

后来随着移动互联网的兴起，很多应用慢慢开始尝试做web本地应用（单页应用，完全在webview中运行），通过Phonegap， Cordova 最终发布到Android Market，Apple Store，让SPA大行其道。最早的比如 Sencha Touch ， Jquery Mobile ，以及现在的 ionic 等等。

现在有了 Angular ， EmberJS ， Backbone ， Vuejs ， ReactJS ……, 选择适合的Framework 使得我们构建单页应用变的更简单，更高效。

如何构建SPA应用？

我们通过三点来重点说明如何构建：

• 模块化
• 状态管理
• 程序构建

模块化

Single Page， 顾名思义，就是单一页面，一个HTML，程序之间的切换通过直接或间接操作DOM来实现。

抛开单页，我们在开发多页webapp的时候，经常性的会看到页面引入大量script标签：

<script src="http://your-domain/jquery.js"></script>

<script src="http://your-domain/utils.js"></script>

<script src="http://your-domain/app.js"></script>
......

这么写有什么不好么？不好的地方在于：

1. 应用大量的script，相当于发起N次网络请求，增加网络负担；
2. 由于JS并没有命名空间的概念，引入多个script，很容易造成命名空间冲突，导致代码出现问题，很难及时定位。
3. 代码很难复用，维护成本高。

通过SPA，我们将代码模块化、组件化，充分做到代码复用，我们不再在程序中通过script来引入另外一个组件，而是通过CMD、AMD， CommonJS 方式来组织代码。

例如一个view中需要引用Alert组件，只需在JS中：

import Alert from 'path/to/Alert.js';
// 使用
Alert.show();

是不是很方便？

这里推荐大家使用 Browserify 或者 Webpack 来模块化你的组件，他们配合Babel，让我们写ES6的语法，享受代码的简洁性。

状态管理

当我们的单页应用慢慢变的大起来，我们通过直接修改DOM，很容易出错，也很容易造成性能问题，也很难将逻辑与UI进行分离，代码又成了一团糟，此时人们发明了程序组件的状态化，通过动态更改State来改变UI，而不是直接操作DOM。让程序变得更加健壮，而且更易于测试。

常见State管理，比较有名的是Flux，也有非常流行的，受Flux启发的 Redux ， Vuex 等等。

程序构建

当我们在开发SPA程序，如何做到代码更易于调试，如何通过热加载来加快程序开发，在程序开发完毕，如何将代码合并，压缩，如何将代码分片异步加载……。好在现在已经有了很多成熟的 工具 帮我们完成这一系列的动作。

常见的有： Grunt ， Gulp ， Webpack 。

Grunt， Gulp都是基于任务式的，可以很灵活的通过编程方式来操作构建行为，区别在于Grunt任务配置项之多也常常被人诟病，较臃肿，配置一个任务，轻轻松松几百行…

Gulp相比Grunt更有设计感，易于学习，核心设计基于Unix流的概念，通过管道连接，前面输出结果作为后面的输入，遵循代码优于配置策略，维护Gulp更像是写代码。

相比Gulp&Grunt，他们更像是一个工具，而Webpack是模块化方案。

1. Webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是JS ，所有的静态资源，例如css，图片等都能模块化。
3. 开发便捷，能替代部分 Grunt/Gulp 的工作，比如打包、压缩混淆、CSS预编译、图片转base64等等。

总结

现在我们可以构建我们的SPA程序了，通过：

1. 通过将程序模块化，让组件分离，便于复用；
2. 然后通过状态管理，间接改变程序状态（State），而不是修改DOM，来动态更新UI；
3. 程序构建，将组件化的程序打包，压缩，预编译…，然后部署上线。

完美～

SPA的boilerplate， 请到github查看源代码：

1. 通过vuejs1.0 & vuex构建SPA： vue-spa-boilerplate ；
2. 通过vuejs2.0 & vuex构建SPA： vue2.0-spa-boilerplate ；
3. 通过reactjs & redux构建SPA： react-spa-boilerplate