Blog
Module 4 / Week 4's project at Turing was a project with a few different choices available. I chose the route which required us to build a desktop app using both Electron and React. Electron is a hybrid of node.js and Chromium/V8. Coupling Electron with a React front end allows you to make desktop apps that are cross-platform and very quick to render. The quick rendering is a result of React's usage of the Virtual DOM, which is an object held in memory separate from the actual DOM being rendered on your site/application. When differences are detected between the actual and virtual DOMs, React renders those changes using the most efficient manner possible. This results in a very quick and responsive rendering process for the user. Considering that this project was our first attempt at a desktop application, I believe these two technologies were a perfect match for our purposes. It took a few days of working with it to understand how it all flows together, but once it starts to click it becomes fairly easy to implement your ideas. React is a framework growing in popularity, and our apps were simple enough that we could pick-up the component style usage of React quickly.
One technical problem I encountered when getting used to React was how React is built to handle events bubbling upwards to the top of the application tree, and having data flow down into each component. I built a simple music-player app, and needed to show the current time of the song being played for the user. The HTML5 audio element used to play the songs emits an event each time the current time of the song updates, and I was unsure about how to get React to handle showing and updating that time on the front end. I used an EventEmitter to pass that data up to the Application component as state, which then flows down into the sub-components if desired. Upon realizing how to do so, it was simple enought to interpolate that state into the HTML rendering so that it updated every second the song was playing. It was difficult to wrap my head around this idea at first, as Rails handles changes like these very very differently. Now that Ive got the hang of it though, I really like how responsive and quick it is to show to the user.
Other than my own struggles with understanding how React works in relation to updating state/props and the virtual DOM, the application went quite well once I got rolling. Having spent a fair bit of time trying to understand React's way of doing things, I wasnt able to add as many features to the app as I wouldve liked to, but I'm very happy with it so far. I plan to continue to work on it so that I can use it for my own music-playing purposes, and want to add in the ability to save the playlist which is created within the app for later use, and perhaps try to couple the player with the p5.js library to use it's audio visualizer components to utilize a custom animation for songs being played.