Posted by David DeRemer (from Posse)
Whether it's opening night for a Broadway musical or launch day for your app,
both are thrilling times for everyone involved. Our agency, Posse , collaborated with Hamilton to design,
build, and launch the official Hamilton app... in only three short months.
We decided to use Firebase , Google's
mobile development platform, for our backend and infrastructure, while we used
Flutter , a new UI toolkit for iOS and Android,
for our front-end. In this post, we share how we did it.
The Cloud Where It Happens
We love to spend time designing beautiful UIs, testing new interactions, and
iterating with clients, and we don't want to be distracted by setting up and
maintaining servers. To stay focused on the app and our users, we implemented a
full serverless architecture and made heavy use of Firebase.
A key feature of the app is the ticket lottery , which offers fans a
chance to get tickets to the constantly sold-out Hamilton show. We used Cloud
Functions for Firebase, and a data flow architecture we learned
about at Google I/O , to coordinate the lottery workflow between the mobile
app, custom business logic, and partner services.
For example, when someone enters the lottery, the app first writes data to
specific nodes in Realtime Database and the database's security rules help to
ensure that the data is valid. The write triggers a Cloud Function,
which runs business logic and stores its result to a new node in the Realtime
Database. The newly written result data is then pushed automatically to the app.
What'd I miss?
Because of Hamilton's intense fan following, we wanted to make sure that app
users could get news the instant it was published. So we built a custom,
web-based Content Management System (CMS) for the Hamilton team that used
Firebase Realtime Database to store and retrieve data. The Realtime Database
eliminated the need for a "pull to refresh" feature of the app. When new content
is published via the CMS, the update is stored in Firebase Realtime Database and
every app user automatically sees the update. No refresh, reload, or
pull required!
Cloud Functions Left Us Satisfied
Besides powering our lottery integration, Cloud Functions was also extremely
valuable in the creation of user profiles, sending push notifications, and our
#HamCam — a custom Hamilton selfie and photo-taking experience. Cloud Functions
resized the images, saved them in Cloud Storage, and then updated the database.
By taking care of the infrastructure work of storing and managing the photos,
Firebase freed us up to focus on making the camera fun and full of Hamilton
style.
Developing UI? Don't Wait For It.
With only three months to design and deliver the app, we knew we needed to
iterate quickly on the UX and UI. Flutter's hot reload development
cycle meant we could make a change in our UI code and, in about a second, see
the change reflected on our simulators and phones. No rebuilding, recompiling,
or multi-second pauses required! Even the state of the app was preserved between
hot reloads, making it very fast for us to iterate on the UI with our designers.
We used Flutter's reactive UI framework to implement Hamilton's iconic brand
with custom UI elements. Flutter's "everything is a widget" approach made it
easy for us to compose custom UIs from a rich set of building blocks provided by
the framework. And, because Flutter runs on both iOS and Android, we were able
to spend our time creating beautiful designs instead of porting the UI.
The FlutterFire
project helped us access Firebase Analytics, Firebase Authentication, and
Realtime Database from the app code. And because Flutter is open source, and
easy to extend, we even built a custom router library that helped us
organize the app's UI code.
What comes next?
We enjoyed building the Hamilton app (find it on the Play
Store or the App
Store ) in a way that allowed us to focus on our users and experiment with
new app ideas and experiences. And based on our experience, we'd happily
recommend serverless architectures with Firebase and customized UI designs with
Flutter as powerful ways for you to save time building your app.
For us, we already have plans how to continue and develop Hamilton app in new
ways, and can't wait to release those soon!
If you want to learn more about Firebase or Flutter, we recommend the Firebase docs , the Firebase channel on YouTube ,
and the Flutter website .
