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.

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.
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!

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": "http://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!

MEAN web development #2: Node.js in the back

A series on MEAN and the first actual article in which we’ll get some web pages served starts with the N, the very last letter of MEAN! Yes, it’s true, we’re starting in the back, literally and figuratively speaking. Node.js will be your server side software and you’ll use it to handle incoming HTTP requests. Once we’ve got this going we’ll be able to get to the other letters of MEAN (MongoDB, Express and AngularJS in case you forgot). And in fact we’ll already be looking at some of that E, for Express, in this post!

For a change I won’t mention you should follow me on Twitter because that’s where I tweet on anything software, MEAN and Node.js related and I won’t mention my Twitter handle is @sanderrossel either.
So now that I haven’t mentioned that I am going to mention my GitHub account because that’s where you’ll find the source code for this blog post. You can find the repository for this post in the SanderRossel/mean2-blog repository.

By the way, if you’re just dropping in and you haven’t read the first post in this series yet you really should.

  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

Getting started

Maybe the title of this post seems familiar? I’ve written on a back-end technology before, Web development #4: PHP in the back. In that blog post I explain how to write PHP and how to get it working on your own machine by installing some web server software, XAMPP. Here’s the cool thing about Node.js. It is a web server already, so you don’t need to install anything besides Node.js (which we did in the first part of this series). You can just write JavaScript and run your server!

So let’s look at the “Hello world” example from the first article again.

var http = require('http');
var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello, Node.js!');
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

I’ve written it a bit different from my first post, so we can see what’s going on just a little bit better. There are a few things going on there. First of all is the ‘require‘ bit. With require we can load a module which we can use to implement certain functionality. So what’s a module? Node.js has a pretty cool module system, where a module can be compared to classes like we have in C# or Java. We’ll look at modules in more detail in a next post. So anyway, with the first line of code we’re telling Node.js that we need the http module and we store it in the http variable.

So now that we have this http module, or class-like thing, we can invoke functions on it. And the first (and only) function we’re going to call is createServer. So createServer takes an (optional) callback function as parameter. The callback function takes a request and a response as input parameters which we can use to see what the user requested and to return anything back to the client.
As you can see we’re writing to the header of the response, using writeHead, to tell it that everything was handled correctly (HTTP code 200 is OK) and that we’re sending back some plain text. By calling response.end we’re telling Node.js we’re done and that the result is ready. Response.end must be called on each request (or our client will be waiting on a response forever) and it must be called as the final operation on our response object, since it signals that the response is complete (all headers and content have been written to the response). In this case we’re passing our response text directly to the end function, but alternatively we could use the write function and simply call end without parameters. That would look as follows.

res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello, Node.js!');
res.end();

Or, if you want to build up some response text, you can do something as follows (using write n times).

res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello,');
res.write(' Node.js!');
res.end(' [This text is optional]');

And, of course, we’ll typically return HTML rather than plain text. Notice I’ve changed the header too.

res.writeHead(200, {'Content-Type': 'text/html'});
res.end('<h1>Hello, Node.js!</h1><p>This is a paragraph...</p>');

So now that we’ve called the createServer function and we’ve specified what to return we have a Server object. This Server object has functionality to listen for incoming HTTP requests and handle them accordingly. To start listening simply call the listen function and pass it a port and an IP address. I’m still using 1337 and localhost from the Node.js website example.

Last, and actually also least, is the console.log, which just logs some debug info to your command window when starting your Node.js app.

You can run each example by opening up a command prompt and typing in (exluding double quotes (“”)) “node pathToMyFile\MyFile.js”. If your file path contains any spaces be sure to wrap it in double quotes.

Debugging

Did you try out all those examples? Did you have to restart the command prompt and type in “node pathToMyFile\MyFile.js” a couple of times? Tiresome, isn’t it? Luckily there are tools that automatically restart your Node.js app when changing a file. You really should install one and save yourself time and trouble! I’m going to use nodemon. You can install it using npm. Open up a command window and type “npm install nodemon -g”. The -g tells npm to install nodemon globally. That means nodemon isn’t some library that this one project uses, it’s a global library from which all your projects can benefit! Whoohoo, never again restart your Node.js app manually because you’ve made a minor file change! To make sure nodemon installed correctly open up a command prompt and type in “nodemon -v” and you should get the currently installed version of nodemon.
Now instead of starting your Node.js app using “node pathToMyFile\MyFile.js” use “nodemon pathToMyFile\MyFile.js” (simply replace node with nodemon). Now go ahead and edit your file. Watch the command prompt and see how your app is automatically restarted. Browse to your website (localhost:1337) and see that the Node.js app has indeed restarted.

For some more tips on debugging web apps in general (no matter if you’re using Node.js, C# ASP.NET, Java or what have you) you should read a previous blog post I wrote, which has a little section on debugging web pages from your browser, Web development #8: Where to go from here.

Doing a little more

So here’s a nice one for you.

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Requested: ' + req.method + ' - ' + req.url);

Try putting that in the createServer callback. Now browse to localhost:1337/SomePage or localhost:1337/AnotherPage?someParam=someValue. You should see whatever you put after localhost:1337 echoed in your browser window.

So let’s say we have some HTML pages that we want to show based on the requested page. This is now pretty easy. Here’s a first, and rather naive, implementation. In case you got my source from GitHub, the final implementation can be found in the file nope.js (that kind of gives away the ending, doesn’t it?).

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

var server = http.createServer(function (req, res) {
    switch (req.url) {
        case '/about.html':
            res.writeHead(200, {'Content-Type': 'text/html'});
            var buffer = fs.readFileSync(__dirname + '\\about.html');
            res.end(buffer.toString());
            break;
        case '/index.html':
        case '/':
            res.writeHead(200, {'Content-Type': 'text/html'});
            var buffer = fs.readFileSync(__dirname + '\\index.html');
            res.end(buffer.toString());
            break;
        default:
            res.writeHead(404, {'Content-Type': 'text/html'});
            res.end('<h1>404 - Page not found!</h1><p>What were you even trying to do...?</p>');
            break;
    }
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

So there’s some new stuff in there. First we require(‘fs’), which gives us some control over the file system (fs is short for File System). After that we do a switch statement on the request url. We support no url (just localhost/1337, we’ll get url “/”), /index.html and about.html. Everything else will get a 404, page not found. Note that no url and index.html both give you the index.html page. So make sure you have an index.html and an about.html page in the same folder as your Node.js app. If you got this from my GitHub account you’ll be fine, otherwise you’ll need to create those files and put some HTML in them.
So if you browse to localhost:1337/index.html or about.html we’ll first set the header to 200 and text/html. After that we’ll use the fs object to read either the index.html or the about.html file.
Notice that I’m using readFileSync. Remember that I explained, in my first post in the series, that Node.js runs a single thread to handle all incoming requests? Because any synchronous action (meaning it just runs on the same thread) is blocking that one thread everything in Node.js is asynchronous by default. So any non-asynchronous (synchronous) method is suffixed with ‘Sync’. If, like me, you’re coming from C# that’s just the other way around from what you’re used to!
So anyway, we read the file and we now get some buffer object. To get the actual contents as a string simply call the toString function on the buffer.
We also see the __dirName variable, which is a global Node.js variable which contains the directory in which your Node.js JavaScript file resides.

There is an overload for the readFileSync that will return the string value instead of the Buffer object.

var content = fs.readFileSync(__dirname + '\\index.html', 'utf8');
res.end(content);

So there are a few problems with this code. First of all we are reading files synchronously. Suppose this takes 50 milliseconds. No big deal you’d say, but suppose you have 100 requests per second, that’s 5000 milliseconds, or 5 seconds, for the 100th visitor! Imagine that every 100th visitor had to wait 5 seconds, at least, for your page to load. That’s rather disastrous for a web page! So we really want to read that file asynchronous. Luckily that’s pretty easy. We can use the readFile function which takes a callback function as last parameter. The callback function gets an error object and the returned data as input parameters. So how would that look?

fs.readFile(__dirname + '\\index.html', 'utf8',
    function (err, data) {
        if (err) {
            // Handle exception...
        } else {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.end(data);
        }
});

Second, we’d best put the file handling in a seperate function. We now have this ‘huge’ piece of duplicated code! So let’s tidy it up a bit.

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

var readHtml = function (fileName, res) {
    fs.readFile(__dirname + '\\' + fileName, 'utf8',
        function (err, data) {
            if (err) {
                // Handle exception...
            } else {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.end(data);
            }
    });
};

var server = http.createServer(function (req, res) {
    switch (req.url) {
        case '/about.html':
            readHtml('about.html', res);
            break;
        case '/index.html':
        case '/':
            readHtml('index.html', res);
            break;
        default:
            res.writeHead(404, {'Content-Type': 'text/html'});
            res.end('<h1>404 - Page not found!</h1><p>What were you even trying to do...?</p>');
            break;
    }
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

So, all fixed, right? Well, actually, this looks more like Nope.js! Well alright, I suppose it’s not that bad, but once your app starts to get bigger this approach might get a little messy. Let’s add some Express and see how it can help make things easier.

Just a little remark on the 404 HTML. Of course it would be better to create another HTML file for the 404 page, but I just wanted to show you that you can use multiple methods of returning HTML even if you’ve already used another method.

Adding some Express

In the first part of this series we’ve installed Express in our project, so I’m assuming you’ve got it set up. As said Express just makes working with Node.js a lot easier. It handles routing, rendering of HTML, sessions, template engines and all that stuff. So let’s rewrite the above code so it uses Express.

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

var options = {
    root: __dirname
}

app.get(['/', '/index.html'], function (req, res) {
    res.sendFile('index.html', options);
});
app.get('/about.html', function (req, res) {
    res.sendFile('about.html', options);
});
app.get('*', function (req, res) {
    res.send('<h1>404 - Page not found!</h1><p>What were you even trying to do...?</p>'); 
});

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

First we’re requiring Express. This actually doesn’t return an object, but a function, also called the express function, and as you can see on the second line we just run the function and store the result in our app variable. This app variable now denotes our Express application. After that we use the app.get function multiple times to handle our routing. I think it’s pretty straightforward. If “/” or “/index” are requested we return the index.html file, if “/about” is requested we return the about.html file and if anything else is requested we send back the 404 HTML.
It’s worth mentioning that the send and sendFile functions set the header of the response object. sendFile sets the header based on the file extension (in these cases .html) and you can override it in the options object. We only use the options object to set the root of the files though, in our case that’s the same folder as our app resides in, but for bigger projects it would be wise to create a /views folder or something like that.
Finally we call app.listen and pass in our port and IP address. Notice I’ve used the same port and IP as the nope.js example, so you can’t run them both simultaneously.

Here’s another thing Express handles pretty well. Parameters and queries. Using the request object we can ask for any parameter or query that the user sent our way. Here a little example.

app.get('/echo.html', function (req, res) {
    res.send('<h1>Echo</h1><p>This is an echo... ' + req.query.say + '</p>');
});

Using the query object we can get the value of any query parameter. In this case we expect a parameter called “say” and its value will be echoed to your browser. So just browse to localhost:1337/echo.html?say=someValue.
Pretty neat, right?

There are some other best practices, like putting your routing in a separate file and exception handling, that we haven’t discussed yet. No problem, since we’ve only scratched the surface anyway. Don’t worry, we’ll go in a little deeper yet in my next post!

And as always I’d like to give you some reading recommendations. Syncfusion has an awesome free ebook on Node.js, Node.js Succinctly. Just sign up and get them free Succinctly books! They have lots more, like JavaScript Succinctly and HTTP Succinctly, which might come in handy when working with Node.js.
And it also just so happens that Manning Publications has quite a few books on the MEAN stack as well! They’re not free, but when you really want to do some Node.js heavy lifting I can really recommend getting one of them. So they’re Node.js in Action, Node.js in Practice and Express.js in Action.
And, of course, you could also just keep following my blog, which is free and a lot less to read.

Stay tuned!

MEAN web development #1: MEAN, the what and why

Yes, a new blog post and a new series! I apologize for not writing a post last week, I was a bit busy. I’ll try to make it up to you by starting an awesome series on MEAN web development.
I’ve been tweeting on MEAN and related technologies on Twitter, so be sure to follow me @sanderrossel as well.

But what is MEAN and why would you want to know and use it? That’s what we’ll look at in this first episode. We’ll also set up our environment. In the following posts we’ll look at each technology involved with MEAN in more detail.

  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 what

So what is MEAN? I could call you dumb for not knowing, that would be mean (and unjustified, because you’ll know within seconds), but that’s not quite the mean I’m talking about! MEAN is actually an acronym (because we love acronyms in IT) and it stands for MongoDB, Express, AngularJS and Node.js. Chances are you’ve heard of those and if you read a previous blog post of mine, Web development #8: Where to go from here, you even know a little bit about what they are (although you could’ve got that from other sources too, of course).
In short, MongoDB is a NoSQL Document Model database, Node.js is a platform that allows you to run JavaScript on/as your web server, Express is a library that simplifies working with Node.js and AngularJS is a front end framework that let’s you create Single Page Applications (SPAs).

Don’t worry, we’ll look at all of them in much more detail later. In fact, I’ve already written on MongoDB in an earlier blog post, A first look at NoSQL and MongoDB in particular. Actually I’m going to ask you to read that post in a little bit.

So here’s the deal, MongoDB is a database that doesn’t use SQL, but JavaScript, as a query language, Node.js is a platform that let’s you use JavaScript on your back end, AngularJS is a JavaScript library for your front end and Express is just a library for Node.js. So that’s JavaScript across your entire stack! That’s pretty awesome, especially when you’re a fan of JavaScript.

You’re probably going to use more than just MEAN. MEAN is just a starting point, but, of course, you’re free to add (or remove) whatever you like. Perhaps a little jQuery UI, a HTML generator like Jade,  or sockets.io, a library for working with sockets in Node.js.

The why

So why would you use MEAN over other technologies? Here’s the thing, I’m not religious about any technology and you can probably do anything you can do with MEAN with other technologies as well. SQL Server and C# would do nicely, especially when throwing in SignalR, but then of course you’d have SQL in your database, C# on your back end and JavaScript in your browser. So just being able to stick with one language (unfortunately that language is JavaScript) could be considered a pro.

Let’s look at why you’d want to use any of the MEAN letters seperately.
MongoDB is a very flexible database that looks a little like the relational databases you already know. MongoDB is schemaless though, so adding any field becomes a breeze (no production downtime!). That’s especially neat when you have huge tables with lots of data. I know adding a field to any SQL database can be quite a challenge on big tables, because your entire table has to be updated. On top of that MongoDB scales well, much better than most SQL databases. Actually let’s stop on why you’d want to use MongoDB, just read my NoSQL and MongoDB article, A first look at NoSQL and MongoDB in particular.

Node.js is really an alternative to popular web servers such as Apache or IIS (Internet Information Services). So how is Node.js different than those two (and others)? Well, Apache and IIS both listen to incoming HTTP requests using threads. So that means a number of different little ‘processes’ (the threads) are listening for incoming requests and handle them. That means that if all threads are busy no new requests can be handled at that time and your server response becomes slower.
Node.js, in contrast, uses only a single thread to listen for incoming HTTP requests. What it does is listen for an incoming request, put it on a stack, and handle it on a different thread. This process is so fast (if you do it right) that Node.js should be able to handle more concurrent connections than Apache or IIS. Of course if you mess up in Node.js you’ll be blocking the server for everyone else too.
And if you’re going to use Node.js you’re probably going to use Express as well as it really makes Node.js development easier (but you’re entirely free to do a little ‘MAN’ development, of course 🙂 ).

And why would you want to use AngularJS? AngularJS is a framework for creating Single Page Applications. On ‘traditional’ web pages your page needs to refresh entirely for each server request. So imagine you’re at some web shop and you’re reading product reviews. There’s ten reviews per page and you’ve just read the tenth. When you click on ‘next page’ the entire page gets refreshed. So the server sends the entire HTML, the product images (if they’re not cached by your browser), the product description, other recommended products, etc. to your browser. That’s a whole lot of information you already had! In a SPA you’d only send the ten new product reviews and replace the old ones with the new ones in your browser (for example using jQuery, or AngularJS).
So a SPA, when done well, is a lot faster and better usable than a traditional application. Of course you may use jQuery for AJAX requests and DOM manipulation, but AngularJS is a framework that was kind of built to handle these exact cases, whereas jQuery is more general. So AngularJS could be a good choice when building SPAs. Of course you can replace AngularJS with another framework if you like, perhaps Ember.js or Backbone.js, you could be doing MEEN or MEBN development (I’m really just making that up, but why not, right?).

So put that together and MEAN is just an all-JavaScript stack that’s fast, responsive and flexible. Did I mention it’s all open source, so free to use? That’s pretty awesome!

Setting up your environment

MongoDB

Let’s get to work, shall we? Let’s start with setting up MongoDB. As I mentioned I’ve already written on MongoDB in a previous post, A first look at NoSQL and MongoDB in particular. As luck has it I’ve also described how to set up MongoDB, so I suggest you read that post and especially the “Getting started with MongoDB” bit (you can skip the C# part). Little has changed since I wrote that post some months ago, but I’ll briefly discuss the differences. You can download MongoDB from the downloads page. The default install path has changed to “C:\Program Files\MongoDB\Server\3.0\bin”. You can run MongoDB through the command line or by running mongod.exe directly.
You should also install MongoVUE, as described in the blog post. I’ll be using it for this series anyway. When first starting MongoVUE you need to specify a connection. Give it any name you like, set ‘localhost’ as server and you’re good to go. Other than that I think MongoVUE is pretty self explanatory, especially when you’ve used SQL Server.

Node.js

So let’s set up Node.js next. Head over to nodejs.org and click the big green install button. It should give you the installer for your system (I’m assuming you’re on a Windows machine). You can, of course, also select an installer manually by heading over to the downloads page. Then just run the installer and make sure you also install the npm package manager. Actually, just install everything. Once it’s installed you can run any Node.js application (which is really just a JavaScript, or .js, file) from the command prompt. And while we’re on the subject I want to coin a new term CPDD, Command Prompt Driven Development (ok, that was a joke). Why are we still using command prompts in 2015!? So I’m not a fan of command prompts because it’s a lot of typing and I always forget what to type. If you’re like me, no worries, I’ve got you covered!

So while we’re at it let’s create a very simple hello world! We’ll see Node.js in action and we’ll be able to fire it up using the command prompt. So first we’ll create a folder for our ‘project’. I’ve put it in C:\dev\hellonode\ and there I’ve created a file called hellonode.js. Now put the following code in that file.

var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello, Node.js!');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

As you can see it’s just JavaScript. The example was taken from the Node.js homepage. So we first create an instance of the http module by invoking the require function and pass in the string (id) ‘http’. When we have our http object we invoke the createServer function and pass in a function as only parameter. The function has a request (the HTTP request) and a response as parameters. So whenever the server receives an HTTP request this function is called and we can inspect the method (GET, POST etc.) and any parameters and basically anything that was sent with the request. We’re not really interested in any of that here though since we’re just going to send the same result every time a request is made. We write HTTP code 200 (OK) and the content type text to the result header and we end the request by invoking the end function and passing it the text ‘Hello, Node.js!’.
The function createServer returns a Server object. We invoke listen on this Server object, pass in a port and IP address (localhost in the example) and at that point our server goes up and running and listens for requests.

Don’t worry if you didn’t get that. We’ll look at Node.js in much more detail in a later post. So now to get this running. Open up a command prompt and type in the following (excluding double quotes “”): “node C:\dev\hellonode\hellonode.js” and you should see that your server is running. Now browse to localhost:1337 and you should see “Hello, Node.js!” in your browser window.
Congrats, you just created your first Node.js app!

Express and npm

So next we need to install Express. We’ll do this using npm. npm is a JavaScript package manager and it’s the default package manager for Node.js. There are alternatives, like Bower, but let’s just stick to npm. So open up another command prompt (argh!). First we want to make sure npm is on the latest version. We can issue an update command with the following command “npm install npm -g”. After that move to the folder that holds your project using command “cd C:\dev\hellonode” and then use the command “npm install express” to actually install Express to your project. To uninstall express you can use the command “npm uninstall express”.
Alternatively you can create a small file called package.json and put the following JSON in it.

{
  "name": "hellonode",
  "version": "1.0.0"
}

Now when installing or uninstalling a package add –save at the end of your command, like so “npm install express –save” and “npm uninstall express –save” and npm will keep track of dependencies in this file. For example when installing Express your packages.json file will look as follows.

{
  "name": "hellonode",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.12.3"
  }
}

So to make sure it really works you can create a JavaScript file called helloexpress.js and try out the Hello world example from the Express “Hello World” example page. Try it out by running the following command from a command prompt: “node C:\devhellonode\helloexpress.js” and browsing to localhost:3000.

So that’s it! We’ve got a little bird’s eye view on MEAN and we’ve got both MongoDB and Node.js up and running and we’ve installed Express using npm. I’m not discussing AngularJS here because we’ve seen how to add front end libraries to our pages in previous blog posts, for example Web development #6: Getting interactive with JavaScript. We’ll get to setting up AngularJS anyway when I post about it.

In next posts we’ll look at MongoDB, Node.js, Express and AngularJS in much more detail and we’ll see how they work together.
In the meantime, if you’re interested in knowing more about any of those I can really recommend the free ebooks by Syncfusion (yeah, here we go again). They have books on all the MEAN parts, MongoDB Succinctly, Node.js Succinctly and AngularJS succinctly.  You have to sign up, but it’s free and really worth it.
If you really want to get into it I can recommend some books by Manning Publications. They have books on all the seperate technologies, but they also have an upcoming book on the entire MEAN stack, Getting MEAN with Mongo, Express, Angular, and Node.
I’m looking forward to reading your comments and I hope to see you back with the next installment.

Stay tuned!

How to learn and polyglot vs. specialist

Welcome (back) to my blog. This weeks blog is going to be a little different than my other blogs. Unfortunately I’m a little short on time this week, too short to write up a small web page using some cool technology and write about it too. However, I still want to deliver you the blog you may have been waiting for.
If you read my blog every week, or at least regularly, please drop a line in the comments and let me know, I greatly appreciate it!
I also Twitter other articles that you might like @sanderrossel, so be sure to follow me if you haven’t done so already.

So what do I have in store for you this week? Well I recently got a question from someone who asked me what’s the best way to learn a new technology. I’ll answer that question at the end of this article, but first I’ll tell you why I think you need to learn new technologies from time to time.

Specialized vs. polyglot

One of the reasons I want to write about why you need to learn and how to learn effectively is because lately I’ve been in a few discussions with people about being a specialized programmer versus being a polyglot, or all-round programmer.

A few months ago I switched jobs. One of the reasons for me was that my previous employer wanted everyone to specialize. My specialization would be C# WinForms and Entity Framework, while other colleagues specialized in SQL Server. Sounds nice, right? Except that, next to a C# certificate, I also have a SQL Server certificate that wasn’t going to see any use in that setup… Besides, I had seen quite a bit in C# WinForms and I wanted to move on.
So I applied for another job at another company. Their motto is “we specialize in being all-round.” Put differently, everyone does everything. At one time you may be working with C# and SQL Server, while at another time you may be working with Java and Oracle. Now that’s something I could get into!

Let’s first define these terms, specialized and all-round, or polyglot, and see why you would want to be the one or the other.

I don’t think many people will disagree with me when I say a specialist is someone who has gathered a large amount of knowledge and experience in a specific field. The more specific this field the more specialized you are. Your expertise may be C#, which is a little broad, hardly an expertise actually. C# WinForms with Entity Framework, my specialization, is more specific. You could be as specific as specializing in a single Control, for example the C# WinForms DataGridView. Now that’s a specialization.
I recently read the book Soft Skills by John Sonmez from Simple Programmer. It’s a great book that I can really recommend. John talks in length about why you really need to specialize. In short, if someone has a very specific problem and you specialize in that specific field you’re worth a lot to that someone. The more you specialize the smaller the chances you’ll find someone with the exact problem you can solve, but that also means that the people who have such a specific problem will have trouble finding someone to fix it for them. Therefore, once these people find you (or you find them), and you are one of the few who can really solve their problem, they are going to want you, no matter the costs (to some degree).

So how about all-round, or polyglot. You may have heard about the polyglot programmer and how amazing they are. But what’s a polyglot anyway? The dictionary describes a polyglot as someone who speaks several languages. So a polyglot programmer is someone who knows his way around multiple programming languages. Let’s extend that a bit and say a polyglot programmer also knows multiple paradigms (Object Oriented Programming, Functional Programming,  Aspect Oriented Programming…) and probably lots of libraries too, because different languages require different libraries.
The good thing about being a polyglot is that each new language or technology is easier to learn. Is this a managed language? You’ve seen it before. Is it unmanaged? You’ve seen it before. C or BASIC syntax? You’ve seen it all before! So, in theory, you could work for just about anyone. Except that you’re probably not very good at all of these languages, so why would someone hire you over someone who has the exact knowledge they need? But when you think about it, how often do clients know exactly what they want or need.
On the other hand, once systems become real complex and need different languages, databases and paradigms in different parts of the system, well, you’re good to go.

It seems the world is pretty divided on which is best. As said, John Sonmez really urges you to take on a specialization, and it could really work out for you. But if you Google for “polyglot programmer” you’ll find websitesblogs and videos dedicated to that subject as well (both for and against)…

Why not both?

So here’s my view on both specialized and polyglot programming. They’re both great and everyone’s right. I’m usually not that politically correct, so let me explain.

Expertise is great, right? When you’re doing any kind of serious development you’re going to run into issues that can only be properly solved if you really know your stuff. For example, in WinForms you may need to create your own user control. That’s really specialized work, you really need to know the design time implications associated with creating controls. As coincidence would have it just last week I inherited a Form with a DataGridView on it. Upon setting some property I populated the DataGridView with columns. What happened at design time? Everytime I did a build or I opened the WinForms designer it would re-populated the DataGridView, but didn’t actually throw away the old columns! Before I knew it I had over 100 columns on my Form! So apparently I’m no specialist in WinForms Control development. Luckily I was knowledgeable enough to recognize the problem and fix it right away. How did I get that knowledge? You may not like the answer, but I’ve been building non-trivial WinForms apps for over four years and I’ve been reading up on books and blogs dedicated to WinForms development. Could I have solved my problem without knowing what I know? Sure, just duplicate a lot of code in every Form I have so I don’t need Form inheritance. Or maybe make a fix for the bug, which then requires another fix, etc. etc… And I’ve seen these ‘solutions’ lots of time!

So if you need four years to learn any language and/or framework to be able to build non-trivial applications with it there’s not much sense in being a polyglot, right? That’s just going to take ages and by the time you’ve mastered your second language your knowledge on the first will be outdated. Well, here’s the trick, you don’t have to be that sufficient in any language. I get my daily work done in either Visual Basic.NET or C# with WinForms, and more recently ASP.NET MVC, Entity Framework and SQL Server, and I’m pretty good at all of them. You could say that’s my specialization and it comes kind of natural as I’m working with them every day from 9 to 5. Once in a while I may need to read up on some stuff at home, and you need to keep challenging yourself, but overall, when you’re working with a technology that much you tend to get a little good at it.
To become truly specialized, an authority in your line of work, you’d need to put a lot of free time in it as well. But what if you spend that free time on learning other technologies? Well now we’re going a little polyglot while also being a little specialized! And here’s the good part, being a polyglot will make you a better specialist!

Wait, what? That sounded pretty contradicting. Let me put it this way. When all you’ve ever known is C# are you truly aware of its strengths and weaknesses?
I’m currently learning Haskell, a functional language, for my university study. When I saw the Haskell implementation of the quick sort algorithm that made me question all I ever knew about C# and object oriented programming. You may be familiar with the C# implementation, or you could maybe guess what it looks like. I can’t post it here, because it’s simply to big, but a quick Google search will give you lots of different implementations, like Iterative Quick Sort (haven’t checked if it’s actually the best out there). Beware that a lot of what you’ll find is recursive, which will give you a StackOverflowException in C# for large lists.
Now here is the Haskell implementation.

qsort []      = []
qsort (x: xs) = qsort smaller ++ [x] ++ qsort bigger
                   where
                      smaller = [a | a <- xs, a <= x]
                      bigger = [a | a <- xs, a > x]

You don’t actually have to understand it, but the takeaway is that this Haskell implementation is so much more concise, and ultimately readable, than any C# implementation you can come up with.
But there’s more. Are you using .NET LINQ? Well, where did you think that came from? Yes, the functional programming paradigm! Functional languages are also pretty good at multi-threading because values are immutable.
Does that make you want to throw C# out of the window and do everything in Haskell (or, since you’re a .NET dev, F#, or Scala if you’re a Java dev) from now on? No, and neither should you. But you should see what’s out there and if there’s some language or technology that solves your problem better than the technology you’re (ab)using now. Even if there isn’t you’ll have gained new insights that might help you on your current job. Just by taking a more functional approach in your object oriented language can help you in writing better and more readable code.

How about another example? So as said I do quite a lot of work in SQL Server. I have plenty of experience in developing databases (I even got certified) and some experience in maintaining them (I’m what they call an accidental DBA). SQL Server was just that one tool that could solve all my problems. And then I spend just a few evening with MongoDB (I wrote a blog about that, A first look at NoSQL and MongoDB in particular). NoSQL just blew my mind. All the troubles I had with SQL Server (and SQL in general), that I took for granted, had been solved by other databases. Those few evenings with NoSQL gave me another perspective on SQL and, I dare say, made me a better SQL programmer because I was now much more aware of SQL’s strong and weak spots.

One last example. I started out as a Visual Basic programmer. Many of you now shudder in disgust. I never understood what all the VB hate was about. Sure, a lot of bad VB has been written, especially pre-.NET VB. But I’ve seen equally bad code in C# as well. And nowadays VB does almost everything C# does and vice versa. It’s just a different syntax. Now this may come as a surprise to some, but not all languages use curly braces! VB is one such language, and because I know VB learning another such language may be easier. But there’s more. In VB there’s a thing called “Option Strict”, which is set to “Off” by default. This makes VB a lot more “forgiving” than C#. For example, the following code would run fine (except for the call to MethodThatDoesNotExist() which gives a runtime exception).

Dim s As String = 42
Dim i As Integer = "42"
Dim o As New Object()
o.MethodThatDoesNotExist()

You may not like it, but this taught me a lot about implicit and explicit casting and late and early binding (which helped me get into JavaScript later). And on the subject of late binding, there’s times when it’s pretty handy. In fact, C# introduced the dynamic keyword for it in .NET4.0. Well guess what, as a VB programmer I was way ahead of you! Optional and named parameters, introduced in C# in 2010, came straight from VB. And what about those new cool Exception filters in C# 6.0? VB has had them for years.
Of course the same can be said for C# features that were introduced in VB, like Iterators (yield), but the takeaway is, that even these two very closely related siblings take stuff from each others, and knowing one can make you better at, or more prepared for, the other.

So why not spend a few hours with some new language once in a while? Just get something up and running in a language you’ve heard about, but don’t know yet, use a framework you haven’t used before, or get a taste of some NoSQL database. Make sure you pick one that’s popular as you’ll be able to find lots of documentation.

How to learn

So I may have convinced you that learning new languages, paradigms or frameworks can be fun and that it can actually help you get an edge as a programmer. But how do you learn a new language or framework? I mentioned Soft Skills before, but I am going to do so again. In this book John Sonmez has a ten step plan for learning just about anything as quickly as possible. I know it works, because John’s approach to learning closely resembles my own method. So here’s what to do.

Read up on the topic you’re interested in. Get a feel of what’s important and what you need at the very least to get started. Also get a feel of how big this thing is you’re learning. Is it a few days of work, or will years of study go into this? Don’t spent to long on this though.
Once you have a picture of what it takes to become proficient at whatever it is you’re trying to learn determine what parts you want to do. Set some bigger goal you want to reach and some smaller goals that will take you there.
After that find resources, books, blogs, videos, whatever it takes to get your started. And then filter them so you can get started with reaching your first goal.
For most languages and frameworks my first goal is to set up the environment. Once I’ve done that I need some “Hello, world!” kind of application, so I know I can actually write and run code with it. Usually that’s not too difficult with all the pre-reading I’ve done.
After that just play around a bit, get familiar with the syntax, the libraries, the tools, etc. After that you can do whatever you want. I’d repeat those last few steps, keep setting new, small goals, and just get there.
Don’t spend to much on any tool you won’t be using though. Just get a feel for it and see how you can use certain elements from it in your day to day programming.

 

That’s my approach to learning. John does a much better job at explaining it than I do, so I suggest you buy his book, or order his course 10 Steps to Learn Anything Quickly.
Now John’s 10th step, one I didn’t have, is rather interesting. Teach! Of course I’ve been doing that by writing my articles, but I’ve never thought about it as a part of the learning process. So how can you teach? Well, start a blog! And, as you might’ve guessed, John has a (free) course on that as well. If you’re interested in learning and teaching I suggest you sign up for his three week email course on blogging.

I’ve successfully used this approach (including teaching) while learning web development. Try learning that, “web development”. No way you can pull that off! Web development is such a broad topic you’ll be overwhelmed, discouraged, and, ultimately, you’ll probably fail. Unless you start by learning HTML, then learning CSS, etc. Just take it one step at a time.
And you can see how I did this by reading up on my series on web development. In eight easy lessons you’ll have learned the ‘impossible’ task of “learning web development” and it wasn’t even hard.

I did the same with NoSQL. First I needed to know what NoSQL is. So apparently there’s different ‘flavours’. Then I needed to pick one, so I picked the one that’s closest to SQL (easy starting point!). Then I picked a database, MongoDB was listed as most popular, so that means I can find a lot of stuff about it. Then I needed to know how I can install it, after that run it, then try to insert some data, read it, edit it, read it again, delete, etc. And finally try doing that from C#, first connect, then read, then edit. Step by step. I’ve blogged about the result, A first look at NoSQL and MongoDB in particular.

There you have it. Get started now. Pick up that language you’ve been interested in, but that you never got around to doing. It might benefit you in more ways than you know. Now is as good a time as any. And on that subject, John’s book Soft Skills also talks about how to stop procrastinating and just do what you should be doing (actually the book talks about a lot).
Next week I’ll be back with hopefully a ‘normal’ technical article again. So stay tuned!

Happy coding!

Knockout.js for data binding in HTML and JavaScript

Hi there, and welcome to another article on web development. This week we’ll be looking at Knockout.js, an MVVM library that makes data binding in HTML and JavaScript a whole lot easier. If that meant nothing to you don’t worry, that’s what I’m here for. If you’re unfamiliar with HTML and/or JavaScript I suggest you follow my series on starting web development. You can find the first part here: Web development #1: Internet and the World Wide Web.

If you like my blogs please subscribe. You can enter your email at the top right corner of this page. Don’t worry, I’m not going to sell you anything, but you’ll get new posts in your mailbox as soon as I post them.
Also, if you haven’t done so yet, make sure to follow me on Twitter @sanderrossel for other interesting articles and industry updates.

All the examples for this blog are published on my GitHub account. You can get them at the knockout-blog repo.

So with that out of the way, let’s get started!

Knockout.js basics

So what exactly is this Knockout.js? Simply said Knockout links data, from your JavaScript, to your HTML page and updates that data if it changes, either from your page (by user action) or in your JavaScript. This linking is called binding.
As mentioned Knockout is an MVVM library, which stands for Model View ViewModel, but that still doesn’t tell us much. Well, look at it this way, you probably have data to show on your page, this is your Model. This can be anything, like user information, blog posts or a list of sales orders. Your HTML page is your View, it’s what people see. The ViewModel is an abstract intermediary that communicates between your View and your Model. The key for this communication is a binder, a component that takes care of this communication.
So that sounds pretty abstract and difficult, right? Here’s the good news though, you can pretty much forget about it. The takeaway is that MVVM enables for a separation of your View (user interface, or (G)UI) and your domain data and logic. That also means you can, theoretically, rewrite your entire View without having to touch your domain. And it means one person can be writing the View while another is working on the business logic, boosting a team’s productivity. The Windows Presentation Foundation (WPF) is another example of MVVM.

So Knockout is an MVVM library, but what does this mean for us developers? How about an example? Of course we’ll need an HTML page and some JavaScript. That’s all, so I’m not going to incorporate a back end. I did, however, make use of jQuery, to show the real strength of Knockout. So I’m going to show two input fields where you can enter your first and your last name. Whenever you change either your first or last name your full name is shown below the inputs. Easy as pie. First you’ll need to get Knockout and jQuery. Head over to the Knockout download page (version 3.3.0) and the jQuery download page (version 2.1.3) to get them. Of course if you got the source from my GitHub you’re already good to go. So here’s the HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h2>jQuery form</h2>
            <p>First name: <input id="firstName" /></p>
            <p>Last name: <input id="lastName" /></p>
            <h2>Hello, <span id="fullName"></span>!</h2>
        </div>
 
        <div>
            <h2>Knockout form</h2>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <h2>Hello, <span data-bind="text: fullName"></span>!</h2>
        </div>
 
        <script src="jquery-2.1.3.min.js"></script>
        <script src="knockout-3.3.0.js"></script>
        <script src="HelloWorld.js"></script>
    </body>
</html>

And here’s the HelloWorld.js.

$(function () {
    // Doing our own 'binding' using jQuery.
    $('#firstName').change(function () {
        // Doing some DOM stuff to get the values...
        var fullName = $(this).val() + ' ' + $('#lastName').val();
        $('#fullName').text(fullName);
    })
    // Manually setting the initial value.
    .val('Sander');
    
    $('#lastName').change(function () {
        // Doing some DOM stuff to get the values...
        var fullName = $('#firstName').val() + ' ' + $(this).val();
        $('#fullName').text(fullName);
    })
    // Manually setting the initial value.
    .val('Rossel')
    // Trigger the change event to update the fullname.
    .change();
    
    
    // Knockout binding!
    var person = {
        firstName: ko.observable(''),
        lastName: ko.observable('')
    };
    
    // Set the values, notice that they're functions!
    person.firstName('Sander');
    person.lastName('Rossel');
    // Compute full name.
    person.fullName = ko.pureComputed(function() {
        return this.firstName() + " " + this.lastName();
    }, person);
    ko.applyBindings(person); // This makes Knockout get to work
});

So that’s a lot of code! Let’s break it down. The HTML for the jQuery form is simple and straightforward, so let’s skip that. The HTML for the Knockout form has some weird stuff though, what’s all this data-bind? This is a custom Knockout attribute (all custom HTML5 attributes have the data- prefix) that defines what attributes on the HTML element should bind to what properties on your binding context (we’ll see that in a minute). The binding then makes sure that any changes in your form are reflected in your data and vice versa. So, for example, the input that takes your first name has its value attribute bound to some firstName property on the binding context. The syntax for the binding is “name: value [, anotherName: someValue]”. We’ll see a couple of different bindings throughout this post.

Now if we look at the JavaScript we first see the jQuery implementation. This makes us select the #firstName and #lastName elements, get their value and then update the #fullName element. It’s just all DOM traversal really, nothing special about it. Now the Knockout implementation is something different! We define an object (which is really our ViewModel) with a firstName and a lastName and we assign to them whatever ko.observable(initialValue) returns. And here is the trick, really. These observables notify our page when a change is made.
After that I’m setting the values for firstName and lastName. I could’ve done that right away, but I want to emphasize that firstName and lastName are not simply our first and last names (strings), but they are actually functions (because that’s what ko.observable() returned). Changing them will require us to invoke that function and passing in the new value as a parameter. Likewise, getting the values requires us to invoke these functions, but passing in no parameters.
After that I’m giving person its fullName property, assigning to it the return value of ko.pureComputed(function, this). I didn’t specify it in the object literal, because ko.pureComputed() takes a parameter that serves as this. In the object literal I can’t use person just yet, because we’re creating it and the this will be the window if I’m not specifying it. The computed value keeps track of all its bindings (firstName and lastName) and updates automatically when one of them changes.
Last, but not least I’m calling ko.applyBindings(context) and pass it our person object. This sets the binding context and will cause our page to be updated and show the values of our person object.

I don’t know about you, but I’m not so excited about that pureComputed… So let me give you a little alternative to creating that person using a function and a constructor.

var Person = function(firstName, lastName) {
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.fullName = ko.pureComputed(function() {
        return this.firstName() + ' ' + this.lastName();
    }, this);
}
var person = new Person('Sander', 'Rossel');

Better, no?

So that’s a whole lot to take in and with a few lines of jQuery you can get the exact same result! So why then would we use Knockout?

Building a contact form

Well, first of all, with jQuery you need to manually update variables in memory and values on your page. With just a name this isn’t a big deal, but what if you had an entire contact form? Let’s create one using Knockout. You should see that our JavaScript code isn’t growing much bigger, while this would be quite a hassle using jQuery. So here’s some contact form HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h1>Contact</h1>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <p>Email: <input type="email" data-bind="value: email" /></p>
            <p>Subject: <input data-bind="value: subject" /></p>
            <p>Your question: <textarea rows="5" data-bind="value: content"></textarea></p>
            <p><button data-bind="click: submit">Submit</button></p>
        </div>
 
        <script src="knockout-3.3.0.js"></script>
        <script src="ContactForm.js"></script>
    </body>
</html>

And here’s the ContactForm.js.

var form = {
    firstName: ko.observable(''),
    lastName: ko.observable(''),
    email: ko.observable(''),
    subject: ko.observable(''),
    content: ko.observable(''),
    submit: function() {
        alert("You entered:"
            + "\nFirstname: " + this.firstName()
            + "\nLastname: " + this.lastName()
            + "\nEmail: " + this.email()
            + "\nSubject: " + this.subject()
            + "\nContent:\n" + this.content());
        }
};

ko.applyBindings(form);

Now that’s looking more like it! We simply create some object, bind it to our form and we have nothing else to worry about. Notice that I bind the click event of the button to the submit function, this is called the click binding.
Now here you should see some real gain from Knockout! Look at that code, it’s just an object and when submit is called we have the most recent values. No need for any DOM traversal on our side. The beauty is that you can use this form obect anywhere in your code and nowhere do you have to worry about getting the correct values from- or updating the correct values to the DOM.

Arrays and foreach

So what if we have an array of items and we want to bind to that? Luckily Knockout has an observableArray which makes this pretty easy. So let’s say we have an array with Album objects. Each album has an artist, name and genre. If we’d create a table it may look like this.

<table>
    <thead>
        <tr>
            <th>Artist</th>
            <th>Name</th>
            <th>Genre</th>
        </tr>
    <thead>
    <tbody data-bind="foreach: albums">
        <tr>
            <td data-bind="text: artist"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: genre"></td>
        </tr>
    </tbody>
</table>

So albums is just an observableArray, which is created in much the same way as a regular observable. We can simply bind an observableArray using the foreach binding. The artist, name and genre in the data-binds are called on the current object in the foreach.

So let’s say we want to provide some edit, add and remove functionality so we can manipulate our list and albums. Actually that’s not much harder!

<table>
    <thead>
        <tr>
            <th>Artist</th>
            <th>Name</th>
            <th>Genre</th>
            <th></th>
        </tr>
    <thead>
    <tbody data-bind="foreach: albums">
        <tr>
            <td><input data-bind="value: artist" /></td>
            <td><input data-bind="value: name" /></td>
            <td><input data-bind="value: genre" /></td>
            <td><button data-bind="click: $parent.remove">X</button>
        </tr>
    </tbody>
</table>
<button data-bind="click: add">Add</button>

So the click of the button in our grid is calling the remove function on our $parent object, where $parent is the container of our array. There are other such variables, such as $data (the current object) and $index (the current index).
Notice that the add button simply calls the add function, which is on our current binding context outside of the foreach loop.
Let’s look at the JavaScript for both examples.

var Album = function(artist, name, genre) {
    this.artist = ko.observable(artist);
    this.name = ko.observable(name);
    this.genre = ko.observable(genre);
}

var ViewModel = function() {
    var self = this;
 
    self.albums = ko.observableArray([
        new Album('The Beatles', "Sgt. Pepper's Lonely Hearts Club Band", 'Rock'),
        new Album('Led Zeppelin', 'Led Zeppelin III', 'Rock'),
        new Album('The Prodigy', 'The Fat Of The Land', 'Dance')
    ]);
 
    self.add = function() {
        self.albums.push(new Album());
    };
 
    self.remove = function() {
        self.albums.remove(this);
    };
};

ko.applyBindings(new ViewModel());

So first I’m simply defining the Album object. After that I’m creating a container for our array and our add and remove functionality. The first thing you’ll notice is that I’m making a reference to this by storing it in self. That’s a little weird JavaScript thing, which is nicely explained in this article: Getting Out of Binding Situations in JavaScript. Basically the remove function will not be called in the context of your ViewModel.
So after that we’re creating an observableArray (notice how it’s much the same as a regular observable). And then we have an add and remove function. We can then create a new instance and apply the bindings to our context.
You will notice that if you put both tables in your HTML (like I did) that the read-only table gets updated when you update the editable table. How awesome is that? And in your JavaScript all albums are, of course, automatically synced.

So one more thing, let’s say you can’t use a foreach binding because you don’t have a container, like a table or list. Knockout has a solution for this scenario too.

<ul>
    <li><h3>My favourite albums list!</h3></li>
    <!-- ko foreach: albums -->
        <li><span data-bind="text: name"></li>
    <!-- /ko -->
</ul>

And even that one automatically syncs when an album is changed, added or removed.

Other bindings

So you’ve now seen some of the most important features of Knockout, but there’s still much more. For example, there’s the if binding, which looks a lot like the foreach binding.

<p><input type="checkbox" data-bind="checked: showText" />(Un)check me</p>
<p data-bind="if: showText">This is the if binding.</p>
<p data-bind="visible: showText">This is the visible binding.</p>

<!-- ko if: showText -->
    <p>This is the commented if.</p>
<!-- /ko -->
var ViewModel = function() {
    this.showText = ko.observable(true);
}

ko.applyBindings(new ViewModel());

Next to the if binding there is a visible binding in there. Notice how the three act the same, but are actually different. You can check that when you press F12 in your browser and check the page’s HTML when you check and uncheck the checkbox. While the visible binding simply sets the style of the paragraph to display: none, the if binding removes the element from the DOM.

The attr binding let’s you set any attribute of an element. Here are some examples.

<p><input type="email" data-bind="attr: { placeholder: emailPlaceholder }" /></p>
<p><a data-bind="attr: { href: url, title: urlTitle, target: urlTarget }">This is a link.</a></p>
var ViewModel = function() {
    this.emailPlaceholder = ko.observable('example@contoso.com');
    this.url = ko.observable('http://sanderrossel.com');
    this.urlTitle = ko.observable("Sander's bits");
    this.urlTarget = ko.observable('__blank');
}

ko.applyBindings(new ViewModel());

The attr binding has a little weird syntax. Basically you specify attr: and then a literal JavaScript object with the attributes as properties and the fields you want to bind to as values.
In this example, since none of the values are going to change anyway, you could opt for not making the values observables, which is perfectly valid and which will show your data correct (but, of course, will not update when the values are going to change).

How about dynamically adding and removing classes to your elements? We can do this using the css binding. It looks a lot like the attr binding, except we now specify the class we want to add and the condition when it should be added (of course you should add some CSS too, if you’re using my files from GitHub you’ll see a little embedded CSS in the header).

<p data-bind="css: { cool: temperature() <= 7, moderate: temperature() > 7 && temperature() < 20, hot: temperature() >= 20 }">Temperature: <input data-bind="value: temperature" /></p>
var ViewModel = function() {
    this.temperature = ko.observable(15);
}

ko.applyBindings(new ViewModel());

You can also set your style directly using the style binding. I’ll leave that for you to figure out on your own.

Templates

So there’s one last very powerful feature I want to discuss, templates. So let’s go back to our album example. We now displayed them in a table, but what if we wanted to create regular inputs, perhaps create a little card view, instead of rows. You could use the comment style foreach, but what if you wanted this on other pages as well? You’d have to copy-paste your HTML onto the other page. Knockout has a better solution, the template binding.
So the idea is that you create some HTML which isn’t part of any page. We’re going to inject this HTML into our page, once for each album. And we can inject it on other pages too, if we want. It’s basically HTML re-use. So we can use the same JavaScript that we used in the arrays example. Here’s the HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Knockout example</title>
    </head>
    <body>
        <div>
            <h1>My favourite albums</h1>
            <div data-bind="foreach: albums">
                <div data-bind="template: { name: 'album-template', data: $data}"></div>
            </div>
        </div>
 
        <!-- This is our template -->
        <script type="text/html" id="album-template">
            <h2 data-bind="text: name"></h2>
            <p>Artist: <span data-bind="text: artist"></span><br>
            Genre: <span data-bind="text: genre"><span></p>
        </script>
        <script src="knockout-3.3.0.js"></script>
        <script src="ArraysAndForeach.js"></script>
    </body>
</html><!DOCTYPE html>

So we’re looping through our albums using the foreach binding. Then for each album we inject the template, which gets the current album as its binding context ($data). As you’ll see the template is now inserted in our page once for every album. Pretty awesome!

Well, that’s it! I hope I could make Knockout.js a little easier for you. I won’t say it’s easy, because I’ve had my share of problems with it too. Luckily it’s all worth it in the end, since Knockout can make your life a lot easier and your code a lot more concise.
I should probably mention that Knockout wasn’t created as a replacement for jQuery, or any JavaScript library for that matter, and you can use Knockout with other libraries if you like.
Knockout has more to offer, I can especially recommend that you take a look at the Mapping plugin, that can create observable objects from regular objects. Other than that the Knockout website has a pretty nice tutorial and the documentation is pretty good too, so be sure to check them out. And again I’m going to recommend a free ebook (all you have to do is sign up) from SyncFustion, Knockout.js Succinctly (I swear I don’t owe any SyncFusion stock! 🙂 ).

Happy coding!

Twitter Bootstrap for responsive, mobile first web apps

Welcome back! As you may know I’ve just finished my series on starting web development and it was a huge success! I’ve got a lot of good feedback, so thanks everyone. If you have no idea what I’m talking about you can visit the first part of my web development series here: Web development #1: Internet and the World Wide Web.
So to stay in the spirit of web development I decided to do some blogs on popular libraries and frameworks. This week I’m going for Twitter Bootstrap (from now on I’ll call it just Bootstrap).
Speaking of Twitter, I just created a Twitter account to share interesting articles and industry news, so be sure to follow me @sanderrossel.
I also got myself a GitHub account where I’ll upload the code files for my blogs. You can find my GitHub at https://github.com/SanderRossel. The files for this particular blog can be found at the bootstrap-blog repository.
Yes, I’m doing the best I can to serve your every programming needs!

Bootstrap basics

Now let’s talk about Bootstrap. Bootstrap is a free and open-source front end CSS and JavaScript framework developed at Twitter. It was first released as open-source in 2011, version 2 came in 2012 and currently we’re at version 3, which is also the version I’ll be using in this post. One remark on the Bootstrap versions, there’s quite a difference between Bootstrap 2 and Bootstrap 3. If you’ve already worked with Bootstrap 2 and want to migrate or have an overview of the differences you may want to have a look at the Migration guide at Bootstrap.
As you may have guessed you don’t need any server software to use Bootstrap, so I’ll keep the examples here simple so you really don’t have to do anything else than create some files and run them in your browser.

So what does Bootstrap actually do? Simply said it allows you to easily layout your page using classes and HTML attributes. It’s mostly just CSS. Bootstrap does this using a grid on your page. Not an actual HTML grid, but a virtual grid, containing twelve columns that you can use to divide your content. So it may look something like this.

An example of how your Bootstrap columns can be organized.
An example of how your Bootstrap columns can be organized.

And of course you can use any number of columns, up to twelve, on any row. So how did I do this? Let’s look at some HTML.

<div class="container">
    <div class="row">
        <div class="col-xs-12">12 columns wide</div>
    </div>
    <div class="row">
        <div class="col-xs-6">6 columns wide</div>
        <div class="col-xs-6">6 columns wide</div>
    </div>
    <div class="row">
        <div class="col-xs-8">8 columns wide</div>
        <div class="col-xs-4">4 columns wide</div>
    </div>
    <!-- etc... -->
</div>

Here you can clearly see how I define rows and columns to layout my page (more on that later). Your columns don’t have to add up to twelve. If you have less than twelve columns there’ll just be an empty spot on your page and if you go over twelve columns Bootstrap will simply wrap your excess columns on a new line (but it’s best if you avoid this). If you need more or less than twelve columns for your page you can download the LESS version of Bootstrap and edit the columns variable. Very cool, but I’m not discussing that here.
So here are a few rules, rows need to be inside a .container (for fixed width) or .container-fluid (for full width) for proper alignment and padding. You should place only columns inside your rows and content within columns.

Other than that Bootstrap adds theming to your website. There are a lot of themes, both free and premium, that you can use to give your website a complete new look without having to change your HTML. And Bootstrap has a lot of controls for HTML, like dropdowns, buttons, navbars, tabs, etc. We’ll look at some of them later.

Creating a responsive page

So now that we know what Bootstrap can do for us let’s put this into practice. First of all let’s look at a very basic Bootstrap document. You can actually get it from the Bootstrap site. I’ve removed some stuff from it (mostly comments) that we aren’t going to use (mostly backwards compatibility for IE). You can view the original basic template at Twitter Bootstrap – Getting started.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello, Bootstrap!</title>

        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
       <h1>Hello, Bootstrap!</h1>

       <script src="js/jquery-2.1.3.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
    </body>
</html>

As you can see I’m assuming your HTML file is in a folder that contains a folder called css which contains the bootstrap.min.css file and a folder called js which contains bootstrap.min.js and jquery-2.1.3.min.js. You can get Bootstrap from the download section at Bootstrap and jQuery from the jQuery website. Bootstrap uses some jQuery for certain components, but you might not need it. If you do need it make sure you use a compatible version of jQuery. Other than that the meta element with the viewpoint may be unfamiliar to you. You should use this for websites that are optimized for mobile devices (don’t use it for non-responsive pages though).

So now that we have the basic Bootstrap template let’s display some text on the page. Let’s say we’re creating a news website and we want the cover story at the top and page wide. Beneath that we want some featured articles. And what’s more, we want it to look good on any device. So let’s say we have two rows, one for the cover story and one for the featured articles, that will be displayed next to each other. We can also safely assume that the number of featured articles that fit on the page is limited by our screen size. On a big screen we can have four featured articles next to each other, but on a medium and small sized screen we want maybe only three or less articles. Well, that’s something Bootstrap is really good at! So in the example above I’ve used col-xs-* to create a row that spans * columns. The xs here is the trick. It actually means that this row spans * columns on any device that’s xtra small (xs) or larger (because we didn’t specify what should happen if it gets larger). We have col-lg-* (large, anything larger than or equal to 1200 pixels), col-md-* (medium, anything larger than or equal to 992px), col-sm-* (small, anything larger than or equal to 768 pixels) and col-xs (extra small, anything smaller than 768 pixels). Most phones go into the xs category, tablets would be small or medium, laptops medium or large and desktops large. So then let’s see some HTML. For our news site we can have the following body (actual content left out).

<div class="container">
    <div class="row">
        <h1>Sander's bits</h1>
        <p>Writing the code you need</p>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h2>Main article</h2>
            <article><p>...</p></article>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-4">
            <h3>First featured article</h3>
            <article><p>...</p></article>
            </div>
        <div class="col-lg-3 col-md-4 col-sm-4">
            <h3>Second featured article</h3>
            <article><p>...</p></article>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-4">
            <h3>Third featured article</h3>
            <article><p>...</p></article>
        </div>
        <div class="col-lg-3 hidden-md hidden-sm">
            <h3>Fourth featured article</h3>
            <article><p>...</p></article>
        </div>
    </div>
</div>

Let’s figure this bit out, eh? First of all I’m using a container, or a div element with the .container class to hold my rows. One thing about the container is that it’s sized differently on different screen sizes. So next I’m creating a row to hold my page name, which is Sander’s bits. Then comes the second row with our cover story. It’s spanned out across all twelve columns on all devices. Now comes our third row, which is the most interesting. Each article has multiple classes, one for each device size that we want to cover. On large devices we display four articles, each spanning three (out of twelve) columns (.col-lg-3). On medium sized devices the fourth article gets hidden (using the .hidden-md class) and the other three articles now span four columns (.col-md-4). Small devices have the same layout as medium sized devices (.hidden-sm and .col-sm-4). On extra small devices we don’t specify any layout and our page will display the articles one under the other (including the fourth). You can test this by opening the page in your browser and then simply changing the size of your browser window. Check at what size your browser hides or displays the fourth article and at what sizes it places the articles under each other.
I admit that’s quite some classes on your elements, and it may take you a bit to figure out what’s going on, but you get a lot in return. I don’t know about you, but I find this pretty amazing!

Bootstrap classes

Our news website is starting to look pretty professional already, but we want the cover story to stand out a bit more. Bootstrap adds all kinds of classes that you can use to style your page. For our cover story we’re going to add two: .lead and .text-center.

<h2 class="text-center">Main article</h2>
    <article><p class="lead text-center">...</p></article>

You may have guessed, but there are also the classes .text-left and .text-right and all they do is align your text to the left, right or center.
Looking good, right?

Let’s ‘mute’ the tagline too, it’s not all that important, so we want it to be visible, but not stand out too much.

<p class="text-muted">Writing the code you need</p>

Now what kind of news website doesn’t have weather forecasts? Let’s add some! I’m thinking of adding an HTML table to the bottom right. It’ll show up under our third or fourth column (depending on screen size). Luckily we can use offsets for our columns in much the same way we can make them span multiple columns. So let’s have a look at that table. Notice that I’m using HTML 5, which means we need table, thead and tbody elements. So the following HTML goes at the bottom of our container.

<div class="row">
    <div class="col-lg-3 col-lg-offset-9 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8">
        <h4>Weather</h4>
        <table>
            <thead>
                <tr>
                    <td>Day</td>
                    <td>C&deg;</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Today</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>Tomorrow</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Day after tomorrow</td>
                    <td>27</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

So the table is positioned right across all devices. The .col-lg-offset-*.col-md-offset-* and .col-sm-offset-* work great (and of course there’s also a .col-xs-offset-*). I don’t need to explain this, because you already know how it works. The table itself is rather clumsy though. The columns are pushed against each other and it doesn’t scale well at all. Bootstrap has a really very simple solution, just add the .table class. And because we want some additional styling we’re also going to add the .table-striped and .table-bordered classes.

<table class="table table-striped table-bordered">

Very nice! Now in that same style I also want to add some stock information on our page. And let’s indicate whether a stock went up, down or stayed the same. We can do this using the .success, .danger and .info classes (there’s also .warning and .active). These classes can be applied to buttons, text, table rows, labels, etc. The Bootstrap team has actually made sure these classes are consistent across elements for Bootstrap 3. So without any further explanation here’s our stock table (I just made up the numbers, don’t buy or sell based on this table).

<div class="row">
    <div class="col-lg-3 col-lg-offset-9 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8">
        <h4>Stock</h4>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td></td>
                    <td>Price</td>
                    <td>%Change</td>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>Dow</td>
                    <td>18,128</td>
                    <td>0.94%</td>
                </tr>
                <tr class="danger">
                    <td>Nasdaq</td>
                    <td>5,026</td>
                    <td>-0.69</td>
                </tr>
                <tr class="info">
                    <td>S&P 500</td>
                    <td>2,108</td>
                    <td>0.00</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

So again, this is pretty simple, but the effects are amazing.

Let’s add an image to our main article to make it stand out even more. Bootstrap has some classes to handle images. Now what is the internet all about? If you answered cats you’re right! So let’s add a picture of my parent’s cat. We can add some classes to make it look good and have it scale with our screen size. I’m going to add the class .img-circle to make it round (alternatives are .img-rounded for round corners and .img-thumbnail). I’m also adding .img-responsive so it will resize with my screen. Last, but not least I’m adding the .center-block class to, well, center it.

<h2 class="text-center">Main article</h2>
 <article>
 <img src="http://sanderrossel.com/wp-content/uploads/2015/03/Cid.jpg" alt="My cat, Cid!" class="img-responsive img-circle center-block">
 <p class="lead text-center">...</p></article>

Bootstrap components

At this point you have to look pretty hard to see if you’re looking at the New York Times website or at our Bootstrap example page because our page is looking so good and professional. I’m still not completely happy though. I want my weather forecast and stock information to be tabbed. I’ve given an example of this before using jQuery UI in a previous blog post, Web development #6: Getting interactive with JavaScript, but this time we’ll be using Bootstrap to get the same effect. As mentioned before Bootstrap needs jQuery for certain components, the tab control is one such component. Compared to jQuery UI Bootstrap has some pros and cons. The pro is that we don’t need to write a single letter of JavaScript. The con is that the HTML is rather, well, bloated. You can remove the entire row containing the stock table and add the stock table to the row with the weather table. Then we need to tab both tables. So let’s look what it looks like.

<div class="row">
    <div class="col-lg-3 col-lg-offset-9 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#weather" data-toggle="tab">Weather</a>
            </li>
            <li>
                <a href="#stock" data-toggle="tab">Stock</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="weather">
                <!--Weather table goes here-->
            </div>
            <div class="tab-pane" id="stock">
                <!--Stock table goes here-->
            </div>
        </div>
    </div>
</div>

So like with jQuery UI we need an unordered list with the .nav and .nav-tab classes and anchor tags that link to the id’s of some div elements. The div elements containing our tab pages go into another div element that has the .tab-content class and is placed directly under the tab list. The data-toggle attribute tells Bootstrap what kind of component this is, a tab. Another cool feature are the tab pills and vertical tabs. Try changing the .nav-tabs class into .nav-pills or .nav-stacked. Looking pretty good!

Finally, let’s add a menu to our page. Adding a menu to any website can be pretty difficult. It needs to stay at the top, it needs to scale, you want some components to be left-aligned, others right-aligned, it’s just quite difficult. Bootstrap makes it a lot easier, but even then it’s not exactly easy. You need lots of classes, lots of elements, and just lots of everything really. It’s still easier than doing everything yourself and it scales really nice. So here’s what I’ve done. I’ve taken the example from the Bootstrap website and I’ve stripped it a bit. I’ve removed some buttons and dropdowns and some HTML attributes and classes that have to do with accessibility (for people with disabilities, like bad sight or even blindness).
We can create a navigation bar using the nav element. Within this nav element we’re going to create a fluid container, meaning it spans our entire page. After that we’re going to specify what our menu looks like when it’s collapsed, for example on phones, and what elements we like to show. So how about our brand, for which Bootstrap has some special classes, a search form, an About link and a Login button? The HTML would look like this (placed directly under your opening body tag).

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://sanderrossel.com" target="_blank">Sander's bits</a>
        </div>

        <div class="collapse navbar-collapse" id="menu">
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </div>
</nav>

So check that out and look what happens when you resize your browser window. Awesome!

I’ve also used a glyph icon in my search button. This is another Bootstrap goodie. You can use glyphs like that to make your page just a little prettier. Actually, I want that for my weather and stock tabs too. Let’s change that.

<ul class="nav nav-tabs">
    <li class="active"><a href="#weather" data-toggle="tab"><span class="glyphicon glyphicon-cloud"></a></li>
    <li><a href="#stock" data-toggle="tab"><span class="glyphicon glyphicon-stats"></span></a></li>
</ul>

Nice, right?

There’s lots more that Bootstrap has to offer. We’ve already seen quite a bit and we got some pretty amazing results. The best part is that we got those results without writing a single line of JavaScript! What else can Bootstrap do? Well, it has more classes you can use to style your elements, like Code, Forms and Buttons. It has more components you can use, like Buttongroups, Button dropdowns, Breadcrumbs, Page headers, Alerts and Progress bars. And if you don’t like how your website looks try one of these free Bootstrap themes or check out these premium Bootstrap themes. If you like to know more about Bootstrap I can recommend two free books by SyncFusion, Twitter Bootstrap Succinctly (which is about Bootstrap 2) and Twitter Bootstrap 3 Succinctly (which is both an update and an addition to the first book).

You can find the entire HTML for this blog and the necessary CSS and JavaScript files on my GitHub account in the bootstrap-blog repository.

Happy coding!

Web development #8: Where to go from here

So if you’ve read all of my previous posts and you’ve made it this far congratulations! You’ve now learned the basics of web development and you have the knowledge to create awesome websites. To actually create awesome websites you need skills and skills come from practice and experience. I’ve only touched the surface in this blog series. So it’s now up to you to get your hands dirty and write more HTML, more CSS, more PHP and more JavaScript. And while doing that Google is your friend! I’ve far from discussed all the possibilities (people write entire books about that), but at least you know all the moving parts. So these previous blogs weren’t so much about making you a pro, they were about getting you up to speed in a simple manner. The rest, unfortunately, is up to you. In case you’ve missed some posts, here they all are again.

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

So what’s left for us? Well, in this post I’ll write about some stuff I haven’t written about in the previous posts, but which every web developer should know about. After that I’ll lay out some alternative technologies for you that may help you get started with the technologies you want.

Debugging

So you’ve written your page, you test it in your browser, and for some reason it doesn’t do what you want it to do. How can we find our error? The examples I’ve given were pretty small and in those cases it may be feasible to just have a good look at your code again. However, when you’re going to write large applications with much more code on both front- and back end just looking at your code isn’t going to help you. I haven’t discussed debugging your code because a lot of it depends on your environment. In this series I’ve used Notepad++ which doesn’t have any debugging capabilities (although I read there’s some plugin that let’s you debug code, I haven’t tried it though). If you’re going for an IDE (Integrated Development Environment) such as Visual Studio, Eclipse, NetBeans or XCode you’ll get a lot more possibilities. You can set breakpoints, for example, which allows you to pause your software on a certain line of code and inspect variables and their values and then even step through your code line by line to follow the flow of your code. Personally I work with Visual Studio and it allows you to see the entire stack and even edit code at run time.

But that’s all back end debugging. What if something is wrong with your CSS, HTML or JavaScript? Luckily all major browsers (and probably the non-major too) have debugging support. If you’re in IE, Firefox or Chrome press F12 and you’ll get the developer tools (alternatively you can look them up in the browser’s menu). So here you should see a tab or button that gets you to the console. In the console you’ll see any errors or warnings that are generated by your page (invalid HTML, a bug in your JavaScript, etc.). You can also log to the console yourself using console.log() in your JavaScript (never ever use that in production code though). There’s also a tab called Network where you can see all server requests from your page. This comes in handy when pages load slow, perhaps you’re making a lot of requests or you’re loading some large file that takes a while to load. There’s also a tab where you can see your page’s HTML and CSS and edit them real-time (in your browser, not on the server). You can either select an element in the DOM and have it light up on your page or select something on your page and have it highlighted in the DOM. Then you can make changes to your HTML and CSS and see the results real-time. It’s also possible to debug your JavaScript. You can set breakpoints and step through the code following the execution flow and inspecting your variables. Pretty neat and indispensible when working on your pages! Try working with the developer tools in your browser of choice and look for some tutorials.

Picking a back end language

In this series I’ve used PHP. PHP is free (although most languages are nowadays), easy to start with and supported everywhere. You can simply open up Notepad(++), start typing PHP, put it on your server and it’ll run. Compare that to other (compiled) languages like Java and C# and PHP is an absolute winner. A lot of popular Content Management Systems (CMS), applications that help in creating, editing, publishing and maintaining content on your websites, such as WordPress, Joomla!, Drupal and Magento, have support for PHP too. So PHP is a good choice for many applications.

However, a lot of people prefer their languages more strongly typed and object oriented. In that case you might go for Java or C# (or Visual Basic). So suppose you want to go for C# because perhaps you already have experience in WinForms or WPF or a client wants a .NET application. So when using C# you’re basically using the .NET Framework and when going for web development you’ll be using the ASP.NET stack. But then in ASP.NET you’ll have some options like WebForms and MVC. Let’s go with ASP.NET MVC, because that’s a good choice for modern web development. ASP.NET MVC makes use of the MVC Design Pattern. MVC stands for Model View Controller. When requesting a page ASP.NET MVC basically calls a method on a class. This class is called the Controller. Perhaps your Controller makes some database calls and does some computations and then comes up with the data that you want to show on your page. This data is just another class and represents the Model. The Model is then passed to your View, which is basically your HTML, which is then returned to the client. And, like PHP, with C# (or Visual Basic) you can generate HTML/View using the Razor Engine.
So you want to get started with ASP.NET MVC? I don’t blame you, it’s a great product. I recommend you get the Visual Studio Community Edition for free and just start! There’s plenty of tutorials on the web, but if you’re looking for a more structured course on MVC I can recommend the book Professional ASP.NET MVC 5.
And here’s a little downside to .NET compared to PHP. Once you have your software ready for production you’ll need a server with .NET installed that’s also running some special server software called IIS (Internet Information Services).

Another alternative to PHP and C# is Node.js. Node.js is relatively new and is a fast and lightweight platform that allows you to run JavaScript in your back end and create real-time web applications. So you can use JavaScript in your back end, which is pretty neat because that means you can re-use code from your back end in your front end! Try doing that using any other back end language. Other than that Node.js uses sockets, which enables it to send data to your client without that client asking for it. Usually a client sends a request and the server serves. But now we can serve without the client having to request! That allows us to easily create, for example, a chat application. Our client simply subscribes to the chat and our server sends every new message to the client as soon as it’s received. So when going with Node.js you probably want to use Express as well. Express is a JavaScript framework for Node.js which makes working with Node.js just a bit easier. And when you want to start using sockets extensively you might want to check out Socket.IO, which is a library for working with sockets from JavaScript. And of course you’ll need to generate your HTML in Node.js. There’s a few options for you, but Jade is a pretty popular one.
So you may have figured out some of the downsides of Node.js. First of all, it’s JavaScript, which may or may not be a problem for you, depending on your tastes. Second, unlike C#, Node.js doesn’t “just work”. To get any serious business done you need quite some external JavaScript libraries (and there’s A LOT as we’ll see in a bit). The pro, of course, is fast, relatively easy, real-time web apps using the same language as your front end.
If you’re interested in Node.js you may take a look at what’s called the MEAN stack, MongoDB, Express, AngularJS and Node.js. It’s free, open-source and very JavaScript.

I should probably mention that .NET has their own sockets framework that allows you to build real-time web apps easily, called SignalR.

So we’ve looked at some alternatives to PHP. There are more, like Ruby (On Rails), Python and Java. You can check them out, read a bit about them, and decide what works well for you.

Some front end alternatives

So we’ve looked at some back end alternatives, but what can you do on the front end? On the front end it really all comes down to HTML, CSS and JavaScript. Your HTML is generated on your back end and there’s plenty of options to do it, like Razor, Jade or any other HTML generator. It all depends on what back end you pick.

So what about CSS? Well, browsers really require CSS to lay out your page. There are some alternatives though, most notably LESS.
LESS looks a lot like CSS, but adds some features. You could almost call it object oriented CSS.
Another alternative is Stylus, which, like LESS, adds features to CSS. Stylus is focusing more on expressive CSS, which is easy and clean to read while also supporting some form of object orientism.
There’s more, like Sass and Turbine.
Now here’s the deal. None of them replace CSS, rather they are compiled to CSS. So you write your LESS (or any other), compile it, then use the generated CSS on your page. This adds some hassle, since you need to compile your code (your not-quite-CSS) before you can actually see it on your page (as opposed to just refreshing your page). But they also make for clean, maintainble CSS. I recommend checking out at least one of them, especially when you’re going to build larger websites. Alternatively you can just use an already existing library, such as Twitter, which I’ll talk about in a bit.

What about alternatives for JavaScript? There are quite some languages that compile to JavaScript. The two most notable are probably TypeScript and CoffeeScript though.
When you read the first lines on the CoffeeScript page you’ll pretty much have an idea what CoffeeScript is all about, “JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way”. So there isn’t much to say about that. It’s just a new syntax for JavaScript, hiding the dirty bits. I haven’t used it myself, but if you don’t quite like the JavaScript syntax and want to try something that’s like JavaScript, but prettier you might want to check out CoffeeScript.
Now TypeScript, that’s quite something different. It adds type safety to JavaScript and actually reads more like C# than JavaScript. Not completely by coincidence as TypeScript was actually created by Anders Hejlsberg, lead architect of C#. Of course it still just compiles to JavaScript. If you’re already in the Microsoft stack and using Visual Studio you may as well give TypeScript a try!
I also want to mention Dart very briefly. It was created by Google and it’s a fully object oriented way of writing JavaScript. In their words “new, yet familiar”.

Libraries and Frameworks

When working with JavaScript you know everything is possible, but nothing is easy. Luckily a whole lot of people have created libraries for you that you can use when using JavaScript. In this section I just want to point out some popular libraries and frameworks. We’ve already seen jQuery and jQuery UI.
Another very popular framework is Twitter Bootstrap. It’s mostly CSS, but has some JavaScript too. It allows you to create pages that look good and scale well across devices with relative ease. It mostly depends on tagging your HTML elements correctly. I’m not going to discuss it any further here. Just know that it’s available and that it’s widely used.
Another popular library is Knockout. With Knockout you can bind your JavaScript classes to your HTML elements. So values are automatically synchronized between your HTML and JavaScript. If a user changes the value of a text field the underlying value is changed and is reflected on your page and vice versa. Again, I’m not discussing it further, just know that it exists.
Another library that you simply cannot ignore is AngularJS. AngularJS is an MVVM (Model View ViewModel) framework for building Single Page Applications (SPA). That means you get a single web page and all data is fetched using AJAX. It makes for a fluent user experience as the website doesn’t need to refresh with each request (only parts of it). AngularJS is BIG. It basically does most that jQuery does and everything that Knockout does as well and the learning curve can be steep. Luckily there are some nice tutorials and books around.
Now one of the most awesome JavaScript libraries you’ll come across is D3.js. If you need any kind of graph or table, or any visual to represent your data, D3.js is the library you need. Just look at it. The website features many examples and it’s fun to just look at it. The only thing I don’t like about this library is that I haven’t needed it yet 🙂
You might come across Ember.js as well. It’s an MVC framework for creating Single Page Applications.
Without going into detail, here are some other popular JavaScript libraries: Underscore.js, Backbone.js, MooTools, jQuery Mobile, Modernizr

There’s literally thousands of JavaScript libraries and frameworks. Some are pretty big, like Angular, and some are really small and do just one thing only, but do it really well. You might want to check out Microjs, a website with literally hundreds of very small JavaScript files. Just look around and see what’s available, it might surprise you.

Some final words

So in this final post of my web development series we’ve looked at some alternatives and libraries you can use to help you create awesome websites. There’s still lots of stuff that we haven’t covered, like putting your website in production (because that really depends on the languages you used and where you’re hosting), security (very important!) and SEO, or Search Engine Optimization. We’ve also skipped databases entirely.
We did have a look at all the parts that are vital in web development though. You should now have a pretty good idea of what you need to create your own websites.
In this series I have pointed out some books from the SyncFusion Succinctly Series, and I’m going to do so again. You can subscribe freely and gain access to free books on JavaScript, Twitter, Knockout, AngularJS, Node.js and much more. All I can say is that it’s really worth it!
For more (less succinct) books on various topics, including a lot of web development, I can recommend Manning Publications. They have some good stuff on Node.js, D3.js, SPA Design, CORS, and more.
Two other really cool articles/projects I came across are Learn JavaScript by Dave Kerr, where he creates a Space Invaders game using JavaScript and a Mario game by Florian Rappl. Both are worth checking out (and if you don’t like their articles you can still play the games 😉 ).

So that’s it for this series. That isn’t to say I’ll stop blogging or I’ll stop writing about web development, it just won’t be for this series. I hope you enjoyed it as much as I did. Any comments and questions are more than welcome!

Thanks for reading.

Happy coding!

Writing the code you need

%d bloggers like this: