The document discusses the history and evolution of web development technologies from client-server applications in the 1990s to modern rich internet applications (RIAs). It describes how JavaScript libraries helped address issues with early AJAX approaches. The document advocates for an integrated programming model combining web expression language, a unified widget framework, open standards, and open source to build RIAs that can also integrate with back-end services.

1. AJAX WORLD March 2008

2. Jeff Haynie Co-founder & CEO [email_address] blog.jeffhaynie.us twitter.com/jhaynie linkedin.com/in/jhaynie

3. how did we get here?

4. 1991

5. Dave Litwack Mitchell Kertzman

6. Powersoft

7. Powerbuilder

8. client / server

9. proprietary

10. rapid app dev

11. database integration

12. $5.2M (6 months from 1.0)

13. Profitable: year one

14. IPO Feb. 1993 (~3 years)

15. $57M 1993

16. suits came knocking

18. $900M - 1995

19. Oops (sybase fabricated sales figures)

20. revolutionized the way we built apps

21. focus on the app (and ultimately, our business requirements)

23. 1991

24. Comdex (Atlanta)

27. client / server

28. easy to build apps

29. event driven

30. integration to DB

31. last release: 1996 (vb6)

33. March 31, 2005 (extended to March 2008 - better hurry up and replace)

34. focus on the app

35. 2-tier architecture

36. client = application

40. distribution

41. security

42. programming model

43. client/server was proliferating, something else was happening

44. 1989

46. tim berners-lee

47. CERN (europe)

48. world wide web

49. www

50. web

51. hyper text transfer protocol

52. http

53. http://www.example.com (if you don’t know this you’re in the wrong presentation)

54. directory (browsing)

55. sharing content (research)

56. primary display was text

57. network of connected computers

58. killer app = information

59. 1992

61. marc andreessen

62. student at univ of illinois

63. mosaic “web browser”

66. 1994

68. Mosaic Communications Corporation

69. Netscape Communications

70. Netscape Communicator

72. IPO 1995

73. browser wars (1995)

74. massive adoption

75. web sites were slow internet was slow

76. almost all initial web sites were content-based

77. the “web” initially competed with consumer info services like AOL, Compuserve and Prodigy

78. primarily still web content you “browsed”

80. distributed free (brilliant and bold move)

81. bundled win95 (plus! pack)

82. (isn’t it great being a monopoly?)

83. based on spyglass mosaic (remember Netscape?)

84. MASSIVE ADOPTION

85. January 1998

86. mozilla open source

87. (kick butt release party)

89. 

90. microsoft had 2 primary killer advantages:

91. Operating System platform

92. Developer Community

93. May 1998

94. DOJ ruled MSFT violated anti-trust

95. (too late, game was pretty much over)

96. November 1998

97. $4.2 BILLION

99. web browser changed the way we think about apps

100. distribution of apps

101. programming model

102. development of software

103. web 1.0

104. three-tier architecture

105. server is the brain

106. client is for display (doesn’t that sound like the mainframe architecture?)

107. the way we built apps changed based on “the web”

108. common gateway interface (CGI)

109. netscape API (nsapi)

110. web servers

111. app servers

112. database servers

113. caching servers

114. web pages

115. web apps

116. massive new way of thinking about the web and apps (a lot was fueled by dot.com bubble)

117. 1995

119. James Gosling

121. Java

122. Write once, Run anywhere

123. Browser

124. Applets

125. Java Web Start (some years later after applets failed)

126. slow

127. big

128. UI differences

129. web app?

130. native app? (sure didn’t look like one)

131. programming model

132. browser plugin

133. java language was great!

134. but … apparent java would not be deployed in browser environment

135. java did change the way we built web sites (and it still continues today)

136. why the web?

137. web programming model

138. distributed

139. easy to program

140. UI simple to layout

141. cross-browser differences

142. open source emerging rapidly with Internet

143. standards-based

144. 1994

146. tim berners-lee (remember, he created the web?)

147. preserve, promote web standards

148. “ ensure compatibility among vendors”

149. (are we there yet?)

150. HTML

151. CSS

152. XML

153. DOM

154. CGI

155. VoiceXML / CCXML

156. (too many more to list)

157. HTML 1.0 – 1993 (IETF WD)

158. HTML 2.0 – 1995 (IETF RFC)

159. HTML 3.0/3.2 (W3C)

160. HTML 4.0 (1997)

161. (XHTML came along the way)

162. HTML 5.0 (Jan 2008 - WD) 11 years!

163. Client-side data storage

164. video

165. cross document messaging

166. remoting

167. (continuing to expand idea of what a web app is)

168. XHTML or HTML?

169. most innovation has been on the server

170. servlets

171. JSP pages

172. ASP pages

173. tag libaries

174. PHP pages

175. (and lots of embedded sql)

176. cold fusion (so many other great server-side web frameworks)

177. server-driven UI

178. model-view-controller (MVC)

179. (server-assisted MVC)

180. server generates UI

181. UI is a template page

182. same HTML (almost always)

183. not very environmentally friendly 

184. age of server-side infrastructure

185. application servers

186. “ middleware”

187. new app complexities on the server side

188. cache business objects

189. cache page templates

190. cache SQL queries

191. session state

192. stored application state

193. (we used to call it application state)

194. session clustering

195. sticky sessions (optimize load balancing)

196. clustering not linear

197. middleware wars

198. hundreds of app servers

199. lots of server-side frameworks

200. lots of big companies rolled their own initially

201. IBM

202. Sun

203. BEA (weblogic)

204. organized around J2EE specification

205. community-based (Sun JCP)

206. heavy weight

207. overly complex

208. too many specs to keep up with

209. widely adopted

210. clustering

211. fail-over

212. high-availability

213. Microsoft .NET

214. wasn’t J2EE (not necessarily a bad thing)

215. wasn’t even java (of course not)

216. 2000 – Microsoft C# (feels a lot like Java)

217. part of Microsoft .NET

218. web-programming model

219. (for Microsoft platform)

220. 1999

222. (not flavor flav)

224. (marc fleury)

225. JBoss

226. Java application server (and eventually J2EE)

227. FREE! (well, almost)

228. open source

229. J2EE programming model (and it almost made J2EE fun)

230. 2001 (JBoss, LLC)

231. innovation primarily driven by server-side infrastructure

232. apps not much different (1999)

233. server-assisted MVC

234. service oriented architecture

235. middleware = SOA

236. service federations

237. distributed registries

238. service composition

239. service orchestration

240. portals

241. ESB

242. $60B Market (at least they say it was)

243. But business applications still function the same

244. Jesse James Garrett “AJAX” 2005

245. Microsoft & Netscape

246. early inter-applet techniques

247. applets to slow to start

248. IE5 – MSFT created XHR

249. Microsoft Outlook Web (Microsoft was innovating!)

250. Web 1.5

251. MVC + Ajax

252. round peg square hole

253. page driven paradigm with async behavior

254. look Ma – no page refresh

255. cool, but. . .

256. it’s only “pimp my web 1.0”

258. but lots of startups and innovative web companies thinking big

259. web 2.0

260. starting to think about apps again

261. networks are faster

262. hardware is cheap

263. software is moving to open source

264. and everyone is wired and on the web

265. user experience

268. richer apps

269. dynamic info

270. web is the platform

274. (you can do that?)

278. (my enterprise apps need that)

279. (but, how?)

281. different approaches (and some feel like déjà vu)

282. Sun doing something similar as before (as best we can tell)

284. (yawn…)

285. MSFT doing something similar as before (it’s great being on top)

287. (surprise!)

288. Adobe has an innovative approach that leverages Flash

290. wonderful product

291. open source (kind of)

292. “ Web 2.0” is overloaded

293. Web 2.0 = rich client

294. rich client = client programming

295. rich client != UI code in server

296. okay, but how?

297. Javascript

298. (and lots of it)

299. simple login form example

300. <html> <head> <title>Simple Ajax Login Example</title> <script language=&quot;Javascript&quot;> function xmlhttpPost(strURL) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); } } self.xmlHttpReq.send(getquerystring()); } function getquerystring() { var form = document.forms['f1']; var username = form.username.value; var password = form.password.value; qstr = ‘username=' + escape(username) + ‘&password=‘ + password; return qstr; } function updatepage(str){ document.getElementById(&quot;result&quot;).innerHTML = str; } </script> </head> <body> <form name=&quot;f1&quot;> <p>username: </p> <input name=”username&quot; type=&quot;text”/> <p>password: </p> <input name=”password&quot; type=&quot;text”/> <input value=”login&quot; type=&quot;button&quot; onclick='JavaScript:xmlhttpPost(&quot;/cgi-bin/simple-ajax-example.cgi&quot;)'></p> <div id=&quot;result&quot;></div> </form> </body> </html>

301. (Yikes!!!)

302. 25+ lines of Javascript

303. for one simple login form

304. rich client = mountains of JS?

305. mountains of JS = nightmare

306. (crap. now what?)

307. open standards + open source (to the rescue)

308. Javascript libraries

309. and lots of them

313. (here’s just a few)

314. Prototype

315. Scriptaculous

316. JQuery

317. Dojo

318. ExtJS

319. Yahoo YUI

320. Mootools

321. Open Rico

322. Qooxdoo

323. MochiKit

324. Lightbox

325. Greybox

326. Lightbox Plus

327. Nifty Corners

328. (okay to breathe)

329. (you get the point)

330. all great libraries!

331. how do I keep up with them all?

332. multiple versions, bug fixes

333. integration issues, glue code namespace issues

334. (but I thought that was the platform vendor’s job!)

335. with chaos comes opportunity

340. what does that mean?

341. well, what does an RIA programmer do?

342. event handling, Ajax, DHTML

343. (Got it!)

344. login form revisited

345. <html> <head> <title>Hello World 2.0</title> <script src=&quot;javascripts/appcelerator.js&quot; type=&quot;text/javascript&quot;></script> </head> <body> <div on=“r:login.request then show or r:login.response then hide” style=“display:none”> <img src=“images/indicator.gif” /> processing login… </div> Username: <input type=“text id=“username” fieldset=“login”/> Password: <input type=“password id=“password fieldset=“login”/> <input type=“button” value=“login” fieldset=“login” on=“click then r:login.request” /> </body> </html>

346. on=“r:login.request then show”

347. (what is that?)

348. event handling + Ajax + DHTML one simple expression language

349. it’s an integrated RIA programming model

350. that leverages standards (like HTML, CSS and Javascript)

351. it codes Javascript so you don’t have to

352. (Web Expression Language)

353. cool, but what about widgets?

354. (good question)

359. how about this:

360. <!– ExtJS Grid --> <app:ext_grid on=&quot;l:show.user.response then execute&quot; property=&quot;rows&quot; width=&quot;390&quot; title=”Users”> <column property=”first” >First Name</column> <column property=”last”>Last Name</column> <column property=”phone”>Phone</column> </app:ext_grid> <!– Yahoo Calendar --> <app:calendar on=&quot;l:show.calendar then execute&quot; title=”My Calendar&quot; inputId=”date”> </app:calendar> <input type=“text” id=“date”/> <img src=“images/calendar.png” on=“click then l:show.calendar”/>

361. ExtJS and YUI in one widget framework?

362. (yes, and any others you want)

363. including Flex widgets!

364. (and you can easily create your own)

366. okay, calm down Sally

367. let’s recap

368. Web Expression Language + Unified Widget Framework + Open Standards + Open Source =

369. fully integrated RIA platform

371. RIA is good but what about my services?

372. (and that $60B investment in SOA?)

373. you want to mix your RIA with your SOA

374. RIA + SOA

375. full decoupling of the rich client from its services

376. they share only one thing

377. a lightweight message contract (aren’t they services?)

378. (need a picture?)

379. Rich Client Service r:login.request {‘username’:’joe’, ‘password’:’****’} r:login.response {‘success’:true}

380. Contract = message name

381. login.request and login.response

382. plus input and output data

383. (that’s it!)

384. if the contract is message-based

385. why does the service programming language matter?

386. good question.

387. (it doesn’t)

388. with a message-based contract you can create services in any programming language!

389. we call these SOA Integration Points

390. and we have them for Java, Ruby, PHP, .NET, Python and Perl

391. how does that work?

392. let’s look at Java

393. take a plain Java object (POJO)

394. and add a single annotation

395. @Service(request = ”my.request&quot;, response = ”my.response&quot;)

396. to a Java method – like so:

397. package org.appcelerator.service; import org.appcelerator.annotation.Service; import org.appcelerator.messaging.Message; public class MyService { @Service(request = ”my.request&quot;, response = ”my.response&quot;) protected void myRequest(Message request, Message response) throws Exception { // service logic here } }

398. (that’s it!) really….

399. each SOA Integration Point

402. (what does that mean?)

403. it means you can place a native object or array of objects into the response

404. and we’ll take care of the rest.

405. the result is:

406. you focus on what you do best: BUILD APPLICATIONS!

407. instead of playing the role of platform vendor

408. that’s our job!

410. we are the RIA + SOA company

411. RIA + SOA – that’s good but what about prototyping?

412. (glad you asked)

413. remember our message-based contract?

414. it enables location independence for services

415. meaning mock services can reside in the RIA

416. meaning you can build fully functional RIA prototypes

417. without a single line of service code (or even web server)

418. with 100% reusability!

419. we call them Interactive Use Cases

420. build your application while you build your requirements

421. no more server-focused development

422. no more 100-page requirements documents (that never matches the end application)

423. it’s technology-enabled Agile development

427. product managers

428. service developers

429. documentation team

430. QA

431. sales team

432. and even customers

433. after incorporating feedback

434. you have two key deliverables:

436. 2. fully defined message contracts

437. (makes service development and integration a snap)

439. fully integrated RIA+SOA platform

440. an entirely new and better way to build the next generation of web applications

441. help us build the best RIA+SOA open source developer community www.appcelerator.org