javascript

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.


How top 10 programming languages work

TIOBE index: July 2014

I am programming for more than 10 years. I realized that, when I found my first, personal home page (written in PHP) on my hard drive. Some files have last modification date: May 2003. Since that time I was working (or playing) with 9 of top 10 programming language from TIOBE Index list. As I mentioned, I started with PHP, then I learnt a little bit JavaScript (to create fancy menus or ‘secret pages’ on my website). In high school I started learning C++. At the University I learnt C, more C++ and Java. Then I learnt C# on my own, and it is still my favorite language. Along with C# I learnt ASP.NET and T-SQL (to be able to create websites with databases). I also learnt Python and Objective-C. Former became useful when I started my Research Assistant Job.

More experience I gain, more interested I am in how things work underneath the code level. In this post I want to provide short description of the Top 10 programming languages (by TIOBE Index), how they work and their super short history.

PHP

Interpreted language created by Rasmus Lerdorf. Originally, collection of Perl scripts, rewritten to C for performance reasons, ability to work with web-forms and communicate with databases. Most popular interpreter: Zend Engine. Since PHP 4, the PHP parser compiles input to produce bytecode for processing by the Zend Engine. Facebook developed two PHP interpreters: HipHop (transforms the PHP scripts into C++ code and then compiles) and HipHop Virtual Machine (converts PHP into a high-level bytecode, which is then translated into x86-64 machine code dynamically). Recommended book: PHP and MySQL Web Development.

JavaScript

Dynamic, interpreted and prototype-based language. JavaScript is superset of ECMAScript standard. Usually used as part of web browser, but also in server-side (Node.js) or even for desktop and mobile application development. Current browsers perform just-in-time compilation. There are many JavaScript engines (interpreters): Rhino (written in Java), SpiderMonkey (written in C, first JS engine), V8 (written C++, by Google, used in Google Chrome), Chakra (performs JIT compilation on a separate CPU core, parallel to the web browser; created by Microsoft, used in Internet Explorer) etc. Recommended book: JavaScript: The Good Parts.

C/C++

C is compiled, static type language created by Denis Ritchie. It influenced many other languages, e.g.: C++, C#, Java, JavaScript, Objective-C, Perl, PHP, Python, and even Unix’s C Shell. C++ is nearly a superset of C, with object oriented features inspired by Simula language, created by Bjarne Stroustrup. C and C++ are compiled to machine specific code, thus platform specific compiler is needed. Most popular compilers: GCC and Visual C++. C++ evolve, Modern C++ (currently C++ 11 and vNext: C++ 14) introduces: smart pointers, for each (range for), lambda functions and much more. Recommended book: Ivor Horton’s Beginning Visual C++ 2012The C Programming Language (by Brian Kernighan and Denis Ritchie)  used to be one of the most popular programming books ever.

Java

C-based language created by James Gosling, which introduces automatic memory management by Garbage Collector. Java is compiled to bytecode (.class files), which runs on JVM (Java Virtual Machine). Its main design goal is “Write Once, Run Anywhere” (WORA). The same code can be compiled to the same bytecode on different machines. Then JVM (platform-specific) translates bytecode to particular machine code during run-time (Just-in-Time (JIT) compilation). Java applets can run in web browser. My personal recommendation for Java book is Hortsmann’s Core Java Volume I – Fundamentals and Volume II – Advanced Features. Well known Java book is Bruce Eckel’s Thinking in Java.

C#

C# is Microsoft’s version of Java language created by Anders Hejlsberg. However, C# is closer to C++ in case of design and syntax. It is compiled to Intermediate Language (equivalent of bytecode in Java) and runs on Common Language Runtime (equivalent of JVM). C# also uses Garbage Collector. It has many features not existing in Java like rich native interoperability, query language (LINQ) or dynamic type. For more, check Comparison of C# and Java. Book for quick start: Sams Teach Yourself Visual C# 2010 in 24 Hours recommended by Eric Lippert (former developer of C# compiler). To dive in, check: C# 5.0 in a Nutshell: The Definitive Reference by Joseph Albahari and Ben Albahari, C# in Depth by Jon Skeet and CLR via C# by Jeffrey Richter.

Python

Dynamic, interpreted language, created by Guido van Rossum. Most popular implementation: CPython (implemented in C). It compiles Python programs to intermediate code (.pyc files) and runs them on Virtual Machine. There are many other implementations, e.g. Jython, which compiles Python to Java Bytecode (.class files). Python is much more expressive language than C or Java. Some constructs, which needs 10 lines of C code or 3 lines of Java code, requires only 1 line in Python (check reverse words example in my post about Python). Python uses whitespace indentation, rather than curly braces or keywords, to delimit blocks. To get started I recommend Google’s Python Class (videos section) created by Nick Parlante. Other resources: Python tutorial and Dive into Python. You can also check my post Python jump start for more details.

Objective-C

Strict superset of C language with object-oriented capabilities inspired by Smalltalk. Every C program can be compiled by Objective-C compiler, C code can be included within Objective-C code. Most popular compilers: Clang and LLVM. Instead of calling methods (like in C++: obj->method(param)), messages to objects are being sent ([obj method:param]) and resolved at runtime (not at compile time like in C++). There is no Garbage Collector (which works at run-time) in Objective-C, but instead Automatic Reference Counting (compile-time feature) is used. Objective-C is the main programming language used by Apple for the OS X and iOS. However, in this year Apple announced plans to replace Objective-C with new Swift language. Resources to learn Objective-C can be found in my other post.

Transact-SQL

Declarative language for managing data held in a relational database management system (RDBMS). Created by Microsoft (for MS SQL Sever), T-SQL is an extension to SQL, which makes it Turing complete. It adds to SQL: procedural programming, local variables, functions for string and date processing, mathematics etc. and allows FROM clause in DELETE and UPDATE statements (which allows joins to be included). T-SQL (and SQL) query differs from program in such a way that they just tell what to do, not how to do that. Figuring out how to execute query is a role of query analyzer. Check Understanding how SQL Server executes a query.  To learn T-SQL, you should learn SQL first. Recommended tutorial: T-SQL Step by Step Course (video tutorial). Recommended books: Itzik Ben-Gan’s Microsoft SQL Server 2012 T-SQL Fundamentals and other his books.

(Visual) Basic (.NET)

Compiled language created by Microsoft. Compiles to native language or P-Code and uses the Microsoft C++ compiler to generate the executable. It derives from BASIC. Similar to Python: tabs and new lines are used to delimit blocks. VB (under Visual Studio) allows to create GUI using drag-and-drop technique. Last version (VB6) was released in 1998 and is abandoned in favor of VB.NET, which introduces many features (present also in C#), but still supported, even on Windows 8. Check Comparison of VB and VB.NET. Both (VB.NET and C#) run on the same run time (CLR). More details can be found here. Recommended tutorials to get started: Visual Basic Fundamentals: Development for Absolute Beginners by Bob Tabor and Visual Basic .NET Tutorials. Good reference is Visual Basic at Wikibooks. To get VB syntax highlighting in SublimeText, this package works.

Summary

I read about all 10 languages in Wikipedia before writing this post. I was surprised how much I could learn in 5-10 minutes reading. I don’t know why, but I feel much better now, when I refreshed and organized my knowledge. If you want to start learning about new programming language, I recommend you to read about it on Wikipedia first. Even more, read about all languages you are using now on Wikipedia as well. It gives you great, high-level overview. Now, Wikipedia will be my start point of research about “some new thing”.


The Story of dotNetConfPL

It is all about people and cooperation!

Long story short

April 25-26 – dotNetConf took place, online conference for .NET developers, organized by Scott Hanselman and Javier Lozano

April 27 – I text Pawel Sawicz, that we can organize something similar with Polish speakers and name it dotNetConfPL, he said: “it’s a good idea”. (motivation++)

April 28 – Pawel told me that Michal Franc is also interested and we created google doc to write down ideas and todos. (motivation++)

May 24 – We ask Scott Hanselman whether we can use dotNetConfPL as a name of the conference (because it’s very similar to name of his conference). He and Javier Lozano confirmed in the same day and wished us good luck. (motivation++)

June 6 – We sent e-mail to Maciej Aniserowicz, with a proposition to be a speaker at our conference.

June 7 – He responded: yes (we had first speaker!). (motivation++)

After that, we were inviting rest of speakers and most of them accepted our invitations. We really appreciate this, because they didn’t get any benefits from that.

July 14 – We announced dotNetConfPL on facebook and gain almost 50 registrations for the event within 1 hour! (motivation++)

The week of the conference

A few days before the conference we did initial testing with speakers. To check, whether their microphone, resolution, etc. is set properly. Sometimes we had issues with Google Hangouts. Solution for that was simply disconnect and create a new ‘hangout’. Our initial plan was to make only 1 hangout for entire conference, because each one has different link. We wanted to avoid forcing people to refresh the website or use of SignalR. However after that, we decided it will be better (safer and more flexible) to create separate ‘hangouts’ for each speaker and update link using SignalR.

Website for conference was created in ASP.NET MVC framework. The SignalR+CounchDB feature was implemented day before conference. After the conference I found interesting file in our solution:

dotnetconfpl - code

It is worth to mention that during the conference I was in Manhattan, KS, while Pawel and Michal were in Wroclaw, Poland. The image below, is my Command Center. ThinkPad X220 is connected with 2 monitors and through it I am connected to speakers. On MacBook I am connected via Skype with Michal and Pawel. On Surface I have live streaming (about 30 seconds delay) to be sure everything is working fine. The only issue I had, was not enough ears. I had only two: in one I was connected to the speaker, second – Michal and Pawel, and if I had third, I would be able to track the live streaming 🙂

dotNetConfPL - center

Sessions

All sessions were in Polish. If you don’t speak Polish, you can mute the sound, play this in background and watch 🙂 You won’t get full experience, but still can get a lot from each session!

What is cool, all of them are for beginners and non-beginners in the same time. Which means, everybody will learn something from each session. Additionally: all of them are in HD (720p). Google enabled it by the end of August.

Maciej Aniserowicz: Unit testing in .NET

Maciej shows TDD live example. From nothing to well-tested communication with external API.

Filip Wojcieszyn: scriptcs – C# on diet

Filip shows how to use C# in Console and/or in SublimeText.

Jakub Gutkowski: JavaScript for C# developer

Jakub shows differences between C# and JavaScript, and language flavors every developer should be aware of, which may cause hard to track bugs.

Tomasz Janczuk: Node.js, Edge.js and Windows Azure

This session blew my mind (and not only mine). Edge.js allows you to mix Node.js, C#, F#, IronPython, PowerShell and T-SQL code in one file!

Maciej Grabek: Windows Phone 8 Tips & Tricks

Maciej shows set of useful(8) tricks for WP8 developers. From displaying helper-grid during development, to how to get more ratings for your app.

Summary

Everything went well. We didn’t have any problems with streaming (thanks Google Hangouts) and website (thanks Windows Azure and SignalR). I noticed that sometimes, on my Surface RT, IE11 wasn’t refreshing the link. But, come on…it’s IE, so we can ignore it 🙂

We had room on JabbR for discussion and ask questions to speakers. For a few minutes, even David Fowler (one of SignalR developers) visited it.

I am very glad that many people attended the conference. We had more than 600 registrations, almost 100 people in JabbR room and around 100-200 online viewers. But many people were watching the conference together, and in this case 1 online viewer = more that 1 physical viewers.

dotNetConfPL - atCompany
dotNetConfPL - pizza

Thank you very much for all speakers! You did a great job guys, all sessions are international level!
Thanks to Michal and Pawel for organizing this conference with me.
Thanks to Scott Hanselman and Javier Lozano for inspiration.
And…thank you very much for all of you who were watching the conference and spreading the news!

EDIT:
Short list of tools/technologies we were using for the conference:

  • Google Hangouts
  • ASP.NET MVC
  • SignalR
  • CouchDB
  • Windows Azure (to be able to scale the instance, depends on the number of users)
  • Google Docs (as a database for most important information)
  • Trello (for tasks management)
  • AppHarbor (as test server)

dotNetConfPL – online conference for .NET developers

Together with Michal Franc and Pawel Sawicz we are organizing online conference for .NET Developers: dotNetConfPL. It will take place on October 12 (3pm-10pm UTC+2), on the Internet! We have many great speakers and hot sessions.

Attendees will be able to ask questions through dotNetConfPL2013 room on JabbR.

Today, we have over 500 registered users! Additionally, during the conference we will give away 6 ReSharper licenses (thank you JetBrains).

Registration is not obligatory, but only registered users will have chance to win ReSharper licenses.

See you there!


Single Page Apps (SPA): Rich Internet Apps with HTML5 and Knockout

A rich Internet application (RIA) is a Web application that has many of the characteristics of desktop application software.

We used to create Rich Internet Applications in Silverlight. Now, JavaScript frameworks (e.g. Knockout, Angular) are getting more popular for such purpose. Everything because of HTML5, which combined with them can easily provide nice development environment and rich experience.

However, all of those frameworks just take advantage of AJAX calls. So, what’s big deal?

There is a few reasons. First one is the fact, that HTML5 data-* attribute allows to bind variables to HTML elements. We do not need to select them using id or class attributes. Another reason is variety of frameworks, which makes all of those AJAX calls behind the scenes. Additionally they do lot of other work such us serializing, models binding etc. They are just higher level of abstraction than jQuery.

KnockoutJS

One of the most popular JavaScript Framework is Knockout. It applies MVVM pattern. Its key features are:

  • Declarative bindings (easily associate HTML elements with model)
  • Automatic UI Refresh (when data changes)
  • Dependency Tracking (chains of relationships)
  • Templating (easily generates UI depends on model data types) – e.g. we can use for loops in HTML

KnockoutJS is open source framework, created by Steve Sanderson.

If you want to get started with SPA I recommend you knockoutjs.com website and John Papa’s series at Pluralsight.net: Building HTML5 and JavaScript Apps with MVVM and Knockout and Single Page Apps JumpStart (in this course John is taking advantage of various JS libraries to create consistent Single Page Appliation).

The biggest advantage of all JS libraries from my point of view is the possibility to do more (functionalities) with less (code). In other words: avoid rewriting boilerplate code.

EDIT: You should also check John Papa’s HotTowel project template for Visual Studio, which gives you great start point for building SPA. It contains many JS libraries (e.g. Knockout and Durandal) for Rich Internet Apps development. More info on John’s blog. Thanks to nilphilus and Piotr Ptak for mentioning about it in comments.