Is Ionic the best Choice for a PWA from Scratch?

I just saw for the first time that there is a (relatively) new option for building with ionic: StencilJS.

I find this fairly confusing. When I check how to build a PWA with ionic, a main result is the ‘Ionic PWA Toolkit’. To my surprise, this seems to be a different code structure and syntax than the traditional ionic Angular app.

With some further digging, I found this explanation, which says basically that the ionic toolkit uses StencilJS, and not Angular. It says that if you are building a PWA (or any kind of app, including mobile) you can choose whether to do it with ionic+StencilJS or ionic+Angular.

I get the author’s conclusion to be that ionic+StencilJS will probably give you a faster performing app, but it will require you to learn StencilJS–which is not too complex but still requires you to use a different structure than if you are used to Angular.

It would be helpful if ionic itself laid this out a bit more clearly. Most tutorials just dive in using one or the other without explanation.

In my case, my inclination would be to stick with ionic+Angular, because Angular is more established and has a bigger community (I have found this to be very important), and it is in line with what I have built before.

But if anyone thinks there truly is a big performance boost from ionic+StencilJS, please comment.

Angular is a framework so u get lots of js in your bundle after compiling etc. But is a very helpful structure and great toolset to work with

Stenciljs a compiler

So that is not a fully equal comparison

I am fairly sure stenciljs will give u smaller bundles and faster apps and just as easy developer experience (and sufficient docs) as angular if your app is going to be fairly straightforward. And possibly easier to embed stuff which angular does not like

Josh Morony has top notch tutorials

Thanks for your fast reply, I really appreciate it.

I will take a look at some of the tutorials. My biggest concern with using StencilJS is that it is new. Most questions you might have with Angular someone else has already written about, so it is easy to find answers. That would not be the case with a newer tool like StencilJS.

Even the docs seems confusing. If you look at the ionic documentation here, it has a section for Angular. But no mention of StencilJS. If you are using StencilJS, do you use the pure javascript documentation, or is there basically no documentation?

I know a big conpany that rewrote their ui library to webcomponents in stenciljs and I think there should be no fears about its stability

Docs can indeed but different but for some very special things you need to use JS based sdk anyways. Not all nice libraries have an angular wrapper (but some important ones do)

Again, the more specific u can be about your case (what libs etc u need, number of users, how much you want to learn), the better recommendations you can get from many people

I’m looking for a flexible approach, because I expect to be adding a variety of features to my app over time.

Josh Morony interviewed Justin Willis who said:

***3. Will Ionic developers need to learn how to use Stencil?

Nope. If you currently have an ionic-angular app, when you update to v4 it will be using the Ionic components that we have ported to web components using Stencil, but you will use them just the same as you always have. You don’t need to know anything about Stencil or web components.

So best I can tell:

  1. When you use ionic with Angular, they have added in StencilJS in the background, so performance is improved.
  2. But you can also use StencilJS directly, without any framework. In this case, do we treat the app like a vanilla JS app? What ionic documents do you use to guide you?
  1. Incorrect. Ionic v4 is made in stenciljs but when u use it in your described cases it is no longer stenciljs code but js code using the webcomponents api, which u must include one way or another (angular bundle, cdn etc). Although I believe the ionic-angular bundle does add a bit of angular specific stuff related to routing etc (to smoothen animations and so)
  2. I dont build in stenciljs but would use josh’s docs, ionic website and google. I dont known how the bundling works into a www folder with web assets. That would tell me if and where to add js stuff. But generally I think I would code as much as possible in the tsx files. Even the plain vanilla js stuff (and use script tag in html to load library bundles). This to preserve typescript for type checking

In the end, the most goodies are present in ionic-angular, but without there is more control over things which may not be relevant for u

Sounds good. Thanks.

And just to wrap up some of this–I think the Angular v StencilJS issue is important, but I am familiar with Angular’s performance generally and it seems ok to me.

We’ve gone into a lot of depth on very helpful stuff, but I am still hopeful to resolve the central question in a yes or no way:

Putting aside bundle sizes, the issue I am most interested in as being new to ionic is:

For mobile applications, ionic’s webview adds a layer that native applications do not have, and it therefore raises challenges for performance relative to native apps.

Does this webview layer still add performance challenges in a PWA? If so, I would likely try to build the PWA with Angular2+ (without ionic). If ionic itself does not add much a performance hit, then it sounds like a great choice.

I would stop worrying about performance here, especially before a single line of code is written, because you’ve already answered your own question:

What you’re calling “Ionic’s webview” is the same browser that any PWA runs in. A browser is a general-purpose JavaScript emulator and application UI environment. Special-purpose tools can sometimes do specific things more efficiently than general-purpose tools, but you’ve already committed to having your app live in a browser the minute you decided to write a PWA. So any remaining concerns about performance are going to be minimal and at the margins, and I hope I can assuage them with some further definitional clarification.

In an ordinary Ionic Angular application,

  • the browser provides the runtime environment
  • Angular provides the dispatch and object wrangling framework
  • Ionic writes a bunch of UI components that are designed for familiar mobile UX and intended to also scale up well to larger screens and desktop environments

So any of those three layers could theoretically be optimized, but I at least am quite confident that I do not have the skills or resources to do a better job of frameworking than the Angular team. If you want to try your hand at that, it’s possible (or you could use React or Vue if you wish; I have zero experience with either). The first layer we’ve already covered: if you’re making a PWA, you’re committed to accepting it.

As for the third layer, that’s the only time Stencil would come into play regarding performance. If there is some sort of UI widget that Ionic doesn’t provide that you want, then Stencil would be how you would make it, and then you would wire it into whatever framework you are using. That’s the true point of Stencil - to make framework-independent components. The only time you would use it for performance optimization is if you think you can out-Ionic Ionic. Again, I don’t think I even could do that, and even if I was going to try, I would simply fork Ionic itself (the source is all available) to make my improvements. Ionic components you don’t use don’t cost you anything in terms of performance - they get tree-shaken out of your app binary entirely.

As y’all covered above, the bulk of performance complaints about Ionic (or Angular) really come down to people blaming their tools for what are fundamentally app design flaws, such as I have 3000 items in a popup menu, my 400-item list takes forever, custom colors bloated my app binary, the sort pipe is too slow, and so on. Avoid falling into those traps (or climb out of them when you do), and you should be fine.

Thank you, @rapropos (and @Tommertom). These are extremely helpful responses. And I appreciate you taking the time to provide such thorough explanations–this is a great example of how good the ionic community is.

@rapropos, there was one item I did not fully get in your response. You noted that the Angular team probably does a better job of frameworking (and yes better than I would do).

Was your point there that using Angular is a good idea because it structures your app better than it is likely to be if you just used Stencil without a framework?

That’s one aspect that I personally find important, yes, but I was specifically trying to stay within the boundaries of your performance concerns. Angular’s change detection and binding system is IMHO an amazing piece of software engineering. I think it would be very difficult to address the problem of “how do I present changing information to a user and allow them to interact with said information, including potentially changing it further”, which virtually every web app (especially those that would be considering Ionic) has to deal with in a more performant and usable manner by rolling one’s own framework from scratch.

That’s a great point that helps to clarify a concern I had with abandoning something well-worn like Angular for something new like StencilJS.

It’s not just that there are more resources to help guide you through Angular problems, but there are a lot of things that are helpful to have in an app that Angular has evolved to provide, whereas it’s tough for a new tool to address them all.

Maybe going without a framework and using StencilJS can still work very well, like for very specific functionality that you know StencilJS can already provide, but Angular is likely to be the more resilient choice.