Workshop StencilJS

Author

Rubén Aguilera (@raguilera82)

Tech Coach & Architect

              

What will we see?

DevUI: designers vs developers

Web Components: new standard

HTML, CSS and JS in one library

The importance of Accessibility

How can we create our first web component? Let's play!

DevUI

DevUI: designers vs developers

Web Components: the new standard

Modularization & Reuse

Facilitates the accesibility, usability and colorful

Integration with other web technologies like Angular, Vue, React

But is very tedious with VanillaJS

StencilJS

It is not a new framework or web library, it is a compiler

With very easy API, inspired in React Fiber and Angular

Allows to contain HTML, CSS and JS embedded in one npm library

Facilitates library distribution thru NPM registry and documentation

Encapsulation of other libraries like D3, ThreeJS, Charts, Maps, in  our components

Stencil API: @Component

declares a new web component

encapsulation: with shadow dom or scope or nothing

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true
})
<my-component></my-component>

Stencil API: @Prop

declares an exposed HTML property/attribute

allows to set entry values, similar to @Input in Angular

export class MyComponent {
  @Prop() hello: string;
}
<my-component hello="Hi!"></my-component>

Stencil API: @Event

declares a DOM event the component might emit

allow to communicate internal information to the outside

@Event() sended: EventEmitter

{this.sended.emit(this.hello)}

<my-component onSended="this.func"></my-component>

Stencil API: @State

declares an internal state of the component

when value changes, repaint the web component

the changes must be inmutable

@State() message: string;

Stencil API: @Listen

listen for DOM events

allow to subscribe to window and other web components events

@Listen('sended')
listenSended(ev: CustomEvent) {
  this.hello = ev.detail;
}

<button onClick={this.clickChange}></button>

Stencil API: @Watch

declares a hook that runs when a property or state changes

allow to subscribe to the property changes

@Watch('hello')
updateHello(newValue: string, oldValue: string) {
}

Stencil API: @Element

declares a reference to the host element

use element to find other elements into the web component

@Element() element: HTMLStencilElement;

{this.element.[shadowRoot].querySelector('css-query')}

Stencil API: @Method

declares an exposed public method

allow to other web components call the public methods to execute something into the web component

@Method()
async someMethod() {}

{await this.element.querySelector('my-component').someMethod()}

Stencil API: Lifecycle Methods

componentWillLoad(): execute once before complete loading

componentDidLoad(): execute once after complete loading

render(): execute to paint the web component HTML structure. This method executes all the times that @State properties change.

Some Pitfalls

Never use a reserved key as identificator of properties or methods
(id, value, focus(), ...)

Use shadowRoot when you use shadow enabled in your component to find elements with query selector

Be careful with your functions when you invoking inside "this" operator. Use arrow functions to solve it

Some Good Practises

Keep the component dumb, only @Prop and @Output

Changes internal state with @State, not using @Prop

Using <slot> for more reuse and creating layouts

Browser Support

But remember...

                                  
After 15 January our life getting better

Hands On!

StencilJS: Pre-Requisites

1. NPM install and configure properly

2. Visual Studio Code (or other IDE or text editor, but this is the best one)

3. Web Browser (Chrome, Firefox, Safari, not IE 11 please) o/\o

Getting started with StencilJS

> npm init stencil

> Select a starter: ionic-pwa or app or component

> Set a project name

> Enter project folder and execute: npm install && npm run start

> That's All!

Storybook: Design Systems

Storybook is a user interface development environment and playground for UI components .

This tool enables developers to create components independently and showcase components interactively in an isolated development environment

https://storybook.js.org

Very useful addons

Notes & Docs: keep the documentation asociated with the component in the UI

Knobs: allow change HTML properties of our web components

Accesibility: show the accesibility rules violations

More official & Community addons: viewport, actions, console, ...


StencilJS & Storybook 

> git clone https://github.com/raguilera82/workshop-stenciljs && npm install

> npm run start - to compile the project and deploy the storybook on the web browser with livereload

> npm run generate - to generate a new stenciljs component

> npm run test - to execute all tests with Jest