Sofea and SOUI
Web future without web frameworks
Berlin.JAR 2008
Stephan Schmidt André Neubauer
Team manager IT-development Senior developer
Berlin, 13.09.2008

Stephan Schmidt
Team manager IT development
ImmobilienScout24
CTO, Head of development,
consultant, researcher, article writer
…
Developer for 25 years
2 http://stephan.reposita.org

André Neubauer
Senior Developer
ImmobilienScout24
Senior Developer, IT consultant, member of
ava User Group Berlin
Java developer since Java 1.2
3

Modern web applications
4

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
5

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
6

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
7

Sofea
R
Web Service
XML
REST
JSON
R
REST /
Browser
WS-*
XML
REST
JSON
8

Web development today
View (HTML,
Ressourcen,
JS)
Web-
R Framework
Service
View Controller (Java,
Java, HTML, JS HTML)
Modell (Java)
9

Would be nice:
Seperation of concerns
10

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
11

Sofea architecture
12

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, …
13

Sofea in development
… three development/desginer roles
For backend
For transformation of data
For presentation
14

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

Sofea 2.0
Client side message bus
Similar to SOUI
Decouple client GUI
components, AJAX engine
and services
Storage of offline
applications: Google Gears
16

Example application
17

More than one Ajax (service) engine
possible
18

Mocking connectors
with a message bus
19

Scaling with Sofea
20

Scaling with client cache
(+ offline application)
21

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

Scaling with service cache
Easy to implement (Memcached, ehCache) because of pure data
(XML, Json) compared to HTML pages or fragments
23

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
24

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

Frameworks for Sofea
26

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

Jersey – Java REST
JAX-RS JSR 311 implementation from Sun
Open Source
Annotations for REST – PUT, POST, GET etc.
https://jersey.dev.java.net/
28

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

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()))
}
})
);
30
}

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

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);
}
32

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\");
33

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\"
});
}
34

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
35

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

More aspects of Sofea development
37

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

AJAX is NOT asynchronous
Ajax is asynchronous compared to page loading, but synchronous for
requests
Real async only possible with back channel
Comet as protocol
39

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

Data Interchange with Ajax and Comet
41

Questions?
Immobilien Scout GmbH
Andreasstr. 10
10243 Berlin
Tel: 030 - 24 301 1100
Fax: 030 - 24 301 1110
info@ImmobilienScout24.de
www.immobilienscout24.de