Getting started with Ember.js

Nowadays, complex Javascript applications can be seen everywhere. Over time, they become more and more difficult and it is already unacceptable to simply write a chain of callback functions on jQuery. Javascript programmers are gradually learning what ordinary developers have known for decades. Organization and efficiency can play an important role in the design. Thus, Javascript MVC frameworks such as Backbone, Knockout, and Ember appeared to fill the void between beginner, intermediate, and experienced developers. They offer different features and functionality that will suit different people, depending on their needs.



I consider myself a pretty good developer ... far from the best, but I know how to work with existing technologies that I use in my developments. I watched these frameworks and I was approached by Backbone and Ember. I played with Backbone, even bought a video tutorial on it. He is good, but it is still difficult for me to make myself think like him. I heard about Ember just a few months ago and he is gaining momentum. It offers many features that I need and I decided to see how it suits me. Ember provides several key features that seem very attractive to me, the main one being data binding. You simply create a variable, and when the value of this variable changes, any part of your application that keeps track of this variable is updated. This would be applied, for example, in chat rooms, etc.

')

At the moment, the main disadvantage of Ember compared with Backbone is that the latter has a lot of textbooks, articles and finished projects on Github. While, according to Ember, you can find quite a few materials on the net, which immediately show all its insides, but miss the very basics. So my goal is to write a tutorial that will help you start using Ember right now. Well, among other things, I am writing this article to consolidate my own knowledge.



Ember.js is built on the MVC (Model-View-Controller) architecture and you just have to split your code into 3 parts:

• M = Model - looks like an array. This stores the data that will be used by your application.
• V = A view is the visual part of your application — forms, lists, etc.
• C = Controller - think of the controller as a traffic controller. It manages the interaction between other parts of the application. When the user clicks a button, the controller determines which view should be loaded, which in turn determines which model to use to save the data.

So, let's start? To get started, download the Ember.js Starter Kit . Unzip it into a directory that has access from a web browser. Open index.html and js/app.js in your favorite text editor. Add the following line to app.js :

 Welcome = Ember.Application.create(); 

Congratulations! You have created your first application on Ember! Open index.html in your browser and enjoy your new site. Oh, wait, there's nothing there ... what do you think about this? Nothing appeared except for the title, and that's fine. All that has happened is that Ember has created an application that you will use throughout the lesson. Some developers prefer to call this a namespace. It simply means that all other parts of your application will start with the name you chose. This helps to avoid conflict of variable names and keeps everything in order.



There is one thing that most jQuery developers are very used to - the good old document.ready . Ember offers something similar by taking an optional object to the create method. Add code, reload the page and you should see a greeting. Pat yourself on the head ... you deserve it!

 Welcome = Ember.Application.create({ ready: function(){ alert('  !'); } }); 

The next thing we need to do is add a Model. Each Ember application can have many models and each of them is a unique data type. In some frameworks, the model is represented as a class. In general, this is just a structure that tells us how to work with this object. Let's create a model for some of my favorite books.

 Welcome.Book = Ember.Object.extend({ title: null, author: null, genre: null }); 

The next thing we need is a controller. By the way, in addition to controlling the application, the controllers in Ember also transfer data from the model to the view. Here is a simple controller on Ember:

 Welcome.booksController = Ember.ArrayController.create(); 

This is not at all like creating a controller, but here an ArrayController is created that contains an array. This is where information about our books will be saved. She is there, you just do not see her. You can explicitly specify the contents of an array, or, for example, fill it. This is done by passing the optional object to the create method:

 Welcome.booksController = Ember.ArrayController.create({ content: [] }); 

Now we have a model and controller - it remains only to write a presentation. Remember, I said that the view is the visual part of your application? This means it will be in the index.html file. Let's first write our presentation, and then discuss it. Directly below the H1 tag, add the following:

 <script type="text/x-handlebars"> {{#view Ember.Button target="Welcome.booksController" action="loadBooks"}} Load Books {{/view}} {{#collection contentBinding="Welcome.booksController" tagName="ul"}} <b>{{content.title}}</b> - {{content.author}}, <i>{{content.genre}}</i> {{/collection}} </script> 

One of the great features of Ember is that it comes with the built-in Handlebars template engine. Essentially, patterns are the key magic of Ember. Usually in templates you surround a variable with a string. In Handlebars, these are 2 braces.



Ember began its existence as a SproutCore library, developed by Apple, as the core for their online applications, such as Mobile Me. SproutCore also included a set of widgets that are not in Ember. Ember only includes submissions for form elements, because they can be very dynamic. In the case of our template, or view, we use the Ember buttons. This allows him to do all the hard work for us. He accepts the goal (in our case - booksController ) and the action. Therefore, when someone presses a button, Ember will work with the loadBooks method of the loadBooks object.



The second part is a bit more complicated, but I'm sure you will figure it out. In Ember, a collection is simply a pointer to a data group, in our case, again Welcome.booksController . At the beginning of the article I wrote that the associated data is one of the reasons why Ember interested me. And here we can see all its power. Content simply points to the content variable in booksController , while Binding is the magic dust. Adding a Binding to the end of most attributes tells Ember that you want to do two-way binding. You change the value on one side and the other will be updated. Finally, collections allow you to set a base tag, in our case it’s just a bulleted list ( UL tag).



By the way, the symbols # and / tell Handlebars that this is only a part (block) of the presentation.



Inside the collection is the “meat” of our templates. Notice how we mix HTML and tags inside our templates. Convenient, isn't it? Another subtlety is that Ember does not need to explicitly specify opening or closing tags for the list. He will add them automatically because he knows that we use a bulleted list. Run the application and you will see a lonely button that needs friends. Pressing the button makes it unhappy, because we do not yet have a loadBooks method. How about adding it and loading some data?

 Welcome.booksController = Ember.ArrayController.create({ content: [], loadBooks: function(){ var self = this; $.getJSON('data/books.json', function(data) { data.forEach(function(item){ self.pushObject(Welcome.Book.create(item)); }); }); } }); 

Remember, we said that models can contain arbitrary methods? Everything in Ember can contain arbitrary code, including ArrayController . Now, when you load your page and click the “Load Books” loadBooks , the loadBooks method will be called, which will load some of my favorite books. That's all for this simple example. I hope you enjoyed it and give Ember a chance. You can download the source code of the sample on Github .



Wait a minute more. If you are like me, then you still have questions. Many questions. I wrote this article because there were questions and it took me hours to search for answers. In fact, the answers to most of the questions that I had covered in this article. If you still have questions, you can write them here . If I do not know the answer, I will find it and answer you.



I advise you to read my second article , in which Ember is covered in much more detail.