17 May 2021

The React framework advantage

We’re big fans of React at Catch. But just what is React, and how do we use it?

React is a JavaScript library used in web development to build interactive elements on the web. The main advantage for end users is the fast interactivity they’re provided with, as there should be very little reload time when new data is presented on their screen. This, in turn, leads to a more positive user experience.

The React advantage for End Users

As you probably know, we’re Drupal experts. Whilst Drupal is an excellent CMS for general website usage, there comes a time when users want a bit more which is when we reach for React to build a ‘web app’ to sit on a page.

Think of Google Maps, for example. What a pain it would be if there was a noticeable page refresh (such as clicking on a link and waiting for the page to reload) each time you zoomed in or out or panned across the map. React helps eliminate this friction, allowing elements to quickly load on a page as the user interacts with them.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

ReactJS.org

The React advantage for Developers

React is a JavaScript library that at a fundamental level is used to build many components each with their own independent ‘state’ that tells the component what to do. If you think of a button on a website as a component, the state might include the colour, the text (e.g. ‘Click Here’) and the URL (e.g. ‘https://www.catchdigital.com’). As you build out your React project with components, it allows you to avoid the time-intensive process of coding and testing over and over meaning you can build new features and scale your application.

Developers can reuse the button all over the web app and update the ‘state’ of each of these using ‘props’. The advantage to this is that every button on the site will look and behave in the same way. Of course, components will be much more complicated than just a button, and can do more than just take a user from one page to another.

Below are some helpful definitions to understand the terminology used when discussing React.

  • State - The current data that is within the component, any time this is updated and the state changes, a re-render will take place
  • Props - This is how information or data is passed from one component into another. For example if we reuse the button analogy where have colour, text and url managed in the state of the button, we could also have disabled as a state. If the button component is associated with a contact form, we could set the disabled state of the button to be true until all of the fields of the form are completed and then update the state of the button component using props

Developers are able to reuse tested code and know that it will stand up to stress.

The React advantage for our clients

We now know that React is a data driven tool, and allowing our clients to manage the content for a data driven API means we can treat Drupal as a headless CMS for the output of JSON in an API format. New content can be created in the same way new pages can be created. The same goes for content within each page, reducing what could be a time intensive process to update their site (or multiple sites from one data source).

Some examples of our use of React

From quickly adapting to what the user is looking for on the TV Guide on our Freeview web platform:

To helping students filter and book available accommodation in London via IQ Student Accommodation:

To helping global telecommunication company SES provide users with the ability to search for satellite footprint information using their “Our Coverage” tool within their existing Drupal solution:

Or providing the Internet Advertising Bureau (IAB) Members with a quick and easy way to view Adspend data in a graph that instantly updates as you change dates and add filters:

Catch is experienced in offering our clients effective solutions that take advantages of all the benefits of React.

If you're ready to start your journey and see how we can help you improve your connection with your audience through smart technology like React, don't hesitate to get in touch.

18 Mar 2018

Women in digital

Happy International Women’s Day! We took some time out to discuss what it means to be #WomenInDigital with some of the amazing women from each of our teams:

  • Helen, Delivery Director - Client Services
  • Ligia, Strategist - Creative 
  • Gabriela, Front End Developer - Tech Development 
  • Michelle, Finance Manager - Operations

Check out our article written by Delivery Director, Helen Aquinol-Tobin - originally posted on LinkedIn "Stand with us - Women in Digital" 

Stand With Us - Women in Digital

I’m lucky enough - not to mention ridiculously proud - to work at an agency that does a pretty good job of empowering people, giving them a voice and ownership of their work without leaving anyone out in the cold. 

Women were granted the same voting rights as men in 1928, meaning this measure of equality has only been granted to 51% of the UK population for less than 2% of civilised history. It took a long time getting there.

The fight for equality at work is picking up speed - but it’s still not fast enough, particularly in the traditionally male-dominated agency world. Change is slower here, hampered by our deification of ‘ad men’ and our enshrinement of the idea that only men are technical, only men are logical.

Pushing past the pay gap issue, which has been illuminated and dissected by far better minds than mine, how do you build an atmosphere of equality in digital agencies - an industry that is still largely masculine by nature?

I’m lucky enough - not to mention ridiculously proud - to work at an agency that does a pretty good job of empowering people

Helen Aquinol-Tobin, Delivery Director

Representation matters. In my first agency there were three women, unilaterally referred to as girls (or even gals, depending on who was talking). No matter what our actual jobs were, we were expected to make the tea and take the minutes of every meeting. I remember occasions where I'd be presenting the P&L and I'd have to stop because one of the gentlemen wanted a biscuit. There were no women to look up to, only ones you could share sisterly side-eye with.

At Catch, there are women in every department. Opinionated, smart, vocal women, empowered to express their opinions and - more crucially - to act. As a member of the senior management team, I’m aware of the high level of visibility of my role. As Delivery Director I’m across all projects, present in meetings and vocal (sometimes too vocal).

I have a voice and I use it to make sure everyone else does too.

I learned just how important this was from a woman I worked for many years ago. It’s no good being granted a voice if you don’t use it to help others discover theirs. She didn't lend me her voice or her support because I was a woman, but because I deserved to be heard. I try to do the same, my sheer visibility and ability to effect change show others like me that it can be done.

Always outnumbered, never outgunned

We ensure that everyone has the appropriate facts at their disposal and the requisite tools in their arsenal to deal with any circumstance. I’ve written elsewhere about building a modular process that allows people to be flexible in their work, this is vital to ensuring everyone is on even footing.

Giving everyone the same tools and empowering them to use them as necessary mean increased levels of ownership and ensure we have an army of people willing to take the initiative, regardless of job role, level of technical knowledge, gender or anything else.

For the most part, women are still in the minority at digital agencies, meaning we have to have that much more to bring to the table when we do get the opportunity to speak. Putting our flat structure to good use, we keep everyone on equal footing and share as much information as possible, ensuring not only that everyone gets a seat at the table, but they get to eat the full meal and leave a review afterwards.

It’s ok to be smart

We don’t expect the women of Catch to be ‘good girls’. Good girls don’t express differing opinions. Good girls don’t make a lasting impression. Good girls are silent.

A smart mouth is actively encouraged - as long as it’s used judiciously and under the right circumstances. Having been hampered by my own smart mouth for the first five years of my career, I’m overcome with glee when a Catch newbie opens hers for the first time.

Everyone speaks

By promoting a democratic approach to agency life, we ensure that everyone gets their chance to be heard. This applies to everything we do, from discussing what we’re pitching for (and how and why) to how we’re going to tackle a technical challenge. We assume that everyone has something of value to add - and badger them incessantly until they realise it too! Makes for a noisy working environment, but how can you be creative without making a little noise? By not pigeonholing people based on preconceived notions of who or what they are and instead, giving them the freedom to express their opinions - regardless of role or gender - we build a better team and get to do more interesting, complex and fun work. Who wouldn't want that?

Everyone listens

Letting people know they’ve been heard is - on the face of it - the easiest thing to do and yet its the thing most people don’t bother with.

Here’s the thing: you can’t expect people to speak up or think for themselves if you don’t listen. And people who don’t get to speak for themselves don’t get to advance. Providing a safe environment where people feel heard makes for a more inclusive atmosphere, and ultimately allows people to produce better work.

Since I’m neither naive nor stupid I know that these things can be difficult to do at large agencies. The bigger you are, the harder it is to change things, particularly if you don’t already have female representation in the upper echelons of your business.

The point I’m making is that this is something that everyone is responsible for. Appointing diversity officers and token hires won’t cut it. Making people feel included, empowered and heard is everyone’s responsibility, all the time.

We’ve come a long way baby, let’s not stop.

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com