开放式类库的构建

开放式前端类库的构建王保平

Sunday, July 17, 2011

Who am I ?

• 淘宝花名：玉伯• Frank Wang / lifesinger

• 王保平 / 射雕

• http://lifesinger.wordpress.com/


http://lifesinger.wordpress.com

http://lifesinger.wordpress.com

一、类库的两种风格


大教堂式风格• 梦想通过一个类库解决类库的所有问题• 大而全，代码质量一致• 文档丰富，社区成熟• 抽象层次多，重复代码少• 更新稳重、缓慢• 排他性


集市风格

• 尝试通过不同类库解决不同问题• 小巧专注，代码质量有好有坏• 文档用心，社区活跃• 蓬勃发展，快速更新• 大部分能组合使用，和谐共处


http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2Cdojo




http://www.google.com/trends?q=backbone%2Czepto%2Clabjs%2Cunderscore%2Cmustache%2Cmodernize&ctab=0&geo=all&date=all&sort=0






二、我们需要什么？


基础功能：DOM、Event、Ajax...

通用工具：Validator、Storage、Template...

常用组件：Calendar、Tabs、Dialog...

应用框架：MVC、Unit Testing、Module Loader...


http://addyosmani.com/resources/toolschart/chart.pdf




三、淘宝的选择


2008


2009


2008 - 2009• 主要使用 YUI2 base

• YUI 的组件特别是 UI 组件，体积太大，交互也不太符合国情

• 2009 年始，开始自主研发 suggest, kissy editor 等复杂组件

• 线上以 web pages 为主，比较简单


2010


2010• Yahoo 开始主推 YUI3

• YUI3 还不够成熟，组件更加庞大，在 IE6-7 下有性能隐患

• jQuery 发展迅猛，但难以入驻淘宝

• KISSY 逐步完善，开始有了 Core、Switchable、Calendar、AJBridge 等组件

• 线上开始出现 webww 等 web apps


KISSY

• 起初是个编辑器 KISSY Editor

• 核心部分，是 YUI2 与 jQuery 多夜情的产物

• 最有价值的部分是组件，是源自淘宝业务的需求


http://docs.kissyui.com/Sunday, July 17, 2011

http://docs.kissyui.com/

http://docs.kissyui.com/

四、我们究竟需要什么


解决业务问题技能成长

做酷且有趣的应用

自由的时间

领略业界前沿


解决业务问题


类库/框架的选择远不如我们设想中的重要，只要不是太烂，一般都能很好的满足公司的业务需求。


为什么还会出现这么多轮子？


...我的观点中，必须说明两点，工程师，从职业素养上来说，我们的价值就是“把一件事做得更好、更专业、更完美，优秀，及至无可挑剔”。这本身就是对我们而言最有意义的事情。如果没有这种心态，那根本就谈不上专业、职业，以及职业修养。

-- 愚公（周爱民）


自造轮子经常遇到的问题

代码的进化与维护

新组件的开发成本高

头疼的文档新人培训


类库的第三种风格


商场风格

不是集市

不是大教堂有门槛

品质保障开放式竞争


五、商城风格类库的构建


从脚本引入说起


CommonJS 的启示


在 JavaScript 中，有很多种方式来实现上面的功能。但是没有任何标准来规范如何实现。


• 已有的规范：ECMAScript, W3C，JSON...

• 未有的规范：Modules, Packages, JSGI, Promises...


• 马云：建立新商业文明• CommonJS: 构建 JavaScript 新生态圈


当 CommonJS 遭遇浏览器时

• 同步变异步• 跨域• 浏览器兼容性• 性能• ……


等待 or 前行？Sunday, July 17, 2011

SeaJS 之路


提供最基础的功能

规范最基本的约定

百花齐放优胜劣汰

丛林法则


基本理念

• 海纳百川、有容乃大• 保持简单、避免重复


世界上有很多聪明人，很多事情已经做得非常棒。有太多更需要投入的地方，的确不应该在别人已经做得很好的地方浪费时间了。

-- 大教堂与集市


module authoring format

module loader

...

biz mod a

biz mod b biz

mod c ...


• 一个文件是一个模块• require 引入依赖的模块

• exports 向外提供接口

• module 存储模块元信息


demo


业务需求

版本升级

组件增加

目标

时间

空间


路走对了，会有不少惊喜


在线本地调试


require(file.less)


require(file.coffee)


路走对了，就不怕远


FAQ

• Twitter: @lifesinger

• 新浪微博：@玉伯也叫射雕

• 阿里旺旺：玉伯• 最喜欢的：[email protected]


mailto:[email protected]

mailto:[email protected]

开放式类库的构建

Technology