Introduction to RGUIKit: Modern iOS Declarative UI Framework
RGUIKit is a modern declarative UI Framework to simplify and accelerate UI development on iOS.
The Background
Ruangguru is a comprehensive online learning app that offers a lot of different products and features in a single app. Almost all of its features have dynamic and complex UI layouts. This is a challenge for us, software engineers, to provide our users with a good user experience and app performance.
In iOS development, there are generally two ways of developing the UI. The first way is to use a storyboard or XIB. The second way is to use code programmatically. Both methods are considered less than optimal for the requirements in Ruangguru.
Storyboard or XIB is only suitable for small to middle scale projects because it is relatively easy to maintain. But for large scale projects, this method lacks effectiveness because it is very difficult to maintain and especially prone to conflicts if there are two engineers working on the same storyboard or XIB. The XIB is also considered inefficient, for example, if we want to create a new screen, then we would need to create a .swift file and also a .xib file, therefore increasing the size of the app.
Building the UI with code programmatically also has its problems. With this method, we would need to build or run the project to see the results, this would consume too much time and affect engineers’ productivity. Building a complex UI requires a large amount of code, and potentially it would be very difficult to read and debug the code.
So, why not just use SwiftUI? SwiftUI is a native declarative UI framework made by Apple. Unfortunately, SwiftUI can only be used on iOS 13 and above, meanwhile there is still a large number of users with iOS 11 devices in Ruangguru.
This is why we decided to create a new, in-house UI framework. The new UI framework should improve engineers’ productivity in building the UI. We also aim to ensure that the new UI framework provides the best rendering performance, especially with a complex layout. Finally, we also want to make the UI framework easy to write, more predictable in a complex codebase, and easy to be refactored.
RGUIKit Overview
We chose a declarative paradigm for the new UI framework instead of imperative, which means we can simply state what the user interface should do. RGUIKit utilizes a declarative code style so that the code written is easier to read. We also want to make sure that with this declarative paradigm, the UI state would be more predictable, as the code is the single source of truth. RGUIKit also has an API structure and form similar to SwiftUI to make it more familiar and easier to use for Ruangguru engineers.
For the internal UI engine, we’re no longer using the Apple UIKit. Instead, RGUIKit utilizes a UI Engine called Texture, a third-party library capable of rendering UI asynchronously, this improves rendering performance even with a dynamic and complex UI. Texture is significantly faster than UIKit because of its powerful flexbox algorithm that determines the position and size of its child UI components. We can get a pretty consistent 60 fps on a complex list layout.
As we aim for a declarative programmatic UI framework, we also wanted to have a quick feedback loop for engineers to preview the UI results. To achieve this goal, we created a hot reload feature using Injection, a third-party library. Injection allows us to update the implementation of the UI code within RGUIKit in the iOS simulator without having to rebuild or restart the application. This saves the developer a significant amount of time tweaking code or iterating over a design. The development experience is similar to react-native. It would update the UI in the simulator whenever it detected new changes.
What is the secret behind the RGUIKit?
RGUIKit adopts Result Builder, the latest feature from Swift 5.6, which can be used to implement DSL to write declarative code. An example of the basic syntax of the Result Builder is as follows:
We can use the StackBuilder to create a declarative UIStackView like this:
But of course, RGUIKit is much more complex than the code example above. With its architecture, RGUIKit is designed to be a stand-alone framework, so that if one day we needed to change the UI engine from Texture to another one, then we won’t break the current implementation on the client-side.
So here’s the sample code implementation to build a UI using RGUIKit:
We also use a custom property wrapper that encapsulates RxSwift implementation to perform data binding between the UI and the view model. RxSwift itself is a reactive library that is very popular in the iOS community. We decided on it because the library is stable and mature, therefore easier to integrate into the RGUIKit.
Hybrid UI Development
Considering that RGUIKit is still new and still in the development stage, is it possible to implement hybrid UI development with Apple UIKit or even SwiftUI in the future?
Just like SwiftUI with its UIHostingController, RGUIKit also has a ComponentHostingViewController with the same functionality. This advantage gives us more flexibility in determining the UI framework used.
We can use the factory design pattern to create abstractions in creating UI objects. The protocol above has a function that aims to create a Search UI that returns a UIViewController. We can create a concrete factory for each UI framework that we have.
Challenges
Apart from the benefits offered by RGUIKit, there are also some challenges that we must face. RGUIKit uses a declarative code style, and it’s very different from Apple’s Auto layout. This paradigm change means that we have to learn a new paradigm in developing UI. In addition, RxSwift is still required to implement data binding. Of course, it takes some time to learn everything, especially for engineers who aren’t quite familiar with reactive programming.
Conclusion
RGUIKit is a modern declarative UI framework that is compatible with iOS version 11 and above. The framework can speed up feature development and is quite promising to be used within the next 3–5 years while waiting for SwiftUI to be ready for use.
If you are interested and curious about RGUIKit or other projects, don’t forget to visit Ruangguru’s career page:
https://career.ruangguru.com/technology
Thank you for reading and feel free to reach out to me if you have any questions or feedback. See you in the next article!
