One hour to learn Stencil

A presentation at LostInBrittany Discord Tutorials in May 2022 in by Horacio Gonzalez

Slide 1

Slide 1

One hour to learn Stencil Horacio Gonzalez - @LostInBrittany

Slide 2

Slide 2

Who am I? Introducing myself

Slide 3

Slide 3

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

Slide 4

Slide 4

The 3 minutes context What the heck are web component?

Slide 5

Slide 5

Web Components Web standard W3C

Slide 6

Slide 6

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

Slide 7

Slide 7

Web Components Create your own HTML tags Encapsulating look and behavior

Slide 8

Slide 8

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

Slide 9

Slide 9

Web Components CUSTOM ELEMENTS SHADOW DOM TEMPLATES

Slide 10

Slide 10

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

Slide 11

Slide 11

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>

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

Stencil Powering Ionic 4+

Slide 15

Slide 15

Not another library A Web Component toolchain

Slide 16

Slide 16

A mature technology Powering Ionic Framework

Slide 17

Slide 17

A build time tool To generate standard web components

Slide 18

Slide 18

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 19

Slide 19

And the cherry on the cake Server-Side Rendering

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

The time is 2013 So what technology would you use?

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

Now Ionic works on any framework Or without framework at all

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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 40

Slide 40

Hands on Stencil And the project is initialized in some seconds! ✔ Pick a starter › component ✔ Project name › codemotion-online ✔ 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 codemotion-online npm install npm start Happy coding! 🎈

Slide 41

Slide 41

Starting the development server npm start

Slide 42

Slide 42

Let’s look at the code

Slide 43

Slide 43

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 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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 47

Slide 47

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 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

Stencil for design systems Because web components really shine for that

Slide 51

Slide 51

What the heck is a design system?

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

Stencil is not so important WebComponents ARE

Slide 55

Slide 55

Use the Platform, Luke… WebComponents ARE native

Slide 56

Slide 56

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

Slide 57

Slide 57

Would you marry your framework? Like until death…

Slide 58

Slide 58

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

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

Conclusion That’s all, folks!