Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
跟乐高学模块设计
Search
Max
February 06, 2013
Programming
2
130
跟乐高学模块设计
跟乐高学模块设计
Max
February 06, 2013
Tweet
Share
More Decks by Max
See All by Max
分层语义化模板实现
maxlee
0
170
让前端开发更高效
maxlee
1
180
如何发现前端性能问题
maxlee
4
160
七年很痒
maxlee
1
130
从YUI2到YUI3看前端的演变
maxlee
0
130
Qzone-前端-CPU-性能优化
maxlee
0
170
更好的文件组织
maxlee
0
87
Mobile App Action design
maxlee
1
92
关于数据分析
maxlee
0
140
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
130
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
310
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
610
Going beyond Apache Parquet's default settings
xhochy
0
130
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
390
AmperとFleetを使ったAndroidアプリ
yoppie
0
260
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
VS Code をプロダクトにどう取り込むか
onomax
1
730
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
490
SIMD Parallel Programming with the Vector API
josepaumard
0
230
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Being A Developer After 40
akosma
66
580k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Music & Morning Musume
bryan
41
5.6k
Automating Front-end Workflow
addyosmani
1357
200k
For a Future-Friendly Web
brad_frost
172
9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Code Review Best Practice
trishagee
56
15k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Designing for humans not robots
tammielis
247
25k
Transcript
跟乐⾼高学模块设计
乐⾼高的⽆无限可能 • 如果你有六块八颗凸起的长方体LEGO积木,这六块积木 可以砌出102,981,500多款组合。
乐⾼高不只是⼩小孩⼦子的玩具 • 有趣视频
乐⾼高有哪些特点? • 简单,那怕是猴子也能学会。 • 一致,不同时期生产,不同地区生产的乐高还是能够很好 的组合在一起 • 复用,无论你是想做一艘船,一架飞机还是一座城堡,你 都可以用相同的零件组合。
乐⾼高和软件⼯工程的交集 • Cluelessness 无绪 o 即使对事物内在本质并不清楚,也可以很好的使用它 o 软件工程中的无绪是指:程序员无绪深入了解很多内容,也可以写出好的代码。
乐⾼高和jQuery的共性 • 门槛低,使用者无需要了解jQuery的核心工作方式,就能 写出很好的代码。 • jQuery的链式结构就像乐高一样可以实现不同模块间的对 接。 • 人性化的设计,构造一个对象并不是从最精简,最高效出 发,却是从最适用,最容易被理解出发。
简单易⽤用是如何征服世界 口径 空枪重 初速 市场占有率 M16 5.56毫米 2.7 kg 975
m/s AK-‐‑47 7.62毫米 4.3千克 710 m/s 无可争议的 No.1 体积 性能结果 市场占有率 jQuery 1.4.1 23.82KB 48 ms 74.7% Mootools 1.22 20.47KB 47 ms 13.1% Prototype 1.6 29.85KB 36 ms 12.4% Dojo 1.5 30.38KB 19 ms 0.4% 想了解更多框架的性能比较请看:hGp://dante.dojotoolkit.org/taskspeed
残酷的现实 • 开发过程是一场与时间的赛跑 • 维护是一个越陷越深的泥潭 • 迭代是一个垃圾场
简单才好⽤用 • 当你今天接到需求,明天就要上线时,你不想去使用一个 你从来没用过的组件,因为往往调试的时间比开发的时间 还长。 • 所以在设计组件的时候,不要指望通过文档说明来弥补你 的API丑陋。
简单才好⽤用 • 你要有所准备,因为你不知道为你接手维护代码的是不是 一个知道你底细的暴力狂。不要指望交接文档有人看,没 人相信这是最新的。 • 所以好的代码,好的组件本身就应该如同文档,清晰的结 构、合理的抽象、有价值的注释一个都不能少。
简单才好⽤用 • 我相信一段代码在刚开始的时候都是清晰可读的,但是迭 代会让它变成一个东西放的乱七八糟的抽屉,一旦你失去 控制,这段代码将会变成一个恐怖的地下室,无人踏足。 • 所以在设计之初要有预见性,准备好后续的扩展,与其花 时间和别人一次又一次的解释,还不如花时间重构一次。
⼀一致才可靠 • 没有什么比更新核心组件更让人担心了,更新后的组件是 否会引发新的问题?是不是满足各个场景的需要? • 所以向前兼容是必须的,内聚、解耦、容错处理,不仅仅 提高了代码的安全性,还会让人留下可靠的印象。
⼀一致才可靠 • 有一个问题往往被忽略,底层技术是否一致,可以想象木 头做的lego和塑料做的lego虽然尺寸一致,但是热胀冷 缩比不一致其结合必定是不稳的。 • 一致的抽象粒度,一致的API设计,一致的数据格式,一 致的返回约定,才能有可靠的结合。
复⽤用才节省 • 流量是成本,开发量是成本,学习时间是成本。跨页面无 法被缓存,重复开发类似功能,过渡期间的临时解决方案 都是一种浪费。 • 所以我们需要跨页面的缓存复用,节省流量提高访问速度, 需要适应不同场景的组件复用,减少重复开发量减少用户 学习成本,需要API层面的复用,每个组件都应该具备一 些通用的API,已减少开发者的使用门槛。
前端的展望 • 模块化JS,按需加载 • BigPipe模式 • 代码规范之上的组件开发约定
模块化JS加载 • 谁在做? o RequireJs o YUI Loader o LabJs
o RunJs o SeeJs o DoJs
模块化JS加载 • 颗粒更小 • 维护更方便 • 更适合团队开发。
有损的BigPipe • BigPipe的最大的作用是用户端感知速度更快
来⾃自新浪的⼀一组数据
来⾃自淘宝的⼀一组数据
有损的BigPipe • Facebook的BigPipe由前后端共同完成,模式难以复制。 而国内使用BigPipe的主要有两种方式 o 服务器配置 combo o 纯前端BigPipe •
纯前端BigPipe有这样一个问题:连接数增加。带来的问 题是服务器CPU占用高,容易出现队列堵塞。
有损的BigPipe • 基于现状分析,服务器CPU占用约20%,可见瓶颈并非在 此,特别是类似商品详情这种非常重的页面,页面打开速 度是网站的命脉,我认为这是值得的。
Q & A
参考⽂文档 • http://hax.github.com/2011/js_api_design/ 关于JavaScript库和框架的 API设计的思考两三例 • http://blog.sina.com.cn/s/blog_482611850100xpb1.html 从微博的改版 谈网页重构——bigpipe中的页面构建优化 •
http://www.qianduan.net/particles-with-in-js-management-load- your-javascript-module.html用In.js颗粒化管理、加载你的Javascript模块 • http://ued.taobao.com/blog/2011/05/13/2011-taobao-lottery-index- dev/ 2011彩票首页开发实践 • http://www.infoq.com/cn/presentations/hjp-infoq-salon哪儿网的 JavaScript模块化之路 • http://javascript.blogcn.com/articles/%E4%BB%8E%E4%B9%90%E9%AB %98%E4%B8%8A%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB %A5%E5%AD%A6%E5%88%B0%E4%BB%80%E4%B9%88%EF%BC%9F.html 从乐高上我们可以学到什么?