Steve Ognibene is your TypeScript tutor
Welcome to the final part of this review of the Pluralsight course Practical TypeScript Migration by Steve Ognibene.
Steve has been doing professional web development since the year 2000, and specializes in SQL Server, C#, VB.NET and TypeScript.
He loves teaching and talking about all of the technology platforms he uses, and is an active contributor to open source projects.
Also in this series:
Part 3 – TypeScript Build and Test Pipeline
This episode looks at the final module from this course
TypeScript Build and Test Pipeline
Building TypeScript with Grunt and Node.js
Steve begins with an introduction to Node JS. His first reaction to it was the same as many others:
“Why would anyone want to run JavaScript on the Server?”
I have spoken to several developers who are running their entire projects in JavaScript, and they all speak very highly on Node JS. I would be interested to try this myself if a suitable project comes up, and hope to do a comprehensive ASP.NET Core versus Node JS review one day.
Both Steve and myself use Node JS mostly for downloading and running JavaScript libraries. Steve says that he found TypeScript to be a slippery slope to getting involved with Node.
Any JavaScript library or framework is something of a primer for getting involved with Node since just about everything is on NPM.
The aim for the rest of this course is to create a build script using:
We will create a cross-platform repeatable build. Even if you have different developers on Mac, Linux and Windows machines, they will all be able to run the build with just one command.
Note: There are many different solutions for achieving this and if possible you will want to pick a solution that works well with the technology that you are already using. There is a lot of choice when it comes to JavaScript frameworks.
The following alternatives do not cover TypeScript but will give you an idea of what is possible:
Gulp and Browserify: see Building Applications with React and Flux – Environment Setup
NPM Scripts and Webpack: Building Applications with React and Redux in ES6 – Environment Setup
Using React is optional for both of the above links. You can use whichever framework you like. Angular 2 is specifically designed to work well with TypeScript.
Okay, back Practical TypeScript Migration. Steve shows how to download and install Node. NPM stands for No Problematic Moustaches!
Steve recommends installing Git as well. Since the course was recorded, msysgit has been deprecated and windows users should use Git for Windows.
Steve has written a blog post on Enabling Portable Git in Node.js command prompt on Windows
We see an annoying bug in Node JS on Windows and how to workaround it. For details of the ENOENT stat bug see this StackOverflow question.
Steve is a maintainer of the grunt-ts project, which is a grunt task to manage your complete typescript development to production workflow. There is a minimalist gruntfile.js in the README.
module.exports = function(grunt) {
grunt.initConfig({
ts: {
default : {
src: ["**/*.ts", "!node_modules/**"]
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts"]);
};
If this config doesn’t make much sense, Steve explains it for you next. The strings are in the glob format
When we run Grunt with this grunt file, by default it will compile ALL the TypeScript files in our project.
Steve recommends writing grunt tasks in TypeScript, and grunt-ts is a good example of this.
If you don’t already have grunt setup, you will need to run
npm install -g grunt-cli
By the end of this lesson, you should have all of your TypeScript being compiled using Grunt.
Bundling and Minification with Grunt
Bundling and Minification is about improving your website performance.
Steve shows that the Coin Counter app requires 30 HTTP requests. We can use Grunt to bundle up and minify these files. Or more accurately, we download and run grunt-contrib-concat to bundle and minify our files.
We start by bundling the vendor libraries together, and this results in 3 few requests.
Next we bundling the coinCounter files into coinCounter.concat.js
Just so that you’re aware, here are some alternative bundling and minification solutions:
- Require JS with R.js – Require JS Dependency Injection and Module Loading.
- Gulp-concat – see Building Apps with React and Flux
- ASP.NET Bundling and Resource Optimization
- Webpack
Any of these solutions will work and you can find all sorts of conflicting arguments as to which one is best.
The most important thing is just to have a bundling and minification process for your web applications. The differences between one solution and another are very minor compared with the difference between having a solution and having no solution.
Automating Unit Tests, TSD, and grunt-ts Visual Studio Support
This lesson is how to setup your QUnit tests to be run through Grunt. We install grunt-contrib-qunit. This package uses Phantom JS for running your tests.
If you don’t use QUnit, try one of these instead:
Steve also shows how to use grunt-contrib-connect to start a web server.
We tests both passing and failing.
Steve also introduces TSD, another Node JS tools that’s complementary to TypeScript. I am some ways a Microsoft fan but I have found NPM has several advantages over NuGet.
We see how to install TSD using NPM and initialize it. This creates a tsd.json file for you.
Given any popular JavaScript library, TSD will automatically find the relevant TypeScript definition file for you! Steve shows which parameters you need to install the relevant definition file, using MikeMcl’s Big.js as an example.
To update a specific definition: tsd query jquery -a install -so
To update all definitions to the latest: tsd update -so
Reinstall definitions to versions in tsd.json: tsd reinstall -so
Finally, as well as the normal Grunt settings (src and files properties), the Grunt.ts task allows you to fetch the files and compilation settings identified in the Visual Studio project. Steve demonstrates that the “vs” property can be set to our .csproj file.
Repeatable Builds on a Team
This is the final lesson in the Practical TypeScript Migration course. We’re going to make our build repeatable by other other developer on the team.
Steve recommends setting up your source control to ignore your node_modules directory. I have also found this to be the best approach. We should also ignore:
- .tscache/
- Built/
Steve writes out the full instructions into a readme.txt file. The short version is everyone uses npm install to fetch all necessary packages, and grunt to run the entire build and test process.
There are a couple of additional packages that Steve recommends:
Finally, Steve lists some possible improvements that can be made to the build process:
- Minifying and Bundling CSS
- Minifying HTML
- Testing the minified TS files
- Getting our TS source maps to survive minification
Steve recommends David Mosher’s course Build Process, Workflows and Tooling with Grunt.js and Beyond to learn this topic in much more depth.
And we’re finished! Thanks to Steve Ognibene on producing a useful and practical guide to using TypeScript in a professional environment.
If you would like to learn even more about TypeScript with Steve, check out his other course Using ES6 with TypeScript
Zombie Code Kill 