Building Native Mobile UIs
Q&A with Tony Nguyen, Mobile Engineer
What was the biggest surprise about mobile development when you first joined Personal Capital?
With previous roles, my coworkers and employers used “what you see is what you get” (WYSIWYG) editors for building their mobile apps’ user interfaces.
This meant using the Interface Builder for Xcode (iOS) and Layout Editor for Android.
But here at Personal Capital, we build UI through code.
Why has the Personal Capital mobile engineering opted to not use WYSIWYG editors?
The biggest reason is performance.
The compiler has to handle more overhead when loading, parsing, and translating XIB files and Storyboards into code. This creates unnecessary work. In a large project, this could have a large noticeable impact on performance such as on app start. The initial application boot of a mobile app is crucial since it impacts whether a user uses your app and how long they use it for.
Another reason is reusability. Building UI in code lets us re-use UI components through inheritance. For example, most UI components in a single application have the same style. Instead of recreating the UI component repetitively, we can use a base UI class which holds all the properties we’d like and just instantiate that object. Any small deviation we can simply extend from the base and make changes accordingly. By writing UI from code, we can keep our code DRY (Don’t Repeat Yourself) and be more consistent.
What is the learning curve like for creating UI programmatically?
The hardest part is that new employees need a fair amount of ramping up.
There’s no instant feedback on how the interface looks. I find that the lack of instant feedback really forces me to understand and think about why and where I need to put a UI element there. Sometimes complex UI layouts can be made simpler if you put a little bit more thought into it!
The learning curve is a little steep for those developers who are used to using a WYSIWYG editor; however, we believe that creating the UI programmatically benefits the growth of the developer. You really understand what’s going on under the hood when it’s done programmatically — especially with how complex and confusing view lifecycles can get!
Once you get over the learning curve though, you’ll find that you have much more fine-tuned control over what’s going on in your application.
Are coded iOS UIs easier to test than ones built with WYSIWYG editors?
We find UI testing is simpler when the UI is built programmatically than through a WYSIWYG editor because of the enforced separation of responsibility in programmatic views. A good practice is to not mix business logic with the building the UI. This makes it easier to test for us.
We use Xcode’s XCTest framework for writing tests — if you’re interested in contributing we are hiring!
