Sofea and SOUI

Web future without web frameworks

Berlin.JAR 2008

Berlin, 13.09.2008

Stephan Schmidt André Neubauer

Team manager IT-development Senior developer

2

Stephan Schmidt

�Team manager IT development

�ImmobilienScout24

�CTO, Head of development,

consultant, researcher, article writer

…

�Developer for 25 years

�http://stephan.reposita.org

3

André Neubauer

�Senior Developer

�ImmobilienScout24

�Senior Developer, IT consultant, member of

ava User Group Berlin

Java developer since Java 1.2

4

Modern web applications

5

Motivation

Scaling (with fewer Resources)

Currently low flexibility of web applications

Seperation of business logic and presentation

Promised since more than 10 years

Software developers are often designers too

Web applications hard to test

High latency because of data aggreagtion on server

Amazon Dynamo defines SLAs for response times

6

What is Sofea / SOUI?

Web-Client frontends for SOA architectures

Sofea - Service-Oriented Front-End Architecture

„Life above the Service Tier“, Ganesh Prasad

Focuses on XML/XSD, not JSON

Similar: SOUI - Service-Oriented User Interface

„MVC is Dead“, Nolan Wright

Focuses on Messages

Direct access to services with AJAX

Browser as (MVC) controller

No HTML on server, no Web Framework, even no Application on Server possible

7

Why Sofea / SOUI?

Web 2.0 dramatically changed the landscape for internet applications

„The Web as Plattform“

„Services, not packaged software“

„Software above the level of a single device“

Tim O‘Reilly, What is Web 2.0, 2005

8

Sofea

Web Service

R

XML

REST

JSON

BrowserREST /

WS-*

R

XML

REST

JSON

9

Web development today

Service

View (HTML,

Ressourcen,

JS)

View

Java, HTML, JS

Controller (Java,

HTML)

Modell (Java)

R

Web-

Framework

10

Would be nice:Seperation of concerns

11

Ideas of Sofea

Presentation Tier consists of Application Download, Presentation

Flow, Data Interchange

Web 1.0 fails this

Different application downloads (e.g. Amazon S3)

Client managed Presentation Flow

Data Interchange

Not HTML => Rich data structures, data types (XML/XSD in original

SOFEA proposal, JSON possible)

MVC for Presentation Flow and Data Interchange

12

Sofea architecture

13

Benefits of Sofea

Strict seperation of presentation and business logic

Moving presentation layer to client

Performance, responsiveness

Better testability

In isolation

Currently Selenium takes a lot of time

Excellent scalability

Easy reuse, integration of servivces (orchestration)

Backend in every language possible

Java, Ruby, Python, Erlang, Scala, OCaml, …

14

Sofea in development

�… three development/desginer roles

For backend

For transformation of data

For presentation

15

Sofea – testing & prototyping

Mocking of single components (ajax engine)

Designer can create website application without developers using

JS and (iterative) try and error (loop with usability experts)

Automatic click tests possible

Later: message bus, store and replay messages

Frontend tests without any backends

Development of frontend independent of backend development

JS/HTML prototype == Finished implementation

(Marty Cagan High Fidelity prototype for product managers)

16

Sofea 2.0

Client side message bus

Similar to SOUI

Decouple client GUI

components, AJAX engine

and services

Storage of offline

applications: Google Gears

17

Example application

18

More than one Ajax (service) enginepossible

19

Mocking connectorswith a message bus

Scaling with Sofea

20

21

Scaling with client cache(+ offline application)

22

Scaling with caching proxy(E-Tag & Modified Since)

23

Scaling with service cache

Easy to implement (Memcached, ehCache) because of pure data

(XML, Json) compared to HTML pages or fragments

24

Scaling with additional services

Every backend REST service is easily stateless

All frontends can use any backend

Session state on server only used for authentication

= cache for perfomance reasons

or use security tokens

25

Scaling with a CDN (S3)(Application download)

All HTML pages are static pages on CDN

With publish to CDN, JSON and XML data are static too!

Frameworks for Sofea

26

27

Frameworks

Jersey for REST in Java (Server)

jQuery for AJAX (Server <-> Client)

OpenAjax Hub for client side message bus (Ajax <-> Client GUI)

PURE JS library for client side templating (Client GUI)

28

Jersey – Java REST

JAX-RS JSR 311 implementation from Sun

Open Source

Annotations for REST – PUT, POST, GET etc.

https://jersey.dev.java.net/

29

Jersey example

�1 // The Java class will be hosted at the URI path "/helloworld"

�2 @Path("/helloworld")

�3 public class HelloWorldResource {

�4

�5 // The Java method will process HTTP GET requests

�6 @GET

�7 // The Java method will produce content identified by the MIME Media

�8 // type "text/plain"

�9 @Produces("text/plain")

�10 public String getClichedMessage() {

�11 // Return some cliched textual content

�12 return "Hello World";

�13 }

�14 }

30

JSON with Jersey

Automatically with JAX-B, or using Builder and static methods ($)

@Inject CustomerService service;

@GET

@Path("/customer/{customerId}")

@ProduceMime({"application/json", "text/html“, “text/xml”})

public Node getList(@PathParam(“customerId")

String customerId) {

Customer customer = service.findById(customerId);

return $(

$("id", customer.getId()),

$("name", customer.getName()),

$(„adresses", new List<Adress>(customer.getAdresses()) {

protected Node item(Adress adress) {

return $(type(„adress"),

$(„street", adress.getStreet()))

}

})

);

}

31

PURE – Javascript templating

How to render a frontend application without a web framework?

Dojo, jQuery UI, extJS, …

„PURE is an Open Source JavaScript Template Engine for HTML.

Truly unobtrusive, it leaves your HTML untouched.“

Open Source, MIT Lizenz

Embedding templates in page

Seperating HTML and render directives

HTML templates without logic, simple mapping

http://beebole.com/pure/

32

PURE Beispiel

<div id=„customer">

Hello <span class="who">customer</span>

</div>

�function render() {

� var directive = {"span.who" : "name"};

� var context = { "name": customer.name };

� $('#customer').autoRender(context, directive);

�}

33

jQuery

�„jQuery is a fast and concise JavaScript Library that simplifies HTML

document traversing, event handling, animating, and Ajax interactions for

rapid web development. jQuery is designed to change the way that you

write JavaScript.“

- jQuery website

Open Source, MIT / GPL

John Resig is a JavaScript evangelist for the Mozilla Corporation

DOM, Effects, Utilities, Ajax, UI

$("p.neat").addClass("ohmy").show("slow");

34

AJAX with jQuery

� customer_put = function(customer) {

� return jQuery.ajax({

� type: "PUT",

� url: "/customers/",

� data: customer,

� success: function(customer) {

� OpenAjax.hub.publish(„customer.put.ok", customer)

� },

� dataType: "json"

� });

� }

35

OpenAJAX Hub 1.0

Messaging bus for Javascript

Goal: Interoperability between JS frameworks / components

Reference implementation

Adobe, Aptana, Cisco, Curl, Dojo, Eclipse, Google, IBM, Liferay,

Mozilla, Oracle, SAP, Sun, Thinwire, Tibco, Vodafone, Zend, Zoho

(108 Mitglieder)

http://www.openajax.org

36

OpenAJAX Hub API

Messages hierarchical

com.myproject.customer.new

Wildcards

com.myproject.*.new

com.myproject.**

OpenAjax.hub.subscribe(name, callback, scope, subscriberData, filter)

OpenAjax.hub.unsubscribe(subscription)

OpenAjax.hub.publish(name, publisherData)

More aspects of Sofea development

37

38

State

… a challenge

State management by client

Simple for 1-page applications => JS variable

Two main cases

Session State

View State

Solutions

Window.name

Cookies

Google Gears …

39

AJAX is NOT asynchronous

Ajax is asynchronous compared to page loading, but synchronous forrequests

Real async only possible with back channel

Comet as protocol

40

Comet

�"Comet is a neologism to describe a web application model in which a

long-held HTTP request allows a web server to push data to a browser"

�- Wikipedia

Eliminates classic web model

Several solutions for polling und streaming

Limitations by network (firewalls, proxies) and protocol (HTTP)

41

Data Interchange with Ajax and Comet

Questions?

Immobilien Scout GmbH

Andreasstr. 10

10243 Berlin

Tel: 030 - 24 301 1100

Fax: 030 - 24 301 1110

info@ImmobilienScout24.de

www.immobilienscout24.de