Case Study: Rearchitecting GiftSift
GiftSift is a website which allows friends and families to share gift lists for specific events to make sure everyone knows what to buy for everyone and more importantly to help prevent anyone from buying the same gift twice.
The brief to resign the site was three-fold:
- Bring the platform onto a managed infrastructure
- Ensure the site is secure
- Give the site a more modern look and feel, making it responsive and as “app-like” as possible
Infrastructure
The site has had a number of revisions over the years, starting with Java JSP hosted on dedicated hardware with a MySQL database, through various incarnations of Node.js hosted on Heroku with a MongoDB backend (the first version was written in Express as a fairly monolithic application and later rewritten in Koa with a more microservice architecture. Authentication was originally custom, but for several years has used Auth0
This time, we wanted to move to a simpler architecture and chose Google’s Firebase, principally to get a single platform for the database, hosting and authentication.
Database
The data architecture of the site does not require a relational database and the previous versions have showed a schema-less architecture has worked well. Firestore suits the data architecture well, particularly the ability to have nested collections within documents, which allowed us to quickly iterate over various data structures before arriving at one that suited the application but was very secure.
Hosting
We did look at running the site on Netlify, an excellent platform for hosting sites, with great authentication and managed serverless functions, but Firebase Hosting worked well and was a more natural hosting service when using the other Firebase services.
Deployment is fast and flexible, on a par with Heroku and Netlify.
Authentication
Authentication should be the foundation for any website or app. Since we had decided to move to a front-end frame work, which meant traditional security was going to be harder — the user is talking directly to services without a usual back-end service handling security.
Firebase authentication allowed us to move to 100% social logins, eliminating the need for storing passwords within our platform. Allowing Google logins was very easy to implement, but we feel that the whole Firebase auth is less powerful and less flexible than Auth0’s platform.
Security
Understanding the Firestore rules was a learning curve, but allowed us to let Firebase manage the fine-grained security of the data, while we could focus on making the application work with the rules. In some ways the security model defined the data model which defined the functionality of the site, but on balance we think that this led to good practices and by being flexible, made the site more usable.
Front-end architecture
For all of its lifetime, GiftSift has been a server rendered application and we wanted to use more modern practices with the new site.
Front-end framework
We decided to use Vue for the presentation layer over some of it’s similar alternatives, mostly because it seemed like the shallowest learning curve. We used vue-router and vuex for routing and state management.
Using Firestore allowed us to use the Google client APIs directly without the need for writing our own microservices, although we do use Firebase functions for some behind the scenes server side functionality.
CSS
For CSS we chose a new framework, Halfmoon, because it has a lot of well, thought out functionality (including dark mode!) without being too invasive as frameworks like Bootstrap or Vuetify can be. We did look very closely at Tailwind and appreciate the benefits, but preferred something a bit more opinionated to speed up development. Halfmoon allows us to have a fully responsive site which looks good with a minimum of customisation.
PWA
Importantly, the requirement for the site was to be a progressive web app (PWA) which allows the site to look as native as possible, including being installed on mobile desktops. Vue makes this very easy and adding a service worker allows the site to be used offline.
Conclusion
Overall, the new version of GiftSift was the fastest to build and has a much more reliable, scalable and manageable architecture compared to previous versions. This is primarily down to using Google Firebase as the back-end, but using Vue and Halfmoon have made front-end development much quicker too.
