Web Dev .NET

Unit Test like a Secret Agent with Sinon.js

2013-06-04T09:42:00.001-05:00

The following content comes from the forth module of my Pluralsight course entitled: Front-End First: Testing and Prototyping JavaScript Apps. The rest of the course covers an introduction to Unit Testing, Examples of Hard to Test Code, Mocha (a JavaScript test runner), Grunt (a JavaScript task runner), Mockjax (a way to mock Ajax requests), mockJSON (a way to generate semi-random complex objects for prototyping), and more.

Introduction

“Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework.”

Sinon.js is a really helpful library when you want to unit test your code. It supports spies, stubs, and mocks. The library has cross browser support and also can run on the server using Node.js.

Spies

“A test spy is a function that records arguments, return value, the value of this and exception thrown (if any) for all its calls. A test spy can be an anonymous function or it can wrap an existing function.”

Example

A test spy records how it is used. It will record how many times it was called, what parameters were used, when it was called, and a bunch of other things. Here you can see an example of creating a spy and I've listed out only a small subset of it’s features such as called, callCount, calledWith, threw, returned, and more.

In addition to just creating a new spy, you can also take an existing function and turn it into a spy. In this example we are taking jQuery and turning it’s ajax method into a spy. Once the spy has been used you can actually pull out one of those instances and verify how that particular call was used. And again, it is important to restore the function back to it’s original state much like we did when we manually stubbed our functions previously.

Mission Impossible: Spy

In the following simple code example we are creating a new ethanHunt spy and passing it to the missionImpossible.start method.

As you can see the start method takes the agent that was passed in and immediately invokes it.

The spy will record how it is used and then you can observe what happened.

At this point we can interrogate ethanHunt if he was called or not, how many times it was called, and a bunch of other questions.

Stubs

“Test stubs are functions (spies) with pre-programmed behavior. They support the full test spy API in addition to methods which can be used to alter the stub's behavior.”

A stub in Sinon.js is also a spy as we've just seen, but it is also a function that has some predefined behavior. A stub is used when we want to fake some functionality so that our system thinks everything is performing normally.

Example

You'll see here that after we have created a stub we can optionally respond to it based on the parameters that are passed to it.

Here we are telling our stub that if "Hello" is passed to it that it should return the string "World" and if we pass "Wuz" to the stub that "Zup?" should be returned.

We can do other things like if "Kapow" is passed to our stub then an exception will be thrown and we can get even more sophisticated and say if an object is passed to the stub it should yieldTo (or invoke) the call function that was passing using the "Howdy" argument. This is some pretty serious and awesome functionality built into these stubs!

Mission Impossible: Stub

In this next mission, if you choose to accept it... we are stubbing out a tape function that will be passed into an assignment method.

The tape will either be passed the string "accept" or "reject" and depending on the answer we want a different result.

With a sinon stub, that is no problem. We can just say tape.withArgs("accept"). returns(new Mission()) and if we wanted to throw a Disintegrate exception if the tape was rejected then we just follow the same pattern... tape.withArgs("reject"). throws("Disintegrate").

If you can't tell already these stubs are really powerful and a great addition to your testing toolkit.

Once we've set up our stub, we can exercise our code as we would normally and the stub will respond with whatever behavior we predefined. Below you'll see that once we pass "accept" that we are getting a Mission object back and if we "reject" the assignment that a Disintegrate exception is thrown.

Stubbed Unit Test

Let’s take an example Twitter unit test and show how we can use a stub to simulate a response from jQuery’s ajax method.

In the before hook we will ask Sinon.js to create us a new stub based off of jQuery’s ajax method and we want to yieldTo (or invoke) the success function from the object that is passed to it. And while we are at it we want to pass our fake twitter data along with the success function.

With that one line of code we have stubbed out the jQuery ajax method and provide fake test data that we can use in our unit test.

Again, it is important to clean up after ourselves so in the after hook at the bottom here we are taking the jQuery.ajax method and calling restore which removes all of the stub behavior from the function,

Mocks

“Mocks (and mock expectations) are fake methods (like spies) with pre-programmed behavior (like stubs) as well as pre-programmed expectations. A mock will fail your test if it is not used as expected.”

Now we finally get to mocks. Mocks are a lot like a stub and a spy, but with a slight twist. With a mock you define up front all of the things you want to expect ( or happen ) then when you are all done with your tests you assert that all those things happened as planned. So, it’s a slightly different way to think than if using a spy or stub by themselves.

Example

In the following code we are defining a mock based off our opts object and we are saying that we expect the call method should only be called once and when it is called that it should have the "Hello World" string argument passed to it.

Then we proceed to run our code that we want tested. You'll see here I’m calling the call method passing the "Hello World" string.

And then at the end you tell the mock object to mock.verify() that all of the expectations you've made previously are valid. If for some reason an expectation was not met, then an exception will occur. And then just like in most of the other examples, we need to clean up after ourselves and call the restore method off of what was mocked.

Mocked Unit Test

Let’s take another look at the Twitter getTweets unit tests again, but this time use a mock instead of a stub.

In the before hook I’m creating a mock of the jQuery object and I’m expecting that the ajax method will only be called one and that it should invoke the success method of the object I pass in with some fakeData I've provided.

Inside my unit test I run the code I want to tests, which is the getTweets method, and then on the callback I call the verify method off of the mock to make sure my expectations have been met.

And as before I restore the object in the after hook.

Fake Timers

“Fake timers is a synchronous implementation of setTimeout and friends that Sinon.JS can overwrite the global functions with to allow you to more easily test code using them.“

Another handy feature of Sinon.s is that you can fake timers! At first this might seem strange, but it turns out it is really powerful and clever.

Example

We first start by asking Sinon.js to useFakeTimers() and save off the clock it gives us. Now let’s take some jQuery animation code that will fadeIn an element slowly onto the screen.

Normally if we wanted to test if this element showed up on the screen we'd either need to provide a callback when the animation is finished or tap into the promise created from the deferred and wait for that to resolve.

However, much like a time lord we can take sinon’s TARDIS, errr... I mean fake timer and tell the clock that we are now 650 milliseconds in the future! And then we can immediately assert that the element is visible without waiting. And of course we will need to restore the clock back to normal when we are done.

Fake Server

“High-level API to manipulate FakeXMLHttpRequest instances.”

Another neat feature that Sinon.js has is a fake server. This is a high level abstraction over the FakeXMLHttpRequest that Sinon.js also provides if you need more granular support.

Example

We can create a fake server from Sinon.js, and we can define that for a GET to the /twitter/api/user.json resource we want to respond with a status code of 200 and the following JSON data.

Then if we called jQuery’s get method with the same URL then we'd get back the data we stubbed out. A key to remember is that you do need to tell the server to respond as we did immediately after we called the get method. And finally we need to restore the server when we are done.

Fake Server Unit Test

Let’s take this technique and add it to our twitter unit test.

In our before hook we create the server and match the resource that our twitter app will be calling and pass back the data we want to stub out. Then we unit test out the getTweets method as we did before, but things don't work out as we expect! Why is that? Well, it is because we are using JSONP as our jQuery ajax datatype. The way JSONP works is that it isn't actually using XMLHttpRequest as a typical Ajax call does. Instead JSONP uses some trickery of injecting a dynamic script tag on your page and a bunch of other things that jQuery tries to hide from you for simplicities sake.

So, in this case using the fake server won't help us. It would be better if we used a stub like we did in the last example.

Conclusion

Hopefully you can see that Sinon.js is a great utility library to help make unit testing a much more effective and terse experience. You'll probably more often than not find yourself making spies and stubs much more often than mocks, but that is really up to how you approach unit testing.

If you enjoyed this content you can get more from my recent Pluralsight course entitled: Front-End First: Testing and Prototyping JavaScript Apps where I cover an introduction to Unit Testing, look at various examples of hard to test code and introduce the following libraries and tools... Mocha, Grunt, Mockjax, amplify.request, mockJSON, etc...

Testing and Prototyping JavaScript Applications

2013-05-15T00:12:00.000-05:00

I'm pleased to announce that I've finished my first course for Pluralsight entitled Front-End First: Testing and Prototyping JavaScript Apps.

Years ago it was common for the back-end to have code coverage, but having unit tests for client-side JavaScript was difficult, cumbersome, and rare. Thankfully, today that is no longer the case. By using various tools and libraries such as Mocha, Sinon.js, and GruntJS you can easily provide code coverage for your front-end as well.

Historically a front-end developer had to wait until the back-end was complete before they could start truly building a functional User Interface. Thankfully today there are libraries such as Mockjax, AmplifyJS, and mockJSON that can enable you to simulate the interactions with the back-end before its even complete. By doing so, this enables a front-end developer to work independently from the back-end and allows both teams to efficiently work within their speciality.

AngleBrackets Sessions and Slides

2013-04-12T00:30:00.000-05:00

I had a great time this week at the AngleBrackets conference in Las Vegas, NV. It was the first year for this web focused conference.

I was honored to speak alongside John Papa (@john_papa), Dan Wahlin (@danwahlin), Scott Hanselman (@shanselman), Christian Heilmann (@codepo8), Lea Verou (@LeaVerou), Denise Jacobs (@denisejacobs), Jim Cowart (@ifandelse), Todd Anglin (@toddanglin), Burke Holland (@burkeholland), and more....

Thanks you for everyone who was able to attend my talks. It was great to meet you all. I enjoyed our conversations and your questions. I hope to see you all around at another conference in the near future! The following are the talks that I gave this past week.

Angry Birds of JavaScript

AngleBrackets was the first time I've given my Angry Birds of JavaScript talk based on the blog series that ended yesterday. You can click the following image to see the slides.

I used the reveal.js slide presentation framework for my slides. You'll need to down-arrow down to drill into each topic and then right-arrow to the next topic. The last slide of the Red Angry Bird is an interactive game. You have to destroy both pigs before you can proceed to the next topic ;)

Introduction to Backbone.js

I've given this talk once before, but I tweaked the slides somewhat since then.

Other Sessions

You can view the slides from the other sessions at the AngleBrackets website.

Angry Birds of JavaScript: Mighty Eagle - Automation

2013-04-11T00:05:00.000-05:00

Introduction

A diabolical herd of pigs stole all of the front-end architecture from an innocent flock of birds and now they want it back!

A team of special agent hero birds will attack those despicable pigs until they recover what is rightfully theirs, front-end JavaScript architecture!

Will the birds be successful in the end? Will they defeat their bacon flavored foe? Let's find out together in another nail biting episode of Angry Birds of JavaScript!

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

Mighty Eagle Bird Attacks

In this post we will take a look at the Mightly Eagle who uses the most superior weapon of them all, a suite of tools that can organize and deploy all the other birds into battle against their soon to be vanquished foe. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

Over time the birds picked up RequireJS (Yellow Bird), JSHint (White Bird), Plato, Mustache (Orange Bird), and a bunch of other great tools, but all of them required a command line task to complete. It was getting quite annoying having to remember what was required to run each of these tools. In addition, it was easy to forget to run the tools to update their web application when necessary. Thankfully one day the Mighty Eagle introduced some tools to make things a little bit easier. The Eagle brought Grunt and Bowser to automate common tasks and to help easily bring in commonly used libraries that were necessary to e their applications.

However, during a recent invasion the pigs stole the birds' Gang of Foul book! As a result, one of the Big Brother Birds has been tasked to reclaim what has been stolen. He will use his overwhelming power of trickery to help destroy the pigs in order to take back what is theirs.

Grunt

Grunt is a task-based command line tool that is written in JavaScript and helps automate the build of your front-end application. The community has really grabbed on to this tool and as a result there are tons of plugins that you can choose from to automate things like CoffeeScript, handlebars precompilation, less support, JSHint checking, etc...

Several really large projects already use Grunt to assist their builds and other automation tasks such as Twitter, jQuery, Modernizr, Sauce Labs, and others.

Getting Started

In order to get started you just need to install grunt from node with the following command...

Once you've installed grunt you'll need 2 main things for each of your projects

Gruntfile.js
package.json

Gruntfile.js

You can create your own Gruntfile.js from scratch, you can copy a starter Gruntfile.js from the documentation, or there is a use a grunt-init gruntfile project scaffold. To install the scaffold follow the instructions from Grunt's Project Scaffolding page. The following Gruntfile.js is an example from Grunt's Get Started page...

package.json

The package.json describes your project's name, version, and any dependencies it might have such as grunt and any grunt plugins. You can copy an example package.json from the Grunt's Get Started page... (see below)

Grunt Plugins

Now that hopefully everything is setup, you can start using a whole suite of plugins to automate tasks. Here are a few interesting ones that you might enjoy...

grunt-contrib-coffee - Compile CoffeeScript files into JavaScript
grunt-contrib-compass - Compile Compass into CSS
grunt-contrib-concat - Concatenates files
grunt-contrib-connect - Starts a connect web server
grunt-contrib-csslint - Lints your CSS files
grunt-contrib-handlebars - Precompiles your Handlebar tempaltes
grunt-contrib-htmlmin - Minify your HTML markup
grunt-contrib-imagemin - Minify PNG and JPEG images
grunt-contrib-jshint - Validate files with JSHint
grunt-contrib-less - Compile LESS to CSS
grunt-contrib-nodeunit - Run Nodeunit unit test
grunt-contrib-watch - Run predefined tasks when files change
grunt-contrib-requirejs - Optimize RequireJS projects using r.js
grunt-contrib-uglify - Minify files with UglifyJS
grunt-contrib-yuidoc - Compile YUIDocs Documentation
... more ...

jQuery's Gruntfile

I pulled down jQuery from their GitHub repository to see how they use Grunt and the following is the output when get when executing the tool.

If you look closely you'll notice they update their git submodules, build a version of jQuery from it's modules, run JSHint against the built jquery.js and tests files, creates sourcemaps, and runs a special compare file size task. If you dig deep into their Gruntfile you'll find they've also setup a custom way to run their unit tests against Browserstack, which is pretty cool if you ask me ;)

Modernizr's Gruntfile

In the same way I pulled down the Modernizr repository and typed grunt qunit to watch their 746 unit tests execute and pass in 369ms using the PhantomJS headless browser!

Grunt Resources

The intent of this post wasn't to teach you all there is to know about Grunt, but to make you aware of it if you didn't know already. It is a very nice tool to help you automatic ALL THE front-end THINGS. Check out the following resources to help you unpack how to get started...

The Grunt Basics by Cary Landholt (@carylandholt)
Grunt.js Workflow by Merrick Christensen (@iammerrick)
Meet Grunt: The Build Tool for JavavScript by Andrew Burgess (@andrew8088)

Twitter Bower

For those of you that have used Node or Ruby you'll be familiar with npm or gems, however, there hasn't been anything like that for front-end browser scripts and styles... at least until now!

The Twitter Bower project seeks to solve that problem by providing a package manager for the web (HTML, CSS, and JavaScript).

Once you've installed bowser, then you can start downloading libraries! For example, if we wanted to pull down the latest version of jQuery we could just bower install jquery and you'll see the following...

Bower Resources

If you want to find out more about bower then I encourage you to check out some of the nice resources below.

Meet Bower: A Package Manager For The Web by Andrew Burgess (@andrew8088)
A RequireJS, Backbone, and Bower Starter Template by Jeffrey Way (@jeffrey_way)

Yeoman

The yeoman project is a scaffolding engine that works along with Grunt and Bower. You can think of yeoman as the scaffolding piece that can get your applications going quickly. In order to get started you need to install yeoman by using the following syntax...

Once yeoman is installed then you can generate a variety of different types of projects. In the following screenshot I asked yeoman to create a new webapp. It will ask me several questions along the way to tailor the application to my needs.

There are other scaffolds such as Backbone, AngularJS, etc... that you can install and get your project underway. You can view a list of more generators from the Yeoman GitHub page.

For example in the following screenshots I first create a new Backbone app and then immediately create a new bird model.

Yeoman is currently 1.0 beta and the website says there are some issues with Windows. I've been able to use it to some extend, but I'm sure there are some features that aren't yet supported, but the plan is to have it fully supported.

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Mighty Eagle Bird and you can also use the arrow keys.

Conclusion

Embracing Grunt, Bower, and Yeoman can help automate various parts of your development, testing, and deployment process. The community for these tools are very active and you can find plugins to help cater these to your application's needs.

There is one more front-end architecture technique that has been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: Big Brother Bird - Patterns

2013-04-10T00:05:00.000-05:00

Introduction

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

Big Brother Bird Attacks

In this post we will take a look at the Big Brother Bird who pulls out the big guns with his finite state machine and other proven design patterns of destruction. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

The birds knew how to program for the most part, but they never had a common terminology that they all understood to represent common scenarios they kept encountering. Then one day a Big Brother Bird came along and documented a set of common Design Patterns and them names and descriptions so they could all be on the same page when talking about architecture. Big Brother Bird ended up writing these patterns in a popular piece that became known as the Gang of Foul book.

However, during a recent invasion the pigs stole the birds' Gang of Fowl book! As a result, one of the Big Brother Birds has been tasked to reclaim what has been stolen. He will use his overwhelming power of trickery to help destroy the pigs in order to take back what is theirs.

Gang of Fowl Patterns

Creational Patterns

Abstract Factory
Builder
Factory Method
Prototype
Singleton

Structural Patterns

Adapter
Bridge
Composite
Decorator
Facade
Flyweight
Proxy

Behavioral Patterns

Chain of Resp.
Command
Interpreter
Iterator
Mediator
Memento
Observer
State
Strategy
Template Method
Visitor

Some These Patterns in JavaScript

Singleton

The most basic form of singleton is the object literal as shown below. We are basically just creating an object and there is one of them. Technically someone could Object.create on us, but for the most part this fulfills the singleton definition. You can find a more robust solution in one of the resources recommended near the end of this post.

Factory

A factory is a way to create new objects without actually using the new keyword. The idea is that there is something abstracted away from you in the factory method. In the following example we are aren't necessarily doing anything fancy, but you could imagine that we could add some custom code down the road and the external API wouldn't change, which is the point of this pattern.

Bridge

In the following snippet of code we are creating a small bridge between an event handler and the code that will be executed. By creating a little bridge it will enabled the executed code to be tested easier since it won't have a dependency on the element context that was passed by jQuery.

Facade

A facade is common place in front-end web development since there is so much cross-browser inconsistencies. A facade brings a common API to something that could vary under the covers. In the following snippet we abstract the addEventListener logic for various browser implementations.

Adapter

An adapter is a nice way to massage one piece of code to work with another piece of code. This can be useful when you need to switch to another library, but can't afford to rewrite much of your code. In the following example we are modifying jQuery's $.when method to work with the WinJS.Promise. This is some code I wrote back when I worked for appendTo when we were making jQuery working with Windows 8 apps. You can find this repository at jquery-win8.

Much of the jquery-win8 repository is not needed anymore since Jonathan Sampson has worked with the jQuery team to make sure the changes he made to the shim was added to the 2.0 version of jQuery as noted in the following blog post

Observer

We've covered the Observer pattern already in the Blue Bird past a while back in this series, but it is a powerful pattern that can help decouple various components. My recommendation is to use the postal.js library.

Many More Patterns

Inheritance

There are several ways to implement inheritance in JavaScript. It is good to know some of these patterns as you create new objects in your application.

Prototypal Inheritance

Pseudoclassical Ineritance

Chaining

In the front-end world chaining became popular by the jQuery library. It is actually a really easy pattern to implement. You essentially just have to return this from every function so that other functions can be immediately called. See the following for an example.

Encapsulating

We've already covered encapsulating in the Red Bird past where we talked about the IIFE pattern. This allows you to have public and private properties and methods to help encapsulate your code. The follow is a very brief example of that. Check out the Red Bird post for more details.

Finite State Machine

One of my favorite pattern is the Finite State Machine. My friend Jim Cowart (@ifandelse) created the Machina.js Library to implement this pattern in JavaScript. The following is an example of using states to describe the game of Angry Birds. For more information check out his blog post and GitHub repository.

Recommendations

In addition to learning these patterns I would recommend that you pick one of your favorite libraries and start to source dive into their repository. There is a wealth of information you can learn there. At first it could be semi-overwhelming, but over time you can glean a lot from developers who really know some of these patterns. You might try just looking at one particular method and start picking it apart. If you aren't sure exactly where to look for a particular method why don't you pick jQuery and use James Padolsey's (@padosley) jQuery Source Viewer to help find it for you?

Additional Resources

There are far too many patterns for me to list here. Many have blogged about these before me and will continue to. If I have missed any good ones please let me know.

JavaScript Design Patterns by Joe Zim (@JoeZimJS)
Understanding Design Patterns in JavaScript by Tilo Mitra (@tilomitra)
Learning JavaScript Design Patterns by Addy Osmani (@addyosmani)
JS Patterns by Shi Chuan (@shichuan)
JavaScript Patterns by Stoyan Stefanov (@xyz)
JavaScript: The Good Parts by Douglas Crockford

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Big Brother Bird and you can also use the arrow keys.

Conclusion

The good news is you don't have to know all the answers to be successful in front-end web development, but what does help is knowing some of the common patterns that come up again and again during development. Once you get accustomed to these patterns it will become easier talking about these architectural solutions and figure out solutions should come quicker. Take some time and look through the recommended resources above and start mulling over some of them for yourself.

There is one more front-end architecture technique that has been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: Orange Bird - Templating

2013-04-09T00:05:00.000-05:00

Introduction

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

Orange Bird Attacks

In this post we will take a look at the Orange Bird. He first starts out small with a simple template, but then expands itself into a DOM blast that will surely send the message that the birds mean business. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

For the last several years we have seen a trend that more and more work is being done on the front-end of web development. We communicate to the back-end via Ajax or Web Sockets and then display the data somehow in the UI. The birds found themselves mostly using string concatenation to build up the rich user interfaces, which resulted in a lot of code that was boring and also prone for errors. Thankfully an Orange Bird came along and said, "Hey, isn't there something better than this? Can't we separate our view from our data somehow?", and that is how templates became to be in the bird world. The Orange Bird borrowed templating libraries from the humans such as Underscore.js and Handlebar.js to help fit this need among the foul.

However, during a recent invasion the pigs stole the birds' templating libraries! As a result, one of the Orange Birds has been tasked to reclaim what has been stolen. He will use his exploding power to help destroy the pigs in order to take back what is theirs.

Why Use a Templating Engine?

Before we get into what templating engines I recommend let's first look into why we might need one in the first place. The more I develop I try to find ways to separate the various parts of my application. I start to feel dirty when too much stuff is going on in the same place. Take a look at the following piece of code and tell me how you feel...

Yeah, I don't like all of the string concatenation either. I prefer not to have a bunch of presentation inside of my code if I can help it. On the plus side, it does work. You can see the output of the code in the following embedded jsFiddle.

So, what can we do instead? This is where some type of templating engine can help us simplify our code and separate our markup from our code.

Underscore.js

We will first look at the template method in the Underscore.js library. I tend to use Underscore in all of my projects these days so I already have the power of its templating engine loaded. If what I am doing is pretty simple, then I mostly default to use Underscore for templating. However, as you'll see there are some limitations which make the next library we will look at much more appealing.

Take 1

The following is the above code rewritten using Underscore's template. You'll notice that the code piece has been greatly simplified! Whoo hooo!

The bulk of the work is being done by the template to explode it into a bunch of markup! As you can see to the left our orange bird looks quite different now lolz ;)

We moved the layout into a script tag in our markup and gave it an identifier. The template has special markers <%= expression %> to denote where it should evaluate data passed to it. You can also use the <% statements %> symbols to put whatever JavaScript you want in there (think loops, branching, etc...)!

You can play around with the above code snippets in jsFiddle.

As Uncle Ben said, "With great power, comes great responsibility."

Being able to put whatever code you want in your template isn't the best idea in the world. By putting the date manipulation logic in the template it makes it really tough to Unit Test that piece of code. Just imagine if we started cluttering our template with more and more code blocks that like. If you go this route, then you aren't really solving the original problem at hand which was combining presentation and logic.

Take 2

The following is another take at using Underscore, but this time doing the data manipulation before. The downside is that I'm using the _.map() method and converting each date property to the relative version. There is some overhead in me having to loop over the data before handing it off to the templating engine.

We were able to remove the date logic in the following template since we did that work above in the JavaScript before calling the template to do its work. The result is better than what we started with, but it could be better.

You can play around with the above code snippets in jsFiddle.

Why use Underscore.js?

Pros

You can stick arbitrary JavaScript in the template
It is very small
If you are already using Backbone.js then you have it
If you are already using Underscore.js then you have it
You can Compile the Templates
Can Run on the Client and the Server
Can you think of others?

Cons

You can stick arbitrary JavaScript in the template
Doesn't have the concept of this in templates
Can you think of others?

Handlebars.js

Overall I tend to prefer the Handlebar.js over Underscore's template engine. Handlebars encourages you to separate your presenting from your logic, it is faster, and it provides a mechanism to precompile your templates that we will look at here in a bit.

First let's take another look at the problem we have been addressing throughout this post. The following code uses Handlebars to template the solution. The code is still pretty clean as was the previous version. You'll notice that I am defining a custom helper called fromNow that can be used in the template.

And now for the templating syntax below. The syntax feels much more terse to me compared to Underscore, which I like. Inside the template we are using the fromNow template helper to convert the time. This is nice so we don't have to map over our array beforehand like we did with Underscore or put the logic in the template itself.

You can play around with the above code snippets in jsFiddle.

Precompiling Your Templates

I briefly mentioned above that one of the things I liked was that you can precompile your templates. What does that even mean!?! Well, with both Underscore and Handlebars you need to compile your template before you use it (technically you can do it in one step with Underscore, but it still has to be done under the covers). Compiling a template is good to do if you plan on using it more than once or if you just want it done before you need it.

However, with Handlebars you can go one step further and compile the template on the server and include that on the front-end. This means that you can reduce that amount of work needed on the front-end AND there is a trimmed down version of the handlebars runtime that you can use that has only the parts necessary needed to execute a template (not compile it)!

How cool is that? If your answer was "It's just about as cool as Batman riding on a Rainbow Unicorn alongside dolphins!", then you were right! Congratulations ;)

So how does that work exactly? Well, first you install Handlebars on your server using Node...

Then you take your template contents (what is between the script tags) and save it to a file. In our case let's save it as tweets.tmpl. How run the handlebars precompiler against your template file.

Once all of that is done you have a precompiled version of your template that you can now include on your front-end application like the following...

Now that your template is available on the page you can access it by asking Handlebars for the precompiled version and you are all set to start using it!

Why use Handlebars.js?

Pros

Its a Logic-less Template Engine
You can Precompile Templates on the Server
Supports Helper methods
Can Run on the Client and the Server
Supports the concept of this in templates
It iss a superset of Mustache.js
Can you think of others?

Cons

Can you think of any?

What About Other Templating Engines?

That is a great question. Maybe your needs are different than mine or maybe you just don't like one of the engines that I've mentioned. If that is the case then you should check out a great tool created by Garann Means (@garannm) called the Template Chooser. The chooser will ask you a set of questions that will help determine which templating engine is right for your needs. The following is an example of what the chooser looks like...

Additional Resources

An Introduction to Handlebars by Gabriel Manricks (@GabrielManricks)
Best Practices When Working With JavaScript Templates by Andrew Burgess (@andrew8088)
Demo of Handlebars, and Why You Should Consider a Templating Engine Raymond Camden (@cfjedimaster)
HTML's New Template Tag: Standardizing Client-Side Templating by Eric Bidelman (@ebidel)

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Orange Bird and you can also use the arrow keys.

Conclusion

Mixing markup in code can lead to some nasty looking code that is cumbersome, monotonous, and difficult to maintain. Being able to split these apart is a great benefit for developers to simplify their code and help keep each concern in its place. Thankfully libraries like Underscore and Handlebars help us out by providing a clean way to describe presentation apart from logic. THere is a lot of freedom depending on what library you use, but I'd encourage you to look around and find one that works for you. The answer to that may be not to use one and that is fine.

There are many other front-end architecture techniques that have been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: Green Bird - Mocking

2013-04-08T00:05:00.000-05:00

Introduction

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

Green Bird Attacks

In this post we will take a look at the Green Bird that can penetrate all of those hard to reach places and will mock and spy those stealing swine right where it hurts!. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

For the most part the birds are all front-end web developers only and don't focus on the back-end much at all. As a result the birds have a symbiotic relationship with the Water Buffalo. The Buffalo write the back-end of the application and the birds develop the front-end. The problem with this arrangement is that while the back-end is being developed the birds are left twiddling their feathers until the Buffalo are finished. However, once the back-end is done the pressure is on the birds to deliver while the Buffalo sit idle by the watering hole in the shade. Thankfully, a while back, a Green Bird proposed the idea of mocking the back-end services so they could make progress on the front-end while they waited for the Buffalo to finish their work! The Green Bird introduced a couple of handy libraries to make mocking a much easier process.

However, during a recent invasion the pigs stole the birds' mocking libraries! As a result, one of the Green Birds has been tasked to reclaim what has been stolen. He will use his overwhelming power of trickery to help destroy the pigs in order to take back what is theirs.

The Twitter Application

We are going to take a look at a simple Twitter application that gets the tweets from a specific username. Why Twitter? Well, the Angry Birds have a special relationship with Twitter, especially the Blue Bird ;)

The following application grabs data from Twitter using JSONP. I thought about using Backbone.js to write the little application, but thought that might be overkill to introduce the mocking concept. You will also notice I am not using a templating engine and that is on purpose. Another Angry Bird will be introducing that concept ;)

The above code snippet is running in the below embedded jsFiddle. Feel free to run the code and launch the editor to play around with it.

Twitter Application using api.twitter.com

The data that comes back from Twitter looks something like the following screenshot...

Mocking Static Data

What if Twitter goes down, is unstable, or you just want to test your application without having internet access? This is where being able to mock the back-end service can be really helpful. Thankfully we can use a jQuery library called Mockjax. All you need to do is call $.mockjax and provide a URL that you want to listen for and a response that you want to be returned. The following is an example of mocking the call to api.twitter.com and passing back some static data.

Not only is this pretty cool and can be helpful for developing the front-end independent from the back-end, but it also very handy when writing Unit Tests that use Ajax.

The above code snippet is running in the below embedded jsFiddle. Feel free to run the code and launch the editor to play around with it.

Twitter Application using Mockjax

The data that comes back from Mockjax looks something like the following screenshot...

Mocking Dynamic Semi-Random Data

One of the downsides of this technique is that generally I am pretty unimaginative and lazy when making static data examples. I typically end up have the same object and just increment some of the values by 1 or something. That is fine and all, but it is a nuisance, it takes time, and it doesn't really give you an idea of what the UI could look like. Thankfully there is another nice library for that called mockJSON. You provide a template of what you want your data to look like and then you give it some metadata about what types of fields you want, how many, etc... The following is how I rewrote the previous example, but will randomly generate anywhere from 5 to 10 twitter objects to be displayed.

The above code snippet is running in the below embedded jsFiddle. Feel free to run the code and launch the editor to play around with it.

Twitter Application using Mockjax & mockJSON

The data that comes back from Mockjax with mockJSON looks something like the following screenshot...

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Green Bird and you can also use the arrow keys.

Conclusion

It can be difficult to develop both the front-end and back-end independently. Thankfully there are some techniques and libraries today that can enable the front-end to develop and prototype separate from the back-end progress. The mocking techniqiue with static data can also be helpful when Unit Testing your code as well.

There are many other front-end architecture techniques that have been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: White Bird - Linting

2013-04-04T00:19:00.001-05:00

Introduction

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

White Bird Attacks

In this post we will take a look at the White Bird who appears to be seemingly harmless, but when it pulls out it's strict coding style and bursts of quality checks the hogs are sure to squeal. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

The birds all learned how to program in a slightly different way. Some birds were self-taught and some birds went to college for computer science. Even among those groups there were a wide range of experiences and talent. When the birds got together to build their first large application it was a huge disaster. Each bird thought their coding standard was the "right way" and it started to become an issue. One day a wise White Bird came along and suggested that they come up with a common set of coding practices to follow. In addition, the White Bird introduced a few tools to help them conform to a standard and to help find issues and concerns early before they became a huge issue later.

However, during a recent invasion the pigs stole the birds' coding standards document and their code quality tools! As a result, one of the White Birds has been tasked to reclaim what has been stolen. He will use his overwhelming power of quality to help destroy the pigs in order to take back what is theirs.

JavaScript Coding Standards

There are many coding standards out there to choose from. The most important thing is that you pick one and stick to it. If you are working with a team, they should also agree on some standard. If you can't find a standard you exactly agree on, then find one that is close and make some exceptions.

By doing so you'll find that...

A developer will be able to make sense of other code more quickly
Merges in your code repository won't be as awful
Having a standard will actually reduce defects
The codebase will feel more unified
Disagreements about who is "right" will lessen
... insert your benefit here ...

Here are some of the coding standards that I am aware of...

Douglas Crockford's Code Conventions for the JavaScript Programming Language
Rich Waldron's (@rwaldron) Idiomatic.js - Principles of Writing Consistent, Idiomatic JavaScript ← Recommended
jQuery's JavaScript Style Guide ← Recommended
Google's JavaScript Style Guide

Addy Osmani (@addyosmani) has a nice post entitled JavaScript Style Guides And Beautifiers that covers some of these styles in depth with examples showing how to abide by the standards recommended.

JavaScript Linting

A linter is a tool that helps find errors and possible issues with your code. In many cases it can help enforce whatever coding standard you chose from the above list.

There are actually several JavaScript linters out there, but the one I like the best is JSHint created by Anton Kovalyov (@valueof). It grew out of a community effort to fork the popular JSLint library written by Douglas Crockford. I've enjoyed watching the project grow and see bugs and new features being added. JSHint has a lot of options that you can choose to opt-in or opt-out of which enables a team to figure out what works best for them.

Some of the standard checks that JSHint can verify include...

The use of === instead of ==
Using variables that aren't defined
Declaring variables that are never used
Declaring functions inside of loops
And lots more...

For a full list of options see the JSHint Docs.

Some of the more recent additions that I've really enjoyed include:

maxcomplexity - Maximum cyclomatic complexity (see following Wikipedia quote)
maxstatements - Maximum number of statements allowed in a function
maxparams - Maximum number of parameter allowed in a function
maxdepth - Maximum depth allowed in a function
maxlen - Maximum length of line in code

"The cyclomatic complexity of a section of source code is the count of the number of linearly independent paths through the source code." --http://en.wikipedia.org/wiki/Cyclomatic_complexity

The following errors are generated by JSHint after running it against the above code snippet.

Thankfully you don't have to run JSHint from the website every time to check your code. There are several ways to integrate it into your code editor of choice:

VIM Plugin (jshint.vim)
Sublime Text 2 Extension (Sublime Linter)
TextMate Bundle (JSHint TextMate Bundle)
Visual Studio Web Essentials
Eclipse IDE (JSHint Integration)

In the Mighty Eagle post we'll talk about another way to use the JSHint from the command line and automatically.

JavaScript Analysis

Code linting is great, but sometimes it is nice to get a high level overview of your codebase and then be able to drill down and analyze small portions of your application.

Thankfully there is a tool called Plato that will analyse your code and provide a visual report where you can view the complexity of your application. The tool runs in Node and you can install it using npm install plato -g.

Once installed you can run the tool on the command line by plato -r -d report myDirectory, which will recursively analyse the code in the myDirectory folder and export the results to the report folder.

If you were to run the report on the jQuery source code it would look much like the following report. As you can see, the average number of lines is decreasing over time, which is good. The maintainability is decent and then a breakdown of the maintainability of each JavaScript file is listed in a bar chart. Further down in the report there are a bar charts for Lines of code broken per file, Estimated errors per file, and also JSLint errors per file.

If you drill into one of the particular files from above you'll see a view that looks like the following. The nice part about this report is that it breaks down each function into complexity and lines of code in a way that is easy to grasp. You can quickly jump to various parts of the file to review the concerns the tool is identifying.

You can view the above jQuery Report from Plato's GitHub repository.

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the White Bird and you can also use the arrow keys.

Conclusion

Front-end web applications can get complicated quickly. If your developers aren't all on the same page then things can fall apart in a heartbeat, especially on a large project. Having a unified coding standard and implementing some tools to help find issues before they become a problem can really help to make your project a success.

There are many other front-end architecture techniques that have been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: Black Bird - Backbone

2013-04-03T00:05:00.000-05:00

Introduction

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

Black Bird Attacks

In this post we will take a look at the Black Bird who will use the organized approach of the Backbone.js bomb to fight these porkers. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

The birds used to write their jQuery code like it was a tangled smorgasbord of worms. They would mix up their views, models, and presenter logic all together in a big interconnected pile of grubs. After a while one of their ancestors, a Black Bird, introduced the Backbone.js library and showed them a different way to think about developing front-end web applications. However, during a recent invasion the pigs stole Backbone.js from the birds and carried it back to their filthy sty.

One of the black birds has been tasked to reclaim what has been stolen. He will use his explosive power of organization to help destroy the pigs in order to take back what is theirs.

Tangled Smorgasbord of Worms

Let's take a look again at the following application that the Blue Bird dealt with in a previous attack. Instead of adding messages to untangle the mess we are going to introduce how using Backbone.js can help us out. Here is the running application below...

It appears Plunker is not embedding correctly at the moment. The application is a simple Netflix search interface that will show the results from Netflix. If Plunker doesn't start working soon I will move the demo somewhere else. Sorry for the inconvenience.

And to refresh your memory, here is the supporting code used for the above web application. You should notice that a lot of concerns are all being mixed together (DOM events, Modifying the View, AJAX Communication, etc...)

Do you see the problem? It is so tempting to write code like the above, but I hope you see that it can be a bear to work with and maintain. Don't worry, we have all written code just like the above. The good news is that we don't have to continue to write it that way. Let's take a look at what Backbone.js is and how it can help us out in this situation.

There are many other MV* front-end frameworks (Knockout, or AngularJS, EmberJS, & others) that could also bring structure to the above code. I would encourage you to pick a tool that you can be productive with and get comfortable with it.

Backbone.js Basics

Backbone.js has several pieces that can all work together to make a web application. You don't have to use all of these components, but they are available if you choose to use them.

Model - Represents data and logic surrounding it
Collection - Ordered sets of Models
View - A module backed by a Model with a render method
Router - Mechanism to provide linkable, sharable URLs
Event - Observer Eventing module
History - Provides the ability to maintain history (back button support)
Sync - Extendable component providing RESTful communication to the server

Refactoring the Tightly Coupled Code

Let's take a stab at refactoring the above jQuery mess and use Backbone.js to split out some of the various concerns.

I'm not going to dive into all of the above pieces in this post, but will focus on 3 of the main pieces (Models, Collections, and Views). I'll touch on some of the Sync concerns, but as part of the other topics. I'll have resources listed at the end if you want to dig deeper into any of these topics.

RequireJS

Before we get into the Models, Collections, and Views I want to show you how we took out all the scripts from the index.html page and used RequireJS to help us out.

If you've never seen RequireJS before then you might want to check out the previous Yellow Angry Bird Post about RequireJS.

main.js

The above code is defining the paths for jQuery, Underscore, Backbone, Postal, and Bootstrap. We needed to shim Underscore, Backbone, and Bootstrap since they are not defined as AMD modules.

Then the require function is called to request a set of dependencies before the callback is invoked. At that point, jQuery and all the other views and models will be ready for usage!

Models

We are going to make 2 models (Search and Movie) to represent the above application.

The following Search Model is really simple and its main job is to respond when the term property has changed. We are using Backbone's events (Observer Events) to listen to changes on the model and then propagating the message to Postal.js (Mediated Events). For more information about those terms and how they are different you can reference the Blue Angry Bird Post about events.

search.js

The following Movie Model doesn't have a lot going on as well. It's main purpose is to parse the data returned from the server and map the results to something a little more manageable. In this case we are only concerned with the releaseYear, rating, and name properties.

movie.js

Collections

As we described above, collections are just a set of models. The following code is just a set of Movie models. The collection is where you define where to get the list of models from the server. The back-end for this application is Netflix and their endpoint is a little complex so we are using a function to dynamically build that URL. We also defined a parse method to get directly to the array of contents that will be mapped to Movie models. Since this AJAX call will be using JSONP we also needed to override the sync method and provide some additional options.

movies.js

Views

I see the View as more of a Presenter than the typical MVC View you might normally think of. Anyway, We have 2 views in this application that we will briefly look at.

The following SearchView handles the interactions with the DOM and the Model. The events property primarily is used to listen to DOM events and in this case is watching for clicks on the button or previous search links. Changes to these elements will be stored in the model as term. The initialize method sets up some events listening for changes in the term property. If term changes, then portions of the UI will change accordingly.

search-view.js

The MovieView below is a little different than the above view. The first thing to point out is the weird text!movie-template.html. I am using the text.js plugin for RequireJS that let's us pull text resources as part of the dependency chain. This is really helpful for markup files used when using a templating engine or possibly a CSS file that is associated with a particular widget. Inside of the initialize method we are subscribing to a change in the term and then asking the collection to fetch the information from the server. The render method gets called after the data is retrieved from the server and we use Underscore to template the results to the DOM.

movie-view.js

The following is the template file in case you were wondering. I'm using Underscore's templating engine which is similar to John Resig's micro-templating implementation that he wrote years ago. There are other templating libraries available, but I used this one because it comes with Underscore which is a prerequisite for Backbone. If I needed something more featured I would have used Handlebars instead, but that is a story for another Angry Bird ;)

movie-template.html

Additional Resources

I only scratched the surface on all the things you can do with Backbone.js. If you are interesting in learning more about these concepts you may want to look at some of the following resources.

The following resources were taken from the Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources blog post.

Backbone.js API
Annotated Backbone.js Code
Backbone Extensions, Plugins, & Resources
Backbone Boilerplate
Backbone Fundamentals eBook by Addy Osmani (@addyosmani)
Peep Code: Backbone.js Video Series by Geoffery Grosenbach (@topfunky) and David Goodlad (@dgoodlad)
The Pragmatic Bookshelf: Hands-on Backbone.js by Derick Bailey (@derickbailey)
Backbone.js Screencasts by Joey Beninghove
Pluralsight: Backbone.js Fundamentals by Liam McLennan (@liammclennan)
The Skinny on BackboneJS by Ben Howdle (@benhowdle)
Backbone Tutorials
Backbone.js Tutorials via Nettuts
Exploring Backbone.js Series by Jack Franklin (@jack_franklin)

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Black Bird and you can also use the arrow keys.

Conclusion

Front-end web applications can get complicated quickly. Before you know it you have a pile of interconnected mess if you are not careful. Thankfully Backbone.js provides components to help you split out your application into consumable pieces that each have their own purpose. Thank you Black Bird for returning Backbone back to the birds. They will be able to rest easier knowing things are organized and in their proper place.

There are many other front-end architecture techniques that have been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: Yellow Bird - RequireJS

2013-04-01T00:05:00.000-05:00

Introduction

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

Yellow Bird Attacks

In this post we will take a look at the Yellow Bird who comes with a RequireJS speed booster and dynamically injects scripts against those pesky swine. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

The birds used to manually add script tags to their HTML files. At first this wasn't an issue, but when their application started to grow larger and more complex it started to become difficult for them to organize their code, figure out dependencies, and determine a strategy for optimizing performance. Thankfully they were introduced to the RequireJS library which provided them a way to manage their code into modules, load their scripts asynchronously, manage their dependencies, and provide an easy way to optimize. Unfortunately the pigs, during a recent invasion, stole the RequireJS library from the birds.

One of the yellow birds has been tasked to reclaim what has been stolen. He will use the optimization power of speed to help destroy the pigs in order to take back what is theirs.

Broken Application

Let's first start with a simple little web page that contains just a few scripts. You'll notice that I'm loading 3 popular libraries (jQuery, Underscore, and Postal) and some custom code at the end.

The above code looks pretty straightforward, but when I end up running the page I get the following error in the dev tool's console...

Fictitious Internal Dialog: "WHAT!?! I don't see any each method anywhere. What's up with that? Ohh man, it looks like the exception occurred in postal.min.js somewhere. FOUND A BUG... see if I use that library again. But, wait!?! Ohh, maybe something else is going on here."

So, the real issue isn't a bug in postal.js, the issue is in that postal.js has a dependency on underscore.js. The problem is that underscore should have been loaded before postal.js. Simply rearranging the script tags could easily solve this issue. In the above case the fix was trivial, but imagine how cumbersome this could be once the project starts to get large and requires lots of scripts.

RequireJS Basics

Before we go and look at how we could fix the above situation using RequireJS, let's first take a high level overview of what the library is doing for us. RequireJS is an Asynchronous Module Loader and the API it provides allows us to define and require modules. Both functions are really easy to understand so let's take a look at them.

define method

In order to create a module you need a name, a list of dependencies, and a callback function.

require method

At some point in your application you will need to use the require function to kick things off.

Fixed Application

Using RequireJS I took the above little application and rearranged some things. You should notice that the following markup removes all the script tags except one, which points to the require.js library. RequireJS knows where to start because we add an HTML5 data-main attribute describing where the main script is located.

The main script has a configuration section inside of it where you can assign aliases to existing AMD modules and also shim libraries that were not previously defined. Although jQuery and Postal define themselves as AMD modules we included them in our configuration because they are not located alongside main.js.

You don't have to include in your config any custom modules you define in your application. You can refer to those by their file path and name.

Optimize

Our application only has 5 script files in it, but as you know our app will only continue to add additional scripts. So, it would be nice if there was an easy way to combine and minify our scripts for better production performance. The nice thing is that by using RequireJS we have already defined the dependencies of our application.

Thankfully there is a tool called r.js that takes this dependency information and uses it to generate a combined and minified script. You can install the tool with the Node Package Manager npm install requirejs

You could provide all the command line argument to the tool in the console, but I prefer making a build config file like the following to define all of its settings before I run it. You can find a comprehensive list of settings from the official GitHub repository.

Once you've defined your build.js file then you let r.js know you want to use it. The following command will get you going... r.js -o build.js. You can see the output of the tool in the output below.

Additional Resources

I only scratched the surface on all the things you can do with RequireJS and the r.js optimization tool. If you are interesting in learning more about these concepts you may want to look at some of the following resources.

Jack Franklin's (@jack_franklin) Introduction to RequireJS article
Jeffrey Way's (@jeffrey_way) A RequireJS, Backbone, and Bower Starter Template screencast
Cary Landholt's (@carylandholt) RequireJS Basics video
Jonathan Creamer's (@jcreamer898) Using Require.js in an ASP.NET MVC application article

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Yellow Bird and you can also use the arrow keys.

Conclusion

Front-end web applications can get complicated quickly. It is nice to have a way to provide some structure, dependency management, and an easy way to optimize the final result. Thanks to the power of Yellow the birds have regained their trusty RequireJS tool for use in their next application.

There are many other front-end architecture techniques that have been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: Blue Bird - Events

2013-03-28T00:07:00.001-05:00

Introduction

Check out the series introduction post for a list of all the birds and their attack powers.

Previous Attacks

Red Bird - IIFE

Blue Bird Attack

In this post we will take a look at the Blue Bird who triggers events and messages that scatter to infiltrate the pig's castle. Slowly, one by one, the birds will take back what it theirs to keep!

What Was Stolen by the Pigs?

The birds used to build their web applications with components having hard dependencies on each-other. They eventually started to learn to reduce tight coupling by introducing events and messages. Unfortunately the pigs, during their invasion, stole the birds' observer secrets.

One of the blue birds has been tasked with taking back what has been stolen and restore loose coupling components.

Sample Application

In order to unpack the need for messages we will look at the following web application to search for movies from Netflix. We will uncover how this application was originally coded and then refactor along the way.

Tightly Coupled Code

The first version of the above application was coded using the following JavaScript code. Take a look at the code and let it start to sink in for a little bit. It may be painful, but please bar with me for a moment ;)

The above code sample is a typical jQuery example that you can find across the internet. The snippet works, but there is a lot of different things happening all in the same place. You can find event handling, data retrieval, and data manipulation all mixed together. You can imagine that over time this code might continue to grow and grow and become more and more prone for errors.

Before we get too far, let's take a side trip and look at what messages are and what types exist.

Types of Messages

Observer Events

An observer event is probably one that you are most used to if you are familiar with front-end web development. In relation to the DOM you can think of this as adding event handlers to an element. The element has a direct reference to the callbacks that will be invoked when the event type occurs.

Example

Mediated Events

A mediated event or message has become more common the last several years in front-end web development. The main idea here is that there is another entity that keeps track of publishing and subscribing of messages. The main difference between this and Observer events is that Mediated events aren't tied directly to the subject that invoked it.

Example

Implementations

There are several libraries out there that facilitate mediated events. The following is a list of various libraries that you may want to choose from. My recommendation is that you look at Jim's postal.js library.

Ben Alman's (@cowboy) Tiny jQuery Pub/Sub library
Peter Higgin's (@phiggins) pubsub.js library
Jim Cowart's (@ifandelse) postal.js library ← Recommended
Dustin Diaz's (@ded) reqwest library
appendTo's (@appendTo) AmplifyJS Pub/Sub component

Hybrid Events

There is another type of event that is sort of a hybrid between observer and mediated. This type looks like a mediated event, but if you look hard enough there you could actually trace the origin of the event back to the original subject. A good example of this is jQuery's delegated event model. Delegated events are great, but it is based on the concept of events bubbling up the DOM and therefore we can trace where it came from.

Example

By the way, I don't recommend using the $._data() method as it is undocumented and therefore not guaranteed that it will be available in future versions of jQuery. It is an internal helper method that jQuery currently uses under the covers. However, I did want to show you that there is a way to poke around and get at information that the subscriber shouldn't have in a real "mediated event", which is why I'm calling it a hybrid event. Don't get me wrong, I love jQuery's delegated events. I just wanted to show how it is a hybrid of the two above concepts.

Which One Should Be Used?

That information is all fine and good, but what type of event/message should you be using and when? That is a great question and one that my friend Jim addressed in a recent post that he wrote. The following is a quote from his article...

"...use observer 'locally', inside a component, mediator 'remotely' between components. No matter what, be ready to use both in tandem.' --Jim Cowart

Jim recommends using observer events (jQuery's .on() method) when communicating within a module and to use mediated events (postal.js) when communicating between modules.

Another technique that Jim brings up in his article is to promote observer events into mediated events, which gives you the both of both worlds. He has some nice examples showing how that could look. I encourage you to take a look at his article referenced below in bold.

Additional Resources

If you are interesting in more information about the above concepts you may consider looking through some of the following resources about events and messaging.

Jim Cowart's (@ifandelse) Client-side Messaging Essentials article
Addy Osmani's (@addyosmani) Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability article
Rebecca Murphey's (@rmurphey) Loose Coupling with the pubsub Plugin screencast

Loosely Coupled Code

I was tempted to write the following code using Backbone.js or create constructor functions, but in order to keep it simple and convey the idea of messaging I tried to remove all of that. So, this probably isn't what you'd have in your code-base, but hopefully it gets the point across.

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Red Bird and you can also use the arrow keys. If it takes you too long to destroy the pigs you might want to consider pressing the space bar several times ;)

Conclusion

Using events and messages across your web application can help with communication. Events allow a component to communicate with itself and messages can enable other components to listen in without having a hard dependency.

There are many other front-end architecture techniques that have been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript: Red Bird - IIFE

2013-03-25T00:01:00.001-05:00

Introduction

A diabolical herd of pigs stole all of the front-end architecture from an innocent flock of birds and now they want it back! A team of special agent hero birds will attack those despicable pigs until they recover what is rightfully theirs, front-end JavaScript architecture!

In this post we will take a look at the Red Bird who attacks with the force of their trusty IIFE, the basic block of all privacy.

What Was Stolen by the Pigs?

For ages the birds used to litter the global namespace (the window object) with their custom objects and functions. Over time the birds slowly learned techniques to protect their objects from the global namespace, however, since the recent pig invasion all of their anti-global secrets have been stolen! Thankfully the birds are fortunate that a one foul exists with the knowledge of this secret and plans to attack the pigs to unleash what is rightfully theirs.

How Objects Become Global?

There are several ways that an object can become global. Part of the battle is just knowing the various ways.

1. Declaring an Object in the Window Scope

In the following example there two variables declared, type and attack. These variables were declared in the top level scope and therefore are accessible off of the window object.

2. Not Declaring an Object in Any Scope

One of the most dangerous and easiest things to do in JavaScript is to accidentally declare a global variable when you didn't mean to. If you forget to declare a variable then JavaScript declares it for you as a global! This is usually not what you meant to do and could expose parts of your application that you didn't intend.

3. Specifically Adding an Object to the Window

You also have the opportunity to expose variables to the global namespace intentionally. You can easily do this by accessing the window object and adding a property or method manually. It isn't a good idea to use this technique deep inside your code, but it is worth nothing that you can.

Why Are Global Objects a Problem?

Conflicts within Your Code

There is a risk that developers within your own company may define the same function, method, or property that already exists in your application. If you have no mechanism to reduce the number of items in the global namespace your risk of accidentally reassigning a variable grows as your application gets larger and more complex.

You may dismiss this reason because you have rigid code reviews and all your developers know your codebase inside out. If that describes you, then check out the next reason ;)
Conflicts with Your Code and Third-Party Libraries

Another danger of having multiple global objects is that your code could conflict with third-party libraries that you are using. There are a lot of libraries, plugins, and frameworks out there and not all of them are as aware and conscious about keeping their global variables to a minimum. Your code and the libraries you include could clash and override each-other's behavior which can cause unexpected results.

You may dismiss this reason because you deeply scrutinize all third-party libraries that your team uses and are fully aware of what global variables are exposed by these libraries. If that describes you, then check out the next reason :)
Conflicts with Your Code and Browser Add-ons/Extensions/Plugins

The final danger of having multiple global objects is that your code could conflict with the browser itself. What!?! Lets take Google Chrome for an example. Chrome's add-ons are JavaScript based and all of your installed add-ons run on your web page when it is loaded. You never know what add-ons your users have installed and as a result there is a risk that those add-ons will expose global variables that conflict with your code-base.

Does this seem far-fetched? Well, it can at first, but I've actually seen a high profile website (not going to mention which one) run into this very problem. I was trying to use the website and it was broken. I knew the developer so I reached out to him. After some back and forth it turned out I had an add-on installed that broke the website. I contacted the add-on author and they updated their code and now all is fine.

Various Ways to Protect Yourself

Although the above code snippets were very small and simple, they all exposed way too many variables to the global namespace. So, how do we protect ourselves?

Object Literal

The easiest way to help prevent global variable proliferation is to protect yourself with an object literal that limits gathers all objects that would have been global and attaches them to once central object.
Immediately Invoked Function Expression

The Immediately Invoked Function Expression (IIFE) is another technique to get around the global issue. This technique is more complicated than the Object Literal, but provides much more power as well. This technique allows the developer to expose public and private properties and methods to the consumer.

Before we get into what this looks like, lets work through some of their weird syntax that we are about to see. The scoping of variables in JavaScript is determined via the function scope and not block scope. So, if you have a variable declared inside an if statement for example it would be available everywhere inside its containing function. This might seem a little jarring to some developers that are used to C, C++, C#, Java, or similar languages.

So, we are going to use this functional scope idea to create an anonymous function (function with no name) and immediately invoke it.

Unfortunately, the above snippet doesn't work in JavaScript because it can't parse it correctly. The idea is solid, but the implementation is off just a little bit. Thankfully, there is an easy way to let JavaScript know that we know what we are doing and that is to surround the expression with an extra set of parenthesis.

The following pattern is known as the Revealing Module Pattern. You should notice the use of the IIFE to create the special functional scope and the note-worthy part is the end where you return the parts of the scope that you want to be public to object and anything not returned will be private.

You may also run across this alternate syntax that is popular in many libraries and frameworks. The pattern uses the IIFE, but this one passes in the global variable to use as a namespace. The window.bird = window.bird || {} code snippet is a fancy way to check if the bird object already exists and if it doesn't then to create a new one. Whatever gets added to the object from within the IIFE becomes public and whatever memory isn't attached to the object stays private. The nice thing about this pattern is that it can be repeated and build up a library with various components.

Attack!

The following is a simple Angry Birds clone using boxbox, a framework for the box2dweb JavaScript physics library, written by Bocoup's Greg Smith.

Press the space bar to launch the Red Bird and you can also use the arrow keys.

Conclusion

These techniques are vital for a front-end application so that it can protect itself from other code and it also gives the opportunity to structure your code in a way that is encapsulated from its surroundings.

There are many other frotn-end architecture techniques that have been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!

Angry Birds of JavaScript Series

2013-03-25T00:01:00.000-05:00

Introduction

Meet the Special Agent Hero Birds

Over the course of the next several weeks you'll be introduced to the following team of super hero birds...

Red Bird

The Red bird attacks with the force of their trusty IIFE, the basic block of all privacy.

Status: Published

Blue Bird

The Blue Bird triggers events and messages that scatter to infiltrate the pig's castle.

Status: Published

Yellow Bird

The Yellow Bird comes with a RequireJS speed booster and dynamically injects scripts against those pesky swine.

Status: Published

Black Bird

The Black Bird proves to be a much more organized approach to fighting these porkers and introduces the Backbone.js bomb to their dismay.

Status: Published

White Bird

The White Bird appears to be seemingly harmless, but when it pulls out it's strict coding style and bursts of quality checks the hogs are sure to squeal.

Status: Published

Green Bird

The Green Bird can reach all of those hard to reach places and will mock and spy those stealing swine right where it hurts!

Status: Published

Orange Bird

The Orange Bird starts out small with a simple template, but then expands itself into a DOM blast that will surely send the message that the birds mean business.

Status: Published

Big Brother

The Big Brother pulls out the big guns with his finite state machine and other proven design patterns of destruction.

Status: Published

Mighty Eagle

The Mightly Eagle uses the most superior weapon of them all, a suite of tools that can organize and deploy all the other birds into battle against their soon to be vanquished foe.

Status: Published

Images provided via Angry Birds Wiki

Conclusion

The above series will be presented at the upcoming <anglebrackets /> and FluentConf conferences and possibly others. I hope you enjoy the series. I am having fun putting it together and I look forward to giving it in front of an audience ;)

New Beginnings

2013-03-20T10:29:00.000-05:00

Introduction

Today is my last day at appendTo, LLC. I've been working with appendTo for over 2.5 years and have been doing a combination of architecture reviews, project work, staff augmentation, and preforming on-site and virtual remote trainings.

I've learned a lot while at appendTo. I've grown in my confidence as a developer and a trainer and I've valued working alongside talented developers and friends. I appreciate the time I've been at appendTo, but it is time to move on.

Going Out On My Own

I've decided to go out on my own and start my own business! This day comes with a mixed bag full of emotions. My company name is Manorism, Inc. I've purchased the manorism.net domain (haven't launched it yet) and hope to acquire the .com from its current owner.

My company will primarily center around training. My initial focus will involve creating several PluralSight videos and then I hope to branch out to do remote/on-site trainings, workshops at conferences, and some consulting on the side. I start on my 1st PluralSight course starting tomorrow and it should be available in about a month.

I'm not going anywhere and if anything else you should see more of me than you have previously ;) Again, thanks appendTo and keep your eyes open for Manorism, Inc.

Front-End Web Conference

2013-03-11T08:06:00.000-05:00

A new front-end developer conference is starting in Las Vegas April 8-11! This conference will be focusing primarily on the front-end concerns such as HTML5, CSS3, and JavaScript.

This event reminds me a lot of the Microsoft MIX conferences that used to be held for the last several years. I am glad to see something like this conference come to fruition and I'm honored to be one of the speakers chosen for its 1st meeting.

In addition, this conference will be taking place in-tandem with another conference called Dev Intersection & SQL Intersection. This other conference will be more focused on Microsoft and .NET technologies. These two conferences will be held at the time and location so you can hop between the conferences as you wish.

If you are interested in attending either of the conferences you can use the "MANOR" discount code for $50 off your <anglebrackets /> Registration OR Dev Intersection & SQL Intersection Registration price.

Speakers

At the <anglebrackets /> conference I'll be speaking alongside many well known speaker such as

Scott Allen
Todd Anglin
Justin Beckwith
Miguel Castro
Jim Cowart
Damian Edwards
Jason Follas
Brady Gaster
Phil Haack
Scott Hanselman
Christian Hellmann
Burke Holland
Billy Hollis
Scott Hunter
Denise Jacobs
Brian Noyes
John Papa
Jonathan Snook
Lea Verou
Dan Wahlin

Sessions

Some of the sessions that look interesting to me are...

5 Tips for Better JavaScript
ASP.NET - Don't Do THAT! Common Mistakes and Pitfalls
Break Out Of The Browser With HTML5
Comparing JavaScript Frameworks: Ember, Angular, and Knockout
Eventing and Messaging in JavaScript
Getting Started With Require.js
HTML5 for Business: Forms and Input Validation
Modern Single Page Applications with HTML5, CSS3, JS, ASP.NET and Visual Studio
etc...

I will be presenting the following two sessions at the event

See You There!

It should be a fun event and I hope to see you there. There are also some nice workshops you might want to check out. If you are able to make it then come up after one of my talks or stop me somewhere, I'd enjoy getting to meet you.

Remember the "MANOR" discount code for $50 off your <anglebrackets /> Registration OR Dev Intersection & SQL Intersection Registration price.

jQuery Object Quacks like an Array Duck

2013-02-12T00:01:00.000-06:00

jQuery Array-like Object

I'm sure you've heard of the old saying, "If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck".

Well, a simular statement could be said about the jQuery Object. If the jQuery Object looks like an array, indexes like an array, console.logs like an array, then it probably is an array... err, well, but in this case it's NOT an array!

Let's unpack this a little more and see what sense we can make out of it. The following snippet of code invokes the jQuery Function and performs a selection from the DOM and then accesses the returned jQuery Object to locate the DOM element at index 2, which feels an awful lot like an array.

Upon further examination in the console the jQuery Object is indeed an object (not an array) as indicated by the $.type() utility method.

Note: You might notice that I am using the lesser known $.type() utility method to determine the type of the variable. I am not using the typeof operator because it evaluates to "object" for both arrays and objects. The $.type() method returns much more useful data http://api.jquery.com/jquery.type/

Something of interest in the above screenshot is the grayed out __proto__ property. That is where all the jQuery goodness (functionality) can be found such as .fadeOut(), .on(), .addClass(), and all the other methods jQuery provides.

After some digging in the jQuery source code I came across the following merge method where the array results of the DOM selection gets copied over to the jQuery Object. In addition to mapping over these values jQuery also provides a .length property and a .splice() method which enables itself to mimic an array.

Making a Custom Array-like Object

So, what about making our own custom array-like object!?! The following small snippet of JavaScript defines an object and then assigns a set of key/value pairs. In order to mimic an array we need to add a .length property and expose a .splice() method borrowed from the array.

The following is a screenshot of what is console.logged after executing the above code snippet. You will see that our array_like object is treated as if it were an array just the like jQuery Object... yay!

Note: If we take off the .length property or the .splice() method then the custom object will no longer appear as an array in the console. They are both necessary.

Conclusion

So, inductive reasoning might be a good thing most of the time, but in this case the Duck Test failed us. You can play around with the code snippets above by looking at the following JSFiddle.

Animating a Twitter BootStrap Icon with CSS3

2013-02-05T00:05:00.000-06:00

Introduction

So, I was already using Twitter Bootstrap on a project recently and I had a refresh icon that I wanted to use a button. The markup for my icon looked very much like the following snippet...

The previous markup renders as the following...

That is all fine and dandy, however, I thought it would be neat if the refresh icon would rotate when the clicked until that action was complete.

To implement this feature I decided to use a CSS3 animation.

Note: At the time of writing this CSS3 animation is currently supported in IE10, Firefox 16+, Chrome 23+, Safari 5.1+, Opera 12.1+, iOS 3.2+, Android 2.1+, & Blackberry 7.0+ Reference: Can I Use?

CSS3 Animation

If you don't already know about CSS3 Animation you can pick up a primer at the following locations...

I ended up using the following CSS to get the animation to work...

Note: You may have noticed that I'm not using vendor prefixes in the above CSS. For this demo I am using only the standard prefix-free styles and using Lea Verou's -prefix-free library to dynamically add the vendor prefixed styles at runtime. Now, you may or may not want to use this library for production, but it sure makes it nice for blog posts and jsFiddles!

The above CSS defines a class named icon-refresh-animate that assigns the animation, how long it should take, how many times it should iterate, and what type of algorithm to use. The class references the rotateThis keyframes which defines what the beginning and end state of the animation should look like. In this case the animation will rotate the element from 0 degrees to 360 degrees.

Once I got the CSS3 situated, I moved on to writing some JavaScript to wire up the animation. The following code snippet adds the icon-refresh-animation class to the icon when the anchor is clicked. Once the class has been added the animation begins. Then the code kicks off a window.setTimeout to simulate some kind of asynchronous action and when complete the class is removed, therefore stoping the animation.

You can interact with the final solution in the following jsFiddle. You'll need to click the icon in order to kick off the 2 second animation.

Conclusion

So, instead of looking for a GIF to animate your icon, why don't you try taking your ordinary element and make them come alive with a little CSS3 spice. Who needs animated GIFs anyway?

Now, get going and get your baby ninja talents to work. Okay, I admit animated GIFs are cool, but not for rotating your icons ;)

FluentConf Advanced jQuery Training & Session

2013-02-04T00:05:00.000-06:00

FluentConf 2013

Last year I was unable to attend FluentConf, but I'm honored to be on the Program Committee this year. In addition I'll be leading a 3 hour Advanced jQuery workshop and presenting a session on JavaScript.

Training Workshop

Advanced jQuery Techniques

On Tuesday, 05/28/2013 at 9:00am I will lead a workshop on Advanced jQuery Techniques. This workshop will be last 3 hours long and will contain a combination of both lecture and lab.

If you would like to attend this workshop you can add it to your schedule. You can view all of the other workshops from the FluentConf website.

Join appendTo’s Elijah Manor for a dive into advanced topics surrounding the front-end with jQuery. Utilize the jQuery library in the context of large-scale applications by learning how to dramatically improve performance, increase maintainability and reusability, and write cleaner and more concise code. Learn how to adopt a style that is maintainable and scalable while keeping simplicity as a core tenant for successful web development.

JavaScript Session

Angry Birds of Modern JavaScript Development

On Wednesday, 05/29/2013 at 1:45pm I will present a session titled Angry Birds of Modern JavaScript Development.

This is not your ordinary session, I've tried to mix things up by having each Angry Bird represent an area of JavaScript along with its strengths. Some topics covered include code organization, events and messaging, MV* frameworks, prototyping and mocking, design patterns, linting, and build systems. The goal is to defeat the pigs and by doing so produce highly tested quality JavaScript code.

A diabolical herd of pigs stole all of the front-end architecture from an innocent flock of birds and now they want it back! A team of special agent hero birds will attack these despicable pigs until they recover what is rightfully theirs, front-end architecture!

The Red Birds attacks with the force of their trusty IIFE, the basic building block of all privacy. The Blue Bird follows in his footsteps and triggers events and messages that scatter to infiltrate the pig’s castle. The Yellow Bird comes with a Require.JS speed booster and dynamically injects scripts against those pesky swine. The Black Bird is soon to follow and he provides a much more organized approach to fighting these porkers and introduces the Backbone.js bomb to their dismay. The White Bird appears to be seemingly harmless, but when it pulls out it’s strict coding style and bursts of quality checks the hogs are sure to squeal. The Green Bird can reach all of those hard to reach places and will mock and spy those stealing swine right where it hurts! The Orange Bird starts out small with a simple template, but then expands itself into a DOM blast that will surely send the message that the birds mean business. The Big Brother is not too far behind and he is pulling out the big guns with his finite state machine and other proven design patterns of destruction. The Mighty Eagle pulls up the ranks with a superior weapon of them all, a suite of tools that can organize and deploy all the other birds into battle against their soon to be be vanquished foe.

appendTo Virtual Live Trainings

In addition to the previous FluentConf workshop and session I also lead Virtual Live Trainings for appendTo.

If your company is interested in a private remote training experience on JavaScript, jQuery, Backbone.js, Underscore.js, RequireJS, or other web technologies please e-mail training@appendto.com for more information.

Here are some of the benefits of a Virtual Live Training (VLT)

Virtual Live Trainings can be located worldwide. I've performed numerous trainings both in the United States and overseas.
Virtual Live Trainings are cheaper than our On-Site Trainings because there is no additional cost for travel or hotel fees.
Virtual Live Trainings are well suited for 1/2 day trainings over a week duration enabling the students to gradually absorb the knowledge and also remain productive at their day job.
Virtual Live Trainings can be scheduled quicker than an On-Site Training since there is no travel involved.
Virtual Live Trainings get the same content and labs as an On-Site Training and to make it feel more personable I stream video of myself as well as my screen.

modern.IE - Analysis and Testing Tools for Web Developers

2013-01-31T09:59:00.001-06:00

modern.IE

Microsoft has just launched a new website called modern.IE that provides a suite of tools to help developers test their websites.

Page Analysis Tool

The website integrates a scanning feature that let's you enter your website's URL and it will analyze its contents against a variety of best practices (not only pertaining to IE, but also general concerns).

The analysis tool checks for things like...

Checks that common JavaScript libraries are up-to-date
Checks if a range of CSS vendor prefixes are used
Checks if Responsive Web Design is used
Checks if Touch browsing has been considered
Checks if you are using Browser detection instead of Feature detection
etc...

The nice thing about the tool is that it not only finds suggestions, but it also recommends ways to resolve the issues it finds. In addition it doesn't just point out IE specific stuff, but also about more generic concepts like using CSS3 vendor prefixes and to consider responsive web design.

Testing Tools

Microsoft understands that not all developers use Windows when they develop and have Internet Explorer easily available in order to test. So, a special 3 month free testing account is available with BrowserStack.

Not only is this a nice tool for Mac or Linux developers, but it is also nice for Windows users to test old version of IE or if you don't have Virtual Machines handy.

You can also install some handy add-ons to Chrome or Firefox to make the testing experience with BrowserStack even better.

In addition, Microsoft is providing free Virtual Machine images for you to use if you want more control. Even though BrowserStack is awesome for a quick sanity check or to run unit tests, if you are trying to debug something having a local VM is optimal in those cases.

Video about modern.IE

Yo dawg, I herd you like loops, so jQuery put a loop in your code

2013-01-29T00:05:00.000-06:00

Do You Know When You Are Looping in jQuery?

A common misunderstanding I see when looking at jQuery code is a lack of understanding about loops.

Most developers seem to grok the .each() method, but that can be both a good and a bad thing.

It is important to know the difference between an Implicit Loop and an Explicit Loop.

Implicit Loops

The following code snippet is something that you would typically see from a jQuery developer. You are probably aware of the "Find something, Do something" mentality of jQuery. The code first queries the DOM for all elements that have the widget class and then jQuery proceeds to implicitly loop over all of the elements matching the query and adds the highlight class.

Explicit Loops

An explicit loop in jQuery is much more obvious. The code for the loop is visible via the .each method. This is pretty straight forward and typically developers understand that there could be performance issues for any code inside the .each loop.

Indications of Confusion

You can start to tell if a developer doesn't realize the different between implicit and explicit loops if you start to see something like the following code snippet.

In this example there is no reason for using the .each method because there was nothing inside of the loop that is unique. A simple implicit loop, like the following snippet, would have been sufficient.

Method Overloads

Knowing about implicit loops also sheds some light of the following situation.

In the following snippet of code jQuery is looping over the matches elements twice (once to change the color and a second time to change the font-size).

If you needed to write code similar to the previous, you could do something like the following instead and use the "overloaded" .css method that takes an object containing the key/value pairs you wish to apply.

It might seem like the above snippet is slower than the following, but when it comes down to it they are about the same speed. I tend to recommend the last snippet as it is cleaner and more flexible down the road as you can pass in a variable containing all your options.

As a side note, it is preferable to use the .addClass() / .removeClass() / .toggleClass() methods instead of the .css() method to manipulate your elements unless you need to change their width/height/position/etc. The output of the .css() method gets attached to the style attribute of your element. The browser is highly optimized to deal with CSS classes and also whoever is maintaining will thank you for using classes instead of hardcoding style in your code.

Conclusion

Although these concepts may seem very basic, I often run across code that doesn't require an .each method. It is helpful knowing some of these under the cover concepts. I hope you found it insightful.

Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources

2013-01-28T08:00:00.000-06:00

A Beginner's Journey

I was recently approached by someone at a .NET User Group about how to get started in HTML5, JavaScript, jQuery, CSS3, etc... The developer's primary background was writing thick client Windows applications. I figured the best place to start is to focus on the bare essentials and then work up to more advanced concepts and resources. I started to respond to the developer in an e-mail, but then I remembered what Scott Hanselman said in a recent post and video ...

"Instead, consider writing a blog post or adding to a wiki with your keystrokes, then emailing the link to the original emailer." --Scott Hanselman

So, I decided to make this blog post for the developer and also for anyone else who may be interested in similar resources.

HTML5

So, it is pretty obvious that you are going to need to learn HTML5 if you are doing to do front-end web development. From my experience most developers regardless of their language of choice know the basics of HTML. What they may or may not know are all the newer semantic tags, cross-browser tricks, and native JavaScript APIs.

There is plenty to learn in HTML5 without getting into the JavaScript APIs just yet. Once you learn JavaScript and feel comfortable in it, that may be the best time to tackle topics such as Geolocation, Web Sockets, Canvas, IndexDB, Web Workers, etc...

Resources

HTML5 for Web Developers API
HTML5 Semantics by Bruce Lawson Blog
Semantics in HTML5 by John Allsopp Blog
Designing a blog with HTML5 by Bruce Lawson Blog
HTML5 Rocks Tutorials Blog
Move the Web Forwards Misc
HTML5 Doctor Blog
HTML5 Specification API
Dive Into HTML5 by Mark Pilgrim Book Free

JavaScript

Even if you think you know JavaScript it might behoove you to go back and learn it from the beginning. A common danger is that developers think it looks just like their back-end language of choice (C, C++, C#, or Java) that they don't invest time to learn how it is different.

JavaScript is a dynamic and functional language, which is considerably different than C# or Java for example. So, please take your time and pick up the language. If you don't learn it appropriately you will invariably run into barriers down the road due to lack of understanding.

Resources

Eloquent JavaScript by Marijn Haverbeke Book Free
JavaScript Enlightenment by Cody Lindley Book Free
JavaScript: The Good Parts by Douglas Crockford Book Paid
Professional JavaScript for Web Developers by Nicholas Zakas Book Paid
What to Read to Get Up to Speed in JavaScript by Rey Bango Blog
Learn jQuery & JavaScript for free by appendTo Video

jQuery

The jQuery library has been around for several years and has catapulted as one of the most used tools in the web developer's belt. The reason for its vast usage is that it solves many of the cross-browser issues that creep up during development. The library is popular for both web developers and web designers. The community around jQuery is amazing and there are tons of jQuery plugins to choose from.

Resources

jQuery API API
jQuery Plugin Repository Library
Learn jQuery & JavaScript for free by appendTo Video
jQuery Fundamentals by Bocoup Book Free
Learn jQuery in 30 Days by NETTUTS Video Free

Backbone.js

If you find yourself writing more and more JavaScript and jQuery then you may want to consider picking up Backbone.js to help you organize your web application. This library is also a great fit for Single Page Applications (SPA). Backbone.js uses the familiar MVC/MVP concepts of Models, Collections, Views, and Routers. In addition there is a nice Event model, History support, and a Sync mechanism. The community for Backbone.js is also very large and you can find many extensions and plugins to fit your needs.

Resources

Backbone.js API API
Annotated Backbone.js Code API
Backbone Extensions, Plugins, & Resources Library
Backbone Boilerplate Misc
Backbone Fundamentals eBook by Addy Osmani Book Free
Peep Code: Backbone.js Video Series by Geoffery Grosenbach and David Goodlad Video Paid
The Pragmatic Bookshelf: Hands-on Backbone.js by Derick Bailey Video Paid
Backbone.js Screencasts by Joey Beninghove Video Paid
Pluralsight: Backbone.js Fundamentals by Liam McLennan Video Paid
The Skinny on BackboneJS by Ben Howdle Blog
Backbone Tutorials Misc
Backbone.js Tutorials via Nettuts Blog
Exploring Backbone.js Series by Jack Franklin Blog

CSS3

You may or may not have experience with CSS. Brushing up on CSS concepts would be a good thing. If you already feed proficient at CSS1-2, then you should pick up CSS3 as well. A lot of features have been added recently that is in most modern browsers. There are many things that you can do in CSS3 now where you used to use JavaScript or custom images.

Resources

Bulletproof Web Design Book
Getting Started (CSS Tutorial) by MDN Wiki
Mastering CSS Coding: Getting Started by Soh Tanaka Blog
The 30 CSS Selectors you Must Memorize by Jeffrey Way Blog
CSS3 Please Tool
CSS3 Mastery Blog
CSS Lint Tool
CSS Comb Tool

Feature Detection

Inevitably you'll need to support browsers that don't support the native feature you are trying to use. Thankfully you can use Feature Detection to determine if the browser you are in implements that feature and if it doesn't then you can provide functionality to mimic that feature (a.k.a. a polyfill or shim).

Resources

Responsive Web Design

Instead of implementing a different UI for mobile devices, tablets, and desktop browsers you can use responsive web design techniques to provide one experience that restructures the UI according to its size.

Resources

Responsive Web Design by Ethan Marcotte Blog
Responsive Web Design: What It Is and How To Use It by Kayla Knight Blog
Design Process In The Responsive Age by Drew Clemens Blog
Responsive Web Design Techniques, Tools and Design Strategies by Smashing Editorial Blog

Conclusion

Hopefully the above resources will get you started in your transition to front-end web development. There is a lot to learn, but it is an exciting space that changes frequently. Having a desire to learn is a good trait to have in this field.

If you have any resources that you think I missed please add them in the comments and I'll try to update the lists above if I think they are appropriate.

The 5 Emotional Stages of a jQuery Upgrade

2013-01-22T00:30:00.000-06:00

The following post contains a emotional filled dialog between fictitious front-end developers "Frank Fowler" and "Mike Morris". In this drama filled exchange Frank decides to upgrade his current project to the latest jQuery release.

Sadness

Frank: Ahh man, I just saw that jQuery 1.9 was released. Too bad my current project is still using the 1.8.3 release.

Mike: Ohh bummer, sorry to hear that. I tested out the beta release of 1.9 that came out about a month ago and didn't have any issues.

Frank: Really!?! Sign... I wish I could upgrade. I don't know if I can convince my boss to invest the time to upgrade and staying on an older version makes me a little sad.

Fear

Mike: You might consider upgrading. They've fixed lots of bugs, enhanced CSS3 support, and added several new features.

Frank: I don't know. It is a big project and I don't know if I can risk all the extra testing. I'm glad that it worked out for you, but I may just have to stay on this old version while everybody else upgrades.

Mike: Frank, an upgrade shouldn't be so bad. The jQuery team does a good job outlining the change log and they have over 6000 unit tests to ensure quality over a suite of browsers.

Frank: Yeah, I guess you are right, but it is such a huge project. What if something goes wrong? Surely something will go wrong, right? I'm fearful that I won't be able to figure it out if there is an issue.

Mike: Well, it wouldn't hurt trying would it?

Frank: I guess you are right. Lets go head and give it a try.

Anger

Frank: Okay, I just added a reference to the jQuery CDN for the 1.9 release to my project. Here goes nothing...

Mike: So, how did it go?

Frank: Huh... WHAT!?! Nothing even works anymore! I knew I shouldn't have upgraded.

Mike: Well, what exactly is breaking?

Frank: Like I said, nothing works! What did jQuery do to this release? Are they trying to hurt the development community? The last version worked just fine for me. I don't know if I can trust this project anymore.

Shame

Mike: Now now, lets take a look at this together. Does your application use some of the features that jQuery deprecated?

Frank: What!?! Deprecated? Umm, well I don't know. When did they deprecate features?

Mike: A while back jQuery mentioned they were going to deprecate features like the .live() method and .browser sniffing.

Frank: Ohh, I guess I didn't realize that. Maybe I should have read the blog post release notes more thoroughly :(

Mike: Yeah, even though they deprecated those features jQuery hadn't removed them until the 1.9 release. So, maybe that is why some of your code is broken. I know you used to use .live(). Did you change your .live() to use the new .on() method?

Frank: Yeah, I never did switch to the new .on() method that they added a while back and the application does do some sniffing using the $.browser object. So, I guess that means I won't be able to upgrade to the 1.9 release.

Gladness

Mike: Ohh, no! The jQuery team planning for issues like this so they went ahead and put all of the removed deprecated features into a migration plugin in case you still need it. That way you can use the new stuff without having to immediately refactor your existing code. The idea is that you can slowly refactor as needed.

Frank: Really!?! Wow, that is so easy. Let me guess, that was explained in the release notes too?

Mike: Yep ;) No probably man, it happens. Now don't get me wrong there are some releases where some bugs are introduced in a major release, but they are usually found pretty quickly and a minor release comes out shortly after. However, with this particular issue there was a planned workaround.

Frank: Why looky there, I just applied the migration plugin and now my app is working as expected. Thanks for your help Mike.

Mike: I didn't really do anything, it was the jQuery core members... you should thank them ;)

The Magic of the jQuery 1.9 Source Map

2013-01-16T00:22:00.002-06:00

jQuery 1.9 Supports Source Maps

You may have noticed that the 1.9 version of jQuery was released yesterday. One of the most excited pieces of the version is support for Source Maps!

What are Source Maps?

What is a Source Map? Well, it is a generic way to translate one script format into another. In jQuery's case, it is mapping the minified version of jQuery against the un-minified version. Why would you want to do this? The value is that when you encounter a bug in your production code you can debug against code that doesn't look like a mangled mess!

You can find out much more about Source Maps from Ryan Seddon's HTML Rocks Tutorial titled Introduction to JavaScript Source Maps.

Another slightly different example of for Source Maps is for CoffeeScript. The official CoffeeScript language doesn't support Source Maps as of yet, but there is a rewrite of the project called CoffeeScript Redux that does support them. That means you can debug through CoffeeScript code in your dev tools and it will map to the underlying JavaScript code. For more information about this check out Ryan Florence's article titled CoffeeScript Source Maps.

Enabling Source Maps in Chrome

In stable release of Google Chrome there is a setting in its dev tools to "Enable source maps". You will need to check this option in order to use this feature.

Mozilla Firefox is working on providing Source Map support, but as of yet Google Chrome is the browser to use for this feature.

Add the Minified jQuery 1.9 to Your Project

The minified version of jQuery 1.9 has a special directive at the bottom that tells Google Chrome what Source Map to use when debugging. The end of the minified file looks like the following...

In order to get the Source Map to work you need to make sure the value of sourceMappingURL exists on your server or locally. If you are using the jQuery CDN then this is already setup for you.

The Google CDN is now hosting jQuery 1.9 and its map file as well. It isn't listed on their main CDN page, but you can access it directly http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js.

Debugging Your Project

Once you've completed the above steps then using Source Maps is simple. All you have to do is set a break point, like you would normally, and then debug into it.

For example, on the left I set a breakpoint on the addClass statement. Once I debug into that statement I get dropped into the unminfied version of jQuery NOT the minified version that I included!

Browsers have had a "Pretty print" feature for a while which has formatted minifed script files, but Source Maps brings that to a whole new level!

Conclusion

Source Maps are a powerful new feature of Google Chrome and I look forward to it coming to other browsers in the near future. Being able to debug through minified code could make tracking down production bugs a much easier process.

Don't Hot-fix IE6-8, Upgrade to IE9-10 Instead

2013-01-15T11:28:00.002-06:00

Critical Internet Explorer 6-8 Hot-fix

You may have seen the buzz yesterday about the Critical Microsoft Security Hot-fix (MS13-008). The hot-fix applies to a security issue in Internet Explorer versions 6 through 8. Newer version of IE (9 and 10) are not in danger.

Upgrade to IE9-10 Instead

You could apply the above hot-fix to your existing old version of Internet Explorer, but why? Why not go ahead and upgrade to IE9 or IE10?

Not only will you get more features and a faster browser, but you will also be pushing the web forward. Developers will thank you for having one less oldIE browser to support. The nice thing about IE9-10 is that they follow web standards, which means code that is written to follow standards and practices should just work in IE9-10 and other modern browsers.

Note: IE10 is only available as a Preview release on Windows 7 as of now. A full RTM release of IE10 should be released in the near future. Be warned, if you do install IE10 Preview on Win7 it will replace your IE9 browser.

Others are dropping oldIE (IE6-8)

Others are following suite. Google Apps recently decided to drop oldIE a while back and only support IE9+ and other modern browsers.

In addition popular JavaScript libraries like jQuery are now dropping oldIE support in their upcoming 2.0 release. After jQuery dropped oldIE support an interesting realization came about. Here is a quote from the jQuery Blog...

"jQuery 2.0 now has more patches and shims for Chrome, Safari, and Firefox than for Internet Explorer!" -- http://blog.jquery.com/2013/01/14/the-state-of-jquery-2013

So, what are you waiting for? Upgrade to a new version of IE today!

Does Browser Sniffing Still Have a Place?

2013-01-09T00:06:00.000-06:00

Why and How Did We Use Browser Sniffing?

For a long time browser sniffing was the way developers tested for various browsers and as a result used a different API or feature set. You can always manually detect by using the navigator.userAgent, but making sense of it can be difficult considering the vast amount of userAgent combinations. Some libraries were developed to assit the developer in making sense of the userAgent. A detect library can be found from QuirksMode and jQuery also provides the browser object with some sniffing information.

Problems with Browser Sniffing

As you are probably aware, browser sniffing can be problematic and is the reason that some websites don't work properly cross-browser or in new versions of browsers.

A simple example of where a browser sniff can break down is the following code snippet detecting for IE. The code should check if the browser is IE and if the version is 8 or greater.

The code snippet works just fine in versions of IE 1-9, but breaks for IE10 because the regular expression doesn't account for multiple digits.

You can review many of the bad reasons why you shouldn't browser sniff from the following resources

Note: I mentioned above that jQuery has a browser object, but that feature is deprecated and you shouldn't use it anymore. Also the detect script I mentioned above also has a blurb about using object detection instead of browser sniffing.

Use Feature Detection Instead

Feature Detection is the preferred way to determine the functionality of a browser and to respond accordingly and we've seen that technique used in many libraries such as Modernizr and more.

An example of feature detection could look something like the following.

You can find nice polyfills or shims for HTML5 features from the HTML5 Please website and the HTML5 Cross Browser Polyfills wiki from the Modernizr repository.

If you are interested in finding out more about Modernizr or on how to make your own feature detections I'd encourage you to check out the following resources

Polyfilling the Gaps video & slides by +Lea Verou
PolyFilling the HTML5 Gaps with JavaScript by +Addy Osmani
Writing Your Own Cross Browser Polyfills by +Addy Osmani

Does Browser Sniffing Still Have a Place?

I recently became curious as to when browser sniffing might ever be acceptable. I mean, surely there must be a valid use case even if it isn't pretty. So, I went on a search on Twitter and I also polled some of my close developer friends on their thoughts. The following is a list of my findings.

Valid Use Cases for Browser Sniffing

I've found the following use cases justifiable reasons to use browser sniffing.

Target specific content to platform a such as Mac or Win download. An example may be a Download link for multi-platform systems.
Gather analytic information for marketing purposes. An example may be getting desktop, tablet, and mobile statistics from users.
Determining if a user is on a particular platform in order to pin their application to the user's home or start screen. An example may be an iOS and showing a tooltip to add the mobile app to the home screen.
In some cases Feature Detection isn't sufficient or there is no way to determine a certain state or behavior. In that case browser sniffing may need to be used. An example of this is in the history.js detection in the Modernizr library.

Do you have any other use cases that you've seen or used that you feel are valid reasons to use browser sniffing? I'd be interested in hearing them.