Web Development: You’re still doing it wrong

Even without any sort of programming framework with lots of abstraction layers and fancy tooling, the Web platform is one of the most powerful environments for distributed and collaborative systems. If, that is, we actually /use/ it instead of continuously /abusing/ it through trying to turn it into something it's not. In this session, we'll challenge many commonly-held assumptions about how to best develop web applications. Even though we'll briefly touch the REST architectural style, most of the time will be spent discussing the strengths and ideal roles for HTML, CSS, JavaScript and their connection to the Web's core standards, HTTP and URIs. We'll see how a focus on simplicity and moderate use of technologies can lead to great applications that integrate well, scale well, are fun to develop, and are maintainable in the long run.

Transcript

1. Web Development: You’re (Still) Doing it Wrong Stefan Tilkov | innoQ | @stilkov Thursday 17 October 13
2. Annoying your users Thursday 17 October 13
3. Forbid the use of the back and forward buttons Thursday 17 October 13
4. Send them to the home page when they hit “refresh” Thursday 17 October 13
5. … or ensure the browser pops up a warning window Thursday 17 October 13
6. Make sure they can’t open a second browser window Thursday 17 October 13
7. Let them see UI chrome and ads first, content last Thursday 17 October 13
8. Make sure they can’t bookmark or send a link Thursday 17 October 13
9. Don’t let Google index anything Thursday 17 October 13
10. Ensure disabling JavaScript gives them a blank page Thursday 17 October 13
11. Things that seem like a good idea, but aren’t Thursday 17 October 13
12. Fix HTTP’s basic flaw: its statelessness Thursday 17 October 13
13. Go beyond the page model because we’re r/w now Thursday 17 October 13
14. Avoid CSS because who understands how it works? Thursday 17 October 13
15. Avoid HTML because that’s so 20th century Thursday 17 October 13
16. Avoid JavaScript because it’s not for real programmers Thursday 17 October 13
17. Go beyond Client/Server and introduce bidirectional, binary communication Thursday 17 October 13
18. Let’s take a step back Thursday 17 October 13
19. Let’s build a generic client runtime Define a protocol so it can work with any server Allow it to mix services from different backends Define a generic, declarative data format Separate content and layout Allow for extensibility with client-side scripting Make it work on any device, with any resolution Thursday 17 October 13
20. We’re not done yet Thursday 17 October 13
21. Standardize it, with (rough) consensus Ensure there are multiple client, server and intermediary implementations to choose from Have every client OS ship with an implementation of the generic client Let every programming environment support it Thursday 17 October 13
22. How hard can it be? Thursday 17 October 13
23. Competing with the Web may not be the best idea Thursday 17 October 13
24. My personal theory as to why things suck so much: Thursday 17 October 13
25. 1. Hiding “Details” Thursday 17 October 13
26. 2. Preserving Expertise Thursday 17 October 13
27. 3. Misjudging Skills Thursday 17 October 13
28. Web-centric web UIs Thursday 17 October 13
29. Server-side components Avoid HTML, JS, CSS Trade Familiarity for Complexity Session-centric ROCA Server-side POSH Client-side components Web-centric Single Page Apps Advanced Client Frameworks Server-side REST APIs Thursday 17 October 13
30. ROCA (Resource-oriented Client Architecture) Thursday 17 October 13
31. Make your HTML semantic Thursday 17 October 13
32. CSS HTML Content Layout Thursday 17 October 13
33. Minimal load times Accessibility Self-descriptiveness Readability Thursday 17 October 13
34. “HTML?” “I don’t do that – I’m a programmer.” Thursday 17 October 13
35. <order> <shippingAddress>Paris, France</shippingAddress> <items> <item> <productDescription>iPad</productDescription> <quantity>1</quantity> <price>699</price> </item> </items> <link href="http://om.example.com/cancellations" rel="cancel" /> <link href="https://om.example.com/orders/123/payment" rel="payment" /> </order> Thursday 17 October 13
36. <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div class="order"> <p class="shippingAddress">Paris, France</p> <ul class="items"> <li class="item"> <p class="productDescription">iPad</p> <p class="quantity">1</p> <p class="price">699</p> </li> </ul> <a href="http://om.example.com/cancellations" rel="cancel">cancel</a> <a href="https://om.example.com/orders/123/payment" rel="payment">payment</a> </div> </body> </html> Thursday 17 October 13
37. Data Data Access Business Rules Service Logic Service Interface WSDL SOAP WS-* XML Operations Parameters Messages HTTP JSON XML Resources Hypermedia Representations Thursday 17 October 13
38. Service Interface Service Interface Client Logic Thursday 17 October 13
39. Service Interface Service Interface Client Logic Thursday 17 October 13
40. Service Interface Service Interface Client Logic Thursday 17 October 13
41. Service Interface Service Interface Presentation Logic Orchestration Logic Thursday 17 October 13
42. Orchestration Logic Orchestration Logic Presentation Logic Thursday 17 October 13
43. Business Logic Business Logic Presentation Logic Thursday 17 October 13
44. Use Javascript unobtrusively Thursday 17 October 13
45. <a href="javascript:doSomething();"> Some Link </a> Thursday 17 October 13
46. <a href="#" onclick="doSomething();"> Some Link </a> Thursday 17 October 13
47. <a href="/some-resource" onclick="doSomething(this.href);"> Some Link </a> Thursday 17 October 13
48. <a href="/some-resource" class="whatever"> Some Link </a> Thursday 17 October 13
49. $("a.whatever").click(function() { doSomething(this.href); }); + <a href="/some-resource" class="whatever"> Some Link </a> Thursday 17 October 13
50. <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(); + Thursday 17 October 13
51. Thursday 17 October 13
52. $('.multiselect', context).each(function() { $(this).multiselect({ selectedList: 2, checkAllText: "Alle", uncheckAllText: "Keinen" }).multiselectfilter({label:"", width:"200px"}); }); <div class="filter-column"> <label for="project">Project</label> <select class="multiselect" id="project" name="project" size="5" multiple> <option>DISCOVER</option> <option>IMPROVE</option> <option >MAGENTA</option> <option>ROCA</option> <option>ROCKET</option> </select> </div> Thursday 17 October 13
53. CSS HTML Content Layout Thursday 17 October 13
54. JavaScript CSS HTML Content Behavior Layout Thursday 17 October 13
55. JS component JS glue code HTML Events Methods Component 2 Component 3 ... Layout/CSS styles styles Server / Backend Ajax initializes Base Markup responds with Thursday 17 October 13
56. Or: Just go the SPA way … Thursday 17 October 13
57. Application Browser Google GET / application/json Filter GET / text/html text/html GET / application/json JS-to-HTML Thursday 17 October 13
58. Thursday 17 October 13
59. Use URIs to identify a single meaningful concept Thursday 17 October 13
60. A http://.../A Thursday 17 October 13
61. A B C http://.../A ? Thursday 17 October 13
62. A http://.../A C http://.../C B http://.../B b c + AJAX + CSS Thursday 17 October 13
63. A B C http://.../A Thursday 17 October 13
64. Don’t disable Browser Features – use them Thursday 17 October 13
65. Multiple tabs & windows Bookmarks Back/Forward/Refresh Personalization Menus Thursday 17 October 13
66. ROCA http://roca-style.org/ Thursday 17 October 13
67. Now get serious, please. When to use what? Thursday 17 October 13
68. Pure JavaScript Programming Model Server-side data API “Closed”, desktop-style app Browser as portable runtime platform Offline capability Single Page Apps: Good reasons Thursday 17 October 13
69. “That’s how you do it in 2013” “Progressive enhancement is dead” Required for modern, interactive UIs Single Page Apps: Bad reasons Thursday 17 October 13
70. RESTfulness Accessibility ROCA: Bad reasons Thursday 17 October 13
71. Use of browser features General web affinity Separation of concerns Front-end integration Technology independence SEO ROCA: Good reasons Thursday 17 October 13
72. In summary … Thursday 17 October 13
73. Not everything new is good, not everything old is bad. (Surprise.) Thursday 17 October 13
74. Don’t repeat the mistakes we used to make on the server on the client. Thursday 17 October 13
75. Learning details of how the web works might be time well spent. Thursday 17 October 13
76. Working with the web is a lot easier than fighting it. Thursday 17 October 13
77. Q&A Stefan Tilkov, @stilkov stefan.tilkov@innoq.com Phone: +49 170 471 2625 innoQ Deutschland GmbH 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 www.innoq.com Ohlauer Straße 43 10999 Berlin Germany Phone: +49 2173 3366-0 Robert-Bosch-Straße 7 Germany Phone: +49 2173 3366-0 Radlkoferstraße 2 D-81373 München Telefon +49 (0) 89 741185-270 Thursday 17 October 13