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

Angular Berlin Feb '18 - 2018 - The Year of Web Components

Angular Berlin Feb '18 - 2018 - The Year of Web Components

A presentation about Web Components in 2018 and how to implement them using Stencil and Angular. Presented at the Angular Berlin meetup in Feb 2018

0722ad084c65f6177d80cf793cfbd013?s=128

Dominik Kundel

February 14, 2018
Tweet

Transcript

  1. Dominik Kundel | @dkundel | #webComponents #useThePlatform

  2. Hi! I'm Dominik Kundel! Developer Evangelist at ! @dkundel "

    dkundel@twilio.com # github/dkundel Dominik Kundel | @dkundel | #webComponents #useThePlatform
  3. // Sending an SMS using the Twilio API // Twilio

    Credentials const accountSid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; const authToken = 'your_auth_token'; // require the Twilio module and create a REST client const client = require('twilio')(accountSid, authToken); client.messages .create({ to: '+491571111111', from: '+491572222222', body: 'The Force will be with you. Always.' }) .then(message => console.log(message.sid)); Dominik Kundel | @dkundel | #webComponents #useThePlatform
  4. Dominik Kundel | @dkundel | #webComponents #useThePlatform

  5. Dominik Kundel | @dkundel | #webComponents #useThePlatform

  6. Dominik Kundel | @dkundel | #webComponents #useThePlatform

  7. Dominik Kundel | @dkundel | #webComponents #useThePlatform

  8. ! " Web Components? Dominik Kundel | @dkundel | #webComponents

    #useThePlatform
  9. What Are Web Components? Dominik Kundel | @dkundel | #webComponents

    #useThePlatform
  10. The Web Components Specs... • Custom Elements • Shadow DOM

    • HTML templates • HTML imports • (ES2015 modules) Dominik Kundel | @dkundel | #webComponents #useThePlatform
  11. Custom Elements <input type="text" /> <video> <source src="my-video.mp4" /> </video>

    <!-- But how about: --> <my-fancy-button>Click Me </my-fancy-button> <!-- inherited from HTMLElement class --> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  12. Shadow DOM <style> h1 { color: red; border: 1px solid

    #f00; } </style> <h1>Hi I'm red! </h1> <my-fancy-h1> #shadow-dom <h1>!" Can't touch this! # </h1> </my-fancy-h1> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  13. HTML Templates <template id="myShareButton"> <a class="my-share-button" href=""> <img src="my-logo.png" />

    Share </a> </template> <script> const tmpl = document.getElementById('myShareButton'); tmpl.content.querySelector('a').href = 'http: //some-url.com'; const clone = document.importNode(tmpl.content, true); document.body.appendChild(clone); </script> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  14. HTML Imports vs ES2015 modules <link rel="import" href="/src/cool-thing.html"> import {

    MyFancyButton } from ' ../my-fancy-button'; Dominik Kundel | @dkundel | #webComponents #useThePlatform
  15. Why Now? Dominik Kundel | @dkundel | #webComponents #useThePlatform

  16. Dominik Kundel | @dkundel | #webComponents #useThePlatform

  17. Components are everywhere! Dominik Kundel | @dkundel | #webComponents #useThePlatform

  18. Why should we care? Dominik Kundel | @dkundel | #webComponents

    #useThePlatform
  19. We are doing UI components wrong! Dominik Kundel | @dkundel

    | #webComponents #useThePlatform
  20. Option 1: The Bootstrap approach <!doctype html> <html lang="en"> <head>

    <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world! </title> </head> <body> <h1>Hello, world! </h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https: //code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="https: //cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src="https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </body> </html> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  21. Option 1: The Bootstrap approach <div class="alert alert-success" role="alert"> <h4

    class="alert-heading">Well done! </h4> <p>Aww yeah, you successfully read this important alert message </p> <hr> <p class="mb-0"> Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </div> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  22. Option 2: JS based UI components a'la Google Maps /

    jQuery UI <div id="map"> </div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https: //maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer> </script> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  23. Option 3: "Share button" style <div id="fb-root"> </div> <script>(function(d, s,

    id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https: //connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=APP_ID&autoLogAppEvents=1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  24. Option 3: "Share button" style <div class="fb-share-button" data-href="https: //developers.facebook.com/docs/plugins/" data-layout="button_count"

    data-size="small" data-mobile-iframe="true"><a target="_blank" href="https: // www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share </a> </div> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  25. Option 3: "Share button" style <div class="fb-share-button" data-href="https: //developers.facebook.com/docs/plugins/" data-layout="button_count"

    data-size="small" data-mobile-iframe="true"> <a target="_blank" href="https: // www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share </a> </div> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  26. The Result? Dominik Kundel | @dkundel | #webComponents #useThePlatform

  27. Wrapper Components! Dominik Kundel | @dkundel | #webComponents #useThePlatform

  28. Native Components! <input type="number" /> <select> <option>Pizza ! </option> <option>Döner

    " </option> </select> <canvas> No canvas # </canvas> <video src="my-video.mp4"> </video> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  29. The dream ! <script type="module" src="https: //some.cdn.com/bootstrap-alert.js" /> <bootstrap-alert type="success"

    heading="Some Heading"> <p>One paragraph </p> <p>Another paragraph </p> </bootstrap-alert> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  30. The dream ! <script type="module" src="https: //some.cdn.com/google-maps.js" /> <google-map token="abc"

    on-change="somethingChanged"> <google-map-marker latitude="0.1" longitude="-0.1" /> </google-map> Dominik Kundel | @dkundel | #webComponents #useThePlatform
  31. Why should I care? Dominik Kundel | @dkundel | #webComponents

    #useThePlatform
  32. ! " Larger User Base Dominik Kundel | @dkundel |

    #webComponents #useThePlatform
  33. ! Provide Every Team in Your Company With The Same

    Tools Dominik Kundel | @dkundel | #webComponents #useThePlatform
  34. ! " Better Developer Experience Dominik Kundel | @dkundel |

    #webComponents #useThePlatform
  35. ! " Why Not Earlier? Dominik Kundel | @dkundel |

    #webComponents #useThePlatform
  36. ✅ ❌ Browser Support Dominik Kundel | @dkundel | #webComponents

    #useThePlatform
  37. ! Very Low-Level API Dominik Kundel | @dkundel | #webComponents

    #useThePlatform
  38. ! Extensible Web Manifesto github.com/extensibleweb/manifesto Dominik Kundel | @dkundel |

    #webComponents #useThePlatform
  39. ! Extensible Web Manifesto • The standards process should focus

    on adding new low-level capabilities to the web platform that are secure and efficient. • The web platform should expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them. Dominik Kundel | @dkundel | #webComponents #useThePlatform
  40. ! " How The Web Sausage Gets Made by Monica

    Dinculescu (@notwaldorf) youtube.com/watch?v=326SIMmRjc8 Dominik Kundel | @dkundel | #webComponents #useThePlatform
  41. ! Tooling Dominik Kundel | @dkundel | #webComponents #useThePlatform

  42. The Past Dominik Kundel | @dkundel | #webComponents #useThePlatform

  43. Only a few... Dominik Kundel | @dkundel | #webComponents #useThePlatform

  44. How is this better? Dominik Kundel | @dkundel | #webComponents

    #useThePlatform
  45. Pick Your Favorite... ! and Let Others Pick Theirs! !

    Dominik Kundel | @dkundel | #webComponents #useThePlatform
  46. Let's build a Stencil Component! Dominik Kundel | @dkundel |

    #webComponents #useThePlatform
  47. How do I use it in Angular? Dominik Kundel |

    @dkundel | #webComponents #useThePlatform
  48. Wrap up Dominik Kundel | @dkundel | #webComponents #useThePlatform

  49. Think about Web Components for any shared UI Dominik Kundel

    | @dkundel | #webComponents #useThePlatform
  50. Web Components won't limit your framework choices Dominik Kundel |

    @dkundel | #webComponents #useThePlatform
  51. Pick Your Favorite... ! and Let Others Pick Theirs! !

    Dominik Kundel | @dkundel | #webComponents #useThePlatform
  52. webcomponents.org Dominik Kundel | @dkundel | #webComponents #useThePlatform

  53. custom-elements-everywhere.com Dominik Kundel | @dkundel | #webComponents #useThePlatform

  54. github.com/shprink/web-components-todo Dominik Kundel | @dkundel | #webComponents #useThePlatform

  55. Resources • ! d-k.im/webcomp-stencil • " d-k.im/webcomp-ng-berlin • webcomponents.org •

    ✅ custom-elements-everywhere.com • $% github.com/dkundel/webcomponents-by-example • & github.com/shprink/web-components-todo Dominik Kundel | @dkundel | #webComponents #useThePlatform
  56. Thank You! ! Dominik Kundel " d-k.im/webcomp-ng-berlin # @dkundel $

    dkundel@twilio.com % github/dkundel Dominik Kundel | @dkundel | #webComponents #useThePlatform