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

Dominik Kundel

February 14, 2018
Tweet

More Decks by Dominik Kundel

Other Decks in Programming

Transcript

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

    [email protected] # github/dkundel Dominik Kundel | @dkundel | #webComponents #useThePlatform
  2. // 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
  3. The Web Components Specs... • Custom Elements • Shadow DOM

    • HTML templates • HTML imports • (ES2015 modules) Dominik Kundel | @dkundel | #webComponents #useThePlatform
  4. 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
  5. 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
  6. 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
  7. HTML Imports vs ES2015 modules <link rel="import" href="/src/cool-thing.html"> import {

    MyFancyButton } from ' ../my-fancy-button'; Dominik Kundel | @dkundel | #webComponents #useThePlatform
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. ! " Larger User Base Dominik Kundel | @dkundel |

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

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

    #webComponents #useThePlatform
  20. ! 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
  21. ! " How The Web Sausage Gets Made by Monica

    Dinculescu (@notwaldorf) youtube.com/watch?v=326SIMmRjc8 Dominik Kundel | @dkundel | #webComponents #useThePlatform
  22. Pick Your Favorite... ! and Let Others Pick Theirs! !

    Dominik Kundel | @dkundel | #webComponents #useThePlatform
  23. How do I use it in Angular? Dominik Kundel |

    @dkundel | #webComponents #useThePlatform
  24. Think about Web Components for any shared UI Dominik Kundel

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

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

    Dominik Kundel | @dkundel | #webComponents #useThePlatform
  27. 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
  28. Thank You! ! Dominik Kundel " d-k.im/webcomp-ng-berlin # @dkundel $

    [email protected] % github/dkundel Dominik Kundel | @dkundel | #webComponents #useThePlatform