When a web project starts getting big, managing dependencies becomes hard if you don’t have the right tools. If you have some experience with web development, you probably use RequireJS to manage your dependencies.

RequireJS does a great job but if you are familiar with node, you probably wish it was as easy in the browser. Dependency management is built into node, so you don’t have to worry about it.

Browserify lets you write node-style code that works in the browser. It is basically a replacement for RequireJS that allows you to create bundles with less configuration.

I just built a little node app that I want to make publicly available. I got a little dedicated server where I am going to host my app. The problem now is getting my app into the server. In the past I had done this task using FTP, but now I know better. There are tools out there that allow us to deploy our app to our server(or list of servers) with a single command, and flightplan makes this task very easy for node apps.

Installation

We need flightplan in our development machine so we can run deploys from there. We can install it from npn:

1
npm install -g flightplan

This globally installs the command line tool that allows us to run the fly command. We also need to install flightplan as a dev dependency of our node project:

1
npm install --save-dev flightplan

Salt is a server orchestration platform that allows you to manage your server infrastructure. It allows you to remotely configure all your servers(minions) from a single place(master). Salt also allows you to execute commands or scripts in a collection of servers at the same time and it will aggregate the output for you.

Installation

You will typically have one master and multiple minions. In your master host you will need to install salt-master

1
sudo yum install salt-master

If you want your salt to start automatically every time your master is started you can use:

1
systemctl enable salt-master.service

You will also need to install something in your minions:

1
yum install salt-minion

And to have it start with the system:

1
systemctl enable salt-minion.service

What is polymer

Polymer is a framework for creating web components. Polymer is different than other web frameworks in that it only exists while browsers catch up on implementing the web components specification(which hasn’t been finalized).

Polymer doesn’t do much in helping you create single page apps. It doesn’t have a router, tools for internationalization or a nice abstraction for XMLHttpRequest. The way you build apps using polymer is by creating components that help you do those things.

Karma is a JS unit test runner originally designed for Angular. Karma can use most popular testing frameworks(mocha, jasmine, etc…), assertion libraries(expect, chai, …) and mocking frameworks(sinon).

The reason this post is titled “Unit testing angular with karma” and not “Unit testing JS apps with karma” is because in my opinion Karma does a lot of things that only make sense for Angular apps. The thing that most caught my attention is that when you use Karma for unit testing you have to load all files in to the browser at once. If you have a JS file that depends on other JS files(loads them using AMD) there is no way to mock the dependencies. This would make unit testing impossible if it wasn’t because of Angular’s dependency injection system. At the end, this means that you can mock all dependencies, but you end up loading stuff you don’t need. In practical terms this is irrelevant because unit tests run very fast anyway.

Git bisect helps you find out the commit that introduced a bug. It has happened a few times that somebody discovers a bug that I knew used to work fine before. When this happens I go back to an arbitrary point in the git history and try to reproduce the bug. If the bug is still present I go back a little more, until I find a point where the bug is not there. Then I try to find the commit that introduced the bug by searching through the commits between the commit I know works and the one I know doesn’t.

Git bisect helps you do this more efficiently by using a binary search. Lets say you are now in the HEAD of your master branch and you know there is a bug in there. You can start a bisect session by running:

1
git bisect start<br /> git bisect bad

What is docker?

Docker is a a way to create “virtual machines” that contain your app(and its dependencies) and can be easily deployed to any environment. The thing about docker is that these virtual machines that it creates are not “complete” virtual machines. Docker uses a light weight virtualization technology that doesn’t need an hypervisor. Because it doesn’t use an hypervisor it can pack more virtual machines in a single server, which translates to more efficient use of hardware.

How does this compare to the traditional model?

In the traditional model you most likely get a server(or more), create a virtual server image with all the requirements for your app and then create all the virtual machines you need on your server. When you are ready to deploy your app you grab a build of the app and install it on all of the virtual machines.

Web components is a series of W3C specs that aim to give web developers the power to create custom reusable components. The specs that form part of the web components framework are: HTML templates, custom elements, shadow DOM and HTML imports. Together these standards give us the power to create, load and use custom components.

HTML Templates

HTML Templates allow you to specify templates that you can later reference with JS and insert where you see fit. Templates are an alternative to writing HTML strings inside your JS code. Instead of having to concatenate a bunch of strings to form an html snippet now you can write it in HTML inside a template tag and then just use its content.

In a previous post I explained how to start modularizing Angular apps.

I’m going to improve the app I built in my example so it now lazy loads the modules it needs when you change routes. The end result will be the main page only downloading main.js and whenever you change to /yours or /mine, the respective file will be loaded with its corresponding dependencies. This should be an easy task, but angular makes it really complicated.

Lets try the obvious approach. First of all we need to change main to not load mine and yours:

1
2
3
4
5
6
7
8
9
10
11
12
define([], function() {
  var app = angular.module('myApp', ['ngRoute']);
  app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({
      templateUrl: 'templates/main.html',
      controller: 'MainController'
    });
  }])
  .controller('MainController', function() {});

  angular.bootstrap(document.getElementsByTagName('html')[0], ['myApp']);
});

Building modular apps with Angular is not an easy task. Since I arrived into an Angular project a couple of months ago I’ve been struggling with our architecture, trying to make it modular in a way that makes sense, and it hasn’t been a walk in the park.

Lets try to build an example app to see what I’m talking about. For my example we are going to have a single page app with three screens:

• Greetings screen – Contains links to mine and yours pages
• Mine – Shows a list of my stuff and has a link to greetings page
• Yours – Shows a list of your stuff and has a link to greetings page

These are the parts that will make our app:

• App module
• Greetings controller
• Mine controller
• Yours controller
• Reusable list module