How we’re using Gatsby to make our website zing

Over the past few months our development team has been transforming the LendInvest site into its most dynamic, functional and fast version to date. They’ve accomplished this feat, in part, by employing Gatsby, a very flexible, secure and efficient frontend framework that’s gaining increased adoption across the internet.

Gatsby is an open source frontend page generator that builds static pages. It fetches data at build time from anywhere—markdown files, databases, CSV files, and common content management systems like WordPress.

Once deployed, the static nature of the pages mean users will experience instant access to pre-built web pages. WordPress, by contrast, generates pages on the fly on the server with PHP, requiring time to make database queries and fetch page data. And those queries can also fail.

Gatsby, upon loading a static page, is also able to transform our website to function as a React web application (using processes known as “hydration”). This allows us to add dynamism to our otherwise static pages, and greater potential to deliver an app-like experience to our users.

Why we decided to switch from WordPress to Gatsby

Our primary reason for the move is to align our website with all our other React-based projects. This enables the website to take advantage of our pattern library, (a collection of modular parts used across other frontend projects for a uniform design experience). And it opens up development of our front-end to a greater pool of developers, who don’t necessarily have WP experience but are competent React developers. And it potentially allows Back End PHP developers to take over the WP development duties.

Having a shared set of components and tools allows greater collaboration between projects and teams. It also means little changes have a big impact. 

“Building components in this way forces us to carefully consider the decisions we make as designers,” says Sära Furlong, Head of Design. “Each individual decision has an immediate impact on other teams and products in the business and requires constant conversation. The result, though, is better alignment between teams and team members, better thought-out design, and more robust solutions that benefit the whole business.”

How Gatsby creates better user experience for investors and borrowers

• Gatsby allows us to keep individual data off the server and safe within our secured network
• Gatsby gives our site a consistent look, making navigation easier and more intuitive
• Webpages now load at blindingly quick speeds
• Gatsby opens up greater possibilities for user experience. It has the potential of anticipating user needs by referencing and incorporating individual user data into the experience

Additional benefits to the LendInvest team of switching to Gatsby

• Because Gatsby processes data locally at build time, user data is far more secure than if it was stored on a database in the cloud
• Gatsby gives our website a greater range of functionality, because it matches the frontend environments of other LendInvest projects
• Gatsby optimises SEO and other key performance metrics by default, allowing us to assess the site’s effectiveness and iterate changes
• Being open source is not just a cost benefit; there is a huge dedicated Gatsby dev community, plus plenty of outside support and documentation
• Gatsby’s tools are simple and robust, and its design is modern and clean. This offers a more consistent design/user/developer experience.

Prior to Gatsby, we relied heavily on WordPress to support both our frontend and backend interface. But the freedom afforded us by the tools for building in WordPress resulted in inconsistent design (color choices, spacing, etc.) on the frontend and a codebase that didn’t match up with our JavaScript applications. Gatsby was the ideal solution for allowing the static pages of our web site to function with the same technology (React) used for all our applications.

But Gatsby is a bit more than just a simple static site generator. “The term ‘static site generator’ has been around for a while,” says LendInvest Frontend and CMS expert Oliver Wieland, “Gatsby is far more like a modern front-end framework than a static site generator of old.” 

Among its most useful features, according to Oliver, are code splitting, intelligent image loading, asset optimisation and incredibly fast page loads. “I didn’t believe the speed until I tried it myself.”

Ultimately, Gatsby is about great user experience

Prior to Gatsby, we relied on WordPress to support both our frontend and backend interface. But the freedom afforded us by the tools for building in WordPress resulted in inconsistent design on the front-end and a codebase that didn’t match up with our JavaScript applications. Gatsby was the ideal solution for allowing the static pages of our web site to function with the same technology used for all our applications.

But Gatsby is more than just a simple static site generator. As Oliver says, “Static site generators have been around for a while – Gatsby is far more of a modern front-end framework.”

For the majority of our customers, the LendInvest website is where most if not all their interaction with us takes place. That’s why we’re continually engineering our website to greet and serve investors and developers in the most pleasing, fast and efficient way possible.