19th June 2019


Roots - WordPress meets modern web development

A while back, a client got in touch with me and asked me if I have worked with the Roots framework. I had no idea what he was talking about but I soon found out.

Before discovering Roots I was a developer who loved Laravel and hated WordPress. Laravel is a modern web development framework that is a joy to code with. WordPress, on the other hand, is a frustrating mess of old coding techniques that is prone to a multitude of problems. WordPress remains popular though due to it's content management system, so a lot of us developers can't afford to drop it from our services.

I did try to set up my own modern WordPress development environment that utilised some of the things that Laravel had taught me but the guys at Roots were way ahead of me.

Roots (roots.io) is a modern development stack for building WordPress websites. It is comprised of three main packages: Sage, Bedrock & Trellis. I'll list some of the highlights of each package below, but first I want to address the following:

What can Roots do for your website?

  • The fastest page load times for a WordPress website. If you want to see this in action then you can run Google PageSpeed Insights on any page from one of my client's websites, which we built recently on Roots. Visit westwood.ie here. Run the pagespeed test here.
  • Modern web design using modern CSS packages. Packages such as Bootstrap provide great mobile optimisation out of the box and set up a sensible starting point to ensure your website's design is sharp and consistent.
  • Fancy JavaScript features. Some of the fancier features of modern websites require complicated JavaScript. This is no problem with Roots and I can easily integrate modern JS frameworks, such as Vue.js.
  • Safe code development. If you have multiple developers working on your website then you can rest assured that there is little chance for one of them to mess up your site permanently or delete your site's code. Roots works great with version control systems such as Github, and this makes it easy to developers to collaborate and ensure every change in your site's code can be reverted.
  • Reliable websites One of the main goals of modern web development is to reduce the risk of websites going down or features breaking. With the Roots stack we can test all of our code locally and on a testing domain easily and then push the code to the live website when it's ready to go. Anything that might damage your website, such as the installation of a faulty plugin is blocked by Roots.
  • The content management system you know and love In the end it's still WordPress and you will have access to all the usual WordPress features such as the new Gutenberg content editor.

Sage

Roots Sage is a starter theme for WordPress. It's basically a blank canvas that offers little in the way of design and typical WordPress theme functionality, so it's not really useful for a non-developer.

For the developer it provides the framework and tools for building a cutting-edge theme. These include:

  • It makes it easy for me to utilise thousands of modern CSS and JavaScript packages through the Node Package Manager (NPM). Great packages such as Bootstrap and FontAwesome can be used easily in our custom WordPress theme.

  • We also get Webpack so we can write modern code using Sass and ES6 while compiling everything down to optimal file sizes.

  • It also has something that every Laravel developer will appreciate - Blade Templating. This keeps our WordPress template code clean and easy to work with, and that is really important when we are crafting something good.

Bedrock

Roots Bedrock is a re-envisioning of the WordPress core files. We get the following:

  • The ability to use Composer, a package manager for PHP. We can pull in thousands of PHP packages and WordPress plugins into our website in a safe way. The usual way of installing plugins through WordPress can lead to problems. Imagine accidentally taking down a WordPress e-commerce website that relies on sales all because of a faulty plugin version. Composer will ensure this doesn't happen.

  • Enhanced security: As you might know, WordPress sites have an awful reputation for being hacked. Bedrocks folder structure elimates the possiblity of hackers gaining access to important files by moving them outside of the public web root.

Trellis

Roots Trellis manages WordPress servers and enables us to easily utilise the amazing cloud architecture of Amazon Web Services (AWS) and Digital Ocean as well as any other modern cloud hosting platforms.

With Trellis I can:

  • Launch new servers with all the latest security packages quickly.
  • Easily deploy and manage all the code for a website.
  • Easily manage multiple servers. For example, a server for the live (production) website and a server for the testing (staging) website.
  • Easily install Free SSL certifications via LetsEncrypt.

Roots breathes new life into WordPress and if you need to build a lightning fast and faultless website on WordPress then this is the way to go. Get in touch if you would like to dicuss this with me further.