How to create a dependency graph of components in Ember? - ember.js

I'm trying to navigate through a large Ember project and would like to create a visual graph of the component tree.
Is there a way to parse a .hbs file and create a dependency graph of the components and sub-components in it?
Is there a way to do the same for an Ember route?
What I've found
I've found dependency-cruiser but not sure how it could work to parse through .hbs files https://github.com/sverweij/dependency-cruiser

Related

Zend Framework, Architecture with Doctrine

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...

Internal autolinking in Ember.js

I've tasked myself with implementing a twitter clone in Ember.js in order to get more familiar with the framework. I've hit a bit of a snag however when it comes to implementing autolinking in the tweet.
There is an existing plugin that does external links (ex. http://www.google.com) well but doesn't work well for internal links (like #handle or #hashtags) which should as it should be implemented as a LinkComponent but I can't figure out how to insert one from a helper.
source code: autolink helper (relevant unit test)
For now I have just had the helper insert a <a/> tag but this sucks as it unloads the page and fetches everything fresh from the server.
Anyone have any suggestions about how best to implement this part of my Ember app?
Figured it out myself - I converted the helper into a component and added a click listener for bubbled click events from the child links which then get passed to the router:
https://github.com/whoward/ember-twitter-clone/commit/93af68d9f504b8b8972487e6c09851d3523a3678

ember.js: prepare code to move from ember 1.x to ember 2.0

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

EmberJS view components and separate data store

I'm looking at creating a google maps component. But I would like it to be self contained so it will have its own model, controllers and views. So for example the component will fetch its own data from the server and I'll also be able to refresh the data when needed. Ideally I'd simply add the component to the current template that is showing, so for example: {{map-view}} and then everything the component needs to do will take care of its self.
The component will also need to listen to triggered events from other controllers as a user will be able to search for a specific location and the map will need to change its position.
Is this possible to do in EmberJS? As I haven't found anything like this, specially when having its own model. I know there is a component in EmberJS but it seems very limited. Am I wrong in thinking this?
the controller cannot have its own model all values must be passed to component. Please refer to ember docs and this Discussion
You can make a google map component and pass the location and marker data to the component. this data will get updated due to ember data binding.
so you can have something like this
{{map-view location=userEnteredValue}}
you can search for ember component talk by Kris Selden on youtube which includes a google map component good for you to start with.
updated
https://gist.github.com/krisselden/8189650

Separate files for Ember handlebars templates in a Middleman App

I have multiple Ember apps that live in a Middleman app. The current directory structure is
[app-name]
components
helpers
source
assets
img
css
js
// jQuery for other pages
app.js
// An ember app
fullscreen
components
controllers
models
routes
views
app.js
// Another ember app
sandbox
components
controllers
models
routes
views
app.js
demos
// These currently contain the templates, in script tags
fullscreen.erb
sandbox.erb
I'm trying to figure out how I can move the templates out of the script tags. At this point, I've spent quite a bit of time trying to get various solutions to work:
https://github.com/mrship/middleman-ember
https://gist.github.com/GutenYe/4364010
http://nerdyworm.com/blog/2013/05/06/ember-dot-js-and-middleman/
This last one I had working at some point, but can't get it working again now.
What's the simplest way to accomplish this? I am new to Sprockets and Rack, which is making this harder for me to sort through.
Generelly its not hard to build this by yourself. U just need a JS runtime, compile the templates, and put them into Ember.TEMPLATES.
Have a look on precompilation: and the TEMPLATES Hash