How 20 years of web development changed overnight

Allow me to elaborate.

Before, every project I developed I wrote from scratch in pure XHTML or HTML5, CSS, SASS and jQuery. Depending on the project, I had two options. I would either custom write a back-end in PHP and MySQL or use an existing CMS (majority of the time) such as WordPress.

I've developed websites with other systems too. Such as Shopify and Magento, although I've never done one from scratch with those.

Ugh, no thanks.

WordPress was my main CMS of choice to build any kind of website. I used it at every agency I worked for. Everyone loves it, still does too.

Page Builder Feature

A couple of years ago I was managing a team at a local agency. Based on ACF (Advanced Custom Fields) at its core, we developed a little extension. We gave clients an amazing ”page builder” feature by creating modules and components. The structure of pages was now completely in the client's hands. The client’s requirements would drive the design of the modules and components. It allowed them to reposition them and create interesting pages.

The introduction of this feature didn’t change how we designed websites. This became a little problem as we were creating the same old stuff over and over again. We weren't getting any better. We became stagnant. But, the clients still loved it and even to this day, it's still an impressive invention.

New Technologies

In 2018, I was doing some research into other technologies. I had seen and heard words like "modern development", "JAMStack", and "Angular". I hadn't paid any attention to it before.

When I discovered JAMStack, I was quite impressed with some of the things I found. I heard of React, Angular and Vue and did a little reading into those. Each, more complicated than the next.

I met a couple of people and got talking to them. At the time they were developing with pure React. I thought this was the right path, and today I still believe that.

My Latest Discovery

Towards late 2018 I discovered GatsbyJs. A framework built with React that allows you to build almost any kind of website. But it gets served up in a static format. It removed the obstacles of CMS and server slowness. It served the website up on a CDN (Content Delivery Network) and in most cases, for free.

Finding this was like a dream I never dreamt came true.

I made an attempt at learning how to code in React. I'll be honest, this was a big leap and I found it to be a very difficult task. This was because of my background and experience with older technologies.

A couple of close friends got on board with Gatsby. So we're learning from each other as we're diving more and more into it. Joe Taylor and I created a grid framework and starter kit we can use to develop websites much faster than ever before. We based it on Foundation 6 - our previous favourite go-to html/css framework.

React Learning Curve

The learning curve of React was steep for me but it could be very different for others. Gatsby has helped me change the developer side of my brain and has opened up many opportunities.

I hope every website going forward that I ever create will be in React and Gatsby.

In comparison with how I'm developing websites now, I use Gatsby and my grid framework as a foundation. I can plug into any API-based CMS like DatoCMS or Prismic to pull data and create dynamic pages. I use those CMS's to create a back-end in a matter of hours, rather than days or weeks with WordPress. I use Netlify to host the front-end, which is free with a free basic SSL certificate.

Amazing Effects

You may have seen on my website, the dark/light mode switcher, or even the back-to-top easter egg with the sound interaction. These types of interactions are super easy to make in React. I wouldn’t want to waste time doing it any other way.

I designed and developed this website, in particular, in approximately 3-4 weeks.

Since learning React and doing more and more with Gatsby, I can now achieve more than before. Goodbye WordPress and traditional html and css.

Check out my latest articles to see how I'm progressing.