Storyboard vs Programmatically in Swift
There has been a heated debate in the Swift community regarding the use of storyboard and programmatic when it comes to creating your interface. It looks like Apple has been pushing the community to use storyboard, and using this as an a standard for the future. However, there are still some drawbacks of using storyboard. I want to briefly discussed the advantages of using each method and speak about my personal experience using each method.
Storyboard
1. Ease of use
When I first started to learn iOS development, I was taught to use storyboard. I thought it was straight-forward and easy to learn. After a day or two learning storyboard, it just clicks very quickly. If I needed to create a new view controller with buttons, labels, textfields, or segues, it is fairly easy to implement. With a few clicks, drag, and drop, I’ve just created a simple layout for my application. When compared to doing it programmatically, this can become a long process to simply just create a layout. Here is an example of programmatic constraints:
let sampleView = UIView()view.addSubview(sampleView)sampleView.translatesAutoresizingMaskIntoConstraints = falsesampleView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = truesampleView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = truesampleView.widthAnchor.constraintEqualToAnchor(view.widthAnchor).active = truesampleView.heightAnchor.constraintEqualToAnchor(view.heightAnchor).active = true
You can see how that is a lot of code just to create a simple view. Now imagine doing this for all the buttons, labels, textfields, and etc, this can get quite tedious. It is important to include translatesAutoresizingMaskIntoConstraints and .active = true , or our view will not show. Often times I will forget to include these 2 lines of code and wonder why my view won’t show up.
2. Visual
One of the major advantage of using storyboard is that it gives you a very good visual representation of your application. You know how every button, label, textfields, and view will look like. With a few clicks and adjustment, you can easily create a whole view. Additionally constraints are visually presented as well, any adjustment to constraints will show in a different color.
Programmatic
1. Control
Coding all of your UI elements will give you a sense of control. Anything that is achievable through StoryBoard, you can do the same through code. You know exactly what kind of settings you can create for your UI element. For example if I decided to make one of my font bold, I will have to click on all my UI elements and change it to bold, you can see how easy you might forget to make that change. It is easy to change your settings in code because you know exactly where you placed all the UI elements.
2. Reusability
I know I’ve mentioned that creating a simple view in code can be a long and arduous process, however we can reuse these codes throughout our project. If I wanted to create labels inside my view, I can just copy most of that code, and make a few minor adjustments. Boom! There’s my label. Another scenario is if I want to use the same exact layout as my previous project, I simply copy and paste. Boom! There’s my whole layout.
3. Clutter and Navigation
One of the main reason why I dislike using Storyboard is when it becomes cluttered. In Storyboard’s initial phase, this might not seem to be a problem, but once it’s filled with UI elements and controllers, it is very difficult to navigate. Often times when I want to adjust my location of my labels, I am actually clicking something else that is unrelated. This can become an headache. The solution is to actually zoom in and out, but I find that this is not a viable solution.
4. Merge Conflict
This is main reason why I refused to use Storyboard. For my final project, I’ve worked with 3 other developers, some of us likes to use Storyboard and others in code, complications starts to arise when we decided to merge our work on GitHub. It is very difficult to resolved the merge conflict. This makes working on the same Storyboard a grueling process. It is not a simple task because our Storyboard merge conflicts consists more than just code, there are codes that renders the UI.
Hope this was helpful topic. This is just my personal opinion, by no means I want to sway people to use code rather than storyboard. It is just a matter of preference. I believe storyboard will be the future, so if you believe this is the best route, more power to you!
Thanks for tuning in! 😎
