For most of my frontend work I mostly end up using jquery and maybe some gulp for building a bundle. I’ve decided to reimplement the jquery-based solution on the Webchat-project in React to check it out and get a feel for what a modern web framework can do.

The Webchat project is a great project for experimentation because of it’s simplicity and ease of testing.

I’ve read quiet a few articles on React, I’ve also got a friend heavily invested in Angular2. Very complex from my point of view, with a high learning curve. Angular2 seems like a great tool for large projects with many developers, to make sure to keep a somewhat red string throughout the project. For smaller projects it seem overkill in many ways.

React doesn’t try to solve all your problems, it only helps with the rendering of the UI. Moreover the general idea is simple and powerful, components that can use other components in a tree structure, a sort of virtual DOM.

And the fact that React keeps a DOM-like structure and only updates the parts of the DUM that changed is exciting, javascript keeps getting faster and the DOM is still rather slow in comparison, so updating only what is necessary in the DOM seems like a great idea.

At work the only experience we have with javascript frameworks is with Backbone.js, also rather simple but more focused on models, collections and fetching data from various API-endpoints leaving the rendering of the UI to the developer (usually underscore templates).

My first attempt at React is a simple Tic Tac Toe game that can be found here: https://p.dhedegaard.dk/tictactoe-react/

It helped greatly with understanding how to hold state across components and how to render and treat each component.

For the Webchat project I also decided on using Babel and Webpack2 for bundling everything, my previous experience with bundling javascript is with browserify which is usually invoked through gulp. Which in my experience can takes 10+ seconds to build. Webpack build dev-builds extremely fast (below 100 ms in my experience) avoiding the dreaded wait before reloading in the browser, the build in watch feature is a lot easier to understand and use.

The nice thing about webpack is that it handles everything around minifying the source and setting the NODE_ENV to production, causing react to be properly minified by simply calling it with -p.

The result of porting the frontend to React has ended up making the code simpler, easier to understand and easier to expand upon.

The webchat project can be found here: https://github.com/dhedegaard/webchat and a live version can be found here: https://wc.dhedegaard.dk/