If you want to skip the theory and quickly move on, make sure you:
- Install Node.js
- Install Atom (or your fancy text editor of choice)
- Download the boilerplate code
- Open the code in Atom
- Test whether it works
And then we can start writing our first code!
Before we can start creating the good stuff, we're first gonna need the tools to do so. With the goal of quickly being able to build prototypes in mind, I thought it would be good to use a programming language aimed towards the web. More and more applications you will find are built using web-based tech these days. This even applies to many of the (desktop and mobile) apps you might use. Under the hood, these applications are basically running a browser, much like what you're using to read this, in which their custom code is running.
One of the advantages of this approach is that the same code will automatically work on many platforms: Windows, OS X, Linux, the same code might even be used for the mobile version! If you're familiar with the design tool Figma: that's one example of where this is done. The same goes for the editor I will recommend to you in one of the next paragraphs (spoiler): Atom. Even if the application you'll end up working on is not intended to use these technologies, this combination of tools was the fastest I could think of to build rapid prototypes with and it will help you to communicate ideas to your development team. It's also very easy to run, you don't need any special software so you can easily do user tests on the user's own device!
Setting up your environment
So, now that we've decided — or actually I've decided for you — that we'll be developing using web technologies, we need to figure out how to get ready to start building our first prototype. First of all, if you're reading this you probably already have a browser with which you can test your prototype. I personally use Chrome so I will use that to explain a couple of neat tricks, but any popular browser will fit the bill just fine.
python [myscript].py. In our case, the interpreter is in fact included as a part of our browser, allowing anyone with a computer that has been on the internet since it came out to potentially run the prototype. An advantage of interpreted languages is that they work on many platforms, as long as there is an interpreter available for it. Because the code is read on-the-fly, changes you make are immediately picked up the moment the program (in this case, the webpage) is refreshed.
Other languages — you might have heard of C++ or Objective-C — are called compiled languages. Many traditional applications you will be familiar with (Microsoft Office, native apps on your phone) are written in these. The code is converted into a machine-readable format by the developer, which is then ran by the user. The user doesn't need an interpreter in this case, the operating system (Windows) takes care of it. You may have seen these .exe files in Windows — these are compiled files. An advantage of compiled files is that they generally run faster than interpreted languages, which makes them traditionally very interesting for computationally intensive tasks, and stuff that needs to be very responsive (e.g., games).
Installing Node.js is easy since those kind folks have provided us with an installer for your favorite operating system. Just go to https://nodejs.org/en/download/ and follow the instructions. See you when you get back!
For this tutorial, we'll be using a framework that is designed specifically for prototyping, with the designer in mind, called FramerJS. It's also the core of an integrated prototyping solution, Framer. This integrated solution combines a design interface (similar to Sketch) with the text-editing capabilities that we're now using Atom for. However, that application is currently only available for OS X and it costs some money. I wanted something that works for all of us, which is why we are hacking away with text editors. The price we pay is that we don't have a fancy drag-and-drop functionality with which we can build our interfaces. Also, many modules I came across are developed with Framer, and not FramerJS in mind so they don't always work out of the box.
The first shortcut — boilerplate
You can find the boilerplate code here. If you've used Git before, you can use your favorite client to clone the repository. If that previous sentence was complete jibberish to you, then just go to the website, click the Clone or download button and then click on Download ZIP.
Put these files in a place where you can easily find them, since this will be the starting point of our prototype!
Opening the prototype in Atom
When you first open Atom, your screen will look something like this:
Click on Open a Project (or use the menu: File/Open...) and go to the boilerplate files you just downloaded. Select the main folder (e.g., ecma-framer-master) and press Open. An overview of all the files in your project will now appear on the left:
Running the prototype for the first time
In order to run the prototype, we need to start our Node.js server and let it know which code to run. The boilerplate code also relies on a bunch of plug-ins that still need to be downloaded and installed.
Start by opening a Terminal (OS X) or Command Prompt (Windows, opened with Windows key + R and then typing "cmd"). You will have to navigate using the command cd to the location of your prototype's files.
For example, if you placed the downloaded ECMA-Framer files in a folder on your desktop called ecma-framer-master, in Windows you would type into the Command Prompt:
In OS X it would be something like:
To automatically download and install the many plug-ins that the boilerplate needs in order to work, simply type (both in Windows and OS X):
It might take a while but you will only have to do this once. Then, starting Node.js is a simple matter of typing:
This should automatically open your browser and go to the address http://localhost:9000/, where your very first prototype should be visible. It still looks a bit boring but you can click on the blue square in the middle to get it to disappear and reappear again — your very first coded interaction!
You will see that this npm start program (the Node.js server) keeps running in your terminal window. It has to remain active for our prototype to function, so whenever you want to work on your prototype remember to start the Node.js server first, and not to close it until you're done with it.
Okay, if your website is up and running and you're able to click on the square, you're ready to start building. Let's start writing our first code!
(However, if you're stuck at the end of this part without a working prototype, drop a comment below!)