Handy Emberjs Globals for Developing
Tags: ember, javascript
Published: 2020-06-20 18:42:41

---
title: Handy Emberjs Globals for Developing
published: true
description: In this blog post you will learn how to add some nice globals to help you while developing your Ember.js app
tags: 
  - emberjs
  - javascript
---

#### TL;DR
Here are some handy globals you can use in your Ember.js app to debug faster, even without ember inspector

If you would like to use the addon version:

[ember-handy-globals](https://github.com/betocantu93/ember-handy-globals/blob/master/README.md)

You can also find it as [gist](https://gist.github.com/betocantu93/631456f4e867bd4ef73e296524485ba5)


---

In this blog post you will learn how to add some nice globals to help you while developing your Ember.js app.

One of the things that makes Ember.js ecosystem a breeze is the [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi). Quite often as Ember.js devs we use it to grab the current controller, a service, the route current model or a component to debug it, even while writing this post I learned a few new things about the inspector, I've never used the Promises tab before 🤒, I love it!

But from time to time quick fixes and checks starts to feel a little bit annoying. Specially in long debugging sessions and of course if you like autosaving files in VSCode, like I do.

Also from time to time you need a few ember objects in the console to debug correctly, or build up some complex object, so having the `$E` reserved for a particular inspector object is not necessarily enough.

Another good reason to do so, is that sometimes you are testing your app in a browser that doesn't have ember-inspector available or installed, so this gives you a set of tools to handle this!

Here is an excellent [Intro To Ember Inspector](https://guides.emberjs.com/release/ember-inspector/) if you are not familiar 😄

## Off we go, Global instance-initializer

One of the files I keep bringing from project to project, is the so called `instance-initializer/globals.js`

```ts
ember generate instance-initializer globals
```

Here I quote the Ember.js [Application and Instances](https://guides.emberjs.com/release/applications/)

> Every Ember application is represented by a class that extends Application. This class is used to declare and configure the many objects that make up your app.

> As your application boots, it creates an ApplicationInstance that is used to manage its stateful aspects. This instance acts as the "owner" of objects instantiated for your app.

> Essentially, the Application defines your application while the ApplicationInstance manages its state.

So in this instance-initializer, we receive the application instance, which I use to create or derivate globals that keeps me productive.

```ts
//instance-initializer/globals.js

export function initialize(application) {}

export default {
  name: "globals",
  initialize,
};
```

#### First we might want to ensure we only add these while on development

```ts
//instance-initializer/globals.js

export function initialize(application) {
  let { environment } = application.resolveRegistration('config:environment')
  if ( environment !== 'production') {
  }
}

export default {
  name: "globals",
  initialize,
};
```

#### Basic useful globals

```ts
//instance-initializer/globals.js

export function initialize(application) {
  let { environment } = application.resolveRegistration('config:environment')
  if ( environment !== 'production') {
    /**
      This basically exposes the application, pretty useful because
      you can use stuff like this from the console.

      App.lookup('route:some-route').actions.doSomething();
    */
    window.App = application;

    /*
      This will gives us access to the store easily, to make fast queries or checks!
      
      Fast and easy:
      var s = App.store.peekRecord('some-model', 1);
      
      App.store.createRecord('some-model', {name: 'Alberto'})

    */
    window.App.store = application.__container__.lookup("service:store");
  }
}

export default {
  name: "globals",
  initialize,
};
```

After using App.lookup() directly for some time, I found too time consuming to time the type of object I was looking for

```ts
App.lookup("service:some-service");
App.lookup("route:some-route");
```

So I started to add a function shorcuts.

```ts
//instance-initializer/globals.js

export function initialize(application) {
  let { environment } = application.resolveRegistration('config:environment')
  if ( environment !== 'production') {

   ...//to avoid making this too long

    window.App.service = function(name) {
      return application.lookup(`service:${name}`)
    }
    // or a shortcut for every ember types.

    let objects = [
      'service',
      'controller',
      'route',
      'model'
    ];

    objects.forEach(type => {
      window.App[type] = function(name) {
        return application.lookup(`${type}:${name}`)
      }
    })
  }
}

export default {
  name: 'globals',
  initialize
}
```

While it's almost the same typing, first its truly easier to type, but also, the chrome console autocompletes, so a win.

```ts
App.controller("auth.projects");
App.model("some-model");
App.route("auth.projects");
```

And the most recent addition who actually made me write this blogpost, my ultimate gift 😅.

```ts
//instance-initializer/globals.js

export function initialize(application) {
  let { environment } = application.resolveRegistration('config:environment')
  if ( environment !== 'production') {
    class CurrentContext {
      get model() {
        return application.lookup(
          `controller:${application.lookup("service:router").currentRouteName}`
        ).model;
      }
      get controller() {
        return application.lookup(
          `controller:${application.lookup("service:router").currentRouteName}`
        );
      }
      get route() {
        return application.lookup(
          `route:${application.lookup("service:router").currentRouteName}`
        );
      }
    }


    window.App.ctx = new CurrentContext(); 
  }
}

export default {
  name: "globals",
  initialize,
};
```
We create this `CurrentContext` class just to have native getters, to avoid having to call methods. It uses the `currentRouteName` from `Service Router` to get the current model, route or controller, so this is effectively a super shortcut for quick debugging stuff!

```ts
var model = App.ctx.model; //current route model!
var controller = App.ctx.controller; //current route controller!
var route = App.ctx.route; //current route route!
```

What do you think about these shortcuts? Do you plan to use some of them? do you have any secret one you would like to share to the #emberjs community? Please do!

If you would like to use the addon version:

[ember-handy-globals](https://github.com/betocantu93/ember-handy-globals/blob/master/README.md)

You can also find it as [gist](https://gist.github.com/betocantu93/631456f4e867bd4ef73e296524485ba5)