« Things to know Moving Off Globals in Ember( or Ember-Rails)

Moving to from Ember Rails and global style javascript can be a bigger task than just moving your code to ember-cli and can expose some things that might be tough to work through on your own. So I decided to write about my experience and things I noticed while moving from ember-rails to ember-cli.

One of the first things that I encountered was, I am not really sure how all this ES6 stuff works. There are plenty of great write ups about ES6 and what it all entails, but ill try and give a basic overview (hopefully not too botched up).

What is ES6?

ECMAScript 6 is the sixth major iteration of ECMAScript. You probably know it better as it’s less formal but more popular name: Javascript.

Anyway with the latest version of ES TC39 has added quite a few features, and Ember-CLI allows us to take advantage of these new features before they are browser ready. This is done with a tool called Babel, which transpiles the new syntax(ES6) to what most understand(ES5 and globals).

What are these new features?

Modules! I am just going to hit modules in this post, but Modules give us a Great syntax to import and export code in a more traditional object oriented way.

looks like this:

Above I am allowing `Settings` to be exported from settings.js and importing `Settings` into the app.js file. that gives me Settings as a module that I can use in app.js.

This is how the entire file structure of Ember cli is built. When you run `ember build` that compiles all these files down to load in the browser.

There are a ton of other features like string interpolation, fat arrow syntax, new variable syntax, classes, and a ton more. If you have been using Coffeescript you should probably stop and move to ES6, it has a lot of similar features but has been blessed by the people building the language.

The new module way might break some of your code though. I know for me it exposed some of my code that was poorly written. where before you might have just called:

var MyEmberApp = Ember.Application.create();

and then done something like:

MyEmberApp.set("someAwesomeStuff", "I can get Anywhere!!!")

all over the fucken place in the rest of your app. In Ember-CLI that will not work, and that is a good thing! Using the app namespace like this is a really great way to make your app really hard to maintain and look more like spaghetti.

So how do I fix this?

Usually what I have noticed is that when you are trying to use the global namespace what you are really looking for is a service object to manage across multiple places in your app.

It just so happens that as of 1.10 Ember has added service objects that can be injected into various areas of your app. For Example, say you needed to keep track of the route your app was on in various objects throughout your app. Originally you might have set a currentPath property on the application namespace. Now moving away from globals we realized this is a bad idea and we need to be rid our app from such horrible practice and bad code.

So to Create a service we can run this:

$ ember g service settings

And to use it we can do something like this:

Highlighting line 3 in the ApplicationController we can use the name of the service as the name of the property and Ember-CLI will figure out the rest! you could do this if you wanted though:

appSettings: Ember.inject.service("settings");

That is it!

Now we can use this service all over our app and have a nice place to keep all the truths about it for future reference.