John Resig和Nicholas C. Zakas这场jQuery vs. YUI的辩论，其中最精彩的看点就是他们对于怎么建设、经营一个开源项目的鲜明观点。 关于他们讨论的详细内容: John: http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc/ Zakas: http://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/ 淘宝李晶同学的翻译：http://ued.taobao.com/blog/2010/11/06/yui3-vs-jquery/ jQuery是一个非常成功的开源项目，John观点中透露了jQuery成功的关键：简单。从代码风格到文档，无一不秉承这一鲜明宗旨。jQuery就好像是一部卖座的商业片，而YUI更像一部有内涵的文艺片。我这么说并不是鄙视商业片，文艺片也有烂片，商业片也有>经典，仅仅是套路不同而已。 用过jQuery会觉得它真的很好用，提供的API很sexy。比如我很爱它的那组对象遍历方法，非常灵活。 用YUI的感受是很有范儿。YUI很有java精神，很讲究代码组织、结构和模式。 在中小团队对人的要求是一专多能，前后端的工程师，甚至产品经理和设计师都要或多或少的写点JS。但在大团队，角色划分非常清晰，只有前端工程师写JS。显然，jQuery的易学易用特点很适合中小团队，相反，YUI过强的语言性制造了学习门槛。而在更大团队中，需要一整套更完整且严谨的技术体系，来保证协作开发，保证代码的质量和维护成本等等，学习成本相比变次要了。YUI更早的提供单元测试(YUITest)，生成文档(YUIDoc)，自动化编译(YUI Build)等工具，在代码组织方面有统一的widget框架，完整的模块管理，插件机制等等。这些都是大团队开发更需要的。 jQuery秉承平民主义，人人都可以写JS。而YUI更强调专业性，凸显专业前端工程师的角色。就像有些电影是拍给大众看的，有些是拍给特定群体看的。就像韩寒评价左小诅咒是“影响艺术家的艺术家”。我从YUI中，学到很多很多东西，尤其是理念上的。我经常说，我现在是用YUI的理念用jQuery。 “竞争”一词不应该用在开源项目之间。开源世界里不存在一方压倒另一方，它们都是在完善前端技术。至少在我看来，这些都是构 建我心目中一个完整的开放的前端技术体系的一颗棋子。一个专业的前端工程师，显然也不能是一个jQuery工程师，或YUI工程师。 一个开源项目背后，究竟是一个人，还是一个团队，还是一家公司真的并不重要，本质上都是一样的。公司没落，人还在嘛。它只要遵守开源协议就行了。 开源项目是否以追求流行为目的？开源项目怎样保证贡献者代码的品质？商业公司和开源项目之间的关系？……这些都是从文章中，包括国内几位同行的评论中，引发的思考： Dreamer: http://www.zhuoqun.net/html/y2010/1561.html 玉伯: http://lifesinger.org/blog/2010/11/jquery-yui-kissy/

如果要评2010最牛逼的网站改版，除了豆瓣就是Twitter了（开个玩笑）。那天看了新版twitter的介绍视频，相当兴奋，那种感觉就像04年看到gmail。面对未知的新时代，一部分人在畅想，一部分人在抵触，只有小部分人在行动。Twitter很快交出了他们的答卷。 今天看到Twitter官方发表的博文“The Tech Behind the New Twitter.com”，总结了新版twitter背后的技术，值得一读。（下面的内容不是翻译，是我的理解） API客户端 新版背后的一个重要的架构上的改变是像其它第三方客户端一样，Twitter自己也开始基于API开发，唯一不同是他们可以使用更多资源。同时对访问API做了诸多优化，原文提到的“highly optimized JSON fragment cache”。 评论：这种方式是很多技术团队都想实现的，但碍于原有架构的历史问题，下不了决心彻底改变它。但未来要满足各种终端上各种形式应用的开发需求，这种架构是最灵活的。 The Javascript API 对应后端的API架构，前端自然需要一个很给力的Javascript库实现和后端的数据交互。Twitter内部用到一个库叫@anywhere (http://platform.twitter.com/js-api.html)，它提供的功能: 1. 负责和API交换数据。文档里可以看到提供了丰富的接囗。 2. 提供一个客户端的缓存策略（保存在本地的内存和localStorage中）。@ded不久前写的“JavaScript Cache Provider”其实透露了一些细节。 3. 提供一个事件通知机制，当UI发生变化，相应处理组件能够立即响应。 评论：从中可以看到Twitter前端架构的设计思路，跟后端充分对接，建立业务级的通用接囗层，提供通用处理机制解藕，保持代码的模块化。这个路子很对，很值得借鉴。 页面管理 新版的一个项目目标就是让页面导航更简单更快。它是利用URL hash建立一套浏览器端的页面路由系统。这个具体要等到用上新版后看一看。 评论：像GMail那种，用URL hash做页面切换，管理起来还是很复杂的。等用上新版后要好好分析一下代码。 渲染堆栈(The Rendering Stack) 新版Twitter的页面都是在前端渲染的，但在不支持Javascript的情况下，后端也需要一个渲染系统。他们前后端用的模板系统都是Mustache，这样前后端可以保持一致，利用Mustache将API对象转成HTML代码。另外，针对DOM操作还做了诸多优化，如事件处理都是用事件代理机制实现，提高组件的重用性，尽可能减小repaint提高页面渲染性能等。 评化：Mustache是开源的模板系统，支持各种语言。我原来认为它有点重，并没有在项目中用过它。但如果真要做一个所有页面切换都是Ajax的应用，Mustache是首选。 内联媒体（Inline Media） 新版Twitter整合了很多第三方内容，从URL中判断如果是像kiva，vimeo这样的合作方，会利用基于oEmbed标准的JSON-P方式，从合作方的接囗中抓取内容。如果判断是来自TwitPic的图片或来自Youtube的视频，就直接显示出来。从视频中可以看到，交互方式很酷。 开源 Twitter的前端开发大量用到开源技术，像jQuery, Mustache, LABjs, Modernizr和大量jQuery插件。这么做的好处是一方面可以将重心放在前端应用的创新上，另一方面对开源社区的发展也是一种推动。自己在项目中积累的一些技术也会开源。 评论：我非常赞同这样。不要重复造轮子，尤其像浏览器级的基础功能库，jQuery，YUI已经做的很成熟了，需要做的应该是在没有或没有成熟的开源技术解决的领域上，通常更多在应用层面上需要建立适合自己产品的各种功能库和框架机制。 Twitter前端团队成员，可以关注一下： Ben Cherry @bcherry http://www.adequatelygood.com/ Marcus Phillips @mracus [...]

这次交流会1周年活动，酷6出场地，盛大出钱，办得很奢华，有公司赞助就是不一样啊。酷6的办公环境不错，有空中花园，有草坪，有美女，随处可以吸烟。开场是酷6创始人李善友讲话，感觉朴实、友善和谦逊。今天讨论的话题是：移动互联网时代的前端工程师定位。我算是抛砖引玉带出今天的话题，后面的讨论越来越high，气氛相当热烈。 一些私下聊天内容: 百度正在加大前端研发力量，在新领域上正做更多实践。盛大重视技术社区的推广开始正式设立技术布道师的角色，这在国内算首家吧。阿木杉所带的新浪微博产品设计中心团队，有机会跟他们交流一下。新浪对前端技术的重视程度，超乎我的想象…… 交流会1年来，能够一期一期顺利的举办，而且规模越来越大，离不开一个人幕后辛勤的工作，就是裕波，必须要感谢一下他，同时也要感谢交流会所有无私奉献的工作人员。

我想这是首次提出“前端基础架构”的概念吧，算是抛砖引玉，希望以后能够看到更多更深入的分享。 前端基础架构是前端团队运行所必需的规范、工具和系统的体系。一个团队要高效的运行，并且能够创造更多价值，首先要做的就是建立和完善前端基础架构。 slides: http://sn.im/2010_fe_infrastructure (建议用chrome/safari浏览)

———————————————- 　　 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 　　 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。 　　如何才能做得更好呢？ 　　 第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。 　　 第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。 　　 第三，必须学会运用各种工具进行辅助开发。 　　 第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。 　　 可见，看似简单的网页制作，如果要做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。 　　 目前市面上关于Web前端开发的书主要都是针对单一技术的，《编写高质量代码》与这些书有着本质的区别。它主要想实现两个目标：第一，为不太有经验的 Web前端开发工程师建立大局观，让他们真正了解和理解这个职业；第二，帮助有一定Web前端开发经验的工程师修炼内功，通过编写高质量的代码来提高前端代码的可维护性。这是很多前端开发工程师感兴趣的内容。 　　 《编写高质量代码》的前两章讨论了网站重构和团队合作，这是很有必要的。网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质应该是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。建立了这种大局观后，学习具体技术的思路就更清晰了。 　　 代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。《编写高质量代码》中包含着很多开发的思想和经验，都是在长期的开发实践中积累下来的，不同水平的Web前端工程师都会从中获得启发。 ——————————————————————————– 说明：推荐序最后对我的标注“著名xxx”，编辑加的有点不合适，大家尽可以忽略。阿当牺牲一年多的休息时间，一个字一个字的完成本书，精神可嘉。另一个意义上，阿当也代表我们这一代前端工作者（05年前参加工作且一直乐此不疲的从事前端工作，我称之为中国的第一代前端工程师了以安慰）所做的一个很好的阶段性总结。恭喜阿当！同时也感谢阿当！

当前端工程师拿到一个设计稿，如： 通常希望设计师在设计稿上标注必要的UI规格，设计师从视觉的角度，通常会这么标： 这样的标注其实对前端工程师帮助不大，还要再进一步翻译成更合理的（如下图）。所以为什么web设计师要通晓CSS，并不是让设计师写CSS，而是理解UI的显示原理，才能产出更合理的设计。如果设计师能直接这么标注，开发起来就太舒服了。 框框标出的是对象。关于html设计模式的话题，我会在7/17webrebuild的活动上说一说。 ———————-补充——————— 1. 第三张图出来，html结构也就出来了 2. 注意第三张图的框不是随意画的，是在行高1.5的前提下真实的边缘 3. 本例设计师在理解line-height，盒模型，collapsing margin，浮动的情况下，设计时留白才能合理 4. 设计师的设计思路和工程师的开发思路是一致的 5. 设计师和工程师考虑的都是：结构＋内容＋样式 如果能够保持同一思路，即按同一模式设计和开发，那么整体效率和质量都可以得到很大提升。 这一点整个团队达成一致后，才能开展模块化设计和开发。 ———————-再次补充——————— 看来引起不少争议，再进一步阐述我的观点： 1. 在设计稿上用css描述规格，就好比敏捷开发中用伪代码先把逻辑写出来一样 2. 设计师先有box的概念，把页面中的对象（元素）用框界定出来，再定义对象之间的留白关系 3. 用伪css描述更精确。标注的关键是那个值，3图和2图的值完全不同，而3图是根据显示原理标的更准确，比如3图中margin-left:62px, 左边小图的宽度有一定灵活变化的余地，不仅仅是图片距右边文字的间距是 14px。 2图会导致多种实现可能，经验丰富的会考虑结构的灵活，经验欠缺的会容易把结构定的很死。在html开发上应该追求的是一致性，质量平均的产出。 对于Millettang回复中说的，要知道前端工程师的价值不仅仅是页面的实现，那样只是设计师的助手而已。对于html/css开发来说，应该可以快速的套用模式，快速的把伪css转成产品级的css，产出质量平均，风格一致，高度可维护的html，然后把更多精力放在javascript开发，包括用css3增强等方面上。 第2张图是最不可取的，完全从平面设计的角度出发。Jsuper不要学这个。 “Design is about how it works, not just how it looks. ”

刚刚看了蔡学镛的《分手时刻》，很有感触。原文： http://jerrylovesrebol.blogspot.com/2010/06/blog-post_24.html 公司和员工是双向考核，公司考核员工是因为付出金钱给员工，员工考核公司是因为付出智慧给公司。前者理直气壮，后者为什么不呢？真正的铁饭碗不是某个公司给的，而是自己打造的。商业社会的残酷，也给更多“职业工作者”更多的机会，现在有职业经理人，职业杀手，也应该有更多的职业工程师，职业前端工程师，职业设计师，他们的身价就是他们的专业性，每个铁饭碗都是由专业、经验、能力…铸就的。追求这个，远比追求更高职位和名利更长久。 更没必要刻意用某种企业文化给员工洗脑，企图培养员工的ownership。责任心来自专业的态度，公司为员工提供一个发挥专长和专业成长的平台，一切都会变得顺其自然。 不要把自己封闭在一个公司的小世界里。多走出去交流，保持学习，坚持做正确的事，客观的对自己的能力做出评估并渐进增强。 其实在今年的一次交流活动中，我也表达过类似的观点，如果在专业的问题上不能达成有效沟通n次，或者完全不能做正确的事，那么就果断的分手。