Firebase is a mobile and web application development platform. It allows users to easily prototype and scale their applications without having to worry about individual backend services. Backed by Google, Firebase is trusted by millions of businesses to abstract away backend infrastructure so users can focus on the core aspects of their day-to-day business.
Having an accessible blog is important to Firebase so that users can stay up-to-date with the latest news and announcements. Astro was able to help Firebase rebuild their blog for 71% performance increase and a decrease in publishing time from hours to minutes.
Challenges
Firebase’s team of 10 developers used to host their blog on Blogger. With this CMS, they had to first write a blog post in Google Docs and then convert the draft to a Blogger document. Even a short blog post could easily result in an hour of work before publishing.
The editing experience in Blogger was also problematic:
- Images and other interactive components required developers to handcraft the HTML.
- Blogger did not have profile images. You had to insert HTML and CSS to represent a profile image directly into the blog post.
- At times, you could not fix something even if you knew what was wrong! For example, accessibility improvements were hard to control in Blogger. This resulted in a sub-par experience for users.
Requirements
According to David East, lead engineer on the blog team at Firebase, Firebase required a tool with a modern developer experience. They wanted to maintain a more performant blog and publish blogs faster with less friction on a collaborative developer team of 10.
Solution and Implementation
With Astro, new team members are able to get set up within 30 minutes thanks to the docs.
Docs were phenomenal. What I do think was super helpful is that Astro does a very good job of being very strong on convention. So when you’re trying to use it for the job it’s meant for, it’s just painfully clear what you’re doing. You’re never worried the chair will be pulled out from underneath you. You can always develop on these assumptions.
The Firebase developers were also able to achieve complex and accessible animations with Astro - a feat they could not have done with Blogger due to its limited templating. As an example, the team wanted to create the slice animation that’s on the Firebase blog homepage. However, this slice animation is extremely difficult to create on the web today. Instead, you have to take identical pieces of content on top of each other and remove certain sections on animation, like a curtain. Screen readers will try to read and tab through hidden content which is confusing for users. Firebase was able to build this animation accessibly due to Astro’s flexibility.
The parts of the migration related to Astro went quickly. They saw improvements just by being able to take their Google Doc content, converting it to Markdown using a plugin, and then pasting it into an Astro document. Most of the project time was actually spent on perfecting the design of the blog along with building the proof-of-concept itself.
Results
By switching from Blogger to Astro, the time needed to publish a standard blog post went from hours to minutes. It also used to take them 6 minutes to generate a full site with GitHub Actions. Now, build time with GitHub Actions averages 1.5 minutes, an overall build time reduction of 75%.
