Getting Started with iOS App Modularization — Final Extraction and Micro App

This is the final part of the modularization tutorial. Refer to the list below for the complete parts :
Part 1: Introduction
Part 2: Extracting Catalog
Part 3: Final Extraction and Micro App

Refer to the link below for the starting project template, or you can continue with your existing project if you come from the second part of the article.

GitHub - tokopedia/ios-modular-tutorial at feature/extract_catalog

1st Step : Creating the Product Detail Framework

Let’s continue this series to extract the Product Detail feature into its own framework.
Create a framework and add it to the existing .xcworkspace

Next up, move all the contents inside the ProductDetailPage folder in the main framework to its own framework, then our project will look at this.

Always remember to add the framework’s dependency first before adjusting the framework’s code.

Add the Shared framework as the ProductDetail ‘s dependency.

Next, don’t forget to change the ProductDetailPageViewController.xib ‘s module name to ProductDetail .

After that, try to run the app but always expect it to be failed since you have not adjusted anything yet. If you try to inspect the error, it is caused by the file SceneDelegate.swift since it cannot find the definition for ProductDetailPageViewController .

The solution is to add ProductDetail as the main framework’s dependency, by doing this, the main framework will have access to the ProductDetail framework’s APIs. Refer to the previous GIF to understand how to add a dependency to a framework.

Next, try to import ProductDetail on the SceneDelegate.swift , the file will become like this.

The error still has not been resolved due to ACL issues, navigate to ProductDetailPageViewController and modify the code to the following :

Try building the app, it will run smoothly with all features working as expected!

What’s more, you have successfully modularized the monolith app into several modules! 🎊🎊

2nd Step: The Micro App Concept

Now you already know how to split an app into several smaller features and achieve modularization, but what if you want to achieve building only necessary features?
Let’s say you have to implement some enhancements on the product detail page, theoretically, you only have to build the respective framework without having to compile the entire app. How can you achieve this?

Here’s where micro apps jump in, what you have to do is just to create a new app target, inside the framework you are working with. This xcodeproj will act like your playground, and developers needed only to compile this feature on development, hence the name micro app.

Click on the Product Detail framework, find the Targets tab and click the + button underneath the tab. After the choosing window show up, search for app and name it ProductDetailSample.

If your newly generated project files end up being red and can’t be opened like the GIF, quit and reopening the XCode will do the trick.

Next, add the Product Detailframework as the Product Detail Sample ‘s dependency. This is needed since the sample will only act as a playground for our code in Product Detail , hence you need to import them before you’re able to use them.

Find the Frameworks, Libraries, and Embedded Content section of the sample’s general tab and add the Product Detail framework.

After that, try to run the ProductDetailSample target

You will then be presented with an empty screen, which comes from ViewController.swift in the ProductDetailSample folder.

Try changing the background colour and check whether the screen changes accordingly. :)

That’s it. You can use the ViewController to embed the ProductDetailPageViewController or do whatever you want to do with the feature.

In this tutorial, however, we will try to simply present the ProductDetailPageViewController instead of using the ViewController , to achieve the capability to build only what you need.

Remove the ViewController.swift and the Main.storyboard .
Navigate to ProductDetailSample ‘s general tab and remove the Main from the Main Interface field, and lastly, locate the Info.plist file, expand all the keys from the dictionary until you find a key titledStoryboard Name, and then delete the entry.

Delete the Main inside the text field and press enter

Delete the highlighted entry by simply pressing delete

Finally, navigate to SceneDelegate.swift , change the code inside the scene function to become :

Try to run the app again, then it will show only the product detail page.

Now, if you want to enhance the product detail page, for example by adding an image carousel, product description, or anything else, you can code them and directly build this ProductDetailSample to speed up your development.

Congratulations! 🎉🎉
You have modularized the app and even provided a minor app in one of your features!

you can also go the extra mile to create a minor app for Catalog and Shared framework as well. :)

The final code of the project can be found at :

GitHub - tokopedia/ios-modular-tutorial at feature/micro_app

Where to Go From Here

In this article, you have learnt the definition and some motivations behind modularization, furthermore you have modularized an app yourself and even made a sample app for one of the frameworks, this is just the first step of the modularization journey, there are still so many use cases out there that require us to get help from libraries, or tweak our approach to modularizing. We also have this one story of adopting Bazel in our app to further improve our build time, you can check it here.

How Tokopedia Achieved 1000% Faster iOS Build Time

Thanks to Digital Khrisna, Bondan Eko Prasetyo, Ferico Samuel, and Andrey Yoshua for helping to review this series.