Can Ionic use a Micro-frontend architecture?

Ionic Framework
1

Can native functionality be maintained using a micro-frontend architecture?
If yes… How?

1 Like
2

Even I too have the same doubt…
If anybody knows, please reply…!
I’m eager to know

3

I think it depends on if the underlying framework (Angular, React, …) is suitable to implement micro frontends. WIth Angular you can do like e.g. described here. However there are different appraoches to implement mfs. I’ve no idea if Ionic is suitable for implementing mfs. As far as I know it does not provide cli commands for generating mf template components or something like that.

With React and Vue it’s possible to implement mfs as well. Here an example for React and here and here for Vue.

4

What about (Module Federation)[Module Federation | webpack]. I haven’t tested this approach yet, but I definitely need to implement microfrontend architecture with Ionic.

5

I had the same question in mind, and I think in theory it is possible. I don’t have any example to show, but what I am trying to achieve now is to split an Ionic app into micro frontends. The app has three tabs for three main functionality, and my end-goal is to wrap each tab into a web component, and to load them lazily.

As far as I know, Angular supports webpack module federation starting from version 11 which is the recommended way to implement MFs according to some people.

I found these tutorials especially helpful:

I don’t know how is it in other frameworks (Vue, React, etc) though, so your mileage might vary.

There is also a huge repository with micro frontend examples implemented in a wide variety of frameworks, which all use module federation.

Since Ionic is just a glorified webapp in a webview after all, I don’t see any reason why this could not be done in theory.

6

On a second thought though, I am not sure if splitting up the webapp into micro frontends will suffice. I wonder if the cordova platform also supports such an architecture. Some kind of official guidance from the Ionic team would be greatly appreciated.

7

Anything I say is about as far away from “official guidance from the Ionic team” as one can get, but I would urge this:

Do not spend a single minute structuring your application in a fundamentally more complex way, breaking things up into little pieces with hidden on-demand loaders and caches and modules and whatnot, until all of the following conditions are met:

  • the app is totally feature complete, working, and stable
  • you have polled users, and “initial load time” - not “performance in general” - is being raised consistently as a complaint
  • you have profiled the startup code and dealt with any bottlenecks therein that are in your code, as opposed to in the framework loading

Too often people get deep into the weeds trying to “optimize” things with tradeoffs that make the code base brittle and bug-prone. Lazy loading and micro frontends are not panaceas. They have real costs that their proponents like to sweep under the rug.

1 Like
8

I am sorry to say this, but your answer is really really really off-topic.

Also, I on the other hand would urge people to think through how their app will grow from day number one and start architecting their app accordingly.

I have the ‘luck’ to work with an absolutely terribly architected app, with a huge codebase and a terribly dysfunctional organization. If the app would have supported micro-frontends from day one, we could have released the app years earlier.

If someone thinks micro-frontends sounds like a great idea, then go for it.

Also: micro-frontend is not an optimization technique, so that’s completely beside the point.

And this whole comment is not even trying to answer the question: does ionic support micro-frontends or not? If yes, then how (with working examples preferably).

So can we stay on topic?

9

Just wanted to drop a reply here for anyone searching. We have a solution available now for using Micro-frontends for Native mobile applications. A few weeks ago I did a webinar on it.

10

While I think this new feature is in the good direction, I need to warn everyone who considers using Ionic Portals that it is not a micro-frontend solution.

In my opinion this is clearly false advertising and a complete deception (shall I say fraud?) of users/customers/paying clients.

Ionic Portals does nothing to enable the deployment of native code (e.g. cordova plugins). Every native code change will need to go through the respective app store review process.

This is basically a productivity enhancement feature, which helps to write maintainable Javascript code and integrate it with Ionic’s own webview. The feature that Ionic also announced in tandem, namely using Live Updates has been around for a few releases now and it’s nothing new, and the same can also be achieved by using simple iframes.

I noticed that not only Ionic jumped on this bandwagon to mislead their customer base by acting in bad faith. I need to name-shame Nx too, because they do the same.

So this is just a fair warning. Anyone who reads this, be aware of what you get into.

Just my 2 cents. This new feature might still be useful for someone though, it’s just very limited in my opinion, and it’s nothing close to the web-app version of micro-frontends solutions.

11

Is there a definitive answer that Ionic supports micro front end architecture? Does it support Module Federation Plugin?