Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator

  • 6,541 views
Uploaded on

This was my opening keynote presentation for Ajaxworld March 2008 in NYC.

This was my opening keynote presentation for Ajaxworld March 2008 in NYC.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,541
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
109
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 17.  
  • 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)
  • 22.  
  • 23. 1991
  • 24. Comdex (Atlanta)
  • 25.  
  • 26.  
  • 27. client / server
  • 28. easy to build apps
  • 29. event driven
  • 30. integration to DB
  • 31. last release: 1996 (vb6)
  • 32.  
  • 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
  • 37.
    • rapid app creation
  • 38.
    • productivity
  • 39.
    • ease of use
  • 40. distribution
  • 41. security
  • 42. programming model
  • 43. client/server was proliferating, something else was happening
  • 44. 1989
  • 45.  
  • 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
  • 60.  
  • 61. marc andreessen
  • 62. student at univ of illinois
  • 63. mosaic “web browser”
  • 64.  
  • 65.  
  • 66. 1994
  • 67.  
  • 68. Mosaic Communications Corporation
  • 69. Netscape Communications
  • 70. Netscape Communicator
  • 71.  
  • 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”
  • 79.  
  • 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)
  • 88.  
  • 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
  • 98.  
  • 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
  • 118.  
  • 119. James Gosling
  • 120.  
  • 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
  • 145.  
  • 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
  • 221.  
  • 222. (not flavor flav)
  • 223.  
  • 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”
  • 257.  
  • 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
  • 266.  
  • 267.  
  • 268. richer apps
  • 269. dynamic info
  • 270. web is the platform
  • 271.  
  • 272.  
  • 273.  
  • 274. (you can do that?)
  • 275.  
  • 276.  
  • 277.  
  • 278. (my enterprise apps need that)
  • 279. (but, how?)
  • 280.
    • different solutions
    (we’re innovating again)
  • 281. different approaches (and some feel like déjà vu)
  • 282. Sun doing something similar as before (as best we can tell)
  • 283.  
  • 284. (yawn…)
  • 285. MSFT doing something similar as before (it’s great being on top)
  • 286.  
  • 287. (surprise!)
  • 288. Adobe has an innovative approach that leverages Flash
  • 289.  
  • 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
  • 310.
    • widget libraries
  • 311.
    • Ajax libraries
  • 312.
    • effect libraries
  • 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
  • 336.
    • open standards
  • 337.
    • open source (the entire bits)
  • 338.
    • open developer community
  • 339.
    • integrated RIA programming model (HTML, CSS and Javascript)
  • 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)
  • 355.
    • I want to be able to create new widgets
  • 356.
    • leverage all of the great existing widgets
  • 357.
    • I want one single integrated way to use them ALL
  • 358.  
  • 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)
  • 365.  
  • 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
  • 370.  
  • 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
  • 400.
    • service routing
  • 401.
    • data marshalling
  • 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!
  • 409.  
  • 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
  • 424.
    • quick iterations
  • 425.
    • fully functional (at every point)
  • 426.
    • makes it easy to gather feedback from key stakeholders
  • 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:
  • 435.
    • fully functional RIA prototype (100% reusable)
  • 436. 2. fully defined message contracts
  • 437. (makes service development and integration a snap)
  • 438.  
  • 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
  • 442.