

Welcome to part one of my multi part series on component development with Angular 2 & Patternlab Node. With web components becoming all the rage and component based frontend frameworks taking up the reigns of frontend development. I thought I’d take a look at mixing some great open source tools that will enable you to build better components more collaboratively than ever.

If you just want see/run the code for this series, you can clone it from my Github Repo





Patternlab-Node Patternlab is a tool for building component libraries ( or styleguides ) for the frontend, it encourages a high degree of heirarchal separation between design elements aka atomic design. It's available in both PHP and node versions. AngularJS 2 rc.4 version for the rest of this series. The long awaited Angular 2 now has release candidates in the wild, woop! We'll be using theversion for the rest of this series.

CAUTION! Angular 2 is still beta software so caution is advised, it’s implementation could change at any moment! Please stay locked to rc.4 for this series.

Prerequisites

Nodejs

Git

Unix command line

You’ll need the Nodejs edition of Patternlab, which you can download here.

1. Set up Typescript.

NOTE: The results of this section ( Part 1 ) are in this commit

From a terminal cd into the edition-node-gulp folder you just downloaded.

Now edit the .gitignore file and add a line with typings/ , if you plan on commiting this to git this is advisable.

Angular2 leverages Typescript for a multitude of reasons ( which I’m not going to go into in this post ), to get it set up issue the following command lines:

npm install -g --save-dev typescript tsc --init npm install --save-dev gulp-typescript typings npm install typings init typings install --source dt --global core-js --save typings install es6-promise --save mkdir source /ts

Now edit the packages.json file and add the following just before the last parenthesis:

"scripts" : { "postinstall" : "typings install" }

In the patternlab-config.json file at the root of the project add "ts" : "./source/ts" after the "js" key, under the "source" key. the file should now look like (excluding ellipses):

"source" : { ... "js" : "./source/js" , "ts" : "./source/ts" , ... }

Now, edit the gulpfile.js at the root of the project: We need to require some files:

... ts = require ( ' gulp-typescript ' ), tsProject = ts . createProject ( " tsconfig.json " ), ...

And ( in the same file ) add a gulp task for transpiling typescript …

/****************************************************** * TRANSPILE TYPESCRIPT - stream assets from source to destination ******************************************************/ gulp . task ( ' pl-typescript ' , function (){ return tsProject . src ( ' **/*.ts ' , path . resolve ( paths (). source . ts )) . pipe ( ts ( tsProject )) . js . pipe ( gulp . dest ( path . resolve ( paths (). source . js ))) })

This sets up typescript as we need it.

Now we want to test transpiling some typescript.

echo "export class Circle {}" > source /ts/circle.ts gulp pl-typescript

And you should now have a transpiled file js at: source/js/circle.js , the contents of which should look a bit like:

" use strict " ; var Circle = ( function () { function Circle () { } return Circle ; }()); exports . Circle = Circle ;

Congratulations! You can haz Typescript and Patternlab! Tune in for part two to follow shortly!