Ionic & Stencil Confusion with PWA

Hello all,

I have been reading a lot for quite a long time regarding PWAs from different resources (Google, Ionic, Open Source Contributor, Whitepapers from Gartner, and others…)

But I am confused about the role of stencil in the PWA, as it’s mentioned that stencil mainly is a design system used for building web components that will work in an efficient manner for all platform types while handling the lazy loading setup, code splitting, and optimize the bundle size of the final product

While on the other hand, the Ionic framework is the actual UI system holds all the components built as web components from stencil compiler and with addition for integrations with popular frameworks like (Angulat, React, and Vue).
However, there is a way to build the ionic app as PWA from the docs, but there is a way also to build pwa from stencil using either (App selection type, or ionic-pwa) when we run

npx create-stencil ionic-pwa 

So what are the difference between those too, and keep in mind that as per Ionic team announcements the Stencil project is intended only for designing and building web components and the rest of the actual work is done on the ionic side.

Another sentence from ionic team is

The Ionic PWA Toolkit also provides our recommended setup for building production ready
PWAs with Ionic, including the open source Stencil (an open source project from the Ionic
team) for your app logic and the open source Ionic Framework for your user interface.

So how come Stencil is used for handling the app logic while stencil should not be used like this?

Please correct my understanding.

And many thanks for you all…

Hi,

I did not have the same understanding as you. In the Introduction/why stencil it seems to me that stencil may be used for development. Indeed, I am almost finished creating an app that is stencil, however, because ionic components are actually stencil components, I simply use the standard ionic components (eg ion-input, ion-button etc…) and where I need something different I create my own component (eg header, footers, help etc). If you look at Josh Morony’s web site you will see tutorials based on stencil.

It turns out that I much prefer stencil to IONIC. I seem to be able to grasp things much better. The other thing is that with stencil, the app runs as a pwa and with capacitor the same code runs quite happily as an android app.

I hope that helps,
Hilton.

1 Like

Hello Hilton,

Thanks for your feedback, after a while of writing this post I’ve started to understand the whole picture, and yes indeed stencil is a design system and a development platform for PWA and Hybrid Apps as well.

I think moreover ionic CLI will change too to support only the web components related things and integration with other platforms as well.