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
ETao UX Magix and Brix
Search
limu
July 31, 2012
Technology
2
280
ETao UX Magix and Brix
Magix for OPOA and Brix for Components
limu
July 31, 2012
Tweet
Share
More Decks by limu
See All by limu
OPOA-in-Action
lenel
13
1.1k
Taobao-AD-JSBeacon-and-Creative-Optimize
lenel
2
290
KsLite-for-3rd-Part-Content-Develop
lenel
1
130
Other Decks in Technology
See All in Technology
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
890
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
200
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
いざ、BSC討伐の旅
nikinusu
2
780
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Designing Experiences People Love
moore
138
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Teambox: Starting and Learning
jrom
133
8.8k
Transcript
OPOA那些事儿 ⼀一淘UX 李牧
[email protected]
2012-7-7
⼀一淘UX前端两个建设中的项目 For OPOA Since 2011 @GitHub
For Components Since 2012 @GitHub
h;p://zuanshi.taobao.com (任意淘宝用户可访问) h;p://tanx.com 在复杂商业系统中的OPOA会多遇到哪些问题?
1.系统由非常多区块组成,如何管理这些区块? h;p://zuanshi.taobao.com/index.html#!/plan/ planmanage/
VOMTree记录Views逻辑层次关系 5
2.Hash变动如何通知到各个区块
MagixJS页面切换流程 当Hash发生改变,view会自外向内,响应和传递query 变化事件,这是一个捕获型事件,可以被打断. 7 Root View
View2 View1 View2_1 View3 View2_2
3.大量区块深层次嵌套,配置是否特别繁琐?
树状关系里每个节点只 需要管理好自身和自身 的直接子节点 只需在配置项中记录每 个逻辑页面的RootView 9
4.同一区域位置不变内容更迭频繁
View的容器 -‐-‐ VFrame 11 我们需要有View的容器,在页面中划出⼀一个逻辑区块, View可以装载到容器中,也可以卸载掉. 这就像页面中的iframe,通过切换src改变iframe内容. <iframe src="pagelocation?querystring"></iframe>
<vframe id='vc-nav' view_name="app/views/nav"/> 以整个页面的hash值作为每个mxvc的querystring
5.众多区块能否独立调试,多处重用?
VFrame和IFrame一样可以独立开发 13 以新增创意功能为例 独立使用此功能: h;p://zuanshi.taobao.com/index.html#!/board/boardhandle/ acXon=create
嵌入到计划创建流程中: h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/ 完全独立开发调试: h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/ __view__=app-‐views-‐board-‐boardhandle 我们只要强制指定RootView为VOMTree的某个View节点,就 可以只渲染这个节点为根的VOMTree的一颗子Tree
6.如何做到从任一URL进入系统,加载内容最 小化?
按需加载和预加载任务交给Loader 15 • h;p://zuanshi.taobao.com/index.html#!/board/boardhandle/ acXon=create • h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/
• h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/ __view__=app-‐views-‐board-‐boardhandle 每个View的相关JS,模板全部形成模块,有Loader根据URL按 需加载
7.如何控制单页应用内存使用?
拒绝Dom节点和JS对象循环引用 17 全局DataProxy对象 1 proxyObj1 2 proxyObj2 ... 3
proxyObj3 ... ... ... <div proxyindex="3"/> key1 jsObj1 key2 jsObj2 <div id="dv1"/> 参照jQuery.data的做法: $("#dv1").data(key1,jsObj1).data(key2,jsObj2); proxyindex="1" 通过为节点添加到expando字符串索引 指向全局DataProxy中的相应JS对象
<div proxyindex="1"/> 参照jQuery.data的另类事件代理 18 <div mxclick="listener1:arg1:...:argN:doDef:doBubble|listener2"/> <view onclick="..."> <ul>
<li mxclick="showAreaCode:010|isLocal">北京</li> <li mxclick="showAreaCode:021">上海</li> </ul> </view> myView.events = { click:{ showAreaCode : function(view,targetId,argsArr){...}, isLocal:function(view,targetId,argsArr){...} } } //内部保证listener接收到的参数view,targetId,argsArr为纯JS对象. 附加好处:节点上的事件⼀一目了然
8.页面改动频繁,组件如何自处?
h;p://zuanshi.taobao.com/index.html#!/reports/plan_realXme/ 将“注意XXYYZZ”信息加入到组件某个位置 一个最小的需求
引入模板引擎 如果组件完全有字符串拼接出来,“注意XXYYZZ”加 到哪里,哪里就要开一个配置项,积累下来组件配置 会一匹布那么长。 引入模板引擎,组件功能作用在模板上,可以在任意 位置加东西
9.模板类似HTML的静态文件,大系统一次性 写入<script type=‘tmpl’>不现实,如何即能方 便开发,又放在CDN上缓存?
预编译时解决问题 开发时: 通过XHR同域获取模板,格式缩进完美,Demo转化 为模板也非常容易。 上线时: 将模板转化为一个一行的长字符串,作为JS变量存储,
通过JSONP跨域获取
10.应用层框架能否独立与底层类库?
业务框架抽象类,部分方 法需要依赖底层类库实现 Loader适配器 业务框架实现类,会mix 到抽象类中形成完整类 打包编译工具
Kissy版本 SeaJS+ JQuery+ Backbone 版本 h;ps://github.com/limu/magix/tree/master/src
以上 以下 h$p://www.slideshare.net/leneli/magixjswebapp
11.当前我们的组件行为是作用在模板上的, 难道任何数据变化都需要全组件重新刷新?
12.只有NodeJS才能方便的将渲染从前台移动 到后台么?
13.组件系统如何做到面向未来可拆分?
等您来回答
关于我 李穆 花名: 李牧 邮箱:
[email protected]
博客: http://limu.iteye.com 微博: @lenel
进入阿里系⼀一直在广告线做前端 2007.01 雅虎 广告引擎团队 2007.05 阿里妈妈 广告引擎团队 2008.09 淘宝 广告技术部架构组 2011.06 ⼀一淘 UX北京团队 Velocity北京2010的分享:第三方广告代码稳定性和性能优化
Q&A
谢谢大家 Thank You