View
1.063
Download
0
Category
Preview:
Citation preview
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
Recommended