Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator

Slide 1: AJAX WORLD March 2008

Slide 2: Jeff Haynie Co-founder & CEO jeff@appcelerator.com blog.jeffhaynie.us twitter.com/jhaynie linkedin.com/in/jhaynie

Slide 3: how did we get here?

Slide 4: 1991

Slide 5: Dave Litwack Mitchell Kertzman

Slide 6: Powersoft

Slide 7: Powerbuilder

Slide 8: client / server

Slide 9: proprietary

Slide 10: rapid app dev

Slide 11: database integration

Slide 12: $5.2M (6 months from 1.0)

Slide 13: Profitable: year one

Slide 14: IPO Feb. 1993 (~3 years)

Slide 15: $57M 1993

Slide 16: suits came knocking

Slide 18: $900M - 1995

Slide 19: Oops (sybase fabricated sales figures)

Slide 20: revolutionized the way we built apps

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

Slide 23: 1991

Slide 24: Comdex (Atlanta)

Slide 27: client / server

Slide 28: easy to build apps

Slide 29: event driven

Slide 30: integration to DB

Slide 31: last release: 1996 (vb6)

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

Slide 34: focus on the app

Slide 35: 2-tier architecture

Slide 36: client = application

Slide 37: rapid app creation

Slide 38: productivity

Slide 39: ease of use

Slide 40: distribution

Slide 41: security

Slide 42: programming model

Slide 43: client/server was proliferating, something else was happening

Slide 44: 1989

Slide 46: tim berners-lee

Slide 47: CERN (europe)

Slide 48: world wide web

Slide 49: www

Slide 50: web

Slide 51: hyper text transfer protocol

Slide 52: http

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

Slide 54: directory (browsing)

Slide 55: sharing content (research)

Slide 56: primary display was text

Slide 57: network of connected computers

Slide 58: killer app = information

Slide 59: 1992

Slide 61: marc andreessen

Slide 62: student at univ of illinois

Slide 63: mosaic “web browser”

Slide 66: 1994

Slide 68: Mosaic Communications Corporation

Slide 69: Netscape Communications

Slide 70: Netscape Communicator

Slide 72: IPO 1995

Slide 73: browser wars (1995)

Slide 74: massive adoption

Slide 75: web sites were slow internet was slow

Slide 76: almost all initial web sites were content-based

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

Slide 78: primarily still web content you “browsed”

Slide 80: distributed free (brilliant and bold move)

Slide 81: bundled win95 (plus! pack)

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

Slide 83: based on spyglass mosaic (remember Netscape?)

Slide 84: MASSIVE ADOPTION

Slide 85: January 1998

Slide 86: mozilla open source

Slide 87: (kick butt release party)

Slide 89: 

Slide 90: microsoft had 2 primary killer advantages:

Slide 91: Operating System platform

Slide 92: Developer Community

Slide 93: May 1998

Slide 94: DOJ ruled MSFT violated anti-trust

Slide 95: (too late, game was pretty much over)

Slide 96: November 1998

Slide 97: $4.2 BILLION

Slide 99: web browser changed the way we think about apps

Slide 100: distribution of apps

Slide 102: development of software

Slide 103: web 1.0

Slide 104: three-tier architecture

Slide 105: server is the brain

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

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

Slide 108: common gateway interface (CGI)

Slide 109: netscape API (nsapi)

Slide 110: web servers

Slide 111: app servers

Slide 112: database servers

Slide 113: caching servers

Slide 114: web pages

Slide 115: web apps

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

Slide 117: 1995

Slide 119: James Gosling

Slide 121: Java

Slide 122: Write once, Run anywhere

Slide 123: Browser

Slide 124: Applets

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

Slide 126: slow

Slide 127: big

Slide 128: UI differences

Slide 129: web app?

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

Slide 132: browser plugin

Slide 133: java language was great!

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

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

Slide 136: why the web?

Slide 137: web programming model

Slide 138: distributed

Slide 139: easy to program

Slide 140: UI simple to layout

Slide 141: cross-browser differences

Slide 142: open source emerging rapidly with Internet

Slide 143: standards-based

Slide 144: 1994

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

Slide 147: preserve, promote web standards

Slide 148: “ensure compatibility among vendors”

Slide 149: (are we there yet?)

Slide 150: HTML

Slide 151: CSS

Slide 152: XML

Slide 153: DOM

Slide 154: CGI

Slide 155: VoiceXML / CCXML

Slide 156: (too many more to list)

Slide 157: HTML 1.0 – 1993 (IETF WD)

Slide 158: HTML 2.0 – 1995 (IETF RFC)

Slide 159: HTML 3.0/3.2 (W3C)

Slide 160: HTML 4.0 (1997)

Slide 161: (XHTML came along the way)

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

Slide 163: Client-side data storage

Slide 164: video

Slide 165: cross document messaging

Slide 166: remoting

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

Slide 168: XHTML or HTML?

Slide 169: most innovation has been on the server

Slide 170: servlets

Slide 171: JSP pages

Slide 172: ASP pages

Slide 173: tag libaries

Slide 174: PHP pages

Slide 175: (and lots of embedded sql)

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

Slide 177: server-driven UI

Slide 178: model-view- controller (MVC)

Slide 179: (server-assisted MVC)

Slide 180: server generates UI

Slide 181: UI is a template page

Slide 182: same HTML (almost always)

Slide 183: not very environmentally friendly 

Slide 184: age of server-side infrastructure

Slide 185: application servers

Slide 186: “middleware”

Slide 187: new app complexities on the server side

Slide 188: cache business objects

Slide 189: cache page templates

Slide 190: cache SQL queries

Slide 191: session state

Slide 192: stored application state

Slide 193: (we used to call it application state)

Slide 194: session clustering

Slide 195: sticky sessions (optimize load balancing)

Slide 196: clustering not linear

Slide 197: middleware wars

Slide 198: hundreds of app servers

Slide 199: lots of server-side frameworks

Slide 200: lots of big companies rolled their own initially

Slide 201: IBM

Slide 202: Sun

Slide 203: BEA (weblogic)

Slide 204: organized around J2EE specification

Slide 205: community-based (Sun JCP)

Slide 206: heavy weight

Slide 207: overly complex

Slide 208: too many specs to keep up with

Slide 209: widely adopted

Slide 210: clustering

Slide 211: fail-over

Slide 212: high-availability

Slide 213: Microsoft .NET

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

Slide 215: wasn’t even java (of course not)

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

Slide 217: part of Microsoft .NET

Slide 218: web-programming model

Slide 219: (for Microsoft platform)

Slide 220: 1999

Slide 222: (not flavor flav)

Slide 224: (marc fleury)

Slide 225: JBoss

Slide 226: Java application server (and eventually J2EE)

Slide 227: FREE! (well, almost)

Slide 228: open source

Slide 229: J2EE programming model (and it almost made J2EE fun)

Slide 230: 2001 (JBoss, LLC)

Slide 231: innovation primarily driven by server- side infrastructure

Slide 232: apps not much different (1999)

Slide 233: server-assisted MVC

Slide 234: service oriented architecture

Slide 235: middleware = SOA

Slide 236: service federations

Slide 237: distributed registries

Slide 238: service composition

Slide 239: service orchestration

Slide 240: portals

Slide 241: ESB

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

Slide 243: But business applications still function the same

Slide 244: Jesse James Garrett “AJAX” 2005

Slide 245: Microsoft & Netscape

Slide 246: early inter-applet techniques

Slide 247: applets to slow to start

Slide 248: IE5 – MSFT created XHR

Slide 249: Microsoft Outlook Web (Microsoft was innovating!)

Slide 250: Web 1.5

Slide 251: MVC + Ajax

Slide 252: round peg square hole

Slide 253: page driven paradigm with async behavior

Slide 254: look Ma – no page refresh

Slide 255: cool, but. . .

Slide 256: it’s only “pimp my web 1.0”

Slide 258: but lots of startups and innovative web companies thinking big

Slide 259: web 2.0

Slide 260: starting to think about apps again

Slide 261: networks are faster

Slide 262: hardware is cheap

Slide 263: software is moving to open source

Slide 264: and everyone is wired and on the web

Slide 265: user experience

Slide 268: richer apps

Slide 269: dynamic info

Slide 270: web is the platform

Slide 274: (you can do that?)

Slide 278: (my enterprise apps need that)

Slide 279: (but, how?)

Slide 280: different solutions (we’re innovating again)

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

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

Slide 284: (yawn…)

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

Slide 287: (surprise!)

Slide 288: Adobe has an innovative approach that leverages Flash

Slide 290: wonderful product

Slide 291: open source (kind of)

Slide 292: “Web 2.0” is overloaded

Slide 293: Web 2.0 = rich client

Slide 294: rich client = client programming

Slide 295: rich client != UI code in server

Slide 296: okay, but how?

Slide 297: Javascript

Slide 298: (and lots of it)

Slide 299: simple login form example

Slide 300: <html> <head> <title>Simple Ajax Login Example</title> <script language="Javascript"> 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("Microsoft.XMLHTTP"); } 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("result").innerHTML = str; } </script> </head> <body> <form name="f1"> <p>username: </p> <input name=”username" type="text”/> <p>password: </p> <input name=”password" type="text”/> <input value=”login" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/simple-ajax-example.cgi")'></p> <div id="result"></div> </form> </body> </html>

Slide 301: (Yikes!!!)

Slide 302: 25+ lines of Javascript

Slide 303: for one simple login form

Slide 304: rich client = mountains of JS?

Slide 305: mountains of JS = nightmare

Slide 306: (crap. now what?)

Slide 307: open standards + open source (to the rescue)

Slide 308: Javascript libraries

Slide 309: and lots of them

Slide 310: widget libraries

Slide 311: Ajax libraries

Slide 312: effect libraries

Slide 313: (here’s just a few)

Slide 314: Prototype

Slide 315: Scriptaculous

Slide 316: JQuery

Slide 317: Dojo

Slide 318: ExtJS

Slide 319: Yahoo YUI

Slide 320: Mootools

Slide 321: Open Rico

Slide 322: Qooxdoo

Slide 323: MochiKit

Slide 324: Lightbox

Slide 325: Greybox

Slide 326: Lightbox Plus

Slide 327: Nifty Corners

Slide 328: (okay to breathe)

Slide 329: (you get the point)

Slide 330: all great libraries!

Slide 331: how do I keep up with them all?

Slide 332: multiple versions, bug fixes

Slide 333: integration issues, glue code namespace issues

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

Slide 335: with chaos comes opportunity

Slide 336: open standards

Slide 337: open source (the entire bits)

Slide 338: open developer community

Slide 339: integrated RIA programming model (HTML, CSS and Javascript)

Slide 340: what does that mean?

Slide 341: well, what does an RIA programmer do?

Slide 342: event handling, Ajax, DHTML

Slide 343: (Got it!)

Slide 344: login form revisited

Slide 345: <html> <head> <title>Hello World 2.0</title> <script src="javascripts/appcelerator.js" type="text/javascript"></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>

Slideshare.net (beta)