Gatsby vs Webflow: what to choose in 2021?
The modern world is developing rapidly, and new web technologies appear every day. Today, you can create a SaaS app, static page, or online store in a dozen different ways. Building a site on Webflow, as well as development on the Gatsby stack, has become widespread. Which one should you choose? After reading this article, you will get closer to the answer to this question.
Modern ways of creating websites: WordPress, builders, no-code (Webflow), Jamstack, Gatsby development
WordPress
More than half of modern web applications are built on WordPress, and for good reason. Essentially, WordPress is a trade-off between power and usability. If your project is very simple, then you can build it yourself using one of the many templates. However, developing a more complex product will require expertise in PHP and web programming in general. A little bit more on WordPress here.
Builders
These tools have gained immense popularity. The latest generation of builders (Weebly, Wix, etc.) are products aimed primarily at mobile devices. They take over the creation of the basic elements of a web application and are optimized for touchscreen development. Builders, of course, cope with the task of creating a website, but the result is usually not too extensible, usually ugly and, of course, tied to a specific builder. And by today's standards, such basic functions as collecting responses to a form, often require the integration of third-party solutions, which complicates the whole process. Here's a short overview of these tools.
No code: Webflow
This is also a builder, but with ample opportunities. Webflow has allowed designers to gain more independence from developers (marketers should love that too). Webflow is a visual editor that generates code that can be exported. Webflow also offers user-friendly CMS and server-side functionality like hosting and CDN (content delivery network that makes the site load faster), making Webflow a versatile website builder that anyone can use after some training. This builder is a good solution for digital agencies.
Webflow is a trade-off between usability and features. The trade-off is that Webflow can't build, say, a complex eShop. It's better to use a specialized tool like Shopify for this. But on the other hand, Webflow is as convenient as simple builders, while being able to solve many problems.
Gatsby: a stack development
Gatsby is an open-source framework that integrates the React, GraphQL and Webpack technology stack into a single tool for building static websites and applications. With the high performance of the sites that run on it, an impressive set of features such as code splitting, and concern for developer convenience, Gatsby is becoming an essential tool for modern web development.
Jamstack
Interestingly, the "-stack" part of the name is pretty deceiving. The Jamstack is not a technology stack, but rather a collection of development approaches.
Just like designers are tired of going to web developers to bring their ideas to life, web developers are tired of mundane back-end tasks. They figured out their way to create end-to-end applications based on the languages they already knew (HTML, CSS, JavaScript + all kinds of frameworks) and gave up the tedious work of setting up the server and database configuration - this is called "headless". Indeed, why write, say, a custom search module when Algolia has a great API that you can plug into your site without too much hassle? Looking for e-commerce? Don't waste time and nerves creating your own payment-related user flows - use Stripe and forget about problems!
Jamstack's features
Page speed and SEO
Static sites work almost lightning fast because the content is not stored on a remote server, but in a certain place called the "Edge Network". When a site is running this fast, Google's SEO algorithms can push it ahead of the competition in search. A CDN is all you need to connect to Edge. It is extremely cheap and easy to set up. We have an article on SEO and Jamstack.
Security
It turns out that a nice side benefit of storing static files on the Edge Network is that they are not easy to hack. In addition, SSL is supported for free on all popular hosting platforms.
Deployment speed and version control
In the Jamstack, the only source of truth is git. Deploy and versioning are the same when editing content and during development. If you are a developer, deployment is done with a single command, whereas before, entire companies only dealt with CI / CD functionality.
Flexibility
By definition, Jamstack is an anti-monolithic system. This is a modular approach in which the API can be switched quickly enough if a better solution comes along. This makes it the most promising development approach to date and increases competition in its ecosystem.
The Jamstack approach is very powerful and very easy to use for developers. Its flexibility is overwhelming - there are many options.
Convenience for content editors
Jamstack doesn't forget about non-technical users either. For them to be able to edit the content, you can connect a "headless" CMS. This is where the fun begins: whatever you write can be streamed anywhere as structured data. On Twitter, if you like.
Complexity and richness of choice
The Jamstack has an amazing selection of tools. In total, you need three components to create an application using this approach: the static site generator, the CMS, and the deployment tools. Within each category, there are dozens, if not hundreds, of options.
To make it easier for you, companies like Stackbit offer a few steps process to deploy a Jamstack site within minutes. The choice comes down to 5-6 options in each category, so you can easily choose the best tools for your purposes. Stackbit, of course, alleviates some of the choice problems and speeds up deployment, but it is still in its early stages of development. If you want to use Jamstack to develop a large complex application, then be prepared to spend quite a lot of time. For example, Smashing Magazine took a year to switch from WordPress to Jamstack.
Last but not least, the Jamstack is powerful, but to unleash its power, you need to hire an experienced development team. And Jamstack developers often prefer Gatsby.
Gatsby vs Webflow: pros and cons of both
Let's take a look at Gatsby and Webflow as the most relevant tools in their niches.
Can these tools be opposed? Let's not look so narrowly. Rather, we need to compare creating websites with builders versus developing using a specific stack. Based on this, let's make a small overview of both.
Gatsby
Gatsby makes it possible to create lightning-fast websites due to the lack of server-side rendering; generation is static, and HTML pages are generated at build time and cached by the CDN. Gatsby is considered a very fast front-end technology for the modern web and provides a wide range of branding and design options.
Gatsby leverages all the features of React and uses the latest technologies to build websites such as GraphQL, React.js, ES6, Webpack, and CSS. It can also be used to create progressive web applications.
If you don't know this technology stack well, the right decision is to hire a ReactJS development team to achieve your goals quickly and efficiently.
Most of our projects are created using Gatsby. This tool is versatile: static sites, dynamic applications, blogs, online stores, and other types of projects - all this can be done with Gatsby.
Webflow
As for Webflow, it sits somewhere in the middle between traditional and modern approaches to development. Although it is a website builder, it has features usually found in WordPress and similar tools.
For this reason, Webflow is often used by web designers. It's perfect for users who don't want to mess with code but need a fully customizable platform.
Webflow also offers a user-friendly CMS. It allows you to modify content on a website without digging into the underlying code. Later, you can dynamically add new content without actually changing your website.
In addition, the code generated by Webflow is suitable for handing over to the development team on the client side. This greatly speeds up the deployment of the finished product.
We must say that the possibilities of Webflow are still limited. Building dynamic applications with this builder is difficult, although some Webflow paid plans allow you to export the generated code, which can then be integrated with the backend.
The disadvantage of Webflow is the cost (it starts at $36 for a business plan, which is a lot by the standards of builders). But such is the price for a clean, exportable code, a good selection of neat templates, and ample opportunities.
We use Webflow most often for small projects that do not require a lot of custom code. It is the speed of development that is the main advantage of Webflow. Development time in some cases does not exceed several days.
What's the bottom line? Which tool should your company choose?
It depends on the goals and needs of your project. Someone will need a simple page built on Webflow or Wix. In other cases, you will need to use the entire Gatsby technology stack. To more accurately determine which site you need, first, answer three important questions:
- Who will edit the content? How tech-savvy are they? Non-technical users will need a CMS like the one offered by Webflow. Headless CMS is also quite user friendly. And, to be honest, WordPress is quite user-friendly, and you can also use its headless version.
- How difficult is it to add new features and scale the site as content expands and business needs change? If changes are to be made frequently, then take a Jamstack approach, hire a good development team familiar with how to set up SSG and headless CMS.
- How important is page load speed to you? Probably speed is important for everyone these days. Jamstack approach using Gatsby or another SSG is your choice in 2021.
By answering these questions, you will come to an understanding of what kind of site you need. But whatever you choose, remember that we can always help to realize your ideas!