Slide 1

Slide 1 text

FANCY WEB COMPONENTS WITH

Slide 2

Slide 2 text

VITALII BOBROV JAVASCRIPT DEV @ LUXOFT @bobrov1989 vitaliy-bobrov.github.io

Slide 3

Slide 3 text

STENCIL IS A COMPILER THAT GENERATES WEB COMPONENTS ” “ WHAT IS STENCIL?

Slide 4

Slide 4 text

IT IS NOT A FRAMEWORK

Slide 5

Slide 5 text

CONSISTS OF 4 API WHAT IS WEB COMPONENTS? • JavaScript Modules • Custom Elements • HTML Template • Shadow DOM

Slide 6

Slide 6 text

FRAMEWORKS WEB COMPONENTS SKATEJS

Slide 7

Slide 7 text

BROWSERS SUPPORT Chrome (blink-based) Safari Firefox Edge IE JS modules (optional) ☹ Custom Elements ☹ ☹ HTML Template ☹ Shadow DOM ☹ ☹

Slide 8

Slide 8 text

FOR OLD BROWSERS USE POLYFILL

Slide 9

Slide 9 text

WHY WE SHOULD USE WEB COMPONENTS?

Slide 10

Slide 10 text

RE-USABLE COMPONENTS ALL WE WANT

Slide 11

Slide 11 text

COMPONENTS THAT NOT RELY ON ANY FRAMEWORK BUT PLATFORM ” “ AND FRAMEWORK AGNOSTIC

Slide 12

Slide 12 text

AWESOME ALL MODERN FRAMEWORKS

Slide 13

Slide 13 text

STENCIL COMBINES THE BEST CONCEPTS OF THE MOST POPULAR FRAMEWORKS INTO A SIMPLE BUILD-TIME TOOL ” “ JUST USE ALL THE BEST

Slide 14

Slide 14 text

KEY FEATURES • Virtual DOM • Async rendering (inspired by React Fiber) • Reactive data-binding • TypeScript • JSX • Server Side Rendering (SSR)

Slide 15

Slide 15 text

FIBER VS STENCIL DEMO https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html https://stencil-fiber-demo.firebaseapp.com/perf.html

Slide 16

Slide 16 text

WE ARE ENTERING NO FRAMEWORK ERA ” “

Slide 17

Slide 17 text

HOW TO GET STARTED?

Slide 18

Slide 18 text

BASIC COMPONENT import { Component, Prop } from '@stencil/core'; @Component({ tag: 'my-name', styleUrl: 'my-name.scss' }) export class MyName { @Prop() first: string; @Prop() last: string; render() { return (
Hello, my name is {this.first} {this.last}
); } }

Slide 19

Slide 19 text

API REVIEW

Slide 20

Slide 20 text

DECORATORS • @Component • @Prop • @State • @Method • @Element • @Event • @Listen

Slide 21

Slide 21 text

LIFE CYCLE HOOKS • componentWillLoad • componentDidLoad • componentWillUpdate • componentDidUpdate • componentDidUnload

Slide 22

Slide 22 text

PROPERTY HOOKS • @PropWillChange • @PropDidChange

Slide 23

Slide 23 text

DEMO TIME https://github.com/vitaliy-bobrov/stencil-meetjs-demo

Slide 24

Slide 24 text

QUESTIONS?

Slide 25

Slide 25 text

THANK YOU! USE THE PLATFORM ” “