随网之舞前端

HTML5@电子商务.com

秦歌 — Sat, 18 Jun 2011 19:50:52 +0000

经过2009到2010年全球领先的互联网企业Google、Apple、Facebook等等在HTML5上的大力推进和应用，今年在国内业界开始真正地热起来，4.10 QConBeijing2011的12个专题之一就是HTML5开发平台，4.18 由W3CTech主办的“拥抱HTML5” 又是国内业界另一个顶级的HTML5大会，这次的HTML5 in China是今年第3个关于HTML5的国内业界顶级会议，还有即将到来的7.9 D2前端技术论坛也将会有部分HTML5相关的内容。在这么短的时间内国内组织了这多次和HTML5相关的大规模顶级会议，几乎涉及到国内所有最领先的互联网企业，从中可以看出HTML5的热度。

HTML5引起业界如此重视这是好事，但短时间内过热反而说明了业界对于HTML5的理解程度不够，这点和2005年言必称标准和ajax非常类似，等大家真正对标准和ajax深刻理解并应用到生产实践的时候反而在谈论的是利用标准和ajax成就了某项产品而不仅仅是技术本身，HTML5也正经历这样一个过程。现在最热的讨论之一就是在移动平台上使用原生开发还是使用HTML5，如果只是讨论两者的技术优势这个问题估计永远没有答案，因为我们的目标真的不是那种技术更好，而是哪种技术更能适合我们用来快速的解决用户的需求，一个复杂游戏比如极品飞车当然用HTML5来做当然不是最佳的方案，但类似Google Reader之类数据展现性和简单交互的应用当然用HTML5开发比较好，其实如果你稍加留意就连Apple自己的App Store这个应用的本身就是用HTML5开发的。本次会议前面有两位同学介绍使用phoneGap + HTML5来重构新浪微博的iPad客户端，两个人利用一周的业余时间大致实现了这个iPad客户端的全平台覆盖（Web、Mobile Web、Android、iPhone和iPad），我想新浪微博的同学看到这个应该会有一些不一样的感触吧。

我把这次每张幻灯片要讲的内容都写到幻灯片的注释中，有兴趣的同学可以对照看会更明白一些，同时也在blog中列出每张幻灯片要讲的内容。另外，几乎每张幻灯片的后面都了一两个链接，这些链接很多都非常精彩，强烈推荐大家看看。

HTML5@电子商务.com是我在这次HTML5 in China大会上讲的主题，之前有大量的业界同仁介绍了HTML5的意义和HTML5能够实现的各种很Cool的应用，特别是Mozilla的米嘉代讲的《HTML5 in the wild》让很多人都惊讶于HTML5所能实现的一切，但是可能也有不少人会感觉到这些玩意太炫了，不知道怎么才能和我们的实际结合上，所以会有人说那些酷酷的游戏是浮云，我发现大部分人留下来听非游戏部分也说明了HTML5在非游戏领域的应用是我们更多人面临的问题。我会把口碑和淘宝在HTML5上一些应用案例拿出来和大家交流，基于这些案例来聊聊我们对HTML5的认识和应用，最重要的如何思考落地的然后实现，当然这些经验不是只适合电子商务网站，也适合任何使用HTML5来解决业务问题的场景。
这页就是个人信息，欢迎就任何问题联系我。
HTML5的应用的程度和浏览器的支持程度密切相关的，这个表列出目前主流浏览器各个版本在HTML5 Test得分，全球的占有率和淘宝的占有率。HTML5 Test的满分是400分，而目前得分最高的293，可见实现HTML5已定义的所有标准还需要较长的路要走。
从表中我们还可以从中看出更多很有意思的东西：
1. IE6、IE7、IE8在HTML5标准上的支持的确太差劲了，是大规模应用HTML5的障碍，我们是应该主动推动用户升级了。全球范围内IE6低于3%，IE7低于9%，在美国和欧洲这个值应该更低，这就是为什么Google可以宣布在它的很多新兴业务不支持或有限支持IE6和IE7的原因，利用HTML5开发出优秀的产品，然后适时引导用户升级浏览器的最好方法。
2. 我们更应该看到虽然HTML5是在2004由WHATWG开始孕育，2006年W3C正式启动，但2001年推出的IE6已经支持部分HTML5，这告诉我们HTML5并不是全部是所谓的新技术，它更考虑对现有HTML技术的继承和改进，而很多HTML5技术规范我们早已经在使用，比如HTML5的DTD声明，所以我们很多人很早就在使用HTML5。
3. 淘宝的IE6、IE7、IE8占有率超过80%，整个IE份额接近90%，这主要有两个原因导致淘宝IE份额非常高：
  1. XP操作系统在中国份额依旧80%以上
  2. 电子商务网站最重要的一个环节是支付，而现在的网银绝大部分是只支持IE的，包括和淘宝密切相关的支付宝，虽然已经支持了各大平台的，但其最重要的安全措施电子证书主要还是在IE上使用最多。
4. 淘宝的IE6占有率已经低于40%，这绝对是一个好迹象，从我私下打听的几个数据判断国内IE6平均占有率应该在50%以上，后面会解释为什么会这样。
整个阿里的电子商务交易支付部分主要依赖支付宝，支付宝在不支持浏览器、安装证书等操作上会引导用户升级最新的版本，这非常值得国内的大站点学习。
支付宝在其教显著位置推荐使用IE、Firefox、Chrome、Safari等浏览器最新版本，并提示用户升级浏览器，这是一件非常有意义的事情，好的产品引导用户升级利企利民。不过，这里支付宝可以有一个小改进，那就是不要对XP平台的同学也推荐IE9浏览器，幸好下载链接那边的微软做了判断。
开始学习和应用HTML5，首先会注意到新增了大量的语义化元素，比如
，这些元素的添加正是HTML5务实一种体现，它们都是来自对现实HTML组织形式的抽象提取，但遗憾的是IE6、IE7、IE8不支持这些标签，但开发者是很聪明的，于是有了两种解决方案：
1. John Resig公布了利用JavaScript来实现让IE6-8支持的方法，这种方案比较简单，唯一的缺陷就是必须使用JavaScript，但浏览器可能不支持JavaScript
2. 利用双层标签进行嵌套，这样就不需要考虑是否支持JavaScript了，但代码臃肿，基本上开发人员不太喜欢，所以大部分都使用上一种方案
但我们不能不面对一种现实，那就还是有大量的用户代理禁用JavaScript，当有上亿用户时，这个数量其实是我们无法忽视的。
为什么还有这么多用户禁用JavaScript呢？除了用户通过安全级别进行禁用、杀毒软件禁用之外，还有一个Firefox插件NoScript也需要值得我们注意，一方面它的下载量接近9000万，可见用户数量之大，另外一方面我们在百度上搜索NoScript时，你会发现第一页很多地方介绍NoScript时都提及安全，也就是说用户对JavaScript的恐惧和对安全的担忧才是我们存在大量禁用JavaScript的情况。
淘宝首页在年初升级时引入了HTML5的语义元素，当用户在IE6-8下禁用JavaScript会出现幻灯片上的提示，建议用户开启JavaScript或者访问一个专门定制的不使用HTML5新语义元素的页面，这个看起来是一个不错的解决方案，但就是成本太高。
所以为了避免成本太高，淘宝彩票首页前不久也引入了HTML5语义化元素，就直接告诉禁用JavaScript的用户启用JavaScript，否则没法使用。
我们当然可以把不支持JavaScript的用户看成某个低版本的浏览器用户，比如是IE5.5的用户，我们也可以像强制用户升级一样去强制用户开启JavaScript，这是不同场景的不同选择，所以前面淘宝的选择也是一个可行的方案。在口碑的实践中，尽可能地让用户先用起来是我们的设计原则，所以口碑看重的是：
1. 重点是语义的本身而不仅仅是语义元素，我们不会仅仅为了使用语义元素而引入JavaScript或嵌套标签，采用语义本身的含义来组织我们的代码是关键，所以我们可以更多的去参考HTML5的语义元素和http://schema.org/ 来规划我们的代码结构和命名，这样如果有一天你想转换成HTML5的也是非常简单的。
2. 对JavaScript依赖性很强的项目，可以大胆的使用HTML5语义元素，同时需要对用户进行友好的提示，特别是在安全方面的提示。
3. 不考虑NoScript并不能靠优雅降级一言蔽之，前端工程师有责任和义务去深入思考可访问性问题，虽然两者并不是同一件事。
电子商务网站经过多年的实践总结出主要的用户路径，这些路径的完成率直接关系到整个网站的交易额，所以提升每步的转化率对于电子商务网站来讲至关重要，实现每步之间的转化率就是要想办法提升用户的购买效率。这里面有很多事情可以做，比如按照应用购买力的因素来设计页面信息和购买步骤，尽量减少每两步之间的页面数、提升两步之间的速度、减少两步之间的干扰，在完成购买时形成新的购买循环。
在很多情况下，List页到Detail页有很多相似的地方，比如共同的头尾、侧边栏、购物车，如果我们用ajax来替换中间不一样的部分，会减少从List到Detail的时间，提升页面性能，从而提升交易额。Amazon的实践曾表明网站慢100毫秒有1%的人放弃交易。但采用ajax这样做的时候会遇到三个障碍：
1. ajax请求的页面，比如detail页面，怎样定位这个页面的URL
2. 浏览器前进后退的问题
3. 传统页面的和可访问性和SEO问题
应用ajax的这些问题早已经有了比较完美的跨浏览器解决方案，很多JavaScript库或框架都有解决这些问题的组件，twitter就是这方面是个非常好的案例
1. 利用url的hash标签来作为独立的URL，这样可以定位到每个具体页面
2. 利用window.history.hash + iframe来实现浏览器的前进后退
3. 提供强大的API，不存在传统的SEO问题
但twitter的方案并不完全适合传统的页面的渐进增强，传统页面很多时候必须在页面本身考虑SEO问题，以及URL标准问题。比如访问 https://twitter.com/#!/kavenyan 你会看到loading，这是因为需要JavaScript要获取hash值之后才能再次获取对应数据，然后更新到页面上，如果是页面的核心主体内容采用这种方式一直看到loading并不是太友好的事情。

HTML5对history提供了强大的API：histroy.pushState和histroy.replaceState，它们非常简单自然优雅地解决ajax应用遇到的前面两个问题。更重要的是URL不需要借助于URL的hash部分，是一个真正意义上完整的URL，这样就可以很自然地实现对可访问性和传统SEO的保留。所以，当你直接访问从List通过ajax生成的Detail的URL http://waimai.koubei.com/web/takeoutgoodsdetail.html?city=99&offerId=10211200000000191 时会直接出现Detail的主体部份，不会出现任何loading。

这个API的缺点在于只有Chrome、Safari和Firefox4支持，这恰好形成了一个天然的ABTest，我们可以通过统计埋点看看这样做是不是实现了我们的目标增加了转化率。必须牢记，我们的目标不是为了使用某个HTML5技术，而是使用HTML5技术来解决用户的需求。最早使用这个API的知名网站是 http://github.com，在QConBeijing2011上hax提到了这个API，我们看到这个API恰好能解决我们的面临的问题就立即应用了。这个事情告诉我们，我们今天不仅仅是了解HTML5的那些最Cool的应用，还要找到那些适合我们能学以致用的技术，一旦发现我们应该快速的去实践拿出结果，否则再Cool的技术如果不能解决我们的问题，不能解决用户的需求是没有用的。
这里有一些我们已经使用和正在尝试使用的HTML5技术，每项技术的使用都是奔着能解决我们的问题去的，尽量避免为了技术而使用技术。
HTML5和CSS3能够让我们实现很多很Cool的设计，比如圆角，比如倒影。但是有时候你可能会发现，视觉设计师通过PhotoShop之类软件设计的圆角和倒影你很难用HTML5 + CSS3实现，但HTML5 + CSS3 又能很高效的做出类似的事情，这是一个很尴尬的事情吧，所以让交互、让视觉，甚至让运营和产品了解HTML5能干什么非常重要，HTML5 + CSS3 + JavaScript + 浏览器性能的改进将会很快的改变我们的设计模式，为了让更多的上游理解HTML5和CSS3在设计上能做什么，我的同事开发了Chrome插件Code Cola，用它能够非常方便地通过可视化的方式在现在有的页面上实现各种HTML5效果，并能够方便地得到修改后的代码，或者把修改后的页面发给服务器以便其他人协作使用。这个插件本身就是用HTML5 + CSS3 + JavaScript来实现的，我们正在用HTML5来提高我们的效率。
这句话是Jeremy Keith在《HTML5设计原理》中讲的，4月份他也曾亲临W3CTech主办的拥抱HTML5大会向中国的开发者布道，这是一个我认为每个和HTML5应用相关的开发者都应该仔细去品味的演讲，从中我们可以深刻的理解HTML5为什么会变成这样，以后会是什么样，我们应该本着什么样的态度去实践HTML5。我们会使用HTML5不能叫我们创造价值，只有我们用HTML5解决了用户的需求才叫创造价值，这和HTML5的设计原则是一致的。从第1个例子考虑NoScript情况，到第2个例子针对不同浏览器实现不同效果，到第3个例子为设计师开发HTML5 + CSS3的可视化工具，都是在遵循这个原则基础上去实现的，实际上我们可以做的更多。
这些口碑在实践HTML5时的一些心得：
1. 前端技术开发都是在渐进增强和优雅退化间做平衡，这不仅仅体现在某个具体的技术应用上，也体现在整个设计的思想和开发流程上，我所举的例子也都是在做这两者的平衡。
2. HTML5并不是新兴的技术，但是由于各个浏览器支持的不同，我们必须面对残酷的现实，针对某个具体的问题的跨浏览器解决方案都很多种，比如探测浏览器是否支持HTML5某个属性的库 Modernizr上有个wiki页就收集了特别多的全球开发者解决HTML5跨浏览器问题的方案。我们完全可以站在全球开发者的肩上高效的使用HTML5来解决用户的需求，同时通过具体业务挖掘出新的解决方案贡献给社区。通常，应用HTML5并不仅仅是前端工程师的事情，需要整个设计和研发团队都所有了解，这样才能把技术利用到极致，为用户创造最大价值。
3. Douglas Crockford曾说过ajax导致web page成为web application，实际上从2005年到现在虽然有这个趋势，但是还是不足够明显，随着HTML5的出现，从元素的规划到API的设计，都标志着Web App时代的带来，这恰好和手机App的时代同步。Web App的出现导致了我们需要更多的思考设计与技术的结合，单纯的先设计页面再开发页面的时代很快要过去了，我们需要把页面的设计和开发结合起来，这将会对我们的交互设计、视觉设计和前端开发带来很大的挑战和机遇，我们应该从现在探索，要知道如果按照运营、产品、交互、视觉、前端、后端、测试这种研发方式是不可能出现Google Maps、Gmail、Facebook、Twitter等等的。
4. 我们面对大量基于HTML5新且Cool的应用，但是有时又会感觉离我们有点远，作为前端开发工程师应该理解业务，对业务的未来有所判断，那么我们就能够用HTML5来解决我们的用户问题，而不是为了使用HTML5来进行某些开发。我们必须用成功的案例来证明HTML5可以做什么？我们不仅仅应该出现的是技术热，更应该出现的是产品热，每个新的产品出现才是真正解决用户需求而具备非常大的意义。利用HTML5做出成功的产品是最好的布道方式。
“一次编写，随处运行”曾经是Java的梦想，也是开发者的梦想，这样开发者可以把更多的时间放在解决用户的需求上，而不是机器和软件的兼容性上，现在HTML + CSS + JavaScript差不多快做到了，如果我们不能用这些技术满足用户的需求，让我们的用户感觉到Cool，那么满足开发者的梦想就会变得意义没有那么大了，这就是HTML5的设计思想，也应该是我们每个程序员的追求。

最后，把这个幻灯片献给口碑网。

《高性能网站建设进阶指南》译者序和样章

秦歌 — Wed, 21 Apr 2010 15:30:25 +0000

经过大半年的努力和等待，口碑网前端团队5位成员共同翻译的《高性能网站建设进阶指南（Even Faster Web Sites）：Web开发者性能优化最佳实践》终于面市了。翻译的过程本身就是学习的过程，又经过了在口碑网的实践，我们深刻地感受到本书内容不仅和每个Web开发者的日常工作结合得非常紧密，而且对于每个开发者都有着重大的指导意义。在此，我们诚恳地向所有的Web开发者推荐本书，欢迎大家就本书内容进行交流、批评和指正。

本书的主要作者Steve Souders是《高性能网站建设指南（high Performance Web Sites）：前端工程师技能精髓》的作者，Web性能优化领域的权威，前Yahoo!首席性能工程师，现在Google负责Web性能和开源组织。他是Firebug的性能分析扩展YSlow的创建者，也是O’Reilly Web性能与运作会议Velocity的联合主席。通过他的个人网站http://stevesouders.com/能了解全球最新的Web性能动态和技术发展。

译者序

“信息网络的扩展正在为我们的星球建立一个新的神经系统”，而Web正是我们与这个系统对接的最重要平台。现在，信息与用户量在Web平台上呈爆炸式增长，用户与Web界面的交互越来越复杂，会话时间也越来越长，速度已经成为Web产品使用体验好坏和市场成败的最重要指标之一。在Google，网页呈现速度慢500毫秒将丢失20%的流量；在Yahoo!，慢400毫秒将丢失5%~9%的流量；在Amazon，慢100毫秒将丢失1%的交易量……反之，网站速度越快，越有利于用户汇聚、流量增长及交易量的上升。所以作为Web开发者，我们不会满足现状，要让网页变得更快更好。

本书作者Steve Souders在他上一部震惊业界的大作《高性能网站建设指南》中告诉我们，Web的80%~90%的性能由前端决定，并为提升Web性能设置了14条规则。本书中，Souders与8位Web开发界顶级大牛（Dion Almaer、Douglas Crockford、Ben Galbraith、Tony Gentilcore、Dylan Schiemann、Stoyan Stefanov、Nicole Sullivan 和 Nicholas C. Zakas）通力合作，一起向我们传授让网站速度更快的思想和原则，以及相应的技术和工具。它是上一部作品的进阶之作，如果说上一部作品使Web开发者有机会实现高性能的网站以满足当前用户的需要，那么本书将帮助我们立足现在更着眼于未来，以实现超出用户期望的速度体验。

Web的高速发展让开发者应接不暇，开发者应该把智慧、时间和精力放在用户最需要的地方，因此在做性能优化时不能盲目行动、捉小放大，需要事前有效评估找到重点，事后建立监控和保证机制，把有规律的、重复的、精确的工作交给机器去做。9位大牛把众多的思想、原则、方法和自动化工具融汇到这本书中，让Web开发者有机会站在巨人的肩上，借助于全球业界的最新成果，用自己的智慧、行动和坚持开发出令人赞叹的Web产品来。

如果你稍加留心就会发现，这两本书副标题的变化很有趣，第一本书的副标题是“前端工程师技能精髓”，而本书的是“Web开发者性能优化最佳实践”。Web性能优化不只是前端工程师的工作，而是需要所有Web开发者协作完成。在实际工作中，如果没有人关注Web性能，那么，不管我们作为Web开发者的哪种角色都应该挺身而出勇于担当，不仅要担当建设高速网站的责任，还要担当Web性能优化的布道义务，团结一切可以团结的力量。这是我们所有Web开发者的使命。在口碑网我们已经开始这样做了，前端工程师与对此有兴趣的后端工程师和产品经理一起组建了一个虚拟的Web性能优化团队，在完成工作之余，一起学习、研究、分享、布道和推动性能优化项目。虽然刚刚开始，但是已经有了一些令人欣喜的成果，这就是团结的力量。

本书由口碑网前端团队的鄢学鹍（三七）、郑旭东（正旭）、刘志涛（钨龙）、崔明达（灵佑）和姜凡（展炎）协作译成。翻译的过程也是自我学习、应用实践和总结提升的过程，我们深感本书的博大精深，同时也感到自己知识面的浅薄狭窄。我们把学习和实践本书思想及方法过程中收获的心得和相关资料作为译注补充在译文中，希望会对大家有所帮助。我们深信学习本书正是学习大牛思想、提升专业技能的最好途径之一，把它的精华最精确地传递给每位读者是我们现在的想法和最大动力。

感谢博文视点引进如此高品质的图书，这让中国的Web开发者可以从中受益，进而为更多用户提供更快速的Web使用体验。除了封面上列出的译者外，还有很多人为翻译这本书倾注了智慧和汗水。编辑徐定翔老师，包容了我们交稿的一次次延期，正是由于他的信任、帮助、支持和耐心指导才让我们能有这样一次边学习、边成长、边共享的宝贵经历。编辑白爱萍老师负责译稿的统稿编加，她的专业、仔细和辛勤工作保证了我们阅读本书时的良好体验。可爱的同事林枝萍（般若）、高嘉峻（伯灵）、全鑫（泉心）、闻明（阿苏）、沙峰（善朋）、曾焕数（合沙）、王维锋（元天）、严斌锋（邦彦）、何莹莹（冰浠）、周炼（灵落）等，给了我们热情的建议和细心的校对，有效地提升了本书的品质。要特别感谢淘宝网前端团队的赵泽欣（小马）、王保平（玉伯）和郑叶飞（圆心）3位同学，在百忙之中帮我们校对重要章节，解决疑难问题。如果没有家人和同伴的支持，是很难做好翻译的，在此向所有关心和支持我们的朋友表示衷心的感谢！

口碑网前端团队
三七正旭钨龙灵佑展炎
2010.02.25 于杭州

样章等相关信息

样章：
1. 第1章，理解Ajax性能，Douglas Crockford
2. 第3章，拆分初始化负载，Steve Souders
任何交流、建议、批评和指正请写信给kavenyan@gmail.com
购买《高性能网站建设进阶指南》
《高性能网站建设进阶指南》目录表

豆瓣上的《高性能网站建设进阶指南》
封面：

前端在D2的成长中蜕变

秦歌 — Fri, 25 Dec 2009 16:29:02 +0000

蜕变

我确信第四届D2标志着中国前端经过四年的成长正在蜕变中。

论坛主题涉及前端架构、框架、安全、性能、自动化和RIA大型应用，如果仔细地深入主题，你就会发现它们每个都直接和一个或多个服务成千上万人的互联网产品直接相关。我们的前端论坛不再仅仅是交流具体的某项技能或团队协作的方式，更多是和中国最流行的大型互联网产品的实践结合起来，共享其思考、探索、权衡和最佳实践。这些内容的出现暗示着前端行业的规模显现和逐步成熟。
500人的气场，让这个没有暖气的会场热力肆意。我看到大部分中国优秀的互联网公司都出钱让其前端工程师来参加这次交流，毫无疑问这些公司重视前端技术关注前端人才的培养，值得我们去信赖和施展自己的才华。更让我感动的是，很多人特别是在校学生自费来参加D2，这份内心的热情和执着应该正是前端蜕变的内在动力吧。
HTML、CSS、JavaScript的最大的共同特点是可以直接看到源码，它们的结合也覆盖了绝大部分的前端内容。这些很基础的东西真实地反应了互联网开放、共享和协作的特点，这也正是D2论坛要表达的。我们身在互联网中，立足于前端去开放、共享和协作，这正是互联网发展的趋势，也是我们快速成长的契机，这样的成长让我们有了从量到质的变化。

内容

在D2开始的前两天，我看到克军在Twitter上说“昨晚熬夜总算把d2的ppt整完了，彻底推翻原来准备的”，而实际上我也在最后三天结合同事的意见颠覆性地修改了后面的50%，我想其他嘉宾也会如此，这至少说明了大家的用心准备。实际上，那天内容让我收获良多。

大为的《模板语言与大前端》的确给我一个非常不错的视角，至少我感觉到这套思路应用在以处理数据为主要任务的产品（比如后台管理系统）是非常合适的，配合模版能大大的简化DOM操作，直接面向数据。至于大前端的定义，我想说现在的前端尚未处于它正确的位置上，从MVC的模型上讲前端应该包括整个View层和与之相关的Control层，从BS结构模型上讲，前端应该完成Browser能做的一切。其实从Google App Engine、YQL都能看到这样的迹象来。现在相当一部分本应该是前端工程师的工作是由后端工程师在做，这样导致这部分开发效率和质量都很低，但由于前端工程师的数量、前后端工程师的能力以及目前系统架构导致这部分的工作难以很快的划分清楚，但这肯定是一个发展趋势。
克军的《从YUI2到YUI3看前端的演变》直观而有趣的表达了前端技术的进步和思想的演变的过程。前端的演变也是伴随着互联网应用的深入，YUI3不仅提供一套非常好的方法，更重要的背后有一套指导我们进行前端快速开发的思想和保证前端质量的流程。我们当然不应该仅仅局限于YUI这个框架，框架的应用场景可能是有限的，但是其蕴含的思想却可以是无限的。另外，克军这句“好的设计驱动技术创新（Design） + 好的技术为设计提供无限的想象（Development）= D2”总结的很好。
焱鲲的《SilverlightQQ项目实践——Silverlight架构思考》，让我看到一个很Cool的产品。在一个成功的产品上面尝试新技术其实是要付出更多努力的，特别是台上包含深情的对微软的质问，让我很有感觉。
明城的《前端安全概览及防范》虽然很早已经听过大纲，但是这次听来依旧有不少心得。其实这场也应该来号召后端工程师听听，说实话在平时开发中我们在网站安全这个角度上考虑的不多，明城在前端的安全问题上走出了一大步。
我自己的《前端性能优化和自动化》其实都是平时学习和实战中很基础的东西。如果你善于利用互联网学习，前端性能优化的大部分内容都应该有所了解，后面自动化的实践是把性能优化的很多环节融入其中，最大可能的提升效率简化流程。前端自动化的处理思想，其实很早就有很多人在研究，但是结合公司的实际落地成为有效的工具进行大规模应用的并不多，因为这个过程不仅仅是性能优化、还有开发流程、前端架构、质量保证以及和如何打通与前端相关的所有角色等等问题。口碑前端团队已经应用这套思路很长时间了，我们边持续改进也边享受成果。在这个过程中最重要的是思想和人。
Show阶段，我必须要为阿里巴巴中文站和日文站的两位同学鼓掌，愿意站在D2的讲台上分享自己的感受非常值得鼓励。hax和army的代码性能PK注定会成为大家眼中的经典，虽然是小小的代码高亮显示，但那种为质量和速度而努力的比拼和较量正是我们心中永不熄灭的激情。
其实除了讲台上的内容之外，这么多全国各地的前端相聚在一起，是一个非常难得的交流机会。纵然很多都是短短的几句话或者一群人杂聊，但相当多的话题都让人兴致勃勃浮想联翩。我很享受这种感觉。

会议

4月份的D2操办因H1N1而打乱，使我们这次无法现场感受Douglas Crockford和Bill Scott的演讲，但之所以赶到2009年末还要继续，就是因为前端分享交流的机会太少了，这正是D2要做的。这次我全程参入了第4届D2的组织，深知操作一次大型活动的不容易。非常感谢阿里巴巴的主办，感谢组委会和所有志愿者精心的准备和无私的付出。
这次会议在D2历史上或许是把大会场形式办到了极致，随着互联网和前端的发展，肯定会有更多的人要参入D2，也会有更多的话题可以分享，所以下一次D2或许能分成几个平行的专题，每个专题一个会场有若干个主题组成，每个主题的时间更长一些，主题后的交流时间也更长一些。

每一次的D2都能带来很多思考和思想上的冲击，现在是边消化边期待下一届D2的时候了。

第4届D2前端技术论坛开始报名

秦歌 — Sat, 05 Dec 2009 08:51:22 +0000

2005年前端工程师的职位开始在中国出现，2007年第一届D2前端技术论坛在杭州举行，从此D2伴随着中国的前端一起成长，从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。

在D2上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想，现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是D2想告诉你的。

本届主题：蜕变·成长
论坛时间：2009年12月19日(星期六)
论坛地点：杭州市滨江区网商路699号, 阿里巴巴B2B园区（地图）
举办单位：阿里巴巴
特别致谢：CSDN、JavaEye、谋智网络、百度、豆瓣、华章图书、口碑网、蓝色理想、腾讯网、
　　　　　图灵教育、淘宝网、支付宝。
官网地址：d2forum.org
推广视频：http://v.youku.com/v_show/id_XMTM2NDI0MDU2.html
报名地址：http://www.d2forum.org/d2/4/sign_up.html（截止时间：2009.12.14 0:0:0）

日程安排：

时间	主题	嘉宾
08:45 – 09:15	入场
09:15 – 10:15	《模板语言与大前端》	金大为（百度）
10:30 – 11:30	《从YUI2到YUI3看前端的演变》	张克军（豆瓣）
11:30 – 13:00	午饭/休息/参观（阿里巴巴免费提供午餐）
13:00 – 14:00	《SilverlightQQ项目实践——Silverlight架构思考》	甄焱鲲（腾讯）
14:15 – 15:15	《前端安全概览及防范》	吕峰军（淘宝）
15:30 – 16:30	《前端性能优化与自动化》	鄢学鵾（口碑）
16:30 – 18:00	交流互动

注意：以上安排可能会根据具体情况进行一些补充与修改。

ps，口碑办公区张贴的第四届D2宣传海报

第二届D2见闻和随想

秦歌 — Sun, 27 Apr 2008 18:09:34 +0000

这个周末回京参加了期待已久的第二届D2前端技术论坛，见到众多的前端同行，更聆听了几场高质量的讲演，收获良多。讲演的资料整理后会在第二届D2前端技术论坛的官网上提供下载，同时也会提供会议视频，强烈推荐前端工程师关注。

周爱民的讲演“前端设计与开发的基本模式”，看起来很丰富，很多模式或理念听起来也蛮有争议，避免不了空和虚，但我不能不承认他提供了很多我有兴趣但尚未涉及东西，这些给了我新的视角。
黄继佳的讲演“Silverlight应用”，虽然很高兴他能来参加和支持D2，幻灯片也很cool，但我强烈的感觉这是一个很纯正的Silverlight的产品推广，我不是太喜欢。
Hedger Wang的讲演“Enterprise Ajax in PHP”，是这次D2的精华。他提出管理Ajax在企业级应用的设计模式，很多正是我日常开发中遇到，比如他讲到的映射，我也曾经做过类似的解决方案，比如他讲到的对多次同一请求的管理，我也曾思考过，但那往往是一个个独立的小点，这次讲演终于让我有了从点到线到面的感觉。他的讲演也准备的相当好，既有总结，又有代码，同时利用生活中的例子来说明原理，想听不明白都不行。我不需要如何得称赞hedger的讲演，如果你的开发涉及到Ajax，那么你就应该去看看他的讲演。ps，祝他杭州玩的开心。
Nate Koechly的讲演“Enhanceing Web Sites With The YUI Library”(English)”，作为YUI开发的核心成员，这次讲演虽然有点推广YUI的意味（在此有近一年应用YUI经验的我也强烈推荐YUI），但是仅仅从他幻灯片上就可以看出他事先的准备和用心，甚至他表达出了要学习汉语的意愿。但很遗憾的是，由于语言的原因，这次没有能充分的从Nate身上获取更多的更深的东西，虽然有hedger义务做翻译，虽然对nate的提问是最多的。
章亦春的讲演“Nifty web apps on an OpenResty”，讲的很有激情，也给出了一个新的Web OS，作为一个视角是一个很棒的东西，但是作为我个人来讲我并不赞同这个思路，我一直认为让一门语言处于它最适当的位置才是王道，就像语义化设计一样，应该用合适的标签来组织合适的数据。虽然章亦春提到了不应该对Javascript滥用，但是很遗憾的是我感觉这就是一种滥用。
案例分享阶段，贤安的“如何写一个富文本编辑器”，小马的“前端开发工具介绍”，一位仁兄（不好意思，记不起来名字）的“用Adobe Air开发IM”，都很有意思，这些很务实的小分享越多越好，因为每个人的心得体会小窍门汇聚在一起就有了越来越顺畅的前端开发。

第二届D2已经结束，第三届目前还没有明确的主办方（有兴趣请看如何申办D2），我的一些想法和建议如下：

主办D2是需要费用的，所以建议下一次D2可以有正式的赞助商和门票，这将能保证D2更好的运作。
不少人对我说互动不够，但是由于演讲本身就是一对多的，所以注定了互动是有限度的。建议通过在午餐和晚餐时话题分桌，一边吃，一边彼此认识，一边圆桌会议。
这次D2已经很务实了，下一次希望更务实。可以提前征集大家期望的讲演内容，可以参考大家主题邀请演讲嘉宾。同样也可以提前搜集分享案例，更好的更深入的组织分享。我期望下一次D2能遇到的内容：
1. 语义化的HTML。这是一个最基础的东西，也将是一个巨大的挑战。
2. Firebug实战。虽然大家开发基本上离不开它，但是我总感觉并没有充分的利用它，每一个小技巧都可以让我们进步。
3. 整站的CSS管理。这肯定是一个百花齐放的问题。
4. 高性能的WEB页面。Yahoo的preformance列了34条，但是我们的实战呢？
5. 前端工程师如何推动整个项目的设计和开发流程？这就是需要实践+经验+效果。

中国雅虎主办第二届D2前端开发论坛

坐着听讲演的开发者。由于2008的原因，北京的会议室不是特别好找，这次的会议室过于细长，hedger首先坐在了地上，并且号召大家都这么做，很多年没有坐在地上了，感觉不错。

Nate正在开讲，首先拿出相机拍一下听讲者。他的幻灯片开始部分用了中文，是他临时学的，拿到他名片的朋友也会发现，有一面是简体中文的。

Nate讲演时发现的一个提示站点是否使用YUI的小工具。在他的演讲过程中，列出了当前哪些站点使用了YUI，估计都是用这个小工具挖掘的。

hedger演讲中…

部分现场的工作人员，我的同事们