A presentation at LostInBrittany Discord Tutorials by Horacio Gonzalez
One hour to learn Stencil Horacio Gonzalez - @LostInBrittany
Who am I? Introducing myself
Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter
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
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 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 › 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 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 is Stencil? Yet another Web Components library? But why Web Components, or Web Components? Why do I need anything other than React/Vue/Angular/NewShinyFramework? And even if I needed these Web Components, why Stencil? 😠 Every time I introduce someone to Stencil, I get the same initial reaction.
Then I start telling the story of Stencil and Ionic, and why Web Components makes sense in this case, as in many others. I’m talking about Stencil, its API, its possibilities… Usually, that’s enough to get people interested, because most developers have suffered the kind of problems that caused the Ionic team to create Stencil. But I remain frustrated because for me the best part is when people test Stencil, that’s where the woah effect is.
That’s why we’re organizing this workshop: a quarter of an hour introduction to Stencil, an hour to code your first application!
Without anything to install on your machine, a simple (recent) web browser will do the trick.
