Slide 1

Slide 1 text

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 5

Slide 5 text

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 6

Slide 6 text

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 7

Slide 7 text

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Custom Elements Click Me Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 12

Slide 12 text

Shadow DOM h1 { color: red; border: 1px solid #f00; }

Hi I'm red!

#shadow-dom

!" Can't touch this! #

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 13

Slide 13 text

HTML Templates Share 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); Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 14

Slide 14 text

HTML Imports vs ES2015 modules import { MyFancyButton } from ' ../my-fancy-button'; Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Option 1: The Bootstrap approach Hello, world!

Hello, world!

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 21

Slide 21 text

Option 1: The Bootstrap approach

Well done!

Aww yeah, you successfully read this important alert message


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 22

Slide 22 text

Option 2: JS based UI components a'la Google Maps / jQuery UI
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 23

Slide 23 text

Option 3: "Share button" style
(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')); Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 24

Slide 24 text

Option 3: "Share button" style Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 25

Slide 25 text

Option 3: "Share button" style Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Native Components! Pizza ! Döner " No canvas # Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 29

Slide 29 text

The dream !

One paragraph

Another paragraph

Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 30

Slide 30 text

The dream ! Dominik Kundel | @dkundel | #webComponents #useThePlatform

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

! 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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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