Writing third-party javascript
building and deploying
JSConf Budapest is a new member of the JSConf family on 14–15th May 2015. Speakers are coming from companies like Spotify, Mozilla or Etsy. Use coupon code RSTCK_BLOG to get your ticket with €50 discount.
What is third-party javascript?
Third-party JavaScript is a pattern of JavaScript programming that enables the creation of highly distributable web applications. Unlike regular web applications, which are accessed at a single web address, these applications can be arbitrarily loaded on any web page using simple JavaScript includes. — Ben Vinegar, Anton Kovalyov (Third-party Javascript)
If you missed my previous article (shame on you!) on writing third-party javascript, you can find it here: Writing third-party Javascript the integration part in a nutshell.
Preface
In this article I will use grunt and Node.js to achieve our goal. Please make sure you have Node.js installed.
(Tip: use Node Version Manager, which comes very handy if you want to test with multiple versions of Node)
Grunt all the things
Grunt is a command line tool built on top of Node.js. It helps you automate most tasks that you consider grunt work.
You can install it with:
npm install -g grunt-cliThis will put the grunt command on your system path, but will not install Grunt globally. It will look for the local version of Grunt, so you have to install it too. This is desired, as you can have multiple versions of Grunt in your system.
npm install grunt --save-dev(Tip: the use of the save-dev option will save your dependencies to your package.json file)
Where the magic happens is your Gruntfile.js — this is where you define your tasks. The following example defines a task called hello:
module.exports = function (grunt) {
grunt.registerTask('hello', function () {
grunt.log.ok('Hello world');
});
};Simply run it with:
grunt helloThat is enough for now, let’s get started with the interesting part ;)
Building the stuffz
Let’s break it down to smaller tasks:
Concatenating
As we want as few requests as possible, we will create one huge javascript file — basically concatenating all our source files into one. This can be done with (set in Grunt’s config):
(Note: you have to load all the Grunt tasks with loadNpmTasks, see it in the example Gruntfile!)
concat: {
dist: {
src: ['main.js', 'ctrl1.js'], //source files goes here
dest: 'build/lib.js' //concatenated file goes here
}
}Compressing
After the concatenating we want to make our javascript file as small as possible — uglify will come to the rescue:
uglify: {
options: {
compress: {
dead_code: true
},
wrap: true,
sourceMap: true
},
dist: {
src: '<%= concat.dist.dest %>',
dest: 'build/lib.min.js',
}
}Check out this sample Gruntfile.
Deploying the stuffz
It is time to ship our awesome piece of software — we will use Amazon’s S3 and Cloudfront for this purpose.
Uploading to S3
s3: {
options: {
region: 'us-east-1',
endpoint: 's3.amazonaws.com',
access: 'public-read',
headers: { 'Cache-Control': 'max-age=60' },
gzip: true,
bucket: 'bucketname'
}
}Invalidating on Cloudfront
Invalidating the cache on Amazon Cloudfront, so the new version will be used.
cloudfront:
options: {
credentials: grunt.file.readJSON('credentials.json'),
region: 'us-east-1',
distributionId: "YOUR_DISTRIBUTION_ID",
listInvalidations: true
}
}Fun part: notify on HipChat!
hipchat_notifier: {
options: {
authToken: "", // your authtoken
roomId: "" // Numeric Hipchat roomId
},
deployed: {
message: 'Wow, deployed!',
from: 'Wizard of Grunt',
color: 'red'
}
}Check out this sample Gruntfile.
Building and deploying — check out the full-featured Gruntfile.
Improvements
Of course, you should:
- lint/hint your code
- run tests (not just run, but do TDD/BDD)
- use environments: different configuration for deploying to staging/production
