Building large web-based systems: 10 Recommendations

Transcript

1. We’ll take care of it - personally. Building large web-based systems: 10 Recommendations Stefan Tilkov | @stilkov | innoQ Wednesday, January 23, 13
2. © 2013 innoQ Deutschland GmbH Initial goals Simplicity Speed Easy development Maximum productivity Wednesday, January 23, 13
3. © 2013 innoQ Deutschland GmbH Long-term goals Stability Scalability Maintainability Decoupling Wednesday, January 23, 13
4. © 2013 innoQ Deutschland GmbH Modularize Wednesday, January 23, 13
5. © 2013 innoQ Deutschland GmbH Data Logic UI Wednesday, January 23, 13
6. © 2013 innoQ Deutschland GmbH Data Logic UI Wednesday, January 23, 13
7. © 2013 innoQ Deutschland GmbH Wednesday, January 23, 13
8. © 2013 innoQ Deutschland GmbH Wednesday, January 23, 13
9. © 2013 innoQ Deutschland GmbH UI Data Logic Data Logic UI Wednesday, January 23, 13
10. © 2013 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, January 23, 13
11. © 2013 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 UI 2 Client-side integration Backend 2 Examples: AJAX Proprietary Frameworks Wednesday, January 23, 13
12. © 2013 innoQ Deutschland GmbH Browser HTML Page 1 Links Backend 1 Backend 2 HTML Page 2 Asset Server CSS, JS, IMG, ... <a href=2 /> Wednesday, January 23, 13
13. © 2013 innoQ Deutschland GmbH Aim for a web of loosely coupled, autonomous systems. Recommendation #1: Wednesday, January 23, 13
14. © 2013 innoQ Deutschland GmbH Session state Wednesday, January 23, 13
15. © 2013 innoQ Deutschland GmbH Browser Server HTML Page Label Label Label Label Label Label Label Label Submit Wednesday, January 23, 13
16. © 2013 innoQ Deutschland GmbH Browser Server Label Label Label Next Label Label Label Next Label Label Finish Session State Wednesday, January 23, 13
17. © 2013 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, January 23, 13
18. © 2013 innoQ Deutschland GmbH Server HTML Page Label Label Label Label Label Label Label Label Submit HTML Page Label Label Label Label Label Label Label Label Submit HTML Page Label Label Label Label Label Label Label Label Submit Wednesday, January 23, 13
19. © 2013 innoQ Deutschland GmbH Avoid session state wherever possible. Recommendation #2: Wednesday, January 23, 13
20. © 2013 innoQ Deutschland GmbH Services & APIs Wednesday, January 23, 13
21. © 2013 innoQ Deutschland GmbH 1. All teams will expose data and functionality through service interfaces. 2. Teams must communicate with each other through these interfaces. 3. No other form of interprocess communication allowed, only service calls over the net. 4. The protocols used are unimportant. 5. All service interfaces to be designed from the ground up to be externalizable. No exceptions. 6. Anyone who doesn't do this will be red. 7. Thank you; have a nice day! The Bezos Mandate* *Steve Yegge, https://plus.google.com/112678702228711889851/posts/eVeouesvaVX Wednesday, January 23, 13
22. © 2013 innoQ Deutschland GmbH Service with RESTful API Well-designed Web app Wednesday, January 23, 13
23. © 2013 innoQ Deutschland GmbH Service with RESTful API Well-designed Web app Wednesday, January 23, 13
24. © 2013 innoQ Deutschland GmbH Eat your own API dog food. Recommendation #3: Wednesday, January 23, 13
25. © 2013 innoQ Deutschland GmbH Identity Users Products Wednesday, January 23, 13
26. © 2013 innoQ Deutschland GmbH Identity Users Products Wednesday, January 23, 13
27. © 2013 innoQ Deutschland GmbH Single sign-on Backend 1 Backend 2 Auth-Provider Browser Login Credentials Ticket Validation Request + Ticket Request + Ticket Algorithmic Validation Wednesday, January 23, 13
28. © 2013 innoQ Deutschland GmbH Separate user identity, sign-up and self-care from product dependencies. Recommendation #4: Wednesday, January 23, 13
29. © 2013 innoQ Deutschland GmbH Understand your requests Wednesday, January 23, 13
30. © 2013 innoQ Deutschland GmbH Wednesday, January 23, 13
31. © 2013 innoQ Deutschland GmbH Wednesday, January 23, 13
32. © 2013 innoQ Deutschland GmbH Pick the low-hanging fruit of front-end performance optimizations. Recommendation #5: Wednesday, January 23, 13
33. © 2013 innoQ Deutschland GmbH Separate Command & Query Paths Wednesday, January 23, 13
34. © 2013 innoQ Deutschland GmbH Data Logic UI Wednesday, January 23, 13
35. © 2013 innoQ Deutschland GmbH CQRS (Command Query Responsibility Segregation) Read UI Data Event Handling Data Logic Write UI Wednesday, January 23, 13
36. © 2013 innoQ Deutschland GmbH Don’t bother readers with write complexity. Recommendation #6: Wednesday, January 23, 13
37. © 2013 innoQ Deutschland GmbH Web-centric Web UIs Wednesday, January 23, 13
38. © 2013 innoQ Deutschland GmbH Server-side components Avoid HTML, JS, CSS Trade Familiarity for Complexity Session-centric Single Page Apps Advanced Client Frameworks Server-side REST APIs ROCA Server-side POSH Client-side components Web-centric Wednesday, January 23, 13
39. © 2013 innoQ Deutschland GmbH ROCA http://roca-style.org/ Wednesday, January 23, 13
40. © 2013 innoQ Deutschland GmbH Make your HTML semantic Wednesday, January 23, 13
41. © 2013 innoQ Deutschland GmbH Minimal load times API usage Accessibility Self-descriptiveness Readability Reusability Wednesday, January 23, 13
42. © 2013 innoQ Deutschland GmbH CSS HTML Content Layout Wednesday, January 23, 13
43. © 2013 innoQ Deutschland GmbH Use Javascript unobtrusively Wednesday, January 23, 13
44. © 2013 innoQ Deutschland GmbH <a href="javascript:doSomething();"> Some Link </a> Wednesday, January 23, 13
45. © 2013 innoQ Deutschland GmbH <a href="#" onclick="doSomething();"> Some Link </a> Wednesday, January 23, 13
46. © 2013 innoQ Deutschland GmbH <a href="/some-resource" onclick="doSomething(this.href);"> Some Link </a> Wednesday, January 23, 13
47. © 2013 innoQ Deutschland GmbH <a href="/some-resource" class="whatever"> Some Link </a> Wednesday, January 23, 13
48. © 2013 innoQ Deutschland GmbH $("a.whatever").click(function() { doSomething(this.href); }); + <a href="/some-resource" class="whatever"> Some Link </a> Wednesday, January 23, 13
49. © 2013 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, January 23, 13
50. © 2013 innoQ Deutschland GmbH Wednesday, January 23, 13
51. © 2013 innoQ Deutschland GmbH CSS HTML Content Layout Wednesday, January 23, 13
52. © 2013 innoQ Deutschland GmbH JavaScript CSS HTML Content Behavior Layout Wednesday, January 23, 13
53. © 2013 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, January 23, 13
54. © 2013 innoQ Deutschland GmbH Use URIs to identify a single meaningful concept Wednesday, January 23, 13
55. © 2013 innoQ Deutschland GmbH A http://.../A Wednesday, January 23, 13
56. © 2013 innoQ Deutschland GmbH A B C http://.../A ? Wednesday, January 23, 13
57. © 2013 innoQ Deutschland GmbH A http://.../A C http://.../C B http://.../B b c + AJAX + CSS Wednesday, January 23, 13
58. © 2013 innoQ Deutschland GmbH A B C http://.../A Wednesday, January 23, 13
59. © 2013 innoQ Deutschland GmbH Don’t disable Browser Features – use them Wednesday, January 23, 13
60. © 2013 innoQ Deutschland GmbH Multiple tabs & windows Bookmarks Back/Forward/Refresh Personalization Menus Wednesday, January 23, 13
61. © 2013 innoQ Deutschland GmbH Apply the Web instead of working around it. Recommendation #7: Wednesday, January 23, 13
62. © 2013 innoQ Deutschland GmbH Automate. Seriously. Wednesday, January 23, 13
63. © 2013 innoQ Deutschland GmbH Testing Wednesday, January 23, 13
64. © 2013 innoQ Deutschland GmbH Delivery Wednesday, January 23, 13
65. © 2013 innoQ Deutschland GmbH Operations Wednesday, January 23, 13
66. © 2013 innoQ Deutschland GmbH Back-o ce tasks Wednesday, January 23, 13
67. © 2013 innoQ Deutschland GmbH Automate everything or you will be hurt. Recommendation #8: Wednesday, January 23, 13
68. © 2013 innoQ Deutschland GmbH Web architecture tooling Wednesday, January 23, 13
69. © 2013 innoQ Deutschland GmbH Web App Instance Web App Instance Web App Instance Browser Reverse Proxy Cache CDN LB Frontend Web Server Frontend Web Server Frontend Web Server Reverse Proxy Cache Reverse Proxy Cache n1 n2 n3 Wednesday, January 23, 13
70. © 2013 innoQ Deutschland GmbH Know, design for & use web components Recommendation #9: Wednesday, January 23, 13
71. © 2013 innoQ Deutschland GmbH Design for scale with care Wednesday, January 23, 13
72. © 2013 innoQ Deutschland GmbH NoSQL Wednesday, January 23, 13
73. © 2013 innoQ Deutschland GmbH Servers and Caches Wednesday, January 23, 13
74. © 2013 innoQ Deutschland GmbH Cloud Platforms Wednesday, January 23, 13
75. © 2013 innoQ Deutschland GmbH Transient Sharded Unshared Horizontally Scalable Wednesday, January 23, 13
76. © 2013 innoQ Deutschland GmbH Ye Good Ol’ SQL RDBMS Wednesday, January 23, 13
77. © 2013 innoQ Deutschland GmbH You can use new-fangled stu , but you might not have to. Recommendation #10: Wednesday, January 23, 13
78. © 2013 innoQ Deutschland GmbH 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 Wednesday, January 23, 13