Berlin.JAR: Web future without web frameworks
-
Upload
stephan-schmidt -
Category
Technology
-
view
4.522 -
download
1
description
Transcript of Berlin.JAR: Web future without web frameworks
![Page 1: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/1.jpg)
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
![Page 2: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/2.jpg)
2
Stephan Schmidt
�Team manager IT development
�ImmobilienScout24
�CTO, Head of development,
consultant, researcher, article writer
…
�Developer for 25 years
�http://stephan.reposita.org
![Page 3: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/3.jpg)
3
André Neubauer
�Senior Developer
�ImmobilienScout24
�Senior Developer, IT consultant, member of
ava User Group Berlin
Java developer since Java 1.2
![Page 4: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/4.jpg)
4
Modern web applications
![Page 5: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/5.jpg)
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
![Page 6: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/6.jpg)
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
![Page 7: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/7.jpg)
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
![Page 8: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/8.jpg)
8
Sofea
Web Service
R
XML
REST
JSON
BrowserREST /
WS-*
R
XML
REST
JSON
![Page 9: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/9.jpg)
9
Web development today
Service
View (HTML,
Ressourcen,
JS)
View
Java, HTML, JS
Controller (Java,
HTML)
Modell (Java)
R
Web-
Framework
![Page 10: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/10.jpg)
10
Would be nice:Seperation of concerns
![Page 11: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/11.jpg)
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
![Page 12: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/12.jpg)
12
Sofea architecture
![Page 13: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/13.jpg)
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, …
![Page 14: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/14.jpg)
14
Sofea in development
�… three development/desginer roles
For backend
For transformation of data
For presentation
![Page 15: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/15.jpg)
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)
![Page 16: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/16.jpg)
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
![Page 17: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/17.jpg)
17
Example application
![Page 18: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/18.jpg)
18
More than one Ajax (service) enginepossible
![Page 19: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/19.jpg)
19
Mocking connectorswith a message bus
![Page 20: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/20.jpg)
Scaling with Sofea
20
![Page 21: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/21.jpg)
21
Scaling with client cache(+ offline application)
![Page 22: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/22.jpg)
22
Scaling with caching proxy(E-Tag & Modified Since)
![Page 23: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/23.jpg)
23
Scaling with service cache
Easy to implement (Memcached, ehCache) because of pure data
(XML, Json) compared to HTML pages or fragments
![Page 24: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/24.jpg)
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
![Page 25: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/25.jpg)
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!
![Page 26: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/26.jpg)
Frameworks for Sofea
26
![Page 27: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/27.jpg)
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)
![Page 28: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/28.jpg)
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/
![Page 29: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/29.jpg)
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 }
![Page 30: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/30.jpg)
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()))
}
})
);
}
![Page 31: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/31.jpg)
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/
![Page 32: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/32.jpg)
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);
�}
![Page 33: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/33.jpg)
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");
![Page 34: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/34.jpg)
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"
� });
� }
![Page 35: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/35.jpg)
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
![Page 36: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/36.jpg)
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)
![Page 37: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/37.jpg)
More aspects of Sofea development
37
![Page 38: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/38.jpg)
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 …
![Page 39: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/39.jpg)
39
AJAX is NOT asynchronous
Ajax is asynchronous compared to page loading, but synchronous forrequests
Real async only possible with back channel
Comet as protocol
![Page 40: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/40.jpg)
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)
![Page 41: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/41.jpg)
41
Data Interchange with Ajax and Comet
![Page 42: Berlin.JAR: Web future without web frameworks](https://reader033.fdocuments.in/reader033/viewer/2022051817/54932d12ac79593b2e8b47b4/html5/thumbnails/42.jpg)
Questions?
Immobilien Scout GmbH
Andreasstr. 10
10243 Berlin
Tel: 030 - 24 301 1100
Fax: 030 - 24 301 1110
www.immobilienscout24.de