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.

25 Oct 2019

Goodbye Sketch...

Hi, I'm Sam Hainsworth, Design Lead at Catch, and I want to tell you about our Creative Team's recent move from Sketch to Figma and the benefits it has brought us in creating a more collaborative and efficient work process.

It wasn’t so long since that if you asked a designer what software they used to create just about anything, the answer would more likely have included the word ‘Adobe’.

Today, there are so many options to bring creativity to life, that a big question more often than not is: what’s the best design software out there right now? And the answer for a while was Sketch, but not anymore. 

Our hearts have been stolen by Figma.

What’s Figma you ask? In many ways, it’s exactly like Sketch…Invision, Principle, Craft, Google Drive, and Dropbox. It may sound like a Frankenstein's mess of a platform, but it’s possibly the greatest design eco-system ever built to date (my own views here...!)

Figma at heart is a web app - yes, no software needed other than a web browser - that allows Designers, Developers, and Clients to collaborate together to make beautiful creations of any kind. It's the first piece of software that has managed to combine a design tool, prototyping, and animation that allows teams to be able to work together with ease.

For the sake of this article, I’ve split it into 2 key areas (designing and prototyping ) on why we think Figma is the king.


Designing with Figma

As a design tool, Figma is A LOT like Sketch. They’ve certainly done a great job at making the transition from Sketch to Figma easy for us: the interface feels the same, we still have symbols, artboards, etc. But there are some pretty important differences.

Real-time collaboration 

Remember the first time you opened Google Docs and saw someone else typing in real-time, deep down thinking “wow, we really are in the future”, well Figma has taken the idea of real-time collaboration and applied it within their software, allowing multiple people to work on one project at once.

It might sound like you could have the classic hovering Creative Director watching your every movement from the comfort of their own seat, but it becomes such a useful tool. No more do you have 2 Designers working on multiple files and then merging their creative 2 hours later to find they’ve used different fonts weights or having to export assets for each other. This real-time collaboration lets designers have a single source of truth for each project and collaborate in tandem, rather than in silos.

Connected design systems

With many concurrent projects in an agency, one thing that can be a real struggle to keep is consistency. Over the years, projects grow and with that so do the components and styles that build these websites, apps, platforms, etc. Design systems within Sketch (or any other design tool for that matter) are static files that can often get forgotten about or duplicated along the way, creating chaos.

These systems, within Figma, act as your hymn sheet for each client; letting you store reusable assets that can be shared across the design team and projects. Figma transforms these static design systems into live breathing sources of truth (sounds a big deal, well it really is!) that can be worked on together and pulled across many different projects.

 

File management 

Now, this may sound boring, but this truly is such a game-changer: How many times have you been looking for the final creative you worked on 3 months ago, only to find 4 files all with the word ‘FINAL’ at the end of it. Or to not even be able to find where it was saved in the first place?

With Figma, all files are saved within their own cloud eco-system; allowing you to access all your files anywhere, at any time; and with their neat interface, ways of organising and sorting, it's so much easier to access the whole teams’ files.

 

Version history

Last, but by no means least, we have version history: which is again a real lifesaver and means you don’t need to create hundreds of duplicate files anymore. Figma allows you to go back in time and see how your designs have progressed, giving you the option to create key milestones in the project. 

 

Prototyping with Figma

This is where Figma gets really interesting. In the past, prototyping meant uploading your designs to Invision, Marvel, etc. and then adding interactions and repeating every time you got feedback. Figma takes that pain away and lets you prototype and present directly. Essentially, letting you create a clickable prototype and show off fully animated interactions.

Inline commenting

This feature allows anyone to comment inline with the designs you're working on, which sounds like both a blessing and a curse, but it takes the pain out of amends. Now being able to read a comment directly in your design means no more missing feedback and once the amend is done, that’s it: no need to re-upload your prototype, it’s all right there.

Animation

If prototyping wasn’t enough, Figma has recently added ‘Smart Animation’ to the mix, allowing you to quickly create smooth animations and transitions giving your prototypes that extra layer of finish and finesse.

Goodbye Sketch, it’s been emotional

Ok, we still like Sketch and it does still do a few things better than Figma, but right now Figma is in its early days and rolling out features like no tomorrow and we couldn’t be happier with where they’re taking this amazing tool.

So, for now, goodbye Sketch, it’s been emotional.

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com