Category Archives: SPA

Bower vs JSPM

We are in the middle of a major shift in the web development world, and seeing the greatest change in about 15 years with ECMAScript 2015 (ES6) just released and and 2016 (ES7) on its way. Because of this rapid change, a myriad of tools are popping up every day and it can be hard to keep up with all the fancy acronyms.

This post explains the differences between the Bower package manager and JSPM or JavaScript Package Manager.

Package Manager?

A package manager lets you search for and install software packages that your application depends on. So there is usually a web site, like bower.io/search that shows you what kind of packages the manager has available, and you can also use the CLI (command line interface) to search for packages.

When you install a package, you can choose to save what package you installed to a config file, so your app will remember its dependencies.

Bower vs JSPM

So what is the difference between Bower and JSPM? The short answer is that while both managers let you install and update dependencies, JSPM is more future oriented. It automatically downloads SystemJS, which is a universal dynamic module loader that loads both ES6 modules, AMD, CommonJS and global scripts and maintains config.js to help SystemJS know where to find the dependencies. This StackOverflow question has further details.

Watch this recording from the London React Meetup where Jack Franklin talks about SystemJS and demonstrates how it works:

Going from Angular to Aurelia

I’ve started experimenting with Aurelia, the newest JavaScript MV* kid in town. Aurelia is created by Rob Eisenberg, who has 10 years experience building frameworks. He worked on the Angular for a while, but ended up being known as the guy who quit Google. 

I had the privilege of speaking with Rob at NDC 2015 before his talk on Aurelia, and I got a good impression of Aurelia. Rob also spoke well of his former work place at the Angular team, which speaks of character.

At work we started experimenting with Angular for rebuilding our dinosaur PowerBuilder software for the modern web as a SPA and we recently finished a prototype that uses Angular 1.4 and ASP.Net MVC. We made some conclusions:

  • Angular has a beautiful logo
  • Angular 1.4 is not (!==) Angular 2.0. The latter is a complete rewrite
  • Angular has a steep learning curve
  • Angular has quite vast and broad support in the community

Aurelia

So you want to learn Aurelia too? Aurelia wants to stay as close to the standards as possible. It’s written with JavaScript, so it lets you wirite ECMAScript 6 and 7 (using a transpiler lilke BabelJs) and it tries to stay out of the way so your code is not saturated with the framework’s opinions so much.

Start with the following two videos, which I find to be companions as one speaks of ECHMAScript 6 and 7 and the other is an introduction to Aurelia.

Rob speaking about ES6 at NDC 2015

Rob speaking about Aurelia at NDC 2015

Getting started

Then head on to the getting started section of aurelia.io and go through the tutorial. Also watch the introduction video at the front page of aurelia.io.

Update

Also have a look at this Aurelia blog post that compares Angular 2.0 code to Aurelia code: http://blog.durandal.io/2015/03/16/aurelia-and-angular-2-code-side-by-side/ 

Configuring jspm with Github

jspm.io is a frictionless browser package manager. If you haven’t heard about package managers, they are nifty little tools that organize the packages your software is depending on. So instead of downloading the same favourite script package every time you need it, you can configure the project to depend on the script and then stay in sync with the latest version using jspm install.

However, when downloading packages from github, there is a limit as to how many requests you can issue. You’ll quickly get the message github rate limit reached. To fix this do:

  1. Go to github.com, login and click settings
  2. Click Personal access tokens and then Generate new token
  3. Copy the token and start command line inside the project folder
  4. Type jspm registry config github

During the config process, you will be asked to enter the token. Do so, and you’re good to go.

2015-06-23 08-00-03 - C__Windows_System32_cmd.exe