Adopting Component-Based Programming | Swift

Say you are building an iOS application, and there is a UIComponent that is being used in almost every screen. Will you act as a noob programmer, and write code for that component in every screen? Definitely not! Being a good programmer, we want to minimise our code, with maximising the output.

Component based programming can play a vital role in achieving this goal. You observe a UI Element that is being used repeatedly, you write code for that element only ONCE, in a way that you can reuse the code easily and efficiently.

Let’s say we have a button at the bottom of our ViewController, which is being used in multiple screens. We’ll make that button a component, and will reuse it along with different customisations.

We’ll start off by writing a function name addButtonToBottom which will be in an extension of UIView. Inside that function, make a UIButton, and apply constraints to it.

Creating Button

Creating a UIButton

Adding Constraints to Button

Inside the same function, add constraints to UIButton.

Constraints to UIButton

Here self refers to the view, in which the button will be added. We are centring the button horizontally relative to the view in which we want to add the button, and we are giving -20 px bottom margin. That’s it. We are almost done with the code. All we have done is that we wrote a function in extension of UIView, and inside that function, we have created a UIButton and given it constraints. Now to use it in any class, we’ll do it like so :

Final Result

You can also customise the button by adding more parameters to the function.


Component-based programming can help in cleaner and efficient coding. It prevents the programmer from repeating a chunk of code over and over, and also eliminate the effort of correcting any line of code if it is written in many places.

Happy Coding!




iOS Developer — Connect with me

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is Docker, Docker Containers, Images?

UI as an implementation detail

Set up continous integration with Azure DevOps for dotnet Core Application and Unit Tests

Advantage of Working in Dot Net Nuke


Getting Integration Tests Right — Semaphore

Online Banking System using Flutter

May LeetCoding Challenge — Day 1

Optimising Diet Plan In Tight Budget-Modelling In Python

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abu Bäkr

Abu Bäkr

iOS Developer — Connect with me

More from Medium

Native iOS App​ Development: My Cure for Impostor Syndrome

Track your app: Firebase Analytics Simplified

Continuously Building and Hosting our Swift DocC Documentation using Github Actions and Netlify

Storing App Data Locally