次世代 HTML5 应用应该怎么写
2015 年 01 月 10 日
最近一段时间,由于工作原因,研究了一下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都有其适用场景,只要用户觉得好用就行。