React Training

February 03, 2017

We are always looking for new tools to help improve your experience using Rise Vision. So, with all the hype surrounding it, it wasn’t long before we started diving into React.js. After experimenting with it we liked what we were seeing and thought that the annual Christmas get together would be the ideal time to expand on what we had learned so far. What’s a Christmas party without a little training in a new JavaScript framework!?

What is React.js?

Before we get into what we did, a brief React.js origin story. React came out as the hot framework of 2015, helped by the fact that it was developed by Facebook and Instagram. Of course, this was right after Angular was the hot framework of 2014, and Backbone was the hot framework of 2013 and so on. However, right from the start React was seen as different. It seemed to have the potential to stick around longer than the MVFs of the previous year’s (MVF = Most Valuable Framework. I may have made this up.).

One of the main differences is that React is declarative, and focuses on one-way data binding. This means that it allows you to build up a page, or interface, with multiple discrete components that will update only the component it needs to, and only once a change is made to the “state” of the application. I think this is best explained by looking at a real world example - Facebook “like” buttons. Even though it is small, this button is its own React component. You will notice that when you click on it the number of likes increases but the page itself doesn’t reload. This is the magic of React - it allows the part of the interface that has had a change of state to re-render, while leaving the rest of the page untouched. You can imagine that this results in much greater performance that having to reload the entire page or application each time you make a change to it.

You might also like:Our First Hack Day

Why Haven’t You Used it Before?

Oh, but we have! Our Delivery team actually used React earlier this year when they released the latest version of the Google Sheet Widget. The Widget is built from reusable React components which means that future Widget builds can take advantage of that hard work.

Also, as React has been evolving over the last few months there is a good chance that an application built not that long ago will be using techniques that are already considered deprecated, or at least a little bit old fashioned.

Because the Delivery team saw React as a great tool that we decided to arrange some training for everyone.

Where Was the Training?

With our teams split up across three continents, arranging a day of training is not the easiest thing. Luckily, last week in Toronto was the annual end of year meeting for the Delivery, Apps, Store and Creative teams. It was like the aligning of the planets, but with more beer.

We only had a window of one day for the training, so we needed someone who knew React inside and out. So we called Wes Bos.

Who is Wes Bos?

Wes Bos has been building websites as an independent developer since back when websites looked like a Bill Gates fever dream. He has recently transitioned from building sites to acting as an advisor to other designers and developers. He's well known for his popular and informative videos on everything from using the Terminal, Text Editors, ES6, and of course React. Wes has given talks in Canada, the US and Europe on the subject, so we thought that he would be the perfect candidate to get the uninitiated up to speed on the basics of React, as well as answering some tricky questions from those of us who have been using the framework for a while.

So, What Did You Do?

React is great for building single page applications (SPAs), so that’s just what we did! We started from scratch and built up a SPA that would make a call to a brewery API and return beers that matched a specific search, so you could look for Lager, IPA etc. (I promise, we didn’t request to work with a beer API, it was just a coincidence!) We learned how to build separate components for the loading page, the search area, the display area, each part was broken down and turned into a React component. We learned how to set and manage a global state, and how to pass properties to the different components.

Even though we just had a day for the training it was clear that everyone who attended managed to get something out of it. Those just starting with React had a far greater understanding of what it was, how it worked, and most importantly what it could do. Those with more experience, like the Delivery team, had the opportunity to ask a wide range of questions and were also introduced to some tips and tricks relating to both changes to React and incorporating the latest JavaScript with ES6.

What's Next?

Well, for the near future we will definitely be looking to use React more in our work where it has the most benefit. Delivery will build on the work done with the Google Sheet Widget and will be looking to use React in future components. And, the Creative team will be looking for an opportunity to use React with custom client content.

While other frameworks have risen and fallen in and out of favour over the last couple of years, it looks like React is set to stick around for the foreseeable future. We are definitely all looking forward to having the chance to experiment with it more next year.

Digital signage has never been so easy.SIGN UP NOW