ROCA im Java-EE-Kontext - Endlich webkonforme Anwendungen bauen!

Vortrag im Rahmen der Berlin Experts Days 2014: http://www.bed-con.org

ROCA (Resource-oriented Client Architecture) ist der Name für einen Ansatz zur Entwicklung von Webanwendungen, der sich vor allem durch den richtigen Einsatz von JavaScript sowie die Einhaltung von REST-Prinzipien auszeichnet.

Dieser Ansatz fördert Anwendungen, die sowohl robust und wartbar sind als auch modernen Ansprüchen hinsichtlich der Benutzerfreundlichkeit Rechnung trägt. Dabei ist ROCA im Kern nichts Neues, sondern eine Rückbesinnung auf die klassische Architektur des Webs.

In Java-Enterprise-Projekten wird dagegen oft auf der Basis von statusbehafteten Komponenten-Server-Frameworks entwickelt. In diesem Umfeld muss man als Architekt oder Entwickler deshalb oft Überzeugungsarbeit leisten. Der Vortrag stellt die Kernelemente von ROCA vor und diskutiert, welche Optionen es zur Umsetzungen im Java-EE-Kontext gibt, mit welchen Schwierigkeiten man zu kämpfen hat und warum es trotzdem eine gute Idee ist.

Transcript

1. Wir lösen das – persönlich! ROCA im Java-EE-Kontext Endlich webkonforme Anwendungen bauen! ! Holger Kraus Frederik Dohr
2. © 2014 innoQ Deutschland GmbH Java EE - Context
3. © 2014 innoQ Deutschland GmbH Java EE - Context http://www.flickr.com/photos/maha-online/62627811
4. © 2014 innoQ Deutschland GmbH https://twitter.com/jakekorab/status/443701062143188992
5. © 2014 innoQ Deutschland GmbH
6. © 2014 innoQ Deutschland GmbH
7. © 2014 innoQ Deutschland GmbH
8. © 2014 innoQ Deutschland GmbH
9. © 2014 innoQ Deutschland GmbH https://www.flickr.com/photos/meccanohig/9704610999/
10. © 2014 innoQ Deutschland GmbH UI Components Validators Converters Events Managed Beans
11. © 2014 innoQ Deutschland GmbH UIRootView HtmlForm HtmlPanelGrid HtmlOutputLabel HtmlInputText HtmlOutputLabel HtmlInputText HtmlInputSecret HtmlPanelGrid HtmlCommandButton HtmlCommandLink
12. © 2014 innoQ Deutschland GmbH
13. © 2014 innoQ Deutschland GmbH
14. © 2014 innoQ Deutschland GmbH Founding Principles of the Web “By design, the […] Internet and the WWW are non- hierarchical, decentralized and radically open. The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission.” — Tim Berners Lee
15. © 2014 innoQ Deutschland GmbH Founding Principles of the Web “By design, the […] Internet and the WWW are non- hierarchical, decentralized and radically open. The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission.” — Tim Berners Lee
16. © 2014 innoQ Deutschland GmbH Founding Principles of the Web “By design, the […] Internet and the WWW are non- hierarchical, decentralized and radically open. The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission.” — Tim Berners Lee
17. © 2014 innoQ Deutschland GmbH Founding Principles of the Web Simplicity Modularity Transparency Tolerance
18. © 2014 innoQ Deutschland GmbH Rule of Least Power “choosing the least powerful language suitable for a given purpose” “the less powerful the language, the more you can do with the data stored in that language. If you write it in a simple declarative form, anyone can write a program to analyze it in many ways.” — Axioms of Web Architecture
19. © 2014 innoQ Deutschland GmbH Rule of Least Power “I chose HTML not to be a programming language because I wanted different programs to do different things with it: present it differently, extract tables of contents, index it, and so on.” — Tim Berners Lee
20. © 2014 innoQ Deutschland GmbH http://courses.ischool.berkeley.edu/i153/su11/history
21. © 2014 innoQ Deutschland GmbH © 2011 innoQ Deutschland GmbH http://www.flickr.com/photos/psd/2918889380/
22. © 2014 innoQ Deutschland GmbH request response GET /index HTTP/1.1
 Host: example.org ! HTTP/1.1 200 OK
 Content-Type: text/html
 
 <html> … </html>
23. © 2014 innoQ Deutschland GmbH © 2011 innoQ Deutschland GmbH http://commons.wikimedia.org/wiki/File:BXP135677.jpg
24. © 2014 innoQ Deutschland GmbH HTML Images Media content Style Sheets JavaScript Plug-ins
25. © 2014 innoQ Deutschland GmbH
26. © 2014 innoQ Deutschland GmbH Semantic HTML “The main point of semantics was accessibility and search engines.” — @jcroft http://www.flickr.com/photos/saltyscott/212796193/
27. © 2014 innoQ Deutschland GmbH <font size="big" color="#990099"> <b>Welcome to my homepage!</b> <img size="under_construction.gif"> <p> * Guns N’ Roses * Bon Jovi * MC Hammer </p> </font>
28. © 2014 innoQ Deutschland GmbH <h1>Hello from Facebook!</h1> <ul> <li>Justin Bieber</li> <li>Beyoncé</li> <li>Miley Cyrus</li> </ul>
29. © 2014 innoQ Deutschland GmbH POSH Plain Old Semantic HTML http://commons.wikimedia.org/wiki/File:Victoria_Beckham_2010.jpg
30. © 2014 innoQ Deutschland GmbH Unobtrusive JavaScript <script type="text/javascript"> document.write("hello world"); </script> <script src="main.js"></script>
31. © 2014 innoQ Deutschland GmbH Unobtrusive JavaScript <a href="javascript:doStuff();"> … </a>
32. © 2014 innoQ Deutschland GmbH Unobtrusive JavaScript <a href="#" onclick="doStuff();"> … </a>
33. © 2014 innoQ Deutschland GmbH Unobtrusive JavaScript <a href="/my-resource" onclick="doStuff(this.href);"> … </a>
34. © 2014 innoQ Deutschland GmbH Unobtrusive JavaScript <a href="/my-resource" class="interactive"> … </a> $(".interactive").click(function() { doStuff(this.href); }); +
35. © 2014 innoQ Deutschland GmbH Components <input type="date"> + jQuery("input[type=date]").datepicker(); <table class="sortable">…<table> + Sortable.init(".sortable");
36. © 2014 innoQ Deutschland GmbH <div class="tabs"> <ul> <li><a href="#about">About</a> <li><a href="#toc">Table of Contents</a> <li><a href="#comments">Discussion</a> </ul> <p id="about">lorem ipsum dolor sit amet</p> <ol id="toc">…</ol> <div id="comments">…</div> </div> jQuery(".tabs").tabs();
37. © 2014 innoQ Deutschland GmbH Autor: Till Schulte-Coerne
38. © 2014 innoQ Deutschland GmbH That was the client side... of what we call
    ROCA
39. © 2014 innoQ Deutschland GmbH Now let’s talk about the server side
40. © 2014 innoQ Deutschland GmbH REST is more
    then a RESTful API REST is the
    Architecture of the Web
41. © 2014 innoQ Deutschland GmbH Avoid session state!
42. © 2014 innoQ Deutschland GmbH Put all application logic on the server!
43. © 2014 innoQ Deutschland GmbH Use URIs to identify a single meaningful concept!
44. © 2014 innoQ Deutschland GmbH A http://.../A
45. © 2014 innoQ Deutschland GmbH A B C http://.../A ?
46. © 2014 innoQ Deutschland GmbH A http://.../A C http://.../C B http://.../B b c + AJAX + CSS
47. © 2014 innoQ Deutschland GmbH A B C http://.../A
48. © 2014 innoQ Deutschland GmbH Alternatives to component based frameworks
49. © 2014 innoQ Deutschland GmbH
50. © 2014 innoQ Deutschland GmbH
51. © 2014 innoQ Deutschland GmbH &
52. © 2014 innoQ Deutschland GmbH Resource A Resource B Resource C Resource D Resource E Service A Service B Service C Service D Service E Dispatcher
53. © 2014 innoQ Deutschland GmbH But how to explain it to my manager? http://commons.wikimedia.org/wiki/File:Clark_Griffith_crop.jpg
54. © 2014 innoQ Deutschland GmbH Let’s talk about macro architecture!
55. © 2014 innoQ Deutschland GmbH UI Logic Persistence
56. © 2014 innoQ Deutschland GmbH
57. © 2014 innoQ Deutschland GmbH Product Admin OrderMgmt Catalog Inventory Mgmt Data Export Billing
58. © 2014 innoQ Deutschland GmbH Data
 Replication Backend
 Integration Frontend
 Integration Integration Options Data Logic UI Data Logic UI
59. © 2014 innoQ Deutschland GmbH Data Logic UI Data Logic UI
60. © 2014 innoQ Deutschland GmbH UI Data Logic Data Logic UI Frontent integration
61. © 2014 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 Frontend
 Server UI 2 Server-side integration Backend 2 Example: Portal Server
62. © 2014 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 UI 2 Client-side integration Backend 2 Examples: AJAX Proprietary Frameworks
63. © 2014 innoQ Deutschland GmbH Browser HTML Page 1 Links Backend 1 Backend 2 HTML Page 2 Asset Server CSS, JS, IMG, ... <a href=2 />
64. © 2014 innoQ Deutschland GmbH Summary
65. © 2014 innoQ Deutschland GmbH Appreciate the Web
66. © 2014 innoQ Deutschland GmbH Design for the Web
67. © 2014 innoQ Deutschland GmbH Respect Boundaries
68. © 2014 innoQ Deutschland GmbH Embrace the core technologies of the Web
69. Vielen Dank! Wir lösen das – persönlich! © 2014 innoQ Deutschland GmbH