Your SlideShare is downloading. ×
Sofea and SOUI - Web future without web frameworks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sofea and SOUI - Web future without web frameworks

623
views

Published on

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 …

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/

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
623
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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