Quaternion Calculator Built With React JS and JS Math Toolkit
My previous post provided an overview of how to integrate mathematical libraries with Web Components using Polymer as an example. This post continues that theme with React JS used to create the ‘view’ and the JS Math Toolkit Quaternion ‘class’ as the third-party math library to be integrated.
In order to get comps turned around quickly, however, it is useful to work with JSX in React components. Because required modules need to be packaged for web delivery (browserify, webpack, SystemJS, blah, blah), there is a necessary workflow (and required stack) for React development.
The quaternion calculator is divided into three components,
q-calculator.jsx – top-level calculator component (owns the entire calculator).
q-element.jsx – quaternion element (owns w,i,j,k and user input).
q-display-element.jsx – display-only quaternion element (for results) – stateless.
These components need to be compiled to .js before packaging for web delivery. Since I recently started gulping, this was a great way to get further up to speed with gulp.
Once I got the workflow going, the remainder of the task was just a matter of learning to think the way React wants you to think. I was able to get the Quaternion class integrated very easily, along with the two lower-level React components.
var Q = require("./math/Quaternion");
var QElement = require("./q-element");
var QDElement = require("./q-display-element");
Although the look is different from the Polymer version (that heavily used Polymer Elements), functionality of the calculator is the same. The operation remains persistent, so the result updates in real-time as the user types in new input.
At this point, I could turn the component over to a production developer. He or she may wish to work with an artist to spiff up the styles (add Sass in the stack if you so desire). The developer may also wish to load the logo and title from a server so the component may be easily branded to different customers. That’s cool. Developers can do real development work and not have to worry about the math internals. So, I can thoroughly dig React.
What I can not dig after working through both React JS and Polymer is that Mac Safari does not like CSS Flex layouts. Too bad. I suspect there is a more old-school workaround, but you will notice that the buttons and equals sign do not center on Safari
Now, I know you want to look at the source. I feel that since this is my first React experiment that the process needs a bit of fine-tuning. I also need to overhaul my gulp file and install a more production-worthy folder structure. Then, if there is sufficient interest, I will put the example up on GitHub.
In the mean time, you can view the React/JS Math Toolkit Quaternion Calculator here. There is a link to download a .zip file of the JSX files for you to deconstruct as you like. Everything, including the JS Math Toolkit Quaternion class is fully documented and un-minified.