Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
Upcoming SlideShare
Loading in...5
×
 

Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator

on

  • 7,732 views

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

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

Statistics

Views

Total Views
7,732
Views on SlideShare
7,481
Embed Views
251

Actions

Likes
4
Downloads
109
Comments
0

14 Embeds 251

http://www.appcelerant.com 148
http://blog.jeffhaynie.us 73
http://www.linkedin.com 10
http://mangolingo.blogspot.com 6
http://localhost 4
http://127.0.0.1:81 2
http://web.archive.org 1
http://a-sure.blogspot.com 1
http://www.slideshare.net 1
http://radiant.stormventures.com.s19693.gridserver.com 1
http://praneetmokkapati.blogspot.com 1
http://feeds.feedburner.com 1
http://tag.portblogs.com 1
https://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator Presentation Transcript

  • AJAX WORLD March 2008
  • Jeff Haynie Co-founder & CEO [email_address] blog.jeffhaynie.us twitter.com/jhaynie linkedin.com/in/jhaynie
  • how did we get here?
  • 1991
  • Dave Litwack Mitchell Kertzman
  • Powersoft
  • Powerbuilder
  • client / server
  • proprietary
  • rapid app dev
  • database integration
  • $5.2M (6 months from 1.0)
  • Profitable: year one
  • IPO Feb. 1993 (~3 years)
  • $57M 1993
  • suits came knocking
  •  
  • $900M - 1995
  • Oops (sybase fabricated sales figures)
  • revolutionized the way we built apps
  • focus on the app (and ultimately, our business requirements)
  •  
  • 1991
  • Comdex (Atlanta)
  •  
  •  
  • client / server
  • easy to build apps
  • event driven
  • integration to DB
  • last release: 1996 (vb6)
  •  
  • March 31, 2005 (extended to March 2008 - better hurry up and replace)
  • focus on the app
  • 2-tier architecture
  • client = application
    • rapid app creation
    • productivity
    • ease of use
  • distribution
  • security
  • programming model
  • client/server was proliferating, something else was happening
  • 1989
  •  
  • tim berners-lee
  • CERN (europe)
  • world wide web
  • www
  • web
  • hyper text transfer protocol
  • http
  • http://www.example.com (if you don’t know this you’re in the wrong presentation)
  • directory (browsing)
  • sharing content (research)
  • primary display was text
  • network of connected computers
  • killer app = information
  • 1992
  •  
  • marc andreessen
  • student at univ of illinois
  • mosaic “web browser”
  •  
  •  
  • 1994
  •  
  • Mosaic Communications Corporation
  • Netscape Communications
  • Netscape Communicator
  •  
  • IPO 1995
  • browser wars (1995)
  • massive adoption
  • web sites were slow internet was slow
  • almost all initial web sites were content-based
  • the “web” initially competed with consumer info services like AOL, Compuserve and Prodigy
  • primarily still web content you “browsed”
  •  
  • distributed free (brilliant and bold move)
  • bundled win95 (plus! pack)
  • (isn’t it great being a monopoly?)
  • based on spyglass mosaic (remember Netscape?)
  • MASSIVE ADOPTION
  • January 1998
  • mozilla open source
  • (kick butt release party)
  •  
  • microsoft had 2 primary killer advantages:
  • Operating System platform
  • Developer Community
  • May 1998
  • DOJ ruled MSFT violated anti-trust
  • (too late, game was pretty much over)
  • November 1998
  • $4.2 BILLION
  •  
  • web browser changed the way we think about apps
  • distribution of apps
  • programming model
  • development of software
  • web 1.0
  • three-tier architecture
  • server is the brain
  • client is for display (doesn’t that sound like the mainframe architecture?)
  • the way we built apps changed based on “the web”
  • common gateway interface (CGI)
  • netscape API (nsapi)
  • web servers
  • app servers
  • database servers
  • caching servers
  • web pages
  • web apps
  • massive new way of thinking about the web and apps (a lot was fueled by dot.com bubble)
  • 1995
  •  
  • James Gosling
  •  
  • Java
  • Write once, Run anywhere
  • Browser
  • Applets
  • Java Web Start (some years later after applets failed)
  • slow
  • big
  • UI differences
  • web app?
  • native app? (sure didn’t look like one)
  • programming model
  • browser plugin
  • java language was great!
  • but … apparent java would not be deployed in browser environment
  • java did change the way we built web sites (and it still continues today)
  • why the web?
  • web programming model
  • distributed
  • easy to program
  • UI simple to layout
  • cross-browser differences
  • open source emerging rapidly with Internet
  • standards-based
  • 1994
  •  
  • tim berners-lee (remember, he created the web?)
  • preserve, promote web standards
  • “ ensure compatibility among vendors”
  • (are we there yet?)
  • HTML
  • CSS
  • XML
  • DOM
  • CGI
  • VoiceXML / CCXML
  • (too many more to list)
  • HTML 1.0 – 1993 (IETF WD)
  • HTML 2.0 – 1995 (IETF RFC)
  • HTML 3.0/3.2 (W3C)
  • HTML 4.0 (1997)
  • (XHTML came along the way)
  • HTML 5.0 (Jan 2008 - WD) 11 years!
  • Client-side data storage
  • video
  • cross document messaging
  • remoting
  • (continuing to expand idea of what a web app is)
  • XHTML or HTML?
  • most innovation has been on the server
  • servlets
  • JSP pages
  • ASP pages
  • tag libaries
  • PHP pages
  • (and lots of embedded sql)
  • cold fusion (so many other great server-side web frameworks)
  • server-driven UI
  • model-view-controller (MVC)
  • (server-assisted MVC)
  • server generates UI
  • UI is a template page
  • same HTML (almost always)
  • not very environmentally friendly 
  • age of server-side infrastructure
  • application servers
  • “ middleware”
  • new app complexities on the server side
  • cache business objects
  • cache page templates
  • cache SQL queries
  • session state
  • stored application state
  • (we used to call it application state)
  • session clustering
  • sticky sessions (optimize load balancing)
  • clustering not linear
  • middleware wars
  • hundreds of app servers
  • lots of server-side frameworks
  • lots of big companies rolled their own initially
  • IBM
  • Sun
  • BEA (weblogic)
  • organized around J2EE specification
  • community-based (Sun JCP)
  • heavy weight
  • overly complex
  • too many specs to keep up with
  • widely adopted
  • clustering
  • fail-over
  • high-availability
  • Microsoft .NET
  • wasn’t J2EE (not necessarily a bad thing)
  • wasn’t even java (of course not)
  • 2000 – Microsoft C# (feels a lot like Java)
  • part of Microsoft .NET
  • web-programming model
  • (for Microsoft platform)
  • 1999
  •  
  • (not flavor flav)
  •  
  • (marc fleury)
  • JBoss
  • Java application server (and eventually J2EE)
  • FREE! (well, almost)
  • open source
  • J2EE programming model (and it almost made J2EE fun)
  • 2001 (JBoss, LLC)
  • innovation primarily driven by server-side infrastructure
  • apps not much different (1999)
  • server-assisted MVC
  • service oriented architecture
  • middleware = SOA
  • service federations
  • distributed registries
  • service composition
  • service orchestration
  • portals
  • ESB
  • $60B Market (at least they say it was)
  • But business applications still function the same
  • Jesse James Garrett “AJAX” 2005
  • Microsoft & Netscape
  • early inter-applet techniques
  • applets to slow to start
  • IE5 – MSFT created XHR
  • Microsoft Outlook Web (Microsoft was innovating!)
  • Web 1.5
  • MVC + Ajax
  • round peg square hole
  • page driven paradigm with async behavior
  • look Ma – no page refresh
  • cool, but. . .
  • it’s only “pimp my web 1.0”
  •  
  • but lots of startups and innovative web companies thinking big
  • web 2.0
  • starting to think about apps again
  • networks are faster
  • hardware is cheap
  • software is moving to open source
  • and everyone is wired and on the web
  • user experience
  •  
  •  
  • richer apps
  • dynamic info
  • web is the platform
  •  
  •  
  •  
  • (you can do that?)
  •  
  •  
  •  
  • (my enterprise apps need that)
  • (but, how?)
    • different solutions
    (we’re innovating again)
  • different approaches (and some feel like déjà vu)
  • Sun doing something similar as before (as best we can tell)
  •  
  • (yawn…)
  • MSFT doing something similar as before (it’s great being on top)
  •  
  • (surprise!)
  • Adobe has an innovative approach that leverages Flash
  •  
  • wonderful product
  • open source (kind of)
  • “ Web 2.0” is overloaded
  • Web 2.0 = rich client
  • rich client = client programming
  • rich client != UI code in server
  • okay, but how?
  • Javascript
  • (and lots of it)
  • simple login form example
  • <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>
  • (Yikes!!!)
  • 25+ lines of Javascript
  • for one simple login form
  • rich client = mountains of JS?
  • mountains of JS = nightmare
  • (crap. now what?)
  • open standards + open source (to the rescue)
  • Javascript libraries
  • and lots of them
    • widget libraries
    • Ajax libraries
    • effect libraries
  • (here’s just a few)
  • Prototype
  • Scriptaculous
  • JQuery
  • Dojo
  • ExtJS
  • Yahoo YUI
  • Mootools
  • Open Rico
  • Qooxdoo
  • MochiKit
  • Lightbox
  • Greybox
  • Lightbox Plus
  • Nifty Corners
  • (okay to breathe)
  • (you get the point)
  • all great libraries!
  • how do I keep up with them all?
  • multiple versions, bug fixes
  • integration issues, glue code namespace issues
  • (but I thought that was the platform vendor’s job!)
  • with chaos comes opportunity
    • open standards
    • open source (the entire bits)
    • open developer community
    • integrated RIA programming model (HTML, CSS and Javascript)
  • what does that mean?
  • well, what does an RIA programmer do?
  • event handling, Ajax, DHTML
  • (Got it!)
  • login form revisited
  • <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>
  • on=“r:login.request then show”
  • (what is that?)
  • event handling + Ajax + DHTML one simple expression language
  • it’s an integrated RIA programming model
  • that leverages standards (like HTML, CSS and Javascript)
  • it codes Javascript so you don’t have to
  • (Web Expression Language)
  • cool, but what about widgets?
  • (good question)
    • I want to be able to create new widgets
    • leverage all of the great existing widgets
    • I want one single integrated way to use them ALL
  •  
  • how about this:
  • <!– 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”/>
  • ExtJS and YUI in one widget framework?
  • (yes, and any others you want)
  • including Flex widgets!
  • (and you can easily create your own)
  •  
  • okay, calm down Sally
  • let’s recap
  • Web Expression Language + Unified Widget Framework + Open Standards + Open Source =
  • fully integrated RIA platform
  •  
  • RIA is good but what about my services?
  • (and that $60B investment in SOA?)
  • you want to mix your RIA with your SOA
  • RIA + SOA
  • full decoupling of the rich client from its services
  • they share only one thing
  • a lightweight message contract (aren’t they services?)
  • (need a picture?)
  • Rich Client Service r:login.request {‘username’:’joe’, ‘password’:’****’} r:login.response {‘success’:true}
  • Contract = message name
  • login.request and login.response
  • plus input and output data
  • (that’s it!)
  • if the contract is message-based
  • why does the service programming language matter?
  • good question.
  • (it doesn’t)
  • with a message-based contract you can create services in any programming language!
  • we call these SOA Integration Points
  • and we have them for Java, Ruby, PHP, .NET, Python and Perl
  • how does that work?
  • let’s look at Java
  • take a plain Java object (POJO)
  • and add a single annotation
  • @Service(request = ”my.request&quot;, response = ”my.response&quot;)
  • to a Java method – like so:
  • 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 } }
  • (that’s it!) really….
  • each SOA Integration Point
    • service routing
    • data marshalling
  • (what does that mean?)
  • it means you can place a native object or array of objects into the response
  • and we’ll take care of the rest.
  • the result is:
  • you focus on what you do best: BUILD APPLICATIONS!
  • instead of playing the role of platform vendor
  • that’s our job!
  •  
  • we are the RIA + SOA company
  • RIA + SOA – that’s good but what about prototyping?
  • (glad you asked)
  • remember our message-based contract?
  • it enables location independence for services
  • meaning mock services can reside in the RIA
  • meaning you can build fully functional RIA prototypes
  • without a single line of service code (or even web server)
  • with 100% reusability!
  • we call them Interactive Use Cases
  • build your application while you build your requirements
  • no more server-focused development
  • no more 100-page requirements documents (that never matches the end application)
  • it’s technology-enabled Agile development
    • quick iterations
    • fully functional (at every point)
    • makes it easy to gather feedback from key stakeholders
  • product managers
  • service developers
  • documentation team
  • QA
  • sales team
  • and even customers
  • after incorporating feedback
  • you have two key deliverables:
    • fully functional RIA prototype (100% reusable)
  • 2. fully defined message contracts
  • (makes service development and integration a snap)
  •  
  • fully integrated RIA+SOA platform
  • an entirely new and better way to build the next generation of web applications
  • help us build the best RIA+SOA open source developer community www.appcelerator.org
  •