Composability is a systems design approach made to increase agility and accelerate application development by reusing existing assets and reassembling them in unique ways to satisfy specific user requirements.
Composable systems break down larger projects into smaller, more modular “components.” Each component addresses a specific problem or use case. Individual components can then be selected and assembled in various combinations to create new experiences without building from scratch.
In the context of application development, modular composability refers to the rapid assembly of new digital experiences by drawing from a library of pre-existing components that can be arranged—or “composed”—to address a specific use case.
Principles of Composability
The key elements that make a system composable are:
- Modularity
- Autonomy
- Discoverability
Modularity
To put it simply, modularity is about 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. Gartner calls these “Packaged Business Capabilities”, or PCBs. Ideally, each component or PCB will be small enough to maximize agility, but large enough to contain integrity.
Autonomy
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.
Discoverability
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 you’re building an application that requires an interactive chatbot, it should be easy for you to consult a central catalog or library of components with sufficient meta data and descriptions to easily discern its purpose and limitations. Building a reusable component that lacks discoverability negates the value of composable systems design.
Why adopt composable application architecture?
Composable systems architecture offers a number of important benefits to businesses and teams, including:
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.
Composability in web application development
For web application development, the preferred method of implementing composability is through the use of Web Components and micro services.
Web Components are a way of delivering rich frontend experiences that will run in any modern web browser, using built-in JavaScript APIs. In addition, Web Components are universal, and will run on virtually any web stack, regardless of which JavaScript framework is used.
Using an open source tool like Stencil, you can build custom Web Components that encapsulate advanced functionality into a single line of HTML code—addressing the requirements for modular composability. In addition, individual Web Components can be updated independently, without impacting the rest of the application—thus satisfying the need for autonomy.
The backend services layer is typically delivered using a micro services architecture, where a single application programming interface (API) is built and maintained for a specific purpose. Coupling a frontend Web Component with a dedicated micro service backend creates a single Packaged Business Capability that can be deployed across applications, or quickly reassembled to create new digital experiences.
Composability in mobile application development
While designing composable application systems in traditional web application development is relatively straightforward, composable systems are difficult to achieve in mobile.
The primary issue is that all changes must be compiled down to the same 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 even a small change to one part of the application requires that the entire app bundle be updated.
Solutions like Ionic Portals exist to address the issue of composability in mobile, by using embedded “micro frontends” that can be deployed across applications, and updated independently without impacting the rest of the application.
For example, with Ionic Portals, it is possible to achieve all three of the key design principles behind composable design, especially modularity and autonomy.
Modular 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.
Live Updates directly to each Portal
Further, Ionic Portals enables teams to send direct, targeted updates to individual Portals, without affecting the rest of the application. This achieves the principle of autonomy in a composable system design.
Further reading
To learn more about composable applications and the use of micro frontends for mobile, explore the following articles:
Superapps: A New Way of Thinking About Composable Mobile App Development
Feature Modules: The Answer to Building Micro Frontends for Mobile?
Building Micro Frontends with Stencil
Micro Frontends for Mobile with Ionic Portals
About Ionic
Ionic is a leader in enterprise mobile app development, with 5 million developers worldwide and thousands of enterprise customers who use Ionic to build mission-critical apps for their customers, both external and internal. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.
