最近一段时间，由于工作原因，研究了一下WebRTC，顺便搭了一个简单的demo。不过今天不想谈WebRTC，只想记录一下做这个demo的感受。

题外话，虽然以前做增值业务时写jsp出身，但那是十年前给手机写的网页，完全不需要javascript，再加上我对html和javascript一直持鄙视态度，自然也就没深入研究。这次用上了html5和最新的浏览器，才感觉到当今web开发理念和技术上的进步，跟十年前果然是天壤之别。

下面借开发demo的过程，来谈一下我所感受到的差别。

开始这个project之前，需要了解的是web能力的边界。早前的web只适用于展示信息的情况。html除了把文本/图片展示到合适的位置，几乎什么都不会做了，以致于adobe不得不创造出来flash这种东西来加强web能力。随着时间的推进，这些年html5标准的进化将把flash彻底打入冷宫。以个人现阶段的认知，重要的发展方向会在以下这些特性上：

• video：视频类应用以此接口摆脱flash的束缚
• canvas：提供绘图相关功能
• webgl：3D绘图接口，游戏实现的可能性
• websocket：长连接接口，与服务器端可以双向通信，即时通信基础
• WebRTC：点对点视频/数据通信，减轻服务器中转压力

项目开始的时候，没有必要从零开始，有强大的辅助工具，只需要简单熟悉一下：

• nodejs：服务端js，在这里作为一些工具的基础环境
• bower：依赖于nodejs，为项目增加js库，可以想象成maven单独的repository功能
• boilerplate：有很多html5模板可选，在这些工程基础上开始会省下不少事情
• grunt：应该是javascript工程的ant，暂时没用到
• karma：测试工具，大约类似junit，暂时没用到

与其他语言工程一样，html/js/css也有优秀的工具库，比如jquery/bootstrap/sass之类，不过这些我不觉得多重要。原因在于，这些工具库往往有着功能上的重合和冲突。想要混用比较麻烦，并且没有必要。我选择了一个很有特色的工具库为基础，后面会提到。

关于整个工程架构的变化，跟以前相比，现在的前端和后端的概念可以分得比较清楚了。对于以前的动态网页而言，类似jsp/php的做法，都是在server端完成页面的拼装，然后交给浏览器去显示。而如果以前端后端分离的概念来实现的话，web网页已经不需要在server端拼装了。浏览器将Web页面加载完成后，再通过xhr也就是ajax请求从服务器获得数据json，再进行页面拼装。在这样的架构下，client和server端职责都比较明晰，易于分离实现。这还是得益于现在client也就是browser的进化。对于我这次的demo而言，实际上就只需要实现前端。

说到前端实现，就要说到这次使用的工具库基础：angularjs。未引入angularjs之前，在我的理解中，html5和javascript的交互简直是一团糟，由于无法模块化，前端作为一个单页程序，js代码结构容易混乱，html代码规模容易大到找不到dom元素，因此程序写到一定程度就难以继续扩大。引入angularjs之后，可以很容易的分离出各个模块，js初始化和交互之间的调用井然有序，html也分拆到各个模块之中，便于分析处理。并且github上也提供了一个官方angular-seed工程，上手非常容易。另外还有angular-ui/angular-material辅助做界面，对于界面苦手是一个不错的起点。可以抛弃jquery/bootstrap了。唯一需要注意的一点是，2015年底angularjs将会升级为2.0，届时架构会改变，需要重新学习。但对于它带来的改变，我认为值得。

整个demo工程还在进行中，目前看来，整个项目中除了加入angularjs/angular-material，再就是需要的底层工具库如strophe等，接下来基本就是慢慢构建模块的过程了。目前只有最后一个环节，也就是web安全我尚未理解。还需要在后续的项目中慢慢尝试。

简而言之，html5很好很强大，angularjs或者说web component将是未来。web最新技术仍在发展，我们正站在浪潮的边缘。虽然我仍然认为web app和native app相比还有很大差距，但它的舞台无疑比十年前大了太多。web app根本无需考虑代替native app，也不可能代替。需求决定技术，native/web/hybrid app都有其适用场景，只要用户觉得好用就行。