A presentation at La Chandeleur des Speakers 2021 by Horacio Gonzalez
One hour to learn Stencil 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 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
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 Element
<body> … <script> window.customElements.define(‘my-element’, class extends HTMLElement {…}); </script> <my-element></my-element> </body>Shadow DOM <button>Hello, world!</button> <script> var host = document.querySelector(‘button’); const shadowRoot = host.attachShadow({mode:’open’}); shadowRoot.textContent = ‘こんにちは、影の世界!’; </script>
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… ● ● ● ●
Stencil Powering Ionic 4+
Not another library A Web Component toolchain
A mature technology Powering Ionic Framework
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 times 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 Choose the type of project to start ❯
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! 🎈
Starting the development server
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!
Qu’est-ce que c’est Stencil? Encore une autre bibliothèque de Web Components? Mais pourquoi les Web Components, ou Composants Web? Pourquoi ai-je besoin d’une autre chose que React / Vue / Angular / NewShinyFramework? Et même si j’avais besoin de ces Composants Web, pourquoi Stencil? 😠 Chaque fois que je présente quelqu’un à Stencil, je reçois la même réaction initiale.
Ensuite, je commence à raconter l’histoire de Stencil et Ionic, et pourquoi les Composants Web ont du sens dans ce cas, comme dans beaucoup d’autres. Je parle de Stencil, de son API, ses possibilités… Habituellement, cela suffit pour intéresser les gens, car la plupart des développeurs ont subi le genre de problèmes qui ont poussé l’équipe Ionic à créer Stencil. Mais je reste frustré car pour moi la meilleure partie c’est quand les gens testent Stencil, c’est là qu’il y a l’effet woah !.
C’est pour ça qu’on organise cet atélier: un quart d’heure d’introduction à Stencil, une heure pour coder sa première application!
Le format ? Un animateur, Horacio, trois participants en live sur le streaming (Gaëlle, Philippe et Pierre), et tous ceux qui veulent nous suivre et faire l’atelier avec nous, en participant aussi via le live chat.
Sans rien à installer sur sa machine, un simple navigateur web (récent) fera l’affaire.
