Instruction 1

Custom SwiftUI Views

With SwiftUI, Apple engineers built a framework that allows you to declare the UI of your app. Using native views like Text, VStack, and Button, developers can compose their UI in a simple and readable way. The framework comes with a number of containers, controls, and views that developers use to build the most amazing apps. All of these views adapt and change depending on the platform.

But this doesn’t mean it has to stop there. SwiftUI allows developers to create their own views, composed by those same native views. You create custom types that define a view, and that can also be used to compose other views.

The framework was built with the intention to help developers reduce code duplication, following a famous software principle, DRY - Don’t Repeat Yourself.

The Problem with Code Duplication

Code duplication is a block of code that repeats more than once, either in a single file or in multiple files. It can also refer to code that’s identical, with a slight variation.

In the last lesson, you created RGB Picker, a color picking app. The app has four main views: a color rectangle and three sliders, each with a single label on top to indicate what value of RGB that slider is changing.

RGB Picker is a simple app, and most of its code is inside ContentView.swift. This seems harmless for now. However, as the app grows, you might need to build new screens that present variations of those three sliders.

As the code starts to grow and you start to see a lot of repetition, expect maintainability issues to arise. Picture this scenario: You need to present the same view in lots of places, so you copy and paste code everywhere you need that exact view. But, if you decide to change any element of the slider UI, like the font of the label, for example, you’ll have to go change the font one view at a time.

It gets harder to understand, too! With lots of repetition, other developers — or even yourself, later — might not understand if the repeated code does the exact same thing in all places or if there are variations specific to business logic.

And that’s not the only problem. If a bug pops up in one of the views, you’ll have to fix that bug in every other place where you copied and pasted that code. You also may not realize that the exact same code had been copied and pasted somewhere else, and completely miss applying the bug fix on that part.

That’s a lot of work!

Fortunately, SwiftUI helps developers avoid those mistakes. It’s flexible enough that you can extend it and keep your code clean. By creating custom views, you can bundle similar code together to be reused in other places of your app.

By doing this, you greatly reduce code duplication and complexity, and even avoid bugs.

Code Abstraction and Encapsulation

Programming languages like Swift have many features you can use to solve code duplication. The most common way to solve this is the idea of code abstractions and encapsulation.

Code Abstraction

Code abstraction refers to the idea of representing features or entities of your code on a type. For example, the views of your app. You can define new types that describe the UI of a specific part. A view called RGBSliderView abstracts how a slider of the RGB spectrum should work, and you can use it as a view in your app.

Encapsulation

Encapsulation is the idea of bundling data and methods together that relate to one another. In SwiftUI, you create custom views that describe the layout of a piece of the UI, with all its parameters, data, and internal UI implementation hidden.

In the next demo, you’ll look at RGB Picker and refactor it to reduce code duplication and make your project more organized.