Moving Faster With The Right Tools In 2020
Why tool choice matters more than ever when it comes to delivering great results quickly.
Introduction
Web sites and applications have evolved dramatically. The process and tools have changed fundamentally and as a result, web developers have gotten much faster at handling the complexities of delivering a new website or application. When facing challenges that are relatively common, you should reach for evolved tools to speed up and improve the outcome.
So you want to build a website, or static web application...
If you’re in business, having your own web presence is vitally important to you. You have an audience (or you want to build one). Maybe you have a product or service, and you need a platform for sharing information about it. You want to drive traffic and capture people’s attention. When it comes down to it, you have something to offer, and you need to get it out there on the internet where people can learn about it.
What about the future?
When thinking about the details of your website or application, you can imagine which pages and features it will have. You can have a UI / UX design team create stunning world-class designs for each feature. You can plan very thoroughly before you start building. But, no matter how much effort goes into the plan, there will always be changes.
Your team might get bigger...
Building a website or application as an individual contributor means you can pretty much get away with no advanced tooling. You have infinite freedom to manually build and create as you need. You can start with the native languages of the web: HTML, CSS, and JavaScript. Any changes to the site can probably be handled by you or another team member.
As businesses scale up in size or scope, the simple tools start to lose their luster. In a growing company or an established brand, the changes to your website come in very quickly. If you don’t enable others to help or build a team to handle these changes as they are needed, you will definitely become backed up with requests that you’ll be unable to fulfill.
The helpers are not helping!
As you can imagine, having many others making changes to your website will cause mayhem. Even if you’re using a CMS to help manage the mayhem, it’s still complicated and full of nuance. Sometimes when someone enters new text into a field, the text could wrap in an odd way. If they change an image, it’s easy for that new image to look out of place due to cropping or size rules defined in the design the helper wasn’t aware of. No matter how good the helpers are, if you’re not careful, unintended changes will end up out there on the internet in front of your valuable audience.
Evolved Solutions
This issue of scale is a classic problem. It has led to the creation of hundreds of different CMS solutions and website editors. Many open-source, and proprietary solutions have emerged, and yet many have disappeared. This evolution has triggered an immense amount of innovation. As a result, new tools are very good these days. Let’s take a look at the solutions we chose as we revamped techholding.co for the year 2020.
ReactJS Static Generation and Headless CMS
For us, going with React was almost a no-brainer. React allows teams to build modular components while its JSX syntax reduces confusion thanks to its declarative nature. It’s the most popular JavaScript library for web applications, and with popularity in open-source, there are huge advantages like initial setup speed, maturity, and developer mindshare.
Among the recommended React toolchains, the one best suited for building static websites today is Gatsby. Gatsby v2 is highly evolved to suit the needs of static site generation (particularly speed). Gatsby has a rich open-source ecosystem with over 2000 well-documented plugins for handling common website concerns.
The headless CMS we chose to use is Contentful. Contentful has emerged as one of the best solutions for content management. In addition, Contentful has invested heavily in its developer tooling, and content delivery network. Contentful features a great interface and can be modified to adapt to the needs of huge organizations and small ones alike. Another contributing factor: the Contentful + Gatsby integration is intuitive and easy to set up because it has gotten a lot of attention from the Gatsby core team.
Continuous Integration and Deployment
When it comes time to think about deployment, setting up some sort of auto-deploy strategy will save you much time in the long run. With a CMS-driven static site like ours, CI/CD is actually required to make the site function. However, some CI/CD solutions are just very complex to use and can take your team a lot of time to set up and configure. For the initial deployment of this website and blog, we chose to deploy with Netlify.
Netlify has been lightning fast to set up and our deployment times actually keep getting faster. On May 27th, Netlify announced the general availability of their Netlify Build Plugins, and the Gatsby team was already on it -- they already offer a new build plugin to speed up all Gatsby builds. Netlify also makes it super easy to set up multiple branch deployments so your developers can have their own environments separate from the live production site. With Netlify, each pull request made in GitHub can also be previewed in the browser. Our team loves that feature.
Real-Time CMS Previews
In order to create excellently engineered solutions, you need to use empathy and think about what it’s going to be like to interact with your product at all stages, not just when it’s built and deployed on the web.
For our helpers -- in this case content editors making changes in the CMS -- waiting for the CI/CD pipeline to produce a new build would be slow and painful. We want our helpers to be confident that their changes are going to look good before they hit publish. When we thought about this -- our team quickly explored our options. One choice was to build a server-side rendered (SSR) preview application that would allow users to check out their changes in real-time. Another possibility we considered was a simpler React single page that would dynamically load data from an API. Neither of these solutions were going to help us to build the site any faster -- and they only promised to consume our time and energy creating solutions with a long term maintenance burden.
Evolution has its advantages. Enter Gatsby Cloud. This new service from Gatsby delivers on the topic of Moving Faster with great tooling. Gatsby Cloud features real-time previews from Contentful with a shareable but password-protected URL. This enables our helpers to collaborate on changes before they hit the publish button. Gatsby Cloud also has some similar features to Netlify (PR previews, branch builds, auto-deploy) but for speed, it takes it another step further. The service is optimized for Gatsby’s incremental builds -- only building what changed. It also has automated Lighthouse performance checks to help your team to keep your site running fast in the future.
Our Improved Outcomes
With help from evolved modern tools, our project outcomes can be vastly improved. There are features enabled by these tools that add visibility to what the teams are actively working on (such as Pull Request preview links and real-time CMS previews). These new tools are fast, stable, and transparent. The front-end developers I talk with love working with these tools because they help us focus on the actual products we are building. We can spend a lot less time integrating data, fixing toolchain problems, and tweaking build configurations.
In Closing
Building a scalable web solution means something different today. In 2020, there are still many viable ways to build great-looking websites and web applications. Choosing modern evolved tools brings advantages in speed, but it also adds a little something extra: it enables empathy. A lot of the challenges we face building for the web today have been encountered before, and someone out there probably built a tool or service that can improve the process for everyone involved.
Links and Reference Material
ReactJS
2019’s Most Popular Web/Front End Frameworks:
Gatsby:
Netlify:
Contentful:
Lighthouse:
More blogs
AWS Certified Team
Tech Holding Team is a AWS Certified & validates cloud expertise to help professionals highlight in-demand skills and organizations build effective, innovative teams for cloud initiatives using AWS.
By using this site, you agree to thePrivacy Policy.