The document discusses JS Library and Tangram. It begins by outlining why JavaScript libraries are needed to address issues like language enhancement and browser compatibility. It then compares popular libraries like jQuery, YUI, Prototype and Ext and discusses reasons for creating their own library. The document outlines Tangram's history from earlier prototypes to the current version. It describes Tangram's modular architecture and development process. It concludes by discussing advanced Tangram usage and code search.

1. JS Library and Tangram
Introduction
liyubei@baidu.com
2011-08-25

2. Outline
● Why we need JavaScript Library
● Comparison of JavaScript libraries
● Tangram history
● Tangram architecture
● Tangram development
○ demo
● Advance usage
○ demo

3. Why we need JavaScript Library
What's the issue it want to resolve?

4. Why we need JavaScript Library
What's the issue it want to resolve?
1. language enhancement
○ klass/function
○ array
○ string
○ object
○ ...

5. Why we need JavaScript Library
What's the issue it want to resolve?
1. language enhancement
2. fix browser compatibility
○ DOM
○ Event
○ CSS
○ Network
○ Storage
○ ...

6. Comparison of JavaScript libraries
Why there are some many libraries (20+)?
http://en.wikipedia.
org/wiki/Comparison_of_JavaScript_frameworks

7. Comparison of JavaScript libraries
jQuery
jQuery 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 that
you write JavaScript.
YUI
The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly
interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
Prototype
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.
Ext
Ext JS is a JavaScript library for building interactive web applications using techniques such as Ajax,
DHTML and DOM scripting.
Dojo
Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the
toolkit experienced developers turn to for building superior desktop and mobile web experiences.

8. Comparison of JavaScript libraries
Why there are some many libraries?
http://en.wikipedia.
org/wiki/Comparison_of_JavaScript_frameworks
What is the difference between them, what the similarities?

9. Comparison of JavaScript libraries (cont)
Why we need our javascript library?

10. Comparison of JavaScript libraries (cont)
Why we need our javascript library?
The official statement
1. 不方便修改，扩展核心
2. 体积庞大
3. 执行效率
4. 不够协作开发

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. 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. Tangram history
1. 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. Tangram architecture

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. Tangram base (cont)
T.e('#header').
children().
on('click', function(){
alert('clicked');
});

17. Tangram component
var 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. Tangram component (cont)
I need a simple dialog.
You need a simple dialog with mask.
how to meet this two requirement?

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. Tangram component (cont)
behavior and addons.
I
///import baidu.ui.Dialog;
You
///import baidu.ui.Dialog;
///import baidu.ui.Dialog.Dialog$coverable;

21. Tangram component (cont)
baidu.ui.Base is an object, not an constructor.

22. Tangram development
1. checkout the code from github.com
2. hacking and testing
3. fix code style
4. launch code-review
5. commit to github.com
6. launch pull request
7. DEMO

23. Advance usage
1. code-search
2. Ftangram
○ best practice