Skip to main content

Composable Architecture with Ionic

The Ionic Platform has been built with all the necessary building blocks for organizations to create, test, deploy, and scale apps to their users. In order to provide the necessary tools to make this happen, Ionic embraced the philosophy of composability to allow for maximum effectiveness.

What is Composability?#

Composability is a system design principle that deals with the inter-relationships of components. A highly composable system provides components that can be selected and assembled in various combinations to satisfy specific user requirements.

According to research firm Gartner, the key elements that make a system composable are:

Modular#

A good rule of thumb for achieving the modularity principle is: focus on doing one thing well. It involves bundling a specific set of services into a single component that is dedicated to achieving a specific purpose. For example, an interactive chatbot. Ideally, each component will be small enough to maximize agility, but large enough to contain integrity.

Autonomous#

To qualify as a truly composable system, the individual components must be autonomous—meaning, they are entirely self-contained, and are not dependent on other parts of the system. Also, it should be possible to update one part of the system without affecting any other parts of the system. For example, if I want to publish an update to the interactive chatbot, I can do so without disrupting all of the other components of the application.

Discoverable#

An important element in a composable system approach is that individual components can be reused over and over again to assemble new experiences. For that to occur, the individual components must be easily discoverable by other teams. If I’m building an application that requires an interactive chatbot, it should be easy for me to consult a central catalog of components and discover that that component already exists. Building a reusable component and not sharing it with other developers or teams negates the value of composable systems design.

Composable Architecture

Benefits of Composable architectures#

  • Accelerate development of new applications. Quickly build new experiences by selecting and assembling from existing components instead of building new ones.
  • Cut down on inefficiencies and waste. By building a library of components and making them discoverable by other teams, you reduce the risk that teams will waste time building something that other teams within the business have already built.
  • Enforce design consistency and UX standards across applications. Creating a central library of components helps IT and design leaders standardize on a specific set of approved experiences, that look and feel consistent across applications and adhere to the firm’s design and UX standards.

Solving for composability in mobile#

Composable systems are difficult to achieve in mobile, because all changes must be compiled down to the same the native app binary, and updated via the app stores (public or internal). This creates a system bottleneck and violates the principles of modularity and autonomy—since everything must compile down to the same binary and be updated at once.

With the various tools available within the Ionic Platform, it's possible to achieve all three of the key design principles behind composability.

Component Libraries for Mobile

As companies scale and release more apps, they tend to develop a design system of centralized library of UI components and patterns with a clearly defined visual style.

Micro Frontends for Mobile

With Ionic Portals, you can encapsulate specific functionality in a modular and highly portable micro frontend architecture that can be deployed across multiple applications.