Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ROCA im Java-EE-Kontext - Endlich webkonforme A...

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

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.

Der Vortrag stellt die Kernelemente von ROCA vor und diskutiert, welche Optionen es zur Umsetzung im Java-EE-Kontext gibt, mit welchen Schwierigkeiten man zu kämpfen hat und warum es trotzdem eine gute Idee ist.

Dieser Vortrag wurde auf der BED-Con 2014 von Frederik Dohr und Holger Kraus gehalten.

innoQ Deutschland GmbH

April 29, 2014
Tweet

More Decks by innoQ Deutschland GmbH

Other Decks in Technology

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 UIRootView HtmlForm HtmlPanelGrid HtmlOutputLabel HtmlInputText

    HtmlOutputLabel HtmlInputText HtmlInputSecret HtmlPanelGrid HtmlCommandButton HtmlCommandLink
  3. © 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
  4. © 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
  5. © 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
  6. © 2014 innoQ Deutschland GmbH Founding Principles of the Web

    Simplicity Modularity Transparency Tolerance
  7. © 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
  8. © 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
  9. © 2014 innoQ Deutschland GmbH © 2011 innoQ Deutschland GmbH

    http://www.flickr.com/photos/psd/2918889380/
  10. © 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>
  11. © 2014 innoQ Deutschland GmbH © 2011 innoQ Deutschland GmbH

    http://commons.wikimedia.org/wiki/File:BXP135677.jpg
  12. © 2014 innoQ Deutschland GmbH Semantic HTML “The main point

    of semantics was accessibility and search engines.” — @jcroft http://www.flickr.com/photos/saltyscott/212796193/
  13. © 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>
  14. © 2014 innoQ Deutschland GmbH <h1>Hello from Facebook!</h1> <ul> <li>Justin

    Bieber</li> <li>Beyoncé</li> <li>Miley Cyrus</li> </ul>
  15. © 2014 innoQ Deutschland GmbH POSH Plain Old Semantic HTML

    http://commons.wikimedia.org/wiki/File:Victoria_Beckham_2010.jpg
  16. © 2014 innoQ Deutschland GmbH Unobtrusive JavaScript <a href="/my-resource" class="interactive">

    … </a> $(".interactive").click(function() { doStuff(this.href); }); +
  17. © 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();
  18. © 2014 innoQ Deutschland GmbH REST is more then a

    RESTful API REST is the Architecture of the Web
  19. © 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
  20. © 2014 innoQ Deutschland GmbH But how to explain it

    to my manager? http://commons.wikimedia.org/wiki/File:Clark_Griffith_crop.jpg
  21. © 2014 innoQ Deutschland GmbH Data
 Replication Backend
 Integration Frontend


    Integration Integration Options Data Logic UI Data Logic UI
  22. © 2014 innoQ Deutschland GmbH Browser HTML Page Backend 1

    UI 1 Frontend
 Server UI 2 Server-side integration Backend 2 Example: Portal Server
  23. © 2014 innoQ Deutschland GmbH Browser HTML Page Backend 1

    UI 1 UI 2 Client-side integration Backend 2 Examples: AJAX Proprietary Frameworks
  24. © 2014 innoQ Deutschland GmbH Browser HTML Page 1 Links

    Backend 1 Backend 2 HTML Page 2 Asset Server CSS, JS, IMG, ... <a href=2 />