Declarative UIKit, MVVM, DI, Combine, PropertyWrappers — Part 1

Andrii Petrovskyi
4 min readDec 3, 2021

--

Hello, my dear reader!
Today Iwant to share with you how to use some Swift features in your project, such as:
@PropertyWrappers and Combine Framework!

In this article I’ll show you how to implement Dependency Injection using PropertyWrappers, also we will be using Combine and MVVM architecture, in my opinion it sounds great, isn’t it? ;)
Oh two more things:
1. We will be working with UIKit
2. We will be using declarative approach
So, let’s fly!

First af all I want to share some usefull links from where I get info to write this article:
1. DI in Swift with Property Wrappers
2.
Combine from 0 to ..

So for example we will refactor some simple project from MVC to MVVM.

Here is the link for starter project:
StarterProject

Some information about Declarative approach

Let see what Wiki tell us about Declarative programming and what is the difference between Declarative and Imperative approaches

Declarative:

In computer science, declarative programming is a programming paradigm — a style of building the structure and elements of computer programs — that expresses the logic of a computation without describing its control flow

Imperative:
In computer science, imperative programming is a programming paradigm that uses statements that change a program’s state. In much the same way that the imperative mood in natural languages expresses commands, an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how a program operates.

Declarative vs. Imperative sample:

So in first method I’ve used imperative approach to map array of Ints to array to String. Look at this method it fully describes how exactly I want to map Int ti String.
In the second method i’m using declarative approach, i’m not interest in how program will map my Int to String, i’m interested only in final result

So at this point we have a smiple project with one screen, with ImageView, Button, and Label

Lets see how it works:

What is this project doing:

This project will download image Data from internet by clicking on button

So for now our project has only Controller with all logic inside
lets see how it looks like:
We have some UI components at the top:

And some layout at the bottom:

Also we have action func handleBtnAction() and downloadImage() method with URLRequest inside:

Okay, that is all project, not a big deal)
At this point I want to refactor my UIComponents with declarative approach.

And like I told at the beginning we will be using declarative UIKit)
So how to implement this??
I have some packages for you to make you live easier)
Here is a list of Packages that I will use in this project
1. DeclarativeUIKit
2. DIWrapper
3. LoaderView

So let’s add all this dependecies to our project!
Here is a link with info how to add SP to project !

Okay, now we can refactor our UIComponents using DeclarativeUIKit.
For now DeclarativeUIKit contains a few UIKit components in the future it will contains all UIKit components, please fill free to submit issue about components which you want to see in my library

So at first we need to import DeclarativeUIKit to our Controller

Then it we can see all power of using declarative approach! ;)
And here what we got:

In my opinion it looks much better and more readable

But I have one more useful thing for you there in DeclarativeUIKit package,
it refers to layout. So lets refactor our setupUI method with new features, and I preferred to move all layout to extension, and it will be look like this:

It looks much better, isn’t it?)

And finally our setupUI() func will be looks like this:

😎
At this point I want to finish with first part of my arcticle, in the next part we will add ViewModel.
Thanks for reading, hope you enjoy!

--

--