Marvel's Heroes is an iOS, iPad and MacOS application that consumes data from Marvel's API and presents the characters, allowing the user view its details and the most expensive comic in which that character appears.
It was created with the latest Apple's technologies like SwiftUI and Combine. For that reason, the app hasn't any View Controllers. Instead, it is gracefully composed of a hierarchy of View protocols. Furthermore, it is completely reactive instead of event-driven like apps created with UIKit.
MVC, MVVM, Viper and the its variations are all architectures created with UIKit in mind. Just replicating those architectures for SwiftUI-based apps is not a smart decision.
Views from SwiftUI are like functions that return a screen based the data given to it. It is functional. Considering those facts, there is a new way to implement MVVM and another new one called Composable.
For this app, MVVM was picked for some reasons:
- It is not opinionated.
- It fits well the idea of handling any necessary logic and delivering to the UI data ready to be presented.
- It has enough testability for this project.
- It is easy to understand.
One of the huge benefits of using SwiftUI is that the same UI code can be used for three different platforms. And because of that, the app works for iPhone, iPad and MacOS, on different screens sizes and on both landscape and portrait mode. Furthermore, it also has both light and dark mode version.
Continuous integration was configured using Travis CI. The current build status is
(Click on it)
Currently, there are 32 tests on the app:
- 24 of them testing the user interface on different devices and orientations both on light and dark mode.
- 8 testing the Networking module used to abstract how data is retrieved from the Marvel's API.
Snapshots images generated on UI Tests
All tests were executed successfully
The data is correctly mocked using Dependency Injection, so no internet connection is made during the tests, ensuring that, if one of them fails, it is because there is some error on the code not because connection problems.
Recreating already existent code may be expensive in time and cost, so Swift Package Manager was picked as the dependency manager to install Alamofire, AlamofireImage and SnapshotTesting frameworks.
CocoaPods and Carthage could be a choice, but the new SPM is completely integrated with Xcode decreasing the number of problems related to dependency installing, making the work more productive.
Working on large projects require it to broken into smaller interconnected parts. It was done using the system of Workspaces from Xcode. There are two project on the workspace:
-
MarvelHeroes used to mainly to handle the screens.
-
Networking, created, as the name tells us, to abstract how networking is handled by the app. It exposes only the necessary methods that return instances that conforms to Publisher, making it easy to be connected with SwiftUI.
The project's structure follows Separation of Concerns design principle
The project was created by just one person in 4 days, but that is not an argument to completely avoid using Scrum.
A backlog was created to track all the requirements and polishments that could be made, even those most worthless ones. It was important to view the big picture when finishing some feature and starting the others.
This board is public. It is available on Trello
Apple has released Swift in 2014, and the language has evolved introducing some paradigms. Besides Object-oriented Programming, Swift is a protocol-oriented language. But the problem is that UIKit is object-oriented. So it is sometimes difficult to mix both paradigms.
The good news is that Protocol-oriented and Value-oriented paradigms fits perfectly with SwiftUI and Combine, so it is much more easy to created high quality code decreasing the number of errors and increasing the maintainability.
Example of the advanced technique Type Erasure used to implement Dependency Injection to test views.
And because of Value-oriented Programming, model entities are value-type instead of reference-type. The benefit is the ability to void sharing state owned by one entity between other entities. It's like Defensive Copying implemented in language level.
It is import to keep unstable code away from the client. To do so, some branches like screens, networking and uitests were created in those 4 days. Actually, the master branch was almost the last one to be created. On a large team it would be needed to create branches of branches of branches. But doing that for this project would be an unnecessary overkill.
The project has only two parameters extracted to entries in Info.plist file.
MARVEL_API_KEYis the key from the Marvel's API.MARVEL_HOST_URLis the base URL used to make requests. Currently it ishttps://gateway.marvel.com:443.
Furthermore, to make requests it is necessary to add app's bundle identifier as pre-authorized referrer on the Marvel API console. Currently it is com.almeidaws.MarvelHeroes.
Create this project in just 4 days was a big challenge, but it was worth it. I used CBL to work (what is almost the same thing as study in IT, XD ) on this project.
I had just superficial knowledge about SwiftUI and even less about Combine before starting to code. So the challenge was to apply those two technologies while learning them, and taking care to create a high quality code and follow the best patterns.
I hope you like it!