From shopping to investing to banking, the global economy is steadily evolving towards a digital ecosystem. Back in 2019 Facebook decided to launch their own entry in the booming digital currency revolution with the introduction of Libra. As the project evolved, however, Libra became more than just a digital currency. Now rebranded as Diem, the Facebook-led global payment system is expected to launch in mid-February 2021.
Facebook needed to build an information onramp for Diem. Not just a front door to the brand, but also a gateway to member and developer portals. They turned to Boulder, Colorado-based Dfuzr Industries to create Diem.com — and Dfuzr turned to Gatsby.
“A little bit ahead of its time”
Libra was introduced to the world in June 2019 with a website built using Gatsby and headless WordPress. Dfuzr Technologies inherited this original implementation when they stepped in to build a new site specifically for Diem. The stack, says Dfuzr CEO Jason Williams, was “probably a little bit ahead of its time” — especially for an enterprise site. “At that time it was nascent technology, a very novel approach, and they had to come up with a lot of workarounds,” Jason recalls. “It was very, very much a one-off kind of custom thing.” The team needed to make the new site more maintainable and scalable, but they definitely wanted to keep Gatsby. “We saw the virtue of using Gatsby — we’re all React developers, and Gatsby just seemed to fit the bill. Plus we recognized that things had matured in the meantime.”
They also inherited the mandate to continue using WordPress — this time, the WordPress VIP enterprise hosting environment. “Facebook has a lot of properties on VIP, and they have very specific requirements around scalability, security, supportability, so many different things. Virtually every line of code, even third party libraries that go up into WordPress VIP, is reviewed. They go through every single line, and you have to adjust it to their standards,” says Jason. This high level of scrutiny meant that Dfuzr’s developers had to minimize code reviews in order to keep the project moving.
Nine different languages and endless code reviews
The original Libra site that the team inherited was hard-coded, so that every page created for presentation through the Gatsby frontend had to be created in WordPress, using PHP, first. “They used something called Field Manager. So instead of ACF (Advanced Custom Fields, a popular WordPress plugin that allows developers to add extra content fields in the WordPress editor UI), they would define every field that is possible on a page. And it has hard-coded for every page. And then you would need to map it in the front end somehow. And obviously, that’s not very scalable if I have a lot of content changes, so now I wouldn’t change pages if I could at all help it,” says Henrik Wirth, Dfuzr’s tech lead on the Diem project.
“Every time we needed to make a change, it was a code level change that had to go through all those code reviews,” adds Jason. “So you literally couldn’t have contributors update content. The website is published in nine languages and every time you wanted to make a change, you had to do it across all nine by hand! That didn’t seem very WordPressy.”
“For the Diem rebuild, we were looking at this big launch and scaling and extending a global website. Contributors should be able to update without a code change. We should be able to disperse changes through the nine languages easily and we needed to minimize the review process with the host providers.”
The Dfuzr team appreciated the possibilities presented by Gatsby’s new gatsby-source-wordpress WordPress integration. By installing the plugin, and adding WPGraphQL enabled endpoints, WordPress content became accessible in Gatsby’s data layer and available to use in React templates. “When Gatsby-source- experimental (the beta version of the integration) came out, that really changed the game. It made the whole development experience way better and nice, and rolled best practices into an open source plugin,” says Henrik.
Creative velocity: unlocked
So what did building the new Diem site look like now, using Gatsby with WordPress? For starters, the team used the Flexible Content Fields feature of ACF to give content editors control of components on the front-end of the site. This setup unlocked creative velocity for the entire team.
“Now I just build sections that I can reuse. And if you have schema prepared for flexible field layouts, then you can have components map so quickly too,” says Henrik. “This is just great to have as a developer, because you can make so many more changes so much faster.”
“You can really add up the front end super quickly. You can separate concerns way better. That was the biggest gain in this whole process.”
A sturdy stack
The Diem site is more than a marketing website. It also serves an informational onramp to a host of member services. Another reason the team stuck with Gatsby and WordPress, Jason says, is that it is easy to leverage the architecture to build out additional site functionality, like a member portal and a developer portal. “Diem is led by Facebook, but the governing body of Diem.com is the Diem Association,” explains Jason. “There are around 30 association members, big companies like Uber, Lyft, et cetera, who are helping to push the project forward, and Diem.com’s member portal is how we manage communications among all these partner companies.”
“There are also sub pages they will eventually transfer to the stack we build, that’s why it was so important to have that reusability factor,” adds Henrik.
The team chose Okta for authentication and single sign-on across the half-dozen applications united behind the Diem site. “Dfuzr helps big tech companies package or productize their technology and then bring it to market and build community around it. These apps that we build out are being ported to this architecture. One of the apps we built is to manage VASPs, which are value added solution providers, people who participate in the network like coin miners and node operators. Then we manage processes out there and that’s all done in React with backend services by Novi, which is a Facebook team. So we are implementing single sign on through all of these paths: all the way through GitHub, this VASP tool, the member portal, Diem.com,” explains Jason Williams.
There is also a developer portal based on Docusaurus, which handles all the Diem documentation, demos, tutorials, and SDKs. Docusaurus is an open source tool from Facebook — and incorporating the platform was another requirement for the Diem site build.
Ultimately, Jason explains, Diem.com is the front door for all these related features, apps and services. And Gatsby plays a crucial part in orchestrating it all.
“Gatsby’s value there is basically with being data agnostic and you can have as many different data sources as you want or need and you can mix and match, they don’t have to all be the same,” Jason continues. “We will definitely be leveraging the architecture for applications in the future, as the Diem project continues to evolve and expand.”
As a matter of fact, the team appreciates the Gatsby + headless WordPress combo so much they recently rebuilt their own site, Dfuzr.com, with it.
Great Gatsby support
“Leaping all the security audit hurdles coming from WordPress VIP, and also from Facebook, means shepherding every plugin through the full review process,” Henrik says. The Dfuzr team collaborated closely with Gatsby engineers to make sure that any plugins would pass WordPress VIP standards.
“We actually ended up contributing most of these standardized plugins to the gatsby-source-wordpress repository, once we got them passed,“ says Josh Williams, Dfuzr’s Executive Director of Technology. “We worked a lot with Jason Bahl (creator of WPGraphQL and, at the time, a Gatsby staff engineer) to align on the VIP coding standards because not just the Gatsby-WordPress source plugin but also every other plugin that hooks into it, including every WPGraphQL plugin, all need to pass, too.” (WPGraphQL is the free, open-source WordPress plugin that provides an extendable GraphQL schema and API enabling WordPress to be decoupled and used as a headless CMS with a separate frontend, like Gatsby).
“For me as a business owner, being able to find resources and connect with experts at Gatsby immediately, that was perfect,” says Jason. “That’s a great story for me to bring to my client: Hey, we’re connected with the people who write the software and we get the best of the best.”
Ready to go headless with WordPress? Register for GatsbyConf — two days of speakers, workshops, and some really cool launches and announcements. And don’t miss special event Gamer vs. Gatsby. Watch live as David Livingston, a.k.a. Kosmic, tries to beat his world record Super Mario Bros speed run time of 4:55 while Gatsby engineer Kyle Gill races to spin up and deploy a live site! Thrills! Chills! Free and virtual, March 2-3, see you there!