Learning to create web components in ReactJS

Recently I was lucky enough to attend a training course in ReactJS programming. This was part of the Statistical Information Systems Collaboration Community (SIS-CC) workshop run by the Organisation for Economic Co-operation and Development in Paris, April 3rd – 7th 2017.

Attended by programmers from Eurostat, the Italian Institute for Statistics, Statistics Tunisia, the International Labour Organization, the OECD and myself from the UK Data Service, this was the first of two weeks free training provided for SIS-CC members by the OECD and delivered by the RedPelicans software company.

React has been chosen by the OECD as the technology for the new web interface to their statistics platform, .Stat, which we use at the UK Data Service for disseminating International Social and Economic Data. An open source JavaScript library for creating responsive web user interfaces, React is maintained by Facebook and Instagram, and also used by Netflix and Airbnb, amongst others.

React creates lightning fast interactive web pages due to its use of a virtual DOM, an in-memory data structure cache. When part of a web page changes, React computes the resulting differences between the virtual DOM and the web page, and then updates the browser’s displayed DOM efficiently.  It also renders the scalable vector graphics (SVG) that we can use to create data visualisations.

However, the most important benefit for us in using React is that it is components based.  It breaks a web page down into small reusable components, which can be put together to make larger ones.  For example, a table component made up of a header and cell sub-components, which can be used over again. These components are encapsulated, which means they cannot modify each other, and each has a standard interface. This lends itself to distributed development, and it is the aim of the OECD that the SIS-CC members will participate in a collaborative programming effort to create the components that will provide a fast, responsive, and visually rich web interface to present data to their users.

The training involved programming an interactive tic-tac-toe game, constructed from components, for example a game board, a history of rounds played and an SVG pie chart showing who has won most games:-

The course was intense. As well as coding our tic-tac-toe game, it packed in the setup of a working environment of node.js runtime environment, the yarn package manager, the webpack module bundler and the babel transpiler to convert syntax to work in all browsers. It also included looking at libraries for Unit Testing (Enzyme) and Functional Programming (Ramda), and a session on Server Side Rendering to aid Search Engine Optimisation. The second week of the course, to be held in May, will cover Redux, a library which is used to manage application states. There is a steep learning curve with these technologies, but we believe it will reap dividends in providing a better interface to our data for our users.

Links:

 

Leave a Reply

Your email address will not be published. Required fields are marked *