Stencil - A quick introduction

A presentation at Codemotion Dev Lunch Box in June 2020 in by Horacio Gonzalez

Slide 1

@LostInBrittany

Slide 2

Stencil 101 Horacio Gonzalez @LostInBrittany

Slide 3

Who are we? Introducing myself and introducing OVH OVHcloud

Slide 4

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

Slide 5

OVHcloud: A Global Leader 30 Data Centers in 12 locations 1 Million+ Servers produced since 1999 1.5 Million Customers across 132 countries Public Cloud 34 Points of Presence on a 20 TBPS Bandwidth Network 2200 Employees worldwide 3.8 Million Websites hosting Storage 115K Private Cloud VMS running 1.5 Billion Euros Invested since 2016 Network & Security 300K Public Cloud instances running P.U.E. 1.09 Energy efficiency indicator 380K Physical Servers running in our data centers 20 Years in Business Disrupting since 1999 Web Cloud & Telcom Private Cloud

Slide 6

The 3 minutes context What the heck are web component?

Slide 7

Web Components Web standard W3C

Slide 8

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

Slide 9

Web Components Create your own HTML tags Encapsulating look and behavior

Slide 10

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

Slide 11

Web Components

Slide 12

Custom Element

<body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body>

Slide 13

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

Slide 14

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);

Slide 15

But in fact, it’s just an element… ● ● ● ●

Slide 16

Stencil Powering Ionic 4+

Slide 17

Not another library A Web Component toolchain

Slide 18

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

Slide 19

A build time tool To generate standard web components

Slide 20

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

Slide 21

And the cherry on the cake Server-Side Rendering

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

The time is 2013 So what technology would you use?

Slide 28

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

Slide 29

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

Slide 30

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

Slide 31

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

Slide 32

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

Slide 33

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

Slide 34

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

Slide 35

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

Slide 36

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

Slide 37

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

Slide 38

Now Ionic works on any framework Or without framework at all

Slide 39

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

Slide 40

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

Slide 41

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

Slide 42

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! 🎈

Slide 43

Starting the development server npm start

Slide 44

Let’s look at the code

Slide 45

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

Slide 46

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

Slide 47

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

Slide 48

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

Slide 49

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

Slide 50

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