Session I delivered in You Gotta Love Frontend

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

2. Typical Application Web Page Design

3. From Design to Implementation
Main Section
Add your content
Campaign content
Controls
Component
Child component
Child component
Child component
<main-section />
<add-your-content />
<campaign-content />
<controls />

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. This is where our journey
begins

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

9. Agenda
Web Components APIs in a nutshell
Getting to know Stencil

10. Web Components to the Rescue
Natively-supported, standardized JavaScript components
Some general goals:
Code Reuse Encapsulation
Separation of
Concerns
Composition Theming Expressive Semantic

11. The Web Components APIs
• Reusable DOM fragmentsTemplates
• Load HTML declarativelyImports
• DOM encapsulation
Shadow
DOM
• Create your own elements
Custom
Elements

12. Custom Element Example – Template
<template id="collapsibleTmpl">
<style>
#header {
background: blue;
color: white;
cursor: pointer;
padding: 2px;
}
</style>
<div style="border: black dashed 1px">
<div id="header"></div>
<slot name="slot-content"></slot>
</div>
</template>

13. Custom Element Example – Component
class CollapsiblePanel extends HTMLElement {
constructor() {
super();
this.init();
}
init() {
let shadowRoot = this.attachShadow({mode: 'open'});
const t = thisDoc.querySelector('#collapsibleTmpl');
const instance = t.content.cloneNode(true);
this.header = instance.querySelector('#header');
shadowRoot.appendChild(instance);
this.show = true;
this.boundCollapse = this.collapse.bind(this);
}
….

14. Custom Element Example – Component Cont.
connectedCallback() {
this.header.textContent = this.getAttribute('data-collapse-header');
this.header.addEventListener('click', this.boundCollapse);
this.content = this.querySelector("[slot='slot-content']");
}
disconnectedCallback() {
this.header.removeEventListener('click', this.boundCollapse);
}
collapse() {
this.show = !this.show;
this.content.style.display = this.show ? 'block' : 'none';
}
}
window.customElements.define('demo-collapsible', CollapsiblePanel);

15. Custom Element Example – Output
The demo can be found online in my github: http://github.com/gilf/

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

17. 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 to component infrastructure development

18. But there are problems with
custom components

19. Problems with Custom Elements
We are used to runtime framework/library goodies such as
• Virtual DOM
• Data binding
• Performance
• And etc.

20. Problems with Custom Elements – Cont.
Verbose syntax
• Too much boilerplate
• We need to craft everything

21. Problems with Custom Elements – Cont.
Still W3C working draft
Need Polyfills in some browsers

22. Is there a better way?

23. What if I told you that you
can solve the previous
problems in one place?

25. 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 heavily by Ionic Framework

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

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

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

30. Stencil Component Example
import {Component, Prop, State} from '@stencil/core';
@Component({
tag: 'collapsible-panel',
styleUrl: 'collapsible-panel.scss',
shadow: true
})
export class CollapsiblePanel {
@Prop() title: string;
@State() collapsed: boolean;
toggle() {
this.collapsed = !this.collapsed;
}
…

31. Stencil Component Example - Cont.
…
render() {
return (
<div>
<div id="header" onClick={this.toggle.bind(this)}>
<span>{this.title}</span>
</div>
<div id="content" hidden={this.collapsed}>
<slot />
</div>
</div>
);
}
}

32. Stencil Component Example – Output
The demo can be found online in my github: http://github.com/gilf/

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

35. Summary
Web Components standard is very powerful
• But still in development
Stencil compiler can ease the pain of creating custom components
• Includes many advantages such as JSX, TypeScript and more
• Generates standard-compliant web components

36. Resources
Stencil website: https://stenciljs.com/
Custom Elements: https://developer.mozilla.org/en-
US/docs/Web/Web_Components/Custom_Elements
•Taboola – http://www.taboola.com – we are hiring!
•My Website – http://www.gilfink.net
•Follow me on Twitter – @gilfink

37. #UseThePlatform

38. Thank You!
Ask me questions at Taboola booth ☺