Stencil the time for vanilla web components has arrived
0 likes293 views
Stencil provides a compiler that generates standard-compliant custom elements from components written using its API, making it easier to create reusable web components. It addresses problems with vanilla custom elements by adding features like virtual DOM, reactivity, JSX and TypeScript support. Stencil components can be used by any framework since the output is just standard web components, avoiding issues of framework coupling. It also helps create sharable infrastructure components and enables building microfrontends with shared behaviors across applications.
Stencil the time for vanilla web components has arrived
- 1. Stencil: The Time for Vanilla Web Components has Arrived Gil Fink sparXys CEO @gilfink / www.gilfink.net
- 2. Typical Application Web Page Design
- 3. From Design to Implementation Track List track <track-list /> <track /> <track-header /> <track-content /> Component Child component <grand-child /> <grand-child /> header content
- 4. How would you build that page?
- 5. Do we really need all these frameworks/libraries?
- 6. What if we could teach the browser new elements?
- 7. Each Element Instance • Will be a DOM element • Creates its own DOM tree • Can be accessed and manipulated using DOM functions or its own API • Is a JavaScript object • Is this possible?
- 8. This is where our journey begins
- 9. About Me • sparXys CEO and senior consultant • Microsoft MVP in the last 9 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
- 10. Agenda • The Problems We Faced • Web Components APIs • Stencil
- 12. Poor Separation of Concerns You want HTML, CSS and JavaScript to work together You end up with a mess
- 13. Bundling is Hard • You want to bundle a complex component The component includes HTML, CSS and JavaScript how would you do that? • Use a server side mechanism? • Bundler? (Webpack/Browserify)
- 14. Web Components Standard to The Rescue • Natively-supported, standardized JavaScript components • Some general goals: Code Reuse Encapsulation Separation of Concerns Composition Theming Expressive Semantic
- 15. The Web Components Standard • Reusable DOM fragmentsTemplates • Load HTML declarativelyImports • DOM encapsulationShadow DOM • Create your own elements Custom Elements
- 16. Custom Elements • Enable to extend or create custom HTML elements • Defined using the customElements.define function: or extend an existing element: var myInput = window.customElements.define(‘my-input’, class x extends HTMLElement {…}); var myInput = window.customElements.define(‘my-input’, class y extends HTMLInputElement {...});
- 17. Custom Elements – Usage • Use the element in your DOM: or use the createElement function: <my-input></my-input> var elm = document.createElement(‘my-input’);
- 18. Custom Element Life Cycle Events • connectedCallback • disconnectedCallback • attributeChangedCallback • adoptedCallback class MyInput extends HTMLElement { constructor() { super(); // your initialization code goes here } connectedCallback() {…} disconnectedCallback() {…} attributeChangedCallback() {…} adoptedCallback() {…} }
- 20. A Problem with Web Development Today • Catholic wedding with frameworks/libraries • Infrastructure is based on a framework/library • Infrastructure isn’t reusable if other company projects use another framework/library
- 21. Problem with Web Development Today – Cont. • Custom Elements can remove the barrier of framework/library coupling • Can be used by any framework/library • Encapsulate their functionality and style • Suitable for component infrastructure development
- 22. But there are problems with custom elements
- 23. Problems with Custom Elements • We are used to runtime framework/library goodies such as: • Virtual DOM • Data binding • Performance • Server side rendering • And etc.
- 24. Problems with Custom Elements – Cont. • Verbose syntax • Too much boilerplate • We need to craft everything by ourselves
- 25. Problems with Custom Elements – Cont. • Still W3C working draft • Need Polyfills in some browsers
- 26. Is there a better way?
- 28. What is Stencil? • A compiler that generates Custom Elements • Not a framework/library • Output is 100% standards-compliant web components • Adds powerful framework features to Web Components • Virtual DOM • Reactivity • JSX • TypeScript • And etc. • Created and used by Ionic Framework
- 29. Stencil Component Example import { Component, Prop } from '@stencil/core'; @Component({ tag: 'my-name', styleUrl: 'my-name.scss' }) export class MyName { @Prop() name: string; render() { return ( <p> Hello, my name is {this.name} </p> ); } }
- 30. From Stencil to Custom Elements import { Component, Prop } from '@stencil/core'; @Component({ … }) export class CollapsiblePanel { … } Stencil Code JavaScript Code Stencil Compiler var CollapsiblePanel = (function () { function CollapsiblePanel() { } … // implementation return CollapsiblePanel; }()); Stencil Compiler
- 32. Getting Started with Stencil git clone https://github.com/ionic-team/stencil-component-starter.git my-component cd my-component git remote rm origin npm install npm start
- 34. Stencil API • Based on JavaScript decorators • Written with TypeScript • You can use the following decorators: • @Component() • @Prop() • @State() • @Event() • @Listen() • @Element() • @Method()
- 35. @Component Decorator • The main Stencil decorator • Configures the entire component including • Tag • Style • Shadow DOM • Host • Assets import { Component } from '@stencil/core'; @Component({ tag: 'st-comp', styleUrl: 'comp.scss', shadow: true }) export class Comp { ... }
- 36. @Prop and @State Decorators • The Prop decorator is used to indicate that a member is exposed as component attribute • The State decorator is used to indicate that a member is part of the component state • Reactivity import {Component, Prop, State} from '@stencil/core'; @Component({ tag: 'collapsible-panel', styleUrl: 'collapsible-panel.css' }) export class CollapsiblePanel { @Prop() title: string; @State() collapsed: boolean; ... }
- 37. @Method Decorator • The Method decorator is used to expose component API import { Component, Element, Method } from '@stencil/core'; @Component({ ... }) export class Toaster { @Element() toasterDiv: HTMLElement; @Method() showToast() { this.toasterDiv.style.display = 'block'; }; }
- 38. Demo Creating a Stencil Component
- 39. Deploying a Stencil Component • Update the stencil.config.js file, if needed • stencil.config.js in Stencil starter already has these things configured exports.config = { namespace: 'myname', generateDistribution: true, generateWWW: false, ... };
- 40. How Stencil helps with the Frameworks Problem? • Stencil works primarily in build time • Any framework/library (such as React or Angular) can consume the generated component • As a script tag • As a node module • Using the stencil-starter-app • Stencil is suitable for infrastructure components
- 42. A Word About Micro Frontends Shared Components and Behaviors Generate Micro-app 1 Micro-app 2 Micro-app 3
- 43. Summary • Web Component standard is very powerful • But… still in development • Stencil compiler can ease the pain of creating custom elements • Includes a lot of advantages such as JSX, TypeScript and more • Generates standard-compliant web components
- 44. Resources • Stencil website: https://stenciljs.com/ • Custom Elements: https://mzl.la/2L6jyP7 • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
- 45. #UseThePlatform
- 46. Thank You!