这期场地由即将上市的当当网赞助,地点在北京市东城区东四十条第五广场C座。讨论的主题围绕IE6展开,首先是putaoshu(刘威)同学在交流会上分享《IE6的前世今生》。他总结了IE6在国内市场份额巨高不下的原因
putaoshu指出可以消灭IE6的三大武器:浏览器厂商、客户端、政府机关和银行等,而最终核武器是Windows7的普及。他建议前端工程师不要等待,现在就可以开始作一些事情,例如:
putaoshu还汇总了IE6的常见bug(更多请访问haslayout.net)
接下来大家讨论很热烈,尤其是在如何让IE6更快灭亡议题上,群情激愤,各抒己见。有人认为应该从用户的角度去推动IE6的灭亡,而不仅仅是为了方便前端开发,有人指出个人能力太薄弱,大公司推动的力量要大得多,所以在这个事情上,大公司的态度更重要。
轮到我发言时,首先分享了一下美团用户的浏览器分布情况(2010年10月份统计信息):
从数据可以看出,坏消息是IE6仍然占据了浏览器的最大份额,而好消息是IE6市场占有率开始低于50%,并且这种消亡的趋势已经不可逆转。YUI最近对浏览器分级支持进行了更新,并准备在2011 Q1的时候将IE6的分级支持从A调低到C。IE6 MUST DIE!,这个日期我相信也不会太远。
有人说IE6为前端人员提供了更多的工作机会,这是不对的,即使没有IE6,前端开发的人员需求依旧很大。前端工程师不需要IE6来证明自己的价值,而相反IE6让前端开发丧失了更大的想象空间。如果没有IE6,前端可以作一些更酷的事情,可以将生产力更大的释放出来。
关于如何加速IE6加速灭亡的问题,我提出两个可以身体力行,也是目前我在实践的方案:
在讨论会的第二阶段,在会议组织者的提议下,我对会上讨论涉及的问题作了一些补充。
有位女同学提到浏览器兼容性调试困难的问题,比如IE Tester有时候并不能满足需求。在美团网内部,兼容性调试采用虚拟机来解决。在服务器上安装了独立的IE6、IE7、IE8测试环境,除了可以覆盖IE浏览器系列,包括基于IE内核的360、Maxthon和TT等,还可以测试不同版本的Firefox、Chrome等主流浏览器。虚拟机群使用免费的vmware server来管理,如果之前有使用过vmware家族的产品(如vmware station, vmware fusion等),基本上可以无缝迁移,当然即使没有用过也没有关系,安装和使用都比较简单。因为各个虚拟机都是独立运行的,可以非常接近用户的实际使用环境,并且IE6和IE7都可以安装developer toolbar和http watch这样的调试工具,很方便。同时虚拟机安装在性能更强劲的服务器上,不会消耗本地的计算资源,对开发环境也没有影响。使用vmware server两年多以来,历经考验,一直都很稳定,是可以依赖的先进生产力。
有位同学提到虚拟机在使用多个本地测试环境时,不太方便。因为美团开发环境都集中在同一台开发机,每个开发环境使用apache的虚拟主机分开,所以不会产生这个问题。如果开发人员喜欢使用本地环境,可以通过使用固定IP和集中管理hosts来解决。
接下来,我演示了在美团网开发中,使用渐进增强的几个例子,包括使用了hover伪类、png图片处理和css3等。然后以YUI的reset.css为例,阐述了清除和重设浏览器默认样式在前端开发中的重要性。但css reset解决方案中没有银弹,实际开发时都要根据各公司的情况作一些裁剪和修改。中文网页的reset方案,推荐看玉伯的文章《KISSY CSS Reset 1.0》。
最后分享了我在模块化开发方面的一些实践,傲游的赵锦江同学对这个主题进行了扩展。模块化开发很久以前就在Nicholas C. Zakas的《Scalable JavaScript Application Architecture》ppt中提出,而在webrebuild第四届年会上来自台湾的蒋定宇同学也有提到他在模块化开发上面做出的努力,并且相应的开发库已经在github上面释出。
美团网目前后端工程师数量远超前端工程师(美团还在征兵买马,欢迎给我简历),前端数量严重不足,导致后端工程师也要参与一些前端开发的工作。为了缓解后端的开发压力,需要给他们提供一些更方便的模块,构造页面像搭积木一样,只需要在模板输出一段html即可完成很多工作。我习惯称这些模块为widget,并把它们都放在widget命名空间下,当然使用其他名称也是OK的,影响不大。
示例:
<input type="text" data-widget="liveSearch" data-params="{type:'deal'}" />;
这表示一个提供live search功能的搜索框,它可以搜索全站的团购交易项目。其中data-widget是widget类型声明,data-params是初始化参数。 后端工程师在任意页面只需要输出这段代码即可实现即时搜索的功能,对他们来说很高效,因为不需要去学习javascript如何初始化模块或组件等知识。
这个开发方式很完美,但是问题马上就来了,各个模块之间怎么通信呢?比如用户选择了一个交易,然后需要在当前页面列出该交易所有的订单。经过认真考虑,决定引入模块化开发的思想,对代码框架作了一下改造。在美团网的具体代码中,支撑模块化开发的核心方法,是通过自定义事件实现的,依赖于YUI的CustomEvent类,可以同时在全局和非全局命名空间中使用,也可以多次初始化一个模块。
完整代码和demo 其中涉及的一些实现细节,如果有时间,我会专门作一次总结。
这次讨论会,是我参加w3ctech以来发言最多的一次,这里要鼓励一下自己的勇气。当初周裕波、崔凯、rekey、tension等人创办w3ctech交流会,目的就是让前端工程师可以有一个交流并切磋技艺的空间。很多人包括我都是带着学习的态度来参加这个会议,并从中受益良多,我在公司内部很多技术改进方案都源自于交流会上的思想碰撞。期待下次交流会可以和更多的同行交流,把前端开发事业一起向前推进。
以下照片版权归rage同学所有,更多照片见http://www.douban.com/photos/album/37904309/
putaoshu在分享ie6的前世今生
我在发言
注:因为vmware server没有提供在mac系统上的终端,所以mac用户需要vmware fusion或者其他非mac系统作为跳板。