VIPER Design Pattern or Architecture? — Swift

Part 1 :- build a Simple Open Weather App with API Calls Using VIPER.

Oh Yeah! we have something interesting today with question mark, then for sure our journey is gonna be little bit long but not boring. Not only we will learn the basics of VIPER but also the basics of Clean Architecture and comparisons between both of them.
And for sure the conclusion at the end.

Download the starter project using the link: Starter VIPER Project

• In terminal, go to your downloaded folder path and perform Pod Install.
• Now run the project using simulator and you will be able to see below screen.

Now let’s have some basic idea about the starter project. Starter project structure looks as shown below :-

It has two Modules : App-modules and Network-modules.

App-modules is the one that we will be discussing to get the good understanding of the main parts of VIPER.

In App-modules, there is a Weather and a Detail section. Firstly, we are going to start with the Weather section which has the Main parts of VIPER as shown :-

View:

It displays what it is told by Presenter and relays user back to the Presenter.

As shown above, presenter is declared in the View and the view displays whatever is post by the presenter through the protocol functions that are implemented in the view.

The Protocol of the View is as shown below:

Interactor:

Contains the business logic as specified by a use case. Used for fetching data regardless of where the data is coming from.

As shown above, Interactor fetches the data from RemoteDataManager which acts as a repository layer to make the network calls through the protocol PostListRemoteDataManagerOutputProtocol and it’s functions that are implemented and updates the response to the Presenter.

And also the Interactor calls the RemoteDataManager through the protocol PostListRemoteDataManagerInputProtocol and it’s functions are:

Presenter:

Contains view logic for preparing content for display(as received from the interactor) and for reacting to user inputs (by requesting new data from the interactor).

As shown above, Presenter receives the data from the Interactor and sends it to the View with the logic to display the data in the view using the protocol PostListInteractorOutputProtocol.

And also the Presenter calls the Interactor and handles the initial view that need to be displayed along with calling the Router/Wireframe that enables navigation between screens using the protocol PostListPresenterProtocol.

Entity:

Contains basic model objects used by the Interactor.

As shown above, there are many files in the entity section which are all model objects used to decode the Weather json response.

Router/WireFrame:

Contains the navigation logic for describing which screens are shown in which order

As shown above, the Router sets the initial View Controller (WeatherViewController) using the function createGetListModule and then navigation to the next view controller using function presentGetDetailScreen.

I hope now you have the better understanding of the Starter project. And now let’s deep drive into more deeper understanding of VIPER.

Let’s move back to our WeatherViewController, as presenter was already declared earlier lets call viewDidLoad() method of presenter as shown below :

Now we are going to implement the viewDidLoad of class GetListPresenter by calling the retrievePostList() method using interactor and showing the loading animation before the api call using view as shown:

As shown above, the interactor calls the retrievePostList() method.So let’s move to the class GetListInteractor and implement it by calling the retrievePostList() method using remoteDatamanager as shown:

class PostListRemoteDataManager makes the api call to fetch data in the retrievePostList() method as shown :

As shown above, remoteRequestHandler is the declaration of PostListRemoteDataManagerOutputProtocol calls onPostRetrieved method on successful response or calls onError method on failure which works like a listener, remoteRequestHandler protocol method implementation are provided by the GetListInteractor as below:

And the complete class GetListInteractor looks as below:

As shown above the presenter calls didRetrievePosts and onError methods. So next we are going to implement the above methods which belongs to PostListInteractorOutputProtocol in GetListPresenter as shown :

And the complete GetListPresenter looks as below:

Now it’s time to update the view as shown above after receiving the response view hides the loader and updates the view using showGets() method which belongs to PostListViewProtocol. so lets provide the implementation as below and also declare a model variable to access the response:

And the complete WeatherViewController looks as shown below:

Let’s move to the most important part i.e Router/WireFrame class GetListWireFrame, it creates all the delegates between the classes as shown below

As shown above, the declared variable helps in communicating with the other class for e.g
view.presenter is initialised with newly created presenter variable which is equal to the GetListPresenter class.

let presenter: PostListPresenterProtocol & PostListInteractorOutputProtocol = GetListPresenter()

view.presenter = presenter
presenter.view = view

In the above lines of code, PostListPresenterProtocol and its method implementation works like an input for GetListPresenter class And PostListInteractorOutputProtocol works like an output which receives the response and passes it to the view. Whenever we call presenter?.viewDidLoad() then the PostListPresenterProtocol implementation gets called in GetListPresenter class and it is possible only because of the delegates are set in the Router/Wireframe using view.presenter = presenter. So Similarly all the method implementation helps in communicating between the classes as the delegates are set for all the class.

Now, let’s run the app and we can see the below screen with response being populated :

Let’s navigate to DetailViewController by adding action to the Detail button in WeatherViewController as shown:

Now let’s provide the implementation for the method showPostDetail(forPost post: PostModel) of PostListPresenterProtocol in GetListPresenter as shown:

As we know navigation is mainly perform using the Router/Wireframe and as shown above the wireframe calls the method and its implementation will be provided in GetListWireFrame as shown:

PostDetailWireFrame is the Router/Wireframe of the Detail module which creates the instance of DetailViewController and helps in transferring data from one screen to another using the PostModel as shown below:

For populating the received data in DetailViewController, it is implemented the same way as WeatherViewController using the VIPER pattern and for that you can refer or download the Complete Source Code here

The Simplified Diagram of the Weather App:

In Next Part, we will discuss about the Clean Architecture and implement the same in the above Weather App and also will come up with the conclusion.