Tutorial Ember (version 1.13) – Part 1

By | August 12, 2015

Hello and welcome in this new tutorial dedicated this time to a rising framework , I appointed Ember.js. Ember is intended as a direct competitor of angular while proposing a radically different approach. Ember is constantly changing. So much so that the official documentation site difficult to follow the updates. It is also difficult to find updated tutorials on the net. This tutorial will support the latest version at the moment (1.13.13). This version is normally fully compatible with Ember 2.0 This tutorial should remain relevant for some time.

We will see how to implement a traditional blog with Ember. I will use Ember-cli with Ember-data and Slim framework, a the Rest Php  framework for the backend. Let’s go!

Prerequisite :

  1. Node.js installed and functional.
  2. Bower installed via Node.js
  3. Phantom.js via Node.js
  4. Knowledge of Javascript / PHP / CSS / HTML

Project Setup :

Ember-cli :

Ember is composed of a large number of JavaScript files that need to be included in your index.html. Include all of them by hand is tedious and time consuming. Ember also uses HTMLBar, a JavaScript template engine. It is certainly possible to use this engine in your index.html but this will quickly become monstrously unmanageable. For these reasons the Ember team has developed a command-line interface to help us. This utility has become a de facto standard to develop a website with Ember. Among the features brought by Ember-cli we can mention:

  1. Compilation of all the Javascript / CSS / Template files into one file and inclusion in the index.html file.
  2. Detecting changes in the code and automatic reload page.
  3. Code generation.
  4. Launching a standalone server and tests for the project .

Install Ember-cli is as simple as launch the command :


npm install -g ember-cli

And if you run the command


ember version

That should display something like this:


version: 1.13.13

node: 0.12.4

npm: 2.13.2

os: darwin x64

To create a new project, just go into the directory that will host your project and run the command:

 
ember server 

This command will compile all the files and place the result in the “dist” directory, run the tests and finally start the server. Once this is done, your site is accessible at http://localhost:4200.

Bootstrap 4.x:

To assist us a little, I will use the CSS Framework Bootstrap in version 4 which is currently in Alpha. This framework provides a set of classes and CSS components. To install it:

bower install bootstrap#v4.0.0-alpha.2 --save

we must add the files needed to build Bootstrap in Ember. This happens in the ember-cli-build.js file:


module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        sassOptions: {
            includePaths : [
                'bower_components/bootstrap/scss'
            ]
        }
    }
});

 app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');

return app.toTree();
};

I use bootstrap in saas mode. For this we need to install the ember-cli-sass plugin.

npm install --save-dev ember-cli-sass

We now need to create a file call app/styles/app.scss. With this plugin, the content of the app.scss file will be automatically compiled and added to the directory dist during the build.

This concludes the first part of this tutorial. In the second part we will go in more detail in the operation of Ember. See you soon.

00

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.