To provide direction on how to setup an EmberJS project that won't just consist of a couple giant files. Once you've watched several of the many EmberJS tutorials out there, you start to come across a common theme - everything is coded in 2 files, the app.js and the index.html. This is great in the early part of the learning process, but at no point having 3 developers all working in the same file is going to work. Here's a few options.
Option 1
It's really simple to to just include all the individual files in the index.html. It's not pretty but it's certainly the fastest way to get this going. Setup the folder structure as desired, break up the files however you want, and then do something like this:
<script src="js/models/note.js"></script>
<script src="js/controllers/notesController.js"></script>
<script src="js/controllers/selectedNoteController.js"></script>Option 2
Combine RequireJS with EmberJS. I found a really good post on how to do this, but it felt like a step backward. I like the idea of RequireJS, but the implementation felt messy. You can read up on this here: http://www.thecollman.com/blog/2013/06/20/integrating-emberjs-and-requirejs-part-1
But then right after I would highly recommend reading Tom Dale's thoughts on why they didn't just add this into Ember in the first place: http://tomdale.net/2012/01/amd-is-not-the-answer/ Now since I'm coming at this from a high level, I'd say after reading the first post, and being unfamiliar with the inner workings of RequireJS, I tend to agree, and going to a build system seems much more appealing, as it does come with a plethora of other benefits.
Option 3
Use a build system. Sadly there's no real winner in this space, no defacto standard I can lean on. But having said that, I like what the folks behind Yeoman have been doing and although the installation and setup is a bit tedious, it does work. It uses technologies like Bower, Grunt and Compass to basically run an emberJS specific generator which sets up a project to the point that you can start coding right away and have a server live reload your web page as you code. You can get started by following the instructions here:
https://github.com/yeoman/generator-ember/blob/master/readme.md
I tried to avoid installing Ruby but in the end I did need it to get everything working. There are a few assumptions made by the authors (whom I would guess to be serious Ruby coders) that someone new to this whole thing would not know, regarding primarily Ruby and Compass. And that is on how to install them:
- First grab and install Ruby and make sure you let the installer add it to the path. http://rubyinstaller.org/downloads/
- Then head on over to the Compass page and follow the instructions provided there| http://compass-style.org/install/
- Now you should be able to run Compass and Gem from the command line
One thing you may notice is that several of the libraries, including Ember and Handlebars, are a bit out of date. If you put your command prompt inside the project folder and run "bower update", it will go out and get updated versions of these libraries. HOWEVER, bower looks to a file called bower.json when updating to find out what the update rules are:
[...]
"dependencies": {
"ember": "~1.2.0",
"ember-data-shim": "~1.0.0-beta.2",
"bootstrap-sass": "~3.0.0"
[...]
So be sure to update these version numbers to the versions you would like the project to be built on, then run "bower update" again.
Conclusion
You can use Yeoman to setup pretty much any project type you want, it's not restricted to just Ember. It's a great little tool for evaluating the tons of frameworks that are out there today, often in several different implementations. I've used it to setup Angular projects, Backbone, etc. Here's a list to peruse: http://yeoman.io/community-generators.html
In closing, I'd like to point out that ultimately the choice is yours on how you structure your next EmberJS project. This will maybe aid in making that choice easier.
Handy Sublime Text Tip when working with Ember & Handlebars
By default, Sublime does not recognize .hbs files - which are effectively just HTML files, so you lose the pretty color coding and such. Just remember to install the Handlebars package in Sublime and all will be well again in the world. There's also Ember.JS Snippets which has some nifty auto-completion stuff, and of course Emmet.
