This presentation I gave with a colleague (@codemonkeyism) in 2008 at Berlin.JAR, a Java conference in Berlin. The talk was about an upcoming trend in web technology, no more server side web frameworks but a resource-oriented client architecture. Links: http://www.infoq.com/news/2007/11/soui-death-of-mvc2 http://roca-style.org/

1. 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. 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. 3
André Neubauer
Senior Developer
ImmobilienScout24
Senior Developer, IT consultant, member of
ava User Group Berlin
Java developer since Java 1.2

4. 4
Modern web applications

5. 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. 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. 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. 8
Sofea
Web Service
R
XML
REST
JSON
Browser
REST /
WS-*
R
XML
REST
JSON

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

10. 10
Would be nice:
Seperation of concerns

11. 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. 12
Sofea architecture

13. 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. 14
Sofea in development
… three development/desginer roles
For backend
For transformation of data
For presentation

15. 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. 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. 17
Example application

18. 18
More than one Ajax (service) engine
possible

19. 19
Mocking connectors
with a message bus

20. Scaling with Sofea
20

21. 21
Scaling with client cache
(+ offline application)

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

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

24. 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. 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!

26. Frameworks for Sofea
26

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

37. More aspects of Sofea development
37

38. 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. 39
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

40. 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. 41
Data Interchange with Ajax and Comet

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