TypeScript

ConnectJS and All Things Open

Last month I had a pleasure to speak at ConnectJS and All Things Open conferences.

ConnectJS

ConnectJS 2015

ConnectJS was not only about JavaScript, but about web development in general. There was even track dedicated for UI Design and User eXperience. The most popular during the conference were talks about ES6/ES2015 and React.

I delivered two sessions:

TDD with TypeScript, AngularJS and Node.js

// video coming soon

Code

Aurelia – the next generation Framework you will love

// video coming soon

Code

I addition to my talks I attended the following sessions:

Everything I Needed to Know, I Learned in Rabbinical School (Yitzchok Willroth) – this session was about sharing knowledge, and cooperation between developers. One thing I noticed, not only at conferences, but also at local meetups in Seattle area is that many people would like to go and speak at the conferences, but “they aren’t doing anything interesting in day-to-day job and they are not expert in anything”. They should have been at this session. Yitzchok was explaining how you can help others, and engage in Open Source. Moreover, he emphasized one, simple truth: every developer has something interesting to share.

Building Web Sites that Work Everywhere (Doris Chen) – very useful overview of web compatibility problems, and recommendation of tools that can help with that, like Autoprefixer. I also liked the quote from Patrick Lauke: “The userAgent property is ever-growing pack of lies”. Doris recommended that we should prefer feature detection over relying on userAgent strings.

Re-evaluating Front-end Performance Best Practices (Ben Vinegar) – the most important lesson learned at this session is the fact that whatever you find in JavaScript books written 2+ years ago might be already obsolete. Moreover, whatever you learn today, might be obsolete tomorrow. This is definitely not a good news for developers, but we need to deal with that and when reading anything on the web – thinking for ourselves.

Video killed the Telephone Star (Ben Klang) – WebRTC is coming to the browser. In this talk Ben demonstrated web app that allows to do a video conference (his implementation of Google Hangouts in Rails).

Lessons learned with TypeScript and ES2015 (Dylan Schiemann) – it was an overview of TypeScript and ES6 based on experience working on Dojo 2 Framework – the second largest application written in TypeScript (after Azure Portal). After this presentation I talked to Dylan, and he showed me another projects his company SitePen is working on: Intern – very flexible and powerful testing framework, and Mayhem – JS Framework written in TypeScript (still under development).

Functional Programming Basics in ES6 (Jeremy Fairbank) – tips&tricks you can do in JavaScript(ES6), but you cannot in OO strongly typed languages like C# or Java.

Lessons from Open Source @ Scale (Christine Abernathy) – Facebook has over 300 repos in github (after this talk I checked how many Microsoft have – almost 300). Christine explained how they help community by delivering Open Source, and how community helps them by contributing to their software.

Introducing Trix (Javan Makhmali, Sam Stephenson) – Javan and Sam created web based text editor, and they open sourced it right after this talk.

The rise of “API” first applications (Travis Tidwell) – this talk was about Micro Services, and modern applications architecture where we have multiple, independent endpoints responsible for one functionality each.

It Was Like That When I Got Here (Paul M. Jones) – it was a great talk about approaching legacy applications, and refactoring techniques. I enjoyed it even despite the fact that Paul was using PHP examples…I actually felt a bit sentimental as PHP was a language that get me started with Web Development when I was back in middle/high school 🙂

All Things Open

All Things Open 2015

All Things Open is one of the largest Open Source conferences in the United States. This year there was over 1700 attendees, and 13 tracks!

I gave a talk about TDD with TypeScript, AngularJS, and Node.js – the same as at ConnectJS.

On a day before the conference there was 5k run/sightseeing event at the evening. It was exactly what I needed before 2 days of seating. Kudos for organizers 🙂

Most of my time during the conference I spent in the room with front-end related sessions. Carina C. Zona explained problems with artificial intelligence and machine learning – Consequences of an Insightful Algorithm. Seth Vargo made an overview of Vargant – product that allows to create and configure universal development environment for every developer in the team. Christian Heilmann was encouraging people to learn JavaScript, ECMAScript 6, and to stop supporting old browsers, such as IE8, that has security vulnerabilities. Yehuda Katz explained how he and other contributors of Ember.js created version 2 without breaking a lot of APIs from version 1, and thus allowing developers for a smooth transition. I also liked the session about Netflix architecture by Andrew Spyker. I wish Andrew had more time to explain details more deeply. The surprising takeaway is that Netflix has 3x of everything. Which means – for every server, service and API they have additional 2 redundant.

The most widely commented session at the conference was keynote by Mark Russinovich. I was pretty surprised that people were surprised by Microsoft doing so much Open Source. For me this is a known fact for a few years now, but it seems that the rest of the World doesn’t know yet, and still see Microsoft as closed-source corporation that want to lock you in their technology.Well…that’s not true anymore. I also had a pleasure to met Christian Heilmann – former Evangelist of Mozilla who joined Microsoft with one mission: kill the Internet Explorer. I really enjoyed his session on ES6, and keynote.

At the speaker dinner I had a pleasure to seat at the table with Andrew Spyker from Netflix, Michael Laing of New York Times, Christine Abernathy from Facebook, and Eric Martindale – entrepreneur from Silicon Valley. We had interesting conversation of the future of Netflix, Internet Television, bitcoin, and digital newspapers. I also learned that New York Times is the only news paper that is profitable in the transition from paper to electronic.

At All Things Open I finally got awesome Ninja Cat stickers:

ThinkPad X1 stickers


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.