Ember- An Intro

I’ve recently started learning Ember. The process of learning ember has been really interesting so far, but one issue I’ve found is a lack of newbie-centric articles since the language is so new. Ember is also my first JavaScript language which is a whole other thing. I have found learning Ember, however, not as difficult as I imagined. Maybe because it feels so rails-esque? As a warning… I hope all of this information is correct, but, as I’m still very new to this, I’m not completely sure.

Ember has similar conventions to rails like the idea of MVC and way to DRY out your code. I’ve found certain things difficult and other things just make sense which is nice. Ember has models and controllers. It has views as well but these views are known as templates. So far, I really like the template piece as compared to views. I find them easy to follow and easy to create. Templates are created using handlebars which as also compatible with mustache.

Here are some components of Ember. Ember is comprised of es6 modules. The modules are a way of DRYing out code. Basically, these es6 modules can be used in other parts of the application so instead of having to just copy and paste code, you can just pull in the es6 module. There are also actions- Actions are events that trigger associated methods in the controller. They are always stored in an actions hash. Computed properties - A computed property mimics the behavior of a property and treats the templates variables as a value but it correlates to a function in your es6 controller. A function – a function can return an array so you can define a property to connect to a specific point in the array which makes it a nice way of filtering an array. For the property: Property (code that connects) to what the function depends on in the controller… which is defined at the top of the page (ie- Ember.ArrayController)

Models: The model is still used as the ORM for the database. The es6 module defines the attributes of the model and what type they are.

There are also routes, which are different from routes.rb. Each of the model pieces also have a routes part. The routes allow us to set different states. Different actions are available to the user based on what state the application is in. Defining those states, also allows us to determine what actions are available to us in the state and then make those actions happen. Separate from this, there is a router which defines the routes (paths) for the app and a routes.rb which define the rails paths.

One issue I’m currently having is determining what is pure ember versus what is a piece of the specific structure I’m using, which is Ember-appkit-rails. The most confusing piece of this are the controllers, models, and other components that are all held in the same directory. So, for example, when I’m working on creating a controller, I have to determine if it’s an es6 controller or a .rb controller… same thing with models.

Controllers. There are two types of controllers… an object controller or an array controller. Object controllers deal with a single object, array controllers deal with multiple objects in a collection.

Templates are the views in Ember. In a template, {{outlet }} tells the template where to render the code.

Finally, getting a little into additional ember pieces (this is the part I feel I still need to learn the most about), Ember-data is a library that lets you retrieve records from the server and hold them in the store, update them in the browser and then save them back to the server.

Here are a bunch more links for learning:
EmberWatch
Awesome intro talk on Ember for Rails devs
Great article on Ember
Ember docs
Ember appkit

More Ember posts to come!