Book Image

Ember.js Cookbook

By : Erik Hanchett
Book Image

Ember.js Cookbook

By: Erik Hanchett

Overview of this book

Ember.js is an open source JavaScript framework that will make you more productive. It uses common idioms and practices, making it simple to create amazing single-page applications. It also lets you create code in a modular way using the latest JavaScript features. Not only that, it has a great set of APIs to get any task done. The Ember.js community is welcoming newcomers and is ready to help you when needed. This book provides in-depth explanations on how to use the Ember.js framework to take you from beginner to expert. You’ll start with some basic topics and by the end of the book, you’ll know everything you need to know to build a fully operational Ember application. We’ll begin by explaining key points on how to use the Ember.js framework and the associated tools. You’ll learn how to effectively use Ember CLI and how to create and deploy your application. We’ll take a close look at the Ember object model and templates by examining bindings and observers. We’ll then move onto Ember components, models, and Ember Data. We’ll show you examples on how to connect to RESTful databases. Next we’ll get to grips with testing with integration and acceptance tests using QUnit. We will conclude by covering authentication, services, and Ember add-ons. We’ll explore advanced topics such as services and initializers, and how to use them together to build real-time applications.
Table of Contents (18 chapters)
Ember.js Cookbook
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Asset compilation


In this recipe we'll take a look at how assets are added to a project.

How to do it...

In your application, at some point, you may want to add assets and minimize or fingerprint your project. This is done in the root folder of your project in the ember-cli-build.js file or in the asset folder.

CSS and assets

All the assets should be placed in the public/assets folder. The assets can be referred throughout the program at assets/images/{image file}. CSS files should be placed in the app/styles folder.

Minifying

By default, CSS and JavaScript files are minified during the production build process. There are ways to turn this functionality on and off. For example, let's say that you want to turn off the minification for both CSS and JavaScript. To do this, we can simply edit the ember-cli-build.js file, and under the // Add options here section, add the minifyCSS and minifyJS section:

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
    minifyCSS: {
      enabled: false
    },
    minifyJS: {
      enabled: false
    }
  });

This will tell the compiler not to minify JavaScript and CSS. To build the application in the production mode, simply use the --environment argument:

$ ember build --enviroment=production

Fingerprinting

All files by default will be fingerprinted during the production build process. This will include all js, css, png, jpg, and gif assets. During this process, all these files will have an md5 checksum appended at the end of their filenames. During this process, all HTML and css files will be rewritten to include these new names.

There are several options available when fingerprinting a file. This is all controlled in the ember-cli-build.js file. Let's suppose that you wanted to disable fingerprinting:

…
fingerprint: {
 enabled: false
}
…

Another useful option is to prepend a domain to all static files. This can be done using the prepend option. Once again, this needs to be added to the ember-cli-build.js file in the root of the application folder:

…
fingerprint: {
   prepend: 'http://www.example.com'
}

Now, all assets will include the www.example.com domain. For example, a normal JavaScript src file will look like this:

<script src="assets/script.js">

This will be transformed into the following:

<script src="http://www.example.com/script-12324adfasdf123234.js">

Another useful option is exclude. This accepts an array of strings. Any filename in the exclude array will not be fingerprinted:

fingerprint: {
  exclude: ['fonts/12424']
}

The ignore option also accepts an array of strings. Any filename that contains any item in the ignore array will not be processed or fingerprinted:

fingerprint: {
  ignore: ['fonts/12424']
}

The extension option defaults to 'js', 'css', 'png', 'jpg', 'gif', and 'map'. This option can be used to add other file types to get fingerprinted:

fingerprint: {
  extension: ['r3','html']
}

The replaceExtensions option defaults to 'html', 'css', and 'js'. If needed, new file types can be added to replace source code with new checksum file names:

fingerprint: {
  replaceExtensions: ['html','htm']
}

How it works...

The import process is done via the Broccoli asset pipeline library. This build tool performs all the fingerprinting, minifying, and importing of the assets. In addition, Broccoli handles all the preprocessors if the appropriate plugins are installed.

The asset manifest is located in the ember-cli-build.js file in the root of the project folder. You can only import assets that are in the bower_components or vendor directories.