ReactFoo Pune

On lessons learned during implementation.

Vijay Dharap


Maximize value of your Components by "Stencil"ing them!

Submitted Nov 7, 2017

We live in a JS world where Angular, React and Vue camps ferociously pitch their framework’s superiority.. But at the core, they all are component based frameworks. Currently - components written for one cannot be used within other framework and hence effort spent on creating the component for one framework will need to be repeated for other frameworks again.

Web-components is the solution for this problem but the in it’s default state web components are too verbose.

StencilJS uses typescript and also uses familiar constructs from React, Angular and Vue world like props(), Component decorators etc and makes its far easy to write cross-framework components.

Thus, you maximize the value of your components by making them compatible in all the popular MVC frameworks!


Typical flow would be to

  • Quickly show (via screenshots) a same component written in Angular, react and vue and highlight the fact that developer spent thrice the effort for same functionality under 3 frameworks.
  • Introduce stencil and talk about its features and component lifecycle
  • Talk about how the syntax and component lifecycle names are closer to React, angular etc to give comfort to listeners that Adapting StencilJS is quite easy.
  • Develop / Do a code walkthrough of same component in stencil
  • Show how it can be now imported in all 3 types of project, Angular, Vue and React.
  • Component should cover @prop, @state, slots, user-interaction events, etc

At the end of the talk - audience should be convinced about value StencilJS brings to the table and why that is a future of writing common components for React, Angular and vue.

Currently, there are large number of component libraries specific to React, Angular and VueJS. If everyone who is writing reusable components adapts StencilJS, it would become far easy to collaborate and more number of components will be accessible across these frameworks.

Speaker bio

Vijay is a Principal Architect at Infosys. He is Open Source Evangelist and Developer Advocate within and outside of Infosys. Vijay organizes yearly technology conference within Infosys. Vijay had privilege to speak at JSFoo 2017 as well as Great Indian Developer Summit (GIDS 2017)

While a Java veteran for many years, in last 4 years, Vijay has focussed completely on UI and UX and has spearheaded Front-end development of many large enterprise projects. He has always tried incorporate all the best practices in JS and CSS world in his projects. He loves everything about UX and has been very particular about providing the Best User Experience to the end users.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more