delphic.me.uk

WebGL Development Setup

A very important part of development and the first part you have to deal with is your "environment". Writing JavaScript is a bit outside the norm in this respect because there isn't an established Integrated Development Environment in the same way as there is for a lot of other languages. I've played around with using a few different IDEs and editors, including but not limited to; Notepad, Notepad++, Visual Studio, Aptana and WebStorm; and would like to share with you the setup I've settled on which I think is nicely balanced between the flexibility of using a text editor and features of an IDE. I use this setup both when developing on Windows and on Linux, and I believe it would work on OSX too.

TL;DR

  1. Install Node JS if you haven't already
    1. Use http-server for local development
    2. Use browserify for modules / dependency management
  2. Use Sublime Text as your editor
    1. Add JSHint for Sublime
    2. Add GLSL Syntax Highlighting

Verbose Version

For local development and testing you're going to need something a bit better than just opening the .html file from the file system regardless of which text editor / IDE you're using. When you open pages from the file system, security features of the browser prevent certain JavaScript functionality (XMLHttpRequest for one) which you'll need to say retrieve JSON files or load image files through JS.

For this we're going to use node.js, you'll naturally need to start by downloading and installing node.js, then via the node.js command prompt (or the native command prompt / terminal) you use the node package manager to get the http-server package.

That's "npm install -g http-server" in your command prompt.

Now all you need to do to get a local server running is go to the directory of your project in the command prompt (e.g. "cd C:\WebGL" or perhaps "cd ~/WebGL/") and type http-server, and boom http://localhost:8080/ will be serving your web pages.

A good reason to use node is it also has plenty other useful utilities for JavaScript development, such as UglifyJS, and the extremely useful Browserify, which is my prefered method for dependency management / modular code.

Browserify allows you to write node.js style modules*, and if you're like me you're probably going to want to play around with WebSockets and node.js code too, so why learn and use two different systems**, browserify means you can write JavaScript for the client side as you would for server side.

If you use Watchify too, then you still get the "Just press F5" benefit of normal web development. Remember to use the -g tag when installing these packages via npm to get the commands as well as the library.

Sublime Text is a really nice text editor, it has lots of useful functionality and some sensible autocomplete functionality (and I really like the default colour scheme). It's been described as a bit like vim, but with modern idioms for the hotkeys and user interface. You can download and use it for free, and it'll just occasionally remind you on saving a file that maybe you should buy a license, but not enough to be annoying, just enough to make you feel guilty.

One of the best things about Sublime is the extensibility, when doing any JavaScript development you really should be running JSHint, but let's be honest if it's not in your editor you're probably not going to do it, so install the JSHint Sublime Plugin and it's just a couple of hotkeys away. You're going to need to install node.js to use that plugin, but you should have it anyway!

Sublime also doesn't come with GLSL syntax highlighting, you're probably going to want it for WebGL development, so here's the package you'll need.

I hope this was helpful, it's not quite a step-by-step guide, but all of the links provide their own install instructions and trust me the ability to install and get things working via the README on a github page or documentation on the website is one that's every developer should learn sooner rather than later. Good luck and have fun, you can reach me @_delph.

* If you're not familiar with node modules the simple version is; you write code such as "exports.foo = function() { /* Do Stuff */ }" in bar.js and then if in another file you write "var bar = require('bar.js');" then you can use that function with "bar.foo()" in the second file. You can also set the entire object (rather than properties on it) which will be returned by the require function for that filepath by setting the "module.exports" variable. You can also use other peoples modules by installing them via npm and writing "var anotherModule = require('modulename');".

** There are a number of solutions and philosophies for dealing with dependencies / multiple JS files, but the other contender usually referenced is Asynchronous Module Definition or AMD (e.g. require.js) which is - in my opinion - very config heavy / verbose to use and isn't actually good enough for production code, and that second part is their opinion not mine! They make you run through a separate build process to get deployable code, so you're going to end up with 3 build processes (client side development, client side production, server side), rather than one, joy!