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

Posted on December 13, 2014 by Chris Harrington

Angular JS calendar using Moment and LESS CSS

Today, I’m going to talk about how to create a calendar control using Angular JS, LESS CSS, Font Awesome and Moment. I’m going to assume you’re at least halfway familiar with these tools, but if you’re not, I suggest you take a look using the links above. The calendar itself will be an Angular JS directive that allows the user to select a date, which is set on a controller’s property. I’ve styled the calendar, and I’ll include that style in this tutorial, but you can obviously feel free to tweak how it looks to your heart’s content. If you’re the kind of reader that prefers to view a completed product and just check the source yourself, I’ve put together a demo page which shows off the calendar. You can see it here.

I’m going to break down the write up into a couple of different sections. First, the HTML. It’s pretty straightforward, as it’s just the calendar directive HTML. Then, we’ll walk through the JavaScript code, which shows how I’m using Angular JS to update the directive’s state which, in turn, updates the calendar view. Finally, I’ll describe what I’m doing with each of the CSS rules that style the calendar. While most of the CSS is simple, there are few things I’m going to go over that might be new to the reader.

Continue reading

Posted on October 27, 2014 by Chris Harrington

Building a sliding modal dialog with Angular JS

The more I use Angular JS, the more I like it. I’ve been playing around with Facebook’s React recently, and I went back to Angular, primarily because I found React a little more restrictive with respect to two way bindings. I’ve built a modal dialog control in Angular which I figure you guys might find useful. The modal dialog itself is an Angular directive, and I’m using LESS for some of the slightly more complicated CSS rules. I’m going to assume you’re relatively proficient with both, but if you’re not, I highly recommend you check them out before plunging into this tutorial.

If you’re the sort of reader who just wants to see the whole thing in action, feel free to take a look at the demo page I’ve put together that shows off the whole thing. Viewing the source on that page should give you a pretty good overview of what’s going on.

Continue reading

Posted on September 29, 2014 by Chris Harrington

Animated rotate directive with Angular JS

I’ve recently been playing around with Angular JS and I like it, and so decided to spend a bunch of time converting Leaf from Knockout to Angular. It’s not that I think that Angular is substantially better than Knockout (that remains to be seen) but rather that I figure this is a good way for me to figure out the ins and outs of a new framework. One of the things I really like about Angular is building custom directives. I’ve only been tinkering for a week or two, but I already have dozens of custom directives for all sorts of situations and code snippets. They’re very, very handy.

So in that vein, one of the directives I’ve built revolves around rotating an element based on an Angular scope variable. My first use case for it was for expanding a sliding drop down. In the collapsed state, there’s a Font Awesome angle down icon that indicates to the user that it can be expanded, and after expansion, it changes to an angle up icon to indicate that the user can click again to collapse the panel. The following rotate directive is used to animate a rotation from up to down.

Continue reading