A little something to help with demos

[mattstyles]

I've just tidied up speedrun.

If you want a quick way to get access to a modern JS toolchain for your demos then it might well be useful for you.

I've also created a quick example project (using pixi, but you can use anything) for you to have a play with, available here.

Getting Started

The example project shows a pretty clean way to set up a demo project.

It requires you to have node (and thus npm, the node package manager) on your development machine, and you’ll need git on your machine also if you want to clone the repository. With these prerequisites (and some knowledge of the command line) the following commands will get the project up and running:

git clone [email protected]:mattstyles/speedrun-pixi-example.git
cd speedrun-pixi-example
npm install
npm start

These commands will clone the repository locally, then traverse in to that repository, then install the dependencies from npm that are required to run the project and then runs it. Running the project means starting up a local server to serve your files and creating a development environment including some features like transpilation of newer javascript language features, use of ES6 modules and hot-module reloading (HMR) as well as a few other goodies. All of these goodies are provided by parcel.

Some more details

A modern JS toolchain often includes some of the following features:

* A development server to serve your files (rather than from the file:// protocol which has some restrictions you probably don’t want to deal with)

* hot-module reloading i.e. incremental bundling of only the files that have changed, resulting in a faster feedback loop (this is subjective, not all of us, myself included, absolutely agree that this is a good thing)

* Access to ES6 or CommonJS module systems

* transpilation of newer language features that may or may not be supported (yet) in your development browser of choice

This project uses `parcel` the do the bulk of the heavy lifting which gives you a few additional features:

* Very fast bundling, for optimal feedback loops from changing source code to seeing the result of those changes in the browser

* Friendly error logging, errors are propagated to the browser rather than remaining solely on the command line

* Automatic bundling, this allows for automatic inclusion of images and css files

* Many pre-packed transforms, allowing use of images, css, json, as well as language supersets like typescript or even separate transpilable languages like wasm, rust and openGL  (amongst other available transforms)

The advantages are all subjective; there is a clear argument that this additional complexity simply is not worth it. However, access to a module system and newer language features is very attractive and projects like `parcel` can ease the problems of writing source code using these techniques.

Many of us here like to create many small demos and proofs-of-concept, and `speedrun` can help ease the pain of setting up a toolchain for such projects.

Many people here also aren’t comfortable with setting up a javascript toolchain to get access to things like a module system or newer language features. Speedrun hides this pain so you can get going, but it’s still worth (in my view) finding out how this stuff works, and speedrun or the example project won’t help here as it very deliberately abstracts this toolchain away. Thankfully there are many resources out there if you want to (and have time to) learn.