The Art of the MVVM-C Pattern

How to optimise the navigation in your TabBar projects

Photo by Davi Mendes on Unsplash

As you’ve probably experienced as a developer — or simply as a smartphone user — the majority of applications are nowadays built with TabBars. In the past, apps used to be built with segues, which sometimes would lead to gigantic stacks and where the same ViewController may have had to be built twice.

Hopefully, Soroush Khanlou brought us an answer to those massive storyboards: the coordinator pattern.

It’s important to note my tutorial is first based on the MVVM pattern, which I’m not going to explain in this article. The coordinator pattern itself will only take care of navigation in the app by instantiating the view controllers that are independent and can now be used several times after one another.

The combination of those patterns brings this amazing result: the MVVM-C pattern.

Now, let’s dive in!

Scene Delegate

The scene delegate is already included in every Xcode project. Its role in this situation is holding on to the AppCoordinator.

You’ll then call start().

App Coordinator

This is the entry point of the coordinator that directs the whole app. It’s quite simple: You just have to connect it with the scene delegate, instantiate the TabCoordinator, connect it as well with the scene delegate, and then call its start function.

Tab Coordinator

Here is the earth of the navigation. The tab coordinator can be divided into several parts:

Source: An instance of TabBarSource, it’s the class responsible for bringing along the parameters relative to the tab Bar. Since we’re talking interface programming, you’ll need to inherit a protocol that in its extension will add a raw value named relatively to each tab.

Here is what the source is in the file

You then make an extension (at the bottom) on the tab coordinator to get the raw value of the selected tab:

And, finally, call the relative show() func to instantiate the coordinator of the stack:

This is what the TabBar class looks like

Coordinators

You have one coordinator per stack. It’ll then coordinate the flow of the entire stack by instantiating the different MVVM blocks with the help of screens.

Screens

The class Screens is only including the storyboard.

Finally, create extensions. Each should include one function responsible to instantiate the viewController with its relative ViewModels and eventual repository, delegate, etc.

MVVM

Additionally, you’ll find the MVVM blocks relative to every view. In this tutorial, it only means ViewController and ViewModel.

I’m not willing to go further on this topic. However, I only can recommend developing your understanding and skills of this pattern.

Conclusion

I hope I gave you a nice introduction to the MVVM-C pattern. Of course, this tutorial won’t be very useful to someone who already has advanced knowledge on the topic. However, to become an expert, you always have to start somewhere, and making it simple is often making it clear.

You may also want to check the repository of this project on this address.

Thanks for reading, and good luck!