Stencil: a New Hope of Web Components

Stencil: a New Hope of Web Components

It is hard to migrate from existing framework/library to new technology, especially when you already developed the huge library used across teams and projects. Migrating from framework A to framework B usually means complete re-writing all existing components and business logic. But could we avoid such situations in the future? The answer is in Web Components spec and Stencil is a compiler with superpowers.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

December 13, 2017
Tweet

Transcript

  1. a New Hope of Web Components

  2. Vitalii Bobrov JavaScript Developer @ Luxoft Poland @bobrov1989 https://vitaliy-bobrov.github.io/

  3. Outline • Motivation • Introduction to Web Components • Introduction

    to Stencil • Stencil API • How to get started
  4. Real Story A long time ago in a galaxy far,

    far away....
  5. Enterprise Death Star

  6. Technologies Inside • Micro services build on J • Web

    app build with framework A
  7. Migrate app from framework A to framework A²

  8. New Request from Client Business BA PM QA Back-end Dev

    Front-end Dev
  9. What about framework R? Or framework V?

  10. Re-write ALL components from SCRATCH?

  11. All We Want Reusable Components

  12. Framework Agnostic Components that NOT rely on any framework but

    PLATFORM
  13. Web Components could it be…

  14. Web Components Platform feature that can save people and restore

    freedom to the galaxy....
  15. Web Components

  16. Web Components Custom Elements

  17. Web Components Custom Elements Templates

  18. Web Components Custom Elements Templates Shadow DOM

  19. Web Components Custom Elements Templates Shadow DOM JS Modules

  20. Browsers Support Chrome Safari Firefox Edge IE 11 JS Modules

    ☹ Custom Elements ☹ ☹ Templates ☹ Shadow DOM ☹ ☹
  21. Developers waiting for new feature support

  22. For Unsupported Features Polyfills Available

  23. Reasons to Use • Natively-supported, standardized JavaScript components • Run

    in every framework or on their own • Answer to the shared-component problem • Powered by the Custom Element spec • Native browser support: Chrome, Safari, good polyfills
  24. So we can create components using only Custom Elements spec?

  25. Custom Element <light-saber size="large" color="blue" active="true"></light-saber>

  26. class LightSaber extends HTMLElement { static get observedAttributes() { return

    ['size', 'color', 'active']; } attributeChangedCallback(name, oldValue, newValue) { switch(name) { case 'size': // React on change. break; case 'color': // React on change. break; case 'active': // React on change. break; default: break; } } } window.customElements.define('light-saber', LightSaber); Element Declaration
  27. constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); const blade

    = document.createElement('span'); blade.classList.add('saber-blade'); blade.addEventListener('click', () => { this.setAttribute('highlight', false); }); shadow.appendChild(blade); } Adding Shadow DOM
  28. Dispatching Events dispatchChangeEvent(status) { const options = { bubble: true,

    composed: false, details: status }; const event = new CustomEvent('sabrechange', options); this.dispatchEvent(event); }
  29. More Callbacks class LightSaber extends HTMLElement { connectedCallback() { //

    Some initial setup. } disconnectedCallback() { // Cleanup after element destroy. } attributeChangedCallback(name, oldValue, newValue) { // Validate and handle attributes changes. } }
  30. Building Web Components with spec

  31. Help, proper tool will. Hmmmmmm.

  32. Stencil Stencil has dispatched Web Components, the guardians of peace

    and justice in the galaxy, to settle the conflict....
  33. Stencil is NOT a FRAMEWORK

  34. What is Stencil? Stencil is a COMPILER that generates WEB

    COMPONENTS
  35. I’m your FATHER!

  36. None
  37. What is Stencil? • A compiler that generates Custom Elements,

    part of the Web Components spec • Not a framework: output is 100% standards-compliant Custom Elements • Adds powerful framework features to Web Components • Created and used heavily by the Ionic Framework team. Ionic 4+ is built on it!
  38. None
  39. Stencil combines the BEST CONCEPTS of all modern frameworks into

    a SIMPLE build-time TOOL
  40. Super Powers • Virtual DOM • JSX • TypeScript •

    Async Rendering (inspired by React Fiber) • Lazy Loading • Reactive Data-Binding
  41. Why Stencil? • Performance: Traditional frameworks proving too heavy for

    demanding mobile Progressive Web Applications • Stability: Desire to use web standards and avoid constant framework churn • Interoperability: Ability to create components that work across all major frameworks • Familiarity: features from frameworks but in a leaner, standards-compliant package
  42. import { Component, Prop, Event, Listen } from '@stencil/core'; @Component({

    tag: 'light-saber', styleUrl: 'light-saber.scss', shadow: true }) export class LightSaberComponent { @Prop() size: number; @Prop() color: string; @Prop() active: boolean; @Event() saberChange: EventEmitter; @Listen('click') onItemToggle() { const { size, color, active } = this; this.saberChange.emit({ size, color, active }); } render() { return ( <div class="saber"> <span class="saber-blade"></span> </div> ); } } Light Saber Component
  43. Stencil API This ultimate API will spell certain doom for

    the small band of rebels struggling to restore freedom to the galaxy…
  44. Stencil Decorators • @Component(): set tag name and associated stylesheet

    • @Prop(): Create a property on the component • @State(): local state that should be watched during change detection • @Event(): Trigger events on a component • @Listen(): listen for events fired from children • @Element(): grab the DOM element for this component
  45. Looks exactly like…

  46. @Component @Component @Prop @Input @Event @Output @Listen @HostListener @Element ElementRef

  47. Stencil Life Cycle componentWillLoad componentWillMount componentDidLoad componentDidMount componentWillUpdate componentWillUpdate componentDidUpdate

    componentDidUpdate componentDidUnload componentWillUnmount
  48. None
  49. How is Stencil Different from X? • Angular/React/Vue/etc.: Stencil builds

    standards-based web components that run natively in the browser. • Polymer: Stencil works primarily at build rather than runtime. Outputs vanilla web components. Opinionated around JSX, Virtual DOM, and other framework features. • Vanilla Web Components: Stencil provides complicated framework features as if you wrote them yourself in vanilla Web Components.
  50. It is NOT just another TOOL

  51. Get Started git clone https://github.com/ionic-team/stencil-starter.git stencil-app cd stencil-app // npm

    npm install npm start // yarn yarn yarn start
  52. Official Docs https://stenciljs.com/docs/intro

  53. Articles • How I created SmileToUnlock with StencilJS • Create

    your first Web Component with Stencil JS • Getting Started With Stencil • Stencil.js: it’s finally time for vanilla web components!
  54. Thank You! Keep calm and #UseThePlatform @bobrov1989 https://vitaliy-bobrov.github.io/

  55. May be, some QUESTIONS, you have, hmm?