Stencil 101: Introduction to a Web Components library like no other

Stencil 101 Introduction to a web components library like no other Horacio Gonzalez @LostInBrittany

Who are we? Introducing myself and introducing OVH OVHcloud

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter

OVHcloud: A Global Leader 200k Private cloud VMs running 1 Dedicated IaaS Europe 30 Datacenters Own 20Tbps Hosting capacity : 1.3M Physical Servers 360k Servers already deployed Netwok with 35 PoPs

1.3M Customers in 138 Countries

OVHcloud: Our solutions Cloud Web Hosting Mobile Hosting Telecom VPS Containers ▪ Dedicated Server Domain names VoIP Public Cloud Compute ▪ Data Storage Email SMS/Fax Private Cloud ▪ Network and Database CDN Virtual desktop Serveur dédié Security Object Storage Web hosting Cloud Storage Over the Box ▪ Licences Cloud Desktop Securities MS Oﬃce Hybrid Cloud Messaging MS solutions

The 3 minutes context What the heck are web component?

Web Components Web standard W3C

Web Components Available in all modern browsers: Firefox, Safari, Chrome

Web Components Create your own HTML tags Encapsulating look and behavior

Web Components Fully interoperable With other web components, with any framework

Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES

Custom Element To define your own HTML tag <body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body>

Shadow DOM To encapsulate subtree and style in an element <button>Hello, world!</button> <script> var host = document.querySelector(‘button’); const shadowRoot = host.attachShadow({mode:’open’}); shadowRoot.textContent = ‘こんにちは、影の世界!’; </script>

Template To have clonable document template <template id=”mytemplate”> <img src=”” alt=”great image”> <div class=”comment”></div> </template> var t = document.querySelector(‘#mytemplate’); // Populate the src at runtime. t.content.querySelector(‘img’).src = ‘logo.png’; var clone = document.importNode(t.content, true); document.body.appendChild(clone);

But in fact, it’s just an element… ● ● ● ● Attributes Properties Methods Events

Aren’t the multiple Web Components libs a sign of failure? If the standard worked, people would use Vanilla, wouldn’t them?

Web component standard is low level At it should be!

Standard == basic bricks Standard exposes an API to: ○ Define elements ○ Encapsulate DOM

Libraries are helpers They give you higher-level primitives

Different high-level primitives Each one tailored to a use

Sharing the same base High-performant, low-level, in-the-platform web components standard

Libraries aren’t a failure of standard They happen by design

Stencil Powering Ionic 4+

Not another library A Web Component toolchain

A mature technology Ionic 4 released on year ago, powered by Stencil!

A build time tool To generate standard web components

Fully featured ● Web Component-based ● Component pre-rendering ● Asynchronous rendering pipeline ● Simple component lazy-loading ● TypeScript support ● JSX support ● Reactive Data Binding ● Dependency-free components

And the cherry on the cake Server-Side Rendering

Stencil leverages the web platform Working with the web, not against it

The Stencil story A company tired of putting good code in the bin

Once upon a time there was a fight Between native apps and web app on mobile

A quest to the perfect solution Hybrid apps, leveraging on web technologies

A company wanted to do it well The perfect technology for mobile web and hybrid apps

The time is 2013 So what technology would you use?

Really soon after launch… Hey folks, we are killing AngularJS!

What did Ionic people do? Let’s put everything in the trash bin and begin anew

But timed have changed… In 2013 Angular JS was the prom queen

Times have changed… In 2017 Angular is only one more in the clique

Angular limits adoption of Ionic Devs and companies are very vocal about JS Frameworks

What did Ionic people do? Let’s put everything in the trash bin and begin anew… But on which framework?

What about web components? A nice solution for Ionic problems: Any framework, even no framework at all!

But what Web Component library? SkateJS There were so many of them!

Let’s do something different A fully featured web component toolchain With all the bells and whistles!

Ionic rewrote all their code again Ionic 4 is fully based on Ionic

Now Ionic works on any framework Or without framework at all

And we have Stencil To use it in any of our projects

Hey dude, enough stories! We are here to see some code!

Hands on Stencil Simply use npm init npm init stencil Choose the type of project to start ? Pick a starter › - Use arrow-keys. Return to submit. ❯ ionic-pwa Everything you need to build fast, production ready PWAs app Minimal starter for building a Stencil app or website component Collection of web components that can be used anywhere Updating Stencil

Hands on Stencil And the project is initialized in some seconds! ✔ Pick a starter › component ✔ Project name › sthlm-j ✔ All setup in 17 ms $ npm start Starts the development server. $ npm run build Builds your components/app in production mode. $ npm test Starts the test runner. We suggest that you begin by typing: $ cd sthlm-js $ npm start Happy coding! 🎈

Starting the development server npm start

Let’s look at the code

Some concepts import { Component, Prop, h } from ‘@stencil/core’; import { format } from ‘../../utils/utils’; @Component({ tag: ‘my-component’, styleUrl: ‘my-component.css’, shadow: true }) export class MyComponent { @Prop() first: string; Decorators

Some concepts @Prop() first: string; @Prop() middle: string; @Prop() last: string; @State() nickname: string; Properties and States

Some concepts render() { return <div>Hello, World! I’m {this.getText()}</div>; } Asynchronous rendering using JSX

Some concepts @Prop() value: number; @Watch(value) valueChanged(newValue: boolean, oldValue: boolean) { console.log(The new value is ${newValue}, it was ${oldValue} before); } Watch

Some concepts @Event() actionCompleted: EventEmitter; someAction(message: String) { this.actionCompleted.emit(message); } Emitting events @Listen(‘actionCompleted’) actionCompletedHandler(event: CustomEvent) { console.log(‘Received the custom actionCompleted event: ‘, event.detail); } Listening to events

Some concepts @Method() async sayHello() { this.hello = true; } render() { return ( <Host> <h2>{ this.hello ? Hello sthlm.js : ”}</h2> </Host> ); } Asynchronous public methods

Some concepts @Component({ tag: ‘my-component’, styleUrl: ‘my-component.css’, shadow: true }) export class MyComponent { Optional Shadow DOM

Stencil for design systems Because web components really shine for that

What the heck is a design system?

Why Stencil is so good for design systems? Web Components work everywhere!

One more thing…* Let’s copy from the master

Stencil is not so important WebComponents ARE

Use the Platform, Luke… WebComponents ARE native

Do you love your framework? Oh yeah, we all do

Would you marry your framework? Like until death…

How much does cost the divorce? Do you remember when you dropped AngularJS for Angular?

Why recode everything again? Reuse the bricks in your new framework

Lots of web components libraries LitElement SkateJS For different need and sensibilities

And some good news Angular Elements Vue Web Component Wrapper Frameworks begin to understand it

So for your next app Choose a framework, no problem… But please, help your future self Use Web Components!

Conclusion That’s all, folks!

Stencil 101 Introduction to a web components library like no other Horacio Gonzalez @LostInBrittany