Analysis of SwiftUI with Design Token Adoption at Halodoc
At Halodoc we're always looking for innovative ways to solve user problems and adopt the necessary technologies for the same. As we all know, in the ever-changing digital world, user interface (UI) design plays an important role in the development of applications. In this blog, we will explore how we are migrating our SwiftUI Design library into the existing UIKit App.
What are Design Tokens?
Design token is a named value that represents a visual style or design property of your app. For example, a design token could represent the colour of your app's primary button, the font size of your headings, or the spacing between your components. By defining these values as design tokens, you can easily reference and reuse them throughout your app's design system, ensuring consistency across all your visual elements.
Design tokens typically consist of two parts:
- Name The name is a human-readable identifier that describes the purpose of the token, such as
primary-button-colororheading-font-size. - Value The value is the actual visual property that the token represents, such as #007AFF for a blue button or 24px for heading font size.
By separating the name and value of a design token, you can easily modify the value to update the style of all the elements that reference that token, without having to manually update each component. This can save you a lot of time and effort when making design changes or updates to your app. For more information about design tokens please refer this blog
Advantage of SwiftUI with Design token
The adoption of SwiftUI with design token integration can offer several benefits to a development workflow. Here's a summary of the potential advantages:
Consistency Across Platforms:
- SwiftUI's cross-platform nature combined with design tokens ensures a consistent visual language and user experience across iOS, macOS, watchOS, and tvOS applications.
Centralised Design Decisions:
- Design tokens provide a centralized and abstracted way to manage design decisions. This allows for easier updates and maintenance of the design system, promoting consistency and reducing the likelihood of design inconsistencies.
Improved Collaboration:
- Design tokens serve as a common language between designers and developers. Designers can define tokens that encapsulate design decisions, making it easier for developers to translate these decisions into SwiftUI code. This can streamline the collaboration process and enhance communication between design and development teams.
Efficient Iteration on UI Elements:
- SwiftUI's declarative syntax combined with design tokens enables efficient iteration on UI elements. Developers can make changes to the design system, and these updates can be quickly reflected in the SwiftUI code, allowing for a faster and more agile development process.
Adaptability to Design Changes:
- SwiftUI's declarative approach makes it easier to adapt to design changes. When integrated with design tokens, developers can make adjustments to the design system without extensive modifications to the underlying code, facilitating quicker responsiveness to design updates.
Enhanced Productivity:
- SwiftUI's live preview and concise syntax contribute to increased developer productivity. Design token integration complements these features, allowing developers to focus on building UI components with a clear and standardised set of design decisions.
Design-System Library Migration
In Halodoc, we have created Design-Systems like Atoms, Molecules and Organisms. We integrated those design-system in our existing application. We have built a common UI library that we are using in Halodoc Apps and we planned to migrate all the UI components into SwiftUI by integrating the design-system Library to get the benefits of the design-system.
Steps To Migrate:
Step 1:
We listed all the UICommons Components that match with design- system library components.
Step 2:
Identified the complexity of each component migration by checking the module-wise impact.
For example: FSPagerView
We categorised it as Organism as it is using Atoms and Molecules to form. We identified how FSPagerView is integrated into our project, its subcomponents, and the modules that leverage it. Using this we have identified the complexity of migration.
Step 3:
We categorised the components of xibs migration because we need to create a View Representable Classes to interact UIKit with SwiftUI design-system components.
Below are the examples explaining our migration analysis:
Step 4:
Smaller UI Components are categorised as Atoms such as configurable Labels, Button etc. These design-system components are developed in SwiftUI.Our existing apps are not fully migrated into SwiftUI and the apps are heavily using these Atoms. To integrate design-system library into the existing App, we have to create a View Representable for those SwiftUI components to add those in the UIKit designs.
The term View Representable is often associated with the UIViewRepresentable and NSViewRepresentable protocols in SwiftUI. These protocols allow you to wrap UIKit (iOS) or AppKit (macOS) views and view controllers, making them usable within a SwiftUI hierarchy.When you conform to UIViewRepresentable or NSViewRepresentable, you provide implementations for methods that create and update the underlying UIKit or AppKit view. This bridging allows you to incorporate existing UIKit or AppKit components seamlessly into your SwiftUI-based application.
Here's a simple example using UIViewRepresentable:
Step 5:
Evaluation of Atoms CPU & Memory Usage
We created multiple HDButton instances from the design-system library to analyse the impact on the CPU and Memory. We noticed a spike in CPU and Memory usage compared to UIKit usage. Please refer to the below screenshot for how much it increased the CPU and Memory usage:
UIKit Usage
UIKit + SwiftUI usage
We noticed that the memory size increased from 109 to 140 MB after creating a View Representable and trying to use it. After performing several tests, we have concluded that this approach is not suitable as it significantly impacts the application's performance. We have also recorded all the memory usage and CPU comparisons during our tests.
Conclusion:
Design tokens can serve as a bridge between designers and developers. Designers can define tokens that represent design decisions, and developers can use these tokens in their SwiftUI code, creating a more seamless collaboration process. SwiftUI's declarative nature makes it easier to adapt to design changes. If design tokens are integrated, it becomes simpler to update the design system without making extensive changes to the underlying code.
Migrating storyboards and Xibs into SwiftUI with design tokens poses a significant challenge, requiring careful consideration of the application's performance implications. This transition demands a thorough understanding of both the existing interface builder files and the SwiftUI framework, as well as the impact on overall user experience. By approaching this task with meticulous attention to detail and a comprehensive understanding of design tokens, developers can effectively navigate the complexities of this migration process.
Reference
Join Us
Scalability, reliability and maintainability are the three pillars that govern what we build at Halodoc Tech. We are actively looking for engineers at all levels and if solving hard problems with challenging requirements is your forte, please reach out to us with your resume at careers.india@halodoc.com.
About Halodoc
Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek, and many more. We recently closed our Series D round and in total have raised around USD$100+ million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.