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.

Related news and work

28 Oct 2020

Future-proofing your tech stack

We recently completed a piece of digital consulting to help a global technology company understand best practices in terms of tech stacks for B2B organisations, upcoming consolidations in marketing software tools, and how their current tech stack needed to adapt to support their business goals.

Our work was organised into three parts:

1. Outlining of what the future technology stack of an advanced B2B company will look like, with a particular focus on CRM and Webshop items

2. Presenting an overview of what kind of developments and market consolidation of tools to expect in the coming years

3. Providing personalised recommendations on technology to integrate into the organisation's existing tech stack

Within the space of tech-enabled transformation, and its potential to positively impact B2B organisations, there are three main factors you should consider when adopting new digital tools. 

  1. The impact of a rapidly changing workforce

    • As the millennial workforce grows, the ability to adopt new tech and not shy away from automating tasks is more important than ever in attracting and retaining talent.

  2. Faster moving ecosystems of customers and suppliers

    • Adopting new tech is not only a factor among your potential workforce, but also among your users (expectations for high quality UX) and partners (“...they will prefer to engage and partner with innovative organisations”).

  3. Digital disruptors and the need to reimagine operations

    • The potential for an economic slowdown is a factor in favor of embracing new tech that supports your future business objectives and sets you apart from the competition.

Estimates suggest that B2B organisations could generate over $1 Trillion in value through embedding the use of digital technologies, analytics, and the Internet of Things into their operations. Simply put, the impact of smart investing should be considered by organisations who aim to be competitive in the market as more people are being convinced of its benefits.

Estimates suggest that B2B organisations could generate over $1 Trillion in value through embedding the use of digital technologies, analytics, and the Internet of Things into their operations.

Now, where to start? There are five main areas where digital transformation can be applied to enhance your organisation's productivity.

  1. Running the corporation
    1. Modernising finance function
    2. Optimising workforce (HR)
    3. Building scalable tech infrastructure (data security)
  2. Innovating and Developing Products/Services
    1. Updating business models with data 
    2. Enhancing R&D processes
  3. Making and Delivering
    1. Optimising procurement
    2. Improving forecasting capabilities
    3. Improving manufacturing and distribution outlets
  4. Selling
    1. Improving digital marketing performance
    2. Optimising the UX
    3. Adopting IoT updates at dealers and retailers
  5. Servicing 
    1. Managing customer demand
    2. Optimising and managing production
    3. Delivering high quality UX

While these areas have been isolated into five sections, and your needs as an organisation may not encompass all of these, studies have shown that 50% more value was generated by companies that took a comprehensive approach to transformation as opposed to those who focused solely on single technology improvements.

This means getting down to the core of your business needs. For example, mapping how the results of the technology, more than the technology itself, supports your overarching business strategy. 

And there’s no better time then now.

The above graph, taken from a McKinsey study entitled “Tech-enabled Transformation: A CEO’s guide to maximizing impact in industrials,” reveals a correlation between an updated and efficient tech stack and an increase in revenue, gross margin, and EBITDA (earnings before interest, taxes, depreciation, and amortization), relevant to the speed in which organisations adopted new technology.

Source: McKinsey Report, Tech-enabled transformation

Ultimately, an effective tech stack is in line with both business and user goals. Not just about what it can do for internal processes, but also how it can support the user. Bringing a user experience perspective to your strategy will help improve both sales and marketing performance

Below are three main areas where Catch can help guide you in this process:

1. Take inventory of your current tech-stack and identify opportunities for improvement

  • We’ve created an outline to walk clients through that includes a series of questions organisations must ask themselves if they want to find the best way to incorporate new technology into their processes. 

2. Mapping out both internal (employee experience) and external (user experience) user journeys to isolate areas for consolidation or addition of tools/services 

  • We bring an objective outlook to the table, which is key to unlocking the full potential of your digital transformation project. 

3. Securing buy-in across your organisation by showing examples of proven success

  • Digital transformation is as much about the technology as it is about the people who support and use it every day. A digital transformation project without securing buy-in from all levels of the organisation will not succeed. 

Get in touch to learn how Catch can facilitate an online workshop to help finalise your tech stack decisions and provide support with performance monitoring through custom reporting.

Related news and work

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com