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.

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!
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!
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
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?