Creating a Realtime Reactive App for a Collaborative Domain

Bazaarvoice runs a 2 day hackathon twice a year. Employees are free to use this time to explore any technologies or ideas they are interested in. From our hackathon events Bazaarvoice has developed significant new features and products like our advertising platform and our personalization capabilities. For the Bazaarvoice 2017.2 hackathon, the Belfast team demonstrated a solution to this collaborative domain problem using near real-time state synchronisation.

To solve this we decided to use Google’s Firebase platform. This solution provided many features that work seamlessly together, such as OAuth authentication, CDN hosting and Realtime DB. One important thing to note about Firebase, it’s a backend as a service, there was no backend code in this project.

Hackathon Goals
1. Realtime configurable UI
2. Realtime campaign administration and participation
3. Live Demo to the whole company for both of the above.

Realtime configurable UI
During the hackathon demo we demonstrated updating the app’s style and content via the administration portal, this would allow clients to style the app to suite their branding. These updates were pushed in real time to 50+ client devices from Belfast to Austin (4,608 miles away).

The code to achieve this state synchronisation across clients was deceptively easy!

Given the nature of react, once a style config update was received, every device just ‘reacted’.

Realtime campaign administration and participation
In the demo, we added 40 products to the live campaign. This pushed 40 products to the admin screen and to the 50+ mobile app. Participants were then instructed to claim items.

Admin view

Member view

All members were authenticated via OAuth providers (Facebook, Github or Gmail).

To my surprise the live demo went without a hitch. I’m pleased to add…. my team won the hackathon for the ‘Technical’ category.

Conclusion
Firebase was a pleasure to work with, everything worked as expected and it performed brilliantly in the live demo….even on their free tier. The patterns used in Firebase are a little unconventional for the more orthodox engineers, but if your objective is rapid development, Firebase is unparalleled by any other platform. Firebase Realtime Database produced a great UX for running Sampling campaigns. While Firebase will not be used in the production product, it provided great context for discussions on the benefits and possibilities of realtime data synchronisation.

Some years ago, I would have maintained that web development was the wild west of software engineering; solutions were being developed without discipline and were lacking a solid framework to build on. It just didn’t seem to have any of the characteristics I would associate with good engineering practices. Fast forward to today, we now have a wealth of tools, libraries and techniques that make web development feel sane.

In recent years front-end developers have embraced concepts like unidirectional dataflows, immutability, pure functions (no hidden side-effects), asynchronous coding and concurrency over threading. Im curious to see if these same concepts gain popularity in backend development as Node.js continues to grow as backend language.

This entry was posted in Culture, Developer Portal, Software Architecture, UX on February 6, 2018 by Ady Young.

Related posts:

In a webinar moderated by Antoinette Weibel and Otti Vogt, Alejo Sison was featured. Alejo was born in the Philippines. At minute 7, Alejo explained his purpose in life: He wants to not only serve…

Sudah hampir 2 bulan kita menjalani WFH alias kerja dari rumah karena adanya pandemi Covid-19 yang sedang melanda dunia. Yang harus kita pahami maksud dari WFH yaitu agar perusahaan tempat kita…

Google Maps reviews can be very useful when you’re looking for new restaurants, hotels, movies, or pretty much anything. The reviews, but, offer more than just star ratings and summaries written by…