Writing third-party javascript

building and deploying

Gergely Nemeth
Javascript and the server
3 min readFeb 18, 2014

--

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:

This 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.

(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:

Simply run it with:

That is enough for now, let’s get started with the interesting part ;)

(Tip: using Grunt without installing it globally)

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!)

Compressing

After the concatenating we want to make our javascript file as small as possible — uglify will come to the rescue:

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

Invalidating on Cloudfront

Invalidating the cache on Amazon Cloudfront, so the new version will be used.

Fun part: notify on HipChat!

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

Things used, further reading:

If you have any question, do not hesitate to reach out! You can find me on twitter (@nthgergo) or on github(gergelyke).

--

--

Gergely Nemeth
Javascript and the server

Engineering Manager | Built @RisingStack, @GodaddyOSS @BaseWebReact | Find me at https://nemethgergely.com