Using browserify to manage JavaScript dependencies

Managing JavaScript dependencies in the browser is hard. Library scripts typically create global variables and functions. Other scripts now depend on those global objects to do their work. This works but in order to load all required scripts we have to add <script> elements to our HTML, making sure to add them in the right order, and basically know what each exposes. The problem Consider the following client side code: 1: // Print a message 2: utils.print(“Hello”);   This depends on another piece of script below: 1: // Expose the utility object with it’s print function 2: var utils = … Continue reading Using browserify to manage JavaScript dependencies

X things every JavaScript developer should know: Automatic Semicolon Insertion

As with many other things in JavaScript Automatic Semicolon Insertion is usually not a problem but it can occasionally bite you if you are unaware of it. What Automatic Semicolon Insertion does is really simple. It basically boils down to semicolons being optional in JavaScript and the parserĀ  injecting them when it is appropriate. That might sound very nice, after all you can leave semicolons out and the right thing will happen. For example the following code, without a single semicolon, is completely valid and will print a sum of 3 as expected: 1: console.log(add(1, 2)) 2: 3: function add(x, … Continue reading X things every JavaScript developer should know: Automatic Semicolon Insertion

X things every JavaScript developer should know: Comparisons

Another item of things every JavaScript developer should know is how comparisons work. Just like with some of the other JavaScript, or I should really say ECMAScript, features anything you know about C# or Java could actually be misleading here.   To == or to === One of the weird things is there are actually two comparison operators in JavaScript, the double and the triple equals. The == is called the equals operator, see section 11.9.1 of the ECMAScript standard, and was the original equality operator. Unfortunately the way this operator works is quite some cause for confusion and as … Continue reading X things every JavaScript developer should know: Comparisons

X things every JavaScript developer should know: Truthy and falsy

One thing that developers often confuses with JavaScript is Boolean logic. It seems to simple, you use for example an if statement and put a boolean expression in there and if it is true the block of code is executed other wise the else block is executed. Something like this: 1: (function () { 2: var data = []; 3:  4: if (data.length > 0) { 5: console.log("The data array is not empty"); 6: } else { 7: console.log("The data array is empty"); 8: } 9: }());   And if you run it it will do exactly what you would … Continue reading X things every JavaScript developer should know: Truthy and falsy

X things every JavaScript developer should know: use strict

In the previous blog post I explained that you should normally use an Immediately-Invoked Function Expression (IIFE) to give variables function scope. That works fine as log as we remember to declare our variables using the var keyword. However when we forget the var keyword we are back to the original problem as the variables are added to the global scope.   Leaking undeclared variables As you can see in the two code snippets below the text variables are not declared using var. Even though they are only used inside a function they are still added to the global scope. … Continue reading X things every JavaScript developer should know: use strict

X things every JavaScript developer should know: scoping

I see a lot of developer with a C# or Java background adopting JavaScript as well these days. Not that it should be a big surprise, lots of business applications are developed as client side browser based applications these days. And like it or not JavaScript is the language of the browser. Unfortunately the JavaScript syntax resembles that of Java or C# resulting in these developers thinking that they can easily master the language. And even though JavaScript is not a hard language to master there are some important differences and gotchas everyone needs to be aware of. So on … Continue reading X things every JavaScript developer should know: scoping

WebAPI, PascalCase and camelCase

In the RAW stack the ASP.NET WebAPI plays a big part in exposing data to the client and accepting data back in. This does mean that it is also the boundary of the AngularJS, or JavaScript, and C# world. And both of these worlds have their own, not always compatible standards. In this case I am referring to the normal way of naming properties on objects. In C# this is normally done using PascalCase and in JavaScript this is normally done using camelCase.   Bridging the gap It turns out that being able to use the normal conventions on each … Continue reading WebAPI, PascalCase and camelCase

Unit testing AngularJS HTTP requests in the RAW Stack

In the previous blog post we created some basic unit tests for the AngularJS movies controller. As I mentioned there was one set of tests missing and that was around the controller doing HTTP requests to the WebAPI backend. In a unit test typically don’t want to do those test for real. First of all we don’t want to take a dependency on some external state and equally important we don’t want the overhead of those requests. Fortunately AngularJS makes it easy to fake those requests and test the controller bits in isolation.   The $httpBackend service One of the … Continue reading Unit testing AngularJS HTTP requests in the RAW Stack

Unit testing the AngularJS code in the RAW Stack

In the previous post we refactored the JavaScript code for our AngularJS controller a bit to make it more testable. However we didn’t actually start writing any tests yet so lets create a few tests.   The AngularJS controller under test Just as a quick reminder the AngularJS controller in our previous code was as follows 1: (function () { 2: ‘use strict'; 3: var module = angular.module("myApp", []); 4:  5: module.controller("moviesCtrl", function ($scope, $http) { 6: $http.get("/api/movies").then(function (e) { 7: $scope.movies = e.data; 8: }); 9: 10: $scope.newMovie = { Title: "" }; 11: $scope.addMovie = function () { … Continue reading Unit testing the AngularJS code in the RAW Stack