Building the SwiftUI Sample App in Illicit
We recreated Apple’s “Landmarks” tutorial app in Illicit, our declarative UI language. We then compared the result to the SwiftUI version created by Apple and the Flutter version created by Very Good Ventures. The differences were dramatic.
Last year, the lovely people at Very Good Ventures (VGV) published an article in the Flutter NYC publication describing their experience recreating a portion of Apple’s “Landmarks” app from their SwiftUI tutorials. At Everplace, we found VGV’s article especially exciting because we’re currently experimenting with Flutter as a rendering engine for our declarative UI language, called Illicit. We figured we’d throw our hat into the ring to see how we stack up.
About SwiftUI and Flutter
SwiftUI is a declarative UI framework created by Apple that simplifies user interface development on Apple platforms. SwiftUI enables a developer to use the Swift programming language to describe the view under development. Xcode, Apple’s integrated development environment, perpetually compiles the developer’s SwiftUI code and displays the resulting view in a preview panel.
Flutter is a declarative UI framework created by Google that simplifies user interface development on many platforms, including iOS and Android. Flutter enables a developer to use the Dart programming language to describe the view under development. Flutter includes a “hot reload” feature that quickly displays the result of recent code changes in a device emulator.
To help developers learn SwiftUI, Apple published a beautiful online tutorial experience. The tutorial guides you through building the “Landmarks” app, “an iOS app for discovering and sharing the places you love.” The tutorial breaks the development down into lessons. It provides the developer with a download for each lesson containing two Xcode projects: a starter project for the developer to complete as they follow along and a complete project for the developer to review.
Illicit is a declarative UI language we’re building at Everplace for ourselves and our customers. Illicit allows us to create a layered design vocabulary that empowers us to develop user interfaces efficiently. It is an abstraction layer that sits above a UI framework like SwiftUI and Flutter and allows us to describe the user interface, but defer the implementation.
We will write more about Illicit in detail soon — sharing our motivation, experience, and benefits. In this article, we’ll show you the Illicit code we wrote to recreate the “Landmarks” app and compare it to the related SwiftUI and Flutter code, so you can see its efficiency firsthand.
It appeared that VGV recreated the “Landmarks” app up to the end of the third lesson of the SwiftUI tutorial, “Handling User Input.” We stopped at the same point since our goal was to compare all three solutions. At this point, the solution contains two views: a view containing a listing of landmarks and a view containing the detail for a selected landmark where the user can toggle the landmark’s favorite status.
The SwiftUI and Flutter projects included image files representing the landmarks and a JSON file containing the data for landmarks. Since our primary use for Illicit is in network-based applications, we haven’t yet built support for standalone applications that do not connect to the network like the SwiftUI and Flutter “Landmarks” apps. For that reason, we put these image files and JSON file into a web server.
The next step was to build the Illicit views. To do that, we built the SwiftUI and Flutter projects, ran the apps, and then created the Illicit views to match. Since Illicit is a markup language, we can use one of the many HTML templating languages available that make writing markup easier. We used Pug to create our views, which we’ll show in the sections that follow.
Finally, we compared the three apps in a couple of ways. We compared them visually and interactively to ensure we faithfully recreated the user experience. Also, we compared the lines of code in the three projects to ensure we’re achieving our goal of developer efficiency.
The Landmarks Listing View
The listing view is the landing of the “Landmarks” app. It displays a heading that uses an animation during the transition to the detail view to associate it with the detail view’s backward navigation control. It also includes a switch control to toggle the list between all landmarks and just the landmarks marked as favorites. The items in the list can be selected to navigate to the landmark’s detail view.
When writing this view using Illicit, we decided to split the view up into two parts by moving the rows of items into a subview. We did that to allow the “Show Favorites Only” to swap out subviews with a network request.
To achieve the list filtering, we mapped the selected state of the switch to the URL of the items subview. The subview starts with the URL of the view showing all list items. If the user enables the switch control, then the subview’s URL is changed to target just the favorites. This job is performed by the
The Landmarks Detail View
When the user selects a landmark from the listing view, they transition to the landmark’s detail view. The detail view displays a map with two overlays: a navigation control to return to the listing and a larger circular image of the landmark elevated above the map. The region below the map and image displays the landmark’s name and location information. Following the name, the user interface provides a control to toggle the landmark’s favorite status.
To achieve the toggling of the landmark’s favorite status, we submit an HTTP POST message to the server with the identity of the landmark. In the template, this job is performed by the
sendsBy attributes. The server toggles the landmark’s favorite status and responds with new content to represent the new state. The server could respond by sending the entire view, but that would be inefficient. In this app, the server responds with just the new star content to represent the new state.
After completing the “Landmarks” app, we compared the user experience to the other two apps. We’ll include a video of the final result at the end of this article and let you judge the user experience for yourself. There were some things we couldn’t do yet, but we’re happy with the result.
We’re grateful for the work of Apple and VGV and for their willingness to share it with the world. SwiftUI and Flutter are both incredible advancements in UI development. The versions of the “Landmarks” app provided by Apple and VGV gave us good reference points to help us see how far we’ve come. We had a lot of fun recreating this app using Illicit. We’ve come a long way, but there’s still more to do. Thanks for reading and stay tuned.