What is Stencil JS?

Asked

Viewed 1,147 times

15

Nowadays, much is said about the web Components and custom Elements, and along with big names like Angular, React, Vue and Polymer, the name has recently begun to appear Stencil JS.

  • What is Stencil JS?
  • It is another framework to dispute the market of web components?
  • 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 the other tools do not satisfy?

2 answers

18


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.

  • 5

    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.

  • 3

    Hi @Andersoncarloswoss, I improved the explanation and added some more details as well.

  • ps: compiler is compilador, 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.

-4

Source: https://stenciljs.com/

What is Stencil JS? Stencil combines some of the best features of traditional structures, but provides custom elements compatible with 100% standards, part of the Web component specification.


It is another framework to dispute the market of web components?

YES

If not, what is the relationship between Stencil JS and other frameworks?

Is yes.

What are the differentials of this tool and what were the needs that stimulated its creation that the other tools do not satisfy?

Stencil was created by the Ionic Framework team to create faster and more powerful mobile and web apps. Stencil is the basis for the next generation of the Ionic Framework, but is completely independent of the Ionic framework or any other user interface.

  • 6

    On what basis do you claim that it is a framework?

  • 2

    Framework definition: "A framework in software development, is an abstraction that unites common codes between various software projects providing a generic functionality. A framework can achieve a specific functionality, by configuration, during the programming of an application"

  • 3

    I may be talking shit, but I don’t think he’s a Framework, If I’m not mistaken, it is the way to develop in IONIC and choose your Framework, be it Angular, Vue, React and etc. But as I said, I may be wrong, but I remember reading something like this. If I’m wrong, excuse my comment.

  • 3

    During the 2017 Polymer Summit, Max Lynch and Adam Bradley of Ionic (Framework) presented their new effort at Web Components, the compiler Stencil.js. Using Stencil, developers can develop structure components-Agnostic (Web). As such, we can expect the IONIC library to be available as Web Components, thus free of Angular dependencies. It is noteworthy that Stencil is not a structure, but a compiler that produces vanilla web components.

  • 10

    In almost all sources it is commented that Stencil is not a framework. On the official website, at no time is it said that it is also. Other than that, the official website itself brings that it is not a tool that came to match with current frameworks, so much so that one of its advantages is that Stencil can be used without any difficulty in conjunction with these frameworks. In my opinion, your answer is insufficient in view of the questions raised by the question.

  • 1

    More about framework: https://answall.com/q/17501/64969

  • 1

    From the description of @henriquecustodia, it recalls much more a part of toolchain than with framework, the main corroborating feature for this conclusion is that it is used at the complication level

  • 2

    Nothing against the answer, but it sounded like propaganda Stencil combines some of the best features of traditional structures, I think that who defines what is best is who uses, of course for them to mention on the site that they are the best is a way to promote, but for a Q&A of programmers this is not useful any technique and can not be affirmed.

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.