Tag Archives: JavaScript

Apply, Call and Bind on JavaScript functions

I’m a bit short on time this week so I’ll keep it short. Last week I talked about Prototype in JavaScript, a fundamental JavaScript feature that too few programmers know about. Today I’d like to talk about a few more features that people either don’t know about or are confused about, apply(), call() and bind().

As usual I have the examples on GitHub in the apply-call-bind repository.

Also, in case you missed it, I have a free Udemy course on ReactJS and Flux for you. Only 50, so you best be quick to get it!

Function invocation

So let’s talk a bit about functions and how they can be invoked. Let’s look at a simple function with a simple invocation.

var sum = function (a, b) {
    return a + b;
};
var x = sum(1, 2);
console.log(x);

It doesn’t get simpler than this and x will have the expected value of 3. Let’s make that slightly less simple. We want to be able to add an undefined number of numbers! So how would we handle that? How about this?

var sum = function (numbers) {
    var result = 0;
    numbers.forEach(function(n) {
        result += n;
    });
    return result;
};
var x = sum([1, 2, 3, 4]);
console.log(x);

That looks good, right? Unfortunately, invoking the function is now more difficult as we always need an array. What if I told you there is another way?

Remember that this is JavaScript and JavaScript is, well, weird. We can call a function with any number of input parameters we want. Too few and our function might fail, too much and the extra parameters will be ignored.
There is sense in all this though. Within each function you can inspect the input parameters through an array-like object, arguments.

Let’s rewrite the first version of sum, but using the arguments list this time.

var sum = function () {
    return arguments[0] + arguments[1];
};
var x = sum(1, 2);
console.log(x);

But if we can do that we can use ANY number of parameters! Arguments is array-like, which mean we can loop through the values (it doesn’t have a forEach method though).

var sum = function () {
    var result = 0;
    var i = 0;
    for (i; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
};
var x = sum(1, 2, 3, 4);
console.log(x);

That’s pretty nice! We can now use the same simple syntax for any number, or a variable number, of input parameters. So now I’m going to be a real pain in the ass… We got this nice function that takes any number of parameters in the plain and simple syntax we’re used to, but… I want to pass in an array!

Apply

If I were your manager you’d be annoyed at best. I asked for plain and simple syntax, you deliver, and now I want an array after all!? Worry not! Your function is awesome and it can stay. What we’re going to use is a function on the function prototype (meaning all function objects have this function defined), apply.

So that sounded weird… Functions have functions? Yes they do! Remember that a function in JavaScript is just an object. To give you an idea, this is how it looks.

myFunc(); // Invocation of a function.
myFunc.someFunc(); // Invocation of a function on a function.

So let’s look at this function, apply, which allows you to pass input parameters to any function as an array. Apply has two input parameters, the object on which you want to invoke the function (or the object this points to in the function) and the array with input parameters to the function.

So let’s invoke our function, sum, using apply. Notice that the first parameter can be null as we’re not invoking sum on an object.

var x = sum.apply(null, [1, 2, 3, 4]);
console.log(x);

So that’s awesome, right? Let’s look at an example that doesn’t use the arguments variable.

var steve = {
    firstName: 'Steve',
    lastName: 'Ballmer',
    doThatThing: function (what) {
        console.log(this.firstName + ' ' + this.lastName
        + ': ' + what + '! ' + what + '! ' + what + '!');
    }
};
steve.doThatThing.apply(null, ['Developers']);
steve.doThatThing.apply(steve, ['Developers']);

So in this example the function doThatThing is just a regular function with a regular named input parameter and we can still invoke it using apply. In this case we also need to pass in the first parameter to set this. If we don’t specify the first parameter firstName and lastName in the function will be undefined.

We can also put in another variable as first input parameter.

var sander = {
    firstName: 'Sander',
    lastName: 'Rossel'
};
steve.doThatThing.apply(sander, ['Blogs']);

That’s a bit weird, isn’t it? Even though Sander does not have the doThatThing function we can invoke it as if Sander did. This can be very useful behavior as we’ll see in the next section!

Call

Another function, which looks like apply, is call. Call allows you to simply invoke a function, but makes you specify the object which serves as this within the function, much like apply. The only difference between apply and call is the manner in which input parameters are supplied. Apply needs an array with values, call needs the values separated by a comma (like regular function invocations).

steve.doThatThing.call(null, 'Developers');
steve.doThatThing.call(steve, 'Developers');
steve.doThatThing.call(sander, 'Blogs');

So why would you want to do this? It seems it only obfuscates the code… Consider the following scenario, you have some function that takes a callback as input and invokes it.

var someFunc = function (callback) {
    console.log('this is ' + this);
    callback('This');
};
someFunc(steve.doThatThing);

What will it print? Undefined undefined… Sure, when doThatThing is invoked as callback() this will be the global Window object. We have three options now… I’ll discuss two now and I’ll give the third in a minute.
So first we could make it so that this is not used in the callback. For this we’d need to create a closure, or a new function that invokes doThatThing on steve as if it were a normal function.

someFunc(function (what) {
    steve.doThatThing(what);
});

It works, but its a lot of bloated code, so we don’t really want that. So there’s a second option, we allow the this object to be passed to the someFunc as an input parameter. And then we can invoke the function on that object using call (or apply)!

var someFuncThis = function (callback, thisArg) {
    callback.call(thisArg, 'This');
};
someFuncThis(steve.doThatThing, steve);

A lot of JavaScript libraries and frameworks, like jQuery and Knockout.js, use this pattern, passing in this as an optional input parameter.

Bind

If you’ve been paying attention you’ll remember I just said there was a third method to solve our little problem with this in the callback function. Next to apply and call functions also have a bind function. Bind is a function that takes an object as input parameter and returns another function. The function that is returned invokes the original function with the input object as this context. Let’s just look at an example.

someFunc(steve.doThatThing.bind(steve));
someFunc(steve.doThatThing.bind(sander));

And it even works if your original this isn’t the function itself.

var f = steve.doThatThing;
f = f.bind(steve);
someFunc(f);

You’ll need this when passing JavaScript native functions as callbacks to third party libraries.

someFunc(console.log);
someFunc(console.log.bind(console));

The first call fails with an “Illegal invocation” because this inside the log function has to be console, but it isn’t if it’s invoked as callback. The second line works as we’ve bound this to console.

So here are three functions that all invoke a function slightly differently than what you’re used to. All three are indispensable when you’re doing serious JavaScript development though.

If you’d like to know more about functions and how they work in JavaScript I can recommend JavaScript Succinctly.
We’ve also seen a lot of trouble with the this keyword. If you’re wondering why, you should check out this six day course by Derick Bailey: The Rules For Mastering JavaScript’s “this”. I can highly recommend it!

This blog is a bit shorter than usual, but, as they say, it’s quality over quantity. Hope to see you back again next week!

Happy coding!

Prototype in JavaScript

Hey everyone. It’s been a few weeks since I last blogged. I’ve been on a vacation in Poland which was awesome! If you ever want to visit Poland I recommend visiting Gdańsk, a beautiful city, and Malbork Castle, the largest castle in the world!
Anyway, this blog isn’t about travel, it’s about programming, and prototype in JavaScript in particular!

So last time I finished my series on the MEAN stack, MongoDB, Express, AngularJS and Node.js. That meant a lot of JavaScript. Not just front-end, but also back-end. Next to my blog I’ve been writing a lot of JavaScript in my daily life too. And while writing all that JavaScript there was one thing I just didn’t quite understand, prototype. I’m not talking about the library with the same name, which kind of lost the battle for most popular all round JavaScript library to jQuery, I’m talking about prototypal object inheritance. I started asking around. I know some full-stack developers with years of experience in front- and back-end, but guess what? They didn’t fully understand it either! And then I went to look on the interwebs, but guess what? There just aren’t that many good prototype tutorials around. And that’s what this post is all about.

You can find the full code with examples on my GitHub in the repository for this post.

Prototype, you don’t really need it…

So when asking my friends why, after all these years, they still didn’t know prototype their answer was something along the lines of “I never needed it.” Sure, that was the reason I never looked into it before too. Truth is that you can write JavaScript apps and libraries without ever needing it. But if you want to write fast JavaScript code you better start using it!

So first of all, what is prototype and why is using it better than not using it? In JavaScript each function has a prototype property. Prototype has all the, I guess you could call it default, methods and properties that an object, created through that function using the ‘new’ keyword, should have. As we know any object in JavaScript can have any method or property, we can just define them at runtime as we go. And that’s probably the big difference between using it and not using it. With prototype you define methods design time, or up front.

Let’s look at an example. Let’s say I have a Person object, the constructor and usage could look as follows.

var Person = function (firstName, lastName) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
    self.fullName = function () {
        return self.firstName + ' ' + self.lastName;
    };
};

var p = new Person('Sander', 'Rossel');
console.log(p.fullName());

So what happens when we call new Person(‘Sander’, ‘Rossel’)? First, two new instances of String are created, ‘Sander’ and ‘Rossel’.

Second, a new object is created. After that the object, representing a Person, gets three new properties, firstName and lastName, which are assigned the two strings, and the function fullName, for which a new function is instantiated. That last part is crucial, a new function instance is created every time you create a new person object. Now performance and memory wise this isn’t optimal. Let’s see how we can optimize this.

var Person = function (firstName, lastName) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
};

var getFullName = function (person) {
    return person.firstName + ' ' + person.lastName;
};

var p = new Person('Sander', 'Rossel');
console.log(getFullName(p));

This time the function getFullName is created once and can be used for any instance of Person.

The benchmark

Don’t believe me? Let’s test that.

'use strict';

var benchmark = function(description, callback) {
    var start = new Date().getTime();
    for (var i = 0; i < 10000000; i++) {
        callback();
    }
    console.log(description + ' took: ' + (new Date().getTime() - start));
};

var Person = function (firstName, lastName) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
    self.fullName = function () {
        return self.firstName + ' ' + self.lastName;
    };
};

var PersonNoFullName = function (firstName, lastName) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
};

var getFullName = function (person) {
    return person.firstName + ' ' + person.lastName;
};

benchmark('Full name', function () {
    var p = new Person('Sander', 'Rossel');
    var n = p.fullName();
});

benchmark('No full name', function () {
    var p = new PersonNoFullName('Sander', 'Rossel');
    var n = getFullName(p);
});

That’s a bit of code, but what happens is that we create 10.000.000 (that’s ten million) instances of Person with the fullName function defined on the Person object and we create ten million instances of a Person without the fullName function and use the pre-defined getFullName function instead. Then we log the time both methods took.

It may surprise you, but the result I get differs greatly per browser. Here they are (times in milliseconds):

                IE      FF      Chrome
Full name:      3705    361     2805
No full name:   3121    21      222

What this shows is that Firefox is fastest by far and IE is, of course, really very slow, especially when it comes to the method without full name. All browsers are considerably faster (especially Chrome) using the getFullName method though.

Enter prototype

Now that we’ve seen that functions in your constructors aren’t really optimal, especially when they don’t use any internal state of an object, and that we’ve seen how to optimize that let’s look at a better way, prototype.

The use of an external function doesn’t feel right. Full name should be part of your Person object, but now we have to call some external function to get it. That’s where prototype comes in. Functions in JavaScript have a prototype property. Prototype defines static methods, like getFullName, and ‘pastes’ them on your objects through prototypal inheritance.

var PersonProto = function (firstName, lastName) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
};

PersonProto.prototype.fullName = function () {
    return this.firstName + ' ' + this.lastName;
};

And that’s really all there is to it! We have now defined the fullName function on PersonProto’s prototype, which means every instance of PersonProto now gets the fullName function.

var p = new PersonProto('Sander', 'Rossel');
var n = p.fullName();

If we’d benchmark this we’d get about the same speed as we got earlier when using the getFullName function (really, try it).

To Prototype or not to Prototype…

You might be tempted to think it doesn’t matter whether you use a static method like getFullName or prototype, other than the manner in which you invoke the function (object.function() vs. function(object)). That isn’t true though, prototype has a few pros and cons compared to other methods. First of all, by using it, we’ve lost control over ‘this’. Earlier, when defining fullName in the constructor we could use ‘self’, which always points to the correct instance of Person. We’ve lost that benefit with prototype and ‘this’ is now dependent on the context in which the function was invoked. Below code will break.

var p = new PersonProto('Sander', 'Rossel');
console.log(p.fullName());
var fn = p.fullName;
console.log(fn());

While the following code will work just fine.

var p = new Person('Sander', 'Rossel');
console.log(p.fullName());
var fn = p.fullName;
console.log(fn());

It’s the same code on the outside, but fullName of Person points to ‘self’ while fullName of PersonProto points to this (which, in the second call, is ‘window’).

Another pro, maybe, is that prototypal functions cannot be deleted from an object (although they can be overwritten). The first bit will run fine and prints ‘Sander Rossel’, the second part will break.

var p = new PersonProto('Sander', 'Rossel');
delete p.fullName;
console.log(p.fullName());

// This will break.
// fullName is no longer defined after a delete.
var p = new Person('Sander', 'Rossel');
delete p.fullName;
console.log(p.fullName());

And remember that prototype objects are static, which means they’re shared by all instances of an object. You can overwrite the value per instance though.

PersonProto.prototype.friends = [];
var p1 = new PersonProto('Sander', 'Rossel');
var p2 = new PersonProto('Bill', 'Gates');
p1.friends.push(p2);
console.log(p1.friends[0].fullName() + ' is a friend of ' + p1.fullName());
console.log(p2.friends[0].fullName() + ' is a friend of ' + p2.fullName());

Guess what, because the friends array is static Bill Gates is now also a friend of himself, even though I only added him to my own friends.

Inheritance

One big pro to using prototype is inheritance. One object can inherit the prototype of another object. The ‘pseudoclassical’ way to do this is by copying the prototype object.

var Employee = function (firstName, lastName, salary) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
    self.salary = salary;
};

Employee.prototype = PersonProto.prototype;

Employee.prototype.getSalary = function () {
    return this.fullName() + ' earns ' + this.salary;
};

So we have an Employee with a salary and, of course, a name. An Employee is actually just a Person with a salary. So we ‘inherit’ the prototype of PersonProto. We also define a new function on the prototype, getSalary. Unfortunately, while Employee now has the fullName function, this has some undesired side effects…

var e = new Employee('Sander', 'Rossel', 1000000); // I wish :-)
console.log(e.getSalary());

var p = new PersonProto('Sander', 'Rossel');
console.log(p.getSalary());

That’s right, PersonProto now also has a getSalary function! That’s because Employee.prototype == PersonProto.prototype. So once we add getSalary to Employee.prototype PersonProto now has it too.

We can fix this by creating a temporary constructor, assigning the prototype to the temporary constructor, instantiating an object using the temporary constructor and assigning that to the prototype of the inheriting object. Last, because a prototype is assigned to the constructor function, we must set the prototype’s constructor to the inheriting constructor.

var Temp = function () {};
Temp.prototype = PersonProto.prototype;
Employee.prototype = new Temp();
Employee.prototype.constructor = Employee;

Employee.prototype.getSalary = function () {
    return this.fullName() + ' earns ' + this.salary;
};

Alright, so I agree that’s pretty arcane! Luckily you can put this in a function so you only have to write it once.

var inherit = function (inheritor, inherited) {
    var Temp = function () {};
    Temp.prototype = inherited.prototype;
    inheritor.prototype = new Temp();
    inheritor.prototype.constructor = inheritor;
};
inherit(Employee, PersonProto);

And you can also see that Employee is actually also a PersonProto.

if (e instanceof Employee) {
    console.log('e is an instance of Employee.'); 
}

if (e instanceof PersonProto) {
    console.log('e is an instance of PersonProto.');
}

Object.create

Another method to create an object with a specific prototype is by using the Object.create function.

var o = Object.create(PersonProto.prototype);
o.firstName = 'Sander';
o.lastName = 'Rossel';
console.log(o.fullName());

So here o has the PersonProto prototype and o is of the type PersonProto. Now let’s use Object.create for inheritance like we’ve seen above (for this example I’ve created an Employee2 which is similar to Employee).

Employee2.prototype = Object.create(PersonProto.prototype);
Employee2.prototype.constructor = Employee2;

Employee2.prototype.getSalary = function () {
    return this.fullName() + ' earns ' + this.salary;
};

var e = new Employee2('Sander', 'Rossel', 1000000); // I wish :-)
console.log(e.getSalary());

And there you have it.

Prototype vs. __proto__

As I said before prototype kind of ‘glues’ the static functions to the object instances you create. This happens through the proto property each object instance has. Each instance of an object has a proto property defined, which is constructed using the constructor.prototype. So while object literals don’t have a prototype property they do have a proto property which you can use to dynamically extend the prototype of an object.

var p = {
    firstName: 'Sander',
    lastName: 'Rossel'
};

if (p.__proto__ === Object.prototype) {
    console.log('__proto__ points to the constructors prototype.');
}

// Highly discouraged!
p.__proto__.fullName = function () {
    return this.firstName + ' ' + this.lastName;
};

console.log(p.fullName());
delete p.fullName;
console.log(p.fullName());

So by adding fullName to o.proto we’ve actually added fullName to Object.prototype! That means ALL your objects now have a fullName function.

var i = 10;
console.log(i.fullName());

See why doing that is highly discouraged? It’s slow to boot. I just thought you should know about it.

Beware, fellow traveler!

So that’s it! I have some final remarks for you before you go and use this knowledge out in the wild.
Don’t change the prototype of built-in types such as Object and Array. You could do this to support new functionality in older browsers, but there are probably a few libraries that already do that for you.

Prototype can have a negative impact on performance. What happened when we called fullName on Employee? The JavaScript engine looks for fullName on the object, but could not find it. It then looked for fullName on the Employee prototype, but again couldn’t find it. It works its way down the prototype chain and looked in the PersonProto prototype next, where it found fullName and called it. You can imagine that having huge inheritance chains can be bad for performance (but why would you have huge chains anyway?).

Last, as I said before, you can use JavaScript without ever needing prototype. Likewise, you can inherit objects without the need for prototype. For example, you can create a function Employee that creates a Person, adds the salary property and the getSalary function, and returns that.

Wrap up

And here’s some additional reading. First, of course, we have JavaScript Succinctly, which explain the various types, objects and functions, including prototype and inheritance.
And if you have some money to spare I can recommend one of the following books: Object-Oriented JavaScript by Packt Publishing or The Principles Of Object-Oriented JavaScript by No Starch Press.

Happy coding!

MEAN web development #9: Some last remarks

So by now we’ve seen the full MEAN stack, MongoDB, Express, AngularJS and Node.js. Additionally we’ve seen the templating engine Jade in action as well as used Socket.io for real time web applications. If you combine that with my earlier series on ‘vanilla’ web development you’re already a pretty versatile web developer (well, dependent on how much you practiced)!
In case you missed a MEAN article, here they are:

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

In this post I’m going to discuss one topic we haven’t covered yet, deployment. Next to that I’m going to give you some alternatives for the technologies we’ve covered in this series.

There is no GitHub repository for this article as there won’t be any code samples.

Deploying a Node.js application

So we haven’t talked about deployment yet. Not even in my web development series. To be honest, deploying software is not what I do, I just write them. Besides, deploying to the Windows laptop you’ve used to build your software is a bit difficult and in most cases isn’t even close to actual deployment. Unfortunately I don’t have any spare web servers laying around 🙂
That isn’t to say I can’t point you in the right direction.

Node.js is a little different from what you’re used to. Consider the PHP application we wrote earlier in Web development #4: PHP in the back. We wrote our page and got it up and running using XAMPP, where we specified the port and other settings. The PHP file didn’t do anything. Likewise, a C# web application doesn’t do anything until you host it using IIS, which can be configured however you like.
That’s different for a Node.js application. After all we specify the server, where it should run and how it should run in our JavaScript file. And then we could run it from the console. On production environments we really don’t want to run a console though. We probably want to host our application on port 80, which is the default HTTP port, which requires an elevated command prompt. So someone with admin rights should log on to the server to (re)start our Node.js app every time something happens (either the app crashes or the machine is restarted). That doesn’t sound very appealing…

So we could simply write some command script using a loop that restarts Node.js whenever it crashes and start that up, with elevated privileges, either using a service or the built-in scheduler. That solution has some serious limitations though. What if your app goes in an unrecoverable state, making it crash in a loop? Or what if, for some reason, it hogs up all of your memory? A command prompt can’t really give you a detailed log of what’s happening with your application.

That sounds really tiresome and messed up. Luckily there is a better alternative. You can use PM2 (Process Manager 2) to run Node.js (PM2 on GitHub). PM2 can run other scripts such as PHP, CoffeeScript and Ruby as well and it works on Linux, MacOSx and Windows.
You can install PM2 using npm (npm install pm2 -g). Make sure to add  the -g to make a global install. Now you can simply start any Node.js app by running “pm2 start node_app.js”. “pm2 list” will show a list with running applications. Then you can generate a startup script with “pm2 startup” to automatically start your apps on a computer reboot (which unfortunately doesn’t work on Windows, so I haven’t been able to test it). “pm2 monit” will show you some statistics on the current status of your applications.
Next to that PM2 has a deployment system, log management, a development tool (similar to nodemon which we’ve been using in this series), cluster mode (for running on multiple CPU’s, remember Node.js is single threaded) and much more which you can all use as well.

There are some alternatives to PM2, such as forever, but something completely different is to run your Node.js app as a Windows service. You can do this by using NSSM (the Non-Sucking Service Manager) and winser. You can download NSSM from their website and you can install winser using npm (npm install winser). Then you should add the following lines to your package.json:

"scripts": {
    "postinstall": "winser -i -s -c",
    "preuninstall": "winser -r -x -s",
}

Now in the command prompt browse to the folder that contains the package.json and execute “node_modules.bin\winser -i”. You have now installed your Node.js application as a service. To uninstall execute “node_modules.bin\winser -r”.

So I know that’s not much, but at least these are some considerations when deploying a Node.js application.

HTTPS/SSL

You might want to deploy your application using HTTPS for secure SSL-encrypred traffic. For this you’re going to need some certificates, which I dont have. Node.js has an https module, just like it has a http module. So now it shouldn’t be too difficult to write yourself an HTTPS enabled Node.js server.

var https = require('https');
var fs = require('fs');

var options = {
    key: fs.readFileSync('some-key.pem'),
    cert: fs.readFileSync('some-certificate.pem')
};

var server = https.createServer(options, function (req, res) {
    // Stuff...
});
server.listen(80, '127.0.0.1');

And here’s how you can use Express to handle HTTPS.

var app = require('express')();
var https = require('https');
var fs = require('fs');

var options = {
 key: fs.readFileSync('some-key.pem'),
 cert: fs.readFileSync('some-certificate.pem')
};

// Stuff...

var server = https.createServer(options, app`);
server.listen(80, '127.0.0.1');

And now you also know why you should use packages for your routing, you may want to re-use them.

MEAN alternatives

In this series we’ve seen the MEAN stack: MongoDB, Express, AngularJS and Node.js. It offers an alternative to the traditional LAMP stack, Linux, Apache, MySQL and PHP and the Microsoft stack with .NET and IIS. The baseline here is that we programmers just like to come up with cool or clever sounding acronyms. As I said before you can have a perfectly good MEN stack, leaving out the AngularJS. Or put in some Jade, or Sockets.io. Well, people have actually done that and came up with some other nice sounding acronyms. Here are some that I’ve seen: ANNE (AngularJS, Node.js, Neo4j, Express); BEANS (Bootstrap, Express, AngularJS, Node.js, Sockets.io); EARN (Express, AngularJS, Redis, Node.js). My point is that you’re not tied to MEAN, it’s simply a couple of technologies that work well together and can help you get things done.

If you like you can have a look at Sails.js, which is built on Express, but adds MVC and an ORM, among other things. Another alternative for Express (or Sails.js) is Hapi.js, which focuses more on configuration than code.

As alternative for MongoDB we’ve already seen Neo4j (a NoSQL graph database) and Redis (a NoSQL key-value store). They don’t actually have to be alternatives as you can use both in a single project. An actual alternative could be CouchDB, which is also a NoSQL document database and is probably the second most popular document database after MongoDB,
But who said you have to stick to NoSQL? If you’d like to use MySQL with Node.js that’s perfectly fine too!
If you just look at the Express database capabilities you’ll find databases such as Cassandra, PostgreSQL and ElasticSearch are supported out of the box.
And there are drivers for SQL Server and Oracle too.

Let’s look at some AngularJS alternatives. Of course there’s always jQuery that you can still use in your projects. Get some Knockout.js in your project too and you might not need AngularJS at all (although AngularJS is probably your first choice for SPAs (Single Page Applications).
While AngularJS is the most popular front end framework, it’s not your only choice. Underscore.js is another popular framework that is a little less bloated than AngularJS (but does less as well).
Another framework that you might want to try is Ember.js, which does pretty much everything that AngularJS does too. If you want to read more about Ember.js I can recommend Erik Hanchett’s blog.

And if you wish for another HTML template engine (or no template engine at all) you can ignore Jade and go with, for example, Mustache or Handlebars. Keep in mind you can use templating both on your back end and in your front end.

I’d mention alternatives for Node.js, but that would kind of defeat the purpose of MEAN and the (almost) all JavaScript stack. So let’s not do that (besides, you probably know them already).

Other popular modules

Let’s quickly check out some other popular Node.js modules. I’ll let you figure out how to use them on your own, but I’ll give a quick overview and a link to the website (with documentation).

The first library you might want to check is Browserify, which let’s you use require() in the browser. That’s pretty sweet!

Another popular library that you can use in both Node.js and in your front end is async. It provides many functions for asynchronous execution, such as each, map and filter on arrays.
It can also help you with asynchronous flow control. That is executing one task after another in an elegant and asynchronous manner. And for this same purpose the creator of async also gives us Nimble. And you might want to take a look at the alternatives Seq and Step as well.

So how about your minification, compilation, unit testing, linting (checking for syntax errors) etc.? For these tasks you can use Gulp or Grunt. Both applications are popular ‘task runners’ and can be easily installed using npm (using -g) and automate these kinds of tasks. They might take some configuration and some time to get used to, but they’re worth it.

Last I’d like to point out commander. Since everything nowadays seems to be working with the command prompt you might want to make your application command prompt configurable too. Something like “node server.js -super” where -super (or -s for short) starts your application in superman mode. You don’t need a library for this, but it does come in handy. Commander seems to be the most popular one.

So that’s it for the entire MEAN series. I hope you’ve learned and enjoyed it as much as I have! This is the end of the MEAN series, but certainly not the end of my blogging career. In the future you may expect more posts on web development, JavaScript, NoSQL, and who knows what. I’m always open for suggestions!

For additional reading on MEAN and related technologies I can once again recommend the Succinctly series by Syncfusion. They have many free ebooks like Node.js Succinctly, AngularJS Succinctly and MongoDB Succinctly. I’m also a big fan of the books by Manning Publications. Though not free they’re definitely worth your money. Books like Node.js In Action (second edition coming up), AngularJS In Action, MongoDB In Action (also a second edition coming up) and even Express In Action. A book on the entire MEAN stack, Getting MEAN, is also in the writing (so get it early)!

I’ll be on a vacation in Poland for the next two weeks, so don’t expect a new blog post for at least another three weeks. Maybe a short one on a rainy day and if I have wi-fi in the hotel, but I’m not making any promises.

Thanks for sticking with me and happy coding!

MEAN web development #8: Sockets will rock your socks!

This week I’m planning to keep it short. We’ll look at sockets and how to utilize them using Node.js. Luckily this is a relatively easy task for which Node.js is famous. Sockets enable you to build real time websites, something that is difficult at best using HTTP.
This will also be the last article in the series in which we’ll look at a new technology. If you read everything up til now you’re pretty well on your way to becoming a MEAN web developer! Next week we’ll have a wrap up and after that, who knows 🙂

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

As usual you can find the code samples for this post on my GitHub page under the mean8-blog repository.

What are sockets?

I won’t really go into technical details about sockets, or networks sockets. What is important to know is that a socket is basically an endpoint connection that allows communication between computers in a network. In an earlier post, Web development #1: Internet and the World Wide Web, I have briefly discussed the internet protocols TCP/IP (Transmission Control Protocol/Internet Protocol) and I have mentioned other protocols such as UDP (User Datagram Protocol). Those protocols make use of sockets to transfer data across the web.

As we have seen protocols such as HTTP (and HTTPS) make use of the TCP/IP protocol, which makes use of sockets. As we know HTTP is a one way street, although the data flow isn’t. Think about it, with HTTP we can request data, but that data also has to be sent back to the client. What HTTP can’t do, but sockets obviously can, is sent data to a client. Now what if a server could send data to a client even though the client didn’t request it (at that exact moment)? Look no further! And that is exactly why sockets programming is becoming more and more popular!

The protocol used for this bi-directional exchange of data is called WebSockets and was standardized in 2011. As this is still pretty new keep in mind that older web browsers do not support this protocol. One thing to keep in mind is that WebSockets is really an upgrade from HTTP. A socket connection is actually established using an HTTP request.

Node.js has made it pretty easy to work with sockets. There are actually already quite a lot of tutorials out there and most of them let you build a chat application. Of course you can build anything requiring real time data. Think of real time Facebook or Twitter updates. It’s especially interesting when you consider the recent Internet of Things (or IoT) where everything is connected to the web. Let’s say someone rings your doorbell, which is connected to the web and sends you a picture of your front porch when someone rings the bell. Would you want to use HTTP to constantly poll/request if someone has just rang your doorbell? No you wouldn’t! In these scenario’s sockets are a necessity!

Sockets and Node.js

So let’s set up a small Node.js server that supports sockets. We could use ‘pure’ WebSockets for this, but I’m going to use a library for this called socket.io. This will make our life a lot easier on both the back- and front-end. socket.io is a layer around WebSockets that simplifies the API and, more importantly, falls back on other methods if WebSockets isn’t supported.

We’ll start by creating a Node.js server that serves some HTML page. We’ve done that a few times before, so that should be no problem. Remember that WebSockets requires HTTP to work, so we’ll need the HTTP module as well. And, as always, I’ll be using Express as well.

var express = require('express');
var app = express();
var http = require('http').Server(app);

app.use(express.static('public'));

app.get(['/', '/index'], function (req, res) {
    res.sendFile(__dirname + '/public/client.html');
});

http.listen(80, '127.0.0.1');

After that we can install socket.io (npm install socket.io).

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static('public'));

app.get(['/', '/index'], function (req, res) {
    res.sendFile(__dirname + '/public/client.html');
});

io.on('connection', function(socket){
    console.log('A user connected!');
});

http.listen(80, '127.0.0.1');

As you can see the http object is used to create an instance of socket.io. After that we can listen to the connection event for incoming sockets.

Now socket.io does a little magic trick, it automatically serves socket.io to our front-end. That means creating a socket instance on the client is really easy. First of all we need to include the script somewhere.

<html>
    <head>
        <meta charset="utf-8">
        <title>Sockets example</title>
        <script src="/socket.io/socket.io.js"></script>
        <script src="client.js"></script>
    </head>
    <body>
        <h1>Sockets example</h1>
    </body>
</html>

And then we can use sockets in client.js.

var socket = io();

Wow, that was easy!

And you’ll notice that if you put that in /public/client.html and browse to localhost Node.js will log ‘A user connected!’ to the console! So we’re already connecting.

Now we’ve talked about EventEmitters before in MEAN web development #3: More Node.js. socket.io uses them extensively. Each socket has a special ”disconnect” event.

io.on('connection', function(socket){
    console.log('A user connected!');
    socket.on('disconnect', function () {
        console.log('A user disconnected...');
    });
});

If you try that, browse to localhost, and refresh the page, you’ll see “A user connectioned!”, “A user disconnected…” and “A user connected!” in the console. So this already works pretty sweet, right?

Let’s add another event. You know I like music and albums are always a favorite test object for me.

io.on('connection', function(socket){
    console.log('A user connected!');
    socket.on('disconnect', function () {
        console.log('A user disconnected...');
    });
    socket.on('add-album', function (album) {
        console.log(album);
    });
});

“Wait a minute!”, I hear you say, “No way a socket has an add-album event!” Well, not yet… Let’s check back in our front-end JavaScript again.

var socket = io();
socket.emit('add-album', {
    artist: 'Led Zeppelin',
    title: 'Led Zeppelin III'
});

Save it, browse to localhost again and surely will the console print the album. That’s pretty sweet!

But we’ll need more. After all, we want to receive data on our client! Of course we aren’t going to see any data unless we show it on our page.

Let’s first check out the server. This is really very easy. Ready?

io.emit('add-album', album);

Nice, we can simply use io.emit and all connections will get an update. So our client sends out an ‘add-album’ event to the server and the server sends an ‘add-album’ event back to the client. We could’ve used any name as event.

Let’s check the front-end. I’ve added in some AngularJS, which I’ve talked about before in MEAN web development #6: AngularJS in the front. Actually I’ve copied this example from that post and changed ‘book’ to ‘album’.

<html>
    <head>
        <meta charset="utf-8">
        <title>Sockets example</title>
        <script src="angular.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script src="client.js"></script>
    </head>
        <body ng-app="socketsApp">
        <div ng-controller="socketsController">
 
            <h1>Sockets example</h1>
            <ul>
                <li ng-repeat="album in albums">
 {{ album.artist + ' - ' + album.title }}
                </li>
            </ul>
 
            <input type="text" ng-model="newArtist" />
            <input type="text" ng-model="newTitle" />
            <button ng-click="addAlbum()">Add album</button>
        </div>
    </body>
</html>

And here’s the JavaScript.

angular.module('socketsApp', [])
    .controller('socketsController', function ($scope) {
        
        var socket = io();
        
        $scope.newArtist = null;
        $scope.newTitle = null;
        $scope.albums = [];
        $scope.addAlbum = function () {
            socket.emit('add-album', {
                artist: $scope.newArtist,
                title: $scope.newTitle
            });
            $scope.newArtist = null;
            $scope.newTitle = null;
        };
        
        socket.on('add-album', function (album) {
            $scope.$apply(function () {
                $scope.albums.push(album);
            });
        });
    });

Notice the $apply function of AngularJS. It’s a detail, but I need it to execute the code in the AngularJS context so that the view gets updated immediately.
What really matters is the socket.on function. I don’t have to explain it, you know how it works. It’s the exact same code you use on the server!

Now open up two tabs, two browsers, two windows, two whatever, and browse to localhost. Enter an artist and title in one window and submit. Now switch to the other window and you’ll see the album you’ve just added in the other window! No refresh, no nothing! If you’re really using two windows put them next to each other and see the effect live in real time.

Now maybe you’re thinking this is awesome, but there’s no need to send back the object to the client that just sent it to the server. For this you can use socket.broadcast.emit. This will send out a message to all sockets, except the one that’s broadcasting.

socket.broadcast.emit('add-album', album);

And the front-end would now look as follows.

$scope.addAlbum = function () {
    var album = {
        artist: $scope.newArtist,
        title: $scope.newTitle
    };
    socket.emit('add-album', album);
    $scope.albums.push(album);
    $scope.newArtist = null;
    $scope.newTitle = null;
};

Pretty sweet!

Rooms

Let’s say you’re building that chat app we were talking about earlier (basically what we created here too). Now maybe you want your web site to have multiple chat rooms. A room for C# discussion, a room for JavaScript discussion, or maybe people can create their own rooms about whatever (maybe cars, music, movies). And perhaps you want to implement a private chat as well (one on one, or only invited people). How can you do this?

I’ll leave the previous example for what it is and start a new one. From our page we want to be able to create a room, join a room, send a message and leave a room. So let’s check out the Node.js server side.

io.on('connection', function(socket){
    console.log('A user connected!');
    socket.on('disconnect', function () {
        console.log('A user disconnected...');
    });
    socket.on('add-room', function (room) {
        console.log('Added:');
        console.log(room);
        socket.join(room.name);
        socket.broadcast.emit('add-room', room);
    });
    socket.on('join-room', function (room) {
        console.log('Joined:');
        console.log(room);
        socket.join(room);
    });
    socket.on('send-message', function (message) {
        console.log('Send:');
        console.log(message);         socket.broadcast.to(message.roomName).emit('receive-message', message);
    });
    socket.on('leave-room', function (room) {
        console.log('Leave:');
        console.log(room);
        socket.leave(room);
    });
});

That’s quite a bit of code, but there’s not much new, really! When someone adds a room we just broadcast the room to all other clients so everyone can see the new room. Additionally we ‘join’ the room using socket.join. This creates a group of sockets that can be notified at once. When a user joins a room we simply pass in a room name and again call socket.join. Then when someone sends a message to a room we simply call socket.broadcast.to(roomName) and now only clients that have joined that specific group will get a notification. That’s pretty easy, right? When we leave a room we simply call socket.leave and the client will stop receiving notifications from that specific room.

The client-side scripting for this example isn’t really interesting. You can get the complete example from GitHub. And yes, I admit, the HTML could use a little work. The JavaScript works the same as in the previous example. We simply use socket.emit, to send events to the server, and socket.on to receive events from the server. I’ll leave it as practice for the reader to add user names, persist chat rooms, get a list of active rooms, implement private rooms, etc.

If you want to do more with sockets and socket.io I can recommend reading Syncfusion’s Node.js Succinctly. It has a chapter on ‘vanilla’ sockets programming in Node.js (including an example on UDP) and a chapter on socket.io. If you’re still struggling with AngularJS I can recommend reading AngularJS Succinctly.
Additionally Manning has a great book on Node.js, Node.js in Action, which, of course, also covers sockets. A second edition of the book is also in the making!

Next week we’ll be wrapping up the MEAN web programming series! Happy coding!

MEAN web development #7: MongoDB and Mongoose

Last week we’ve seen some of the basic functionality of AngularJS, at least enough to get you started. Before that we’ve seen Node.js and Express. So that’s EAN and we’re left with the M. Well, Dial M for MongoDB because that’s what we’re going to look at this week.

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

As usual you can find the examples for this post on my GitHub page in the mean7-blog repository.

Hello persistent data

I’ve already written an entire post on NoSQL and MongoDB, A first look at NoSQL and MongoDB in particular. I’ve already told you to read it in the first part of this series, MEAN web development #1: MEAN, the what and why. If you haven’t read either of those I suggest you do so before continuing because I won’t repeat how to install MongoDB and MongoVUE. Don’t worry I’ll wait…

Before we continue I should mention that everything we’re going to do is async. That means lots of callback functions. We don’t want to block our main thread after all! It also means that the callbacks may not be called in the same order as their ‘parent functions’ are. Or that the records are actually inserted before we query them! Because I wanted to keep it simple in the complete example file I haven’t nested all examples in callbacks, but keep in mind that you may get some odd results. It worked fine for me by the way, if you get some weird results try running the examples one by one (simply commenting out the others).

So let’s just get a Node.js server up and running and write some data to the database real quick! You’ll be surprised how easy it is. First of all install the MongoDB driver using npm (npm install mongodb).
Next we’ll make a connection to our MongoDB instance.

var app = require('express')();
var MongoClient = require('mongodb').MongoClient;
     
var urlWithCreds = 'mongodb://user:password@localhost:27017/local';
var url = 'mongodb://localhost:27017/local';
MongoClient.connect(url, function (err, db) {
    if (err) {
        console.log(err);
    } else {
        console.log('Connected to the database.');
        db.close();
    }
});
var server = app.listen(80, '127.0.0.1');

So first of all we require Express (which isn’t necessary for MongoDB) and MongoDB. We take the MongoClient property of the MongoDB module. We use this client to connect to the database using the connect function, which takes a URI and a callback function. The callback has a MongoError (in case you can’t log in, for example if you have wrong credentials) and a Db as parameters.
We can use the Db object to do all kinds of stuff like creating and dropping databases, collections and indices and do our CRUD operations (Create, Read, Update, Delete). Let’s insert a simple object.

var url = 'mongodb://localhost:27017/local';
MongoClient.connect(url, function (err, db) {
    if (err) {
        console.log(err);
    } else {
        var artist = {
            name: 'Massive Attack',
            countryCode: 'GB'
        };
        var collection = db.collection('artists');
        collection.insertOne(artist);
        console.log(artist._id);
        db.close();
    }
});

As you can see we use the db parameter to get a collection (the MongoDB variant of a database table) using the collection function. If the collection does not exist it will create one automatically. We can then simply insert an object using the insertOne function of the collection. Now something funny has happened. After calling insertOne our artist object suddenly has an _id property. MongoDB uses this _id to uniquely identify objects.
So that wasn’t so bad right? Let’s look at other CRUD functionality!

CRUD with MongoDB

So let’s retrieve the record we just inserted. We can do this using the findOne function of the collection.

MongoClient.connect(url, function (err, db) {
    if (err) {
        console.log(err);
    } else {
        var collection = db.collection('artists');
        collection.findOne({ name: 'Massive Attack' }, function (err, artist) {
            if (err) {
                console.log(err);
            } else {
                console.log(artist);
            }
            db.close();
        });
    }
});

So the object that is passed to the findOne function is actually a search parameter. In this case we’re looking for documents (or records) that have a name equal to ‘Massive Attack’. The second parameter is a callback function that gives us an error, if any occurred, and the document that was retrieved. If you ran the previous example multiple times Massive Attack will be in your database more than once (having different values for _id), in this case findOne simply returns the first document it finds.

So let’s insert a few more artists, just so we’ve got a little set to work with. We can use the insertMany function for this.

collection.insertMany([
{
    name: 'The Beatles',
    countryCode: 'GB',
    members: [
        'John Lennon',
        'Paul McCartney',
        'George Harrison',
        'Ringo Starr'
    ]
},
{
    name: 'Justin Bieber',
    countryCode: 'No one wants him'
},
{
    name: 'Metallica',
    countryCode: 'USA'
},
{
    name: 'Lady Gaga',
    countryCode: 'USA'
}
], function (err, result) {
    if (err) {
        console.log(err);
    } else {
        console.log(result);
    }
});

Now you may think there’s a findMany function as well, but it’s actually just called find. find returns a Cursor which is something like an array, but not quite. We can use the toArray method though. The find function has a query parameter which is just an object that describes what fields of a document must have which values. We can search fields with AND, OR, NOT, IN, greater than, lesser than, regular expressions and everything you’re used to in SQL databases.

var findCallback = function (err, artists) {
    if (err) {
        console.log(err);
    } else {
        console.log('\n\nFound artists:');
        artists.forEach(function (a) {
            console.log(a);
        });
    }
};

// All documents.
collection.find().toArray(findCallback);

// Name not equal to Justin Bieber.
collection.find({ name: { $ne: 'Justin Bieber' } }).toArray(findCallback);

// Name equal to Massive Attach or name equal to The Beatles.
collection.find({ $or: [{ name: 'Massive Attack' }, { name: 'The Beatles' }] }).toArray(findCallback);

// Members contains John Lennon.
collection.find({ members: 'John Lennon' }).toArray(findCallback);

Now let’s update a record.

collection.findOneAndUpdate({ name: 'Massive Attack' },
    { $set: {
        cds: [
            {
                title: 'Collected',
                year: 2006,
                label: {
                    name: 'Virgin'
                },
                comment: 'Best Of'
            },
            {
                title: 'Mezzanine',
                year: 1998,
                label: 'Virgin'
            },
            {
                title: 'No Protection: Massive Attack v Mad Professor',
                year: 1995,
                label: 'Circa Records',
                comment: 'Remixes'
            },
            {
                title: 'Protection',
                year: 1994,
                label: {
                    name: 'Circa'
                }
            }
        ]
        }
    }, function (err, result) {
    console.log('\n\nUpdated artist:');
    if (err) {
        console.log(err);
    } else {
        console.log(result);
    }
});

Here we see the findOneAndUpdate in action. Alternatively we could’ve used updateOne. And for multiple updates we can use updateMany.

Now let’s delete a record. There’s one guy I really don’t want in my database (yes, I’ve added him so I wouldn’t feel guilty about deleting him).  And for this we can, of course, use findOneAndDelete.

collection.findOneAndDelete({ name: 'Justin Bieber' }, function (err, result) {
    console.log('\n\nDeleted artist:');
    if (err) {
        console.log(err);
    } else {
        console.log(result);
    }
});

Really no surprises there. Alternatively there’s deleteOne and to delete many use, you guessed it, deleteMany.

Mongoose

So MongoDB with Node.js looks really good, right? It wasn’t very hard to use. It’s really just a matter of working with JavaScript objects. And as we all know JavaScript objects are very dynamic. In the previous examples we’ve already seen that some artists have a member property defined and then when we updated we all of a sudden had a cds property and some CD’s have a comment while others don’t… And MongoDB has no problem with it at all. We just save and fetch what is there.

Now try this.

var app = require('express')();
var MongoClient = require('mongodb').MongoClient;

var Artist = function (name, activeFrom, activeTo) {
    if (!(this instanceof Artist)) {
       return new Artist(name, activeFrom, activeTo);
    }
    var self = this;
    self.name = name;
    self.activeFrom = activeFrom;
    self.activeTo = activeTo;
    self.yearsActive = function () {
        if (self.activeTo) {
            return self.activeTo - self.activeFrom;
        } else {
            return new Date().getFullYear() - self.activeFrom;
        }
    };
};

var url = 'mongodb://localhost:27017/local';
MongoClient.connect(url, function (err, db) {
    if (err) {
        console.log(err);
    } else {
        var collection = db.collection('artists');
        // Empty the collection
        // so the next examples can be run more than once.
        collection.deleteMany();
        
        var massiveAttack = new Artist('Massive Attack', 1988);
        console.log('\n\n' + massiveAttack.name + ' has been active for ' + massiveAttack.yearsActive() +  ' years.');
        
        collection.insertOne(massiveAttack);
        
        collection.findOne({ name: massiveAttack.name }, function (err, result) {
            if (err) {
                console.log(err);
            } else {
                try {
                    console.log('\n\n' + result.name + ' has been active for ' + result.yearsActive() +  ' years.');
                } catch (ex) {
                    console.log(ex);
                }
            }
        });
        
    }
});

var server = app.listen(80, '127.0.0.1');

What happens is that MongoDB doesn’t store the yearsActive function nor the constructor function. What MongoDB stores are just the non-function values. The result is that when we retrieve our object it will no longer be an Artist object, but just an object that just so happens to have the same properties as an Artist.

This is where Mongoose comes to the rescue! Mongoose adds a schema to your MongoDB objects. Let’s see how that works.

To add Mongoose to your project you can install it using npm install mongoose.

So first we can use mongoose.connect to get a connection to the database.

var app = require('express')();
var mongoose = require('mongoose');

var url = 'mongodb://localhost:27017/local';
mongoose.connect(url);
var db = mongoose.connection;
db.on('error', function (err) {
    console.log(err);
});
db.once('open', function (callback) {
    // ...
});

var server = app.listen(80, '127.0.0.1');

After that we can define a schema using the Schema function.

db.once('open', function (callback) {
    var artistSchema = mongoose.Schema({
        name: String,
        activeFrom: Number,
        activeTo: Number
    });
    artistSchema.methods.yearsActive = function () {
        var self = this;
        if (self.activeTo) {
            return self.activeTo - self.activeFrom;
        } else {
            return new Date().getFullYear() - self.activeFrom;
        }
    };
});

And as you can see I’ve appended the yearsActive function to the artistSchema.methods object. After that we can create a Model using mongoose.model.

var Artist = mongoose.model('Artist', artistSchema);

And after that the Artist variable (a Model) is actually the portal to your collection. It’s also a constructor function for artists. So let’s create our Massive Attack artist.

var massiveAttack = new Artist({ name: 'Massive Attack', activeFrom: 1988 });
console.log('\n\n' + massiveAttack.name + ' has been active for ' + massiveAttack.yearsActive() + ' years.');

And then we can save it using the save function.

massiveAttack.save(function (err, result) {
    if (err) {
        console.log(err);
    } else {
        // ...
    }
});

And now that the artist is saved let’s retrieve it and call that yearsActive function again. We can simply retrieve our object using Model.findOne.

Artist.findOne({ name: massiveAttack.name }, function (err, result) {
    if (err) {
        console.log(err);
    } else {
        try {
            console.log('\n\n' + result.name + ' has been active for ' + result.yearsActive() +  ' years.');
        } catch (ex) {
            console.log(ex);
        }
    }
});

And here I’ve put the findOne directly in the callback function of save, which I didn’t do before. I needed this because calling findOne directly after save didn’t yield any results (timing issue I guess). More importantly it did successfully execute the yearsActive function!

And like with the regular MongoDB driver we can use find, remove, findOneAndRemove and findOneAndUpdate.

So we’ve looked at the MongoDB driver and at the problem of schemaless objects which Mongoose fixes. I can recommend practicing a bit, as it’s really very easy to drop, create, insert, update, read and remove data, and reading the API documentation of both. We’ve only scratched the surface here, but it got you on your way.

And of course I’m going to recommend some additional reading. The Node.js Succinctly book is just a great resource for Node.js in general and it has a tiny bit on MongoDB and SQLite as well. I can also recommend MongoDB Succinctly. And Getting MEAN from Manning even has a chapter on MongoDB and Mongoose.

Happy coding!

MEAN web development #6: AngularJS in the front

Hi all and welcome back! Welcome back to me too as I’ve been away for a while. Let’s just say I was enjoying a summer vacation from blogging. But I’m back to finish this MEAN series! This week I’ve got AngularJS for you. Maybe next week too.
And in case you need a refresher, here are my previous posts about MEAN:

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

So in the previous post we’ve seen how we can build pages using the Jade template engine. Pretty sweet, but we need something bigger, better and badder for our front-end.

You can find the examples for this blog on my GitHub page in the mean6-blog repository.

What is AngularJS?

You may have heard of AngularJS before. It’s one of the most popular open-source front-end JavaScript frameworks for the web developed by Google. And, of course, it’s the A in MEAN. But what does it do?

AngularJS is an MVVM framework, much like Knockout.js. It does a bit more than Knockout.js does though. Next to bindings AngularJS can be used for DOM manipulation, more like jQuery. And it does even more, like handling AJAX and routing. As Google likes to put it: AngularJS is “Superheroic” in that it does just about everything.

So instead of talking let’s see some action! First of all we need to install AngularJS. You can download it from the AngularJS website, or you can install it through a package manager such as npm or Bower (install angular). I’ve discussed all three methods in earlier posts so I will not repeat them here. Anyway, if you’ve downloaded my samples from GitHub you’ll be good to go.

The first examples of this post can be tested using nothing but the file system. For later examples with AJAX we’re going to need a little Node.js server, so I’ll add that later. The non-server examples can be found in the front-end.html and the front-end.js files.

So let’s take a look at a first example.

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS example</title>
        <script src="node_modules/angular/angular.min.js"></script>
    </head>
    <body ng-app>
        <p>This is your first angular expression: {{ 'This is AngularJS' + ' syntax!' }}</p>
    </body>
</html>

So there are two things going on here. First is the ng-app directive in the body element. This tells AngularJS that body is the root element of our application and that AngularJS should do its magic. You can place it anywhere you want (like in the html element, or maybe a div element somewhere) and a page can have multple ng-app directives (which I won’t be doing in this post).

Next is, of course, the weird {{ }} syntax, which is the syntax AngularJS uses for its bindings. In this case you’ll see that ‘This is AngularJS’ and ‘ syntax!’ are, indeed, appended in your browser, like it was just some JavaScript. Try using {{ 1 + 2 }} and you’ll see it will print ‘3’ since 1 + 2 equals 3 in JavaScript (and not ’12’).

Now let’s look at something really very cool. Suppose you want to bind some value to an input. Here’s how to do it.

<body ng-app>
    <p>Enter you name:
        <input type="text" ng-model="firstName" />
        <input type="text" ng-model="lastName" />
    </p>
    <p>You have entered: {{ firstName + ' ' + lastName }}</p>
</body>

No JavaScript required! Wow, that is so cool! And firstName and lastName are updated real time, while you’re typing! We bound our inputs using the ng-model directive which takes care of creating and binding the firstName and lastName properties.

Enter controllers

You’ll often want more control over your code and putting all of your JavaScript into your HTML is not a good idea. So we’ll want to use AngularJS with some custom JavaScript file that we wrote. This is where things get tricky. Not very tricky, but you just got to know how it works.

An AngularJS application is defined by modules. Modules then define controllers.

angular.module('fullNameApp', [])
    .controller('fullNameController', function ($scope) {
        $scope.firstName = '';
        $scope.lastName = '';
        $scope.fullName = function () {
            return $scope.firstName + ' ' + $scope.lastName;
        };
    });

So as we see here we create a module by calling the angular.module function and passing it more than one parameter. This returns an application so we can call the controller function directly on the return value. In the controller function we pass in the name of the controller, so we can use it in our HTML, and a constructor function, which receives a $scope variable to which we can append properties.

Now our HTML would look like this:

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS example</title>
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="front-end.js"></script>
    </head>
    <body ng-app="fullNameApp">
        <div ng-controller="fullNameController">
            <p>Enter you name:
                <input type="text" ng-model="firstName" />
                <input type="text" ng-model="lastName" />
            </p>
            <p>You have entered: {{ fullName() }}</p>
        </div>
    </body>
</html>

So as you can see we’ve now named our ng-app directive and we’ve added a div element with an ng-controller directive which points to our fullNameController controller. Finally, we now use the fullName function. Notice that we could now set default values in our controller and they’ll be displayed on our page automatically.

$scope.firstName = 'Sander';
$scope.lastName = 'Rossel';

More directives

So let’s take a look at some more directives that can help you build amazing pages. ng-repeat can be used to repeat an element for every item in a list. So let’s add a little array on our controller.

$scope.favoriteMovies = [
    'Star Wars',
    'Lord of the Rings',
    'Fight Club'
];

And display it in an unordered list.

<ul>
    <li ng-repeat="movie in favoriteMovies">
        {{ movie }}
    </li>
</ul>

Now we want to be able to add and delete items from the list. This next piece might blow your mind, but there’s a very simple directive to make a text input that can make a comma separated list and convert it to an array real time.

<input type="text" ng-model="favoriteMovies" ng-list />

So we bind the input to our favoriteMovies using ng-model and then use ng-list to convert it to a comma separated list. Try adding “, Pulp Fiction” (or whatever movie you like) to the text input and the movie will automatically be added to the unordered list we had before!
And if you want something else instead of a comma specifiy it in the ng-list, like so:

<input type="text" ng-model="favoriteMovies" ng-list=" | " />

And what if we add objects instead of strings?

$scope.favoriteAlbums = [
    { artist: 'The Beatles', title: "Sgt. Pepper's Lonely Hearts Club Band" },
    { artist: 'Moby', title: 'Play' },
    { artist: 'The Prodigy', title: 'Fat Of The Land' }
];
<ul>
    <li ng-repeat="album in favoriteAlbums">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>

So how about making that editable?

<div ng-repeat="album in favoriteAlbums">
    <input type="text" ng-model="album.artist" />
    <input type="text" ng-model="album.title" />
</div>
<button ng-click="favoriteAlbums.push({})">New album</button>

And that’s where we see the ng-click in action. Of course we could’ve called a function on our controller too.

$scope.addAlbum = function () {
    $scope.favoriteAlbums.push({});
};
<button ng-click="addAlbum()">New album</button>

There’s a little problem with ng-repeat that isn’t quite obvious from these examples. ng-repeat creates a separate scope for each object in an array. For objects this is no problem, but if you were binding to an array of primitives, such as integers or strings, the values wouldn’t be updated. So just remember to use objects when wanting to update array elements.

So how about adding a little styling to our page? With the ng-class directive we can add styles to elements based on some boolean value. The best part is you can add multiple classes based on one or more boolean values. So I have added a little embedded CSS to our page.

<style>
    .colored {
        color: red;
    }
 
    .underlined {
        text-decoration: underline;
    }
</style>

And two properties in the controller to specify whether we want some text to be colored and/or underlined.

$scope.addColor = true;
$scope.addUnderline = false;

Now in our HTML we can add two checkboxes for the two properties above and then add an ng-class directive on some element that adds the CSS classes based on the JavaScript properties.

Color: <input type="checkbox" ng-model="addColor" />
Underline: <input type="checkbox" ng-model="addUnderline" />
<p ng-class="{ colored: addColor, underlined: addUnderline }">This text might be colored and/or underlined!</p>

Pretty sweet, right? As you can see ng-class should simply evaluate to an object where each property is a class name with a value true or false to specify whether it should be applied.

But there’s an alternative. We could simply specify a string too. So consider the next JavaScript function which returns a string:

$scope.getClasses = function () {
    var classes = '';
    if ($scope.addColor) {
        classes += 'colored ';
    }
    if ($scope.addUnderline) {
        classes += 'underlined ';
    }
    return classes;
};

We can now use ng-class as follows:

<p ng-class="getClasses()">This text might be colored and/or underlined!</p>

Or you could return an array where each element is either an object such as in the first method or a string such as in the second method. I’ll leave that as practice for the reader though.

Also fun to mention, when you’re inside an ng-repeat directive you can use ng-class-even and ng-class-odd which work exactly as ng-class, but apply the styles only to even or odd elements.

Filters

AngularJS had a feature called filters. It can format values or actually filter lists.

Let’s go back to the first example. Let’s suppose you wanted to show full name in just uppercase or in just lowercase. This is an easy task!

<p>You have entered: {{ fullName() | uppercase }}</p>
<p>You have entered: {{ fullName() | lowercase }}</p>

We can also use a filter to format numbers and dates. It looks kind of the same, except this time you throw in a format.

<p>
    <input type="text" ng-model="number"><br>
    Number (default): {{ number | number }}<br>
    Number (no fractions): {{ number | number: 0 }}<br>
    Number (three fractions): {{ number | number: 2 }}
</p>
<p>
    Date (default): {{ date | date }}<br>
    Date (dd-MM-yyyy): {{ date | date: 'dd-MM-yyyy' }}<br>
    Date (yy/M/d): {{ date | date: 'yy/M/d' }}<br>
    Date (full): {{ date | date: 'fullDate' }}<br>
    Date (long): {{ date | date: 'longDate' }}
</p>

And for arrays you can do some awesome stuff too!  For this we use the orderBy or filter filter.

<h3>Ordered by title</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | orderBy: 'title'">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Ordered by artist reverse</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | orderBy: 'artist' : true">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Filtered on everything with '*y*'</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | filter: 'y'">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>
<h3>Filtered on artist with '*y*'</h3>
<ul>
    <li ng-repeat="album in favoriteAlbums | filter: { artist: 'y' }">
        {{ album.artist + ' - ' + album.title }}
    </li>
</ul>

Keep in mind that we can get these values from our JavaScript controller as well. You can make the most awesome dynamic filters with very little trouble. Just make sure you pass in an object with the same properties as the objects you’re repeating and set their values to the values you’d like to filter.

AJAX with AngularJS

So as mentioned AngularJS does a lot more than just HTML binding. One feature we’re going to look at here is that of the $http service. Needless to say we’ll need a little back-end server to communicate with, so for the AJAX examples I’m going to create a Node.js server and some new HTML and JavaScript so we can serve them up using our Node.js server.

Here’s the server:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

var books = [
    { title: 'Lord of the Rings', author: 'J.R.R. Tolkien' },
    { title: 'Harry Potter', author: 'J.K. Rowling' },
    { title: "The Hitchhiker's Guide to the Galaxy", author: 'Douglas Adams' }
];

app.use(bodyParser.json());
app.use(express.static('public'));

app.get(['/', '/index'], function (req, res) {
    res.sendFile(__dirname + '/public/ajax-example.html');
});

app.get('/books', function (req, res) {
    res.send(books);
});

app.post('/addBook', function (req, res) {
    var book = req.body;
    books.push(book);
    res.send(books);
});

var server = app.listen(80, '127.0.0.1');

So there’s a lot going on there. First of all I’ve added some Express. I’m also requiring body-parser (npm install body-parser), which is needed to get our POST data. Then I call the app.use function a couple of times. We’ve seen it before. It simply adds a middleware to a path. In this case we tell it to parse any JSON body so we can use it in our app. We also tell it that we can serve static files from the public folder (so we can serve the HTML and JavaScript file).
After that we serve the page by browsing to the root or root/index. I’ve also specified a GET for root/books, which simply returns a list of books (as JSON). And, what it’s all about, a POST to add a book to the list of books.

Let’s look at our front-end JavaScript.

angular.module('ajaxApp', [])
    .controller('ajaxController', function ($scope, $http) {
        $scope.newAuthor = null;
        $scope.newTitle = null;
        $scope.books = [];
        $scope.getBooks = function () {
            $http.get('http://localhost/books')
            .then(function (response) {
                $scope.books = response.data;
            }, function (response) {
                alert('Something went wrong while getting the books!');
            });
        };
    $scope.addBook = function () {
        $http.post('http://localhost/addBook', { author: $scope.newAuthor, title: $scope.newTitle })
            .then(function (response) {
                $scope.newAuthor = null;
                $scope.newTitle = null;
                $scope.books = response.data;
            }, function (response) {
                alert('Something went wrong while adding a new book!');
            });
        };
    });

So that’s quite a thing too! First of all notice a $http parameter being passed to the controller constructor function. We’ll need this $http parameter to make HTTP calls. Now we first use this in the getBooks function. You’ll see that using this $http stuff is actually very simple! We use $http.get and pass it our URL to get the books. It returns a promise, which has a then function that takes two callbacks, a success function and a failure function. The functions are executed once the asynchronous call returns (AJAX is asynchronous, remember?). So if everything goes right we simply assign the data (a list of books) to the books property. If something goes wrong we show an alert.

In the addBook function I’m using the $http.post function. It’s really similar to the get example, except we’re now passing in some data, a new book. Upon success the book list, including the new book, is returned and we reset the newAuthor and newTitle (nice example of two-way binding by the way).

Now for the HTML:

<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS AJAX example</title>
        <script src="angular.min.js"></script>
        <script src="ajax-example.js"></script>
    </head>
    <body ng-app="ajaxApp">
        <div ng-controller="ajaxController">
 
            <h2>AJAX example</h2>
            <button ng-click="getBooks()">Get books</button>
            <ul>
                <li ng-repeat="book in books">
                    {{ book.author + ' - ' + book.title }}
                </li>
            </ul>
 
            <input type="text" ng-model="newAuthor" />
            <input type="text" ng-model="newTitle" />
            <button ng-click="addBook()">Add book</button>
        </div>
    </body>
</html>

And there you have it!

So AngularJS can do two-way binding, supports MVVM and MVC architecture, it can do AJAX, but also routing, internationalization and localization, you can write custom directives and customize all you like, it supports testing and it has lots of directives I haven’t discussed like ng-show, ng-hide, ng-form, ng-blur… I guess Google wasn’t exaggerating when they called AngularJS ‘superheroic’ because it really seems to have some super powers!

And of course I’ll be leaving you with some recommended reading. As you know I’m a big fan of the (free) Succinctly series by Syncfusion, so here’s two must reads: AngularJS Succinctly and Node.js Succinctly. Also check out these awesome books by Manning Publications: AngularJS In Action, AngularJS In Depth, Node.js In Action (Second Edition) and Getting MEAN. And a book I’ve recently picked up at work: Pro AngularJS.
Well, that should keep you busy for a few months!

Happy coding!

MEAN web development #5: Jade and Express

In the last few weeks it was my time to shine… In absence. Been quite busy with, you know, stuff. But here I am ready to give you a new installment of the MEAN web development series! If you haven’t read my previous posts, or if you’ve forgotten all about them in my absence, you can find them here:

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

So in my previous blog from a few weeks back I’ve talked about using Express in Node.js. One thing I haven’t discussed yet is the templating option of Express. As that is actually quite simple this blog will be more about the template engine Jade than about Express. Of course we’ll use both to build a few pages.

You can find the examples for this blog on my GitHub page in the mean5-blog repository.

Starting out with Jade

So you can probably guess our first step (assuming you’ve already installed Node.js)… If it included npm somehow you are correct. We need to install Jade using npm. We’ll also want Express, of course, you know how it goes! You can read about npm and how to use it in my first MEAN article, MEAN web development #1: MEAN, the what and why. So create a folder for your project somewhere, optionally create a package.json file (containing at least an opening and closing bracket), open up a command prompt and use the following commands.

cd C:\project-folder
npm install express --save
npm install jade --save

The –save is optional and only makes sense when you created a package.json file.

Finally create your server.js file where your actual JavaScript goes. So now you have everything you need to start using Node.js, Express and Jade.

Let’s not do that yet though. Let’s take a step back. What exactly is Jade and why would you want to use it? Jade is a template engine, which means you can write some pseudo-HTML which the Jade engine can transform into actual HTML. One reason to use Jade is because it saves typing, “h1 Examples” will output “<h1>Example</h1>” for example. So that saves like seven characters, but it adds up.

Less typing is the least good reason to start using Jade though. When using Jade it is possible to pass some JavaScript object to your Jade code and build your page differently depending on your JavaScript. For example you might have an array and you want to iterate over the array to show a table on your page. Or maybe you just want to show the name of the logged in user in the top right corner.
Jade also supports and encourages a more object oriented style of writing your HTML. That’s awesome because you can now write a piece of HTML Jade once and use it everywhere.

Sounds good, right? But isn’t all of this already possible using PHP, Java or C#? Yeah, sure. And you can even do this in Node.js. Simply create a string containing your HTML, do some string concatenation, replaces, etc. No problem at all.
So why would you still want to use Jade? Because Jade makes it easy! All the string concatenation and replaces you’d have to do in PHP or “vanilla” Node.js is done for you. What’s left is a file that’s easier to read than the HTML it ultimately produces! And the good thing about Jade is that it has Node.js and Express support out-of-the-box!

Hello Jade!

I think that title says it all, no? We won’t be using Node.js and Express just yet though. In fact I want you to fire up a command prompt and install Jade again, this time globally so we can use it from the command prompt.

npm install jade -g

Now create a folder in the Node.js project we just created and call it jade-examples. We’re going to use this folder and some of the examples later with Node.js and Express. So in that folder create a file and call it hello-jade.jade. If you got my sources from GitHub you can find the file in jade-examples. Put the following code in the file.

html
  head
    title Hello, Jade!
  body
    h1 Hello, Jade!
    p This is awesome!

So that’s maybe a bit much for a simple Hello World example, but I’m pretty sure you can figure out what HTML this will generate. One thing I’d like to point out is that Jade is whitespace sensitive. More specifically, you must use whitespaces to nest elements. That means that you got to be really careful with your spaces, they’re not just makeup!

I recently spent an evening debugging some Haskell code (which is also whitespace sensitive) because I had used spaces on one line and a tab on another. Try figuring that out, it all looks the same!
I recommend using spaces by the way, if your editor supports it look for the option that converts tabs to spaces and you’ll be safe.

Enter the CMD

So how to get some HTML out of this? With the command prompt, of course. So browse to the folder where you’ve put your file and use the following command.

cd file-folder
jade hello-jade.jade

Now check it out, it generated a hello-jade.html file. It’s not very readable though. Everything is put on a single line! Let’s fix that. You can use some options in the command prompt. We’re going to use -P (that’s a capital P).

jade hello-jade.jade -P

Looks a look better, doesn’t it?

<html>
  <head>
    <title>Hello, Jade!</title>
  </head>
  <body>
    <h1>Hello, Jade!</h1>
    <p>This is awesome!</p>
  </body>
</html>

For multiline text you should use one of the following methods. Use a dot after your element or use pipes | on every single line.

p.
  This is one line.
  This is a second.
p
  |This is one line.
  |This is a second.
p
  This won't work.
  It just won't.

The HTML that is generated looks as follows.

<p>
  This is one line.
  This is a second.
</p>
<p>
  This is one line.
  This is a second.
</p>
<p>
  <This>won't work.</This>
  <It>just won't.</It>
</p>

As you can see Jade will happily generate syntactically correct, yet invalid HTML! Keep in mind that HTML isn’t whitespace sensitive so the above HTML will still render the two lines of text on a single line in your browser. If you need a seperate line you’ll have to insert a <br> element.

Doing more with Jade

So now that we’ve got that out of the way let’s look at some other features of Jade. Of course you can add attributes to your elements.

h1(id="header") Attributes
p(class="text") This is an example using attributes.
p Here's a text input.
input(type="text")

I won’t show you the HTML output as you can generate it yourself or look at the files from my GitHub.

Here’s some other stuff we can do with Jade.

// This comment will be visible in our HTML.
//- This one won't (it's the hyphen!)
//- Ids are so common we have a shorthand!
h1#header Attributes
//- Same goes for classes.
p.text This is an example using attributes.
p.text.second-class.third-class Here's a text input.
input(type="text")
//
  Block comment
  With lots of space
  And lines

p Some text with another <strong>element</strong>.

//-
  Yes, this is possible,
  but we need to put it on a new line
  and prefix it with a pipe.
| Some text without enclosing tags.

Using JavaScript

So that’s all pretty cool, but you probably want more. You’re in luck, because there’s much more! In fact, you can use JavaScript to generate HTML. That means you can have any JavaScript object and use it just like that.

For the next example we’re going to need two files. First is our Jade file. I’ve called it javascript.jade.

h1= title
p= text

The = sign means some code will follow. So “title” and “text” is actually code. More precise they’re properties/variables. Using = will also filter your JavaScript to prevent injection attacks. If you like to disable this feature simply use != instead.

You could generate HTML from the above Jade file, but since title and text are not set you’ll just get an empty header and paragraph. So we’ll need to pass in something to the engine so it knows how to interpret those values. We can do that using a JSON file. So create another file, I’ve called it javascript.json, and put in the following JSON.

{
  "title": "Jade and JavaScript!",
  "text": "You can just insert JavaScript Objects into your templates!"
}

Now we can use the command prompt to generate the HTML using the JSON file. Notice that we’ll use a capital O in the next sample.

jade -O javascript.json javascript.jade

This will generate the HTML and it will have replaced title and text with the values from your JSON file. Awesome!

In the next example I’ve included all JavaScript into the Jade file so we don’t need a seperate JSON file. Try setting the showHeader variable to false and generate the HTML again. Also notice the difference between the escaped and the unescaped code.

//-
  The following code
  will not be shown
  in your HTML.
  We'll use - instead of =

-
  var showHeader = true;
  var header = 'Jade is awesome!'

//- Single line code.
- if (showHeader)
  h1= header

//- Native Jade syntax!
if showHeader
  h1= header

//- Multiline code.
-
  var movies = [];
  movies.push('Star Wars');
  movies.push('Lord of the Rings');
  movies.push('Harry Potter');

ol
  each movie in movies
    li= movie

- var code = 'HTML may look like this: <p>Hello, Jade!</p>';
//- Some escaped code.
p= code
//- Some unescaped code.
p!= code

Inheritance

So how about we look into that inheritance now? Most, if not all, websites have a standard structure that’s the same across the entire page. We have a header at the top, footer at the bottom, a menu on the left, top or right and the content in the middle. And it’s usually the middle part that changes while the rest stays more or less the same. So let’s define that basic layout. I’m going to keep it simple so I’ll just have a page with a fixed footer. For simplicity I’m just going to use embedded CSS in our Jade template. I’ve called the following file base.jade.

html
  head
    style(type="text/css").
      html {
        position: relative;
        min-height: 100%;
      }

      body {
        margin: 0 0 100px;
      }
 
      footer {
        background-color: #41a62a;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
      }
    block head
  body
    div#content
      p This is the content!
      block content
    footer
      p This is the footer!
      block footer

This looks a lot like what we already know. The only weird thing here are those blocks. The block elements aren’t visible in the generated HTML, so it’s completely possible to use a ‘base’ page as a regular page on your site.

Overrides

Now those blocks can be overridden by inheritors. So block content can be replaced with anything you like. Let’s see what that looks like. I’ve created an base-inheritor.jade file which extends base.jade.

extends base.jade

block head
  title Inheritor

block content
  p This is the inheritor page!

block footer
  a(href="#") Some link

The file starts with extending base.jade (that’s actually the relative path to the file, since I have it in the same folder it’s just the file name). After that I’m filling in the content for each block. It’s totally optional to override a block.
Now you can simply generate the HTML for base-inheritor.jade and you’ll see the entire base is generated too!

There’s a little more you can do with those blocks though. Here’s a simple file called blocks.jade.

block header
 h1 Inheritance using Jade!

block content
 p Here is some content.

block footer
 p This is the footer.

As you can see I’ve put some content in each of those blocks. In an inheritor we can replace that content, append to that content or prepend to that content. This is illustrated in blocks-inheritor.jade.

extends blocks.jade

block header
  h1 Another header!

prepend content
  p This is even more content!

append footer
  a(href="#") Some link

You may use “block append” or “block prepend”, but the block keyword is optional. Now generate the HTML and check out the results!

It’s also possible to put blocks in blocks, but I’ll leave that as practice for the reader.

Mixins

Now there is one last feature I’d like to show you, which is mixins. A mixin is a bit like a function, a reusable piece of Jade! Let’s just look at some examples.

//- Here is a mixin.
mixin lorem
  h2 First paragraph of Lorem Ipsum...
  p Lorem ipsum [...]

h1 Mixins
//- Mixin usage is a big plus!
+lorem
+lorem
+lorem

h2 Animals
- var animals = ['Cat', 'Dog', 'Goldfish'];

//- A mixin with a parameter and JavaScript!
mixin isKnownAnimal(animal)
  if animals.indexOf(animal) >= 0
    p= 'The ' + animal + ' is a known animal.'
  else
    p= 'The ' + animal + ' is not a known animal!'

+isKnownAnimal('Cat')
+isKnownAnimal('Dog')
+isKnownAnimal('Parrot')

Pretty awesome, right?

Express

So that’s all the Jade I’ve got for you! You can now create Jade pages and generate HTML through the command prompt. We’d use it within Node.js though! So the time has come to get back to the project we created at the start of this post.

In the server.js you need to do two things. Tell Express where to find its templates and what engine to use when rendering those templates. Then on a request render any template you like.
It’s that easy!

Now we’ve got all these Jade examples we can generate using Express! I picked a few interesting ones. Here’s the code for the entire server.js.

var express = require('express');
var app = express();

app.set('views', './jade-examples')
app.set('view engine', 'jade');

// Use hello-jade as index.
app.get('/', function (req, res) {
    res.render('hello-jade');
});

app.get('/javascript', function (req, res) {
    res.render('javascript', {
        title: 'Jade and JavaScript!',
        text: 'You can just insert JavaScript Objects into your templates!'
    });
});

app.get('/base-inheritor', function (req, res) {
    res.render('base-inheritor');
});

app.get('/mixins', function (req, res) {
    res.render('mixins');
});

var server = app.listen(80, '127.0.0.1');

Is that all? That’s all!

Wrap up

So I usually give you some reading recommendations at the end of a blog, but I really haven’t got anything for Jade. You can get a lot from the language reference on the Jade website, although it’s hardly a good place to start.
Of course you can always check out some books by Manning, like Express.js in Action, which has a chapter on templating in Express and Jade. And keep an eye out for the ebooks by Syncfusion. Node.js Succinctly has a chapter on Express and JavaScript Succinctly is always handy when working with JavaScript.

Hope to see you again next week.
Stay tuned!

MEAN web development #4: All aboard the Node.js Express!

Hi everyone. After my little excursion to Polymer we’re back at MEAN web development! In my previous MEAN post about Node.js I asked you what you wanted to read next, Express or MongoDB. I got a request for Express, so that’s what this post will be about. Don’t worry, we’ll get to MongoDB later. If you’re not up and running yet you can check out my previous posts.

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

The code examples for this post are, as usual, on my GitHub account in the mean4-blog repository.

Also be sure to follow me on Twitter @sanderrossel for industry updates and more blogs on MEAN, Node.js, Express, MongoDB, AngularJS and related technologies.

Express

Express is a pretty generic framework for Node.js, or a minimal and flexible Node.js web application framework as they put it.
Node.js is pretty bare bones and has only the most basic server functionality. That’s a good thing because that means other people, like the Express team, can do things their way. And so Express just handles a lot of the low level work for you. Parsing paths and queries, check; routing, check; templating, check. So it’s no wonder that Express is a pretty popular Node.js framework! There are some alternatives for Express, like Koa and Hapi, but I won’t discuss those here.

I have already explained how to install Node.js and add Express to your project in MEAN web development #1: MEAN, the what and why and we’ve used some Express in MEAN web development #2: Node.js in the back. So if you haven’t read those articles yet I suggest you read them now. Don’t forget about nodemon either, a very nice tool for testing Node.js applications!

Starting from this post I’m also just going to host our sites on port 80 (instead of 1337). This has the advantage that we can just visit localhost instead of localhost:portNumber because 80 is the default HTTP port. That said, other applications might use port 80 (like SQL Server Management Studio Reporting Services). If port 80 isn’t working for you simply use another port (or make port 80 available by closing the application that’s using it).

Routing

In MEAN web development #2: Node.js in the back we’ve already seen some routing examples. Let’s go over that again real quick and see some other really nice routing features of Express.js!

So let’s say you have a very simple website with a homepage and an about page. Your Node.js Express server JavaScript file may look a bit like this.

var express = require('express');
var app = express();

app.get(['/', '/index'], function(req, res) {
    res.send('This is the homepage!');
});

app.get('/about', function(req, res) {
    res.send('This is the about page!');
});

var server = app.listen(80, '127.0.0.1');

That’s cool, but what if you wanted to log every request you got? Sure, you could create a function and call it in both handlers, but if you get a lot of handlers that will become a little tiresome. Especially when you’re going to move your routing to external files. And after you’ve added the logging you want to implement some login handler and some blacklist checker and… Well you get the point.
What I haven’t told you yet is that you can chain request handlers so you can reuse them. Let’s check that out. For your homepage it may look like this.

var express = require('express');
var app = express();

app.get(['/', '/index'], function(req, res, next) {
        console.log(req.originalUrl + ' requested @ ' + new Date().toISOString());
        next();
    }, function(req, res) {
        res.send('This is the homepage.');
});

var server = app.listen(80, '127.0.0.1');

By specifying the next parameter in the first callback function and executing it the next handler will be called. Failing to either call next() or res.send() will make your website very unresponsive (it just freezes, so don’t forget). So here we get a logging of each request to our homepage.

And now we can easily refactor that and implement it for the about page too.

var express = require('express');
var app = express();

var logger = function(req, res, next) {
    console.log(req.originalUrl + ' requested @ ' + new Date().toISOString());
    next();
};

app.get(['/', '/index'], logger, function(req, res) {
    res.send('This is the homepage.');
});

app.get('/about', logger, function(req, res) {
    res.send('This is the about page.');
});

var server = app.listen(80, '127.0.0.1');

Now let’s add a blacklisted handler to our site. Usually you would have some list of blacklisted IP addresses and reject them access, but since we’re testing from localhost I’m just going to check for a blacklisted query parameter. Notice that the blacklisted function either calls res.send() or next(). We can pass in an array of handlers to app.get(), so that makes our lives a little easier.

var express = require('express');
var app = express();

var logger = function(req, res, next) {
    console.log(req.originalUrl + ' requested @ ' + new Date().toISOString());
    next();
};

var blacklisted = function(req, res, next) {
    if (req.query.blacklisted == 'true') {
        res.send('You are blacklisted on this site!');
    } else {
        next();
    };
};

var globalReqHandlers = [logger, blacklisted];

app.get(['/', '/index'], globalReqHandlers, function(req, res) {
    res.send('This is the homepage.');
});

app.get('/about', globalReqHandlers, function(req, res) {
    res.send('This is the about page.');
});

var server = app.listen(80, '127.0.0.1');

You can get ‘blacklisted’ by adding “?blacklisted=true” to the end of your URL, for example “localhost/about?blacklisted=true”. So that’s pretty cool! But it gets better. We can use app.use(). This will append some request handlers (also called middleware) to the routings. Be sure you add your handlers in the correct order as they’re executed in the same order you added them. So this would look as follows.

var globalReqHandlers = [logger, blacklisted];

app.use('/', globalReqHandlers);

app.get(['/', '/index'], function(req, res) {
    res.send('This is the homepage.');
});

app.get('/about', function(req, res) {
    res.send('This is the about page.');
});

Notice that the listener for the homepage and the about page no longer have the globalReqHandlers specified, but the requests will still be logged.

So let’s add a little admin panel. Whenever someone accesses the admin panel we want to make sure this user is an admin. How would this go?

app.use('/', globalReqHandlers);
app.use('/admin', function(req, res, next) {
    if (req.query.admin == 'true') {
        next();
    } else {
        res.send('You are not an admin on this site!');
    };
});

/* Homepage and about... */

app.get('/admin', function(req, res) {
    res.send('This is the admin panel.');
});

app.get('/admin/users', function(req, res) {
    res.send('This is the admin users page.');
});

Whenever you now try to access an admin page you need to be an admin (by adding “?admin=true” at the end of your URL). Notice that a request for an admin page still gets logged and checked for the blacklist. The homepage and about page, however, don’t check if the user is an admin.

So you can imagine this stuff clutters up your server file pretty quickly. Let’s move these routing handlers to separate files. If you’re unfamiliar with modules in Node.js I suggest you read my previous MEAN article, MEAN web development #3: More Node.js.

So create two files in node_modules, called routing.js and routingAdmin.js.

Here is the code for routing.js.

var express = require('express');
var router = express.Router();

var logger = function(req, res, next) {
    console.log(req.originalUrl + ' requested @ ' + new Date().toISOString());
    next();
};

var blacklisted = function(req, res, next) {
    if (req.query.blacklisted == 'true') {
        res.send('You are blacklisted on this site!');
    } else {
        next();
    };
};

var globalReqHandlers = [logger, blacklisted];

router.use('/', globalReqHandlers);

router.get(['/', '/index'], function(req, res) {
    res.send('This is the homepage.');
});

router.get('/about', function(req, res) {
    res.send('This is the about page.');
});

module.exports = router;

And here’s the code for adminRouting.js.

var express = require('express');
var router = express.Router();

router.use('/', function(req, res, next) {
    if (req.query.admin == 'true') {
        next();
    } else {
        res.send('You are not an admin on this site!');
    };
});

router.get('/', function(req, res) {
    res.send('This is the admin panel.');
});

router.get('/users', function(req, res) {
    res.send('This is the admin users page.');
});

module.exports = router;

So we’re using the Express.Router object and do much the same to it as we did with app earlier. Do notice that I’m just mapping to ‘/’ and ‘/users’ in the adminRouter though. In our server file we can now use these modules as follows.

var express = require('express');
var routing = require('routing');
var adminRouting = require('adminRouting');
var app = express();

app.use('/', routing);
app.use('/admin', adminRouting);

var server = app.listen(80, '127.0.0.1');

So as you can see I can now use and reuse the routing! And it is here that I map the admin routings to /admin. So how cool is that? I thought so too!

There’s one last thing I’d like to show you. I won’t implement it, but I thought you’d like to know it’s there since it’s pretty cool! You can use app.route() to chain HTTP methods to a request. So far we’ve only seen GET (app.get()), but app has a method for each HTTP method (app.post(), app.put(), app.delete()…).

app.route('/admin/users')
    .get(function(req, res, next) {
        // Handle GET here...
    })
    .post(function(req, res, next) {
        // Handle POST here...
    }) // etc.
);

404

So now that we have all of our routing in place we can define a handler for the well known 404! So if all else fails, and a request couldn’t be handled, we return this. Luckily that’s really very easy.

app.use('*', function(req, res) {
    res.status(404).send("Well, looks like we've got a four-o-four, boys! (That mean the page was not found)");
});

We simply hook up another middleware! The ‘*’ is a wildcard character and means it responds to anything we throw at it. For this reason it’s very important to put the 404 handler after all your other handlers! Remember that your handlers are executed in the order you add them to your app, so if this one is added before anything else this will handle the request and anything after this will be ignored. Notice I’m setting the status to 404, which is the HTTP status code for “Not Found” and let’s the browser know the page couldn’t be found. You can set any status using Response.status(), but usually you won’t have to. Other status codes include 200, OK (the default); 202, Accepted; 400, Bad Request; 403, Forbidden and 500, Bad Request (and there’s lots more).

I’d like to focus on the wildcard for a bit. There are a few patterns you can match, including any Regular Expression.
* means just any character(s). So ‘/sander‘ would match ‘sanderrossel’, but also ‘sanderexpress’ or just ‘sander’. ‘/sanderss*’ would match ‘sanderrossel’ and ‘sanderexpress’, but not ‘sandernodejs’.
A character may appear more than once. You can use a plus symbol, for example ‘/go+gle’ (coun’t the amount of zeroes and navigate to that page in the search results?). Of course it matches ‘gogle’, ‘google’, ‘gooogle’ and so on.
You can also mix in optional characters using the questionmark. For example ‘/express?’ would match ‘express’ and ‘expres’.
You can group characters using parenthesis. ‘/express(js)?’ matches ‘express’ and ‘expressjs’, but not ‘expressj’.
Why would you use this? You can now write a single handler for ‘page’, ‘page.htm’, ‘page.html’, etc. That’s pretty neat!

You can play around with it by adding the following middleware to your server (before the 404) and browsing to localhost/yourpatternhere (or ‘yourcoolpattttern’, ‘yourpatternhere’ or ‘yourawesomepattttternhere’, but not ‘yourpatter’ or ‘yourpaternhere’).

app.get('/your*patt+ern(here)?', function(req, res) {
    res.send('Matched the pattern!');
});

Error handling

So what happens when something goes wrong? Perhaps your connection to the database failed when looking up that blacklist. Luckily adding some error handling isn’t difficult. Just add another middleware! The error handler needs to have four parameters passed to it, whether you use them or not. That way Express knows it’s an error handler.

app.use('/', function(err, req, res, next) {
    console.error(err.stack);
    res.status(500).send('Oops, looks like you broke something!');
});

You need to add that even after your 404, after all 404-ing may cause an error! So now we only need to have an error to test this. You can add the following code (before the 404!) and browse to localhost/error.

app.get('/error', function(req, res) {
    // something is undefined.
    var error = 1 / something;
    res.send('Code will never come here.');
});

Of course you can add specific error handlers for specific pages. Simply change the path of your handler. For example, the following code will only handle any errors on admin pages.

app.use('/admin', function(err, req, res, next) {
    console.error(err.stack);
    res.status(500).send("Oops, looks like you broke something! That's not very admin-ish of you!");
});

Do notice I’m setting the status to 500. You can use the error object for information about the error.

And of course you can chain error handlers. Keep in mind that only the first handler needs the err parameter!

var logger = function(err, req, res, next) {
    console.error(err.stack);
    next();
};

var dbLogger = function(req, res, next) {
    console.log('Error logged to DB.');
    next();
};

var serveErrPage = function(req, res, next) {
    res.status(500).send('Oops, looks like you broke something!');
};

app.use('/', logger, dbLogger, serveErrPage);

And what happens if even your error handling fails? Guess you better set up a safety net.

app.use('/', logger, dbLogger, serveErrPage);
app.use('/', function(err, req, res, next) {
    // Everything failed...
    res.status(500).send('Even the error handling is bugged...');
});

And we can generate an optional error by, you guessed it, passing it in as a query parameter. Let’s handle it in the logger function.

var logger = function(err, req, res, next) {
    if (req.query.err == 'true') {
        var error = 1 / somethingElse;
    };
    console.error(err.stack);
    next();
};

So localhost/error for the regular error handling. localhost/error?err=true to generate an error in the error handling.

Of course you could’ve put the error handlers in the routing file too! I won’t do that, but just know that it’s an option.

One last thing. The app.get(), app.use() etc. all have a path parameter, it’s the ‘/’, ‘/admin’ parameter. It’s optional. I’ve specified it every time for clarity, but you may omit it and it will default to ‘/’.
So app.use(‘/’, handler) is the same thing as app.use(handler).

In this post we’ve taken a good deep look at the routing functionality of Express. As you can see it’s all pretty easy. There’s more you can do with Express, especially when you install some third-party middleware, like cookie-parser, cookie-session, express-session or compression.
There’s an important feature of Express that we haven’t seen yet, which is templating. You can use template engines, like Jade or Mustache, with Node.js and Express. We’ll use Express and Jade in a later post!

And, as usual, I’m going to recommend some books. First there’s the Succinctly ebooks by Syncfusion that I keep recommending because they’re great and they’re free. If you feel you’re still not up to speed, or looking to get up to speed, with Node.js and Express take a look at JavaScript Succinctly, Node.js Succinctly and HTTP Succinctly.
I can also recommend the books by Manning Publications. They have some good stuff on Node.js and Express!

Stay tuned!

Polymer for reusable web components

Wait, what? No MEAN Web Development #4? If you’ve been following my blog you’ll know I’m in the middle of a series on MEAN Web Development. Don’t worry, I’ll get back on that!

The thing is I went to an event by CoolBlue, a Dutch webshop, last week and they had a talk on their own CDN and on Polymer 0.5. While the CoolBlue CDN is quite interesting it isn’t a very good topic to blog about. Polymer looked pretty cool too though, so I wanted to blog about that while it’s still sort of fresh in my memory. Of course I won’t be writing down exactly what was told at the CoolBlue presentation. Instead I’m going to hook in on it. You probably weren’t there so let me give you a quick recap.

“Polymer 0.5, the version CoolBlue used, is great if you’re using Chrome. Polymer 0.8 (which is still in alpha) will make lots of breaking changes to the API, but it contains the proposed API for version 1.0 and fixes some shortcomings, like performance, from 0.5.”

So if anything Polymer isn’t quite production ready. I’ve never been much of an early adopter, but today that’s going to change. In this blog I’ll be discussing Polymer 0.9 (the plan was 0.8, but then 0.9 came out while I was writing)!

You can find the source code of the examples on my GitHub account in the polymer-blog repository. You’ll need to run them from a web server (I’ll explain how to do that in this post).

Also be sure to follow me on Twitter @sanderrossel for news and articles on (web) development.

Web components

But what exactly is Polymer? Polymer is a library for creating web components developed by Google. But what is a web component? Actually there’s an entire website dedicated to teaching you about web components, WebComponents.org. Let me give you a quick summary.
Web components allow you to create custom HTML elements that contain other HTML, CSS and JavaScript. That way you can, theoretically, build websites by composing HTML, rather than nest HTML, call some JavaScript, add some CSS, throw it in the mixer, and get a mess.
So by encapsulating HTML, CSS and JavaScript we can create custom HTML that we can (re)use to compose new components or pages.

An important part of web components is the Shadow DOM (sounds like something from a video game, right?). Anyway, the shadow DOM is like ‘invisible’ HTML in your HTML document, a DOM that exists next to your DOM. Think of it as a sub-DOM, but that you can’t see. So far only Chrome and Opera support the shadow DOM.

For that reason web components are currently mostly implemented using polyfills, a downloadable piece of code that fakes native support by adding modern HTML and CSS functionality to older browsers as if they were part of the standard API.

As you can see web components still has a long way to go before it’ll be supported natively by browsers and reach maturity, but luckily nothing is stopping us from already taking a look at it today. And if nothing of that rang any bells, don’t worry, it’ll become clear once we look at some examples!

Bower

First things first. We need to get Polymer up and running in our project. We have a couple of ways to do this. First, and this is the recommended way, we can install Polymer by using Bower, a package manager for the web. Alternatively we can download some zip file containing all necessary files and use that. Lastly we can pull Polymer directly from GitHub and get all the related software manually.

So let’s go with Bower. I’m assuming you’re not familiar with Bower yet (neither am I), so I’ll walk you through it step by step (assuming you’re on a Windows system). If you already know Bower, or you’d like to install Polymer using one of the other proposed methods, feel free to skip this part. I won’t be discussing the other methods.

First we need to install Bower. Even though Bower is a package manager we need a package manager to install it. More specifically we need npm (and also Node.js). You can get both on the Node.js website. Luck has it that I already discussed how to install Node.js and npm in a previous blog, MEAN web development #1: MEAN, the what and why. So I suggest you read it, or at least the part on installing Node.js and Express (that last part shows you how to use npm).

Once you’ve got Node.js and npm installed you’ll need Git. No doubt you’ve heard about Git. It’s the source control system developed by mr. Linux, Linus Torvalds, himself. You can get Git from their downloads page. When installing be sure to check the box that says “Use Git from the Windows Command Prompt”! Other than that you can leave all the defaults in place.
If you use GitHub and already have the GitHub software installed you’ll still need to install Git. GitHub is a client for the GitHub website and though it does use Git, it doesn’t use it on your local machine.

Now that we have all we need to use Bower we can actually install Bower! Open up a command prompt (yes, Bower uses the command prompt too…) and install it using npm.

npm install bower -g

Now installing Polymer is a breeze. Create a folder where you’d like to have your project, navigate to it using your command prompt and install Polymer like you would do when using npm (their syntax is very much the same).

cd "C:\MyProjects\PolymerProject\"
bower install Polymer/polymer#^0.9.0

Alternatively you could create a bower.json file, much like the Node.js package.json, and keep track of your installed packages. You can create a bower.json file manually or use the command prompt and walk through some sort of setup. In the command prompt use the following command (still in your project folder).

bower init

If you want to leave a field blank just press enter. Now you can install packages using –save and the bower.json will be updated automatically.

bower install Polymer/polymer#^0.9.0 --save

You can also omit the version and just get the latest.

After installing Polymer my bower.json looked like this.

{
    "name": "polymer-blog",
    "version": "1.0.0",
    "authors": [
        "Sander Rossel"
    ],
    "main": "index.html",
    "homepage": "https://sanderrossel.com",
    "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    ],
    "dependencies": {
        "polymer": "Polymer/polymer#~0.9.0"
    }
}

Yours may look differently dependent on what you entered in the setup.

There’s a lot more you can do with Bower, but I’ll leave it at this as this blog is actually about Polymer!

Polymer

And then we’re finally getting to Polymer! Unfortunately, because of some browser security issues, we’re going to need to run our HTML, CSS and JavaScript examples on an actual web server. No problem of course, since I already blogged about that too. So read the part “Setting up your environment” from Web development #4: PHP in the back and once you’ve installed XAMPP we’re ready to go. I’d like to make a small addition to the paragraph from that post. The default port 80 was in use on my computer (it happens). If you have the same problem either shut down the program that is using port 80 or change the port in XAMPP by going to Config -> Service and Port Settings -> Apache and change the main port.

Because we need a server I’ve put all of the examples on the same index.html page. As I already mentioned, the shadow DOM is pretty important when creating Polymer web components. By default Polymer puts the HTML tree in the main DOM though, so we’ll want to turn this off and put it in the shadow DOM instead (so the Polymer components are really self-contained). As far as I understand putting the components HTML in the shadow DOM will be default when Polymer 1.0 is officially released, for now I’m putting the following script in my header though.

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

On to the example. First you’ll need to install Polymer in your htdocs folder. After that create another folder called “components”. In components create a file called “hello-polymer.html”. In that file put the following HTML.

<dom-module id="hello-polymer">
    <template>
        <h2>Hello, Polymer!</h2>
        <p>This is our Hello World example.</p>
    </template>
</dom-module>
<script>
    Polymer({is: "hello-polymer"});
</script>

Now in your htdocs folder create an index.html file and put the following HTML in it.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello, Polymer!</title>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="components/hello-polymer.html">
    </head>
    <body>
        <hello-polymer></hello-polymer>
    </body>
</html>

So let’s first look at the hello-polymer.html file. We start off by opening a dom-module element. Note that this is not an HTML standard! We can recognize non-standard elements by the hyphen (- symbol) in the name. For that reason, the value of our id attribute must contain at least one hyphen. The id indicates the name of  our custom element. So I’ve called it hello-polymer.
Within the dom-module element we’ll find a template element. That’s where our HTML goes. I’ve simply put an h2 header and a little paragraph in it. So that’s two elements.
Last, but not least, we need to register our custom element. We can do this by calling the Polymer function and passing it an object with the is-property and setting it to the name of our custom element.
So that’s it!

Now how can we use this custom element we just made? In the index.html you’ll need some imports. First you’ll need webcomponents-lite.min.js, second you’ll need polymer.html and last you’ll need our custom element. It’s actually these link elements that require us to use a server, as Chrome is pretty strict with linking HTML on your page.
So now we can just use our custom element! <hello-polymer></hello-polymer> is all it takes. Try it out by browsing to localhost.
Even though our body contains just one element, we can see two! Awesome!

So let’s make that a little bit more exciting. Create another file in the components folder, I’ve called it “expandable-hello-polymer.html”, and put the following code in it.

<dom-module id="expandable-hello-polymer">
    <style>
        .invisible {
            display: none;
        }
    </style>
    <template>
        <button id="btn">Click me!</button>
        <div id="body">
            <h2>Hello, Polymer!</h2>
            <p>This is our expandable Hello World example.</p>
        </div>
    </template>
</dom-module>
<script>
    Polymer({
        is: "expandable-hello-polymer",
        ready: function() {
            var btn = document.getElementById('btn');
            btn.onclick = function() {
                var body = document.getElementById('body');
                body.classList.toggle('invisible');
            };
        }
    });
</script>

In this example I’ve added a little CSS in the style element. The template contains a little more HTML too. The real trick lies in the script though. I’ve defined the ready function on the object passed to the Polymer function. Ready is executed, well, when the element is ready. The JavaScript itself is not very exciting, so I won’t get in on that.

Now what if we did the following in the example above?

<div id="body">
    <hello-polymer></hello-polymer>
</div>

That would’ve worked too! We can just use custom elements in our custom elements. We need to make sure the custom element we want to use is loaded though, we can load them in the current file (I’d recommend that) or in the file where we load our custom elements.

There’s still a little problem with the JavaScript in the above example. What if we have more elements with the id “btn”? After all, our document using the custom element doesn’t know about the button, so it might have another button with the same id. Which button will the above code fetch, the local one or the other one we don’t know about yet? This is especially tricky when not using the shadow DOM. We don’t know so let’s fix this problem. We can actually use the this object in the ready function to get access to the local DOM only. Notice that I’ve aliased this to that, since this won’t be this in the onclick event (hooray for JavaScript…).

ready: function() {
    var that = this;
    var btn = that.$.btn;
    btn.onclick = function() {
        var body = that.$.body;
        body.classList.toggle('invisible');
    };
}

So we can use this.$.elementId to get any element.  Alternatively we could use this.$$(selector) to get dynamically injected elements. $$ only returns the first found element.

And of course we can use it as follows.

<expandable-hello-polymer></expandable-hello-polymer>

In the example above you’ll notice that the text in the paragraph is now equal to the text in the hello-polymer example and we can’t change that. So what if we did want to change values inside our custom web component from the outside? The next example shows how we can use binding and how we can change attributes from outside of the Polymer component.

<dom-module id="attributes-polymer">
    <template>
        <span>This is <span>{{firstname}}</span> <span>{{lastname}}</span>'s custom element!</span>
    </template>
</dom-module>

<script>
    Polymer({
        is: "attributes-polymer",
        properties: {
            firstname: "",
            lastname: ""
        }
    });
</script>

So here we see that Polymer supports binding. If you’re familiar with AngularJS you’ll recognize the syntax. You can see we pass an object to the properties in the Polymer function. In these properties we specify the attributes we can use within this Polymer component, so firstname and lastname (attributes can’t have capitals). Then with the {{attribute}} syntax we can (two-way) bind to them. There’s an alternative syntax, [[attribute]], that indicates one-way binding. Binding is not possible with string concatenation, so I’ve put the bindings in their own span elements, that way we don’t need to concatenate.
Now in the index.html we can have the following.

<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
    </head>
    <body>
        <div>
            <label for="firstNameInput">Whose element is this?</label>
            <input id="firstNameInput" type="text" />
            <input id="lastNameInput" type="text" />
 <button id="btn">Change name</button>
        </div>
        <attributes-polymer id="elem" firstname="Sander" lastname="Rossel"></attributes-polymer>
    </body>
</html>

<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        var firstName = document.getElementById('firstNameInput').value;
        var lastName = document.getElementById('lastNameInput').value;
        var elem = document.getElementById('elem');
        elem.firstname = firstName;
        elem.lastname = lastName;
    };
</script>

And as you can see the values of firstname and lastname change value when you press the button.

There’s one last example I want to look into, two-way binding. This is a powerful feature that is actually pretty easy to use! So let’s put the example above in a Polymer web component and apply two-way binding to it. That means we don’t have to press a button to update the firstname and lastname values!

<dom-module id="two-way-binding-polymer">
    <template>
        <h2>Two-way binding!</h2>
        <div>
           <label for="firstNameInput">Whose element is this?</label>
           <input id="firstNameInput" type="text" value="{{firstname::input}}" />
           <input type="text" value="{{lastname::input}}" />
        </div>
        <span>This is <span>{{firstname}}</span> <span>{{lastname}}</span>'s custom element!</span>
    </template>
</dom-module>

<script>
    Polymer({
        is: "two-way-binding-polymer",
        properties: {
            firstname: {
                type: String,
                notify: true,
                value: "Sander" // optional
            },
            lastname: {
                type: String,
                notify: true,
                value: "Rossel" // optional
            }
        }
    });
</script>

There are a few things to notice here. First is the firstname and lastname properties. They’re now objects rather than just empty strings. To use two-way binding we need to set the notify flag. We also need to set readOnly to false, but since that’s a default I haven’t set it explicitly (but now you know there’s such a thing as readOnly too). Also, we must use {{attribute}} syntax for two-way binding. Last, the elements we’re binding to need to have a property-changed event. Since we’re binding to a non-custom element that doesn’t have a property-changed event we can specify the event on which to react ourselves. We do this by using the “property::event” syntax, in this case “firstname::input” and “lastname::input”.
The usage of this element is again very simple.

<two-way-binding-polymer></two-way-binding-polymer>

Conclusion

There’s obviously a lot more to Polymer and web components than what I’ve discussed in this post. At least you’ve got a little look at web components and Polymer in particular.
Now should you use this? As I’ve said before Polymer is still under development. In fact, when I wrote this article a new version came out which had some breaking changes! Next to that Polymer won’t work well (or different) on other browsers. Hopefully that’ll be fixed in different versions (of either Polymer or those other browsers).
That said, web components are awesome and really allow for some modular front-end development! Web components are also something the W3C is looking into standardizing. So I’d be looking out for Polymer, but wait until at least version 1.0 before even considering taking this into production code.

Happy coding!

MEAN web development #3: More Node.js

Welcome back! In my last post we’ve looked at Node.js and added in some Express. You might think that’s that for Node.js, but actually there is just more Node.js stuff I’d like to talk about. So what do I have in store for you this week? We’ll be looking at modules and events, two important aspects of Node.js.

If you haven’t read my previous articles on MEAN and Node.js yet I strongly advice to read them now as this post continues where the previous one left off (although we won’t be using Express in this post).

  1. MEAN web development #1: MEAN, the what and why
  2. MEAN web development #2: Node.js in the back
  3. MEAN web development #3: More Node.js
  4. MEAN web development #4: All aboard the Node.js Express!
  5. MEAN web development #5: Jade and Express
  6. MEAN web development #6: AngularJS in the front
  7. MEAN web development #7: MongoDB and Mongoose
  8. MEAN web development #8: Sockets will rock your socks!
  9. MEAN web development #9: Some last remarks

As always you can find the sources for this blog on my GitHub account in the mean3-blog repository.

And be sure to follow me on Twitter @sanderrossel for more content related to MEAN, Node.js, web development and software development in general.

Modules

In my previous post you’ve already had a brief introduction to modules. Every time you use a require(‘http’) you’re loading the http module. There’s lots of modules, like http, https, net (for socket programming), mongodb, express and just a whole lot more (thousands!). Some come with Node.js, like http, and some need to be added, either manually or through a package manager like npm, like mongodb (which we’ll use in the ‘M post’ of this series!).

Why would you want to create modules? Think of it as a package, a piece of code that is reusable across files and projects. Let’s say you write an awesome bit of code, or just some code you need a lot. You can put this in a module and use it everywhere you like. You can even distribute it (to GitHub, npm, Bower…) so others can use it too!

So let’s build a module. You won’t believe how easy it is! Create a file, myModule.js, and place it in the same folder as your Node.js application. Now in myModule.js simply put the following JavaScript.

exports.hello = "Hello, module!";

Now in your main Node.js application you can use it as follows.

var myModule = require('./myModule.js');
console.log(myModule.hello);

Can you believe it’s that easy!? I’m not entirely happy though. I’m requiring a file in a location. The ./ indicates the folder in which the Node.js file that did the require is located. When we call http, a native module, we don’t need to specify a path though. Alright, but that’s native you might say. But when requiring Express, as we’ve done in my previous post, we didn’t need to specify a path either! Well here’s the thing, when you don’t specify a path Node.js will look for a file with the specified name in the node_modules folder. So if it doesn’t already exist create a folder with the name node_modules and put your myModule.js in it. You can now load it using the following syntax.

var myModule = require('myModule');

That looks better! However, if you’ve installed Express you’ll see that Express has a folder inside the node_modules folder with other folders and files in it. That’s what I want too! Luckily that’s not hard to do either. First we create a folder inside node_modules called myModule. Then we can either create a package.json and put the following JSON in it.

{ "name" : "myModule",
  "main" : "./node_modules/myModule/myModule.js" }

Or we can rename myModule.js to index.js and require will try to get the index.js (or index.node) from node_modules/parameter_passed_to_require/index.js.

So let’s sum that up real quick. Require tries to get the file you passed in as a parameter or, if you didn’t specify the path, it will try to load ./node_modules/parameter_passed_to_require.js or ./node_modules/parameter_passed_to_require/index.js where ./ is the folder of the file that does the require.

Exports

So we can now create the simplest of module and load it using require. But we don’t really understand what’s going on yet. Where did this ‘exports’ thing come from and how can we utilize it?

When using require to get a module require will actually provide you with the exports variable. It’s shorthand for module.exports, so you may use that too. require will simply return the exports object. Basically, when writing a module, imagine the following lines of JavaScript at the top of the file.

var module = {
    exports: {}
};
var exports = module.exports;

So now we can simply use exports and append all kinds of properties and functions to it. For example, let’s create a user module and use it in our application. You can find the source code for this on GitHub.

exports.firstName = null;
exports.lastName = null;
exports.birthDate = null;

exports.getFullName = function() {
    return exports.firstName + ' ' + exports.lastName;
};

exports.getAge = function() {
    // I admit I had to look this one up...
    // http://www.scriptol.com/javascript/dates-difference.php
    return new Number((new Date().getTime() - exports.birthDate.getTime()) / 31536000000).toFixed(0);
};

And now we can use it like this.

var http = require('http');
var user = require('user_export');

user.firstName = 'Sander';
user.lastName = 'Rossel';
user.birthDate = new Date(1987, 11, 8);

var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end(user.getFullName() + ' is ' + user.getAge() + ' years old.');
});

server.listen(1337, '127.0.0.1');

So that’s awesome! But let’s add another user. We might go about it as follows.

var http = require('http');
var user1 = require('user_export');
var user2 = require('user_export');

user1.firstName = 'Sander';
user1.lastName = 'Rossel';
user1.birthDate = new Date(1987, 11, 8);

// Creator of JavaScript.
user2.firstName = 'Brendan';
user2.lastName = 'Eich';
// Don't know his exact birthdate...
user2.birthDate = new Date(1961, 1, 1);

var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end(user1.getFullName() + ' is ' + user1.getAge() + ' years old.' +
    '\n' + user2.getFullName() + ' is ' + user2.getAge() + ' years old.');
});

server.listen(1337, '127.0.0.1');

Now if you run this you’ll notice that this is completely wrong! We can’t have more than one instance of user, so now both users are actually Brendan Eich!

So our module is not very re-usable… But remember that I said that require will just return the exports object? How about if we just set the exports object to a constructor for our user object? The module would now look like this.

module.exports = function User(firstName, lastName, birthDate) {
    var self = this;
    self.firstName = firstName;
    self.lastName = lastName;
    self.birthDate = birthDate;
 
    self.getFullName = function() {
        return self.firstName + ' ' + self.lastName;
    };

    self.getAge = function() {
    // I admit I had to look this one up...
    // http://www.scriptol.com/javascript/dates-difference.php
        return new Number((new Date().getTime() - self.birthDate.getTime()) / 31536000000).toFixed(0);
    };
};

Notice that I’m using module.exports! Setting the exports shorthand wouldn’t work here as it is module.exports that is loaded by require! exports is just a shorthand. It references the same object as module.exports, but it is not module.exports. This is a very important difference. If you’re not sure what to use just use module.exports and you’re safe.

So we’re now loading a function with require. How does that look?

var http = require('http');
var user = require('user');

var user1 = new user('Sander', 'Rossel', new Date(1987, 11, 8));

// Creator of JavaScript.
// Don't know his exact birthdate...
var user2 = new user('Brendan', 'Eich', new Date(1961, 1, 1));

var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end(user1.getFullName() + ' is ' + user1.getAge() + ' years old.' +
    '\n' + user2.getFullName() + ' is ' + user2.getAge() + ' years old.');
});

server.listen(1337, '127.0.0.1');

The code became a little cleaner, but more importantly, I can now have two instances of the user object!

And of course you can require in modules too. Try putting the following in a module.

var http = require('http');

exports.startServer = function() {
    var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Server was started from module!');
 });

    server.listen(1337, '127.0.0.1');
}

And to try that out.

require('start_server').startServer();

Events

Another important aspect of Node.js is Events. If you’ve worked with .NET, and especially WinForms, you should be familiar with events already. In JavaScript events are usually implemented as callbacks, a function that is called when a certain action completes. Node.js has a special module that handles events.

Let’s implement a basic event.

var http = require('http');
var EventEmitter = require('events').EventEmitter;
var emitter = new EventEmitter();

emitter.on('request', function(url) {
    console.log('requested ' + url);
});

var server = http.createServer(function (req, res) {
    emitter.emit('request', req.url);
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('url logged to console.');
});

server.listen(1337, '127.0.0.1');

So as you can see we start by requiring the events module. We then create a new instance of the EventEmitter class. To create an event simply use the on method and pass it the name of the event and a function that should be executed when the event triggers. To actually trigger the event call the emit method and pass it the name of the event and the event data.

It is totally acceptable to add multiple handlers to the same event.

var http = require('http');
var EventEmitter = require('events').EventEmitter;
var emitter = new EventEmitter();

emitter.on('request', function(url) {
    console.log('requested ' + url);
});

emitter.on('request', function(url) {
    console.log('second listener, received request ' + url);
});

var server = http.createServer(function (req, res) {
    emitter.emit('request', req.url);
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('url logged to console.');
});

server.listen(1337, '127.0.0.1');

It’s also possible to handle an event only once using the once method.

emitter.once('request', function(url) {
    console.log('one time listener, received request ' + url);
});

And you can remove listeners as well using the removeListener function. To remove a listener you need to pass in the listening function, so we cannot start listening using an anonymous function like I did up til now. So in the following example I declare a function, add it to my emitter and then remove it after three server requests.

var http = require('http');
var EventEmitter = require('events').EventEmitter;
var emitter = new EventEmitter();

var removableEvent = function(url, counter) {
    console.log('this event will be removed in ' + counter + '...');
};

emitter.on('request', removableEvent);

var counter = 3;
var server = http.createServer(function (req, res) {
    emitter.emit('request', req.url, counter);
    counter--;
    if (counter === 0) {
        emitter.removeListener('request', removableEvent);
    };
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('url logged to console.');
});

server.listen(1337, '127.0.0.1');

And of course any event emitter can have as many events as you want and trigger them in different places.

var http = require('http');
var EventEmitter = require('events').EventEmitter;
var emitter = new EventEmitter();

emitter.on('request', function(url) {
    console.log('requested ' + url);
});

emitter.on('message', function(message) {
    console.log('Received message: ' + message);
});

var server = http.createServer(function (req, res) {
    emitter.emit('request', req.url, counter);
    emitter.emit('message', 'Received request for ' + req.url);
 
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('url logged to console.');
});

server.listen(1337, '127.0.0.1');
emitter.emit('message', 'Server started and listening on 127.0.0.1:1337');

So as you see working with events isn’t very difficult, you just have to know how it works.

This was my third article in the MEAN series and the second one on Node.js. There’s a lot to say about Node.js, in fact I’m not quite done yet! We’ll look at more Node.js goodness in upcoming articles. I do want to move on to the other letters of MEAN as well though. So for my next article I’m going for either M (MongoDB) or E (Express.js). Both require more Node.js. So if you have any preference let me know! M or E, most votes wins. For no votes or a tie I’m simply going to pick one myself.

And again I’m going to recommend some books, just in case you missed them in my previous articles. Be sure to get Node.js Succinctly from Syncfusion, it’s free and the subscription is totally worth it since they have lots more free ebooks!
For a bit more in depth Node.js knowledge I can recommend Mannings Node.js In Practice, Node.js In Action or Getting MEAN With Mongo, Express, Angular, And Node. They’re not free, but Manning provides value for your buck!

That’s it for this week. I hope to see you back next week for either MongoDB or Express.js (be sure to let me know what you want!).

Stay tuned!