Better web development with Jamstack
We're obsessed about JAMstack. Why? Since we're able to deliver our client projects faster than ever with the JAMstack. Based on our previous project data we have recorded an average of 50% decrease in time to market with our projects.
This is great news for our clients since being able to develop websites and apps in half the time it normally takes our clients can deliver their services and products much faster. In the modern fast phased and competitive world getting on the market fast is crucial for your business to succeed.
Below we elaborate on some of the factors why we are able to deliver our projects 50% faster with JAMstack.
1. Data and code splitting.
One of the biggest problems when working with legacy web frameworks like Wordpress was that the code and data were never split. Wordpress ships with an integrated database which makes the whole framework a monolithic mess. Development environments were never in sync with production databases which made it really hard and time consuming to develop with real data that was input by external content managers.
With Wordpress development environments are never in sync with production databases.
With JAMstack we can cut the code from the data. We use one source for the data and we don't have to manage multiple databases or constantly clone production databases to development etc. In practice this means that the data is always the same in development, staging and production environments.
In fact we don't even have set up a staging environments with the Jamstack since the local development environment is exactly the same as the production environment.
Why splitting code from the data is useful:
Easier management of multiple environments
Minimal data configuration after initial config
Reduces redundant work and bloat
Less time spent on multi-environment management
2. If it works in development it works in production
As stated previously, we don't have set up a staging environments for our JAMstack web projects when they are in development. This really cuts the time when developing client websites and apps since we can just set the project up locally, push to a remote git repository and deploy on a CDN. Basically we just have to make sure our projects build locally, which means they will build on production. Local and production are almost 100% similar.
With JAMstack you only need to set up the local development environment, push to a remote git repository and deploy on a CDN. Thats it.
Previously with Wordpress we had to set up the local development environment with a LAMP stack or with tools like Trellis to set up a virtual container to contain all the required dependencies for Wordpress. Then we had to provision the staging and production servers with the same LAMP stack. Each time we also had to keep the databases and Advanced Custom Fields in sync to develop with real data, which is sometimes necessary to see the full picture.
To put it short, setting up and maintaining up to date environments with legacy technologies and Wordpress is a lot of unnecessary work. With Jamstack we can cut out most of the boilerplate and redundant work. We only need to set up 1 environment and when deploying we only need to change the configuration files a tiny bit. This obviously saves a lot of time when we want to deliver our projects fast.
Why is it helpful to have only one environment to configure?
Configure once, deploy anywhere
Less time setting up development environments since we're using fewer items in the tech stack
Cutting out unnecessary parts of our development processes
The development environment is overall easier to maintain and install than with legacy
3. React and Gatsby
For example, when we need to build a Contact form for a website, we can build the Contact form component and use it everywhere we need on the site and just write the code once. This can be done with Wordpress themes as well (although only with tools like Bedrock and Sage with Laravel Blade syntax support) but its really more like a hack than a real component based architecture.
Legacy component syntax lacks some of the essential design paradigms that make component based architectures powerful. React is a more modern approach to building front end web applications in a smart way.
What truly allows us to speed up our development processes is Gatsby JS. Gatsby is an open source static site generator built on React. Gatsby allows us to to make a 100% static website, crawlable by Google and indexable by search engines but with the full power of React. Basically we can make full blown React applications that are actually static websites. Technically one would call these kind of sites and applications Progressive Web Apps.
The reason we can utilize these tools is such an efficient manner is simple. Modern tools made by developers for developers are essentially better to work with. Wordpress was never made by computer scientists and it was never meant to act as a huge website platform.
React and Gatsby are specifically made for developers by highly skilled computer scientists. This is the way we work the best as we like to work only with tools that are also comfortable for our developers.
React and Gatsby are tools made by professional developers, for professional developers
Why do React and Gatsby help us deliver websites faster?
We only use one scripting/programming language
React for modern component based development and state, props etc.
Gatsby for generating static SEO friendly sites that utlize the full power of React
Modern tools made by professional developers for professional developers are efficient to use.
4. Workflow with Jamstack
Working with Jamstack allows a different approach to developing websites and applications. With Wordpress we're tied to a very limited pool of options when choosing a specific service or a plugin for a certain task. Most of the times with legacy technologies you have to rely on community market plugins which sometimes work and sometimes not.
Anyone who has ever worked with Wordpress knows that these plugins are a nightmare to maintain and use. Even more for developers who want to have their hands deep in code, not Wordpress Admin interface.
By utilizing modern technologies we are able to improve our workflow and cut out the unncessary.
With JAMstack and Gatsby, we have our hands on code 100%. We don't have to use graphical user interfaces to access the functions we need to develop or use. Everything we need is there and available.
The workflow overall is a modern approach to web development which allows us to cut unnecessary processes and reduce the amount of work we do on "stupid" stuff. Yes, I'm using the word "stupid". With legacy technologies you're almost certainly wasting 25% of your development time on stupid stuff like resolving problems with plugins, the development environment and servers or bad dependencies.
How we make our workflow lean:
We cut out unnecessary processes
Increased flexibility with integrated services with Jamstack
Hands on code 100%
We don't use unnecessary dependencies
Less time spent on "stupid" stuff (bug fixes related to bad dependencies etc.)
At the end of the day we use a mixture of modern technologies combined with modern methods of working. We try to minimize unnecessary work by using technologies that are proven to be modern and effective. We're also constantly improving our processes by doing retrospective inspections and are not afraid to change something if it's not working out.
I personally think what allows us to deliver so quickly, is the fact that we "cut out the crap" as Steve Jobs once said. We really hate to use anything more thats necessary. If something seems like a bad option for efficiency and we foresee it could cause us or our clients trouble in the long run, we simply look for other options. If none are available we make our own.
Less is more as they say!