Posted on October 19, 2015 by Chris Harrington

Tutorial: Build a Time Picker with React JS

I recently wrote a tutorial on how to build a date picker with React JS, so I figured I’d expand upon that and detail how to write a time picker, too. First things first: just like last time, I’ve put the code up on GitHub if you want to see the full monty. I’ve also made an npm package and a bower package for the time picker in case you want to use it on your site somewhere.

Note: The code is far from production ready, so use at your own risk.

If you’d just like to take a look at the time picker in action, I’ve also put together a (really simple) demo page. Take a look!

Continue reading

Posted on July 4, 2015 by Chris Harrington

Creating a Simple Application Using React JS and the Flux Architecture

I’m going to talk about how to create a simple todo application using React JS and the Flux architecture. React JS is making some waves in the community recently due to its alleged performance increases over other heavy favourites (like Angular JS), especially when it comes to writing out lists. I’m not so concerned with performance, but I am interested in how to write an application that’s easy for the user to use while at the same time being quick to get off the ground.

Continue reading

Posted on May 11, 2015 by Chris Harrington

Testing a React project with Karma and Webpack

I’m a new fan of Webpack. It’s a great tool for intelligently bundling all of the packages your project needs and its watch feature is super quick. I’ve been playing around with it a bunch for my latest project which uses React (see here: Webpack with LESS and React) so I figure it was about time for me to start writing some unit tests to back up all that fancy code. I did a quick search for running Jasmine unit tests via Gulp that utilize Webpack’s bundling while also allowing for transformations of JSX files into raw JavaScript, but I didn’t have much luck there. I quickly settled on a Karma implementation, as there’s a plugin built especially for that purpose.

Continue reading

Posted on May 7, 2015 by Chris Harrington

Webpack with LESS and React

I’ve recently been playing around with Webpack and I really like it. It has the benefits of Browserify in that you can specify an entry point that’ll pull in all of your required modules into a single bundle with optional minification, while also letting you bundle your style together in your modules. For example, I can require a style file for a particular module right from the module itself, which allows me to somewhat limit the global nature of CSS rules. On top of that, Webpack allows us to leverage LESS in these included style files, too, that get compiled down to CSS. I’m a huge fan of this, as it allows us to create less coupled modules in that each style file can be tied directly to a module, and only gets pulled in when its required. Webpack also utilizes what they call “loaders”, which are basically preprocessors that perform various tasks. For example, there’s a LESS loader to convert LESS into CSS, and a JSX loader to perform a similar conversion for React classes.

Continue reading

Posted on January 26, 2015 by Chris Harrington

Performance of AngularJS, ReactJS and KnockoutJS Compared

I’ve recently written an article comparing React JS and Angular JS, and it’s been getting a fair bit of attention, so I figured I’d go one step further and show how well each of the two perform. I’ve also added in Knockout JS to the mix here just for comparison’s sake, and also some raw JavaScript DOM manipulation to give a base line as to how well things work across the board.

I’ve put together a quick page that allows you to see the rendering time difference between the three frameworks, plus the raw DOM manipulation. It’s what I’ve been using to figure out how long each framework takes to render large lists, as seen in the results table below. Take a look here.

Continue reading

Posted on January 16, 2015 by Chris Harrington

Comparison: AngularJS vs ReactJS

I’ve been wanting to write an article comparing the latest and greatest front-end JavaScript frameworks for a while now. I’ll be writing about Angular JS and React JS. Angular is the big dog in this fight, as it’s been around for a while longer than React has, but React brings increased rendering performance to the table.

The purpose of this article is to go over building some simple functionality using Angular and React to give you an understanding as to what it would take to get an application off the ground. It’s not meant as an in-depth tutorial on either of the frameworks. As such, I’m not going to go into great detail for a lot of this stuff. If you ever feel as though you need more clarification on a topic, either throw me a question via Twitter or comment below. The documentation for Angular and React is also pretty good. I’m hoping that after you read this, you’ll have a greater understanding as to which framework is right for you to use on your next project. At the very least, you should have a grasp on how JavaScript UI frameworks operate in general.

I’m going to walk through how to create the typical coding example using each of the frameworks. Once I’ve done that, I’ll move on to some more complicated UI controls, building up our little app as we go.

Continue reading