View
2.414
Download
1
Category
Preview:
DESCRIPTION
Citation preview
开放式前端类库的构建王保平
Sunday, July 17, 2011
Who am I ?
• 淘宝花名：玉伯• Frank Wang / lifesinger
• 王保平 / 射雕
• http://lifesinger.wordpress.com/
Sunday, July 17, 2011
一、类库的两种风格
Sunday, July 17, 2011
Sunday, July 17, 2011
大教堂式风格• 梦想通过一个类库解决类库的所有问题• 大而全，代码质量一致• 文档丰富，社区成熟• 抽象层次多，重复代码少• 更新稳重、缓慢• 排他性
Sunday, July 17, 2011
Sunday, July 17, 2011
集市风格
• 尝试通过不同类库解决不同问题• 小巧专注，代码质量有好有坏• 文档用心，社区活跃• 蓬勃发展，快速更新• 大部分能组合使用，和谐共处
Sunday, July 17, 2011
http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2Cdojo
Sunday, July 17, 2011
http://www.google.com/trends?q=backbone%2Czepto%2Clabjs%2Cunderscore%2Cmustache%2Cmodernize&ctab=0&geo=all&date=all&sort=0
Sunday, July 17, 2011
二、我们需要什么？
Sunday, July 17, 2011
基础功能：DOM、Event、Ajax...
通用工具：Validator、Storage、Template...
常用组件：Calendar、Tabs、Dialog...
应用框架：MVC、Unit Testing、Module Loader...
Sunday, July 17, 2011
Sunday, July 17, 2011
Sunday, July 17, 2011
http://addyosmani.com/resources/toolschart/chart.pdf
Sunday, July 17, 2011
三、淘宝的选择
Sunday, July 17, 2011
2008
Sunday, July 17, 2011
2009
Sunday, July 17, 2011
2008 - 2009• 主要使用 YUI2 base
• YUI 的组件特别是 UI 组件，体积太大，交互也不太符合国情
• 2009 年始，开始自主研发 suggest, kissy editor 等复杂组件
• 线上以 web pages 为主，比较简单
Sunday, July 17, 2011
2010
Sunday, July 17, 2011
2010• Yahoo 开始主推 YUI3
• YUI3 还不够成熟，组件更加庞大，在 IE6-7 下有性能隐患
• jQuery 发展迅猛，但难以入驻淘宝
• KISSY 逐步完善，开始有了 Core、Switchable、Calendar、AJBridge 等组件
• 线上开始出现 webww 等 web apps
Sunday, July 17, 2011
KISSY
• 起初是个编辑器 KISSY Editor
• 核心部分，是 YUI2 与 jQuery 多夜情的产物
• 最有价值的部分是组件，是源自淘宝业务的需求
Sunday, July 17, 2011
四、我们究竟需要什么
Sunday, July 17, 2011
解决业务问题技能成长
做酷且有趣的应用
自由的时间
领略业界前沿
Sunday, July 17, 2011
解决业务问题
Sunday, July 17, 2011
类库/框架的选择远不如我们设想中的重要，只要不是太烂，一般都能很好的满足公司的业务需求。
Sunday, July 17, 2011
为什么还会出现这么多轮子？
Sunday, July 17, 2011
...我的观点中，必须说明两点，工程师，从职业素养上来说，我们的价值就是“把一件事做得更好、更专业、更完美，优秀，及至无可挑剔”。这本身就是对我们而言最有意义的事情。如果没有这种心态，那根本就谈不上专业、职业，以及职业修养。
-- 愚公（周爱民）
Sunday, July 17, 2011
自造轮子经常遇到的问题
代码的进化与维护
新组件的开发成本高
头疼的文档 新人培训
Sunday, July 17, 2011
类库的第三种风格
Sunday, July 17, 2011
Sunday, July 17, 2011
Sunday, July 17, 2011
商场风格
不是集市
不是大教堂有门槛
品质保障开放式竞争
Sunday, July 17, 2011
五、商城风格类库的构建
Sunday, July 17, 2011
从脚本引入说起
Sunday, July 17, 2011
Sunday, July 17, 2011
Sunday, July 17, 2011
Sunday, July 17, 2011
CommonJS 的启示
Sunday, July 17, 2011
在 JavaScript 中，有很多种方式来实现上面的功能。但是没有任何标准来规范如何实现。
Sunday, July 17, 2011
• 已有的规范：ECMAScript, W3C，JSON...
• 未有的规范：Modules, Packages, JSGI, Promises...
Sunday, July 17, 2011
• 马云：建立新商业文明• CommonJS: 构建 JavaScript 新生态圈
Sunday, July 17, 2011
Sunday, July 17, 2011
当 CommonJS 遭遇浏览器时
• 同步变异步• 跨域• 浏览器兼容性• 性能• ……
Sunday, July 17, 2011
等待 or 前行？Sunday, July 17, 2011
SeaJS 之路
Sunday, July 17, 2011
提供最基础的功能
规范最基本的约定
百花齐放 优胜劣汰
丛林法则
Sunday, July 17, 2011
基本理念
• 海纳百川、有容乃大• 保持简单、避免重复
Sunday, July 17, 2011
世界上有很多聪明人，很多事情已经做得非常棒。有太多更需要投入的地方，的确不应该在别人已经做得很好的地方浪费时间了。
-- 大教堂与集市
Sunday, July 17, 2011
module authoring format
module loader
...
biz mod a
biz mod b biz
mod c ...
Sunday, July 17, 2011
• 一个文件是一个模块• require 引入依赖的模块
• exports 向外提供接口
• module 存储模块元信息
Sunday, July 17, 2011
Sunday, July 17, 2011
Sunday, July 17, 2011
demo
Sunday, July 17, 2011
Sunday, July 17, 2011
Sunday, July 17, 2011
业务需求
版本升级
组件增加
目标
时间
空间
Sunday, July 17, 2011
路走对了，会有不少惊喜
Sunday, July 17, 2011
在线本地调试
Sunday, July 17, 2011
require(file.less)
Sunday, July 17, 2011
require(file.coffee)
Sunday, July 17, 2011
路走对了，就不怕远
Sunday, July 17, 2011
FAQ
• Twitter: @lifesinger
• 新浪微博：@玉伯也叫射雕
• 阿里旺旺：玉伯• 最喜欢的：lifesinger@gmail.com
Sunday, July 17, 2011
Recommended