Nowadays, a lot is talked about web components and custom elements , and along with big names like Angular, React, Vue and Polymer, name Stencil JS .
StencilJS is a compiler for web components , meaning you will write your component using jsx and then the Stencil in the build process will generate a native web component with some more features like date binding , async redering, virtual DOM that will enrich the component's operation.
Creating components using purely the web components API is very verbose and generally difficult (for more complex components). In this way StencilJS comes with the proposal to facilitate the development of web components , bringing technologies already common in the world frontend as tsx for creating components to facilitate development.
The Ionic team created StencilJS to use in the new version of Ionic that is being developed using web components built with StencilJS. This way you can use StencilJS to create mobile applications using Ionic as well as any other web framework like Angular, React, Vue, etc.
StencilJS uses decorators to abstract the native features of web components , making it easier for the developer. Some decorators useful to develop a component:
@Prop controls the assignment of values to the properties of the component. @PropWillChange and @PropDidChange observes state changes in component properties. @Event emits custom events
@Listen listen for native DOM events and custom events also. All components built with Stencil are loaded lazy , that is, the components can be separated into different bundles build ). So if we have the a component in one bundle and the b component in another bundle a on your page will only load the bundle from the component and not the bundle / strong> as well. This greatly reduces the load time required to use the desired components.
StencilJS is not a framework , but rather a compiler for web components
StencilJS also adds polyfills of web components required for its components to function properly. Note that polyfills will be added as needed as per the support of each web browser .
See official documentation that can be accessed at official website .
See also the GitHub project .
Source: link
What is Stencil JS? Stencil combines some of the best features of traditional frameworks, but provides custom elements that support 100% standards, part of the Web component specification.
Is it another framework to compete in the web component market?
If not, what is the relationship between Stencil JS and other frameworks?
What are the differentials of this tool and what were the needs that stimulated its creation that other tools do not satisfy?
Stencil was created by the Ionic Framework team to create faster and more powerful mobile and web applications. Stencil is the foundation for the next generation of the Ionic Framework, but it is completely independent of the Ionic framework or any other user interface.