My question is: Can someone direct me in moving from controller based application to component base application?
I am building a map application for my dog training club. We are specialized in helping finding missing people.
In order to organize our training, we need an application to draw trails and add items on them etc.
I've started an app using Ember-Cli and OpenLayers-3. The application is working nicely, but I would like to move the code from controller based to component base approach.
I would like also to use more routing as at the moment, I have only one route and all user interactions are handled using actions.
I've setup a repository on github for those who would be kind enough to help me:
https://github.com/mylen/mantrailling
if you want to checkout the code and test the app localy, you'll need to modify the referer using a header mod in your navigator to use http://demo.melard.fr
You can see a beta of the website at that page :
http://recherche.utilitaire.melard.fr/beta/map
Thank you in advance,
First, we should clarify the intended uses of components, controllers and routes in ember.js.
Components are similar to Views, but they are isolated and therefore used to create reusable pieces of code, that handle the visual representation of your models.
Controllers are mainly used to decorate your models, but also to hold application state.
Routes represent you current application state. They are responsible for loading your models and to initialize your controllers.
To solve your first problem (controllers -> components), you only need to move all view related stuff, and only this, into components. Your code that decorate your model, for example the active flag of a way-point, remains in the controller. You only need to bind the data of your models/controllers to the components, via embers data binding. (http://guides.emberjs.com/v1.11.0/components/passing-properties-to-a-component)
Your second problem (use routes) is a bit harder to solve, I think. First you need to find all of the states your app currently have. After that, you should move your model loading and saving stuff into this routes.
Edit
Some references describing the problem.
https://github.com/ef4/rfcs/blob/routeable-components/active/0000-routeable-components.md
https://www.youtube.com/watch?v=QgycDZjOnIg
Edit 2
Your question is highly related to How to move ember from 1.x to 2.0, because the changes you mentioned will come along with ember 2.0.
Here are some additional links that describe how to prepare best for this upgrade.
https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice
http://discuss.emberjs.com/t/what-is-a-good-way-to-do-this-in-ember-2-0-no-itemcontroller-no-arraycontroller/6649
You can find a lot of resources if you search for ember 2.0.
Edit 3
Here is I think the most informative source for keeping up with new Ember releases:
https://www.youtube.com/watch?v=wsydQzQF4Ww
Related
I know this question might seem a little duplicate but the other version of this question is old and some of the content (such as Views) aren't even a part of ember anymore.
I'm about 4 weeks into my internship as a front-end developer working with EmberJS. I still don't understand when it's better to use the route over the controller or vice-versa. It seems to me that every action in the route can also be used in the controller.
The one recent thing I heard was that ember routes should be stateless where as controllers should be stateful.
What is the current state of controllers and routes. When should one be used over the other?
Consider the following example to understand the state of a controller (or route, or anything), in simple terms and in current context -- lets say you have a page (like a form) with three tabs; each tab can be considered as a state - it would call different components based on the state (or the tab you are in). Now if you would happen to go back for some reason, and hit the form link again, you would see that the state would remain the same. (if you were on tab 2 when you hit back, on returning to the form, you would still be on tab 2).
So to maintain these states, controllers are the way to go, since they are singletons. Route would have lost that information, and started fresh. So basically your variables/objects in a controller would define the 'state'.
Route-actions can be as easily used as controller actions- see https://github.com/DockYard/ember-route-action-helper. So if your template for this route is just using model as the object directly, and you don't need to maintain the 'state', you can pretty much do without your controller.
But if your template was using variables which needed manipulation, you would need controller.
Hope this helps!
im learning Zend Framework (3) ... I installed Doctrine because i do not want to write sql queries to learn all other stuff faster....
First Question:
So know i configured a factory that loads me the doctrine entity manager to my Controllers (with DI).
So its really simple to get my entities to my controller ... e.g in my Project Controller createAction i can easy get my user entities to show them in my project form (project <--> user many-to-many).
But know im struggling, would it be better to create repository classes and inject this to my controllers instead of the doctrine entity manager, so i can filtering etc all my entities?
Second question:
When i want to filter my projects (e.g by user)
where should i do this ... in simpler slim projects i created Collection classes and injected them all of my entities and after that i called a filter method in my collection ... but the problem there is, i just loaded all entities from my database to the collection. In larger application i think there are to many entities loaded from the Database?
Third Question (Conclusion):
When i want to load data from the db to my Controllers whats best Practice here?
Load it from the entity manager ?
Load it from a Repository (the Repository load it from the entity manager)?
Load it from a Collection (the Collection loads data from the repository class and the repository loads data from the entity manager)?
I did not thought about Pagination #all... thats what i have to do next ... but there are many questions similar to my other questions.
(I know there is a zend module for this .. but have no idea how this works.. have too learn this too)
Im thankful for every hint, meaning etc.
Answers to this question are possibly all opinion based. I would say it is all about personal preference. There is no such thing as best practice here it all depends on what you will do in your controller. On top of that you can easily get a repository from your entity-manager if you need it:
$userRepository = $entityManager->getRepository('Application\Entity\User');
A more common might be to make a custom UserService (a wrapper class) around your repository/entity-manager that you populate with the custom methods you would like to use with your User resources.
I hope this helps you a bit...
I seem to be getting more and more confounded at what appears, on the surface at least to be pretty basic architectural questions regarding building ember apps.
Which Controller type?
In the last month or so, I've seen people implement controllers through Ember.Controller, Ember.ArrayController, Ember.ObjectController, and Ember.ArrayProxy. Removing ArrayController and ArrayProxy (due to them being identical), what are common use cases between each type?
So far, i've been able to gather that:
ArrayControllers/Proxies should be used when you have n elements within the view you intend to control
ObjectControllers should be used when the view is simple enough to maintain it's state in a single object, or be a single instance of a model's object.
Controllers --- ? No idea.
What are some basic differences between the controller types? There doesn't seem to be concrete information on when to use which, and for which use case. The API docs are good at telling me the nitty gritty of each of them, but not WHEN to use each.
The relationship between a View and a Controller can be baffling
When a View is connected via a routes ConnectOutlets function call, what exactly happens between the controller and the view?
Are events tied into the view itself (which seems to be the case) and if so, where on earth do you interact with the controller singleton to perform CRUD-esq things on its properties? this.get('controllerName') doesn't seem to do the trick, and nearly each post or tutorial or code sample out there does this a different way.
Models that aren't
I realize that Ember Data looks to help solve some of the more irritating parts of dealing with data and keeping it in sync, but at a larger perspective, in the concept of "MVC", ember doesn't really seem to have a Model of any kind. It's just some object that gets subclassed from a specific thing and then tracked....somewhere? Somehow? Magical?
#trek sufficed that an Ember.Object could manage ajax'ing data and handling state on the client just fine, but if you look at something like the todomvc.com ember app, it uses a localStorage paradigm that is COMPLETELY different in implementation then everything i've looked at.
How EXACTLY should the 'Model' part of the MVC equation be done here?
Views make me want to murder children
There seems to be a significant number of ways to construct a "view" in terms of displaying markup to a user.
ContainerViews, using subviews / childviews
nested outlets
Handlebars templates + an outlet
using #each foo in controller
Injection through literals (template: Ember.Handlebars.compile('<h1>foo</h1>') etc)
With that in mind, what's the 'proper' way to build modular UI components with ember? This more than anything is a major pain point for the adoption of this framework for me.
I love the direction that Ember is going with application development on the web. The concepts seem simple, but the verbosity is that of Objective-C (which makes sense given it's lineage) but I swear to god I feel like i'm fighting the god damned framework more than i'm actually working on my application. The verbosity of the syntax and the lack of structured documentation outside of API documentation (which lets face it, 300k of javascript is a significant amount of code to throw some breakpoints down and try to debug your issues).
I realize the challenge that you guys are up against, but hopefully this at least makes you pause for a minute and think of how you could make life easier for the incoming developer who's worked with other frameworks (or hell, even worked within an MVC framework, like rails or django or backbone or angular) and say "this is how we think ember should be used".
Take some of the opinionated software design decisions and apply them toward the community. We'll do nothing but be cheerleaders for you if you do it, promise.
Please don't hurt any children. AFAIK the ember-core team are all over 18, so any ember-view-related frustration is clearly better directed towards adults. With that in mind...
Which Controller Type?
You've got the "what" right, but maybe missing the "why". Controller can be a little misleading, especially coming from rails. Think of these controller singletons as representing the state (in-memory) of your application.
Which kind of controller to use depends on what is required for that part of your application. For example, a back-of-napkin sketch for any app might have a topnav, postList, postDetails section. In ember, each is represented by one or more view/controller pairs. In this app I would expect to see ApplicationController and NavigationController extending Ember.Controler while postList would extend ArrayController and PostDetails would be an ObjectController.
You could do it all using just Ember.Controller but ObjectController and ArrayController are really useful for wrapping model data. Any non-trivial ember app will probably use all three.
The relationship between a View and a Controller
A controller's job is to provide the context in which the view will be rendered. Ideally you'd like to keep logic out of views, so a typical controller will have lots of computed properties to do things like:
transform data from the underlying model objects
sort/filter/select a list of objects
reflect application state
whats the deal with connectOutlets? This is where you should be using the requested route/context to decide which views/data should be plugged into the outlets of your application. The controller's connectOutlet method has a bunch of magic to make it easy, but maybe too much magic. What happens (afaik) when you call: parentcontroller.connectOutlet 'child' is
Ember creates an instance of ChildView
The {{outlet}} handlebars helper in parentController's view is bound to this childView instance
The childView is rendered with the router.childController singleton as it's context
where to do crud stuff?: Typically in an action on the router. This seems crazy at first. Think of ember router not like rails but as a stateManager that just happens to also handle routing. In near-future router API will change to make this more clear. Anyway, use router actions to do things like create model instances, commit/rollback transactions and trigger state change. This is easy to do if you use the handlebars {{action}} helper for links/buttons as it targets the router by default.
Views on the other hand should have logic for "reacting to browser events" - that means really low-level stuff like show/hide something on mouseover or integrate with 3rd party libraries to do effects and animations.
You might find this screencast helpful in understanding how to do CRUD-esq things:
http://blog.bigbinary.com/2012/09/06/crud-application-in-emberjs.html
Models WTF?
Agreed in Ember any object could be used as a 'Model'. I think #trek does a good job of demonstrating how one might accomplish this via Ember.Object. This works great for a simple app, and six months back maybe would've been your best bet as ember-data was really immature. I'm not clear on the history of ember's todomvc app, but for sure it was written months ago. For sure it should be updated, but meantime I'd not recommend using it to learn about current ember best-practices.
Instead, you should go with ember-data. Over the last few months it has really evolved and should be the default choice for any new, non-trivial ember app. #tomdale just gave a great presentation on this topic, I'd recommend having a look: https://speakerdeck.com/tomdale/ember-data-internals
what's the 'proper' way to build modular UI components with ember?
For building modular UI components:
ContainerViews, using subviews / childviews
Injection through literals (template: Ember.Handlebars.compile ...)
For building an individual application:
nested outlets
Handlebars templates + an outlet
using #each foo in controller
Building modular UI components is a totally different problem than building an application. Ember.View and it's subclasses were designed for this purpose. You can easily extend/combine them to compose widgets with custom behaviors and share those widgets across applications.
At least that's how i've seen it done. If they are for internal use could also reference handlebars templates instead of object literals, but if planning to distribute the object literals approach seems best.
A great real-world example of this is the ember-bootstrap project. I learned a lot about working with ember-views by reading through that project's source. http://emberjs-addons.github.com/ember-bootstrap/
TLDR
Pick controller that maps to type of data being represented
Controllers provide context for the view and remember application state
Use ember data for your models
Use subclasses of Ember.View to make components
Be nice to children
I'd like some examples please of how you use Ember.Controller objects. Apart from the StateManager, I really don't find myself using Ember.Controllers much at all. In the Ember source code it says that actions should be sent to the controller, but I really don't find myself using these so much, because I abstract the views so much, and therefore use the in-built actions like click, change, and keyUp. Am I abstracting too much?
For instance, if I'm displaying a button on the page, then I'll create a new Ember.View in my controller view, and then simply include that on the page.
Most direct interaction with controllers is indeed through the StateManager/Router. The controller's main responsibility is to present data to the views for rendering. They do this by proxying to models as well as maintaining transient state.
You are also correct that a single controller can often be responsible for a hierarchy of views.
I recently did a talk about the responsibilities of various layers in Ember apps. Slides are here: http://www.lukemelia.com/devblog/archives/2012/08/23/architecting-ember-js-apps/
This website has a pretty good presentation of how to use each part of Ember's MVC, and their relationship with each other:
http://www.lukemelia.com/blog/archives/2012/08/23/architecting-ember-js-apps/
Are controllers in ember.js meant to be tied to main view areas/scenes a la iOS, or more tied to a set of data?
Is it common/wise to have several main views tied to the same controller in ember?
In iOS main portions or sections of the screen are tied to a single controller. If you want to present another main interface, say a modal window to create a new element, you (typically) have an entirely separate controller to manage that view and its data/logic.
In something like Zend Framework, you have controllers that might perform some common spinup steps of ensuring authentication, but largely the actions play the role that controllers do in iOS, handling the logic and providing the data for 1 main section or view (being the web, this usually ends up being the whole page).
What is that typical role or advised pattern for using controllers in ember?
You have a couple different questions here so I'll address them one at a time.
First, you asked if controllers should be data oriented or view oriented. In my experience both behaviors are allowable. Controllers are an excellent way to manage data sets for your application, including things like filtering and searching. Evin Grano wrote a good post about this from the SproutCore perspective and most of the concepts should apply to Ember as well: http://www.itsgotwhatplantscrave.com/2009/07/30/root-controller-paradigm/. Controllers are also well suited for controlling the application state and behavior. For example, you might put a method in a controller that is bound to as a button action elsewhere in your app. However, you should also examine Ember States to see if these might be better suited to your scenario.
Secondly, you asked about tying multiple views to the same controller. Personally, I see no concerns with this as long as the controller maintains a distinct purpose. If the views are logically related and share in the same state or data then a single controller makes sense. If you find the controller growing to cover too many different areas, you should consider splitting it into multiple controllers.
From my limited experience in Ember.js, I have regulate to the following:
The view handles user actions related to changes in the presentation layer, limited to its own instance.
A navigation controller/statemanager handles complex manipulation of what is presented (add multiple views, remove some other, etc.).
The controller responds to user actions related to the data layer.