Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sofea / SOUI - Web future without web frameworks

Sofea / SOUI - Web future without web frameworks


André Neubauer

September 13, 2008


  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

  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