I am new to emberjs and trying to setup the basic structure of a complex app. The majority of tutorials and the guides show the application structure of having all js code in app.js and all template code in a index.html file. This might work for a small demo app but in almost all real life cases you will want to modularize all the code and templates. From what I have been able to pick up from picecs around the web I should be able to put routes in router.js, controllers in controller folder, templates in template.hbs files etc.
The guides briefly mention that it’s possible but show no examples of what the officially supported structure is. Right now I have structured my app like this example: https://github.com/emberjs-seattle/ember-reader/tree/master/app/assets/javascripts but nothing seems to render.
After re-reading the guides it’s my understanding that I must manually include all .js files into my main html file. I was under the assumption that I only included app.js and that emberjs would then include the required files. How are the template.hbs files included?
Thanks I will check that out. Seems like grunt is the most popular way to compile handlebar templates.
Being new to all this I thought emberjs/handlebars would parse the templates.
After a lot of trial and error I finally got my setup to work. I ended up using a node precompiler that works together with a php class called Assetic. This way everything works nicely with my php framework.
I think the current guides do a good job at explaining how emberjs works but how to structure your app and how ember works with pre-compiled templates and all the options that exist needs to be improved. I got confused quite a few times on how to setup a more complex app.
Which grunt tool are most people using to precompile the handlebar templates? When I search for grunt handlebars, I see multiple projects, some doing HTML rendering, some just concatenating.
Yes, I totally agree. There were discussions about this issue before. It would be awesome if you share your solution in a blog post, so that others can benefit from it as well.
I did my skeleton project some time ago, but now official yeoman ember generator (from 0.3.0 on) is actually really good (https://github.com/yeoman/generator-ember). You get structure and pre-compilation out of the box.
Does Yeoman have strong opinions on directory structure?
We work a lot with small, reusable UI components in Backbone and have found it increasingly challenging to organize all the many assets and dependencies. I was wondering if Ember might have more of a system in place since I see so many awesome little UI widgets in Ember apps, but it sounds like people are still grouping assets in big directories by type. When scaling a project that reuses many small UI components to a large multi-page application, its extremely useful to be able to:
Keep all assets related to a particular UI component in a single directory (js, css, and template).
“Require” UI components on a page, and to declare dependencies between UI components.
Have assets preprocessed in dev mode, but served separately, and minified / concatenated in prod mode.
We couldn’t find any tool that made it easy to do all these things, and none that could manage dependencies between bundles that contain all three asset types, so we built our own, based on Grunt, and just released it under the MIT license, since we found it so useful:
In house we are loving it! But I’m not sure how much of the benefit we are getting is related to having many small, reusable UI components in large projects, and how much is applicable in the general case! To be honest, we put a lot of time into open sourcing the tool, but the response so far has been lackluster. Maybe the use cases are not as common as we thought? Or maybe we just haven’t connected with the people who stand to benefit the most? Seems like if there is a community of those people anywhere it is very likely on this list, given the rich UI in Ember apps… hence this email. I hope at least a few people find it as useful as we do!!!
Not sure whether I should start a new thread but my question also concerns application structure.
I am looking to write a fairly large application and I am rather perplexed with the need for all classes to be added to the Application object. I was rather hoping to write this app using a composite modular approach (similar to that advocated in the following project https://github.com/scottburch/river-js)
I was wondering whether anyone had tried to use ember in similar scenarios perhaps leveraging requires for example.
@stefan.penner has been working on a https://github.com/stefanpenner/ember-app-kit/ which we hope will be adopted as a canonical structure for tools like ember-tools and the yeoman generator.
