Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Components

Afd6dc452bc20f8f06612d4792bb8be3?s=47 Stefan Tilkov
November 25, 2016

Progressive Web Components

Afd6dc452bc20f8f06612d4792bb8be3?s=128

Stefan Tilkov

November 25, 2016
Tweet

More Decks by Stefan Tilkov

Other Decks in Technology

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

  13. None
  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