Microfrontends in mobile apps

Microfrontends: Breaking Down the Monolith

Microfrontends take the concept of microservices and apply it to the frontend. Instead of a monolithic frontend where all components are tightly coupled, microfrontends break the UI into smaller, independent pieces. Each microfrontend corresponds to a specific feature or business domain and can be developed, tested, and deployed independently.

This approach is particularly beneficial for small teams or startups. It allows for faster iterations on individual features, reduces the scope of each update, and leads to a more agile development process.

For instance, consider an e-commerce app. With a microfrontend approach, the product listing, shopping cart, and user profile could each be a separate microfrontend, developed and deployed independently. This reduces the risk of unexpected side effects and makes each deployment less risky.

Webviews: A Bridge Between Native and Web

Webviews are a powerful tool that can be used to implement a microfrontend architecture in mobile apps. They are essentially mini web browsers embedded within your app, capable of rendering HTML, CSS, and JavaScript. This means you can develop individual features of your app as mini web apps and then integrate them into your native app using webviews.

Let's go back to our e-commerce app example. Suppose you want to develop the product listing, shopping cart, and user profile features separately. Each of these features can be developed as a separate web app by a web developer. The web developer can use their favorite framework (Angular, React, Vue) to create the UI and logic for these features. Once developed, these web apps can be integrated into the native app using webviews.

This approach has several benefits:

1. Code Reusability: Since web technologies are platform-agnostic, the same code can be used for both iOS and Android apps. This can significantly reduce the development time and effort.

2. Faster Iterations: Web developers can quickly iterate on the web app features without needing to understand the intricacies of native app development. This can lead to faster feature development and bug fixes.

3. Resource Optimization: If you're a small team or a startup, you might not have the resources to hire separate iOS and Android developers. By using webviews, you can leverage your existing web development skills to create mobile apps.

Think of it like having multiple smaller Ionic apps within your native app. Ionic serves the UI in a webview, much like what I'm proposing here. The difference is that instead of having one large Ionic app, you have multiple smaller web apps, each serving a specific feature of your app.

Introducing ChattyWebviews

ChattyWebviews is a framework designed to streamline the communication between webviews and native classes in mobile apps.

Here's a simple example of how you can use ChattyWebviews to send a message from a webview to a native class:

// In your webview
subscribe('update-items', (msg: any) => {
    this.itemsList = msg.items;
})

sendMessage("get-items");

And here's how you can listen for this message in your native class:

// In your native class (iOS)
func controller(_ controller: CWViewController, didReceive message: ChattyWebviews.CWMessage) {

        if message.topic == "get-items" {
            let verbs = itemsDataStore.getItems()
            let result = ItemsResult(items:items)
            let message = CWMessage(topic: "update-items", body: result.toDictionary())
            try? controller.sendMessage(message)
        }

    }

ChattyWebviews also supports Over-The-Air (OTA) updates. This means you can update the content of your webviews remotely, without needing to push an update through the app store.

Using webviews to create microfrontends in our mobile apps can make our development process more efficient. It allows us to reuse code and iterate faster. ChattyWebviews, while still in its early stages and currently only supporting iOS (Android support is coming soon), can be a helpful tool in this approach.

I hope this post has piqued your interest. I'm looking forward to hearing your thoughts and feedback. Happy coding!