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

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Hi! I'm Dominik Kundel! Developer Evangelist at ! @dkundel "
[email protected] # github/dkundel Dominik Kundel | @dkundel | #webComponents #useThePlatform

// 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

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

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

The Web Components Specs... • Custom Elements • Shadow DOM
• HTML templates • HTML imports • (ES2015 modules) Dominik Kundel | @dkundel | #webComponents #useThePlatform

Custom Elements <input type="text" /> <video> <source src="my-video.mp4" /> </video>
 <my-fancy-button>Click Me </my-fancy-button>  Dominik Kundel | @dkundel | #webComponents #useThePlatform

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

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

HTML Imports vs ES2015 modules <link rel="import" href="/src/cool-thing.html"> import {
MyFancyButton } from ' ../my-fancy-button'; Dominik Kundel | @dkundel | #webComponents #useThePlatform

Why Now? Dominik Kundel | @dkundel | #webComponents #useThePlatform

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

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

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

Option 1: The Bootstrap approach <!doctype html> <html lang="en"> <head>
 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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>   <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

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

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

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

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&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share </a> </div> Dominik Kundel | @dkundel | #webComponents #useThePlatform

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&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share </a> </div> Dominik Kundel | @dkundel | #webComponents #useThePlatform

The Result? Dominik Kundel | @dkundel | #webComponents #useThePlatform

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

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

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

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

Why should I care? Dominik Kundel | @dkundel | #webComponents
#useThePlatform

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

! Provide Every Team in Your Company With The Same
Tools Dominik Kundel | @dkundel | #webComponents #useThePlatform

! " Better Developer Experience Dominik Kundel | @dkundel |

! " Why Not Earlier? Dominik Kundel | @dkundel |

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

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

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

! Extensible Web Manifesto • The standards process should focus
on adding new low-level capabilities to the web platform that are secure and eﬃcient. • 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

! " How The Web Sausage Gets Made by Monica
Dinculescu (@notwaldorf) youtube.com/watch?v=326SIMmRjc8 Dominik Kundel | @dkundel | #webComponents #useThePlatform

! Tooling Dominik Kundel | @dkundel | #webComponents #useThePlatform

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

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

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

Pick Your Favorite... ! and Let Others Pick Theirs! !

Let's build a Stencil Component! Dominik Kundel | @dkundel |

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

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

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

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

Pick Your Favorite... ! and Let Others Pick Theirs! !

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

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

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

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

Thank You! ! Dominik Kundel " d-k.im/webcomp-ng-berlin # @dkundel $
[email protected] % github/dkundel Dominik Kundel | @dkundel | #webComponents #useThePlatform

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

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

More Decks by Dominik Kundel

Other Decks in Programming

Featured

Transcript