Stenciljs is a compiler for web Components, that is, you will write your component using jsx and then Stencil in the process of build, will generate a web Component native with some more features like data Binding, async redering, virtual DOM that will enrich the operation of the.
Create components using purely the web Components is very verbose and usually difficult (for more complex components). Thus 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 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 functionalities of web Components, bringing more ease to the developer. Some decorators useful for developing a component:
@Prop
controls the assignment of values to component properties.
@PropWillChange
and @PropDidChange
notes the changes in state of component properties.
@Event
issue custom Events
@Listen
listen to native DOM events and custom Events also.
All components built with Stencil are loaded Lazy, that is, the components can be separated into Bundles different (which will be generated in the build). So if we have the component to in a Bundle and the component b in another Bundle, when adding the component to on your page will be loaded only the Bundle of the component to and not the Bundle of the component b also. This greatly decreases the loading time needed to use the desired components.
Stenciljs is not a framework, but rather a compiler for web Components as said before.
Stenciljs also adds polyfills of web Components necessary for its components to function properly. Note that the polyfills will be added as needed, as per the support of each browser to web Components.
See the official documentation that can be accessed on official website.
See also the Github of the project.
Some information you’d find interesting is what that would be polyfills added and how this "is managed internally as needed" about these polyfills. It also mentions that Stencil generates a web Component with additional features; it would be interesting to list what those features would be. Anything, I invite you to join chat Stack Burst, where we can talk better.
– Woss
Hi @Andersoncarloswoss, I improved the explanation and added some more details as well.
– henriquecustodia
ps:
compiler
iscompilador
, the English term in the sense of such a technology has the same meaning. If you disagree use the button/link "Revert" that is on the edit screen.– Guilherme Nascimento