This document discusses how Stencil can help address problems with building web applications using traditional frameworks and libraries. Stencil is a compiler that generates custom elements from components written with its API, providing features like virtual DOM, reactivity, and JSX without coupling to a specific framework. It addresses issues like verbose custom element syntax, lack of runtime features, and polyfill needs. The document demonstrates how to create and consume Stencil components, and how it allows infrastructure components to be reused across frameworks by compiling to standard web components.

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
Session List
Session details
Speaker details
Session filters
Component
Child component
Child component
Child component
<session-list />
<session-details />
<speaker-details />
<session-filters />

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 8 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

11. Undescriptive Markup
Markup Example

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. 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
class MyInput extends HTMLElement {
constructor() {
super();
// your initialization code goes here
}
connectedCallback() {…}
disconnectedCallback() {…}
attributeChangedCallback() {…}
}

19. Demo
Custom Elements

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?

27. What if I told you that you can
solve all the previous problems?

29. 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

30. 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>
);
}
}

31. 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

33. 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. Demo
Hello Stencil

35. 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

36. Stencil API
• Based on JavaScript decorators
• Written with TypeScript
• You can use the following decorators:
• @Component()
• @Prop()
• @State()
• @Event()
• @Listen()
• @Element()
• @Method()

37. @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 {
...
}

38. @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;
...
}

39. @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) {
}
}

40. @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';
};
}

41. @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';
};
}

42. Demo
Creating a Stencil Component

43. 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,
...
};

44. Deploying a Stencil Component – Cont.
• Update the package.json file, if needed
{
"main": "dist/collection/index.js",
"types": "dist/collection/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
"files": [
"dist/"
],
"browser": "dist/myname.js",
...
}

45. How Stencil Solves the Frameworks Problem?
• Stencil works primarily in the 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

46. Demo
Consuming a Stencil component from Angular

47. A Word About Micro Frontends
Shared Components and Behaviors
Generate
Micro-app 1 Micro-app 2 Micro-app 3

48. 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

49. 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

50. #UseThePlatform

51. Thank You!