Installing and using a client-side library in the right manner is really important. Using a large client-side library incorrectly could cause real problems; one obvious problem is the slow loading of web pages. In this chapter, we are going to see how we can set up and use CreateJS for both development and production environments.
In this chapter, you'll learn about the following topics:
- Requirements
- Download
- Installation and setup
CreateJS contains different libraries such as SoundJS, TweenJS, EaselJS, and PreloadJS. Each one has different requirements to run in browsers.
TweenJS should work in all browsers and their older versions as well. SoundJS requires HTMLAudio, Flash, or WebAudio, and these features need modern browsers. SoundJS should work perfectly with the following browsers:
- Google Chrome 31+
- Mozilla Firefox 25+
- Internet Explorer 9+
- Opera 18+
Among the mobile browsers, it should work with these:
- iOS Safari 4.0+
- Android browser 2.3+
- BlackBerry browser 7.0+
PreloadJS should work with all browsers, even Internet Explorer 6.
EaselJS has a dependency on HTML5 canvas, so your audiences should have one of the following browsers to be able to use EaseJS:
- Google Chrome 31+
- Mozilla Firefox 25+
- Internet Explorer 9+
- Opera 18+
For mobile, one of these browsers is required:
- iOS Safari 3.2+
- Opera Mini 5.0-7.0
- Android browser 2.1+
- BlackBerry browser 7.0+
There are some ways to download and include CreateJS files into your project which are discussed in the following sections.
You can download the latest version of CreateJS and all subsets from the GitHub, as shown in the following screenshot from https://github.com/CreateJS/:
After going to each repository, you can either download the ZIP folder of the latest changes or use the Git clone command to get the source from GitHub, as shown in the following screenshot:
You can find this box on the right-hand side of each repository page, which helps you to get the code.
CreateJS has a great Content Delivery Network (CDN), which contains all versions and all subset libraries hosted. You can access CDN servers from http://code.createjs.com/.
You can find all versions at http://code.createjs.com/ as shown in the following screenshot:
.jpg)
You can also use a combined version of all subsets and libraries that contains all of the latest stable versions of all libraries, including EaselJS, TweenJS, SoundJS, and PreloadJS.
After choosing how to download the source, you need to set up the library to make it work. In this section, we are going to see how to set up the library for both production and development environments.
If you want to use CreateJS in the production environment, things will be much easier. All you need to use is a single compiled source file. For this purpose, you can either use hosted files from CreateJS CDN or build locally, and then link in locally.
If you want to debug, develop using CreateJS, or see how things are going on inside CreateJS, you need to use uncompiled source files.
For each library, you can find the uncompiled source files at /src/. All dependencies and source code will be here.
To use uncompiled source files, the important thing to keep in mind is that all files should be called in the correct order; otherwise, you will get some errors. Luckily, there is a file in each project that will give you hints on how to include files in the correct order. This config file is placed in build/config.json.
You can see an example of this config for EaselJS in the following screenshot:
So, you have to put <script…> and load files in this order. You can find the same config file in the same location for other projects too.
After loading all JS files, you can use the library and also put your breakpoints on the source code to trace or debug it.