Ben and Dion give an overview of the state of Ajax at JavaOne, using Java technology too, and a fun Wii darts demo that you can see more info on at: http://ajaxian.com/archives/wii-darts-powering-ajax-applications-with-wii-controllers

1. What’s New in Ajax
Ben Galbraith and Dion Almaer
Founders, Ajaxian.com
TS-6807
Sunday, May 11, 2008 1

2. Sunday, May 11, 2008 2

3. Sunday, May 11, 2008 2

4. JavaFXian It’s “JavaFX”, not “Java”, stupid
Sunday, May 11, 2008 2

5. Sunday, May 11, 2008 3

6. Sunday, May 11, 2008 3

7. Sunday, May 11, 2008 3

8. Sunday, May 11, 2008 3

9. Sunday, May 11, 2008 3

10. Sunday, May 11, 2008 3

11. Sunday, May 11, 2008 3

12. Sunday, May 11, 2008 3

13. Sunday, May 11, 2008 3

14. Great Developer Experience
Great User Experience
Sunday, May 11, 2008 4

15. Great User Experience
Great Developer Experience
Sunday, May 11, 2008 4

16. e!
Great User Experience
utu rExperience
eF
Great Developer
Th
Sunday, May 11, 2008 4

17. Sunday, May 11, 2008 5

18. The Web didn’t used to be a beautiful place...
Sunday, May 11, 2008 5

19. Sunday, May 11, 2008 5

20. Sunday, May 11, 2008 6

21. Sunday, May 11, 2008 7

22. Sunday, May 11, 2008 8

23. Sunday, May 11, 2008 9

24. Sunday, May 11, 2008 9

25. Browser
Sunday, May 11, 2008 10

26. Operating System
Event Queue
Browser
Sunday, May 11, 2008 10

27. Operating System
Event Queue
Browser
Sunday, May 11, 2008 10

28. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser
Sunday, May 11, 2008 10

29. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser
Sunday, May 11, 2008 10

30. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser
Sunday, May 11, 2008 10

31. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript
Browser
Sunday, May 11, 2008 10

32. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript
Browser
Sunday, May 11, 2008 10

33. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript Web Browsing
Browser
Sunday, May 11, 2008 10

34. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
tial
oten neck
P le
t
Bot
JavaScript Web Browsing
Browser
Sunday, May 11, 2008 10

35. 1
Browser
User Interface
2
Background
Thread
Sunday, May 11, 2008 11

36. 1
Browser
User Interface
X
2
Background
Thread
Sunday, May 11, 2008 11

37. 1
Browser
User Interface Message Passing
2 3
WorkerPool WorkerPool
Sunday, May 11, 2008 12

38. Macintosh HD
Sunday, May 11, 2008 13

39. “You just got another
email from your wife!”
Macintosh HD
Sunday, May 11, 2008 13

40. “You just got another
email from your wife!”
Macintosh HD
32
Sunday, May 11, 2008 13

41. “You just got another
email from your wife!”
Macintosh HD
32
Sunday, May 11, 2008 13

42. “You just got another
email from your wife!”
Macintosh HD
32
Sunday, May 11, 2008 13

43. Fluid
Mozilla
Prism
Adobe AIR
Sunday, May 11, 2008 14

44. Fluid
Sunday, May 11, 2008 14

45. Fluid
37signals’
Campfire
Sunday, May 11, 2008 15

46. Fluid
GreaseMonkey /
GreaseKit
37signals’
Campfire
Sunday, May 11, 2008 15

47. Aptana Jaxer
Sunday, May 11, 2008 16

48. Aptana Jaxer
Sunday, May 11, 2008 16

49. Aptana Jaxer
Sunday, May 11, 2008 16

50. Aptana Jaxer
Sunday, May 11, 2008 16

51. Aptana Jaxer
Netscape LiveWire
1995
Sunday, May 11, 2008 16

52. Browser Server
Sunday, May 11, 2008 17

53. Browser Server
JavaScript
In the beginning, there was JavaScript in the browser
Sunday, May 11, 2008 17

54. Browser Server
JavaScript
Java
Then Oak became Java and it entered the browser, too
Sunday, May 11, 2008 17

55. Browser Server
JavaScript
Java
Applets sucked, but Servlets caught on
Sunday, May 11, 2008 17

56. Browser Server
JavaScript
Java
Netscape tries to get JavaScript on the server
Sunday, May 11, 2008 17

57. Browser Server
JavaScript
Java
But, server-side JavaScript never caught on, and client-side JavaScript was mocked
Sunday, May 11, 2008 17

58. Browser Server
Aja
x!
JavaScript
Java
Ajax comes along and JavaScript gets some respect once again
Sunday, May 11, 2008 17

59. Browser Server
Aja Aja
x! x!
JavaScript JavaScript
Java
Then Aptana moves Ajax to the server
Sunday, May 11, 2008 17

60. Browser Server
Aja Aja
x! x!
JavaScript JavaScript
Java/JavaScript Java
Hybrid Monster
Don’t forget GWT, which uses Java and embedded JavaScript to emit client-side JavaScript
Sunday, May 11, 2008 17

61. Browser Server
Aja
x!
Aja
x!
JavaScript
JavaScript
Java/JavaScript
Hybrid Monster
Java
Java
And now, finally, after nearly 15 years, we have a decent Java plug-in
Sunday, May 11, 2008 17

62. Browser Server
Aja
x!
Aja
x!
JavaScript
JavaScript
Java/JavaScript
Hybrid Monster
Java
Java
And now, finally, after nearly 15 years, we have a decent Java plug-in
Sunday, May 11, 2008 17

63. Sunday, May 11, 2008 18

64. Amazon EC2
Elastic Compute Cloud
Sunday, May 11, 2008 18

65. Amazon EC2
Elastic Compute Cloud
Sunday, May 11, 2008 19

66. Amazon EC2
Elastic Compute Cloud
Google App Engine
Sunday, May 11, 2008 19

67. Amazon EC2
Elastic Compute Cloud
Google App Engine
Aptana Cloud
Sunday, May 11, 2008 19

68. Your Application
Web Services
Sunday, May 11, 2008 20

69. Your Application
Web Services
Sunday, May 11, 2008 20

70. Your Application
Web Services
Sunday, May 11, 2008 20

71. Your Application
Web Services
Sunday, May 11, 2008 20

72. Your Application
Web Services
Sunday, May 11, 2008 20

73. Sunday, May 11, 2008 21

74. How to Choose an Ajax Framework
Sunday, May 11, 2008 21

75. How to Choose an Ajax Framework
XHR
Sunday, May 11, 2008 21

76. How to Choose an Ajax Framework
XHR
Sunday, May 11, 2008 22

77. How to Choose an Ajax Framework
Sunday, May 11, 2008 22

78. The Old Taxonomy
Sunday, May 11, 2008 23

79. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
Sunday, May 11, 2008 23

80. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
Sunday, May 11, 2008 23

81. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
jQuery
New, DOM-centric JavaScript helper
Sunday, May 11, 2008 23

82. The Old Taxonomy
Prototype
dojo
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
Your Soup-to-Nuts Ajax/Javascript
Platform
jQuery
New, DOM-centric JavaScript helper
Sunday, May 11, 2008 23

83. The New Taxonomy
Sunday, May 11, 2008 24

84. The New Taxonomy
Prototype jQuery Dojo Core
Sunday, May 11, 2008 24

85. The New Taxonomy
Plug-in Community Plug-in Community Plug-in Community
scripteka.com plugins.jquery.com dojox
Prototype jQuery Dojo Core
Sunday, May 11, 2008 24

86. The New Taxonomy
Script.aculo.us jQuery UI dijit
Plug-in Community Plug-in Community Plug-in Community
scripteka.com plugins.jquery.com dojox
Prototype jQuery Dojo Core
Sunday, May 11, 2008 24

87. JavaScript Goodness
var SiteMap = Class.create(RuledTable, {
initialize: function($super, id, expanded) {
$super(id);
this.expandedRows = expanded;
},
...
});
Sunday, May 11, 2008 25

88. DOM Goodness
$(document).bind(quot;readyquot;, function() {
$(quot;divquot;).bind(quot;mousewheelquot;, function(event, delta) {
if (delta < 0) {
$(this).append(quot;upquot;);
} else {
$(this).append(quot;downquot;);
}
);
});
Sunday, May 11, 2008 26

89. CSS and Animations
dojo.query(quot;#nav> .focusablequot;).
attr(quot;tabIndexquot;, 0).
style(quot;borderquot;, quot;1px solid transparentquot;).
anim({
quot;borderColorquot;: { start: quot;yellowquot;,
end: quot;whitequot; }
});
Sunday, May 11, 2008 27

90. GWT Panels
String html = quot;<div id='one' quot;
+ quot;style='border:3px dotted blue;'>quot;
+ quot;</div><div id='two' quot;
+ quot;style='border:3px dotted green;'quot;
+ quot;></div>quot;;
HTMLPanel panel = new HTMLPanel(html);
panel.setSize(quot;200pxquot;, quot;120pxquot;);
panel.addStyleName(quot;demo-panelquot;);
panel.add(new Button(quot;Do Nothingquot;), quot;onequot;);
panel.add(new TextBox(), quot;twoquot;);
RootPanel.get(quot;demoquot;).add(panel);
Sunday, May 11, 2008 28

91. Prototype was one of the first mainstream Ajax frameworks. Originally a Ruby-on-Rails helper
library, it has been widely adopted as a JavaScript/Ajax helper library.
Key Points:
pdoc
inline documentation
Sprockets
Component packaging
Events
New event bubbling sub system
Sam Stephenson, Creator of Prototype
Sunday, May 11, 2008 29

92. Prototype was one of the first mainstream Ajax frameworks. Originally a Ruby-on-Rails helper
library, it has been widely adopted as a JavaScript/Ajax helper library.
Key Points:
pdoc
inline documentation
Sprockets
Component packaging
Events
New event bubbling sub system
Sam Stephenson, Creator of Prototype
Sunday, May 11, 2008 29

93. jQuery pioneered the “CSS selector first” technique of applying behaviour to the DOM
Key Points:
jQuery Core 1.2.4
Cross browser offset and DOM sizes
New event handlers for speed bump
jQuery Core 1.3
New CSS selector engine
DOM manipulation simplified
jQuery UI 1.5
Ground rewrite
Large number of examples
John Resig, Creator of jQuery
Sunday, May 11, 2008 30

94. jQuery pioneered the “CSS selector first” technique of applying behaviour to the DOM
Key Points:
jQuery Core 1.2.4
Cross browser offset and DOM sizes
New event handlers for speed bump
jQuery Core 1.3
New CSS selector engine
DOM manipulation simplified
jQuery UI 1.5
Ground rewrite
Large number of examples
John Resig, Creator of jQuery
Sunday, May 11, 2008 30

95. From its earliest days, Dojo has had the goal of being the JavaScript community’s de facto
platform, for both client-side and server-side applications.
Key Points:
Responsive applications
For all.
Accessibility
Really, all.
Full GUI toolkit
Dijit
Alex Russell, Dojo Co-founder
Sunday, May 11, 2008 31

96. From its earliest days, Dojo has had the goal of being the JavaScript community’s de facto
platform, for both client-side and server-side applications.
Key Points:
Responsive applications
For all.
Accessibility
Really, all.
Full GUI toolkit
Dijit
Alex Russell, Dojo Co-founder
Sunday, May 11, 2008 31

97. GWT is the framework for Java developers who don’t wish to learn JavaScript. A sort of Swing/
SWT for the Web, it focuses on productivity and performance.
Key Points:
Java 5 Support
Generics, for loop, etc...
Performance
With a simple recompilation
JavaScript Integration
New simpler system
Bruce Johnson, Founder of GWT Rich components
Native, and via community (Ext - GWT - Ext)
Sunday, May 11, 2008 32

98. GWT is the framework for Java developers who don’t wish to learn JavaScript. A sort of Swing/
SWT for the Web, it focuses on productivity and performance.
Key Points:
Java 5 Support
Generics, for loop, etc...
Performance
With a simple recompilation
JavaScript Integration
New simpler system
Bruce Johnson, Founder of GWT Rich components
Native, and via community (Ext - GWT - Ext)
Sunday, May 11, 2008 32

99. XHR
Sunday, May 11, 2008 33

100. XHR
Sunday, May 11, 2008 33

101. Sunday, May 11, 2008 34

102. Sunday, May 11, 2008 34

103. Sunday, May 11, 2008 35

104. Sunday, May 11, 2008 35

105. Sunday, May 11, 2008 35

106. Sunday, May 11, 2008 35

107. Sunday, May 11, 2008 35

108. wiiuse library
Sunday, May 11, 2008 35

109. JNI
wiiuse library
Sunday, May 11, 2008 35

110. Java Plug-in
JNI
wiiuse library
Sunday, May 11, 2008 35

111. Java Plug-in
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

112. Java Plug-in
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

113. Java Plug-in
WiiTracker
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

114. Java Plug-in
WiiTracker
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

115. Java Plug-in
WiiApplet
WiiTracker
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

116. Java Plug-in
WiiApplet
WiiTracker
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

117. Browser Java Plug-in
WiiApplet
WiiTracker
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

118. Browser Java Plug-in
WiiApplet
JavaScript Dart
Game
WiiTracker
wiiusej
JNI
wiiuse library
Sunday, May 11, 2008 35

119. Sunday, May 11, 2008 36

120. Sunday, May 11, 2008 36

121. The New Java Plug-in
Beta Shipping Today with Java 1.6 “Update 10”
1 Java plug-in now out-of-process
No more locking up the browser UI on launch
Applets can persist across browser sessions
More control over the Applet’s JVM
2 Improved Applet deployment
JavaScript-based “Deployment Toolkit”
Mature JNLP-based Applet metadata
3 A smaller JDK
Micro-kernel gives streamlined download option
Sunday, May 11, 2008 37

122. The Future?
Sunday, May 11, 2008 38

123. The Breakdown of Modern Web Development
Sunday, May 11, 2008 39

124. Safari CSS Animations
Sunday, May 11, 2008 40

125. Safari CSS Reflections and Masks
Sunday, May 11, 2008 41

126. Mozilla’s Monkeys?
Sunday, May 11, 2008 42

127. Sunday, May 11, 2008 43

128. Sunday, May 11, 2008 43

129. Updating the Web...
Sunday, May 11, 2008 44

130. Future
Present
Ab
leed
edg ing
vers e
of H ion
Past TML
5!
HTML 5 Gears
• Standards • Implementation
• Long term • Battle hardened
• A place for innovation
• All browsers • Cross browser
• No plugin • Plugin
Sunday, May 11, 2008 45

131. Sunday, May 11, 2008 46

132. What’s New in Ajax
Dion Almaer and Ben Galbraith
TS-6807
Sunday, May 11, 2008 47