Effective development workflow for Angular 2.0 and Typescript

If you want to start learning Angular 2.0 and Typescript there are a lot of information available for learning the basics. But if you have some requirements on your development environment and want to use continuous integration then you need something more.

My requirements are:
  • A package manager to deal with frontend modules
  • Write code in a modular way and module resolution should be handled automaticly
  • Hot-reloading of typescript in my local environment
  • The code must transpile down to ES5
  • I don't want to write or maintain build scripts
  • Continuous integration: run unit-tests written in typescript and bundle the project in a single app.js file (ES5)
So is this possible? Yes it is! If we choose JSPM as our package manager and configure Systemjs to fetch all modules.


Before starting make sure you have NodeJS and NPM installed, Node needs to be version 4.x or greater. I also assume some basic knowledge about Node and NPM in this blog post.

JSPM - another package manager?

Yes, JSPM is one more package manager. But it is first when combined with SystemJS that it becomes powerful. What is SystemJS then? The following description comes from its github repo: "Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS."

So we can use several types of modules, and SystemJS loads them as requested into the browser.
In order to use JSPM and SystemJS you need to install jspm and initialize an empty project, this can be done with the following commands:
npm install jspm -g
jspm init -y
Now you can enable SystemJS by a simple script in your index.html:
<!doctype html>
  <title>My First Angular2 App</title>
  <script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
    System.import("app").then(function(){ console.log("running") });
JSPM manage packages which needs to be downloaded, but it also updates a configuration file which SystemJS use to map module imports to physical files. This means that the workflow for a developer becomes very easy. For example if I'm using twitter bootstrap for styling I probably want some native Angular2 directives as well. The ng2-bootstrap project is available for this and I only need to perform two simple steps to add it to my application:
1. jspm install ng2-bootstrap
2. import {Alert} from 'ng2-bootstrap/ng2-bootstrap'; //import a component in Typescript

Basic setup

By following this blog by Mario Brendel a basic project can be configured. I've created a seed project here which I will extend in this blog post.
Clone the repo and follow the readme instructions to setup the project in your local enviroment.
The basic setup provides a jspm-enbabled project with hot reloading and typescript support, and we can use the bundle program which jspm includes to create a ES5 version of our application. 

Loading other assets via JSPM

When writing enterprise applications it is common to write stylesheets and html templates as external resources and these must also be bundled before we can deploy our application to a web server.
We don't want to use templateUrl to link in our templates, since that is internal to Angular and nothing that systemjs understand. Instead we should import our templates as we do with .ts files and assign the import to a string variable, this way the template will be included when we create our bundle.
First start by installing the systemjs text plugin:
jspm install text
Now we can import templates and add to our component like this:

import {Component} from 'angular2/core';
import template from './app.component.html!text';
import stylesheet from './app.component.css!text';

  selector: 'app',
  template: template,
  styles: [stylesheet]
export class AppComponent {
constructor() { }
Notice this exclamation mark in the syntax, now we can keep our external resources and they are included when running or bundling our application.

Configure a test runner

We are going to add support for writing unit tests of our angular code by using karma test runner and PhantomJS. We will use the plugin karma-jspm for this, so we can manage dependencies in the same way as we do when running our application.
Add the following npm dependencies:
npm install jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jspm karma-phantomjs2-launcher phantomjs-prebuilt traceur --save-dev
Now create a karma.conf.js in the root folder:

// Karma configuration

module.exports = function(config) {
  // base path that will be used to resolve all patterns (eg. files, exclude)
  basePath: '.',
  files: [
  // frameworks to use
  // available frameworks:
  frameworks: ['jspm', 'jasmine],
  //list of files / patterns to load in the browser
  jspm: {
     loadFiles: [
     serveFiles: [
  preprocessors: {},
  proxies: {  // avoid Karma's ./base virtual directory
    '/app/': '/base/app',
    '/jspm_packages/': '/base/jspm_packages/',
    '/typings/': '/base/typings/',
    '/tsconfig.json': '/base/tsconfig.json'
  // test results reporter to use
  // possible values: 'dots', 'progress'
  // available reporters:
  reporters: ['progress'],
  // web server port
  port: 9876,

  colors: true,

  // level of logging
  // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG,
  logLevel: config.LOG_INFO,

  // enable / disable watching file and executing tests whenever any file changes
  autoWatch: false,
  // start these browsers
  // available browser launchers:,
  browsers: ['PhantomJS2'],
  // Continuous Integration mode
  // if true, Karma captures browsers, runs the tests and exits,
  singleRun: true,
  phantomjsLauncher: {
    // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
    exitOnResourceError: true

The files array is important here, since phantom requires traceur for transpiling. We also need the angular polyfils. Karma is now configured to run all tests in the app folder, with the file extension spec.ts.

Run all tests by executing:
karma start karma.conf.js
When starting to write tests we will use matchers, for example:
but typescript cannot find the type definitions for the matchers, so we need to add them. This can be done by using the npm module typings:
npm install -g typings
typings install jasmine
When the typings have been installed, we are ready to write jasmine tests, and we can run them using karma. 

Run scripts via npm

In order to keep the scripts we need as clean as possible I will use npm and the scripts section from package.json, update the scripts section so it looks like this;

   "jspm": {
      "dependencies": {
         "angular2": "npm:angular2@^2.0.0-beta.13",
         "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.5.6",
         "ts": "github:frankwallis/plugin-typescript@^4.0.5"
      "devDependencies": {
         "babel": "npm:babel-core@^5.8.24",
         "babel-runtime": "npm:babel-runtime@^5.8.24",
         "core-js": "npm:core-js@^1.1.4"
   "devDependencies": {
      "angular2": "^2.0.0-beta.13",
      "chokidar-socket-emitter": "^0.5.1",
      "es6-shim": "^0.35.0",
      "http-server": "^0.9.0",
      "jspm": "^0.16.32",
      "open": "0.0.5",
      "reflect-metadata": "0.1.2",
      "rxjs": "5.0.0-beta.2",
      "zone.js": "^0.6.9"
   "scripts": {
      "start": "node server.js",
      "test": "karma start karma.conf.js",
      "build": "jspm bundle-sfx app build/app.js",
      "presetup": "npm install -g jspm typings karma-cli",
      "setup": "npm install && jspm install && typings install",
      "setup-ci": "npm install && jspm install && typings install"
Now a build job could be a bash script which runs:
npm run setup-ci
npm run test
npm run build
This assuming your ci server have node installed with jspm, typings and karma-cli installed globally.

Setting up the project for the first time and starting the application is also easy using npm:
npm run setup
npm start
Maybe you notice the presetup in the scripts section, npm scripts have pre and post hooks. This means if you name a script setup you can also add scripts named presetup/postsetup which will run before and after the actual script.


With this project setup we can avoid many problems with maintaining build scripts and we don't have to think much about how scripts are loaded into the browser, SystemJS take care of that for us. Also notice that this project setup is not tightly coupled to angular. If we want another setup with react for example, we just have to install the dependencies for react via jspm. We simplify the build process by using npm scripts only, no need for gulp, bower or grunt. But what if we have more complex scripts which needs to be executed during a build process? We can still use npm for that, you can add a bash script to your project and refer to that script in the scripts section of package.json. With npm, jspm and systemjs we have all the tools we need for a modern web development workflow.


Knowledge- and career development as a perk

Some organisations may have observed that employees with high market value are over-represented in turnover. On the other hand, brilliant people seem to attract other of the same kind.

I believe that maximizing the market value of each employee in an organization would actually attract even more high-end people rather than making everybody leave for other companies.

A company with this belief among its core values would proudly offer their employees knowledge- and career enhancing perks...

Läs hela inlägget på Markus Örebrands blog.


Silence and shortcomings

As agile practitioners we must understand that members of our team, from time to time, will find themselves in trouble that they will find very hard to admit due to perceived personal shortcomings. They need to be offered a safe way out of this situation without having to loose face. This is how we rebuild trust within the team.


Barnhack i Strängnäs

Barnhack i Strängnäs med Omegapoint

Vi på Omegapoint tycker det är kul med datorer och programmering; och vi vill gärna sprida det intresset. Dessutom tror vi att det i framtiden kommer att vara nyttigt att förstå hur datorer fungerar även om man inte själv sysslar med systemutveckling.

Så, för att sprida intresset bland barn stödjer vi evenemanget Barnhack i Strängnäs som går av stapeln 21:e september. Tillfället hålls av vår Dan Bergh Johnsson, engagerad föreläsare och bland Sveriges bästa utvecklare enligt branschtidningen Computer Swedens återkommande listor. Vi samarbetar med Facienda i Strängnäs som står för lokalen.



Mapping Multiple Accounts to a Single Smart Card

I was recently pointed to a well-written blog article that sparked a bit of interest here in the PKI lab:

In a smart card enterprise environment, you still have administrators or other users with privileged accounts. How do you eliminate the need to issue separate smart cards to these accounts? The article describes how to map a single certificate to different accounts. Thereby one certificate could be used to authenticate two different accounts using the same private key and the same PIN on the same smart card. 

Now this is an interesting and unconventional way of solving the need for having several accounts connected to one smart card. However this “user impersonation” presents the standard trade off between usability and security:
  • Pro: having a single smart card is convenient for administrators
  • Con: this presents a lower level of security
The back-end configuration and the minimal hassle of configuring a GPO is not an issue in an enterprise environment, but the fact that you have one smart card with a single certificate, a single private key and therefore a single PIN code, is a security concern and could constitute a security policy breach.

So how do we solve this problem, while staying secure and compliant? - Our recommendation would of course be the standard way, which is to have one certificate per connected account on the smart card, but with a twist; multiple certificates, individual PINs, one smart card

  1. No change to the back-end
  2. Security and compliance maintained
  3. You can have separate polices on individual accounts. Examples:
    • Individual PIN with individual PIN policies and requirements. 
    • The certificates can be issued from separate CAs and have different characteristics such as key length. 
  4. The users don't have to enter their user names when logging in.
  5. If a user’s role changes, individual certificates can be revoked. Say for instance an administrator is promoted to manager; his/her admin certificate can be revoked while keeping the user identity intact.
This is all taken care of in a swift way if you use a modern smart card management system, like vSEC:CMS from Versatile SecurityIssuance of certificates is usually done during the card issuance processConfiguring issuance of certificates to different accounts onto the same card, which is called Roles, is done in the following way.

The PKI team at Omegapoint has put together an offer for an entry level system: products and services. The Omegapoint PKI-Smart Card Offer is available here.

Peter Swedin
CTO Omegapoint Inc.


Java and the Machine

För några år sedan så stagnerade den tidigare konstanta ökningen av klockfrekvensen för nya datorers CPU. En fysisk gräns var nådd och därför började istället antalet kärnor att öka. Problemet med detta är att väldigt få program kan utnyttja flera kärnor på ett bra sätt och därför har dessa extra kärnor ofta ingen effekt alls.

Martijn Verburg framställer i sin presentation ”Java and the Machine” problemet med flera kärnor och de lösningar som han ser på problemet. Dom flesta program som i dag hanterar trådar använder volatile eller synchronized för att hantera delat minne mellan trådarna. Problemet är att dessa lösningar inte genererar någon synlig prestandaökning enligt Martijn. Den riktiga boven är det delade minnet. Det tar alldeles för lång tid för kärnorna att lämna sin närmaste cache för att gå ut till det delade minnet och sedan tillbaka.

Så vad ska man göra? Använd java.util.Concurrent så mycket som möjligt. Martijn föreslår även sun.misc.Unsafe men varnar samtidigt starkt för hur farligt det kan vara.

Den stora utmaningen framöver ligger i att utveckla algoritmer som går att parallellisera fullt ut, utan lås och delat minne. Först då kan man utnyttja flera kärnor på ett bra sätt.  

/Christoffer Berglin


Presentation: The web performance testing toolbox

Tobias från Aftonbladet gör snabbt en djupdykning i de verktyg som används för prestanda-tester. yslow och pagespeed är tydligen väldigt användbara. Ett diagram som ser ut som vattenfall visar alla beståndsdelar i ett anrop. Ett diagram med många avbrott tyder på att det finns ett problem. Jfokus sida lider uppenbarligen utav problem med för många twitter följa-knappen. Google analytics och critical path explorer är andra bra verktyg även om den första kan lida ut av dålig internet förbindelse för enstaka mätningar och den sista verkar inte vara helt färdigt. Renderering kan ses som en källa till problem men UI kan vara en annan.

Tobias avslutar med att ta upp alla länkar som kan vara användbara som finns på hans blog sida också.
Sammanfattningsvis är det en bra teknisk presentation som får en att känna bättre rustad inför prestanda problem på webben.

The Wearable Application Server and Other Adventures in Software Engineering

IBM är ju en av världens största mjukvaruleverantörer och det känns självklart att det borde komma några intressanta nya saker från de också på Jfokus.
En trevlig tjej som Holy Cummins från Ibm läste flera citater från diverse författare genom tiderna innan hon kom fram till några nyheter.
Och visst är det häftigt att app.server gjort en resa från någonting som behöver stora servrar att köras på till att kunna starta på ca 10 sek på en android padda.
Lite mer än så tar det på en android telefon som har ett par år på nacken. Hemligheten heter OSGI och låter det möjligt att skala bort eller lägga till moduler som
brukar finnas på en WAS som JAX-RS, JPA etc. Och visst är det häftigt att veta att OSGI har blivit såpass mogna att det används även på en BMW 5-serie.
Sedan så kom det några extremt underhållande scener då Cummy testade sin applikation på Rasbery PI som mäter temperatur och använde både en strumpa en mössa och en pälsmössa.
Sedan så kom det inte så mycket mer tyvärr..
/Alexander Lvov

NetFlix on AWS

NetFlix baserar alla deras vm-imagear på en "Base AMI" med Tomcat, Jetty, log-rullningsdemoner o likn, dvs det som är "den stabila plattformen". I en bisats nämner Carl Quinn att det är "veckans Base-AMI"; alltså, de uppgraderar någonting i sin "stabila plattform" typ varje vecka. Vilken skillnad mot Stororganisationen XYZ som ligger kvar på Java 1.4 för att det är den senaste som verifierats i deras interna certifieringsprocess.

Responsive Web Design

Att det ska vara så svårt att få webb-siter att passa på telefon och på webb! Med otrolig elegans visade Joakim Kemeny hur mycket bättre det kan bli med några tämligen enkla steg - dvs enkla när han förklarar dem. Uppskattar verkligen hans förmåga att på ett enkelt och strukturerat sätt saker som uppenbarligen är svåra att få till. Önskar att alla webbsidor jag surfar till regelbundet lyssnade på honom.

Om Omegapoint

Omegapoint AB är ledande rådgivare och experter inom Systemarkitektur, Säkerhet och IT-ledning.

Twitter uppdateringar

Omegapoints kvitterström:

    Andra Omegapointbloggar