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

More Decks by André Neubauer

Other Decks in Technology


  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. 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
  5. 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
  6. 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
  7. 9 Web development today Service View (HTML, Ressourcen, JS) View

    Java, HTML, JS Controller (Java, HTML) Modell (Java) R Web- Framework
  8. 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
  9. 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, …
  10. 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)
  11. 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
  12. 23 Scaling with service cache Easy to implement (Memcached, ehCache)

    because of pure data (XML, Json) compared to HTML pages or fragments
  13. 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
  14. 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!
  15. 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)
  16. 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/
  17. 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 }
  18. 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())) } }) ); }
  19. 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/
  20. 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); }
  21. 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");
  22. 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" }); }
  23. 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
  24. 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)
  25. 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 …
  26. 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
  27. 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)
  28. Questions? Immobilien Scout GmbH Andreasstr. 10 10243 Berlin Tel: 030

    - 24 301 1100 Fax: 030 - 24 301 1110 [email protected] www.immobilienscout24.de