This document discusses Tangram, an open source JavaScript UI library. It covers Tangram's architecture, challenges, dreams and key components. Tangram uses a modular component-based architecture with clear separation of concerns. The base provides DOM manipulation and event handling while components implement specific UI widgets. The UI is constructed from DOM elements, data and controls defined in JavaScript.

1. Tangram
berg
infoQ

2. Agenda
• Challenges & dreams
• Architecture
• Tangram Base
• Tangram UI

3. Challenges & dreams

5. Response
as Fast as we can

6. Changing Every Day

7. Rich Internet Application

8. Legacy from 2001, new legacy everyday

9. The dreams
•
• Javascript
•

10. Architecture

11. app
widget
component
base

12. app
widget
component
base

13. app
widget
component
base

14. app
widget UI
component
base

15. app
widget UI
component
base

16. Tangram base

17. Challenges
•
•
•
•

19. •
• T.dom.addClass(ele, "highlight");

20. •
• T.dom.addClass(ele, "highlight");
•
• T.e("#container").addClass("highlight");

21. •
• T.dom.addClass(ele, "highlight");
•
• T.e("#container").addClass("highlight");
•

29. page:

30. startBaiduHI.js:
Put Tangram in a clusure

31. Conclusions
•
•
•

32. Tangram UI

33. Challenges
•
•
•
•

35. constructor
...
...
prototype
...

37. constructor
prototype

38. constructor
Plugin constructor
prototype
Plugin prototype

39. baidu.ui.Dialog.register(function(dialog){
dialog.addEventListener("onload", function(){
if(dialog.type == "alert"){
baidu.dom.insertHTML(
dialog.getId("footer"),
"beforeEnd",
getButtonString()
);
}
});
}); Constructor

40. baidu.ui.Dialog.extend({
okText : " ",
_ok : function(){
this.close();
}
});
Prototype

41. 462 Dialog
44 closeButton
57 draggable
54 iframe
69 keyboard
44 modal
99 resizable
26 smartCover

43. UI =

44. Data
UI =

45. Data
+
UI =

46. Data
+
UI = DOM

47. Data
+
UI = DOM
+

48. Data
+
UI = DOM
+
Control

49. Javascript

50. Data
+
UI = DOM
+
Control

51. Data
+
UI = DOM
+
Control

52. Data
+
UI = DOM
+
Control

53. Javascript

54. DOM

55. DOM
HTML:

56. DOM
HTML:
Javascript:

57. Data
+
UI = DOM
+
Control

58. Data
+
UI = DOM
+
Control

59. Data
+
UI = DOM
+
Control

60. UI

61. ui.Base
ui.create
Button

62. ui.Base
ui.create
Button

63. ui.Base
ui.create lang.Class
baidu
Button

64. ui.Base
mix-in
ui.create lang.Class
inherit baidu
Button

66. button dialog table ...

67. button dialog table ...
alert
confirm
modal
keyboard
...

68. button dialog table ...
alert
draggable
confirm
stateable modal
keyboard
...
...

69. Conclusions
•
•
•
•
•

70. About us

73. http://tangram.baidu.com

74. Conclusions

75. •
•
•
• Javascript
•

77. Tangram

78. mp3
IM
Tangram
hao123

79. !anks
berg

80. !anks
berg
Twitter: @cnberg
: @berg
i@cnberg.com