Stencil

"It's Awesome 🔥" - David
Why this presentation?

In complex or large projects, dependencies can cost time and therefore delay and money

What's Stencil?

A compiler and toolchain for building Web Components , Design Systems and Apps  

Why Web Components?

  • Reusability - It works with or without any modern web frameworks
  • Lifespan - Longer life as closer to the platform
  • Portability - Little or no dependencies
  • Why Stencil?

  • ​Virtual DOM
  • Async rendering
  • Reactive data-binding
  • TypeScript
  • JSX
  • Static Site Generation
  • Framework Integrations
  • Who use Stencil?

    • Ionic​
    • Apple
    • Amazon
    • Porsche
    • Microsoft
    • DeckDeckGo 😉

    Get Started

    npm init stencil
    // package.json "devDependencies": { "@stencil/core": "^1.12.2" }
    // stencil.config.ts import { Config } from '@stencil/core'; export const config: Config = { namespace: 'demo-stencil', outputTargets: [ { type: 'dist', esmLoaderPath: '../loader' }, { type: 'www', serviceWorker: null } ] };
    JSX

    - Stencil doc:  Using JSX
    - David: JSX For Angular Developer part  One & Two
    ​class MyComponent { render() { return ( <div> <h1>Hello World</h1> <p>This is JSX!</p> </div> ); } }

    Component

    import { Component, h, Host } from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: false, scoped: true }) export class MyComponent { render() { return <Host></Host>; } }

    Lifecycle Methods

    import {Component, ComponentInterface, h, Host} from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true }) export class MyComponent implements ComponentInterface { async componentWillLoad() {} async componentDidLoad() {} async componentDidUpdate() {} async componentDidUnload() {} render() { return <Host></Host>; } }

    Properties And States

    import {Component, ComponentInterface, h, Host, Prop, State} from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true }) export class MyComponent implements ComponentInterface { @Prop() firstName: string; @State() private lastName: string = 'McLovin'; private age: number = 38; render() { return <Host> <h1>{this.firstName} {this.lastName} {this.age}</h1> </Host>; } }

    Events: Emit And Listen

    import {Component, ComponentInterface, h, Host, Event, EventEmitter} from '@stencil/core'; interface Todo {} @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true }) export class MyComponent implements ComponentInterface { @Event() todoCompleted: EventEmitter<Todo>; @Listen('mouseup', {target: 'document'}) onTodo($event: CustomEvent<Todo>) { console.log('Todo event: ', $event.detail); } todoCompletedHandler(todo: Todo) { this.todoCompleted.emit(todo); } render() { return <Host></Host>; } }

    Expose Methods

    import {Component, ComponentInterface, h, Host, Method} from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true }) export class MyComponent implements ComponentInterface { @Method() async show() {} render() { return <Host></Host>; } } <script> (async () => { await document.querySelector('my-component').show(); })(); </script>

    And more...

  • Host Element
  • Styling
  • Functional Components
  • Testing (Jest, Puppeteer)
  • Docs Auto-Generate
  • Router
  • Store
  •  DEMO 🚀