emberjs - best practice to built an app? - javascript

I'm here cause I ask me some questions about emberjs framework and the best way to built an app with it... There are some questions that I hope someone can answer to me :
Is there any built-in system to manage memory efficiently ?
How to manage the controllers/views/models to be instanciated and destroyed during the app lifecycle ?
Have we to declare all our controllers and views at the starting of the app ?
Is there a way to auto-instantiate an view's controller when a the view is added to the DOM by the main controller (or the stateManager) ?
To resume my situation, I've testing ember's features and understanding all of that pretty well. But now, I'm a little bit confusing and don't know how to structure my app. When to instanciate views and its controllers, where and when to destroy view's controller for memory performance, etc...
Is there some of you that have been like me at this time and have some answers for me ?
All answers and help is really appreciated and I thank you already now for your feedback(s)
See you guys !
Edit : I'm using emberjs with requireJs to be able to separate my javascript files. Is there any best solution or built-on one to do that ?
(sorry for my english)

These links should help.
https://stackoverflow.com/questions/9241735/tutorial-or-pdf-for-ember-js
http://ngauthier.com/2012/02/playing-with-ember.html
http://www.infoq.com/articles/emberjs

requirejs isnt suitable for emberjs, Ember is build on top of a simpler require() from minispade.js, which isnt AMD.
Someone suggested me 2 cool grunt tasks to work with ember.js
grunt-neuter : just use require('module'), so neuter can concat your app in the right order
grunt-ember-template : compiles your template file into one global template.js, easy to work with.
i personally manages my app like HMVC, and i require each module files into its own moduleController, my app.js only inits each modules index controller, so i know what module is loaded when i look at my app.js
- app.js
- modules/
-- module1
- module1Controller.js // initiate this in the app.js, which ain't required for ember
- module1Model.js // (if non ember) returns static methods that can be used by other modules
- module1View.whatever // this should be compiled into the template.js, just easier to manage in the same folder
-- module2
-- module3 ...

Related

Using stickit with Backbone in Webpack

I'm migrating my code from 'vanilla' to WebPack. Previously the backbone.js and backbone.stickit.js were loaded in index.html so that the code that was running later has seen stickit() function under Backbone.View.prototype (which is what my views extend from.
However, after migrating to WebPack I've started getting errors, that this.stickit() is not defined, which I've get rid of via adding the require to every JS file defining views extending from Backbone.View:
import Backbone from 'backbone';
require('backbone.stickit/backbone.stickit');
I don't feel good about that solution. In that specific case it is not so bad becasue my views explicitely use stickit. However, there are modules and extensions that alter the default behaviour, and I'd like to define them in one place.
How should I go about handling it? I've got a concept of importing Backbone, applying all plugins, and re-exporting it:
import Backbone from 'backbone';
require('backbone.stickit/backbone.stickit');
....
const Backbone2 = Backbone;
export {Backbone2};
which looks a bit too tricky...
How should I go about it? Shouldn't the webpack layer contain only one copy of Backbone after build, no matter in how many places it was imported, and which plugins were required?

Dynamic loading of modules and components at runtime in Angular 4

I've been looking to develop a method for loading modules and/or components into an AOT-compiled Angular 4 application and been stymied by a variety of solutions that never quite seem to get me where I want to be.
My requirements are as such:
My main application is AOT compiled, and has no knowledge of what it is loading until runtime, so I cannot specifically identify my dynamic module as an entry component at compile time (which is explicitly necessary for the 'dynamic' component loading example presented on Angular.io)
I'd ideally love to be able to pull the code from a back end database via a GET request, but I can survive it simply living in a folder alongside the compiled site.
I'm using Webpack to compile my main application, breaking it into chunks - and so a lot of the SystemJS based solutions seem like dead ends - based on my current research, I could be wrong about this.
I don't need to know or have access to any components of my main application directly - in essence, I'd be loading one angular app into another, with the dynamically loaded module only perhaps having a few tightly controlled explicit interface points with the parent application.
I've explored using tools like SystemJsNgModuleLoader - which seems to require that I have the Angular compiler present, which I'm happy to do if AOT somehow allowed me to include it even if I'm not using it elsewhere. I've also looked into directly compiling my dynamic module using ngc and loading the resulting ngfactory and compiled component/module, but I'm not clear if this is at all possible or if so - what tools Angular makes available to do so. I have also seen references to ANALYZE_FOR_ENTRY_COMPONENTS - but can't clearly dig up what the limitations of this are, as first analysis indicates its not quite what I'm looking for either.
I had assumed I might be able to define a common interface and then simply make a get request to bring my dynamic component into my application - but Angular seems painfully allergic to anything I try to do short of stepping outside of it alltogether and trying to attach non-angular code to the DOM directly.
Is what I'm trying to do even possible? Does Angular 2+ simply despise this kind of on the fly modification of its internal application architecture?
I think I found an article that describes exactly what you are trying to do. In short you need to take over the bootstrap lifecycle.
The magic is in this snippet here.
import {AComponentNgFactory, BComponentNgFactory} from './components.ngfactory.ts';
#NgModule({
imports: [BrowserModule],
declarations: [AComponent, BComponent]
})
export class AppModule {
ngDoBootstrap(app) {
fetch('url/to/fetch/component/name')
.then((name)=>{ this.bootstrapRootComponent(app, name)});
}
bootstrapRootComponent(app, name) {
const options = {
'a-comp': AComponentNgFactory,
'b-comp': BComponentNgFactory
};
https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429

What are the differences between load angular dependencies and what is the best way to share modules?

What is the difference between those ways of load modules?
angular.module('CoreApp', ['...','...','...','...']); //parent module
angular.module('MainApp1', ['CoreApp']); //child 1
angular.module('MainApp2', ['CoreApp']); //child 2
angular.module('CoreApp', ['...','...','...','...','MainApp1','MainApp2']); //parent module
angular.module('MainApp1', []); //child 1
angular.module('MainApp2', []); //child 2
...
Apart from that, maybe I'm doing it wrong. My mainApps are going to run in different domains(mainapp1.com and mainapp2.com). I have some headers(login,menus) and footers that i want to share it instead of copying and changing them on each module. Of course i have directives and services(such a translate services).
I don't know what is the best way to do this. I thought on create a private bower package with the coreapp and load it in the other projects.
I also want that the development process will be much confortable as possible.
Is there any better idea?
Thanks
There will be only one main module per application.
You can create sub modules based on the parent module.
I don't think you can run sub modules in different domain, because of the fact that sub modules will loaded/instantiated after the main module.

Using Angular Dragula without RequireJS

I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module?
The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation. I've looked at the code and don't see how to load the module without adding RequireJS to my project (which I don't want to do). Am I stuck with either not using this module or adding Require or is there a way to use this without Require?
OK, after help from those who commented (thanks everyone!), I was able to get this to work. There are a couple things that you need to do. First, I was bundling this module with the rest of my modules and trying to call it. That will not work because it needs to initialize with a parameter (angular). Therefore, you need to do the following:
Add a reference to angular-dragula.js (or the min version) to your index.html page below the declaration for angular but above where you create your app.
When you declare the dependencies for your app, specify angularDragula(angular) (not in quotes).
Use dragula as you normally would. If you need to access the service, the name would be angularDragula.
For example, here is my declaration of app:
var app = angular.module('app', [
'ngRoute',
angularDragula(angular)
]);
And then to get a simple list to be drag and drop capable, this is my html:
<div dragula='"bag-one"' dragula-model="vm.items">
<div ng-repeat="item in vm.items">{{ item }}</div>
</div>
Note that I do not declare angularDragula anywhere, unlike the examples. In the example the author gives, he requires angular and creates the angular variable and then he requires angular-dragula and creates the angularDragula variable. This is not needed if you are not using RequireJS as long as you load the scripts in the right order.

Exposing application scripts to certain scripts only

uhh it's hard to come with a right title for this problem excuse me.
In a backbone.js application i am building. Models, Views, Templates are all in separate javascript, html files. I want to export the Models, Views and Templates to the application bootstapper file (app.js) without polluting the global variable i.e doing window.App.Model = myModel; that. By export i mean make the code inside the files available to app.js for initialization and running
How do i go about doing this?
Are there any patterns that will solve the problem? Could you provide me a example
Description
In cases where models,views and templates are split to many disparate files the application bootstrapper file app.js should have some means to access these M,V,C components. Hence common approach is to do below inside the model.js file
window.App.Model.PersonModel = Backbone.Model.extend({});
App.js
var instance = new window.App.Model.PersonModel();
var personView = new window.App.Views.PersonView({model:instance});
Finally you see that everything derives from the Global object App which i think is not safe, improper and weak way to build application dependencies
Suggestions
Just to the above question, could someone suggest a template loading library(javascript templates regardless of engine used) that can be used to load the templates
Take a look on RequireJS, which support asynchronous module definitions/loading. You would have to rewrite your modules to and app.js to satisfy AMD api, but it would take only few strings of code.

Categories

Resources