Progressive Web Components

Transcript

1. Progressive Web Components Frederik Dohr, @fnd
 Stefan Tilkov, @stilkov GOTO Berlin 2016
2. History repeating … CORBA Web WS-* REST
3. What’s the client side analogy?
4. “Web service”1) > Use HTTP as transport > Ignore verbs > Ignores URIs > Expose single “endpoint” > Fails to embrace the Web 1) in the SOAP/WSDL sense > Uses browser as runtime > Ignores forward, back, refresh > Does not support linking > Exposes monolithic “app” > Fails to embrace the browser 2) built as a careless SPA “Web app”2)
5. Desktop-style single-page apps: The browser’s WS-*?
6. Assumption: JS-centric web apps can
 be as good as native apps They shouldn’t be as bad!
7. Simple two-step secret to improving the performance of any website, according to Maciej Ceglowski (@baconmeteor): “1. Make sure that the most important
 elements of the page download and
 render first. 2. Stop there.” http://idlewords.com/talks/website_obesity.htm
8. JavaScript framework tax bloat complexity dependency technical debt
9. The web-native way of distributing logic Process Flow Presentation Domain Logic Data Server Client > Rendering, layout, styling
 on an unknown client > Logic & state machine on server > Client user-agent extensible via
 code on demand
10. ROCA: Resource-oriented Client Architecture http://roca-style.org
11. Framework? We don’t need no stinking framework Maybe we do
12. Framework benefits folklore architecture opinion community skills components component model
14. SPAs : web development :: Trump : democracy
15. Any sufficiently complicated JavaScript client application contains an ad-hoc, informally-specified, bug-ridden, slow implementation of half a browser. — Stefan Tilkov, with apologies to Phillip Greenspun
16. Hard to put into words how utterly broken JS-first web development is. So many parts of the system work against you when you take the reins. — Alex Russell (@slightlylate)
17. Browser Platform Component JavaScript Framework Component Component Component date picker task list shopping cart media player Application
18. < >
 

19. <video >
 

20. <video src="bunny.mp4" controls>
 

21. <video src="bunny.mp4" controls>
 <track kind="subtitles" …>
 </video> play / pause .play() / .pause()
22. source: Big Buck Bunny
23. The browser is the framework #UseThePlatform
24. Browser Platform Component Application JavaScript Framework Component Component Component
25. Browser Platform Application JavaScript Framework Component Component
26. Browser Platform Component Component Component Component Application Component
27. Component <audio src="meow.mp4" controls>
 
 Browser Platform Component Component Component Application
28. Component Browser Platform Component Component Component Glue Code Application
29. <input type="text" class="date"> $("input.date").datepicker();
30. <div class="tabs"> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </div> $(".tabs").tabs();
31. <div class="tabs"> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </div> $(".tabs").tabs();
32. <div class="tabs"> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </div> $(".tabs").tabs(); Unobtrusive JavaScript
33. Component Browser Platform Component Component Component Glue Code HTML JS CSS HTML JS CSS HTML JS CSS HTML JS CSS ✓ Progressive Enhancement
34. Component Browser Platform Component Component Component Glue Code HTML JS CSS HTML JS CSS HTML JS CSS HTML JS CSS ✓ Progressive Enhancement Progressive enhancement is not about dealing with old browsers, it's about dealing with new browsers. — Jeremy Keith (@adactio)
35. <div class="tabs"> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </div> $(".tabs").tabs();
36. <tab-nav> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> </tab-nav> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> $(".tabs").tabs();
37. <tab-nav> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> </tab-nav> <tab-contents> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </tab-contents> $(".tabs").tabs();
38. <ul is="tab-nav"> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <tab-contents> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </tab-contents> $(".tabs").tabs();
39. <ul is="tab-nav"> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <tab-contents> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </tab-contents> Custom Elements
40. customElements.define("task-list");
41. customElements.define("task-list", TaskList); class TaskList extends HTMLElement {}
42. customElements.define("task-list", TaskList); class TaskList extends HTMLElement { constructor() { // element created or upgraded super(); … } connectedCallback() { // element inserted into the DOM … } disconnectedCallback() { // element removed from the DOM … } }
43. customElements.define("task-list", TaskList); class TaskList extends HTMLElement { … attributeChangedCallback(attrName, oldVal, newVal) { … } static get observedAttributes() { return ["theme"]; } }
44. customElements.define("task-list", TaskList); class TaskList extends HTMLElement { … connectedCallback() { let obs = new MutationObserver(this.onChange); obs.observe(this, { childList: true, subtree: true }); } … onChange() { … } }
45. customElements.define("task-list", TaskList); class TaskList extends HTMLElement { … connectedCallback() { let shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.innerHTML = "<canvas></canvas>"; … } … }
46. customElements.define("task-list", TaskList); class TaskList extends HTMLElement { … connectedCallback() { let shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.innerHTML = "<canvas></canvas>"; … } … } Shadow DOM
47. Component Browser Platform Component Component Component Glue Code
48. Component Browser Platform Component Component Component Glue Code Custom Elements Boring Is Good
49. Component Browser Platform Component Component Glue Code Component image source: Openclipart/atlantis
50. Component Browser Platform Component Component Glue Code Component image source: Openclipart/atlantis Style Guides & Component Libraries
51. Wrap-up
52. Backend platform goals > As few assumptions as possible > No implementation dependencies > Small interface surface > Based on standards > Parallel development > Independent deployment > Autonomous operations Backend Platform
53. What’s the frontend platform analogy? > As few assumptions as possible > No implementation dependencies > Small interface surface > Based on standards > Parallel development > Independent deployment > Autonomous operations Backend Platform Frontend Platform
54. The browser as a platform > Independent applications > Loosely coupled > Separately deployable > Based on standard platform > Updated on the fly > Any device Backend Platform Frontend Platform
55. Summary
56. Embracing the browsers constraints provides benefits
57. JS Frameworks provide a proprietary architecture
58. Web components offer a standardized way to get the best of both worlds
59. Frederik Dohr fnd@innoq.com innoQ Deutschland GmbH Krischerstr. 100 40789 Monheim am Rhein Germany Phone: +49 2173 3366-0 innoQ Schweiz GmbH 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 Ludwigstr. 180E 63067 Offenbach Germany Phone: +49 2173 3366-0 Kreuzstraße 16
 80331 München Germany Phone: +49 2173 3366-0 Thank you – that’s all we have. @fnd Stefan Tilkov
 stefan.tilkov@innoq.com @stilkov