Grapher
Grapher is project developed because I wanted to go through the steps of writing a simple web based app.
It had a pretty straightforward goal, to build "something" that was a web application, using React. I use React for work and I have been doing web development for the last several years, so this wasn't exactly new territory for me. The main reason I wanted to do it was to step through the process myself, and build it from the ground up.
I started with a webpack tutorial, and then imported each individual library one piece at a time. This was a great approach because sometimes with web apps there's so much boilerplate and cruft its good to understand each piece of the puzzle, as it's needed.
So what is it?
This is a web app that will plot a line graph. Not exactly feature packed, but the interest is more in the details of the implementation. There are a number of things mixed into this single project:
- Built using React, Bootstrap, Webpack
- Unit tests have been developed with Jest and Enzyme
- There is Babel, a linter, and a local dev server
- Graphing is done using the canvas, no third party library
Challenges
The most challenging thing about this was likely the integration with Babel 7 and Jest. In my mind this should have "just worked" but it's surprising how much debug time it took to get things setup properly.
I'm glad I just went with React and Bootstrap, but of course, I had to write all the interactions between the view layer and the css library. This meant reinventing the wheel rather than if I went with a version of Bootstrap "made for" React, but I'm glad I wrote those portions myself since this was just my own project.
I would also say I was surprised how many different libraries I needed to import. Starting out, I really wanted to keep this as lean as possible, but even then I ended up with a spider web of node modules (welcome to JavaScript I guess).
Here's the project: https://github.com/bknoechel/grapher. I might spend some time to clean things up or add in much needed functionality. You can view it online here: Demo
Last updated 2019-02-24
