A presentation at Codemotion Dev Lunch Box by Horacio Gonzalez
@LostInBrittany
Stencil 101 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 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 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 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!
What’s Stencil? Yet another Web Components library? But why Web Components? Why do I need another thing that React/Vue/Angular/NewShinyFramework? And even if I needed Web Components, why Stencil? 😠
Every time I introduce somebody to Stencil I get the same initial reaction.
Then I begin to tell the story of Stencil, and Ionic, and why Web Components make sense in this case, as in many others. Usually, it’s enough to get people interested because most developers have endured the kind of problems that made the Ionic team create Stencil.
I continue by explaining how Stencil is different from other Web Components libraries, how it’s a compiler to generate Web Components (more specifically, Custom Elements), how does it includes wonderful features like Virtual DOM, Async rendering, Reactive data-binding or JSX, and bakes them in fully standard Custom Elements that you can use in your React/Vue/Angular/NewShinyFramework apps but also on plain old HTML pages. And, of course, how the developer experience is one of the smoothest I have found these last years.
By then most people are really excited about Stencil. To be fair, it isn’t my speaker qualities that get them so pumped up (I would love to have such power!) but the quality of the product, as Stencil is one of the best-known secrets of today web development.
So if you want to discover it, come to the talk 😉. I sincerely think in the end you will also say I ❤️ Stencil.
The following resources were mentioned during the presentation or are useful additional information.
