TypeScript

Seattle Code Camp: Aurelia and TDD with TypeScript, AngularJS, and Node.js

Last Saturday I had a pleasure to speak at Seattle Code Camp. It was an amazing event, which was free. There were over 50 talks, 500 attendees, and raffle with many prizes, e.g., Microsoft Surface Pro 3!

Seattle Code Camp - Aurelia

Aurelia – the Next Generation JavaScript Framework you will love

Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity created by Rob Eisenberg, creator of Durandal, who left Angular 2 team to create cleaner and simpler JavaScript framework of tomorrow written in ECMAScript 7!

In this talk I am showing how to get started with Aurelia, and how ES7 (aka ES 2016), JSPM, System.js, babel, and gulp can make you development amazingly fast, smooth, and enjoyable.

Video

Slides

Code

You can find demo app I created during presentation on github.

TDD with TypeScript, AngularJS, and Node.js

TypeScript helps to develop and maintain large web applications. Strong typing prevents from introducing bugs, but it doesn’t mean we can give up on testing. In this talk I showed how we can use TDD for building web applications with TypeScript on the client side (with AngularJS) and server side (with NodeJS). I showed a few JavaScript testing frameworks (mocha, Jasmine), and showed a few tools that can make Web Developer’s life easier (npm, gulp, bower, tsd, karma, protractor).

Video

Slides

Code

You can find demo app I created during presentation on github.

More is coming

I will be speaking about Aurelia, and TDD with TypeScript, AngularJS, and Node.js at various events this fall. You can find more details in my speaking page.


TDD with TypeScript, AngularJS, and Node.js

On July 1st I had a pleasure to speak at Seattle Node.js meetup about unit testing and Test Driven Development with Angular.js and Node.js, using TypeScript.

In this talk I gave an overview of JavaScript testing frameworks, and tools. I also demonstrated how TypeScript can strengthen your tests by adding free unit tests (type checking) thanks to strong typing.

The demo code is available on github.

The site I created as a demo is live on Azure: tddvoting.azurewebsites.net.


Building Large Scale Web Applications with TypeScript

Yesterday I had a pleasure to speak at .NET Developers Association meetup in Redmond, about building web applications with TypeScript.

Contents

0:00:00 – Intro (about me, and my work)
0:02:35 – Overview of JavaScript today
0:04:42 – voiceCmdr demo
0:06:55 – browser as a platform: rich UI experience and games (built with HTML/CSS/JS)
0:07:57 – TypeScript intro
0:09:25 – DEMO: TypeScript 101: strong typing, classes, inheritance, interfaces
0:26:15 – DEMO: Building web app with TypeScript, npm, bower, gulp, and dst
0:51:38 – ECMAScript 6
0:54:57 – DEMO: transpiling ES6 to ES5
0:57:56 – AngularJS 2
0:58:54 – DEMO: Angular 2 app written in TypeScript
1:06:08 – Angular 2 vs Aurelia
1:11:40 – FEEDBACK please!
1:12:00 – Q&A
1:20:56 – Recommended resources to get started with JavaScript and TypeScript

Video

Slides

Code

You can find demos from presentation on github.

You can also check out my voiceCmdr library that I blogged about a few weeks ago, and demo BooksLib website that is using it.

Summary

Thank you very much to everybody for coming. If you like (or not) my presentation please send me an email or leave a comment below. I really appreciate your feedback!


Gulp – tutorial

gulp.js

Gulp is a streaming build system (aka task runner). It contains plugins, which allows you to run tasks such as TypeScript to JavaScript compilation, Less to CSS compilation, bundling, minification, running you own scripts, and much, much more.

Installation

Required: npm (Node Packaged Modules). You can install it with Chocolatey:

cinst nodejs

When you have npm, you are good to go and install Gulp:

npm install -g gulp

After installation, localize “gulp.cmd” file, and add its location to your PATH. Location depends on the way how you installed nodejs. On my one machine, where I installed nodejs using the installer, it is in C:\Users\jjed\AppData\Roaming\npm directory. On my other machine, where I installed nodejs from Chocolatey, it is in C:\ProgramData\chocolatey\lib\nodejs.commandline.0.10.31\tools. I recommend you Everything Search Engine not only for this task, but for searching all kind of files on your machine. It is ridiculously fast, and when you pin it to your task bar as the first item, you can invoke it with WIN+1.

I wish npm installation did this work (adding gulp to PATH) automatically.

Gulp Hello World

Open the Console (I recommend ConEmu as you Console on Windows), and cd into your project directory (for now it can be even empty directory).

From your project root directory run:

npm install --save-dev gulp

Create gulpfile.js file in the root of your project:

var gulp = require('gulp');

gulp.task('default', function () {
  console.log("Hello, world!");
});

Run gulp:

gulp

You should see the following result (with different time stamps and path, probably):

[21:45:32] Using gulpfile C:\dev\myproj\gulpfile.js
[21:45:32] Starting 'default'...
Hello, world!
[21:45:32] Finished 'default' after 141 µs

The default task is invoked when you run gulp.js without any arguments. You can run other tasks from default task. Below file contains hello task, and invoke it from the default task:

var gulp = require('gulp');

gulp.task('hello', function () {
  console.log("Hello, world!");
});

gulp.task('default', ['hello']);

The result of gulp run is a little bit different now:

[21:49:21] Using gulpfile C:\dev\myproj\gulpfile.js
[21:49:21] Starting 'hello'...
Hello, world!
[21:49:21] Finished 'hello' after 210 µs
[21:49:21] Starting 'default'...
[21:49:21] Finished 'default' after 8.21 µs

Using Gulp to compile TypeScript files ‘on change’

Install TypeScript (if you do not have it installed already):

npm install -g typescript

Make sure tsc is in your path.

Install TypeScript compiler for gulp.js (from your project root directory):

npm install --save-dev gulp-tsc

Create TypeScript directory, and cd into it:

mkdir TypeScript
cd TypeScript

Create simple hello.ts file:

function greeter(person: string) {
    return "Hello, " + person;
}

var user = "Anders Hejlsberg";

console.log(greeter(user));

Go to root directory of your project and create js directory (it will be output directory for generated JavaScript files):

mkdir js

Modify gulpfile.js:

var gulp = require('gulp'),
	typescript = require('gulp-tsc');

gulp.task('typescript-compile', function(){
  return gulp.src(['TypeScript/*.ts'])
    .pipe(typescript())
    .pipe(gulp.dest('js/'));
});

gulp.task('watch', function () {
  gulp.watch('TypeScript/*.ts', ['typescript-compile']);
});

gulp.task('default', ['typescript-compile', 'watch']);

Once you run gulp it will compile all TypeScript files from TypeScript directory to js directory. Furthermore, Gulp will not suspend, but it will watch all .ts files under TypeScript directory, and will recompile them every time you change and save some of them. Try it!

Prevent gulp.js from crashing by handling errors

You can notice that if some of your TypeScript files cause compilation error (e.g., because of syntax error) then gulp crashes.

In order to avoid it, you can add simple error handling function (errorLog) to gulp.js file, and call it in the typescript-compile task pipeline:

var gulp = require('gulp'),
	typescript = require('gulp-tsc');

function errorLog (error) {
  console.error.bind(error);
  this.emit('end');
}

gulp.task('typescript-compile', function(){
  return gulp.src(['TypeScript/*.ts'])
    .pipe(typescript())
    .on('error', errorLog)
    .pipe(gulp.dest('js/'));
});

gulp.task('watch', function () {
  gulp.watch('TypeScript/*.ts', ['typescript-compile']);
});

gulp.task('default', ['typescript-compile', 'watch']);

Now, Gulp will not crash, but display compilation error, and recompile files after next file change.

Using gulp.js to run batch/bash script

Let assume that you want to run some script (batch file on Windows, or bash script on Unix) after TypeScript files compilation.

First, we need to install gulp-shell plugin:

npm install gulp-shell

To keep it simple, our script will only output text “TypeScript compilation done” to the console.

Create file build.cmd in your project root directory:

echo "TypeScript compilation done"

And modify gulpfile.js:

var gulp = require('gulp'),
  run = require('gulp-shell'),
  typescript = require('gulp-tsc');

function errorLog (error) {
  console.error.bind(error);
  this.emit('end');
}

gulp.task('typescript-compile', function(){
  return gulp.src(['TypeScript/*.ts'])
    .pipe(typescript())
    .on('error', errorLog)
    .pipe(gulp.dest('js/'))
    .pipe(shell(['build.cmd']));
});

gulp.task('watch', function () {
  gulp.watch('TypeScript/*.ts', ['typescript-compile']);
});

gulp.task('default', ['typescript-compile', 'watch']);

In real-life you may want to copy all compiled files to some other directory, or do some other “your project specific” task.

Using gulp-shell you can run any command, or set of commands (concatenating them with ‘&‘ on Windows, or ‘&&‘ on Unix), e.g.:

shell(['cd c:/dev/myproj/src & build']);

Summary

Gulp is very handful tool. However it is not the only one. Its main rival is Grunt.js. Actually, Gulp was inspired by Grunt. Most of people (based on my research) prefer Gulp over Grunt. Main argument: it allows to stream results (run multiple operations on set of files), and it is less verbose (allows to do more with less configuration). Check Grunt vs Gulp comparison in this blog post, and this Steve Sanderson’s talk (starting from 30:50).

To get more of Gulp check Getting Started With Gulp, Learning Gulp, and gulp documentation.

Are you using Gulp or Grunt, or some other task runner?

EDIT: I updated the post with return statements in tasks. This informs task system that particular task is async, and prevents from occasional crashes when called from watch task.


Hi, I’m Jakub and I work for Microsoft

Blue badge

After I got my degree in August I moved to Redmond, WA to start my new job at Microsoft. I work for Azure App Platform Team. My official position is Software Development Engineer (SDE).

It has been a month since I started. So far, my team, work environment, the product and development process are great.

My team

MS team

My team (which is part of Azure App Platform) is working on the new Azure Portal. People in my team are smart. All of them. Moreover, they are really passionate about things they are doing, and they really care. I am working with Steve Sanderson, the creator of Knockout.js and one of the best technical speakers. The team is very diverse: people from many different countries all around the World, with a quite few girls among them.

My team is working in Agile.  The working culture is generally: “Get the job done”. People are in the office usually between 10am and 5pm. Some are coming later, and stay longer, others come early and leave early (there are also people who come early and leave late). If somebody feel the need to focus and don’t being interrupted then he/she is working from home, and it is not a problem.

What is the best, I am not implementing some spec written by somebody 5 levels above me. I need to implement an idea, add my contribution, suggest changes etc. When I asked a question what are the expectations from me, my lead and my manager told me that they expect me to suggest some ideas how to make the product better, how we can improve it, and what we are doing wrong. This is exactly what I was looking forward to!

Work environment

MS workspace

The building I am working in (Microsoft Building 44) is designed for Agile interactions. There are white boards everywhere. We work in Open Spaces (around 15 people per room). Microsoft is changing approach, and moving from private offices/cubicles to open spaces. What is cool, there are 3 conference rooms ‘attached’ to our Open Space (2 small, 1 big), and if somebody needs to work in peace, he/she can use one of them. If all are occupied (which does not happen very often), there are special ‘focus rooms’ (with desk and chair) in the building.

I have great machines to work on: HP Workstation Z420 (Xeon E5-1650 v2 3.5 GHz, 32 GB RAM, 128 GB SSD + 256 GB SSD + 1 TB SATA) with two 24″ monitors DELL Ultrasharp U2415, and Microsoft Sculpt keyboard and mouse. I have also ultrabook Lenovo ThinkPad X1 Carbon (i7-3667U @ 2 GHz, 8 GB RAM, 240 GB SSD). I have adjustable height desk, and very comfortable Haworth Zody Task chair.

The product

MS Azure Portal

The new Azure portal is a Single Page Metro Web Application. One of the main goals of the new portal is to make it easy for adding extensions. My team is working on the Framework, which is being used by other teams to create front-end for underlying Azure infrastructure. What is cool,  every extension is working as a standalone application in a separate iframe. Extension authors do not need to work with HTML and CSS a lot. They just use controls (e.g. list, combo box or checkbox) created by us, and communicate with them through TypeScript/JavaScript. Update of the view is performed by Knockout.js. Check Justin Beckwith’s post about the new Azure portal architecture. If you have not seen it yet, check the Overview of the new Azure Portal with Vishal Joshi and Scott Hanselman and Vishal and Scott create a new startup with the new Azure Portal. To get started with Azure, check my previous post, and get a free trial. Moreover, we need (and we appreciate) your feedback!

Technologies


MS technologies

We use HTML5 and LESS for our View layer. LESS is very handy in maintaining big style sheets.

We use TypeScript (which compiles to JavaScript). Strong typing, and abstraction over JavaScript inheritance (TypeScript classes) is very, very helpful in building large-scale application. To be honest, I do not know how we would be able to maintain the new Azure Portal using raw JavaScript.

Our main JavaScript Framework is Knockout.js. This allows us to prepare generic, reusable controls that can be used by other teams without the need of interaction with the DOM.

Our unit test framework is QUnit. For integration tests we use Selenium.

We use git for source control management. As Continuous Integration Server, we use Jenkins.

We have code review process supported by CodeFlow. It is required to have at least 2 reviews before code can be checked-in/pushed to the repository.

Building process is supported by MSBuild.

Behind the scenes, we use bunch of other JS libs, e.g. q.js, inject.js, d3.js, hammer.js or ZeroClipboard.js.

Summary

After 1 month I love it! There are many challenges, and interesting problems to solve. I am still new to the project, and I didn’t discover it entirely yet. What I can say now, I really like the people from my team, the software development process and work environment in my team.

Probably I will be writing about my work on this blog. Stay tuned!

MS sign