Intro to Web Components

Slide 1

Slide 1 text

INTRO TO WEBCOMPONENTS

Slide 2

Slide 2 text

ABOUT ME ▸ Miguel Laginha ▸ Apereo Foundation ▸ Open Academic Environment (OAE) ▸ ESUP-Portail

Slide 3

Slide 3 text

2018 WAS A LEAP YEAR FOR THE WEB.

Slide 4

Slide 4 text

YET NO ONE NOTICED. WHY?

Slide 5

Slide 5 text

WE'VE BEEN TOO BUSY DISCUSSING WHICH FRAMEWORK IS BEST

Slide 6

Slide 6 text

WHAT HAPPENED? FIREFOX 63

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

WE CAN ALL BE BFFS AND LEVERAGE EACH OTHER'S WITHOUT ADOPTING EVERY ASPECT OT EACH OTHER'S WORK

Slide 9

Slide 9 text

ENTER WEB COMPONENTS =)

Slide 10

Slide 10 text

WHAT IS THAT?

Slide 11

Slide 11 text

1ST ANSWER IT'S NOT ANOTHER FRAMEWORK

Slide 12

Slide 12 text

2ND ANSWER IT'S A SET OF W3C STANDARDS

Slide 13

Slide 13 text

3RD ANSWER YES, IT'S AVAILABLE TODAY, EVERYWHERE

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

4TH ANSWER IT'S NOT EVEN A NEW IDEA! THERE'S PROOF

Slide 16

Slide 16 text

5TH ANSWER (FAV) THE WEB AS THE PLATFORM

Slide 17

Slide 17 text

Slide 18

Slide 18 text

HTML TEMPLATE CUSTOM ELEMENTS ES MODULES SHADOW DOM <slot>

Slide 19

Slide 19 text

ALRIGHT, BUT HOW?

Slide 20

Slide 20 text

LIBRARY DIFFERENCES EXAMPLE

Slide 21

Slide 21 text

HELLO WORLD EXAMPLE // taken from https://lit-element.polymer-project.org/ import { LitElement, html } from 'lit-element'; class SimpleGreeting extends LitElement { static get properties() { return { name: { type: String } }; } constructor() { super(); this.name = 'World'; } render() { return html`

Hello, ${this.name}!

`; } } customElements.define('simple-greeting', SimpleGreeting);

Slide 22

Slide 22 text

WHAT'S IN IT FOR DEVS? ▸ CSS is scoped ▸ Custom HTML is semantic ▸ JS scoping is simpler ▸ Re-usable code ▸ Accessibility becomes manageable ▸ WC keeps design intentional

Slide 23

Slide 23 text

WHAT'S IN IT FOR MANAGERS? ▸ Lower maintenance costs ▸ Cost of development collapses ▸ Lower boilerplate and churn for future projects ▸ Extensibility ▸ It's a W3C standard, no legacy

Slide 24

Slide 24 text

I'M SOLD, LET'S TRY IT

Slide 25

Slide 25 text

A GLIMPSE INTO THE FUTURE!

Slide 26

Slide 26 text

A GLIMPSE INTO THE FUTURE ▸ video players ▸ dropdown menus ▸ timelines ▸ animations ▸ all sorts of visual and non visual components

Slide 27

Slide 27 text

ADVANTAGES IN A NUTSHELL ▸ 100% re-usable components (style, business logic or mixed) ▸ Split work among teams ▸ CDN served components ▸ No need for greenfield projects, upgrade step by step! ▸ No need for a framework ▸ Avoid (platform) lock-in

Slide 28

Slide 28 text

BARRIERS TO ADOPTION ▸ Lots of libraries already (litElement, skateJs, Stencil, slimJS, etc) ▸ Requires proper JS knowledge ▸ Requires tooling (webpack, lerna, rollup, npm, git, etc...) ▸ Deployment ▸ Documentation

Slide 29

Slide 29 text

WHO'S USING? ▸ Youtube: https://www.youtube.com/ ▸ EA: https://www.ea.com/en-gb ▸ https://www.webcomponents.org/ ▸ https://www.byu.edu/

Slide 30

Slide 30 text

COMMUNITY RESOURCES ▸ OpenWC ▸ WebComponents.org ▸ Try litElement ▸ Polymer ▸ Compatibility ▸ dev.to