Submit Search
Upload
Tangram UI: Building Rich Web Apps
•
Download as KEY, PDF
•
5 likes
•
970 views
AI-enhanced title
Berg Ray
Follow
Infoq 百度技术沙龙 4.16
Read less
Read more
Technology
Report
Share
Report
Share
1 of 80
Download now
Recommended
The Web beyond "usernames & passwords" (OSDC12)
The Web beyond "usernames & passwords" (OSDC12)
Francois Marier
Page Caching Resurrected: A Fairy Tale
Page Caching Resurrected: A Fairy Tale
Ben Scofield
Keeping It Professional: Relevance, Recommendations, and Reputation at LinkedIn
Keeping It Professional: Relevance, Recommendations, and Reputation at LinkedIn
Daniel Tunkelang
InfoQ China Intro
InfoQ China Intro
Shen Liu
Curso de tangram
Curso de tangram
Educagratis
El tangram
El tangram
Rubiela Moreno Peña
Tangrams February 2012
Tangrams February 2012
cheriedotcraig
Construcció d'un tangram
Construcció d'un tangram
tecnologiesbanus
Recommended
The Web beyond "usernames & passwords" (OSDC12)
The Web beyond "usernames & passwords" (OSDC12)
Francois Marier
Page Caching Resurrected: A Fairy Tale
Page Caching Resurrected: A Fairy Tale
Ben Scofield
Keeping It Professional: Relevance, Recommendations, and Reputation at LinkedIn
Keeping It Professional: Relevance, Recommendations, and Reputation at LinkedIn
Daniel Tunkelang
InfoQ China Intro
InfoQ China Intro
Shen Liu
Curso de tangram
Curso de tangram
Educagratis
El tangram
El tangram
Rubiela Moreno Peña
Tangrams February 2012
Tangrams February 2012
cheriedotcraig
Construcció d'un tangram
Construcció d'un tangram
tecnologiesbanus
How dojo works
How dojo works
Amit Tyagi
Mobile Web Development with HTML5
Mobile Web Development with HTML5
Roy Clarkson
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
David Kaneda
MongoDB at ZPUGDC
MongoDB at ZPUGDC
Mike Dirolf
Web Developing In Search
Web Developing In Search
Frank Xu
Headless browser: puppeteer and git client : GitKraken
Headless browser: puppeteer and git client : GitKraken
SheikhMoonwaraAnjumM
Famo.us introduction
Famo.us introduction
Allen Wu
Digging into your DevTools
Digging into your DevTools
Vernon Kesner
Introduction to TypeScript
Introduction to TypeScript
Jeremy Likness
Mobile for the rest of us
Mobile for the rest of us
Axway Appcelerator
Appcelerator Titanium at Mobile 2.0
Appcelerator Titanium at Mobile 2.0
Jeff Haynie
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Jeff Haynie
Android Wear: A Developer's Perspective
Android Wear: A Developer's Perspective
Vin Lim
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance Optimization
Maximiliano Firtman
ICS3211 lecture 08
ICS3211 lecture 08
Vanessa Camilleri
Fluent 2012 v2
Fluent 2012 v2
Shalendra Chhabra
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Atlassian
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Mihail Mateev
Google I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb Highlights
Romain Guy
Extjs + Gears
Extjs + Gears
hagino 3000
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
More Related Content
Similar to Tangram UI: Building Rich Web Apps
How dojo works
How dojo works
Amit Tyagi
Mobile Web Development with HTML5
Mobile Web Development with HTML5
Roy Clarkson
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
David Kaneda
MongoDB at ZPUGDC
MongoDB at ZPUGDC
Mike Dirolf
Web Developing In Search
Web Developing In Search
Frank Xu
Headless browser: puppeteer and git client : GitKraken
Headless browser: puppeteer and git client : GitKraken
SheikhMoonwaraAnjumM
Famo.us introduction
Famo.us introduction
Allen Wu
Digging into your DevTools
Digging into your DevTools
Vernon Kesner
Introduction to TypeScript
Introduction to TypeScript
Jeremy Likness
Mobile for the rest of us
Mobile for the rest of us
Axway Appcelerator
Appcelerator Titanium at Mobile 2.0
Appcelerator Titanium at Mobile 2.0
Jeff Haynie
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Jeff Haynie
Android Wear: A Developer's Perspective
Android Wear: A Developer's Perspective
Vin Lim
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance Optimization
Maximiliano Firtman
ICS3211 lecture 08
ICS3211 lecture 08
Vanessa Camilleri
Fluent 2012 v2
Fluent 2012 v2
Shalendra Chhabra
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Atlassian
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Mihail Mateev
Google I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb Highlights
Romain Guy
Extjs + Gears
Extjs + Gears
hagino 3000
Similar to Tangram UI: Building Rich Web Apps
(20)
How dojo works
How dojo works
Mobile Web Development with HTML5
Mobile Web Development with HTML5
jQTouch at jQuery Conference 2010
jQTouch at jQuery Conference 2010
MongoDB at ZPUGDC
MongoDB at ZPUGDC
Web Developing In Search
Web Developing In Search
Headless browser: puppeteer and git client : GitKraken
Headless browser: puppeteer and git client : GitKraken
Famo.us introduction
Famo.us introduction
Digging into your DevTools
Digging into your DevTools
Introduction to TypeScript
Introduction to TypeScript
Mobile for the rest of us
Mobile for the rest of us
Appcelerator Titanium at Mobile 2.0
Appcelerator Titanium at Mobile 2.0
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Mobile 2.0 Event: Mobile for the rest of us using Appcelerator Titanium
Android Wear: A Developer's Perspective
Android Wear: A Developer's Perspective
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance Optimization
ICS3211 lecture 08
ICS3211 lecture 08
Fluent 2012 v2
Fluent 2012 v2
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Google I/O 2011, Android Honeycomb Highlights
Google I/O 2011, Android Honeycomb Highlights
Extjs + Gears
Extjs + Gears
Recently uploaded
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Paola De la Torre
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Alan Dix
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
XfilesPro
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
Recently uploaded
(20)
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Tangram UI: Building Rich Web Apps
1.
Tangram
berg infoQ
2.
Agenda • Challenges &
dreams • Architecture • Tangram Base • Tangram UI
3.
Challenges & dreams
4.
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 • • • •
18.
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"); •
22.
23.
24.
25.
26.
27.
28.
29.
page:
30.
startBaiduHI.js: Put
Tangram in a clusure
31.
Conclusions • • •
32.
Tangram UI
33.
Challenges •
• • •
34.
35.
constructor
... ... prototype ...
36.
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
42.
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
65.
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
71.
72.
73.
http://tangram.baidu.com
74.
Conclusions
75.
•
• • • Javascript •
76.
77.
Tangram
78.
mp3 IM Tangram
hao123
79.
!anks
berg
80.
!anks
berg Twitter: @cnberg : @berg i@cnberg.com
Download now