Everplace
Published in

Everplace

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.

Introduction

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.

About Illicit

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 Process

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.

The Illicit templates for the listing view and the items subview (left to right).

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 reflection element.

The Apple, VGV, and Everplace versions of the listing view (left to right).

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.

The Illicit template for the detail view.

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 sendsTo and 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.

The Apple, VGV, and Everplace versions of the detail view (left to right).

Summary

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 also compared the lines of code to the other two apps. In Apple’s completed project, we counted 334 lines of Swift. VGV’s project contained 450 lines of Dart. Our project contained 163 lines of code: 80 lines of Illicit for the views and 83 lines of JavaScript for the web server. In other words, we wrote a functional network-based app using 51% less code than Apple’s standalone app and 63% less than VGV’s.

The Apple, VGV, and Everplace lines of code.

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.

A video showing the user experience of the Landmarks app written in Illicit.

--

--

--

Everplace is a company of software developers whose motto is “there’s always a better way.” We believe in simplicity, quality, and continuous improvement.

Recommended from Medium

JIRA Sips #1 — Managing & Granting User Permissions for the IT Project

Intro to Blogging & Terraform Security Project

Top Web Development Trends in 2020

TryHackMe — Wgel CTF writeup

Deploy multi node k8s cluster with KIND in 15mins

Process changes in Partnership Management and Vesting Schedule

Using PKCS#12 formatted certificates in Python

7 Fullstack Projects You Need to Make in 2021

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
Daniel Mork

Daniel Mork

Developer and co-owner at Everplace. I love learning about new things and I love building new things.

More from Medium

Low Code Development Platforms for Next iOS App — Flutter vs Swift

Let’s Flutter

Build Adaptive iOS Applications Using Flutter

How to Release Flutter Application for iOS