Sofea / SOUI - Web future without web frameworks

Sofea and SOUI Web future without web frameworks Berlin.JAR 2008 Stephan Schmidt André Neubauer Team manager IT-development Senior developer Berlin, 13.09.2008

Stephan Schmidt Team manager IT development ImmobilienScout24 CTO, Head of development, consultant, researcher, article writer … Developer for 25 years 2 http://stephan.reposita.org

André Neubauer Senior Developer ImmobilienScout24 Senior Developer, IT consultant, member of ava User Group Berlin Java developer since Java 1.2 3

Modern web applications 4

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

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

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

Sofea R Web Service XML REST JSON R REST / Browser WS-* XML REST JSON 8

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

Would be nice: Seperation of concerns 10

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 11

Sofea architecture 12

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, … 13

Sofea in development … three development/desginer roles For backend For transformation of data For presentation 14

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) 15

Sofea 2.0 Client side message bus Similar to SOUI Decouple client GUI components, AJAX engine and services Storage of offline applications: Google Gears 16

Example application 17

More than one Ajax (service) engine possible 18

Mocking connectors with a message bus 19

Scaling with Sofea 20

Scaling with client cache (+ offline application) 21

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

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

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 24

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! 25

Frameworks for Sofea 26

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

Jersey – Java REST JAX-RS JSR 311 implementation from Sun Open Source Annotations for REST – PUT, POST, GET etc. https://jersey.dev.java.net/ 28

Jersey example 1 // The Java class will be hosted at the URI path quot;/helloworldquot; 2 @Path(quot;/helloworldquot;) 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 quot;text/plainquot; 9 @Produces(quot;text/plainquot;) 10 public String getClichedMessage() { 11 // Return some cliched textual content 12 return quot;Hello Worldquot;; 13 } 14 } 29

JSON with Jersey Automatically with JAX-B, or using Builder and static methods ($) @Inject CustomerService service; @GET @Path(quot;/customer/{customerId}quot;) @ProduceMime({quot;application/jsonquot;, quot;text/html“, “text/xml”}) public Node getList(@PathParam(“customerIdquot;) String customerId) { Customer customer = service.findById(customerId); return $( $(quot;idquot;, customer.getId()), $(quot;namequot;, customer.getName()), $(„adressesquot;, new List<Adress>(customer.getAdresses()) { protected Node item(Adress adress) { return $(type(„adressquot;), $(„streetquot;, adress.getStreet())) } }) ); 30 }

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/ 31

PURE Beispiel <div id=„customerquot;> Hello <span class=quot;whoquot;>customer</span> </div> function render() { var directive = {quot;span.whoquot; : quot;namequot;}; var context = { quot;namequot;: customer.name }; $('#customer').autoRender(context, directive); } 32

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 $(quot;p.neatquot;).addClass(quot;ohmyquot;).show(quot;slowquot;); 33

AJAX with jQuery customer_put = function(customer) { return jQuery.ajax({ type: quot;PUTquot;, url: quot;/customers/quot;, data: customer, success: function(customer) { OpenAjax.hub.publish(„customer.put.okquot;, customer) }, dataType: quot;jsonquot; }); } 34

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 35

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) 36

More aspects of Sofea development 37

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 … 38

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 39

Comet quot;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 browserquot; - Wikipedia Eliminates classic web model Several solutions for polling und streaming Limitations by network (firewalls, proxies) and protocol (HTTP) 40

Data Interchange with Ajax and Comet 41

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

http://carlosdamian.blogspot.com	231
http://www.slideshare.net	64
http://www.devpg.com	20
http://carlosdamian.blogspot.com.es	7
http://carlosdamian.blogspot.com.ar	6
http://carlosdamian.blogspot.mx	5
http://www.fachak.com	2
http://192.168.10.100	1
https://twimg0-a.akamaihd.net	1

Sofea / SOUI - Web future without web frameworks

by André Neubauer on Oct 23, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 337

Statistics

Sofea / SOUI - Web future without web frameworks — Presentation Transcript