Resource-oriented Client Architecture

Gehalten auf der WJAX 2012

Transcript

1. Wir lösen das – persönlich! Resource-oriented Client Architecture Holger Kraus | Stefan Tilkov | innoQ
2. © 2012 innoQ Deutschland GmbH REST
3. © 2012 innoQ Deutschland GmbH RESTful HTTP
4. © 2012 innoQ Deutschland GmbH URIs Identifies 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
5. © 2012 innoQ Deutschland GmbH Resources are Linked
6. © 2012 innoQ Deutschland GmbH Representations in different Formats XML HTML XHTML JSON YAML Plain Text PDF Binary
7. © 2012 innoQ Deutschland GmbH Customer Order Delivery Product CustomerList ProductCatalog Rating «interface» Resource
8. © 2012 innoQ Deutschland GmbH RESTful Web Services
9. © 2012 innoQ Deutschland GmbH REST-APIs
10. © 2012 innoQ Deutschland GmbH REST = Architecture of Web Services?
11. © 2012 innoQ Deutschland GmbH Customer Order Delivery Product CustomerList ProductCatalog Rating «interface» Resource CustomerView OrderEntryForm ProductMaintenanceForm
12. © 2012 innoQ Deutschland GmbH REST = Architecture of the Web
13. © 2011 innoQ Deutschland GmbH Data
 Replication Backend
 Integration Frontend
 Integration Integration Options Data Logic UI Data Logic UI
14. © 2012 innoQ Deutschland GmbH Frontend integration
15. © 2012 innoQ Deutschland GmbH Frontend integration Data Logic UI Data Logic UI
16. © 2012 innoQ Deutschland GmbH Frontend integration UI Data Logic Data Logic UI
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
18. © 2012 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 UI 2 Client-side integration Backend 2 Examples: AJAX Proprietary Frameworks
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 />
20. © 2012 innoQ Deutschland GmbH “But what about stateful
    Web applications?”
21. © 2012 innoQ Deutschland GmbH Browser Server HTML Page Label Label Label Label Label Label Label Label Submit
22. © 2012 innoQ Deutschland GmbH Browser Server Label Label Label Next Label Label Label Next Label Label Finish Session
 State
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
24. © 2012 innoQ Deutschland GmbH JavaScript
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/
26. © 2012 innoQ Deutschland GmbH Image by David Walsh http://oreilly.com/catalog/9780596517748
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/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7
28. © 2012 innoQ Deutschland GmbH From server to client Server-side Components ROCA Single Page Apps Flash Silverlight Applets ... Most Web Apps Server Client
29. © 2012 innoQ Deutschland GmbH ROCA http://roca-style.org/
30. © 2012 innoQ Deutschland GmbH Use URIs to identify a single meaningful concept
31. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content Header, Main Navigation Sidebar Sidebar Footer
32. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content Header, Main Navigation Footer Sidebar Content Sidebar Content
33. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content 1 Header, Main Navigation Footer Main Content 2 ✗
34. © 2012 innoQ Deutschland GmbH Browser HTML Page Main Content 1 Header, Main Navigation Footer HTML Page Other Main Content Header, Main Navigation Footer
35. © 2012 innoQ Deutschland GmbH Don’t disable Browser Features – use them
36. © 2012 innoQ Deutschland GmbH Multiple tabs & windows Bookmarks Back/Forward/Refresh Personalization Menus
37. © 2012 innoQ Deutschland GmbH Put application logic on the server only
38. © 2012 innoQ Deutschland GmbH Don’t trust your clients RESTful APIs for free Non-browser clients
 (e.g. Google Crawler)
39. © 2012 innoQ Deutschland GmbH http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html
40. © 2012 innoQ Deutschland GmbH YOU’RE DOING IT WRONG
41. © 2012 innoQ Deutschland GmbH Make your HTML semantic
42. © 2012 innoQ Deutschland GmbH Minimal load times API usage Accessibility Self-descriptiveness Readability Reusability
43. © 2012 innoQ Deutschland GmbH CSS HTML Content Layout
44. © 2012 innoQ Deutschland GmbH Use Javascript unobtrusively
45. © 2012 innoQ Deutschland GmbH <a href="javascript:doSomething();"> Some Link </a>
46. © 2012 innoQ Deutschland GmbH <a href="#" 
 onclick="doSomething();">
 Some Link
 </a>
47. © 2012 innoQ Deutschland GmbH <a href="/some-resource" onclick="doSomething(this.href);"> Some Link </a>
48. © 2012 innoQ Deutschland GmbH <a href="/some-resource" class="whatever"> Some Link </a>
49. © 2012 innoQ Deutschland GmbH $("a.whatever").click(function() { doSomething(this.href); }); + <a href="/some-resource" class="whatever"> Some Link </a>
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(); +
51. © 2012 innoQ Deutschland GmbH
52. © 2012 innoQ Deutschland GmbH Parameters?
53. © 2012 innoQ Deutschland GmbH <a href="javascript:doSomething(4711);"> Some Link </a> <a href="javascript:doSomething(4712);"> Some other Link </a>
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")); }); +
55. © 2012 innoQ Deutschland GmbH CSS HTML Content Layout
56. © 2012 innoQ Deutschland GmbH JavaScript CSS HTML Content Behavior Layout
57. © 2012 innoQ Deutschland GmbH What does it look like?
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
59. © 2012 innoQ Deutschland GmbH Summary
60. © 2012 innoQ Deutschland GmbH Ensure you’re on the Web, not tunneling through it
61. © 2012 innoQ Deutschland GmbH “Classic” server model is not outdated
62. © 2012 innoQ Deutschland GmbH You can build fancy web apps unobtrusively
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
64. © 2012 innoQ Deutschland GmbH Choosing a Web framework
65. © 2012 innoQ Deutschland GmbH How much HTTP would you like with that?
66. © 2012 innoQ Deutschland GmbH Server-side component-based JSF ASP.NET Wicket Tapestry Vaadin
67. © 2012 innoQ Deutschland GmbH Request/Response-oriented Struts Play Grails Rails ASP.NET MVC (Native) PHP Django Spring MVC
68. © 2012 innoQ Deutschland GmbH Rich-client Applets JavaFX GWT Silverlight Flash/Flex Echo ZK Meteor Backbone.js
69. © 2012 innoQ Deutschland GmbH Linkable and “pretty” URIs GET/POST differentiation Support for caching Full control over HTML 1 Resource, n Views Request/Response Frameworks
70. © 2012 innoQ Deutschland GmbH #
71. © 2012 innoQ Deutschland GmbH # “When a URI reference is used to perform a retrieval action on the identified resource, the optional fragment identifier, separated from the URI by a crosshatch (“#”) character, consists of additional reference information to be interpreted by the user agent after the retrieval action has been successfully completed. As such, it is not part of a URI, but is often used in conjunction with a URI.” URI Specification, August 1998
72. © 2012 innoQ Deutschland GmbH # The fragment identifier component of a URI allows indirect identification of a secondary resource by reference to a primary resource and additional identifying information. The identified secondary resource may be some portion or subset of the primary resource, some view on representations of the primary resource, or some other resource defined or described by those representations. URI Specification, January 2005
73. © 2012 innoQ Deutschland GmbH #! http://www.jenitennison.com/blog/node/154
74. © 2012 innoQ Deutschland GmbH http://example.com/someapp#!state=234 http://example.com/someapp?_escaped_fragment=234
75. © 2012 innoQ Deutschland GmbH Complex Inaccessible Brittle Invisible to search engines (#) # and #! Downsides
76. © 2012 innoQ Deutschland GmbH HTML 5 pushState() replaceState()