JS Library and Tangram      Introduction          liyubei@baidu.com                  2011-08-25
Outline● Why we need JavaScript Library● Comparison of JavaScript libraries● Tangram history● Tangram architecture● Tangra...
Why we need JavaScript LibraryWhats the issue it want to resolve?
Why we need JavaScript LibraryWhats the issue it want to resolve? 1. language enhancement      ○ klass/function      ○ arr...
Why we need JavaScript LibraryWhats the issue it want to resolve? 1. language enhancement 2. fix browser compatibility    ...
Comparison of JavaScript librariesWhy there are some many libraries (20+)?http://en.wikipedia.org/wiki/Comparison_of_JavaS...
Comparison of JavaScript librariesjQueryjQuery is a fast and concise JavaScript Library that simplifies HTML document trav...
Comparison of JavaScript librariesWhy there are some many libraries?http://en.wikipedia.org/wiki/Comparison_of_JavaScript_...
Comparison of JavaScript libraries (cont)Why we need our javascript library?
Comparison of JavaScript libraries (cont)Why we need our javascript library?The official statement 1. 不方便修改,扩展核心 2. 体积庞大 3...
Comparison of JavaScript libraries (cont)Why we need our javascript library?The official statement 1. 不方便修改,扩展核心 2. 体积庞大 3...
Comparison of JavaScript libraries (cont)So, how about Google?Micbael Bolin said in "Closure The Definitive Guide"    1. J...
Tangram history1. jslib (prototype) (http://cang.baidu.com)2. jsframework (http://frd.baidu.com)3. Fl (http://tieba.baidu....
Tangram architecture
Tangram base 1. ajax/                     1. fn/ 2. dom                       2. lang/ 3. element/                  3. obj...
Tangram base (cont)T.e(#header).  children().  on(click, function(){     alert(clicked);  });
Tangram componentvar CustomControl =  baidu.ui.createUI(function(options){     this.text = options.text || default text;  ...
Tangram component (cont)I need a simple dialog.You need a simple dialog with mask.how to meet this two requirement?
Tangram component (cont)I need a simple dialog.You need a simple dialog with mask.how to meet this two requirement?       ...
Tangram component (cont)behavior and addons.I///import baidu.ui.Dialog;You///import baidu.ui.Dialog;///import baidu.ui.Dia...
Tangram component (cont)baidu.ui.Base is an object, not an constructor.
Tangram development1. checkout the code from github.com2. hacking and testing3. fix code style4. launch code-review5. comm...
Advance usage1. code-search2. Ftangram    ○ best practice
Upcoming SlideShare
Loading in …5
×

Tangram

1,731 views

Published on

Tangram Introduction
http://tangram.baidu.com

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,731
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tangram

  1. 1. JS Library and Tangram Introduction liyubei@baidu.com 2011-08-25
  2. 2. Outline● Why we need JavaScript Library● Comparison of JavaScript libraries● Tangram history● Tangram architecture● Tangram development ○ demo● Advance usage ○ demo
  3. 3. Why we need JavaScript LibraryWhats the issue it want to resolve?
  4. 4. Why we need JavaScript LibraryWhats the issue it want to resolve? 1. language enhancement ○ klass/function ○ array ○ string ○ object ○ ...
  5. 5. Why we need JavaScript LibraryWhats the issue it want to resolve? 1. language enhancement 2. fix browser compatibility ○ DOM ○ Event ○ CSS ○ Network ○ Storage ○ ...
  6. 6. Comparison of JavaScript librariesWhy there are some many libraries (20+)?http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
  7. 7. Comparison of JavaScript librariesjQueryjQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling,animating, and Ajax interactions for rapid web development. jQuery is designed to change the way thatyou write JavaScript.YUIThe YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richlyinteractive web applications using techniques such as DOM scripting, DHTML and AJAX.PrototypePrototype is a JavaScript Framework that aims to ease development of dynamic web applications.ExtExt JS is a JavaScript library for building interactive web applications using techniques such as Ajax,DHTML and DOM scripting.DojoDojo saves you time, delivers powerful performance, and scales with your development process. It’s thetoolkit experienced developers turn to for building superior desktop and mobile web experiences.
  8. 8. Comparison of JavaScript librariesWhy there are some many libraries?http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworksWhat is the difference between them, what the similarities?
  9. 9. Comparison of JavaScript libraries (cont)Why we need our javascript library?
  10. 10. Comparison of JavaScript libraries (cont)Why we need our javascript library?The official statement 1. 不方便修改,扩展核心 2. 体积庞大 3. 执行效率 4. 不够协作开发
  11. 11. Comparison of JavaScript libraries (cont)Why we need our javascript library?The official statement 1. 不方便修改,扩展核心 2. 体积庞大 3. 执行效率 4. 不够协作开发My point 1. 可维护性(代码和团队) 2. 稳定的API(不能因为升级导致一大批产品不可用) 3. 精炼,没有过多冗余的代码
  12. 12. Comparison of JavaScript libraries (cont)So, how about Google?Micbael Bolin said in "Closure The Definitive Guide" 1. JavaScript + HTML/CSS/DOM 2. Collaborative development 3. Managing complexity 4. Modularization and conventions 5. Testing and stability
  13. 13. Tangram history1. jslib (prototype) (http://cang.baidu.com)2. jsframework (http://frd.baidu.com)3. Fl (http://tieba.baidu.com/test/rili)4. Al (http://fe.baidu.com/doc)5. Fe.JS (tieba, map)6. Tangram (most of the product)
  14. 14. Tangram architecture
  15. 15. Tangram base 1. ajax/ 1. fn/ 2. dom 2. lang/ 3. element/ 3. object/ 4. cookie/ 4. platform/ 5. event/ 5. string/ 6. page/ 6. url/ 7. swf/ 7. async/ 8. array/ 8. json/ 9. browser/ 9. number/10. date/ 10. sio/Q:Why use x241 instead of $1?
  16. 16. Tangram base (cont)T.e(#header). children(). on(click, function(){ alert(clicked); });
  17. 17. Tangram componentvar CustomControl = baidu.ui.createUI(function(options){ this.text = options.text || default text; }).extend({ getContent : function() { return this.text; } })var CustomControl = Class.create({ initialize : function() { }});
  18. 18. Tangram component (cont)I need a simple dialog.You need a simple dialog with mask.how to meet this two requirement?
  19. 19. Tangram component (cont)I need a simple dialog.You need a simple dialog with mask.how to meet this two requirement? behavior and addons.
  20. 20. Tangram component (cont)behavior and addons.I///import baidu.ui.Dialog;You///import baidu.ui.Dialog;///import baidu.ui.Dialog.Dialog$coverable;
  21. 21. Tangram component (cont)baidu.ui.Base is an object, not an constructor.
  22. 22. Tangram development1. checkout the code from github.com2. hacking and testing3. fix code style4. launch code-review5. commit to github.com6. launch pull request7. DEMO
  23. 23. Advance usage1. code-search2. Ftangram ○ best practice

×