May 17, 2023
  • All
  • Product
  • Capacitor
  • Federated Capacitor
  • Portals

Allow Me To Reintroduce Myself: Federated Capacitor

Jacklin Altman

Product Team

While not necessary, we think that playing this in the background really gives this blog the umph it deserves. 

You may remember that a few months ago, we introduced Portals for Capacitor. After continued research in the market, we decided Federated Capacitor was a much better name because it more accurately represents how the technology works under the hood. So, we’d like to reintroduce it – fancy new name and all. 

What’s so great about Capacitor, anyway?

If you ask us (and thousands of other developers), a whole lot. Installed nearly 1.5 million times per month (and growing), Capacitor, Ionic’s native mobile runtime solution, makes it possible for any web developer to build native iOS, Android, desktop, and Progressive Web Apps – all from a single codebase. It’s a free and open source (MIT-licensed) platform that enables developers to build cross-platform apps with the web technologies they know and love. Capacitor consists of native platform SDKs (iOS and Android), a command line tool, a plugin API, and a vast library of premade plugins. 

Essentially, anything you would build natively with other toolkits can be built with Capacitor (and more, because of the ability to run on the web). Teams are using it to create better apps faster and saving money in the process. Since your existing web developers can create powerful mobile experiences with Capacitor, there’s no need to hire additional native developers. Teams also save time by leveraging a single codebase, rather than duplicating development for multiple platforms. 

However, as more teams are realizing the power of Capacitor, more teams are also working on those apps concurrently. As more cooks enter the proverbial kitchen, scaling app development can get tricky. That’s where Federated Capacitor comes in. 

What is Federated Capacitor?

Federated Capacitor is a paid plugin that enables multiple development teams to contribute to the same Capacitor codebase. Each development team can focus with their own releases and maintain levels of autonomy, while all ultimately working toward the same end goal – a better app.

In short, development teams can work at their own pace on their designated features. No need to worry about other teams’ speed or schedules – Federated Capacitor empowers developers to hyper-focus on a certain part of the mobile experience and truly perfect it.

How does Federated Capacitor help?

Traditionally, large development teams are bogged down by slow shipping speeds, lagging feature velocity, and complex team organization. Federated Capacitor can help keep things simple.

With Federated Capacitor, teams ship on their own release schedule, without worrying about what other teams are doing. This means each feature gets a developer’s (or team’s) sole focus, so updates and improvements can be rolled out quickly and independently. This also alleviates organizational challenges, since teams are focused on their own deliverables and don’t need to worry about waiting on other teams’ releases etc. Ionic Appflow’s Live Updates feature is also critical here, as it enables teams to deploy or rollback releases on their own schedules. 

As teams and applications scale, the apps’ footprint grows more complex. Federated Capacitor gives each team a designated swimlane to work at their own pace, so adding features and scaling up won’t slow down app delivery.

Get started with Federated Capacitor

Federated Capacitor allows users to define separate micro frontend applications to exist in the same Capacitor application. This is done by adding a configuration to the Capacitor config file defining the location of the applications during build.

const capacitorConfig: CapacitorConfig = {
  plugins: {
    // Federated Capacitor configuration
    Portals: {
      shell: {
        name: 'shell',
        webDir: './build',
      },
      apps: [
        {
          name: 'account',
          webDir: '../account/build',
        },
      ],
    },
  },
};

After the applications have been defined, you can configure live updates so each application can be deployed independently by having each application as a separate Appflow app.

{
  name: 'shell',
  webDir: './build',
  liveUpdateConfig: {
    appId: 'YOUR_APP_ID_IN_APPFLOW',
    channel: 'production',
    autoUpdateMethod: 'background',
  },
};

Now each micro frontend has its own app and separate deployment channels.

→ Check out the documentation to learn more.

Get started today

Federated Capacitor empowers development teams to build and deploy features quickly and build better apps at scale. Sign up to try Federated Capacitor for yourself, and get in touch with a product specialist to learn more.


Jacklin Altman

Product Team