What is the best practice to implement custom Javascript code and where should I start working with Ember first?

问题

I'm using Ember 2.7.0 of course with ember-cli.

I come from Rails, I used to put in "assets/application.js" all my javascript like, for example:

var ready = function () {

    myFunction('test');

    $('#btn-fluid').on('click', function () {
        $('#myPage').toggleClass('container')
    });
}

document.addEventListener("turbolinks:load", function () {
    ready()
})

Now with Ember where I have to put this code in my application?

I read on the web the use of:

Ember.Application.create({
   ready: function () {
});

but I don't know how to put this code: in app.js maybe, but I already have:

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

and if I create another file in the root, like for example "mycode.js" like this:

import {Ember} from 'ember';

let myCode;

myCode = Ember.Application.create({
  ready: function () {
    console.log('Test!');
  }
});

export default myCode;

and import it in application using ember-cli-build.js here:

... app.import('mycode.js');

it compile the big js with my code, but it doesn't work at all my ready function.

How to do?

I have to use Components? Maybe an application component?

Which is the best Ember way for top performances?

回答1:

To start working with Ember is a must to know Ember's structure and the way Ember works, Simply you need to use Ember guideline to get the best performance. I will explain you some steps and example and I hope it will help you to understand more.

First of all check this image

1. Review Ember Guides and API Docs

In addition, it's a good to review this repository on Github as well. https://github.com/emberjs/guides/ which will help developers to get used to Ember.

2. Install Ember-CLI

Ember-CLI is a command line interface which has been designed for creating Ember apps that strongly favor convention over configuration.

3. Install the Ember Inspector Extension

The Ember Inspector Extension is super-useful for debugging your Ember app.You may also find Chrome app on Google play.

4. Read “From Rails To Ember”

Since you know Ruby on Rails and you are a developer of that, it is essential that you read the tips compiled in From Rails To Ember.

5. Get to Know Ember.Component

A simple way to think of an Ember component is that it is a combination of controller and view, isolated and reusable:

You should pass in the state you need to the component.

Components should communicate with their parent scope (e.g, controller or another component) by sending actions.

Parent scope (e.g., controller or another component) communicates with the component by changing the data state that it has passed to the component.

As an example I am going to explain some part of your code. You have this

 $('#btn-fluid').on('click', function () {
        $('#myPage').toggleClass('container')
    });

and probably this is your HTML code

<a id="btn-fluid">Whatever for CLICK </a>
<div id="myPage" class="">dummy text </div>

However, in Ember what would be the best practice to use Actions in your Route or Controller to define your action function for example your code in Ember will be something like this :

myPage: null,
actions: {
    clickOnbtnFliud() {
        this.set('myPage', 'container');
    }
  }

and HTML in the same template for the controller would be like

<a {{action 'clickOnbtnFliud'}}>Whatever for CLICK </a>
<div class="{{myPage}}">dummy text </div>

In Summary, You may use Components as you need which is the best practice for your Ember Application but you need to understand where you have to create that.

You rarely need to edit Ember-Cli-Build.js unless you want to insert extra plugins library or ... but I don't recommend you to insert your internal JS files as you can simply convert it to Ember Native codes. For instance you don't need to do this app.import('mycode.js'); but you can simply create your Route and add your custom code like I said as an example before to your Route or Controller or Components.

What I can assure you is if you user Ember in the way that you can find in Guidelines in Ember website, You don't need to worry about performance.Just try to user Ember Native way to implement your code.

Last word, As much as possible keep yourself motivated to use EmberAddons rather than thirdparty plugins and always choose the best updated addons not all of them. Search for best Addons and popular ones and use it.

Hope this guide help you.

来源：https://stackoverflow.com/questions/39402054/what-is-the-best-practice-to-implement-custom-javascript-code-and-where-should-i

标签

performance

ember.js

ember-cli

ember-components