Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator

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="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!!!)

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="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”

(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="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 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", response = ”my.response")

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!) really….

each SOA Integration Point