页面

2012年3月6日

工程化前端开发

一般来说,前端开发中css代码多数是无法复用的,javascript代码复用率也不高,或者说复用迁移的成本很高。但是,2011年是前端开发大步跨越之年,在这个令人高兴的年份诞生、成熟了很多重要的项目。这些项目帮助我们终于可以实现对前端开发的工程化控制。我根据进一年来的经验构建了两个自己的前端开发项目,立志于让繁琐沉闷的前端开发尽量脱离对UI设计的捆绑,尽量让前端代码得到可复用性和模块化。 

首先必须感谢这么多伟大的开源项目:
AliceSassBootstrapsass-twitter-bootstrap-railsYUI Compressor 它们共同构成了我的zic-css
seajsUglifyJSjQuerybackbonecoffeescriptmustacheUnderscore.jses5-shimClosure Compiler 它们共同构成了我的zic-js

关于zic-css: sass是实现工程化的基础,我真的太爱这个玩意儿了,变量、Mixin可以被复写即可以保证所有在继承链顶端的第三方代码可以不被修改地快速更新版本,比如sass-twitter-bootstrap-rails出了新版本,直接拷贝过来即可,并不会影响当前网站设定的所有颜色,图片路径等规则,另外要特意提一下Alice的样式库解决方案样式库构建模板,都是对技术很好的沉淀。 

关于zic-js: 实现工程化的关键在于seajs,是淘宝前端玉伯的成果,这是一个令人非常欣喜的项目,虽然至今还有很多不成熟(主要是在文档方面),但它给我所带来的javascript架构模式上的改变已经足够令人钦佩。我知道国外也有一些相对成熟的模块化开发框架,如RequireJS,但经过比较后我非常清晰的感觉到seajs才是我想要的,它遵循了kiss原则的轨迹。另外一个不得不提的是coffee-script,其扎实的成果已经打动了很多人,当然也包括我,这是建议所以javascript码农都必学的一门语言。关于js的压缩,UglifyJS因为非常精彩的设计得到了很高的性能,适合在开发阶段经常编译检测的需求,而Closure Compiler拥有最好的压缩比和配置能力,所以是最终部署时的不二选择。

最后不得不提的是Git,最近才开始使用它的子模块功能,然后发现一切都是那么顺手,我的两个前端项目可以作为任何web项目的子模块,从而及时更新或被更新或合并代码。不需要像最初使用seajs模块库那样经常痛苦地手动合并各处的更新。                    

没有评论:

发表评论