Sofea / SOUI - Web future without web frameworks

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