Tools we need in this book

We need the following tools to go through our projects.

Operating system

Mac OS X is preferred to build iOS app. Otherwise, Linux and Windows works well as development machine.

Required software

• Code editor

  Any text editor works. I recommend Sublime Text if you don’t have a preference.

• Modern web browsers

  Browsers are needed to test and debug our web app rendering.

• Android and iOS Simulator

  We need simulator to test how our web apps run in mobile operating system. We’ll use Genymotion or official simulator for Android. We need Mac OS X and Xcode for the iOS simulator.

Optional

• Adobe Flash We will create some vector animations in Adobe Flash. CreateJS library integrates with the flash IDE so that we can export the timeline animation directly into the canvas. This is optional because the course code contains the exported animation we need. But if you want to change the animation, you may need Flash IDE to modify the source .fla file.

• PhoneGap build service We need to pack the web pages and asset files into binary application in order to deploy it on app stores. PhoneGap is one of the solutions. The setup, however, may not be easy enough for web designer. PhoneGap Build provides a web service that lets us upload the client-side code and files. Then it builds the binary applications for different platforms without us handling the compilation environment.

CoffeeScript compiling tools

When we write the logic in CoffeeScript, we need to compile them into JavaScript. You can choose your own method to compile the .coffee file into .js. Some compilers suggestion lists here in case you don’t have a favorite one yet.

• GruntJS GruntJS is a command line task runner for JavaScript. It allows developer to define how some inputs can be manipulated and transformed into the destination files.
• GulpJS GulpJS provides Grunt-similar task runner. The different is that GulpJS uses the concept of pipeline. That means we can write the tasks in cleaner way by ‘chaining’ the tasks.
• LiveReload LiveReload is a GUI tool that provides several handy features. It auto refreshes the browser when you save you files. It also compiles the preprocessor files for you, including CoffeeScript, SCSS and more.
• CodeKit CodeKit is another GUI tool with similar features from LiveReload. It is mac only and provides shortcut to install commonly-used libraries into your projects.