A modern Javascript workflow

Let’s talk about your development workflow. If you’re still including all of your scripts in your pages using a <script> tag, you’re doing it wrong. A modern front-end workflow includes some kind of dependency management solution, and some kind of bundling / minification process.

Prereqs: Package management and Git console

npm

Even if you don’t use Node.js for your server use npm for managing your client-side dependencies. It really makes adding and removing compenents a breeze!

To get npm, just install Node. Installation is a snap, and should only take a few minutes. Installers are available for all platforms.

package.json

Also take a few minutes to understand the package.json file format. It’s basically an npm project file for your app – it tells npm things about your app, your app dependencies, and your development time dependencies (like script bundlers and transpilers). It’s a pretty widely adopted standard now.

A command line with less suck

If you’re doing development in Windows, the built-in console sucks. Try installing MsysGit for windows and just opening a Git bash prompt on your development directory (by right-clicking on it and selecting ‘Git Bash here’). Then you get tab-completion, history, and lovely colored output all for free!

Dependency management

Browserify

For dependency management, I prefer Browserify and npm. Browserify provides a Node flavored way to require javascript modules. For example, including the excellent MomentJS library in your code is as simple as adding var Moment = require('moment'); to your javascript source.

uglify

For building/minification I prefer a simple npm script and the unfortunately named uglify. This, combined with the package.json file provide a very nice way to install all the script dependencies your app requires.

Babel

With ES6 (the next version of Javascript) right around the corner, why not start using those new features now? Yes. Even if your current browser doesn’t support them.

How? Using a transpiler, of course!

I prefer using Babel as a transpiler (which is also quickly becoming a standard).

Learn more about ES6 (also called ES2015) here. In the meantime …

Installing it all

To install Browserify, uglify and Babel using npm, drop to a command line and run:

npm install -g browserify uglify-js babel

Tying it all together

A package.json from my most recent single-page-application looks like this:

{
  "name": "family-dashboard",
  "description": "Family dashboard",
  "version": "0.1.3",
  "author": "Dan Esparza",
  "browserify": {
    "transform": [
      "babelify",
      "envify"
    ]
  },
  "bugs": {
    "url": "https://github.com/danesparza/Dashboard/issues"
  },
  "dependencies": {
    "cookies-js": "^1.0.0",
    "director": "^1.2.7",
    "flux": "^2.1.1",
    "keymirror": "~0.1.0",
    "moment": "^2.9.0",
    "moment-timezone": "^0.3.0",
    "object-assign": "^1.0.0",
    "react": "^0.13.3",
    "react-radio-group": "2.1.1"
  },
  "devDependencies": {
    "babelify": "^6.3.0",
    "browserify": "^6.2.0",
    "envify": "^3.0.0",
    "uglify-js": "~2.4.15",
    "watchify": "^2.1.1"
  },
  "keywords": [
    "calendar",
    "dashboard",
    "flux",
    "google",
    "react",
    "weather"
  ],
  "license": "MIT",
  "main": "js/app.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/danesparza/Dashboard.git"
  },
  "scripts": {
    "build": "browserify js/app.js -t babelify | uglifyjs -cm > js/bundle.js",
    "start": "watchify -v -t babelify js/app.js -o js/bundle.js"
  }
}

Pay close attention to the scripts section, above.

My finished workflow looks like this…

When I want to install a new application dependency, add it to the package.json file and run:

npm install

When I want to develop some code, I drop to a git bash prompt and run:

npm start

This will automatically watch for changes and rebuild my bundle.js whenever a change is made to any javascript file in the app.

When I want to do a full minimized release build, I just run:

npm run build

Next up…

Next, I’ll be checking out webpack to replace Browserify for even more fancy features!

NuGet tips

Created in 2010, NuGet is a free and open source package manager for the Microsoft development platform. NuGet has become the defacto way of distributing tools and libraries in the Microsoft developer community.

If you’re interested in working with NuGet, here are some tips and tricks that will be helpful to you.

Creating NuGet packages

Creating NuGet packages from scratch can be daunting for a first-timer.

nuspec != nupkg

First, you need to understand that there is a difference between the types of files that NuGet uses:

  • A .nupkg file is the package that is installed on a destination machine.
  • A .nuspec is a template that is used to create versioned package files.

You can always refer to the Nuspec reference, but using the NuGet package explorer makes it a bit easier:

Package exlorer screen

You can easily set your package name, version, author, and even the files in your NuGet package from the NuGet package explorer. When you’re done, remember to save the .nuspec file by selecting ‘File / Save Metadata as…’

Use the same name as your project

Wondering where to store your .nuspec file? Store it in the same directory as your .csproj file and name it the same thing as your project.

Example:

  • Project name: MailChimp.csproj
  • Nuspec name: MailChimp.nuspec

This gives you the option of using the version of nuget pack that allows you to build your .nupkg directly from your project file: nuget pack foo.csproj

When you call it this way, NuGet will examine your project references and automatically include everything it needs to in the package.

Don’t hardcode version numbers

Don’t store the version number in your .nuspec file.

Instead, use the $version$ placeholder instead - this takes whatever version number you have in your AssemblyInfo.cs file.

Alternatively, you can also pass in the version number on the command line when you generate your nuget package using the -Version parameter. Example: nuget pack foo.nuspec -Version 2.1.0

There are many other replacement tokens you can use to automatically sync information in your NuGet package as well.

Publishing packages on NuGet.org

Many NuGet packages are available on NuGet.org. NuGet.org is the default package source for the NuGet plugin for Visual Studio. If you decide to distribute your package on NuGet.org – you’ll instantly make it available to hundreds of thousands of developers around the world.

When creating a NuGet package for an open source project, start by creating an account https://www.nuget.org if you haven’t already.

Where do I get my API key?

Your API key can be found on your NuGet.org account page (near the bottom) – you’ll need this when publishing nuget packages using various tools:

  • You can publish directly using the NuGet package explorer. In the app, go to File / Publish and enter your API key where it prompts for ‘Publish key’
  • You can publish directly using using NuGet. Using the nuget command line tool, you can supply your API key to publish: nuget push <package path> [API key] [options]

Publishing packages inside your company

To publish your packages inside your company you’ll need to first setup an internal NuGet server. The easiest way to get up and running is to use the NuGet.Server package to create, build, and deploy a mini NuGet server internally.

Pushing NuGet packages is as simple as copying new packages to the source directory or using the nuget push command-line syntax. I recommend you use one of these methods as part of a continuous integration build process.

Next, your consuming dev teams just need to add a new NuGet package source in their Visual Studio Package Manager.

Finding, installing and managing your internal packages is now just as easy as using NuGet!

Additional reading

Use Keepass and dropbox to manage your passwords

Interested in using a password manager for all your passwords?

You should be.

Services like OpenId are catching on, but aren’t as widespread as originally hoped. You might visit hundreds of different sites a year that use a login and password.

Using the same password for every website and service is a terrible idea: A hacker just needs to compromise one of the services you visit and they’ve got the username/password for all the sites you visit. Ideally, they should all have different passwords – but how in the world could you remember all of them?

Keepass to the rescue

This is where Keepass comes in. Keepass is a free, open source password manager for Windows (with OSX and iOS equivalents):

Keepass main screen

Open source is important when it comes to security – if you’re a developer, you can actually make sure the algorithms used to secure your data are being used properly. Keepass stores your passwords in a secure file-based database.

Generate a new username and password for every site

Generating a new login for a site is really simple with Keepass. First, make sure that you’ve installed it from the KeePass website, here: http://keepass.info

Create a new database. You will pick a single password to ‘unlock’ Keepass and get to your other passwords. Make sure it’s different and not obvious. It will be one of the last passwords you’ll ever have to memorize.

  1. With your database created and unlocked, select ‘Edit / Add entry’ - or right click and select ‘Add entry’
  2. Fill in the name of the site and service and the username you’d like to use. Your password will be automatically generated.
  3. Optional: Press the ‘generate new password’ button and create a password according to custom rules
  4. Optional: Add a url for the site to make it easier to remember where to go to enter your credentials
  5. Press ‘OK’ to create the new entry

It’s just that simple!

Backup and sync your passwords

Now that you have Keepass up and running you might ask, “But what if something terrible happens to my computer – shouldn’t I be backing this up? What if I have multiple computers – how do I securely share my passwords among all my machines?”

Not to worry – this is where Dropbox comes in. Dropbox is a free service for up to 2GB of data (you can earn more with referrals, or just sign up for their monthly service – it’s not terribly expensive).

After signing up for Dropbox and getting it installed locally, create a ‘Keepass’ directory under your dropbox. Move (or create) your Keepass .kdbx file(s) to this directory. When you’re done, this should be the only location on your computer that has Keepass files.

Finishing up

When you start Keepass, make sure it opens the databases in the directories under Dropbox. Make sure that Keepass is set to start automatically.

If you have additional questions about Keepass, check out the FAQ on the website.

If you have additional questions about Dropbox, check out the Dropbox help center.