ROCA: Resource-oriented Client Architecture

“ROCA is an attempt to define a set of recommendations – independent of any particular framework, programming language, or tooling – that embodies the principles of what we consider to be good web application architecture. Its purpose is to serve as a reference, one that can be implemented as is or be compared to other approaches to highlight diverging design decisions.” See http://roca-style.org for more information.

Transcript

1. Wir lösen das – persönlich! Resource-oriented Client Architecture Holger Kraus | Stefan Tilkov | innoQ Wednesday, November 7, 12
2. © 2012 innoQ Deutschland GmbH REST Wednesday, November 7, 12
3. © 2012 innoQ Deutschland GmbH RESTful HTTP Wednesday, November 7, 12
4. © 2012 innoQ Deutschland GmbH URIs Identi es Resources http://example.com/orders?year=2008 http://example.com/customers/1234 http://example.com/orders/2007/10/776654 http://example.com/products/4554 http://example.com/processes/sal-increase-234 Wednesday, November 7, 12
5. © 2012 innoQ Deutschland GmbH Resources are Linked Wednesday, November 7, 12
6. © 2012 innoQ Deutschland GmbH Representations in di erent Formats XML HTML XHTML JSON YAML Plain Text PDF Binary Wednesday, November 7, 12
7. © 2012 innoQ Deutschland GmbH Customer Order Delivery Product CustomerList ProductCatalog Rating «interface» Resource Wednesday, November 7, 12
8. © 2012 innoQ Deutschland GmbH RESTful Web Services Wednesday, November 7, 12
9. © 2012 innoQ Deutschland GmbH REST-APIs Wednesday, November 7, 12
10. © 2012 innoQ Deutschland GmbH REST = Architecture of Web Services? Wednesday, November 7, 12
11. © 2012 innoQ Deutschland GmbH Customer Order Delivery Product CustomerList ProductCatalog Rating «interface» Resource CustomerView OrderEntryForm ProductMaintenanceForm Wednesday, November 7, 12
12. © 2012 innoQ Deutschland GmbH REST = Architecture of the Web Wednesday, November 7, 12
13. © 2011 innoQ Deutschland GmbH Data Replication Backend Integration Frontend Integration Integrationsoptionen Data Logic UI Data Logic UI Wednesday, November 7, 12
14. © 2012 innoQ Deutschland GmbH Frontend integration Wednesday, November 7, 12
15. © 2012 innoQ Deutschland GmbH Frontend integration Data Logic UI Data Logic UI Wednesday, November 7, 12
16. © 2012 innoQ Deutschland GmbH Frontend integration UI Data Logic Data Logic UI Wednesday, November 7, 12
17. © 2012 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 Frontend Server UI 2 Server-side integration Backend 2 Examples: ESI-Caches SSI Portal Server Wednesday, November 7, 12
18. © 2012 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 UI 2 Client-side integration Backend 2 Examples: AJAX Proprietary Frameworks Wednesday, November 7, 12
19. © 2012 innoQ Deutschland GmbH Browser HTML Page 1 Links Backend 1 Backend 2 HTML Page 2 Asset Server CSS, JS, IMG, ... <a href=2 /> Wednesday, November 7, 12
20. © 2012 innoQ Deutschland GmbH “But what about stateful Web applications?” Wednesday, November 7, 12
21. © 2012 innoQ Deutschland GmbH Browser Server HTML Page Label Label Label Label Label Label Label Label Submit Wednesday, November 7, 12
22. © 2012 innoQ Deutschland GmbH Browser Server Label Label Label Next Label Label Label Next Label Label Finish Session State Wednesday, November 7, 12
23. © 2012 innoQ Deutschland GmbH Browser Server Label Label Label Next Label Label Label Next Label Label Finish HTML Page Label Label Label Label Label Label Label Label Submit Client State Wednesday, November 7, 12
24. © 2012 innoQ Deutschland GmbH JavaScript Wednesday, November 7, 12
25. © 2012 innoQ Deutschland GmbH JavaScript WTFs alert(111111111111111111111); // alerts 111111111111111110000 ("foo" + + "bar") === "fooNaN" // true // Reason: "foo" + (+"bar") === "foo" + NaN typeof NaN === 'number' // true Infinity === 1/0 // true 0.1 + 0.2 === 0.3 // false [] + [] // "" [] + {} // [object Object] {} + [] // 0 {} + {} // NaN https://www.destroyallsoftware.com/talks/wat http://oreilly.com/javascript/excerpts/javascript-good-parts/awful-parts.html http://oreilly.com/javascript/excerpts/javascript-good-parts/bad-parts.html http://wtfjs.com/ Wednesday, November 7, 12
26. © 2012 innoQ Deutschland GmbH Image by David Walsh http://oreilly.com/catalog/9780596517748 Wednesday, November 7, 12
27. © 2012 innoQ Deutschland GmbH 5.1.7 Code-On-Demand The final addition to our constraint set for REST comes from the code-on-demand style of Section 3.5.3 (Figure 5-8). REST allows client functionality to be extended by downloading and executing code in the form of applets or scripts. This simplifies clients by reducing the number of features required to be pre- implemented. Allowing features to be downloaded after deployment improves system extensibility. However, it also reduces visibility, and thus is only an optional constraint within REST. http://www.ics.uci.edu/~ elding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7 Wednesday, November 7, 12
28. © 2012 innoQ Deutschland GmbH From server to client Server-side Components ROCA Single Page Apps Flash Silverlight Applets ... Most Web Apps Server Client Wednesday, November 7, 12
29. © 2012 innoQ Deutschland GmbH ROCA http://roca-style.org/ Wednesday, November 7, 12
30. © 2012 innoQ Deutschland GmbH Use URIs to identify a single meaningful concept Wednesday, November 7, 12
31. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content Header, Main Navigation Sidebar Sidebar Footer Wednesday, November 7, 12
32. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content Header, Main Navigation Footer Sidebar Content Sidebar Content Wednesday, November 7, 12
33. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content 1 Header, Main Navigation Footer Main Content 2 ✗ Wednesday, November 7, 12
34. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content 1 Header, Main Navigation Footer HTML Page Other Main Content Header, Main Navigation Footer Wednesday, November 7, 12
35. © 2012 innoQ Deutschland GmbH Don’t disable Browser Features – use them Wednesday, November 7, 12
36. © 2012 innoQ Deutschland GmbH Multiple tabs & windows Bookmarks Back/Forward/Refresh Personalization Menus Wednesday, November 7, 12
37. © 2012 innoQ Deutschland GmbH Put application logic on the server only Wednesday, November 7, 12
38. © 2012 innoQ Deutschland GmbH Don’t trust your clients RESTful APIs for free Non-browser clients (e.g. Google Crawler) Wednesday, November 7, 12
39. © 2012 innoQ Deutschland GmbH http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html Wednesday, November 7, 12
40. © 2012 innoQ Deutschland GmbH YOU’RE DOING IT WRONG Wednesday, November 7, 12
41. © 2012 innoQ Deutschland GmbH Make your HTML semantic Wednesday, November 7, 12
42. © 2012 innoQ Deutschland GmbH Minimal load times API usage Accessibility Self-descriptiveness Readability Reusability Wednesday, November 7, 12
43. © 2012 innoQ Deutschland GmbH CSS HTML Content Layout Wednesday, November 7, 12
44. © 2012 innoQ Deutschland GmbH Use Javascript unobtrusively Wednesday, November 7, 12
45. © 2012 innoQ Deutschland GmbH <a href="javascript:doSomething();"> Some Link </a> Wednesday, November 7, 12
46. © 2012 innoQ Deutschland GmbH <a href="#" onclick="doSomething();"> Some Link </a> Wednesday, November 7, 12
47. © 2012 innoQ Deutschland GmbH <a href="/some-resource" onclick="doSomething(this.href);"> Some Link </a> Wednesday, November 7, 12
48. © 2012 innoQ Deutschland GmbH <a href="/some-resource" class="whatever"> Some Link </a> Wednesday, November 7, 12
49. © 2012 innoQ Deutschland GmbH $("a.whatever").click(function() { doSomething(this.href); }); + <a href="/some-resource" class="whatever"> Some Link </a> Wednesday, November 7, 12
50. © 2012 innoQ Deutschland GmbH <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula ...</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio ...</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat ...</p> </div> $("#tabs").tabs(); + Wednesday, November 7, 12
51. © 2012 innoQ Deutschland GmbH Wednesday, November 7, 12
52. © 2012 innoQ Deutschland GmbH Parameters? Wednesday, November 7, 12
53. © 2012 innoQ Deutschland GmbH <a href="javascript:doSomething(4711);"> Some Link </a> <a href="javascript:doSomething(4712);"> Some other Link </a> Wednesday, November 7, 12
54. © 2012 innoQ Deutschland GmbH <a href="/some-resource" class="whatever" data-param1="xyz"> Some Link </a> $("a.whatever").click(function() { doSomething(this.href, $(this).data("param1")); }); + Wednesday, November 7, 12
55. © 2012 innoQ Deutschland GmbH CSS HTML Content Layout Wednesday, November 7, 12
56. © 2012 innoQ Deutschland GmbH JavaScript CSS HTML Content Behavior Layout Wednesday, November 7, 12
57. © 2012 innoQ Deutschland GmbH What does it look like? Wednesday, November 7, 12
58. © 2012 innoQ Deutschland GmbH JS component JS glue code HTML Events Methods Component 2 Component 3 ... Layout/CSS styles styles Server / Backend Ajax initializes Base Markup responds with Wednesday, November 7, 12
59. © 2012 innoQ Deutschland GmbH Summary Wednesday, November 7, 12
60. © 2012 innoQ Deutschland GmbH Ensure you’re on the Web, not tunneling through it Wednesday, November 7, 12
61. © 2012 innoQ Deutschland GmbH “Classic” server model is not outdated Wednesday, November 7, 12
62. © 2012 innoQ Deutschland GmbH You can build fancy web apps unobtrusively Wednesday, November 7, 12
63. © 2012 innoQ Deutschland GmbH Thank you! Q&A Stefan Tilkov stefan.tilkov@innoq.com @stilkov Phone: +49 170 471 2625 innoQ Deutschland GmbH http://www.innoq.com Krischerstr. 100 40789 Monheim am Rhein Germany Phone: +49 2173 3366-0 innoQ Schweiz GmbH info@innoq.com Gewerbestr. 11 CH-6330 Cham Switzerland Phone: +41 41 743 0116 Holger Kraus holger.kraus@innoq.com Phone: +49 151 42656093 Wednesday, November 7, 12
64. © 2012 innoQ Deutschland GmbH Choosing a Web framework Wednesday, November 7, 12
65. © 2012 innoQ Deutschland GmbH How much HTTP would you like with that? Wednesday, November 7, 12
66. © 2012 innoQ Deutschland GmbH Server-side component-based JSF ASP.NET Wicket Tapestry Vaadin Wednesday, November 7, 12
67. © 2012 innoQ Deutschland GmbH Request/Response-oriented Struts Play Grails Rails ASP.NET MVC (Native) PHP Django Spring MVC Wednesday, November 7, 12
68. © 2012 innoQ Deutschland GmbH Rich-client Applets JavaFX GWT Silverlight Flash/Flex Echo ZK Meteor Backbone.js Wednesday, November 7, 12
69. © 2012 innoQ Deutschland GmbH Linkable and “pretty” URIs GET/POST di erentiation Support for caching Full control over HTML 1 Resource, n Views Request/Response Frameworks Wednesday, November 7, 12
70. © 2012 innoQ Deutschland GmbH # Wednesday, November 7, 12
71. © 2012 innoQ Deutschland GmbH # “When a URI reference is used to perform a retrieval action on the identi ed resource, the optional fragment identi er, separated from the URI by a crosshatch (“#”) character, consists of additional reference information to be interpreted by the user agent a er the retrieval action has been successfully completed. As such, it is not part of a URI, but is o en used in conjunction with a URI.” URI Speci cation, August 1998 Wednesday, November 7, 12
72. © 2012 innoQ Deutschland GmbH # The fragment identi er component of a URI allows indirect identi cation of a secondary resource by reference to a primary resource and additional identifying information. The identi ed secondary resource may be some portion or subset of the primary resource, some view on representations of the primary resource, or some other resource de ned or described by those representations. URI Speci cation, January 2005 Wednesday, November 7, 12
73. © 2012 innoQ Deutschland GmbH #! http://www.jenitennison.com/blog/node/154 Wednesday, November 7, 12
74. © 2012 innoQ Deutschland GmbH http://example.com/someapp#!state=234 http://example.com/someapp?_escaped_fragment=234 Wednesday, November 7, 12
75. © 2012 innoQ Deutschland GmbH Complex Inaccessible Brittle Invisible to search engines (#) # and #! Downsides Wednesday, November 7, 12
76. © 2012 innoQ Deutschland GmbH HTML 5 pushState() replaceState() Wednesday, November 7, 12