Wikipedia

Draft:StencilJS

  • Comment: This is more promotional, not less. I'm not going to review, but I'd advocate for this being rejected since the editor is not interested in improving it. Star Mississippi 13:56, 7 June 2024 (UTC)
  • Comment: Issues raised at the AfD have not been addressed. Please stop continually repasting this content. That is not a path to approval. Star Mississippi 11:26, 9 April 2024 (UTC)

{{Multiple issues|

StencilJS
Original author(s)Adam Bradley
Developer(s)Ionic (mobile app framework)
Initial releaseMay 20, 2017; 7 years ago (2017-05-20)
RepositoryStencilJS Repository
Written inTypeScript
PlatformJavaScript engine
Size16.5 KB[1]
TypeWeb framework
LicenseMIT License[2]
Websitestenciljs.com

StencilJS is an open-source web component compiler developed by the Ionic (mobile app framework) team.[3] 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.[4][5]

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

History

edit

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

Main Features

edit

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

edit

Web Components

edit

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

Framework Agnostic

edit

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

edit

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

edit

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

edit

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

edit

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

Basic usage

edit

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

edit

References

edit
  1. ^ "Stencil/core@3.2.2". BundlePhobia. May 8, 2023.
  2. ^ "Stencil Maintenance and Support Status".
  3. ^ "CSS-in-JS with StencilJs". 31 January 2020.
  4. ^ "Stencil.js: it's finally time for vanilla web components!". 19 July 2019.
  5. ^ "Publishing and Integrating a StencilJS Web Component in React". 3 October 2019.
  6. ^ "Web Components & Stencil.js - Build Custom HTML Elements".
  7. ^ Yasmin, Afroza (8 March 2020). "My First Experience with StencilJS". Medium.
  8. ^ "GitHub - StencilJS Repository/stenciljs: toolchain for building scalable, enterprise-ready component system". January 11, 2020 – via GitHub.
  9. ^ "Framework agnostic component libraries with StencilJs and Nx". 7 February 2022.
  10. ^ "Building Micro Frontends with Stencil Web Components". 9 February 2022.
  11. ^ "Stencil Readme". 23 May 2023.
  12. ^ Hawkins, Tyler (April 2021). "Web Component Solutions: A Comparison". Medium.
  13. ^ "Introduction to Stenciljs". 9 August 2018.
  14. ^ "Orgenic Github". GitHub.
  15. ^ "DOCS".
  16. ^ "Design Systems: Building a Cross-Functional UI Library with Stencil.js". 10 March 2021.
  17. ^ "Creating a Reusable Web Component with StencilJS". 3 October 2019.
  18. ^ "Building a PWA with Stencil: An Introduction to StencilJS". 3 September 2019.
  19. ^ "Build A Fast Offline-First PWA with StencilJs". 12 October 2017.
  20. ^ "github porsche". GitHub.
  21. ^ "Welcome to new digitl".
  22. ^ "FLUID CDN".
edit

Category:2017 software Category:Compilers Category:Web development Category:Software using the MIT license

 

This Web-software-related article is a stub. You can help Wikipedia by expanding it.

Retrieved from "https://en.wikipedia.org/w/index.php?title=Draft:StencilJS&oldid=1227730707"