June 21, 2017

Talk Nerdy To Me: React

WRITTEN BY: Scott L.

Welcome to Talk Nerdy to Me, a series of fireside Slack-Chats where Pound & Grain’s resident tech geniuses explain complex development systems and best practices to a creative person. In today’s edition, Tech Lead Cameron Lee explains the benefits of building digital experiences and applications using React.

The days of expecting users to be patient are long gone, in fact, they never really existed. Today, when it comes to content-rich digital experiences, we wait for nothing. Video buffering? Point me to the close button. Slow loading content? Back please. Stuck at 98% complete? I’m 100% done with this experience.

But the reality of immediacy in the digital world has had a positive effect. It’s caused technology to keep up, and a prime example of this is React. So, what is React? I have no idea, thankfully Pound & Grain’s Tech Lead Cameron Lee can explain.

SLEW – Okay, what is REACT?

CAM – So, react is a modern javascript framework that replaces the traditional DOM (document object model) with a virtual one. Meaning that instead of having the server re-rendering the entire page each time, you need to update some content or markup, React takes over and will specifically monitor what needs to be updated within the DOM and replaces only the content that needs to be updated. This is what makes React so fantastic and what makes it so high performance for end users.

 

SLEW – Would it be fair to say that React is a much more efficient way of loading/reloading a site?

CAM – Yeah absolutely. Efficiency is the key and its really at the heart of why React was developed. With more traditional website development, each time you want to update some content on the page, you have a page refresh where the server is re-rendering, data is queried from the database, and we then use a language like php to re-render all the content on the page. React eliminates almost all of that.

"React is a modern javascript framework that replaces the traditional DOM with a virtual one." - Cameron Lee

SLEW – That’s awesome – so it’s kind of like trimming the fat when a page reloads.

CAM – Exactly! So, in the React model, an event will trigger a DOM update – like clicking a button for example – we would then query the database through an API endpoint, and we would get returned ONLY the data – no html markup or anything like that. React would then handle that data and automatically determine which specific pieces of the page markup need to be updated. Then it makes those changes without affecting the rest of the page. This makes it way faster than traditional php style development.

 

SLEW– So, beyond the efficiencies we talked about, why would a client/brand/person with a website care about React?

CAM – It all comes down to developing the best possible user experience. By increasing the speed and performance of a site or application we get people the information they are looking for faster and with less load time (particularly on slower mobile connections). This is key to retaining users, if it’s slow, they are going to bounce out of there so fast its almost scary.

Secondly it allows us to build a site with an optimal user experience. Because React is so fast and high performance, we can focus a lot more on adding some of the bells and whistles like really nice transitions between screens or doing much more dynamic animation or including more rich media assets like sound and video.

Thirdly by developing in React it allows us to port the site’s code to native applications much easier than with traditional development techniques.

Lastly it is a great way to “future proof” your website or application. Traditional web development with things like php is really starting to be left behind for these new frameworks.

 

SLEW – So as content becomes more robust, the tech needs to keep up, right?

CAM – Yeah totally… today, people expect rich, and highly engaging experiences online. React allows us to really and truly deliver cutting edge experiences on the web.

Personal Sport Record

SLEW – So how does REACT work?

CAM – A good way to think of it is that React is essentially just the front end of a site. It replaces the visual layer that users interact with. And the “back-end” layer, that handles database queries and logic etc. can really be any platform. So WordPress or Shopify or a headless CMS like Contentful.

 

SLEW – At Pound & Grain, what have we built with a framework like React? And coming out of that experience, would you recommend it to a client?

CAM – Yea absolutely. Where it really shines are in applications that require a lot of rich media or are really data heavy, so we’ve used it for high-end web solutions for SAP, T-Mobile, and Personal Sport Record.

 

SLEW – Do you know of any brands or sites that are currently using React and are seeing positive returns?

CAM – Oh yeah. Facebook, Yahoo mail client, Netflix.

 

SLEW – So, we know it’s efficient, we know it’s better for users, and we know that big digital brands are using React, but nothing is perfect. Have you identified any watch-outs?

CAM – You should be aware of what the back-end systems are that you will need to integrate with. Not all CMS platforms are built in a way that will allow them to easily connect to a frontend framework like React. Also, React is not very “opinionated” meaning that the way that you layout and structure your codebase is very much up to the specific developer working on your project. For bigger sites it means you need to be diligent about planning how you structure your codebase.

SAP Win The Board

 

SLEW – Nice – well, I think that’s all my Qs. Was there anything you’d like to add?

CAM – We haven’t come up with this on our own. There are a lot of agencies, startups and global enterprises all starting to catch on to the benefits of React. The other big point to drive home is the performance aspect. Currently mobile traffic is going through the roof, and using a framework like React to speed up your application does wonders for your mobile users.

 

SLEW – I think a lot of the improvements on the tech side are around getting users their content quicker and more efficiently, correct?

CAM – Yeah exactly, that’s what it’s all about. Literally on the web today you have 8 seconds to grab the user’s attention or they are gone (potentially) forever. So, speed and efficiency are more important than ever, especially as so much web and app usage transitions over to mobile networks.

As with anything in digital, it always comes down to the users. We design and build to make it easier for people to get what they want. And as simple as that sounds, it takes technical advancements like React to continuously help us get there.