第五次D2-关注在前端基础架构

总结这次D2,我听的几个session讲的都是前端基础架构的几个方面。前端基础架构是为解决团队高效开发,并行协作,保证代码品质所建立的一套系统的规范、工具、开发机制和开发流程。我从去年>开始思考这个问题,国外那些优秀的技术团队,经过几年的发展,都具备了比较成熟和完善的基础架构,因为这是团队内部运作的‘秘密’,过于基础所以外界难以得知,只是常常惊讶于Google一个产品就有几十万行Javascript是如何维护的,全球成千上万的工程师是怎么协作的,Facebbok的前端性能在07年还是一团糟,又是怎么短短几年那么彻底的解决了。为什么他们产品开发效率那么高,产出的东西还是那么完善,为什么……是有大智慧的牛人吗?我不相信力挽狂澜的‘侠客’,我只相信团体的智慧。其实,从陆陆开源出来的项目,爆料的文章不断证明我的直觉,不是依靠个人能力做到的,他们都曾有过我们现在遇到的问题,只是我们或者忍了或者用‘人海战术’而不是用更智慧的手段。

回到这次D2,先说点主题分享之外的。Hedger Wang是Google的前端工程师,刚刚做了Google的eBooks,之前做过NexusOne,再之前参与过GMail开发。分享几个聊天中印象深刻的点:code review是非常严格的,不能太依靠工具,还是要靠人。他说“他喜欢什么东西都先编译一下”,开发中的代码要尽可能写的友好,为此写的罗嗦一点也没问题,因为通过“编译”变成线上代码后,机器会帮我们自动把代码变得精练和高性能。一致性的组件框架的重要性,在复杂的应用中,一个组件如果只考虑构造它,不考虑解构它(就像上厕所不冲厕所),循环引用,事件监听等等导致的内存泄露,会在不经意间慢慢吃掉客户端的内存,让我们的应用变的很慢。小马在开幕词中说“前端工程师是面向用户的工程师”,非常对,细节实现对用户体验的影响是直接的。Hedger说他在面试时,常常会问对方如何实现一个按钮,由此可以展开很多问题。这跟之前那道简单的html面试题一个道理。

再回到主题分享中。下午首先听了杜欢的“可复制的前后端分离开发模式”,主要讲的是利用标签指令的方式,实现数据和模板的分离。可以方便的通过配置在假数据和真实数据接囗之间切换。假数据是由前后端工程师一起约定的,产出一份“数据接囗说明文档”,在本地每个模块对应一个数据文件。真实数据接囗全部是webservice,也是跟模块一一对应。他讲的是前端基础架构中最基础的部分-开发流程。无论大小团队,都是通过尽可能并行,简化开发环节,来提高开发效率。根据不同公司的技术特点,通过工具和一系列机制实现。在今年的Velocity北京会议上,Facebook分享的思路也是一样的。

Hedger分享的“打造高品质的Javascript-运用Closure Compiler”,完全扭转了我对这个工具的理解。Closure Compiler从名字上看就知道是Compiler,Compressor仅仅是它的功能之一。所以YUI Compressor和Closure Compiler没有可比性。目前JSLint和Closure Linter都是不错的代码风格校验工具。Closure Compiler则弥补了它们在检查语法规则上的不足。比如对私有变量访问的控制,泛型检查太酷了。Javascript本身是一个弱类型,松散的语言,Closure Compiler把它变成一个强类型,严谨的语言。真是神器。 更多请见这里: http://calendar.perfplanet.com/2010/coding-better-object-oriented-javascript-with-closure-compiler/

玉伯分享了通用类库的设计思路,将处理尽量原子化是个不错的想法,代码的结构很清晰。我喜欢这些简单的设计模式,让代码变得很有‘设计感’。UI组件从Base类和UIBase类继承的mixin设计模式,优点是扩展很灵活,但感觉继承有些重。将第三方开源库Mix进来,我个人认为没这个必要,用就好了,为什么一定挂在Kissy下呢。我私下问了玉伯,他说这样是扩展功能的作用。我仍然认为没有太大必要。

通用类库、功能库、UI组件库是基础架构中通用代码库的三个组成部分。通用类库要做得够通用,但你发现足够通用之后,解决的问题无非是那么几个Dom的API、事件机制、组件机制,有很多非常成熟的第三方类库可供选择,为什么还在这上面做无谓的重复呢。我想更值得思考的是上层机制,怎么选择,怎么组织,怎么弥补架构上的空白。

作品秀环节,曹宗伟的跨浏览器调试工具-JSDT看起来不错,可以弥补IE6、7调试的问题。见: http://code.google.com/p/jsdt/ 。希望更多人参与开发开源工具,弥补使用上的空白。这是很有意义>的事。

92年的大一学生李任之分享的项目Lofn也很有意思。用JS时时编译类Ruby风格的代码,支持异步编程。虽然我个人认为有些“旁门左道”,但还是很赞他的才华。

老赵(@jeffz_cn)演示了怎么用他开发的Jscex实现Javascript的异步编程。效果确实很酷,但个人觉得这个仅适用于很复杂的Web游戏开发,他演示的汉诺塔(hanoi)和方块曲线运动的例子,用Javascript结合CSS3的animation和transition可以更简单的实现。我对runtime编译的东西总感觉怪怪的。

老赵和任之的分享是对语言特性更深的研究,这跟他们的背景有关。这个和应用方向的研究完全是两个方向。搞前端开发的还是应该关注在应用方向上。

李靖威分享的静态文件编译,也很不错,是CSS模块化开发很好的实践。思路是在本地环境开发CSS都用@import引用所需模块的CSS,大家都知道IE下import是有性能问题的,这是一个典型的对开发人员友好,对性能不友好的例子。用编译的思路正好解决这个问题。通过编译把@import的CSS都自动抓过来。这在基础架构里是通过建立一种模块化的开发机制,提高开发效率,同时让代码的可维护性更强。

我听的这些分享大多都谈了前端基础架构中的一些重要问题,很多也是我思考的问题,所以听得很爽。感谢D2,感谢小马、秦歌、怿飞以及所有组委会的同学们组织了一次空前盛大的同行聚会。期待明年再聚D2!