Front-end with TypeScript Tutorial: First Some Basics – NPM, Gulp, Browserify

Posted by Bogdán Bikics on October 27, 2016

This series of posts is written with the purpose of helping people who are starting with a new front-end project, or to those who want to introduce TypeScript in their already existing JavaScript project. In This Post I am going to kick off by introducing all the basic tools involved, like Npm, Gulp and Browserify. In the upcoming posts, I will present a step-by-step tutorial to help you get started.

 What is NPM?

NPM (Node Package Manager) is a package manager for JavaScript. Initially it was exclusively for Node.js, but later it began providing packages that add new commands in the command line (like Gulp), or packages that are meant for front-end purposes. For more information see: https://docs.npmjs.com.

There are many nice packages out there. You can browse them here: https://www.npmjs.com. You can find big libraries here too like Angular, Ember or Knockout.

In this tutorial you will learn how to use NPM. In this article we use NPM 2.15.8.

NPM can also be used as a build tool, which is actually nice for smaller projects, but it can get messy later. If you do not want to use Gulp, NPM can do almost everything Gulp can do. In this tutorial we are going to use Gulp.

What is Gulp?

Gulp is a streaming build tool built on Node.js. It helps you by automating many of the things that must be done for bigger front-end projects. There are several other tools out there like Grunt, Webpack, and Broccoli. For this article we will use Gulp 3.9.1.

What is TypeScript?

TypeScript is a superset of JavaScript that compiles to plain JavaScript. It compiles to whatever version you set it to, so older browsers are also supported. It has many nice features which make JavaScript programmers’ lives much, much, MUCH easier. We will be using TypeScript 1.8.10 for this article, but Typescript 2 will work too. You can browse all the features in the TypeScript documentation.

Can TypeScript be used with plain JavaScript libraries like Knockout.js?

Yes it can. There are two ways to do this:

  • Simply use JavaScript code. In this case you don’t get a lot of the extras that TypeScript can provide. This is not recommended.
  • Use Definition Files. These files describe the shape of a given library (classes/methods/variables). This option is useful if you want code completion and compile errors when using libraries. You can write definition files yourself, but it’s better to search for them first. You can do this with Typings, a definition file manager. Similar to NPM it has a registry with the definition files that you can install.

What IDE should I use for all this stuff?

If you want to use a free IDE then Visual Studio Code is my recommendation. It is a lightweight, yet powerful IDE.

It is also possible to work with TypeScript in Eclipse, but this does require some setup. The best plugin we found is TypeScript IDE. This plugin is still being developed. Currently it provides code completion and compilations on open typescript files. In my experience, most of the other plugins made Eclipse quite slow. You also probably want to exclude some of the frontend-maven-plugin from the lifecycle, or disable ‘Build automatically’ completely.

If you (or the company you are working at) is willing to pay for an IDE, then IntelliJ Ultimate is an excellent choice. The only minor problem we encountered so far is that the TypeScript compiler is a little slow (as it is for Visual Studio Code too).

[Note: I made a point of not yet addressing Browserify. Until I needed it, I didn’t really get what it is good for. For this reason I will explain it later during the tutorial. Stay tuned!]

Coming up next:

In my next post, Minimal Typescript, we are going to install all the necessary tools, and write our first very simple TypeScript app.

Leave a Reply

Your email address will not be published. Required fields are marked *