Service Oriented UI Architecture in the world of web, desktop and mobile applications

How the web has gone beyond the browser and we’re headed back to Client/Server Jeff Haynie

JEFF HAYNIE

CEO, AppceleratorOpen Source Developer

Twitter: jhaynieBlog: blog.jeffhaynie.us

How the web has gone beyond the browser and we’re headed back to Client/Server

Compared even to the development of the phone or TV, the Web developed very quickly.

Sir Tim Berners-LeeInventor, World Wide Web

The web was built for information retrieval

URLs are for identification

Search engines are for location of content

Web sites help us produce & consume content

Search is king

Web content has been controlled by web servers

Java has become the de-facto Enterprise platform

(.NET is pretty compelling too)

We have turned our web servers into application platforms

We want more interactivity with our users

Content is dynamic

Our apps use MVC on the server side

Our infrastructure is optimized for applications to be controlled by the server

We call this “server-assisted” MVC

Each page request is dynamically generated

Sessions are maintained on the server

Client is response for display and input

We couple our application and service logic

We try not to do it, but it still happens

Levels of indirection to make it less painful

Mix metaphors and cross concerns

Server-side programming has become too complex

(and it doesn’t have to be)

Great for the tech book publishers

We have one, too!

J2EE hearts XML

Applications are distinctly different than services

Different use cases

Different technologies

Different skill sets

The Browser has been our modern dumb terminal

Applications today are coupled at the server tier

Still same development effort

Web services in enterprise suffer the same fate

Rapid iteration difficult, if not impossible

Web 2.0

Remix the web with services

We’ve started thinking about platforms that provide services

Services are separate from applications

Web 2.0 (accidently) introduced separation of concerns

Services were designed to be separated

Mashups allowed consumption and production

Clients independently developed from backend

We call this Web 2.0

Facebook

Flickr

Google Maps

Twitter

SocialCommunitesSharingRSS

Blogging

Microformats

Social bookmarking

Tagging

Web 2.0 is the divorce of services from applications.

The Applications are back in control

Applications can be built with no backend of their own

We’re going back in time

We call this Service Oriented UI

Services are distinctly separated from the UI

No assumptions need to be made about the UI

UI can consume different, varied services

It’s the application stupid.

Services are important. The “platform”

Services should be lightweight

Applications control services

We used to call this Client / Server.

The web is a client server architecture

We lost our way along the way

Things became tightly coupled

The web is becoming more than a website

The “web” can describe any number of ways of consuming and producing bits, on any number of devices, at multiple locations

We’re going into new territory

Phone is no longer a “phone”

The Web is in our back pocket

The Web is in our living room

The Web is in your PC bios

Web is coming (in) to a desktop near you

We have no choice anymore about applications and services

The web has become the ultimate application platform

Flexibility of distribution

Available of technologies and collaboration

Global marketplace and workplace

SOUI attributes

Separation of application from services

Rapid prototyping of application without backend

No throwaway code

Ability to iterate with different constituents

SOUI is about the applicationUser experience through usability

Current model of development is tightly coupled

Each phase has impact on both sides

Server dominates UI

Dev cycle is elongated because of server-side

SOUI enables Interactive Use Cases

User-driven development through use cases

Technology enabled Agile

Because functional requirements suck

If I had asked my customers what they wanted, they would have told me ‘a faster horse‘.

Henry Ford

IUCs fulfillment of agile dev

Client application can be fully developed with little to no backend

Fast iteration of front-end application

Mock-out of backend-services

Where are SOUI principles applied?

Lots of Web 2.0 applications

Adobe Flex and Flash

Microsoft Silverlight

SOUI architecture

Client is the application and controls state, logic

Services are stateless

Services provide well-known API

Appcelerator is a SOUI architecture

SDK provides building client-applications

Services tier cleanly separated

7 major programming languages, major frameworks

Appcelerator Java support

Java support out of the box

Rapid service prototyping with Jetty

Clean, simple development

Java 5 annotation, POJO driven

Appcelerator for building client

Declarative AJAX, Web Expression Language

Integrated services

Message Oriented

Appcelerator cleanly separates

Appcelerator Web SDK

Web Expression Language - DSL

Message Broker

Unified UI Widgets

on [event] then [action]

Appcelerator ServicesIntentionally thin

ApplicationApplication Web ServerWeb ServerHTTP

Application makes request for files

ApplicationApplication Web ServerWeb ServerHTTP

Web server returns static files

Application PageApplication Page

Application “compiles” page

ElementsElements WidgetsWidgets ScriptsScripts

Message BrokerMessage Broker

ServicesServices

ServicesServices

ServicesServices

AJAXAsynchronous Javascript

Appcelerator client example

Appcelerator Services are lightweight

Simple annotation style POJO development

Works well with other frameworks like Spring

Makes no assumptions about backend

Appcelerator Services example

Appcelerator Java EE

Deployable to any Java EE app server, OSGI

Integration with Jetty for development

POJO auto mapping for services

Web 3.0

ReuseRemixRefactor

Applications are moving beyond the browser

Rich desktop applications are going mainstream

Same development model with SOUI

Same tools, services, skills

Appcelerator is cross platform, cross browser

Mac OSX, Win32, Linux

Modern browsers: IE6/7, FF, Safari, Chrome, Opera

Mobile browsers: iPhone, Android, Skyfire *

Appcelerator is open source

Apache Public License

Active Developer Community

Hosted on GitHub

http://community.appcelerator.org

Early access

Available today on Manning website

In print in Spring

Download Appcelerator today

Let’s us know if you’d like to get involved

IRC #appcelerator on freenode

Twitter @appcelerator

http://getappcelerator.com

Flickr Photo Shoutouts• http://flickr.com/shutterhack• http://flickr.com/psd• http://flickr.com/cayusa• http://flickr.com/sigalakos• http://flickr.com/two-wrongs• http://flickr.com/chavals• http://flickr.com/stewf• http://flickr.com/actiondatsun• http://flickr.com/tyrussmalley

• http://flickr.com/clompers• http://flickr.com/trucolorsfly• http://flickr.com/markknol• http://flickr.com/dan_h• http://flickr.com/cvanfleteren• http://flickr.com/stevenerat• http://flickr.com/carrierdetect• http://flickr.com/jazzmasterson• http://flickr.com/re-ality• http://flickr.com/bluesmuse• http://flickr.com/niallkennedy