init
Development

Standing Up for Human Rights Exhibit, Development Stack

by Daniel Zuzevich | Nov 21, 2017 | [[ readEstimate ]] min read

My first project at Grafton Studio was to develop an application for the organization Chhange, that highlighted the prevalence of genocide and other human rights atrocities around the world. This project was out of the ordinary in two ways; first, the application needed to operate on a Local Area Network, and second, end-users would be interacting with the application via two 55” touch screen televisions. To add more complexity, these screens were located inside Brookdale Community College in New Jersey, hundreds of miles from the Grafton Studio office in Cambridge, Massachusetts.

In the following paragraphs, my goal is to demonstrate how we solved the technical challenges of this project. I’ll begin with covering the stack we used for the application, and then explain the hardware that we used to host the application on Brookdale Community College’s Local Area Network.

Application Stack

With the unique requirements of this project, picking a final stack was less straightforward than usual. We knew we needed a fast user interface to support the level of app interaction. On top of that, we also wanted to ensure that the owners of the product, Chhange, could easily add/edit content without the need of an in-house engineering team. With this in mind, we decided on the following popular technologies:

React Fiber

To provide a great user experience and easy maintainance on the development side, React was our choice. It gave us peace of mind knowing that the user interface would perform at a high level and that making updates to the codebase in the future would be simple, too.

All of our React components are broken down into small JavaScript files, allowing us to compartmentalize the functionality of the application. These small files join with others like them to create the whole functionality desired. This alleviates the headache of searching through massive files containing hundreds of lines of complex logic.

Something cool also happened while we were building this project out: React Fiber(v16) was released. After reading through the release articles, we updated to the newest version without encountering issues. This application is officially the cutting edge of Web UI technology!

React Router v4

React is just a library for UI, so we also needed a library to handle the single page routing. We chose the newest version of React Router(V4) to power this portion of the application, where we are using the built-in Hash Router. All of our routes end up centralized in one file, under a parent Switch Route. This was my first time using V4, and I am looking forward to using and becoming fluent in more of its features on future projects.

Redux

To easily access our application state, we chose Redux. Any state that is unique to a specific component, is not stored in Redux. Instead, it is handled internally via component level state. React’s internal state mechanics work really well, so I always try to use component state first before delegating the state management to Redux. Of course, there were plenty of instances where I needed state stored in Redux, but opting for a component level state approach first allowed the Redux store to stay slim, and easy to work with.

Craft CMS

Craft CMS was our solution for providing the client with an easy means of updating content within the app. Unlike Wordpress, and many other CMS platforms, Craft is simple to use, even for non-technical types. We were confident with our choice, and knew that it would allow for Chhange to focus on what they care about most, the actual engaging content within the application.

Webpack w/ Babel, SASS, ES6, and Autoprefixer

We used Webpack to handle the bundling of our JavaScript assets for this project, along with Babel to transpile all of our ES6 JavaScript code. For styling, having the ability to use SASS with the auto-prefixer module, allowed for smaller and more workable stylesheets.

Using ES6 was a pleasure as usual. My two favorite, and heavily-used ES6 features were arrow functions and object destructuring. Arrow syntax helps to alleviate scoping issues when dealing with the “this” keyword, and also allows for clean looking one line functions.

( The Survey Component as seen on the front end )

I used object destructuring within almost all of the React components. It really cleans up the code and makes it more intuitive to read, by removing the necessity to keep prepending (“this.state” or “this.props”) to your variables names. When passing props to functional components, all props are destructured within the arguments for easy access to the prop within the component.

Deploying To The LAN

A typical web application is hosted on a remote server somewhere, and is accessible via the public internet. However, Chhange did not want to rely on a remote server to host their application, just in case internet service went down. Our solution to this was to install the application on two Intel NUC's, running Ubuntu Server with Apache 2. The NUC is powerful, very compact, and hooks straight up to the LAN via ethernet cable. It also has an HDMI output that hooks right up to the television, which is helpful.

Because we would not be physically on-site to perform this installation, the Intel NUC were shipped to our office in Cambridge for configuration. After installing the application, and its dependencies, we also configured both machines for SSH and Remote Desktop access. The IT department at Brookdale Community College were very friendly and helpful in setting us up with a VPN tunnel into the LAN, which allowed us to use the prior-configured SSH and Remote Desktop. Being able to see exactly what our client is seeing, is handy if something needs to be debugged remotely.

The only step left was to ensure we could efficiently push code changes to the application. To solve this, we decided to use BitBucket to host a private Git repository with all of the applications code on it. This makes updating the application very simple. We can work on an exact replica of the application on our personal computers, and when we make changes, they are immediately reflected on the live application at the Chhange exhibit.