Draft:StencilJS
Submission declined on 16 June 2024 by Encoded (talk). This submission is not adequately supported by reliable sources. Reliable sources are required so that information can be verified. If you need help with referencing, please see Referencing for beginners and Citing sources.
Where to get help
How to improve a draft
You can also browse Wikipedia:Featured articles and Wikipedia:Good articles to find examples of Wikipedia's best writing on topics similar to your proposed article. Improving your odds of a speedy review To improve your odds of a faster review, tag your draft with relevant WikiProject tags using the button below. This will let reviewers know a new draft has been submitted in their area of interest. For instance, if you wrote about a female astronomer, you would want to add the Biography, Astronomy, and Women scientists tags. Editor resources
| ![]() |
Submission declined on 9 April 2024 by Star Mississippi (talk). This submission appears to read more like an advertisement than an entry in an encyclopedia. Encyclopedia articles need to be written from a neutral point of view, and should refer to a range of independent, reliable, published sources, not just to materials produced by the creator of the subject being discussed. This is important so that the article can meet Wikipedia's verifiability policy and the notability of the subject can be established. If you still feel that this subject is worthy of inclusion in Wikipedia, please rewrite your submission to comply with these policies. This draft's references do not show that the subject qualifies for a Wikipedia article. In summary, the draft needs multiple published sources that are: Declined by Star Mississippi 4 months ago.
| ![]() |
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|
![]() | This article is written like a personal reflection, personal essay, or argumentative essay that states a Wikipedia editor's personal feelings or presents an original argument about a topic. (May 2023) |
![]() | This article contains content that is written like an advertisement. (May 2023) |
![]() | This article may require copy editing for grammar, style, cohesion, tone, or spelling. (May 2023) |
![]() | The topic of this draft may not meet Wikipedia's general notability guideline. (May 2023) |
![]() | A major contributor to this article appears to have a close connection with its subject. (May 2023) |
Original author(s) | Adam Bradley |
---|---|
Developer(s) | Ionic (mobile app framework) |
Initial release | May 20, 2017 |
Repository | StencilJS Repository |
Written in | TypeScript |
Platform | JavaScript engine |
Size | 16.5 KB[1] |
Type | Web framework |
License | MIT License[2] |
Website | stenciljs |
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]- ^ "Stencil/core@3.2.2". BundlePhobia. May 8, 2023.
- ^ "Stencil Maintenance and Support Status".
- ^ "CSS-in-JS with StencilJs". 31 January 2020.
- ^ "Stencil.js: it's finally time for vanilla web components!". 19 July 2019.
- ^ "Publishing and Integrating a StencilJS Web Component in React". 3 October 2019.
- ^ "Web Components & Stencil.js - Build Custom HTML Elements".
- ^ Yasmin, Afroza (8 March 2020). "My First Experience with StencilJS". Medium.
- ^ "GitHub - StencilJS Repository/stenciljs: toolchain for building scalable, enterprise-ready component system". January 11, 2020 – via GitHub.
- ^ "Framework agnostic component libraries with StencilJs and Nx". 7 February 2022.
- ^ "Building Micro Frontends with Stencil Web Components". 9 February 2022.
- ^ "Stencil Readme". 23 May 2023.
- ^ Hawkins, Tyler (April 2021). "Web Component Solutions: A Comparison". Medium.
- ^ "Introduction to Stenciljs". 9 August 2018.
- ^ "Orgenic Github". GitHub.
- ^ "DOCS".
- ^ "Design Systems: Building a Cross-Functional UI Library with Stencil.js". 10 March 2021.
- ^ "Creating a Reusable Web Component with StencilJS". 3 October 2019.
- ^ "Building a PWA with Stencil: An Introduction to StencilJS". 3 September 2019.
- ^ "Build A Fast Offline-First PWA with StencilJs". 12 October 2017.
- ^ "github porsche". GitHub.
- ^ "Welcome to new digitl".
- ^ "FLUID CDN".
External links
[edit]Category:2017 software Category:Compilers Category:Web development Category:Software using the MIT license