Software:StencilJS

StencilJS

Original author(s)	Adam Bradley
Developer(s)	Ionic (mobile app framework)
Initial release	May 20, 2017 (2017-05-20)
Repository	StencilJS Repository
Written in	TypeScript
Platform	JavaScript engine
Size	16.5 KB
Type	Web framework
License	MIT License
Website	stenciljs.com

StencilJS is an open-source web component compiler developed by the Ionic (mobile app framework) team. It enables developers to build high-performance, reusable web components using modern web standards. StencilJS combines the best concepts from popular frameworks like Angular, React, and Vue.js, while also allowing components to be framework-agnostic and interoperable across different environments.

StencilJS helps developers and teams build and share custom components (Microfrontend), that are web framework agnostic. Its source code is licensed under MIT License and hosted on GitHub. StencilJS generates framework-specific wrappers that allow custom elements developed, to be used with any framework, whether its Angular, React, or Vue.js.

History

StencilJS was introduced by the Ionic team in 2017. The primary goal was to address the performance and reusability challenges faced while building Ionic Framework components. By leveraging modern web standards and focusing on compiler techniques, StencilJS aimed to create a robust foundation for developing reusable web components.

Main Features

StencilJS offers a variety of features designed to simplify the development of web components:

• TypeScript Support: StencilJS natively supports TypeScript, enabling developers to write type-safe code.
• JSX Syntax: Inspired by React, StencilJS uses JSX for defining component templates, making it easier to write and maintain component markup.
• Reactive Data Binding: StencilJS provides reactive data binding, allowing components to efficiently update and render based on state changes.
• Asynchronous Rendering: StencilJS optimizes rendering by using asynchronous techniques, which helps in improving the performance of applications.
• Shadow DOM: StencilJS components use Shadow DOM to encapsulate styles and DOM structure, ensuring that components are isolated and styles do not leak.
• Lazy Loading: StencilJS automatically generates lazy-loaded components, which improves the initial load time of applications by loading components only when they are needed.
• Cross-Framework Compatibility: StencilJS components are framework-agnostic and can be used with any modern front-end framework, such as Angular, React, or Vue, as well as with vanilla JavaScript.

Other features

Web Components

StencilJS is centered around the Web Components standard, which comprises Custom Elements, Shadow DOM and HTML Templates.

Framework Agnostic

StencilJS is framework agnostic, that means it can be used with any JavaScript framework or library, including Angular, React, Vue.js, or even vanilla JavaScript. This flexibility allows developers to leverage StencilJS in their existing projects without being tied to a specific framework.

Built-in Routing and State Management

An entire single-page application (SPA) can be built with StencilJS without relying on external libraries, as StencilJS provides built-in routing and state management capabilities.

Shadow DOM

Each StencilJS component has its own Shadow DOM, which encapsulates the component's HTML structure, styles, and behavior, isolating it from the surrounding document. It also avoids CSS conflicts and specificity issues.

Architecture

StencilJS operates as a build-time tool that compiles components into standard web components. The architecture includes several key parts:

• Compiler: The core of StencilJS, responsible for transforming TypeScript and JSX code into standard web components.
• Decorators: StencilJS uses decorators to define component properties, lifecycle methods, and other metadata, making it easy to configure component behavior.
• Rendering Engine: The rendering engine leverages JSX to create and update the DOM efficiently.
• Reactive System: StencilJS includes a reactive system that tracks state changes and re-renders components as necessary.

Design Systems

The main goal of enterprise teams to use StencilJS is, to build design systems and component libraries, that are web framework agnostic. StencilJS can be used to build Progressive web app (PWA). Several companies like Upwork, Volkswagen, Porsche, MasterCard, Amazon, Adidas, Panera etc. have built their design systems based on Stencil-based Web Components. Liberty Mutual Ins. Group's Design System FLUID (Frontend Library for User Interface Development) is built using StencilJS. The music streaming platform Amazon Music is built using StencilJS.

Basic usage

A StencilJS component looks similar to a class-based React component, with the addition of TypeScript decorators.

import { Component, h, Prop, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true // Enable Shadow DOM
})
export class MyComponent {
  @Prop() name: string;
  @State() count: number = 0;

  increment() {
    this.count++;
  }
  render() {
    return (
      <div>
        <p>Hello, {this.name}!</p>
       <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

In this example, the @Component decorator defines a new web component named my-component. The @Prop decorator defines a property that can be passed to the component, and the render method returns the component's HTML structure using JSX.

See also

• Svelte
• LitElement

External links

• Introduction to stenciljs
• Stencil App Starter
• StencilJS on Twitter

Category:Compilers Category:Web development