前端模块化开发 - 一周工作总结
March 21 2015

不知不觉在BillGuard已经呆三周了。这期间主要是开发BillGuard公司页面的Landing Page。一起合作的Chof是一个非常有野心和想象力的设计师,因此扁平设计的页面使用了大量的交互和动画,给前端造成很大压力。

对于我个人来说我的前端经验非常有限,并没有收到过专业的训练,以前的项目也只是由于前端没有人所以匆忙上阵,页面草草设计了事,一切以简洁为主,对于复杂交互的前端页面经验全无。甚至在开始这个Landing Page的开发前期把所有的JavaScript代码全部丢到一个js文件了事。后果也异常明显——项目仅仅开发了第一代就因为混乱的JavaScript代码让我头痛不已,因此上一周痛下决心阅读大量文章开始了前端的模块化之路。

HTML

开发伊始我以为这只是一个单页面应用,因此仅仅在工作目录里丢一个index.html作为入口,然后用gulp作为开发服务器,其中的livereload插件实在是前端神器,配合Sublime Text3使用天衣无缝。Johannes Schickling的文章给了我巨大帮助。

这样所有的模块都全部放在一个页面里,没有办法进行单独测试。其中一个模块是团队展示的动画,Chof希望我能够把这个模块单独剥离出来,由于之前没有考虑模块化,因此这变成几乎不可能的事情。另外团队展示页面需要数据支持,直接把数据放到js文件里造成几乎不可能修改的后果,再加上团队中并不是所有人都懂JSON的格式,因此一个轻量级的服务端变成必需品。

后端的选择是一个问题:我对Django很熟练,但是复杂的配置和部署很花时间,另外我也想换种语言学学新东西,既然这是一个前端的工作,为什么我不用Node.js来完成呢?所以周一我花了一整天的时间快速入门Node.js并用Express搭建了一个轻型服务器。Node.js作为后端相对Django来说可以说是闪电级的。利用Heroku部署搭建好了Node应用只是五分钟的事情。感谢这些伟大的公司和开发者,让其他人的学习和部署变得更加容易。

有了后端服务器作支持,前端部件的模块化就太简单了。Express自带的Jade模板写HTML是一种享受,里面各种includeextends可以轻松进行单元测试。

CSS

关于CSS要说的太多了。我被这门古老用法的语言折磨太久了。之前很多项目使用Bootstrap作为UI框架,会经常要修改一些Bootstrap的样式(可见Bootstrap实际上并不适合大项目的开发,因为它的默认样式太多),一般我的做法是对Bootstrap的源代码敬而远之,而是另起一个css文件再修改。Bootstrap的代码是LESS生成,因此这种后期添油加醋的做法长远来看无异于作死,很多时候一个简单的css文件被我搞成一千多行,非常混乱。

最后决定使用LESS开发。像很多新手一样我对LESS还是SASS亦或是Stylus经历了一阵痛苦的选择恐惧症。后来我想到这项目时间紧迫根本没有时间允许我去选择什么编译器。最后我选择了一个看起来最顺眼,而且名字也一语双关的LESS。至于这选择是否正确尚未清楚,但是LESS像Jade一样,完全改变了我写CSS的模式,让简单的样式定义变成了一件起码来说不能算是无趣的事情。以后的项目我可能会接触学习一下SASS,但目前来看LESS已经满足我的大部分需求。

JavaScript

JavaScript是我学过的第一门语言。但长期以来我对它的了解一直是在HTML直接添加几个onclick属性完成一些简单的工作(正如它被发明的原因),或者下载一些其他开发者写的jQuery插件完成一些较为复杂的需求。通读完《JavaScript高级程序设计》以后我才认清楚为什么人们常说JavaScript是一门结构松散的语言。

由于这个Landing Page内含大量动画和交互,而作为一个商业产品,使用第三方的库也受限,因此很多功能需要自行开发。以前一直听说有程序员抱怨JavaScript全局变量,那时我对此半懂非懂,直到亲自写了几个插件才完全明白这是怎样一个坑。

试了sea.js又读了几篇关于AMD和CMD的文章后,最终选择了require.js。我不能说它让我的开发变得更爽快,但起码变得放心许多,尽管require.js要求我把许多简单的事情变得很复杂。比如某些没有那么复杂的部分,我要做的可能只是给某个按钮绑定一个click事件,但我也得为此写一个模块并在最开始的main.js里依赖它。但尽管如此我还是接受它,毕竟它让代码的可维护性和可复用性大大增加。比如团队展示的模块也可以应用于投资者和Advisors的部分,只需要依赖写好的gallery包就直接可以使用了。

其他方面需要考虑的还有JavaScript的性能优化。我现在写出来的一个模块运转还算正常,但是总有卡顿的感觉。下周会继续研究DOM的操作。

参考

  1. http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server–cms-20903

Currently

Software Engineer at Yahoo!

Previously

Full Stack Engineer at Prosper Marketplace

Previously

Front End Engineer at BillGuard (Acquired by Prosper)