I’m using Ember 2.10.0 here
It has been years I wrote my last article on Ember.js. Since then lot of things have changed. Ember cli came into the picture, ES6 was released, htmlbars replaced the handlebars and many more. Thus I decided to rewrite the entire series of Ember tutorial.
A bit on MVC architecture
As you are here to deal with Ember.js, chances are more that you are familiar with MVC. Still let me touch it a bit.
In an MVC architecture, under a particular
route, there is a
Controller, which holds a
Model in it to store data and displays those data on
View, which is the presentation layer.
Introduction to Ember.js
- Convention over configuration. It reduces the configuration related codes like anything.
- Much better data change observing mechanism than angular.js like frameworks.
- A priority based run loop, who decides which task to run first.
- Built in architecture (with ember cli) has its own advantages. Easier to shuffle developers across teams.
- ES6 syntaxes. Modern technology.
- Huge community. Ember even has npm like emberobserver.
- There are a lot more other reasons.
Ember projects can be scaffolded using ember cli which is a all in one solution to scaffold, develop, run, build and test your application. Ember cli gives you a predefined architecture (just like voidcanvas cli provides for node.js) which is why it’s easier to be with the best practices and also to on board new people to the team. And reducing the pain of creating new files and writing the initial lines is a plus.
Installation and scaffolding
Installation is easy if you are familiar with node.js and npm. If you are not, please install node and npm in your computer and open your command prompt or terminal. Now use the commands below to install ember cli.
npm install -g firstname.lastname@example.org
Remember you need node 0.12 or higher and npm 2.7 or higher.
After completing the installation of
ember cli, you will get the command
ember to use anywhere in your computer (as you have globally installed it with -g).
If you are on Linux or Mac, you can install the node module watchman, to make your file change detection faster. This is an optional step.
npm install -g watchman
Create the application
So now, when the cli is ready, it’s time to scaffold the project. Create a folder in your computer and navigate to that via your terminal or cmd.
Now run the following command to scaffold a new project.
ember new yourProjectName
yourProjectName can be anything. After running this command, ember will create a folder named
yourProjectName and inside that it will scaffold the entire ember project.
Run your ember project
To run it, navigate inside the
yourProjectName folder and hit the following command.
Now you will see the project is being built and will be served in a particular port. Generally the port is
And finally after all those hurdle, you will be able to see the ember project output on your browser.
In the next part of this series of ember tutorial with ember cli 2.10.0, we will give you details of the architecture of the application scaffolded by ember cli. You can also find below all our article links of this series of Ember.js tutorial.
All tutorials in this series
- Scaffolding & understanding an ember application
- Ember.js template syntaxes and helpers
- Ember objects, computed properties & observers
- A brief on routers of Ember.js
- Components, a very important concept for UI
- Ember data & how you can make the application really simple, using it
- Unit, Integration & Acceptance testing in Ember.js