This is project that I’ve been working on for the past 6 months.  We are now officially selling the software, so I wanted to give a brief overview of how I implemented this.  There’s no secrets here – nothing here that you couldn’t work out easily from looking at the site.

I implemented the front end in React + Redux in Javascript using a websocket and RESTful API for communication.  I worked with a UI designer and a team that implemented the backend.

Some quick lessons learned:

• React is really nice 🙂
• I initially implemented the gamma correction graphs in HTML 5 Canvas, but found it difficult to get it to look nice on high density displays.  I switched to creating SVGs instead.
• Modifying SVGs on the fly using React is really really nice!
• I initially developed without using Redux, but was eventually persuaded into switching to Redux.  Honestly, I’m really not convinced it was the right choice.  Dan Abramov, the co-author of Redux, wrote an article called: “You might not need Redux” which I agree with.
• I intended from the start to have a “fake backend” that acted like a simulator of the feel hardware and used the same websocket protocol.  This turned out to be extremely useful, and paid itself back over and over.
• Keep in touch with the end users as much as possible, and release early and release often.  There’s a lot of hate for the word ‘Agile’, but I’ve used it in 3 major projects so far, and I’m a true believer in it.
• Visual Studio Code (not Visual Studio) works in Linux flawlessly and is absolutely awesome.  It’s won me over after being a heavy vim user for 15 years.  It supports ES7 and JSX syntax.
• Javascript lint is awesome, even though at the start the rules seem totally ridiculous.  (e.g. you have to have colors in uppercase in the css).  The rules still feel ridiculous, but it doesn’t take long to just do it the way lint wants.
• Don’t go for a minimal react setup, but use a boilerplate with the most common things included, such as this.  It can seem really heavy for a beginner, but things like babel, router, image loader, ES7, etc are just awesome.