introducing NOW Hydra - B2B marketing agency for technology sector | London | Now

Introducing NOW|Hydra

Our most secure, best performing, next generation website framework

New year, new problems

and how we solve them

Last year, we wanted to create our own website builder interface. After dealing with clients’ websites using divi and elementor-style drag-and-drop page composers, we wanted to have a go at making a bespoke solution for our agile website creation needs.

So we came up with a simple to maintain library of ACF flexible content layouts that have all the controls a standard web developer has in a neat layout UI. Third-party page builders are notoriously clunky and fiddly. ACF layouts enable devs to consistently roll out new features and update existing elements without the fear of having to track down an overridden style an end user might have made. They create consistent, fast pages that use Bootstrap as a style framework so it’s recognisable for any future dev to maintain.

But enough about some awesome products we’ve already made and use, that’s so last year! Let’s talk about what’s NEXT in Now|Comms’ toolkit.

Creating a headless WordPress framework has never been easier

What we use

Next.js

A flexible React framework that provides building blocks to create fast web applications

GraphQL

A query language for APIs and a runtime for fulfilling those queries with your existing data

React

A JavaScript library for building user interfaces

Tailwind

A utility-first CSS framework

ACF

A WordPress plugin which allows you to add extra content fields and blocks

What's the big deal?

and what is my website doing?

WordPress in a nutshell

WordPress is a fantastic CMS that the majority of developers use to create awesome websites. It’s a content management system designed for flexibility and customisation. There are three important things going on that make your website work, –  frontend, middleware and backend.

Frontend

HTML, CSS and JavaScript are used to manipulate retrieved data and display it on a screen.

Middleware

PHP is used to fetch and retrieve data from the database so that it can be queried and displayed on the frontend.

Backend

MySQL is the database management. This is where everything to make your website work is stored.

This is how no-code editable websites are possible. Custom-made or third-party plugins can be used to increase user capability that doesn’t rely on a developer to implement (however, you should really let a developer do that because they can do it without the need for an endless amount of plugins that could break, slow down your website, or leave it vulnerable to abuse).

But there are some significant drawbacks to this functionality. The way WordPress is set up uses dynamically rendered content. This is great for serving updatable content, either based on user action or JavaScript and PHP requests, but there are some downsides to this approach.

  • Performance – making a unique server request for data increases loading times. Loading times are a key factor in visitor retention and goal conversion.
  • SEO – Google prefers statically rendered content. It’s an important performance metric that is hard to optimise with standard practices like caching and deferring.
  • Resource intensive – high-traffic websites can be brought down by too many server requests. If your hosting setup isn’t capable of scaling, it will go down.  
  • Security – making a secure website is about mitigation more than anything else. Nothing is impervious to dedicated attacks but, by design, WordPress is very vulnerable to attacks. Especially if they rely on multiple third-party plugins. 
  • Development bottlenecks – are a headache for developers. Maintaining development and live versions is not easy. A standard WordPress install needs a single domain to operate. Making sure versions are the same across a team development can get messy.
  • Scale – some companies have multiple properties that require unique domain names. Maintaining five or more individual WordPress installs across multiple domains and hosting is time-consuming and repetitive. 

Say hello to

Creating a headless CMS

Headless WP has been around for a few years now. Back in 2016, WordPress released its REST api which allowed developers to decouple their core WordPress installation from the frontend of the website. This allowed use of the same data to build different web apps built for different purposes and devices. With a headless CMS, you can maintain your data and system from a single point (a bit like how network multi-sites work) but you also have the ability to use them independently, on different domains, different apps, hosted locally for development or deployed live in the wild.

React is a very popular JavaScript framework. It’s super quick and easy to develop. The problem is that it doesn’t work straight out of the box with WordPress. So we need to build an API that can talk to our WordPress backend and our React frontend. Next.JS and GraphQL are excellent options for adding the components developers need to integrate React apps to their WordPress CMS. Vercel offers excellent hosting services for its apps and makes deployment and updates a breeze.

 

Hydra is able to build websites that score 100 across the board

something almost impossible to do with standard WordPress installations

Super secure

Decoupling the frontend from your website limits opportunities for attack. Essentially, it removes the availability of the backend from the public. You can host your admin site on an entirely different domain, away from bots scraping wp-login pages and trying to use brute force.

Lightning fast

Because the apps are rendered as static sites, making page loading and information retrieval is almost instant. They are able to achieve almost impossible to optimise scores for dynamically rendered content.

Easily manageable

As you only need to maintain a single WordPress installation, you can manage multiple products on multiple domain names from a single admin CMS. The functionality to organise your WP Admin panel is straightforward and can be easily customised to user needs.

Scalable

As each app is, effectively, a self-contained piece of software, it will run anywhere node js can be run. Developers can be given the source code without having to have a locally installed version of the database on their computer. Frontend developers can get on with doing what they do best, without having to worry about setting up and maintaining the personal data which would need to be stored on their local machine in order to work on the website.

Are you ready to take your website to the next level?

Talk to us today to find out how we can build you a next generation website

“This is the creative team we trust to deliver the compelling content that makes us really distinctive in today’s competitive landscape.”

 

Estelle Milosavljevic, Crossknowledge