AJAX WORLDAJAX WORLDMarch 2008March 2008

Jeff HaynieJeff HaynieCo-founder & CEOCo-founder & CEO

jeff@appcelerator.comjeff@appcelerator.comblog.jeffhaynie.usblog.jeffhaynie.ustwitter.com/jhaynietwitter.com/jhaynielinkedin.com/in/jhaynielinkedin.com/in/jhaynie

how did we get how did we get here?here?

19911991

Dave LitwackDave LitwackMitchell KertzmanMitchell Kertzman

PowersoftPowersoft

PowerbuilderPowerbuilder

client / serverclient / server

proprietaryproprietary

rapid app devrapid app dev

database integrationdatabase integration

$5.2M$5.2M(6 months from 1.0)(6 months from 1.0)

Profitable: year oneProfitable: year one

IPO Feb. 1993IPO Feb. 1993(~3 years)(~3 years)

$57M 1993$57M 1993

suits came knockingsuits came knocking

$900M - 1995$900M - 1995

OopsOops

(sybase fabricated sales figures)(sybase fabricated sales figures)

revolutionized the revolutionized the way we built appsway we built apps

focus on the appfocus on the app

(and ultimately, our business requirements)(and ultimately, our business requirements)

19911991

ComdexComdex(Atlanta)(Atlanta)

client / serverclient / server

easy to build appseasy to build apps

event drivenevent driven

integration to DBintegration to DB

last release: 1996last release: 1996(vb6)(vb6)

March 31, 2005March 31, 2005

(extended to March 2008 - (extended to March 2008 - better hurry up and replace)better hurry up and replace)

focus on the appfocus on the app

2-tier architecture2-tier architecture

client = applicationclient = application

rapid app creationrapid app creation

productivityproductivity

ease of useease of use

distributiondistribution

securitysecurity

programming model

client/server was client/server was proliferating, proliferating,

something else was something else was happeninghappening

19891989

tim berners-leetim berners-lee

CERNCERN(europe)(europe)

world wide webworld wide web

wwwwww

webweb

hyper text transferhyper text transferprotocolprotocol

httphttp

http://http://www.example.comwww.example.com

(if you don’t know this you’re in the wrong presentation)(if you don’t know this you’re in the wrong presentation)

directorydirectory(browsing)(browsing)

sharing contentsharing content

(research)(research)

primary display was primary display was texttext

network of network of connected connected computerscomputers

killer app = killer app = informationinformation

19921992

marc andreessen marc andreessen

student at student at univ of illinoisuniv of illinois

mosaicmosaic“web browser”“web browser”

19941994

Mosaic Communications Mosaic Communications CorporationCorporation

Netscape CommunicationsNetscape Communications

Netscape Netscape CommunicatorCommunicator

IPO 1995IPO 1995

browser wars(1995)

massive adoptionmassive adoption

web sites were slowweb sites were slowinternet was slowinternet was slow

almost all initial web almost all initial web sites were content-sites were content-

basedbased

the “web” initially the “web” initially competed with competed with

consumer info services consumer info services like AOL, Compuserve like AOL, Compuserve

and Prodigyand Prodigy

primarily still web primarily still web content you “browsed”content you “browsed”

distributed distributed freefree

(brilliant and bold move)(brilliant and bold move)

bundled win95 bundled win95 (plus! pack)(plus! pack)

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

based on spyglass mosaicbased on spyglass mosaic

(remember Netscape?)(remember Netscape?)

MASSIVE ADOPTIONMASSIVE ADOPTION

January 1998January 1998

mozilla open sourcemozilla open source

(kick butt release party)(kick butt release party)

microsoft had 2 primary microsoft had 2 primary killer advantages:killer advantages:

Operating System platformOperating System platform

Developer CommunityDeveloper Community

May 1998May 1998

DOJ ruled MSFT violated anti-trust

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

November 1998November 1998

$4.2 BILLION$4.2 BILLION

web browser changed web browser changed the way we think about the way we think about

appsapps

distribution of appsdistribution of apps

programming modelprogramming model

development of softwaredevelopment of software

web 1.0web 1.0

three-tier three-tier architecturearchitecture

server is the brainserver is the brain

client is for displayclient is for display

(doesn’t that sound like the mainframe architecture?)(doesn’t that sound like the mainframe architecture?)

the way we built the way we built apps changed based apps changed based

on “the web”on “the web”

common gateway interfacecommon gateway interface

(CGI)(CGI)

netscape APInetscape API

(nsapi)(nsapi)

web serversweb servers

app serversapp servers

database serversdatabase servers

caching serverscaching servers

web pagesweb pages

web appsweb apps

massive new way of massive new way of thinking about the thinking about the

web and appsweb and apps

(a lot was fueled by dot.com bubble)(a lot was fueled by dot.com bubble)

19951995

James GoslingJames Gosling

JavaJava

Write once,Write once,Run anywhereRun anywhere

BrowserBrowser

AppletsApplets

Java Web StartJava Web Start

(some years later after applets failed)(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 java language was great!great!

but … apparent java but … apparent java would not be would not be deployed in deployed in

browser browser environmentenvironment

java did change the java did change the way we built web way we built web

sitessites

(and it still continues today)(and it still continues today)

why the web?why the web?

web programming web programming modelmodel

distributeddistributed

easy to programeasy to program

UI simple to layoutUI simple to layout

cross-browser differences

open source open source emerging rapidly emerging rapidly

with Internetwith Internet

standards-basedstandards-based

19941994

tim berners-leetim berners-lee

(remember, he created the web?)(remember, he created the web?)

preserve, promotepreserve, promoteweb standardsweb standards

““ensure compatibility ensure compatibility among vendors”among vendors”

(are we there yet?)(are we there yet?)

HTMLHTML

CSSCSS

XMLXML

DOMDOM

CGICGI

VoiceXML / CCXMLVoiceXML / CCXML

(too many more to list)(too many more to list)

HTML 1.0 – 1993HTML 1.0 – 1993(IETF WD)(IETF WD)

HTML 2.0 – 1995HTML 2.0 – 1995(IETF RFC)(IETF RFC)

HTML 3.0/3.2HTML 3.0/3.2(W3C)(W3C)

HTML 4.0HTML 4.0(1997)(1997)

(XHTML came along (XHTML came along the way)the way)

HTML 5.0(Jan 2008 - WD)

11 years!

Client-side data Client-side data storagestorage

videovideo

cross document cross document messagingmessaging

remotingremoting

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

XHTML or HTML?

most innovation has most innovation has been on the serverbeen on the server

servletsservlets

JSP pagesJSP pages

ASP pagesASP pages

tag libariestag libaries

PHP pagesPHP pages

(and lots of (and lots of embedded sql)embedded sql)

cold fusioncold fusion

(so many other great server-side web frameworks)(so many other great server-side web frameworks)

server-driven UI

model-view-model-view-controller controller

(MVC)(MVC)

(server-assisted (server-assisted

MVC)MVC)

server generates UI

UI is a template page

same HTML(almost always)

not very environmentally

friendly

age of server-sideage of server-sideinfrastructureinfrastructure

application serversapplication servers

““middleware”middleware”

new app new app complexities on the complexities on the

server sideserver side

cache business cache business objectsobjects

cache page cache page templatestemplates

cache SQL queriescache SQL queries

session statesession state

stored application stored application statestate

(we used to call it (we used to call it application state)application state)

session clusteringsession clustering

sticky sessionssticky sessions

(optimize load (optimize load balancing)balancing)

clustering not linearclustering not linear

middlewaremiddlewarewarswars

hundreds of app hundreds of app serversservers

lots of server-side lots of server-side frameworksframeworks

lots of big lots of big companies rolled companies rolled their own initiallytheir own initially

IBMIBM

SunSun

BEABEA(weblogic)(weblogic)

organized around organized around J2EE specificationJ2EE specification

community-basedcommunity-based(Sun JCP)(Sun JCP)

heavy weight

overly complex

too many specs to keep up with

widely adoptedwidely adopted

clusteringclustering

fail-overfail-over

high-availabilityhigh-availability

Microsoft .NET

wasn’t J2EEwasn’t J2EE

(not necessarily a bad thing)(not necessarily a bad thing)

wasn’t even javawasn’t even java

(of course not)(of course not)

2000 – Microsoft C#2000 – Microsoft C#

(feels a lot like Java)(feels a lot like Java)

part of part of Microsoft .NETMicrosoft .NET

web-programming web-programming modelmodel

(for Microsoft platform)

19991999

(not flavor flav)(not flavor flav)

(marc fleury)(marc fleury)

JBossJBoss

Java application Java application serverserver

(and eventually J2EE)(and eventually J2EE)

FREE!FREE!

(well, almost)(well, almost)

open sourceopen source

J2EE programming J2EE programming modelmodel

(and it almost made J2EE fun)(and it almost made J2EE fun)

20012001(JBoss, LLC)(JBoss, LLC)

innovation primarily innovation primarily driven by server-driven by server-

side infrastructureside infrastructure

apps not much different

(1999)

server-assisted MVCserver-assisted MVC

service oriented service oriented architecturearchitecture

middleware = SOAmiddleware = SOA

service federationsservice federations

distributed distributed registriesregistries

service compositionservice composition

service service orchestrationorchestration

portalsportals

ESBESB

$60B Market$60B Market

(at least they say it was)(at least they say it was)

But business applications still

function the same

Jesse James GarrettJesse James Garrett“AJAX” 2005“AJAX” 2005

Microsoft & Microsoft & NetscapeNetscape

early inter-appletearly inter-applettechniquestechniques

applets to slow to startapplets to slow to start

IE5 – MSFT createdIE5 – MSFT createdXHRXHR

Microsoft Outlook WebMicrosoft Outlook Web

(Microsoft was innovating!)(Microsoft was innovating!)

Web 1.5Web 1.5

MVC + AjaxMVC + Ajax

round peground pegsquare holesquare hole

page driven page driven paradigm with paradigm with async behaviorasync behavior

look Ma – no page refreshlook Ma – no page refresh

cool, but. . .cool, but. . .

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

but lots of startups and but lots of startups and innovative web companies innovative web companies

thinking bigthinking big

web 2.0web 2.0

starting to think starting to think about apps againabout apps again

networks are fasternetworks are faster

hardware is cheaphardware is cheap

software is moving software is moving to open sourceto open source

and everyone is and everyone is wired and on the wired and on the

webweb

user experienceuser experience

richer appsricher apps

dynamic infodynamic info

web is the platformweb is the platform

(you can do that?)(you can do that?)

(my enterprise apps (my enterprise apps need that)need that)

(but, how?)(but, how?)

different solutionsdifferent solutions

(we’re innovating again)(we’re innovating again)

different different approachesapproaches

(and some feel like déjà vu)(and some feel like déjà vu)

Sun doing Sun doing something similar something similar

as beforeas before(as best we can tell)(as best we can tell)

(yawn…)(yawn…)

MSFT doing MSFT doing something similar something similar

as beforeas before(it’s great being on top)(it’s great being on top)

(surprise!)(surprise!)

Adobe has an Adobe has an innovative approach innovative approach that leverages Flashthat leverages Flash

wonderful productwonderful product

open sourceopen source

(kind of)(kind of)

““Web 2.0” is Web 2.0” is overloadedoverloaded

Web 2.0 = rich clientWeb 2.0 = rich client

rich client = client programmingrich client = client programming

rich client != UI code in serverrich client != UI code in server

okay, but how?okay, but how?

JavascriptJavascript

(and lots of it)

simple login formsimple login formexampleexample

<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>

(Yikes!!!)(Yikes!!!)

25+ lines of Javascript

for one simple login form

rich client = mountains of JS?rich client = mountains of JS?

mountains of JS = nightmare

(crap. now what?)(crap. now what?)

open standards +open source

(to the rescue)

open standards +open source

(to the rescue)

Javascript librariesJavascript libraries

and lots of themand lots of them

widget librarieswidget libraries

Ajax librariesAjax libraries

effect librarieseffect libraries

(here’s just a few)(here’s just a few)

PrototypePrototype

ScriptaculousScriptaculous

JQueryJQuery

DojoDojo

ExtJSExtJS

Yahoo YUIYahoo YUI

MootoolsMootools

Open RicoOpen Rico

QooxdooQooxdoo

MochiKitMochiKit

LightboxLightbox

GreyboxGreybox

Lightbox PlusLightbox Plus

Nifty CornersNifty Corners

(okay to breathe)(okay to breathe)

(you get the point)(you get the point)

all great libraries!all great libraries!

how do I keep up with them all?

multiple versions, bug fixes

integration issues, glue codenamespace issues

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

with chaos comes with chaos comes opportunityopportunity

open standardsopen standards

open sourceopen source

(the entire bits)(the entire bits)

open developer open developer communitycommunity

integrated RIA integrated RIA programming model programming model

(HTML, CSS and Javascript)(HTML, CSS and Javascript)

what does that mean?what does that mean?

well, what does an RIA well, what does an RIA programmer do?programmer do?

event handling, Ajax, event handling, Ajax, DHTMLDHTML

(Got it!) (Got it!)

login form revisited login form revisited

<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>

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

(what is that?)(what is that?)

event handling + Ajax + DHTML

one simple expression language

event handling + Ajax + DHTML

one simple expression language

it’s an integrated RIA it’s an integrated RIA programming modelprogramming model

that leverages standards that leverages standards

(like HTML, CSS and (like HTML, CSS and Javascript)Javascript)

it codes Javascript so it codes Javascript so you don’t have toyou don’t have to

(Web Expression Language)(Web Expression Language)

cool, but what about cool, but what about widgets?widgets?

(good question)(good question)

I want to be able to I want to be able to create new widgetscreate new widgets

leverage all of the leverage all of the great existing widgetsgreat existing widgets

I want one single I want one single integrated way to use integrated way to use

them ALLthem ALL

how about this:how about this:

<!– ExtJS Grid --><app:ext_grid on="l:show.user.response then execute"

property="rows" width="390"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="l:show.calendar then execute"

title=”My Calendar" 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 ExtJS and YUI in one widget framework?widget framework?

(yes, and any others you (yes, and any others you want)want)

including Flex widgets!including Flex widgets!

(and you can easily (and you can easily create your own)create your own)

okay, calm down Sallyokay, calm down Sally

let’s recaplet’s recap

Web Expression Language + Web Expression Language + Unified Widget Framework +Unified Widget Framework +

Open Standards +Open Standards +Open Source = Open Source =

fully integrated RIA platformfully integrated RIA platform

RIA is good but what RIA is good but what about my services?about my services?

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

you want to mix your RIA you want to mix your RIA with your SOAwith your SOA

RIA + SOARIA + SOA

full decoupling of the rich full decoupling of the rich client from its services client from its services

they share only one they share only one thingthing

a lightweight message a lightweight message contractcontract

(aren’t they services?)(aren’t they services?)

(need a picture?)(need a picture?)

Rich ClientRich Client ServiceService

r:login.request{‘username’:’joe’, ‘password’:’****’}

r:login.response{‘success’:true}

Contract = message nameContract = message name

login.request login.request and and login.responselogin.response

plus input and output dataplus input and output data

(that’s it!)(that’s it!)

if the contract is message-basedif the contract is message-based

why does the service why does the service programming language matter?programming language matter?

good question.good question.

(it doesn’t)(it doesn’t)

with a message-based contract with a message-based contract you can create services in any you can create services in any

programming language!programming language!

we call these SOA we call these SOA Integration PointsIntegration Points

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

PerlPerl

how does that work?how does that work?

let’s look at Javalet’s look at Java

take a plain Java object take a plain Java object (POJO)(POJO)

and add a single and add a single annotationannotation

@Service(request = @Service(request = ”my.request", response = ”my.request", response =

”my.response")”my.response")

to a Java method – like so: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", response = ”my.response")

protected void myRequest(Message request, Message response) throws Exception

{// service logic here

}}

(that’s it!)(that’s it!)

really….

each SOA Integration Pointeach SOA Integration Point

service routingservice routing

data marshallingdata marshalling

(what does that mean?)(what does that mean?)

it means you can place a it means you can place a native object or array of native object or array of

objects into the responseobjects into the response

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

the result is:the result is:

you focus on what you do best:you focus on what you do best:

BUILD APPLICATIONS!BUILD APPLICATIONS!

instead of playing the role of platform vendor

that’s our job!that’s our job!

we are the RIA + SOA companywe are the RIA + SOA company

RIA + SOA – that’s good RIA + SOA – that’s good but what about but what about

prototyping?prototyping?

(glad you asked)(glad you asked)

remember our message-remember our message-based contract?based contract?

it enables location it enables location independence for servicesindependence for services

meaning mock services can meaning mock services can reside in the RIAreside in the RIA

meaning you can build fully meaning you can build fully functional RIA prototypes functional RIA prototypes

without a single line of without a single line of service codeservice code

(or even web server)(or even web server)

with 100% reusability!with 100% reusability!

we call them we call them Interactive Use CasesInteractive Use Cases

build your application build your application while you build your while you build your

requirementsrequirements

no more server-focused no more server-focused developmentdevelopment

no more 100-page no more 100-page requirements requirements

documentsdocuments

(that never matches the end application)(that never matches the end application)

it’s technology-enabled it’s technology-enabled Agile developmentAgile development

quick iterations quick iterations

fully functional fully functional

(at every point)(at every point)

makes it easy to gather makes it easy to gather feedback from key feedback from key

stakeholdersstakeholders

product managersproduct managers

service developersservice developers

documentation teamdocumentation team

QA QA

sales team sales team

and even customersand even customers

after incorporating after incorporating feedback feedback

you have two key you have two key deliverables:deliverables:

1.1. fully functional fully functional RIA prototypeRIA prototype

(100% reusable) (100% reusable)

2. fully defined 2. fully defined message contractsmessage contracts

(makes service (makes service development and development and

integration a snap)integration a snap)

fully integrated fully integrated RIA+SOA platformRIA+SOA platform

an entirely new and better an entirely new and better way to build the next way to build the next

generation of web generation of web applicationsapplications

help us build the best RIA+SOA help us build the best RIA+SOA open source developer open source developer

communitycommunity

www.appcelerator.orgwww.appcelerator.org