Successfully reported this slideshow.
Your SlideShare is downloading. ×

Stencil: The Time for Vanilla Web Components has Arrived

Ad

Stencil: The Time for Vanilla
Web Components has Arrived
Gil Fink
sparXys CEO
@gilfink / www.gilfink.net

Ad

Typical Application Web Page Design

Ad

From Design to Implementation
Session List
Session details
Speaker details
Session filters
Component
Child component
Child...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 50 Ad
1 of 50 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Stencil: The Time for Vanilla Web Components has Arrived

  1. 1. Stencil: The Time for Vanilla Web Components has Arrived Gil Fink sparXys CEO @gilfink / www.gilfink.net
  2. 2. Typical Application Web Page Design
  3. 3. From Design to Implementation Session List Session details Speaker details Session filters Component Child component Child component Child component <session-list /> <session-details /> <speaker-details /> <session-filters />
  4. 4. How would you build that page?
  5. 5. Do we really need all these frameworks/libraries?
  6. 6. What if we could teach the browser new elements?
  7. 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. 8. This is where our journey begins
  9. 9. About Me • sparXys CEO and senior consultant • Microsoft MVP in the last 8 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
  10. 10. Agenda • The Problems We Faced • Web Components APIs • Stencil
  11. 11. Undescriptive Markup Markup Example
  12. 12. Poor Separation of Concerns You want HTML, CSS and JavaScript to work together You end up with a mess The wiring gets in your way!
  13. 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. 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. 15. The Web Components Standard • Reusable DOM fragmentsTemplates • Load HTML declarativelyImports • DOM encapsulationShadow DOM • Create your own elements Custom Elements
  16. 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’); var myInput = window.customElements.define(‘my-input’, class extends HTMLInputElement {...});
  17. 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. 18. Custom Element Life Cycle Events • connectedCallback • disconnectedCallback • attributeChangedCallback class MyInput extends HTMLElement { constructor() { super(); // your initialization code goes here } connectedCallback() {} disconnectedCallback() {} attributeChangedCallback() {} }
  19. 19. Demo Custom Elements
  20. 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. 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. 22. But there are problems with custom elements
  23. 23. Problems with Custom Elements • We are used to runtime framework/library goodies such as: • Virtual DOM • Data binding • Performance • And etc.
  24. 24. Problems with Custom Elements – Cont. • Verbose syntax • Too much boilerplate • We need to craft everything
  25. 25. Problems with Custom Elements – Cont. • Still W3C working draft • Need Polyfills in some browsers
  26. 26. Is there a better way?
  27. 27. What if I told you that you can solve all the previous problems?
  28. 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. 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. 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
  31. 31. 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
  32. 32. Demo Hello Stencil
  33. 33. Stencil Generated Component Advantages • Virtual DOM • fast DOM updates without common DOM performance pitfalls • Lazy Loading • By default components load asynchronously and can be bundled with related components • Reactivity • Efficient updates based on property and state changes • High-performance Rendering • async rendering system, similar to React Fiber
  34. 34. Stencil API • Based on JavaScript decorators • Written with TypeScript • You can use the following decorators: • @Component() • @Prop() • @State() • @Event() • @Listen() • @Element()
  35. 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. 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. 37. @Event and @Listen Decorators • The Event decorator enables you to expose an EventEmitter • The Listen decorator enables you to listen to custom events import { Event, Listen, EventEmitter } from '@stencil/core'; @Component({ ... }) export class Toaster { @Event() toasterFadeOut: EventEmitter; toasterFadeOutHandler() { this.toasterFadeOut.emit(); } } export class ToasterApp { @Listen('toasterFadeOut') toasterFadeOutHandler(event: CustomEvent) { } }
  38. 38. @Element Decorator • The Element decorator enables you to get a reference to the component’s host element import { Component, Element } from '@stencil/core'; @Component({ ... }) export class Toaster { @Element() toasterDiv: HTMLElement; showToast() { this.toasterDiv.style.display = 'block'; }; }
  39. 39. Demo Creating a Stencil Component
  40. 40. Deploying a Stencil Component • Update the stencil.config.js file exports.config = { namespace: 'myname', generateDistribution: true, generateWWW: false, ... };
  41. 41. Deploying a Stencil Component – Cont. • Update the package.json file { "main": "dist/collection/index.js", "types": "dist/collection/index.d.ts", "collection": "dist/collection/collection-manifest.json", "files": [ "dist/" ], "browser": "dist/myname.js", ... }
  42. 42. How Stencil Solves the Frameworks Problem? • Stencil works primarily at 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
  43. 43. Demo Consuming a Stencil component from Angular
  44. 44. A Word About Micro Frontends Shared Components and Behaviors Generate Micro-app 1 Micro-app 2 Micro-app 3
  45. 45. Summary • Web Component standard is very powerful • 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
  46. 46. Resources • Stencil website: https://stenciljs.com/ • Custom Elements: https://developer.mozilla.org/en- US/docs/Web/Web_Components/Custom_Elements • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
  47. 47. #UseThePlatform
  48. 48. Thank You!

×