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

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

innoQ Deutschland GmbH
April 29, 2014
Technology
1
400

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

See All by innoQ Deutschland GmbH
Security – Every Developer’s Responsibility
innoq
0
99
Security Basics for Web Developers
innoq
0
300
Microservices and Erlang/OTP
innoq
2
1.2k
Clojure in Practice
innoq
1
290

Other Decks in Technology

See All in Technology
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
フルカイテン株式会社 採用資料
fullkaiten
0
36k
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
【若手エンジニア応援LT会】AWSで繋がり、共に成長！ ～コミュニティ活動と新人教育への挑戦～
kazushi_ohata
0
180
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
一休.comレストランにおけるRustの活用
kymmt90
3
580
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
730

Featured

See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Why Our Code Smells
bkeepers
PRO
334
57k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Teambox: Starting and Learning
jrom
132
8.7k
A Tale of Four Properties
chriscoyier
156
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Raft: Consensus for Rubyists
vanstee
136
6.6k
Statistics for Hackers
jakevdp
796
220k
Making Projects Easy
brettharned
115
5.9k
How STYLIGHT went responsive
nonsquared
95
5.2k

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