diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 000000000..eb9c6ae36
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - "1.9.3"
+script: bundle exec rspec spec && bundle exec middleman build
diff --git a/Gemfile b/Gemfile
index 0f066a37c..8ac2f0b00 100644
--- a/Gemfile
+++ b/Gemfile
@@ -27,6 +27,7 @@ group :test do
   gem "rspec"
   gem "capybara"
   gem "poltergeist"
+  gem "hashie"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
diff --git a/Gemfile.lock b/Gemfile.lock
index 67876b255..151040176 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -60,6 +60,7 @@ GEM
     ffi (1.9.6-x86-mingw32)
     haml (4.0.6)
       tilt
+    hashie (3.4.0)
     highline (1.6.21)
     hike (1.2.3)
     hitimes (1.2.2)
@@ -203,6 +204,7 @@ DEPENDENCIES
   builder
   capybara
   coderay!
+  hashie
   highline
   listen
   middleman (~> 3.0)
diff --git a/data/guides.yml b/data/guides.yml
index 35be6795d..0a44e7b56 100644
--- a/data/guides.yml
+++ b/data/guides.yml
@@ -5,6 +5,14 @@
       url: ""
       skip_sidebar: true
 
+- title: "Getting Started"
+  url: 'ember-cli'
+  chapters:
+    - title: "Installing Ember"
+      url: "index"
+    - title: "Glossary"
+      url: "glossary"
+
 - title: "Getting Ember"
   url: 'getting-ember'
   chapters:
@@ -198,8 +206,6 @@
       url: "built-in-views"
     - title: "Manually Managing View Hierarchy"
       url: "manually-managing-view-hierarchy"
-    #- title: "Building Reusable Views"
-      #url: "building-reusable-views"
 
 - title: "Enumerables"
   url: 'enumerables'
@@ -375,12 +381,6 @@
     #   url: "debugging_and_configuration/setting_ember_global_flags"
     #   skip_sidebar_item: true
 
-- title: "Deprecations"
-  url: 'deprecations'
-  chapters:
-    - title: "Deprecations"
-      url: "index"
-
 - title: "Understanding Ember.js"
   url: 'understanding-ember'
   chapters:
diff --git a/lib/highlighter.rb b/lib/highlighter.rb
index 921d79181..e7f10e7e7 100644
--- a/lib/highlighter.rb
+++ b/lib/highlighter.rb
@@ -2,6 +2,7 @@
 require "coderay"
 
 module Highlighter
+  class MissingLanguageError < StandardError; end
   class << self
     def registered(app)
       app.helpers Helpers
@@ -11,6 +12,11 @@ def registered(app)
 
   module Helpers
     def _highlight(string, language, class_name=nil)
+      error_message = "Code blocks must be fenced with proper language designated. If you don't know what language to use, specify ```text.\n\n"
+      error_message << "Offending Code Block:\n\n#{string}"
+
+      raise MissingLanguageError, error_message if language.nil?
+
       language, file_name = _detect_language_and_filename(language)
 
       result = %Q{<div class="highlight #{language} #{class_name}">}
@@ -23,6 +29,7 @@ def _highlight(string, language, class_name=nil)
     end
 
     def _detect_language_and_filename(language)
+
       file_name = nil
       bare_language_regex = /\A\w+\z/
 
diff --git a/lib/toc.rb b/lib/toc.rb
index 4bb73e178..801800e15 100644
--- a/lib/toc.rb
+++ b/lib/toc.rb
@@ -57,19 +57,13 @@ def toc_for(guides)
     end
 
     def page_title
-      buffer = ""
-
-      if current_guide
-        buffer << current_guide.title
-        if current_chapter
-          buffer << ": "
-          buffer << current_chapter.title
-        end
+      if current_guide && current_chapter
+        "#{current_guide.title}: #{current_chapter.title}"
+      elsif current_guide
+        current_guide.title
       else
-        buffer << "Guides"
+        "Guides"
       end
-
-      buffer
     end
 
     def guide_name
@@ -78,9 +72,9 @@ def guide_name
 
     def chapter_name
       if current_chapter
-        return current_chapter.title
+        current_chapter.title
       else
-        return ""
+        ""
       end
     end
 
@@ -111,6 +105,10 @@ def current_guide
       end
     end
 
+    def current_guide_index
+      data.guides.find_index(current_guide)
+    end
+
     def current_chapter
       return unless current_guide
 
@@ -123,6 +121,11 @@ def current_chapter
       end
     end
 
+    def current_chapter_index
+      return unless current_guide
+      current_guide.chapters.find_index(current_chapter)
+   end
+
     def chapter_links
       %Q{
       <footer>
diff --git a/source/components/customizing-a-components-element.md b/source/components/customizing-a-components-element.md
index b5b97363d..f814594ad 100644
--- a/source/components/customizing-a-components-element.md
+++ b/source/components/customizing-a-components-element.md
@@ -18,14 +18,13 @@ To use a tag other than `div`, subclass `Ember.Component` and assign it
 a `tagName` property. This property can be any valid HTML5 tag name as a
 string.
 
-```js
-App.NavigationBarComponent = Ember.Component.extend({
+```app/components/navigation-bar.js
+export default Ember.Component.extend({
   tagName: 'nav'
 });
 ```
 
-```handlebars
-{{! templates/components/navigation-bar }}
+```templates/components/navigation-bar.hbs
 <ul>
   <li>{{#link-to 'home'}}Home{{/link-to}}</li>
   <li>{{#link-to 'about'}}About{{/link-to}}</li>
@@ -37,8 +36,8 @@ App.NavigationBarComponent = Ember.Component.extend({
 You can also specify which class names are applied to the component's
 element by setting its `classNames` property to an array of strings:
 
-```javascript
-App.NavigationBarComponent = Ember.Component.extend({
+```app/components/navigation-bar.js
+export default Ember.Component.extend({
   classNames: ['primary']
 });
 ```
@@ -47,8 +46,8 @@ If you want class names to be determined by properties of the component,
 you can use class name bindings. If you bind to a Boolean property, the
 class name will be added or removed depending on the value:
 
-```js
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isUrgent'],
   isUrgent: true
 });
@@ -65,8 +64,8 @@ If `isUrgent` is changed to `false`, then the `is-urgent` class name will be rem
 By default, the name of the Boolean property is dasherized. You can customize the class name
 applied by delimiting it with a colon:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isUrgent:urgent'],
   isUrgent: true
 });
@@ -80,8 +79,8 @@ This would render this HTML:
 
 Besides the custom class name for the value being `true`, you can also specify a class name which is used when the value is `false`:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isEnabled:enabled:disabled'],
   isEnabled: false
 });
@@ -96,8 +95,8 @@ This would render this HTML:
 You can also specify a class which should only be added when the property is
 `false` by declaring `classNameBindings` like this:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isEnabled::disabled'],
   isEnabled: false
 });
@@ -118,8 +117,8 @@ If the `isEnabled` property is set to `true`, no class name is added:
 If the bound property's value is a string, that value will be added as a class name without
 modification:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['priority'],
   priority: 'highestPriority'
 });
@@ -136,8 +135,8 @@ This would render this HTML:
 You can bind attributes to the DOM element that represents a component
 by using `attributeBindings`:
 
-```javascript
-App.LinkItemComponent = Ember.Component.extend({
+```app/components/link-item.js
+export default Ember.Component.extend({
   tagName: 'a',
   attributeBindings: ['href'],
   href: "http://emberjs.com"
@@ -146,20 +145,20 @@ App.LinkItemComponent = Ember.Component.extend({
 
 You can also bind these attributes to differently named properties:
 
-```javascript
-App.LinkItemComponent = Ember.Component.extend({
+```app/components/link-item.js
+export default Ember.Component.extend({
   tagName: 'a',
   attributeBindings: ['customHref:href'],
   customHref: "http://emberjs.com"
 });
 ```
 
-### Example
+<!-- ### Example
 
 Here is an example todo application that shows completed todos with a
 red background:
 
-<a class="jsbin-embed" href="http://jsbin.com/duzala/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<a class="jsbin-embed" href="http://jsbin.com/nefisejade/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
 
 **Note:** The binding functionality in this very simple example could also be implemented without
-the use of `Ember.Component` but by simply [binding element attributes](../../templates/binding-element-attributes) or [binding element class names](../../templates/binding-element-class-names).
+the use of `Ember.Component` but by simply [binding element attributes](../../templates/binding-element-attributes) or [binding element class names](../../templates/binding-element-class-names). -->
diff --git a/source/components/defining-a-component.md b/source/components/defining-a-component.md
index 6e6a62e46..1b159e9e2 100644
--- a/source/components/defining-a-component.md
+++ b/source/components/defining-a-component.md
@@ -6,31 +6,56 @@ create a `components/blog-post` template.
 but `post` is not. This prevents clashes with current or future HTML element names, and
 ensures Ember picks up the components automatically.
 
-If you are including your Handlebars templates inside an HTML file via
-`<script>` tags, it would look like this:
-
-```handlebars
-<script type="text/x-handlebars" id="components/blog-post">
-  <h1>Blog Post</h1>
-  <p>Lorem ipsum dolor sit amet.</p>
-</script>
-```
+A sample component template would look like this:
 
-If you're using build tools, create a Handlebars file at
-`templates/components/blog-post.handlebars`.
+```app/templates/components/blog-post.hbs
+<h1>Blog Post</h1>
+<p>Lorem ipsum dolor sit amet.</p>
+```
 
 Having a template whose name starts with `components/` creates a
 component of the same name. Given the above template, you can now use the
 `{{blog-post}}` custom element:
 
-```handlebars
-<h1>My Blog</h1>
-{{#each post in model}}
-  {{blog-post}}
+<!--- <a class="jsbin-embed" href="http://jsbin.com/tikenoniku/1/edit?output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script> -->
+<!--- The example above uses `<script>` tags to work inside of JSBin.-->
+```app/templates/index.hbs
+{{#each}}
+  {{#blog-post title=title}}
+    {{body}}
+  {{/blog-post}}
 {{/each}}
 ```
 
-<a class="jsbin-embed" href="http://jsbin.com/juvic/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+```app/templates/components/blog-post.hbs
+<article class="blog-post">
+  <h1>{{title}}</h1>
+  <p>{{yield}}</p>
+  <p>Edit title: {{input type="text" value=title}}</p>
+</article>
+```
+
+```app/routes/index.js
+var posts = [{
+    title: "Rails is omakase",
+    body: "There are lots of à la carte software environments in this world."
+  }, {
+    title: "Broken Promises",
+    body: "James Coglan wrote a lengthy article about Promises in node.js."
+}];
+
+export default Ember.Route.extend({
+  model: function() {
+    return posts;
+  }
+});
+```
+
+```app/components/blog-post.js
+export default Ember.Component.extend({
+  
+});
+```
 
 Each component, under the hood, is backed by an element. By default
 Ember will use a `<div>` element to contain your component's template.
@@ -55,9 +80,9 @@ changes to the component's element using JavaScript.
 
 Ember knows which subclass powers a component based on its name. For
 example, if you have a component called `blog-post`, you would create a
-subclass called `App.BlogPostComponent`. If your component was called
-`audio-player-controls`, the class name would be
-`App.AudioPlayerControlsComponent`.
+file at `app/components/blog-post.js`. If your component was called
+`audio-player-controls`, the file name would be at 
+`app/components/audio-player-controls.js`
 
 In other words, Ember will look for a class with the camelized name of
 the component, followed by `Component`.
diff --git a/source/components/handling-user-interaction-with-actions.md b/source/components/handling-user-interaction-with-actions.md
index daa2e0875..17e94fe94 100644
--- a/source/components/handling-user-interaction-with-actions.md
+++ b/source/components/handling-user-interaction-with-actions.md
@@ -18,17 +18,15 @@ bubble.
 For example, imagine the following component that shows a post's title.
 When the title is clicked, the entire post body is shown:
 
-```handlebars
-<script type="text/x-handlebars" id="components/post-summary">
-  <h3 {{action "toggleBody"}}>{{title}}</h3>
-  {{#if isShowingBody}}
-    <p>{{{body}}}</p>
-  {{/if}}
-</script>
+```app/templates/components/post-summary.hbs
+<h3 {{action "toggleBody"}}>{{title}}</h3>
+{{#if isShowingBody}}
+  <p>{{{body}}}</p>
+{{/if}}
 ```
 
-```js
-App.PostSummaryComponent = Ember.Component.extend({
+```app/components/post-summary.js
+export default Ember.Component.extend({
   actions: {
     toggleBody: function() {
       this.toggleProperty('isShowingBody');
@@ -36,7 +34,8 @@ App.PostSummaryComponent = Ember.Component.extend({
   }
 });
 ```
-<a class="jsbin-embed" href="http://jsbin.com/yuzena/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+
+<!---<a class="jsbin-embed" href="http://jsbin.com/ciwenemedi/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 The `{{action}}` helper can accept arguments, listen for different event
 types, control how action bubbling occurs, and more.
diff --git a/source/components/index.md b/source/components/index.md
index 2f1c7b1cf..94e59e2f9 100644
--- a/source/components/index.md
+++ b/source/components/index.md
@@ -29,4 +29,46 @@ To highlight the power of components, here is a short example of turning a blog
 application. Keep reading this section for more details on building
 components.
 
-<a class="jsbin-embed" href="http://jsbin.com/juvic/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/xexumomaru/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+
+The example above uses `<script>` tags to work inside of JSBin. Ember-cli works by file structure, so there are no `<script>` tags:-->
+
+```app/templates/index.hbs
+
+{{#each}}
+   {{#blog-post title=title}}
+     {{body}}
+   {{/blog-post}}
+{{/each}}
+```
+
+```app/templates/components/blog-post.hbs
+
+<article class="blog-post">
+  <h1>{{title}}</h1>
+  <p>{{yield}}</p>
+  <p>Edit title: {{input type="text" value=title}}</p>
+</article>
+```
+
+```app/routes/index.js
+var posts = [{
+  title: "Rails is omakase",
+  body: "There are lots of à la carte software environments in this world."
+  }, {
+    title: "Broken Promises",
+    body: "James Coglan wrote a lengthy article about Promises in node.js."
+}];
+
+export default Ember.Route.extend({
+  model: function() {
+    return posts;
+  }
+});
+```
+
+```app/components/blog-post.js
+export default Ember.Component.extend({
+
+});
+```
diff --git a/source/components/passing-properties-to-a-component.md b/source/components/passing-properties-to-a-component.md
index 050c0363f..ebe9b15ab 100644
--- a/source/components/passing-properties-to-a-component.md
+++ b/source/components/passing-properties-to-a-component.md
@@ -4,11 +4,9 @@ template scope in which it is used.
 For example, imagine you have a `blog-post` component that is used to
 display a blog post:
 
-```handlebars
-<script type="text/x-handlebars" id="components/blog-post">
-  <h1>Component: {{title}}</h1>
-  <p>Lorem ipsum dolor sit amet.</p>
-</script>
+```app/templates/components/blog-post.hbs
+<h1>Component: {{title}}</h1>
+<p>Lorem ipsum dolor sit amet.</p>
 ```
 
 You can see that it has a `{{title}}` Handlebars expression to print the
@@ -16,8 +14,8 @@ value of the `title` property inside the `<h1>`.
 
 Now imagine we have the following template and route:
 
-```js
-App.IndexRoute = Ember.Route.extend({
+```app/routes/index.js
+export default Ember.Route.extend({
   model: function() {
     return {
       title: "Rails is omakase"
@@ -26,8 +24,8 @@ App.IndexRoute = Ember.Route.extend({
 });
 ```
 
-```handlebars
-{{! index.handlebars }}
+```app/templates/index.hbs
+
 <h1>Template: {{title}}</h1>
 {{blog-post}}
 ```
@@ -36,7 +34,7 @@ Running this code, you will see that the first `<h1>` (from the outer
 template) displays the `title` property, but the second `<h1>` (from
 inside the component) is empty.
 
-<a class="jsbin-embed" href="http://jsbin.com/japiv/1/embed?live">JS Bin</a>
+<!---<a class="jsbin-embed" href="http://jsbin.com/wucabozico/1/embed?live">JS Bin</a>-->
 
 We can fix this by making the `title` property available to the
 component:
@@ -48,8 +46,8 @@ component:
 This will make the `title` property in the outer template scope
 available inside the component's template using the same name, `title`.
 
-<a class="jsbin-embed" href="http://jsbin.com/japiv/2/embed?live">JS Bin</a>
-<script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/reyazoseru/2/embed?live">JS Bin</a>
+<script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 If, in the above example, the model's `title` property was instead
 called `name`, we would change the component usage to:
@@ -58,8 +56,8 @@ called `name`, we would change the component usage to:
 {{blog-post title=name}}
 ```
 
-<a class="jsbin-embed" href="http://jsbin.com/japiv/3/embed?live">JS Bin</a>
-<script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/wesuvozifo/2/embed?live">JS Bin</a>
+<script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 In other words, you are binding a named property from the outer scope to
 a named property in the component scope, with the syntax
@@ -71,9 +69,8 @@ values stay in sync. In the following example, type some text in the
 text field either in the outer template or inside the component and note
 how they stay in sync.
 
-
-<a class="jsbin-embed" href="http://jsbin.com/fehewu/embed?live">JS Bin</a>
-<script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/cajarokava/1/embed?live">JS Bin</a>
+<script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 You can also bind properties from inside an `{{#each}}` loop. This will
 create a component for each item and bind it to each model in the loop.
@@ -83,5 +80,5 @@ create a component for each item and bind it to each model in the loop.
   {{blog-post title=post.title}}
 {{/each}}
 ```
-<a class="jsbin-embed" href="http://jsbin.com/yexeyi/embed?live">JS Bin</a>
-<script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/kobakujejo/1//embed?live">JS Bin</a>
+<script src="http://static.jsbin.com/js/embed.js"></script>-->
diff --git a/source/components/sending-actions-from-components-to-your-application.md b/source/components/sending-actions-from-components-to-your-application.md
index b6bb01403..14bd94f4f 100644
--- a/source/components/sending-actions-from-components-to-your-application.md
+++ b/source/components/sending-actions-from-components-to-your-application.md
@@ -44,8 +44,8 @@ So how do you trigger sending a component's primary action? After
 the relevant event occurs, you can call the `sendAction()` method
 without arguments:
 
-```js
-App.MyButtonComponent = Ember.Component.extend({
+```app/components/my-button.js
+export default Ember.Component.extend({
   click: function() {
     this.sendAction();
   }
@@ -72,8 +72,8 @@ this.sendAction('action', param1, param2);
 For example, imagine we're building a todo list that allows the user to
 delete a todo:
 
-```js
-App.IndexRoute = Ember.Route.extend({
+```app/routes/index.js
+export default Ember.Route.extend({
   model: function() {
     return {
       todos: [{
@@ -93,9 +93,7 @@ App.IndexRoute = Ember.Route.extend({
 });
 ```
 
-```handlebars
-{{! index.handlebars }}
-
+```app/templates/index.hbs
 {{#each todo in todos}}
   <p>{{todo.title}} <button {{action "deleteTodo" todo}}>Delete</button></p>
 {{/each}}
@@ -109,8 +107,8 @@ action.
 In the component, when triggering the primary action, we'll pass an
 additional argument that the component user can specify:
 
-```js
-App.ConfirmButtonComponent = Ember.Component.extend({
+```app/components/confirm-button.js
+export default Ember.Component.extend({
   actions: {
     showConfirmation: function() {
       this.toggleProperty('isShowingConfirmation');
@@ -124,9 +122,7 @@ App.ConfirmButtonComponent = Ember.Component.extend({
 });
 ```
 
-```handlebars
-{{! templates/components/confirm-button.handlebars }}
-
+```app/templates/components/confirm-button.hbs
 {{#if isShowingConfirmation}}
   <button {{action "confirm"}}>Click again to confirm</button>
 {{else}}
@@ -137,19 +133,17 @@ App.ConfirmButtonComponent = Ember.Component.extend({
 Now we can update our initial template and replace the `{{action}}`
 helper with our new component:
 
-```handlebars
-{{! index.handlebars }}
-
-    {{#each todo in todos}}
-      <p>{{todo.title}} {{confirm-button title="Delete" action="deleteTodo" param=todo}}</p>
-    {{/each}}
+```app/templates/index.hbs
+{{#each todo in todos}}
+  <p>{{todo.title}} {{confirm-button title="Delete" action="deleteTodo" param=todo}}</p>
+{{/each}}
 ```
 
 Note that we've specified the action to send by setting the component's
 `action` attribute, and we've specified which argument should be sent as
 a parameter by setting the component's `param` attribute.
 
-<a class="jsbin-embed" href="http://jsbin.com/mucilo/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/tihavobiki/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 ### Sending Multiple Actions
 
@@ -173,7 +167,7 @@ In this case, you can send the `createUser` action by calling
 `this.sendAction('submit')`, or send the `cancelUserCreation` action by
 calling `this.sendAction('cancel')`.
 
-<a class="jsbin-embed" href="http://jsbin.com/qafaq/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/fimevowehe/2/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 ### Actions That Aren't Specified
 
@@ -183,8 +177,8 @@ particular event, calling `sendAction()` has no effect.
 For example, if you define a component that triggers the primary action
 on click:
 
-```js
-App.MyButtonComponent = Ember.Component.extend({
+```app/components/my-button.js
+export default Ember.Component.extend({
   click: function() {
     this.sendAction();
   }
diff --git a/source/components/wrapping-content-in-a-component.md b/source/components/wrapping-content-in-a-component.md
index 79f093d3c..63cb3bd7c 100644
--- a/source/components/wrapping-content-in-a-component.md
+++ b/source/components/wrapping-content-in-a-component.md
@@ -4,11 +4,9 @@ provided by other templates.
 For example, imagine we are building a `blog-post` component that we can
 use in our application to display a blog post:
 
-```handlebars
-<script type="text/x-handlebars" id="components/blog-post">
-  <h1>{{title}}</h1>
-  <div class="body">{{body}}</div>
-</script>
+```app/components/blog-post.hbs
+<h1>{{title}}</h1>
+<div class="body">{{body}}</div>
 ```
 
 Now, we can use the `{{blog-post}}` component and pass it properties
@@ -18,7 +16,7 @@ in another template:
 {{blog-post title=title body=body}}
 ```
 
-<a class="jsbin-embed" href="http://jsbin.com/cojuk/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/hihunemapu/2/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 (See [Passing Properties to a
 Component](../passing-properties-to-a-component/) for
@@ -42,11 +40,9 @@ and tell Ember where the block content should be rendered using the
 `{{yield}}` helper. To update the example above, we'll first change the component's
 template:
 
-```handlebars
-<script type="text/x-handlebars" id="components/blog-post">
-  <h1>{{title}}</h1>
-  <div class="body">{{yield}}</div>
-</script>
+```app/templates/components/blog-post.hbs
+<h1>{{title}}</h1>
+<div class="body">{{yield}}</div>
 ```
 
 You can see that we've replaced `{{body}}` with `{{yield}}`. This tells
@@ -55,19 +51,19 @@ Ember that this content will be provided when the component is used.
 Next, we'll update the template using the component to use the block
 form:
 
-```handlebars
+```app/templates/index.hbs
 {{#blog-post title=title}}
   <p class="author">by {{author}}</p>
   {{body}}
 {{/blog-post}}
 ```
 
-<a class="jsbin-embed" href="http://jsbin.com/quyoco/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<!---<a class="jsbin-embed" href="http://jsbin.com/homepowihe/2/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 It's important to note that the template scope inside the component
 block is the same as outside. If a property is available in the template
 outside the component, it is also available inside the component block.
 
-This JSBin illustrates the concept:
+<!---This JSBin illustrates the concept:
 
-<a class="jsbin-embed" href="http://jsbin.com/rewasu/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<a class="jsbin-embed" href="http://jsbin.com/cavucexuru/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
diff --git a/source/concepts/core-concepts.md b/source/concepts/core-concepts.md
index 62f535768..a964878f2 100644
--- a/source/concepts/core-concepts.md
+++ b/source/concepts/core-concepts.md
@@ -1,5 +1,5 @@
 To get started with Ember.js, there are a few core concepts you
-should understand. 
+should understand.
 
 Ember.js is designed to help developers build ambitiously large web
 applications that are competitive with native apps. Doing so requires
@@ -72,19 +72,11 @@ although Ember is agnostic to the backend that you choose.
 A **route** is an object that tells the template which model it should
 display.
 
-#### Controllers
-
-A **controller** is an object that stores _application state_. A
-template can optionally have a controller in addition to a model, and
-can retrieve properties from both.
-
----
-
 These are the core concepts you'll need to understand as you develop
 your Ember.js app. They are designed to scale up in complexity, so that
-adding new functionality doesn't force you to go back and refactor major 
+adding new functionality doesn't force you to go back and refactor major
 parts of your app.
 
 Now that you understand the roles of these objects, you're equipped to
 dive deep into Ember.js and learn the details of how each of these
-individual pieces work.
+individual pieces work.
\ No newline at end of file
diff --git a/source/concepts/naming-conventions.md b/source/concepts/naming-conventions.md
index e4e1486a7..c251c0b7a 100644
--- a/source/concepts/naming-conventions.md
+++ b/source/concepts/naming-conventions.md
@@ -1,120 +1,117 @@
-Ember.js uses naming conventions to wire up your objects without a
-lot of boilerplate. You will want to use these conventional names
-for your routes, controllers and templates.
+Ember.js uses a runtime resolver to wire up your objects without a
+lot of boilerplate. As a developer, this resolver will work automatically
+if you place code in conventional locations within your project.
 
-You can usually guess the names, but this guide outlines, in one place, 
-all of the naming conventions. In the following examples 'App' is a name 
-that we chose to namespace or represent our Ember application when it was 
-created, but you can choose any name you want for your application.
-We will show you later how to create an Ember application, but for now we
-will focus on conventions.
+You can usually guess the names and locations, but this guide outlines, in one place,
+all of the naming conventions.
 
 ## The Application
 
-When your application boots, Ember will look for these objects:
+When your application boots, Ember will look for the objects exported
+by these modules in your project:
 
-* `App.ApplicationRoute`
-* `App.ApplicationController`
-* the `application` template
+* `app/app.js`
+* `app/controllers/application.js`
+* `app/templates/application.hbs`
 
 Ember.js will render the `application` template as the main template.
-If `App.ApplicationController` is provided, Ember.js will set an
-instance of `App.ApplicationController` as the controller for the
+If `controller:application` is provided, Ember.js will set an
+instance of `controller:application` as the controller for the
 template. This means that the template will get its properties from
 the controller.
 
-If your app provides an `App.ApplicationRoute`, Ember.js will invoke
+If your app provides an route at `app/routes/application.js` Ember.js will invoke
 [the][1] [router's][2] [hooks][3] first, before rendering the
-`application` template. Hooks are implemented as methods and provide 
-you access points within an Ember object's lifecycle to intercept and 
-execute code to modify the default behavior at these points to meet 
+`application` template. Hooks are implemented as methods and provide
+you access points within an Ember object's lifecycle to intercept and
+execute code to modify the default behavior at these points to meet
 your needs. Ember provides several hooks for you to utilize for various
-purposes (e.g. `model`, `setupController`, etc). In the example below 
-`App.ApplicationRoute`, which is an `Ember.Route` object, implements 
+purposes (e.g. `model`, `setupController`, etc). In the example below
+`route:application` Route, which is an `Ember.Route` object, implements
 the `setupController` hook.
 
-[1]: /guides/routing/specifying-a-routes-model
-[2]: /guides/routing/setting-up-a-controller
-[3]: /guides/routing/rendering-a-template
+[1]: ../../routing/specifying-a-routes-model
+[2]: ../../routing/setting-up-a-controller
+[3]: ../../routing/rendering-a-template
 
 Here's a simple example that uses a route, controller, and template:
 
-```javascript
-App.ApplicationRoute = Ember.Route.extend({
+```app/routes/application.js
+export default Ember.Route.extend({
   setupController: function(controller) {
     // `controller` is the instance of ApplicationController
     controller.set('title', "Hello world!");
   }
 });
+```
 
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
   appName: 'My First Example'
 });
 ```
 
-```handlebars
-<!-- application template -->
+```app/templates/application.hbs
 <h1>{{appName}}</h1>
-
 <h2>{{title}}</h2>
 ```
 
-In Ember.js applications, you will always specify your controllers
+In Ember.js applications, you will always provide your objects
 as **classes**, and the framework is responsible for instantiating
-them and providing them to your templates.
+them and providing them to your templates at runtime through the resolver.
+
 
-This makes it super-simple to test your controllers, and ensures that
-your entire application shares a single instance of each controller.
 
 ## Simple Routes
 
-Each of your routes will have a controller, and a template with the 
+Each of your routes will have a controller, and a template with the
 same name as the route.
 
 Let's start with a simple router:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+export default Ember.Router.extend().map(function(){
   this.route('favorites');
 });
 ```
 
 If your user navigates to `/favorites`, Ember.js will look for these
-objects:
+classes in your project:
 
-* `App.FavoritesRoute`
-* `App.FavoritesController`
-* the `favorites` template
+* `app/routes/favorites.js`
+* `app/controllers/favorites.js`
+* `app/templates/favorites.hbs`
 
 Ember.js will render the `favorites` template into the `{{outlet}}`
 in the `application` template. It will set an instance of the
-`App.FavoritesController` as the controller for the template.
+`controller:favorites` as the controller for the template.
 
-If your app provides an `App.FavoritesRoute`, the framework will
+If your app provides an `route:favorites`, the framework will
 invoke it before rendering the template. Yes, this is a bit
 repetitive.
 
-For a route like `App.FavoritesRoute`, you will probably implement
+For a route like `route:favorites`, you will probably implement
 the `model` hook to specify what model your controller will present
 to the template.
 
 Here's an example:
 
-```javascript
-App.FavoritesRoute = Ember.Route.extend({
+```app/routes/favorites.js
+export default Ember.Route.extend({
   model: function() {
     // the model is an Array of all of the posts
-    return this.store.find('post');
+    // fetched from this url
+    return $.ajax('/a/service/url/where/posts/live');
   }
 });
 ```
 
-In this example, we didn't provide a `FavoritesController`. Because
+In this example, we didn't provide a `controller:favorites`. Because
 the model is an Array, Ember.js will automatically supply an instance
 of `Ember.ArrayController`, which will present the backing Array as
 its model.
 
-You can treat the `ArrayController` as if it was the model itself.
+You can treat the `Ember.ArrayController` as if it was the model itself.
 This has two major benefits:
 
 * You can replace the controller's model at any time without having
@@ -142,7 +139,7 @@ on the value of that segment provided by the user.
 Consider this router definition:
 
 ```javascript
-App.Router.map(function() {
+export default Ember.Router.extend().map(function(){
   this.resource('post', { path: '/posts/:post_id' });
 });
 ```
@@ -150,23 +147,23 @@ App.Router.map(function() {
 In this case, the route's name is `post`, so Ember.js will look for
 these objects:
 
-* `App.PostRoute`
-* `App.PostController`
-* the `post` template
+* `app/routes/post.js`
+* `app/controllers/post.js`
+* `app/templates/post.hbs`
 
 Your route handler's `model` hook converts the dynamic `:post_id`
 parameter into a model. The `serialize` hook converts a model object
 back into the URL parameters for this route (for example, when
 generating a link for a model object).
 
-```javascript
-App.PostRoute = Ember.Route.extend({
+```app/routes/post.js
+export default Ember.Route.extend({
   model: function(params) {
-    return this.store.find('post', params.post_id);
+    return $.ajax('/my-service/posts/' + params.post_id);
   },
 
   serialize: function(post) {
-    return { post_id: post.get('id') };
+    return { post_id: Ember.get(post, 'id') };
   }
 });
 ```
@@ -176,20 +173,20 @@ handlers.
 
 * If your dynamic segment ends in `_id`, the default `model`
   hook will convert the first part into a model class on the
-  application's namespace (`post` becomes `App.Post`). It will
+  application's namespace (`post` looks for `app/models/post.js`). It will
   then call `find` on that class with the value of the dynamic
   segment.
-* The default behaviour of the `serialize` hook is to replace 
-  the route's dynamic segment with the value of the model 
+* The default behaviour of the `serialize` hook is to replace
+  the route's dynamic segment with the value of the model
   object's `id` property.
 
 ## Route, Controller and Template Defaults
 
 If you don't specify a route handler for the `post` route
-(`App.PostRoute`), Ember.js  will still render the `post`
-template with the app's instance of `App.PostController`.
+(`app/routes/post.js`), Ember.js  will still render the `app/templates/post.hbs`
+template with the app's instance of `app/controllers/post.js`.
 
-If you don't specify the controller (`App.PostController`),
+If you don't specify the controller (`app/controllers/post.js`),
 Ember will automatically make one for you based on the return value
 of the route's `model` hook. If the model is an Array, you get an
 `ArrayController`. Otherwise, you get an `ObjectController`.
@@ -202,7 +199,7 @@ anything!
 You can nest routes under a `resource`.
 
 ```javascript
-App.Router.map(function() {
+export default Ember.Router.extend().map(function(){
   this.resource('posts', function() { // the `posts` route
     this.route('favorites');          // the `posts.favorites` route
     this.resource('post');            // the `post` route
@@ -232,21 +229,21 @@ this router:
   </thead>
   <tr>
     <td><code>posts</code></td>
-    <td><code>PostsController</code></td>
-    <td><code>PostsRoute</code></td>
-    <td><code>posts</code></td>
+    <td><code>app/controllers/posts.js</code></td>
+    <td><code>app/routes/posts.js</code></td>
+    <td><code>app/templates/posts.hbs</code></td>
   </tr>
   <tr>
     <td><code>posts.favorites</code></td>
-    <td><code>PostsFavoritesController</code></td>
-    <td><code>PostsFavoritesRoute</code></td>
-    <td><code>posts/favorites</code></td>
+    <td><code>app/controllers/posts/favorites.js</code></td>
+    <td><code>app/routes/posts/favorites.js</code></td>
+    <td><code>app/templates/posts/favorites.hbs</code></td>
   </tr>
   <tr>
     <td><code>post</code></td>
-    <td><code>PostController</code></td>
-    <td><code>PostRoute</code></td>
-    <td><code>post</code></td>
+    <td><code>app/controllers/post.js</code></td>
+    <td><code>app/routes/post.js</code></td>
+    <td><code>app/templates/post.hbs</code></td>
   </tr>
 </table>
 
@@ -262,16 +259,16 @@ automatically provides a route for the `/` path named `index`.
 
 For example, if you write a simple router like this:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+export default Ember.Router.extend().map(function(){
   this.route('favorites');
 });
 ```
 
 It is the equivalent of:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+export default Ember.Router.extend().map(function(){
   this.route('index', { path: '/' });
   this.route('favorites');
 });
@@ -279,9 +276,9 @@ App.Router.map(function() {
 
 If the user visits `/`, Ember.js will look for these objects:
 
-* `App.IndexRoute`
-* `App.IndexController`
-* the `index` template
+* `app/routes/index.js`
+* `app/controllers/index.js`
+* `app/templates/index.hbs`
 
 The `index` template will be rendered into the `{{outlet}}` in the
 `application` template. If the user navigates to `/favorites`,
@@ -290,8 +287,8 @@ template.
 
 A nested router like this:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+export default Ember.Router.extend().map(function(){
   this.resource('posts', function() {
     this.route('favorites');
   });
@@ -300,8 +297,8 @@ App.Router.map(function() {
 
 Is the equivalent of:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+export default Ember.Router.extend().map(function(){
   this.route('index', { path: '/' });
   this.resource('posts', function() {
     this.route('index', { path: '/' });
@@ -313,9 +310,9 @@ App.Router.map(function() {
 If the user navigates to `/posts`, the current route will be
 `posts.index`. Ember.js will look for objects named:
 
-* `App.PostsIndexRoute`
-* `App.PostsIndexController`
-* The `posts/index` template
+* `app/routes/posts/index.js`
+* `app/controllers/posts/index.js`
+* `app/templates/posts/index.hbs`
 
 First, the `posts` template will be rendered into the `{{outlet}}`
 in the `application` template. Then, the `posts/index` template
diff --git a/source/concepts/what-is-ember-js.md b/source/concepts/what-is-ember-js.md
index ba1d7f0f0..ba1ce95ca 100644
--- a/source/concepts/what-is-ember-js.md
+++ b/source/concepts/what-is-ember-js.md
@@ -100,7 +100,7 @@ pattern, then rest easy knowing that data will always flow correctly from layer
 Computed properties allow you to treat a function like a property:
 
 ```javascript
-MyApp.president = Ember.Object.create({
+var president = Ember.Object.create({
   firstName: "Barack",
   lastName: "Obama",
 
@@ -111,7 +111,7 @@ MyApp.president = Ember.Object.create({
   }.property()
 });
 
-MyApp.president.get('fullName');
+president.get('fullName');
 // "Barack Obama"
 ```
 
@@ -123,7 +123,7 @@ example, the `fullName` property depends on `firstName` and `lastName` to determ
 You can tell Ember about these dependencies like this:
 
 ```javascript
-MyApp.president = Ember.Object.create({
+var president = Ember.Object.create({
   firstName: "Barack",
   lastName: "Obama",
 
@@ -141,14 +141,10 @@ to a computed property.
 
 #### Auto-updating Templates
 
-Ember uses Handlebars, a semantic templating library. To take data from your JavaScript application
-and put it into the DOM, create a `<script>` tag and put it into your HTML, wherever you'd like the
-value to appear:
+Ember uses Handlebars, a semantic templating library:
 
-```html
-<script type="text/x-handlebars">
-  The President of the United States is {{MyApp.president.fullName}}.
-</script>
+```handlebars
+  The President of the United States is {{president.fullName}}.
 ```
 
 Here's the best part: templates are bindings-aware. That means that if you ever change the value of
@@ -164,7 +160,7 @@ categories of edge cases that developers struggle with every day.
 
 ### Differences from Server-Side MVC
 
-A common misconception about Ember.js's MVC implementation is that it must be similar to that of Ruby on Rails. This is incorrect. 
+A common misconception about Ember.js's MVC implementation is that it must be similar to that of Ruby on Rails. This is incorrect.
 
 The reason for this difference is due to Ruby on Rails being a server-side framework, whereas Ember is a client-side framework.[1]
 
@@ -180,6 +176,6 @@ Rails, on the other hand, runs on the server. As such, it can only communicate w
   <img alt="Rails MVC Diagram" src="../images/ember_mvc/railsmvc.png">
 </figure>
 
-It is important to keep this difference in mind when architecting your applications. 
+It is important to keep this difference in mind when architecting your applications.
 
 [1] Although it is possible to use Ember.js on the server side, that is beyond the scope of this guide.
diff --git a/source/contributing/adding-new-features.md b/source/contributing/adding-new-features.md
index 3984781fc..c329051df 100644
--- a/source/contributing/adding-new-features.md
+++ b/source/contributing/adding-new-features.md
@@ -44,7 +44,7 @@ problems with early return.
 ```js
 if (Ember.FEATURES.isEnabled("feature")) {
   // implementation
-} 
+}
 ```
 
 Tests will always run with all features on, so make sure that any tests
@@ -64,7 +64,7 @@ described above.
 
 #### Feature Naming Conventions
 
-```js
+```config/environment.js
 Ember.FEATURES["<packageName>-<feature>"] // if package specific
 Ember.FEATURES["container-factory-injections"]
 Ember.FEATURES["htmlbars"]
@@ -77,8 +77,16 @@ guarded by the conditionals in the original source. This means that
 users of the canary build can enable whatever features they want by
 enabling them before creating their Ember.Application.
 
-```js
-Ember.FEATURES["htmlbars"] = true;
+```config/environment.js
+module.exports = function(environment) {
+  var ENV = {
+    EmberENV: {
+      FEATURES: {
+        htmlbars: true
+      }
+    },
+  }
+}
 ```
 
 ### `features.json`
diff --git a/source/controllers/dependencies-between-controllers.md b/source/controllers/dependencies-between-controllers.md
index 7d77e2bb2..73f7eaef8 100644
--- a/source/controllers/dependencies-between-controllers.md
+++ b/source/controllers/dependencies-between-controllers.md
@@ -2,12 +2,16 @@ Sometimes, especially when nesting resources, we find ourselves needing
 to have some kind of connection between two controllers. Let's take this
 router as an example:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+var Router = Ember.Router.extend({});
+
+Router.map(function() {
   this.resource("post", { path: "/posts/:post_id" }, function() {
     this.resource("comments", { path: "/comments" });
   });
 });
+
+export default Router;
 ```
 
 If we visit a `/posts/1/comments` URL, our `Post` model will get
@@ -18,8 +22,8 @@ some information about it in the `comments` template.
 To be able to do this we define our `CommentsController` to `need` the `PostController`
 which has our desired `Post` model.
 
-```javascript
-App.CommentsController = Ember.ArrayController.extend({
+```app/controllers/comments.js
+export default Ember.ArrayController.extend({
   needs: "post"
 });
 ```
@@ -28,7 +32,7 @@ This tells Ember that our `CommentsController` should be able to access
 its parent `PostController`, which can be done via `controllers.post`
 (either in the template or in the controller itself).
 
-```handlebars
+```app/templates/comments.hbs
 <h1>Comments for {{controllers.post.title}}</h1>
 
 <ul>
@@ -42,8 +46,8 @@ We can also create an aliased property to give ourselves a shorter way to access
 the `PostController` (since it is an `ObjectController`, we don't need
 or want the `Post` instance directly).
 
-```javascript
-App.CommentsController = Ember.ArrayController.extend({
+```app/controllers/comments.js
+export default Ember.ArrayController.extend({
   needs: "post",
   post: Ember.computed.alias("controllers.post")
 });
@@ -53,8 +57,8 @@ App.CommentsController = Ember.ArrayController.extend({
 If you want to connect multiple controllers together, you can specify an
 array of controller names:
 
-```javascript
-App.AnotherController = Ember.Controller.extend({
+```app/controllers/overview.js
+export default Ember.Controller.extend({
   needs: ['post', 'comments']
 });
 ```
diff --git a/source/controllers/index.md b/source/controllers/index.md
index 3b9b76c5a..c9ba65180 100644
--- a/source/controllers/index.md
+++ b/source/controllers/index.md
@@ -15,10 +15,10 @@ Your `BlogPost` model would have properties like:
 * `body`
 * `author`
 
-Your template would bind to these properties in the `blog_post`
+Your template would bind to these properties in the `blog-post` 
 template:
 
-```handlebars
+```app/templates/blog-post.hbs
 <h1>{{title}}</h1>
 <h2>by {{author}}</h2>
 
@@ -41,7 +41,7 @@ toggle the display of the body section. To implement this, we would
 first modify our template to show the body only if the value of a
 new `isExpanded` property is true.
 
-```handlebars
+```app/templates/blog-post.hbs
 <h1>{{title}}</h1>
 <h2>by {{author}}</h2>
 
@@ -132,8 +132,7 @@ is always present. You could store a `search` property on your
 `ApplicationController`, and bind the search field in the `
 application` template to that property, like this:
 
-```handlebars
-<!-- application.handlebars -->
+```app/templates/application.hbs
 <header>
   {{input type="text" value=search action="query"}}
 </header>
@@ -141,8 +140,8 @@ application` template to that property, like this:
 {{outlet}}
 ```
 
-```javascript
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
   // the initial value of the `search` property
   search: '',
 
diff --git a/source/controllers/representing-a-single-model-with-objectcontroller.md b/source/controllers/representing-a-single-model-with-objectcontroller.md
index d83813625..0e42ba83e 100644
--- a/source/controllers/representing-a-single-model-with-objectcontroller.md
+++ b/source/controllers/representing-a-single-model-with-objectcontroller.md
@@ -9,8 +9,8 @@ the model.
 For example, imagine you are writing a music player. You have defined
 your `SongController` to represent the currently playing song.
 
-```javascript
-App.SongController = Ember.ObjectController.extend({
+```app/controllers/song.js
+export default Ember.ObjectController.extend({
   soundVolume: 1
 });
 ```
@@ -18,8 +18,8 @@ App.SongController = Ember.ObjectController.extend({
 In the Song route, you set the `model` of the controller to the
 currently playing song:
 
-```javascript
-App.SongRoute = Ember.Route.extend({
+```app/routes/song.js
+export default Ember.Route.extend({
   setupController: function(controller, song) {
     controller.set('model', song);
   }
@@ -29,7 +29,7 @@ App.SongRoute = Ember.Route.extend({
 In your template, you want to display the name of the currently playing
 song, as well as the volume at which it is playing.
 
-```handlebars
+```app/templates/song.hbs
 <p>
   <strong>Song</strong>: {{name}} by {{artist}}
 </p>
@@ -54,7 +54,7 @@ the model.
 
 For example, imagine we want to display the duration of the song:
 
-```handlebars
+```app/templates/song.hbs
 <p>
   <strong>Song</strong>: {{name}} by {{artist}}
 </p>
@@ -82,8 +82,8 @@ This is very easy to do by defining a computed property on the
 controller which transforms the model's value into a human-readable
 format for the template:
 
-```javascript
-App.SongController = Ember.ObjectController.extend({
+```app/controllers/song.js
+export default Ember.ObjectController.extend({
   duration: function() {
     var duration = this.get('model.duration'),
          minutes = Math.floor(duration / 60),
diff --git a/source/controllers/representing-multiple-models-with-arraycontroller.md b/source/controllers/representing-multiple-models-with-arraycontroller.md
index 6b9f882dc..cf4397280 100644
--- a/source/controllers/representing-multiple-models-with-arraycontroller.md
+++ b/source/controllers/representing-multiple-models-with-arraycontroller.md
@@ -6,8 +6,8 @@ You can treat an `ArrayController` just like its underlying array. For
 example, imagine we want to display the current playlist. In our route,
 we setup our `SongsController` to represent the songs in the playlist:
 
-```javascript
-App.SongsRoute = Ember.Route.extend({
+```app/routes/songs.js
+export default Ember.Route.extend({
   setupController: function(controller, playlist) {
     controller.set('model', playlist.get('songs'));
   }
@@ -17,7 +17,7 @@ App.SongsRoute = Ember.Route.extend({
 In the `songs` template, we can use the `{{#each}}` helper to display
 each song:
 
-```handlebars
+```app/templates/songs.hbs
 <h1>Playlist</h1>
 
 <ul>
@@ -32,8 +32,8 @@ the models it represents. For example, imagine we want to display the
 number of songs that are over 30 seconds long. We can add a new computed
 property called `longSongCount` to the controller:
 
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
   longSongCount: function() {
     var longSongs = this.filter(function(song) {
       return song.get('duration') > 30;
@@ -45,7 +45,7 @@ App.SongsController = Ember.ArrayController.extend({
 
 Now we can use this property in our template:
 
-```handlebars
+```app/templates/songs.hbs
 <ul>
   {{#each song in model}}
     <li>{{song.name}} by {{song.artist}}</li>
@@ -60,8 +60,8 @@ Now we can use this property in our template:
 The `Ember.ArrayController` uses the [Ember.SortableMixin](http://emberjs.com/api/classes/Ember.SortableMixin.html) to allow sorting
 of content. There are two properties that can be set in order to set up sorting:
 
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
   sortProperties: ['name', 'artist'],
   sortAscending: true // false for descending
 });
@@ -73,8 +73,8 @@ It is often useful to specify a controller to decorate individual items in
 the `ArrayController` while iterating over them. This can be done by
 creating an `ObjectController`:
  
-```javascript
-App.SongController = Ember.ObjectController.extend({
+```app/controllers/song.js
+export default Ember.ObjectController.extend({
   fullName: function() {
  
     return this.get('name') + ' by ' + this.get('artist');
@@ -86,13 +86,13 @@ App.SongController = Ember.ObjectController.extend({
 Then, the `ArrayController` `itemController` property must be set to
 the decorating controller.
  
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
   itemController: 'song'
 });
 ```
  
-```handlebars
+```app/templates/songs.hbs
 {{#each item in controller}}
   <li>{{item.fullName}}</li>
 {{/each}}
@@ -100,12 +100,12 @@ App.SongsController = Ember.ArrayController.extend({
  
 or you could setup the `itemController` directly in the template:
  
-```javascript
-App.SongsController = Ember.ArrayController.extend({
+```app/controllers/songs.js
+export default Ember.ArrayController.extend({
 });
 ```
  
-```handlebars
+```app/templates/songs.hbs
 {{#each item in controller itemController="song"}}
   <li>{{item.fullName}}</li>
 {{/each}}
diff --git a/source/cookbook/contributing/participating_if_you_dont_know_ember.md b/source/cookbook/contributing/participating_if_you_dont_know_ember.md
index 8236b4744..f3c52afb3 100644
--- a/source/cookbook/contributing/participating_if_you_dont_know_ember.md
+++ b/source/cookbook/contributing/participating_if_you_dont_know_ember.md
@@ -2,7 +2,7 @@
 You are new to Ember, but want to help write the Cookbook.
 
 ### Solution
-Suggest and/or submit pull requests with a _problem_ statement (see [Suggesting A Recipe](./suggesting_a_recipe)). You do not need to worry about providing a solution or discussion. Someone more experienced with Ember will be able to take your _problem_ and provide a _solution_ and _discussion_.
+Suggest and/or submit pull requests with a _problem_ statement (see [Suggesting A Recipe](../suggesting_a_recipe)). You do not need to worry about providing a solution or discussion. Someone more experienced with Ember will be able to take your _problem_ and provide a _solution_ and _discussion_.
 
 ### Discussion
 The first version of the Ember Cookbook will be completed in a few phases. First, we will be accepting
diff --git a/source/cookbook/contributing/participating_if_you_know_ember.md b/source/cookbook/contributing/participating_if_you_know_ember.md
index ecc475478..8683b32cc 100644
--- a/source/cookbook/contributing/participating_if_you_know_ember.md
+++ b/source/cookbook/contributing/participating_if_you_know_ember.md
@@ -17,7 +17,7 @@ Based on your experience and knowledge of Ember, we recommend submitting pull re
   <dd><em>Problem</em>, <em>Solution</em> &amp; <em>Discussion</em> is the right way to help if you have a deeper understanding of the topic and can write cogently about why the solution is a good idea, explain pitfalls of other solutions, etc.</dd>
 </dl>
 
-You will be able to suggest possible recipes by forking this project and submitting a pull request with a new recipe (see [Suggesting a Recipe][suggesting_a_recipe]).
+You will be able to suggest possible recipes by forking this project and submitting a pull request with a new recipe (see [Suggesting a Recipe](../suggesting_a_recipe)).
 
 [fork_repo]: https://github.com/emberjs/website
 [suggesting_a_recipe]: ./suggesting_a_recipe
diff --git a/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md b/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md
index 4ed9c2c01..b40c8f8cc 100644
--- a/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md
+++ b/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md
@@ -4,8 +4,8 @@ You want to base the value of one property on the value of another property.
 ### Solution
 Use one of the computed property macros like `Ember.computed.alias` or `Ember.computed.gte`
 
-```js
-App.Person = Ember.Object.extend({
+```app/models/person.js
+export default Ember.Object.extend({
 	firstName : null,
 	lastName : null,
 	surname : Ember.computed.alias("lastName"),
@@ -19,5 +19,5 @@ on the values of other properties, correctly connecting them with bindings so th
 updated when values change. These all are stored on the `Ember.computed` object
 and [documented in the API documentation](http://emberjs.com/api/#method_computed)
 
-#### Example
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/AfufoSO/3/edit?output">JS Bin</a>
+<!---#### Example
+<a class="jsbin-embed" href="http://jsbin.com/tahigobage/4/edit?output">JS Bin</a>-->
diff --git a/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md b/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
index b85f44201..5e489a6b4 100644
--- a/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
+++ b/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
@@ -34,8 +34,12 @@ Add google analytic's base code to the html file that renders your ember app.
 Then reopen the application router and add this function. It will be called when
 `didTransition` is fired by the router.
 
-```js
-App.Router.reopen({
+```app/router.js
+var Router = Ember.Router.extend({
+  // customization goes here
+});
+
+Router.reopen({
   notifyGoogleAnalytics: function() {
     return ga('send', 'pageview', {
         'page': this.get('url'),
@@ -43,6 +47,8 @@ App.Router.reopen({
       });
   }.on('didTransition')
 });
+
+export default Router;
 ```
 
 ### Discussion
@@ -52,4 +58,4 @@ changes, in this example we are getting the path after the hash in the url so we
 can notify Google Analytics about moving between areas of the site.
 
 
-[JSBin Example](http://jsbin.com/xebevu)
+<!--[JSBin Example](http://jsbin.com/xebevu)-->
diff --git a/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md b/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md
index 563251764..792ee1be1 100644
--- a/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md
+++ b/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md
@@ -20,6 +20,6 @@ Ember.Handlebars.helper('truncate', function(str, len) {
 });
 ```
 
-#### Example
+<!--- #### Example
 
-<a class="jsbin-embed" href="http://jsbin.com/APoDiLA/1/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
\ No newline at end of file
+<a class="jsbin-embed" href="http://jsbin.com/APoDiLA/1/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
\ No newline at end of file
diff --git a/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md b/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md
index 2e5809c17..93e8d8599 100644
--- a/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md
+++ b/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md
@@ -7,15 +7,14 @@ Write a custom component that renders the Tweet button with specific attributes
 passed in.
 
 ```handlebars
-{{share-twitter data-url="http://emberjs.com" 
-                data-text="EmberJS Components are Amazing!" 
-                data-size="large" 
-                data-hashtags="emberjs"}}
-
+{{share-twitter class='twitter-share-button' href=url
+                    data-text=text
+                    data-size="large"
+                    data-hashtags="emberjs"}}
 ```
 
-```javascript
-App.ShareTwitterComponent = Ember.Component.extend({
+```app/components/share-twitter.js
+export default Ember.Component.extend({
   tagName: 'a',
   classNames: 'twitter-share-button',
   attributeBindings: ['data-size', 'data-url', 'data-text', 'data-hashtags']
@@ -25,9 +24,13 @@ App.ShareTwitterComponent = Ember.Component.extend({
 Include Twitter's widget code in your HTML:
 
 ```javascript
-<script type="text/javascript" src="http://platform.twitter.com/widgets.js" id="twitter-wjs"></script>
+<script>
+window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
+</script>
 ```
 
+Note: the Twitter api does change from time to time. Refer to the [documents](https://dev.twitter.com/web/tweet-button) if necessary.
+
 ### Discussion
 Twitter's widget library expects to find an `<a>` tag on the page with specific `data-` attributes applied.
 It takes the values of these attributes and, when the `<a>` tag is clicked, opens an iFrame for twitter sharing.
@@ -42,6 +45,6 @@ attributes will be updated to match the new values.
 
 An appropriate tag and css class are applied through the `tagName` and `classNames` properties.
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/OpocEPu/1/edit?js,output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/hihoboforo/4/edit?live">JS Bin</a>-->
diff --git a/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md b/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md
index bdd998035..da59cf3ff 100644
--- a/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md
+++ b/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md
@@ -6,26 +6,23 @@ Write an Ember Component to change to loading state when action is taking place.
 
 For example a button to save data could be as
 
-```handlebars
-<script type='text/x-handlebars' id='application'>
-    {{spin-button id="forapplication" isLoading = isLoading buttonText=buttonText action='saveData'}}
-</script>
-
-<script type='text/x-handlebars' id='components/spin-button'>
-    <button {{bind-attr id=id}} {{action 'showLoading'}}>
-        {{#if isLoading}}
-            <img src="http://i639.photobucket.com/albums/uu116/pksjce/spiffygif_18x18.gif">
-        {{else}}
-            {{buttonText}}
-        {{/if}}
-    </button>
-</script>
+```app/templates/application.hbs
+{{spin-button id="forapplication" isLoading = isLoading buttonText=buttonText action='saveData'}}
 ```
 
-```javascript
-var App = Ember.Application.create({});
+```app/templates/components/spin-button.hbs
+
+<button {{bind-attr id=id}} {{action 'showLoading'}}>
+  {{#if isLoading}}
+    <img src="http://i639.photobucket.com/albums/uu116/pksjce/spiffygif_18x18.gif">
+  {{else}}
+    {{buttonText}}
+  {{/if}}
+</button>
+```
 
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
     isLoading:false,
     buttonText:"Submit",
     actions:{
@@ -39,8 +36,10 @@ App.ApplicationController = Ember.Controller.extend({
         }
     }
 });
+```
 
-App.SpinButtonComponent = Ember.Component.extend({
+```app/components/spin-button.js
+export default Ember.Component.extend({
 	classNames: ['button'],
     buttonText:"Save",
     isLoading:false,
@@ -53,10 +52,8 @@ App.SpinButtonComponent = Ember.Component.extend({
         }
     }
 });
-
 ```
 
-
 ### Discussion
 
 I have dumbed down the sample code to only change text within the button. One may add a loading image inside the button or change the button to a div styled like a button.
@@ -64,5 +61,5 @@ The component is in charge of setting isLoading = true and the base controller p
 For safety and sanity of the component, one can add a settimeout of however much time and then set 'isLoading' back to false so that the components comes to initial state no matter the result of the asynchronous call. But I would prefer it was properly handled in the parent controller.
 Also note that the component does not let multiple clicks get in the way of loading status.
 
-#### Example
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/EXaxEfE/14/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<!---#### Example
+<a class="jsbin-embed" href="http://jsbin.com/patikodeje/7/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
diff --git a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md
index fd7d006bc..af4a12336 100644
--- a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md
+++ b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md
@@ -6,10 +6,10 @@ You want to add CSS class names to your Ember Components.
 
 Set additional class names with the `classNames` property of subclassed components:
 
-```js
-App.AwesomeInputComponent = Ember.Component.extend({
+```app/component/awesome-input.js
+export default Ember.Component.extend({
   classNames: ['css-framework-fancy-class']  
-})
+});
 ```
 
 ```handlebars
@@ -28,8 +28,8 @@ If desired, you can apply multiple class names.
 classNames: ['bold', 'italic', 'blue']
 ```
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/ifUDExu/2/edit?js,output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/gihupoqeja/2/embed?live">JS Bin</a>
 
-See [Customizing a Component's Element](../../components/customizing-a-components-element/) for further examples.
+See [Customizing a Component's Element](../../components/customizing-a-components-element/) for further examples. -->
diff --git a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
index 7070034ac..5b0473d68 100644
--- a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
+++ b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
@@ -29,8 +29,8 @@ classNameBindings: ['isRelated:relative'],
 isRelatedBinding: "content.isRelated" // value resolves to boolean
 ```
 
-#### Example
+<!--- #### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/AwAYUwe/2/edit?js,output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/jogizaqepe/2/embed?live">JS Bin</a>
 
-See [Customizing a Component's Element](../../components/customizing-a-components-element/) for further examples.
+See [Customizing a Component's Element](../../components/customizing-a-components-element/) for further examples. -->
diff --git a/source/cookbook/user_interface_and_interaction/basic_form_validations.md b/source/cookbook/user_interface_and_interaction/basic_form_validations.md
index a9869c033..fb691b7fd 100644
--- a/source/cookbook/user_interface_and_interaction/basic_form_validations.md
+++ b/source/cookbook/user_interface_and_interaction/basic_form_validations.md
@@ -12,8 +12,8 @@ that the field has been focused, and add a computed property named
 been focused. The component expects to get the validation result as the
 `valid` property.
 
-```javascript
-App.ValidatedInputComponent = Ember.Component.extend({
+```app/components/validated-input.js
+export default Ember.Component.extend({
   beenFocused: false,
   valid: null,
   hasError: function() {
@@ -31,12 +31,10 @@ And in the template of the component, put an `{{input}}` and wrap it
 into a div, which would have the class of `has-error` bound to
 `hasError`. 
 
-```html
-<script type="text/x-handlebars" data-template-name="components/validated-input">
-  <div {{bindAttr class="hasError :form-group"}}>
+```app/templates/components/validated-input.hbs
+<div {{bindAttr class="hasError :form-group"}}>
     {{input type=type value=value size=size pattern=pattern name=name placeholder=placeholder disaled=disabled maxlength=maxlength tabindex=tabindex class=input-class}}
   </div>
-</script>
 ```
 
 The use like this:
@@ -62,6 +60,6 @@ It renders a wrapped input field. The wrapper has the `has-error` class
 if `hasError` property of the component is true. It's true only when
 the validation fails and the field has been focused at.
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://jsbin.com/UpaXeta/3/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<a class="jsbin-embed" href="http://jsbin.com/UpaXeta/3/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script> -->
diff --git a/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md b/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
index 39ea2fbf7..81bbd3a03 100644
--- a/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
+++ b/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
@@ -21,10 +21,9 @@ formattedAmount: function(key, value) {
 }.property('amount')
 ```
 
-#### Example
-
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/AqeVuZI/2/embed?live,js,output">JS Bin</a>
+<!---#### Example
 
+<a class="jsbin-embed" href="http://emberjs.jsbin.com/AqeVuZI/2/embed?live">JS Bin</a>-->
 [setters]: /guides/object-model/computed-properties/
 [accounting]: http://josscrowcroft.github.io/accounting.js/
 
diff --git a/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md b/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
index 6f070b4e4..982ac2048 100644
--- a/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
+++ b/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
@@ -15,8 +15,8 @@ Let's look at a simple example. You're working on a website for your
 client, and one of the requirements is to have the current date on the index page in human readable format. This is a perfect place to use a
 Handlebars helper that "pretty prints" the current date:
 
-```javascript
-Ember.Handlebars.registerBoundHelper('currentDate', function() {
+```app/helpers/current-date.js
+export default Ember.Handlebars.makeBoundHelper(function() {
   return moment().format('LL');
 });
 ```
@@ -29,10 +29,13 @@ Today's date: {{currentDate}}  // Today's date: August 30 2013
 
 You can even enhance your code and pass in the date format to the helper:
 
-```javascript
+```app/route/application.js
 Ember.Handlebars.registerBoundHelper('currentDate', function(format) {
   return moment().format(format);
 });
+
+export default Ember.Route.extend({
+});
 ```
 
 Now you would need to pass an additional parameter to the helper:
@@ -49,8 +52,8 @@ Define `formattedDate` computed property that depends on
 `date` and `format`. Computed property in this example does
 the same thing as Handlebars helpers defined above.
 
-```javascript
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
   format: "YYYYMMDD",
   date: null,
   formattedDate: function() {
@@ -61,7 +64,7 @@ App.ApplicationController = Ember.Controller.extend({
 });
 ```
 
-```html
+```/app/templates/application.hbs
 {{input value=date}}
 {{input value=format}}
 <div>{{formattedDate}}</div>
@@ -84,6 +87,6 @@ Handlebars helper with one big difference:
 `formattedDate` can be consumed later without applying
 date format on the date property again.
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/iCaGUne/4/edit?output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/nipujoneqe/1/embed?live">JS Bin</a>-->
diff --git a/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md b/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
index e246655b3..ba8ec18c6 100644
--- a/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
+++ b/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
@@ -6,8 +6,8 @@ Subclass `Ember.TextField` and define a method marked with
 `.on('didInsertElement')`. Inside this method apply `focus`
 to the text field by accessing the components's jQuery `$` property:
 
-```javascript
-App.FocusInputComponent = Ember.TextField.extend({
+```app/components/focus-input.js
+export default Ember.TextField.extend({
   becomeFocused: function() {
     this.$().focus();
   }.on('didInsertElement')
@@ -47,6 +47,6 @@ of our component.
 
 Prototype extension can be disabled by setting the `Ember.EXTEND_PROTOTYPES` property to false.
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/OlUGODo/4/edit?html,js,output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/yejamevaqa/1/embed?live">JS Bin</a>-->
diff --git a/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md b/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md
index 1c7839bb0..939ae2518 100644
--- a/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md
+++ b/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md
@@ -6,8 +6,8 @@ The page scroller keeps in the same position when you go from one page to anothe
 
 Add the following mixin to the affected Routes:
 
-```js
-App.ResetScroll = Ember.Mixin.create({
+```app/mixins/reset-scroll.js
+export default Ember.Mixin.create({
   activate: function() {
     this._super();
     window.scrollTo(0,0);
@@ -17,8 +17,10 @@ App.ResetScroll = Ember.Mixin.create({
 
 Only if you need do something on the `activate` method you must call `this._super()` at the beginning:
 
-```js
-App.IndexRoute = Ember.Route.extend(App.ResetScroll, {
+```app/routes/index.js
+import ResetScroll from '../mixins/reset-scroll/';
+
+export default Ember.Route.extend(ResetScroll, {
   //I need to do other things with activate
   activate: function() {
     this._super.apply(this, arguments); // Call super at the beginning
@@ -27,6 +29,6 @@ App.IndexRoute = Ember.Route.extend(App.ResetScroll, {
 });
 ```
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/kixowati/1/embed?html,js,output">Ember Starter Kit</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<a class="jsbin-embed" href="http://jsbin.com/yiqijopilo/1/embed?live">Ember Starter Kit</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
diff --git a/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md b/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md
index f2d086332..bad902462 100644
--- a/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md
+++ b/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md
@@ -26,6 +26,6 @@ life, you can specifiy that the property is not bound by applying the `{{unbound
 that is not bound will avoid adding unnecessary observers on a property.
 
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/ayUkOWo/3/edit?output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/sazomoceza/15/edit?output">JS Bin</a>-->
diff --git a/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md b/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md
index 68114bab0..6d85bfb52 100644
--- a/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md
+++ b/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md
@@ -26,8 +26,8 @@ In a template:
 
 In your application route:
 
-```javascript
-App.ApplicationRoute = Ember.Route.extend({
+```app/routes/application.js
+export default Ember.Route.extend({
   actions: {
     openModal: function(modalName) {
       return this.render(modalName, {
@@ -43,19 +43,19 @@ When closing a modal, you can use the route's `disconnectOutlet` method to remov
 the modal from the DOM.
 
 ```javascript
-  closeModal: function() {
-    return this.disconnectOutlet({
-      outlet: 'modal',
-      parentView: 'application'
-    });
-  }
+closeModal: function() {
+  return this.disconnectOutlet({
+    outlet: 'modal',
+    parentView: 'application'
+  });
+}
 ```
 
 It may also be helpful to use a `modal-dialog` component to handle common markup
 and interactions such as rendering an overlay and handling clicks outside of the
 modal.
 
-#### Example
+<!---#### Example
 
 This example shows:
 
@@ -64,6 +64,6 @@ This example shows:
   1. Wrapping the common modal markup and actions in a component.
   1. Handling events to close the modal when the overlay is clicked.
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/peyogo/2/embed?html,js,output">
+<a class="jsbin-embed" href="http://jsbin.com/qebutipuqa/1/embed?live">
   Recipe: Using a Modal Dialog
-</a>
+</a>-->
diff --git a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
index e04fae1b1..ee2d7dd90 100644
--- a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
+++ b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
@@ -10,11 +10,11 @@ refreshed when the `pulse` attribute increments.
 The clock object can be used to create new instances for binding to new views
 generated within the application, like a list of comments.
 
-## Discussion
+<!---## Discussion
 
-<a class="jsbin-embed" href="http://jsbin.com/somosocuni/1/embed?output">
+<a class="jsbin-embed" href="http://jsbin.com/jihivevafo/1/edit?output">
 Cookbook: Continuous Redrawing of Views
-</a><script src="http://static.jsbin.com/js/embed.js"></script>
+</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 ### ClockService object
 
@@ -26,20 +26,20 @@ with a time of 250 milliseconds as the interval. A property is set at the end
 of the interval. Since the `tick` method observes the incremented property
 another interval is triggered each time the property increases.
 
-```javascript
-var ClockService = Ember.Object.extend({
-  pulse: Ember.computed.oneWay('_seconds').readOnly(),
-  tick: function () {
-    var clock = this;
-    Ember.run.later(function () {
-      var seconds = clock.get('_seconds');
-      if (typeof seconds === 'number') {
-        clock.set('_seconds', seconds + (1/4));
-      }
-    }, 250);
-  }.observes('_seconds').on('init'),
-  _seconds: 0,
-});
+```app/services/clock.js
+export default Ember.Object.extend({
+    pulse: Ember.computed.oneWay('_seconds').readOnly(),
+    tick: function () {
+      var clock = this;
+      Ember.run.later(function () {
+        var seconds = clock.get('_seconds');
+        if (typeof seconds === 'number') {
+          clock.set('_seconds', seconds + (1/4));
+        }
+      }, 250);
+    }.observes('_seconds').on('init'),
+    _seconds: 0
+  });
 ```
 
 ### Binding to the `pulse` attribute
@@ -47,14 +47,14 @@ var ClockService = Ember.Object.extend({
 In this recipe, an application initializer is used to inject an instance of the
 `ClockService` object, setting a controller's `clock` property to this instance.
 
-```javascript
-Ember.Application.initializer({
-  name: 'clockServiceInitializer',
-  initialize: function(container, application) {
-    container.register('clock:service', ClockService);
-    application.inject('controller:interval', 'clock', 'clock:service');
+```app/initializers/services.js
+export default {
+  name: 'services',
+  initialize: function(container, app) {
+    // inject into a specific route
+    app.inject('controller:interval', 'clock', 'service:clock');
   }
-});
+};
 ```
 
 The controller can set any computed properties based on the `pulse` property of
@@ -67,22 +67,22 @@ initialization.
 The controller has (session) data to display `seconds` to visitors, as well as
 a handful of properties used as conditions in the Handlebars template.
 
-```javascript
-App.IntervalController = Ember.ObjectController.extend({
-  secondsBinding: 'clock.pulse',
-  fullSecond: function () {
-    return (this.get('seconds') % 1 === 0);
-  }.property('seconds'),
-  quarterSecond: function () {
-    return (this.get('seconds') % 1 === 1/4);
-  }.property('seconds'),
-  halfSecond: function () {
-    return (this.get('seconds') % 1 === 1/2);
-  }.property('seconds'),
-  threeQuarterSecond: function () {
-    return (this.get('seconds') % 1 === 3/4);
-  }.property('seconds')
-});
+```app/controllers/interval.js
+export default Ember.ObjectController.extend({
+    secondsBinding: 'clock.pulse',
+    fullSecond: function () {
+      return (this.get('seconds') % 1 === 0);
+    }.property('seconds'),
+    quarterSecond: function () {
+      return (this.get('seconds') % 1 === 1/4);
+    }.property('seconds'),
+    halfSecond: function () {
+      return (this.get('seconds') % 1 === 1/2);
+    }.property('seconds'),
+    threeQuarterSecond: function () {
+      return (this.get('seconds') % 1 === 3/4);
+    }.property('seconds')
+  });
 ```
 
 A controller for a list of comments, each comment will have a new clock
@@ -90,24 +90,28 @@ instance when added to the list. The comment item controller sets up
 the `seconds` binding, used by the template to show the time since the
 comment was created.
 
-```javascript
-App.CommentItemController = Ember.ObjectController.extend({
-  seconds: Ember.computed.oneWay('clock.pulse').readOnly()
+```app/controllers/comment-item.js
+export default Ember.ObjectController.extend({
+    seconds: Ember.computed.oneWay('clock.pulse').readOnly()
 });
+```
 
-App.CommentsController = Ember.ArrayController.extend({
-  itemController: 'commentItem',
-  comment: null,
-  actions: {
-    add: function () {
-      this.addObject(Em.Object.create({
-        comment: this.get('comment'),
-        clock: ClockService.create()
-      }));
-      this.set('comment', null);
+```app/controllers/comments.js
+import ClockService from '../services/clock';
+
+export default Ember.ArrayController.extend({
+    itemController: 'commentItem',
+    comment: null,
+    actions: {
+      add: function () {
+        this.addObject(Em.Object.create({
+          comment: this.get('comment'),
+          clock: ClockService.create()
+        }));
+        this.set('comment', null);
+      }
     }
-  }
-});
+  });
 ```
 
 ### Handlebars template which displays the `pulse`
@@ -116,7 +120,7 @@ The `seconds` value is computed from the `pulse` attribute. And the controller
 has a few properties to select a component to render, `fullSecond`,
 `quarterSecond`, `halfSecond`, `threeQuarterSecond`.
 
-```handlebars
+```app/templates/interval.hbs
 {{#if fullSecond}}
   {{nyan-start}}
 {{/if}}
@@ -134,8 +138,7 @@ has a few properties to select a component to render, `fullSecond`,
 ```
 
 A template for a list of comments
-
-```handlebars
+```app/templates/comments.hbs
 <form {{action "add" on="submit"}}>
   {{input value=comment}}
   <button>Add Comment</button>
@@ -152,21 +155,21 @@ A template for a list of comments
 This helper is used in the template like so `{{digital-clock seconds}}`,
 `seconds` is the property of the controller that will be displayed (h:m:s).
 
-```javascript
-Ember.Handlebars.registerBoundHelper('digital-clock', function(seconds) {
-  var h = Math.floor(seconds / 3600);
-  var m = Math.floor((seconds % 3600) / 60);
-  var s = Math.floor(seconds % 60);
-  var addZero = function (number) {
-    return (number < 10) ? '0' + number : '' + number;
-  };
-  var formatHMS = function(h, m, s) {
-    if (h > 0) {
-      return '%@:%@:%@'.fmt(h, addZero(m), addZero(s));
-    }
-    return '%@:%@'.fmt(m, addZero(s));
-  };
-  return new Ember.Handlebars.SafeString(formatHMS(h, m, s));
+```app/helpers/digital-clock.js
+export default Ember.Handlebars.makeBoundHelper(function(seconds) {
+    var h = Math.floor(seconds / 3600);
+    var m = Math.floor((seconds % 3600) / 60);
+    var s = Math.floor(seconds % 60);
+    var addZero = function (number) {
+      return (number < 10) ? '0' + number : '' + number;
+    };
+    var formatHMS = function(h, m, s) {
+      if (h > 0) {
+        return '%@:%@:%@'.fmt(h, addZero(m), addZero(s));
+      }
+      return '%@:%@'.fmt(m, addZero(s));
+    };
+    return new Ember.Handlebars.SafeString(formatHMS(h, m, s));
 });
 ```
 
@@ -179,9 +182,9 @@ after waking.
 
 ### Links
 
-The source code:
+<!---The source code:
 
-* <http://jsbin.com/somosocuni/1/edit?html,js,output>
+* <http://jsbin.com/jihivevafo/1/edit?html,js,output>-->
 
 Further reading:
 
diff --git a/source/cookbook/working_with_objects/incrementing_or_decrementing_a_property.md b/source/cookbook/working_with_objects/incrementing_or_decrementing_a_property.md
index bd16750ab..0e899edca 100644
--- a/source/cookbook/working_with_objects/incrementing_or_decrementing_a_property.md
+++ b/source/cookbook/working_with_objects/incrementing_or_decrementing_a_property.md
@@ -23,6 +23,6 @@ You can optionally specify a value to increment or decrement by:
 person.incrementProperty('age', 10);
 ```
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/aTipaQO/2/edit?js,output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/huxojisaha/1/edit?live">JS Bin</a>-->
diff --git a/source/cookbook/working_with_objects/setting_multiple_properties_at_once.md b/source/cookbook/working_with_objects/setting_multiple_properties_at_once.md
index 13a320cc5..edbffda1b 100644
--- a/source/cookbook/working_with_objects/setting_multiple_properties_at_once.md
+++ b/source/cookbook/working_with_objects/setting_multiple_properties_at_once.md
@@ -11,7 +11,7 @@ person.setProperties({
 })
 ```
 
-#### Example
+<!---#### Example
 
-<a class="jsbin-embed" href="http://emberjs.jsbin.com/uPaPEcO/2/edit?js,output">JS Bin</a>
+<a class="jsbin-embed" href="http://jsbin.com/wukapotoyi/3/edit?live">JS Bin</a>-->
 
diff --git a/source/deprecations/index.md b/source/deprecations/index.md
deleted file mode 100644
index 24c4b8ca5..000000000
--- a/source/deprecations/index.md
+++ /dev/null
@@ -1,230 +0,0 @@
-Periodically, various APIs in Ember.js may be deprecated. During a minor
-release, for instance when upgrading from version 1.9 to 1.10, you may see new
-deprecations fire in your codebase. Until a major revision such as 2.0 lands,
-code firing such deprecations is still supported by the Ember community. After
-the next major revision lands, the supporting code may be removed. This style
-of change management is commonly referred to as [Semantic Versioning](http://semver.org/).
-
-What follows is a list of deprecations introduced to Ember.js during the 1.x
-cycle.
-
-### Deprecations Added in 1.7
-
-#### Deprecate observing container views like arrays.
-
-ContainerViews have been observable as arrays, where the items in
-the array are childViews. This introduces complexity into container
-views despite the feature being a rarely used one.
-
-#### Deprecate Ember.DeferredMixin and Ember.Deferred.
-
-`Ember.DeferredMixin` and `Ember.Deferred` have been deprecated in favor
-of using `RSVP.Promise`s.
-
-#### Deprecate `.then` on Ember.Application.
-
-As part of the `Ember.DeferredMixin` deprecation, using `.then` on an
-Ember.Application instance itself has been deprecated.
-
-You can use the `ready` hook or initializers to defer/advance readiness
-instead.
-
-### Deprecations Added in 1.8
-
-#### Global lookup of views
-
-Previous to Ember 1.8, views would commonly be fetched from the global
-scope:
-
-```handlebars
-{{view App.SomeView}}
-{{each item in items itemViewClass=App.SomeView}}
-```
-
-Since Ember 1.8, views are more appropriately resolved on the application
-via strings:
-
-```handlebars
-{{view "some"}}
-{{each item in items itemViewClass="some"}}
-```
-
-They may also be fetched via a binding:
-
-```handlebars
-{{view view.someViewViaTheCurrentView}}
-{{each itemViewClass=someViewViaAControllerProperty}}
-```
-
-In general, it is recommended that your Ember application avoid accessing
-globals from a template.
-
-##### New usage of Ember.Select
-
-Most of Ember's provided views are already accessed via helpers. For example,
-the [Ember.TextField](http://emberjs.com/api/classes/Ember.TextField.html) view is used via the
-[input helper](http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_input).
-
-The [Ember.Select](http://emberjs.com/api/classes/Ember.Select.html) view has not been upgraded to
-have a helper. Instead, it was suggested that you call it via the global
-class name:
-
-```handlebars
-{{view Ember.Select content=manyItems}}
-```
-
-Since this lookup is now deprecated, the select view has been registered
-on an application as `select`. The new usage is:
-
-```handlebars
-{{view "select" content=manyItems}}
-```
-
-See the updated [Ember.Select](http://emberjs.com/api/classes/Ember.Select.html) documentation
-and the [built-in views guide](../../views/built-in-views) for more details
-and examples.
-
-##### Ember.js libraries and plugins
-
-If the code triggering this deprecation is being fired from a library, that
-library may need to update its suggested usage.
-
-One solution for such a library is to provide mixins instead of classes:
-
-```JavaScript
-// usage is {{view "list"}}
-var App.ListView = Ember.View.extend(ListView);
-```
-
-A more advanced solution is to use an initializer to register the plugin's
-views on the the application:
-
-```JavaScript
-// usage is {{view "list"}}
-Ember.Application.initializer({
-  name: 'list-view',
-  initialize: function(container, application) {
-    container.register('view:list', ListView);
-  }
-});
-```
-
-More details on how to register an Ember.js framework component are available
-in the [initializer API documentation](http://emberjs.com/api/classes/Ember.Application.html#toc_initializers)
-and the [dependency injection guide](../../understanding-ember/dependency-injection-and-service-lookup).
-
-#### Deprecate location: 'hash' paths that don't include a forward slash. e.g. #/foo NOT #foo
-
-Prior to this release, if you were using `location: 'hash'` (which is the default), you were able to link to a route with a `location.hash` that didn't contain the expected leading forward slash. e.g. `#foo` instead of the correct `#/foo`. Very few, if any, should be impacted by this since the router always produces the correct form.
-
-Doing so is ambiguous because you may also be trying to link to an element on the page who's id matches `<div id="foo">` and it also erroneously will create an extra history state if a user clicks on something that transitions to that route again, since it will change `location.hash === '#/foo'`.
-
-This ability will be removed quickly to allow us to mimick the browser's behavior of scrolling the page to an element who's id matches, but in our case doing so after the transition ends and everything is rendered. Once this feature is added, you'll be able to link to id's even with doubled up hashes: `#/foo#some-id` as well as the expected `#some-id`.
-
-### Deprecations Added in 1.9
-
-#### More Consistent Handlebars Scope
-
-In today's Ember, the `each` and `with` helpers come in two flavors: a "context-switching" flavor and a "named-parameter" flavor.
-
-```handlebars
-{{#each post in posts}}
-  {{!-- the context in here is the same as the outside context,
-        and `post` references the current iteration --}}
-{{/each}}
-
-{{#each posts}}
-  {{!-- the context in here has shifted to the individual post.
-        the outer context is no longer accessible --}}
-{{/each}}
-
-{{#with post as otherPost}}
-  {{!-- the context in here is the same as the outside context }}
-{{/with}}
-
-{{#with post}}
-  {{!-- the context in here has shifted to the post.
-        the outer context is no longer accessible --}}
-{{/with}}
-```
-
-This has proven to be one of the more confusing parts of the Ember templating system. It is also not clear to
-beginners which to use, and when they choose the context-shifting form, they lose access to values in the outer
-context that may be important.
-
-Because the helper itself offers no clue about the context-shifting behavior, it is easy (even for more experienced
-Ember developers) to get confused when skimming a template about which object a value refers to.
-
-The context-shifting forms of `#each` and `#with` have been deprecated in favor of the named-parameter forms.
-
-##### Transition Plan
-
-To transition your code to the new syntax, you can change templates that look like this:
-
-```handlebars
-{{#each people}}
-  <p>{{firstName}} {{lastName}}</p>
-  <p>{{address}}</p>
-{{/each}}
-```
-
-with:
-
-```handlebars
-{{#each person in people}}
-  <p>{{person.firstName}} {{person.lastName}}</p>
-  <p>{{person.address}}</p>
-{{/each}}
-```
-
-
-In preparation for further work on HTMLBars, the context switching form of `{{each}}` is deprecated. This is mostly a "mechanical" refactor and dramatically
-simplifies how to think about the context in your templates. This change should be entirely mechanical.
-
-In prior versions you may have done one of the following:
-
-```handlebars
-<ul>
-  {{#each}}
-    <li>{{name}}</li>
-  {{/each}}
-</ul>
-```
-
-```handlebars
-<ul>
-  {{#each people}}
-    <li>{{name}}</li>
-  {{/each}}
-</ul>
-```
-
-You should now be using:
-
-```handlebars
-<ul>
-  {{#each person in people}}
-    <li>{{person.name}}</li>
-  {{/each}}
-</ul>
-```
-
-### Deprecations Added in 1.10
-
-#### Deprecate beforeObservers
-
-beforeObservers are deprecated due to the negative performance implications they have for Ember internals and applications.
-
-Typically they were used to have access to the old value of a property when it's about to change, but you can get same functionality in an even more efficient way with just a few lines of code:
-
-```js
-function fooObserver(obj){
-  var newFoo = obj.get('foo');
-  if (obj._oldFoo !== newFoo) {
-    // do your stuff here
-    obj._oldFoo = newFoo;
-  }
-}
-addObserver(obj, 'foo', fooObserver);
-fooObserver(obj); // Optionally call the observer immediately
-```
diff --git a/source/ember-cli/glossary.md b/source/ember-cli/glossary.md
new file mode 100644
index 000000000..60097a659
--- /dev/null
+++ b/source/ember-cli/glossary.md
@@ -0,0 +1,85 @@
+Joining a web development community can be a challenge within itself, especially when all the resources you visit assume you're familiar with other technologies that you're not familiar with.
+
+Our goal is to help you avoid that mess and come up to speed as fast as possible; you can consider us your internet friend.
+
+## CDN
+Content Delivery Network
+
+This is typically a paid service you can use to get great performance for your app. You start by uploading a resource (image, JavaScript file, etc) to a company like Akamai or CloudFlare. That uploaded resource will have an absolute URL which you can reference anywhere in your app. This URL will which resolves differently for folks depending on where they're browsing.
+
+Behind the scenes, the CDN will distribute your content geographically with the goal of end-users being able to fetch your content with the lowest latency possible. For example, if a user is in India, they'd likely get content served from India faster than from the United States.
+
+
+## CoffeeScript, TypeScript
+These are both languages which end up compiling to JavaScript; you're able to write your code using the syntax provided and when ready you compile/transpile your TypesScript or CoffeeScript into JavaScript.
+
+[CoffeeScript vs TypeScript](http://www.stoutsystems.com/articles/coffeescript-versus-typescript/)
+
+
+## Evergreen browsers
+Browsers that update themselves (without user intervention).
+
+[Evergreen Browsers](http://tomdale.net/2013/05/evergreen-browsers/)
+
+
+## ES3, ES5, ES5.1, ES6 (aka ES2015), etc
+ES stands for ECMAScript, which is the specification that JavaScript is based on. The number that follows is the version of the specification.
+
+Most browsers support at least ES5, and some even have ES6 (also known as ES2015) support. You can check each browser's support (including yours) here:
+
+* [ES5 support](http://kangax.github.io/compat-table/es5/)
+* [ES6 support](http://kangax.github.io/compat-table/es6/")
+
+[ECMAScript](https://en.wikipedia.org/wiki/ECMAScript)
+
+
+## LESS, Sass
+Both LESS and Sass are types of CSS preprocessor markup intended to give you much more control over your CSS. During the build process, the LESS or Sass resources "compile" down to vanilla CSS (which is what the end-user downloads and use in their browser).
+
+[Sass/Less Comparison](https://gist.github.com/chriseppstein/674726)
+
+
+## Linter, linting, jslint, jshint
+A validation tool which checks for common issues in your JavaScript. You'd usually use this in your build process to enforce quality in your codebase. A great example of something to check for: *making sure you've always got your semicolons*.
+
+[An example of some of the options you can configure](http://jshint.com/docs/options/)
+
+
+## Polyfill
+This is concept that typically means providing JavaScript which tests for features that are missing (prototypes not defined, etc) and "fills" them by providing an implementation.
+
+
+## Promise
+Asynchronous calls typically return a promise (or deferred). This is an object which has a state: it can be given handlers for when it's fulfilled or rejected.
+
+Ember makes use of these in places like the model hook for a route. Until the promise resolves, Ember is able to put the route into a "loading" state.
+
+[An open standard for sound, interoperable JavaScript promises](https://promisesaplus.com/)
+[emberjs.com - A word on promises](http://emberjs.com/guides/routing/asynchronous-routing/#toc_a-word-on-promises)
+
+
+## SSR
+Server Side Rendering
+
+[Inside FastBoot: The Road to Server-Side Rendering](http://emberjs.com/blog/2014/12/22/inside-fastboot-the-road-to-server-side-rendering.html)
+
+
+## Transpile
+When related to JavaScript, this can be part of your build process which "transpiles" (converts) your ES6 syntax JavaScript to JavaScript that is supported by current browsers.
+
+Besides ES6, you'll see a lot of content about compiling/transpiling CoffeeScript, a short-hand language which can "compile" to JavaScript.
+
+* Ember CLI specifically uses [Babel](https://babeljs.io/) via the [ember-cli-babel](https://github.com/babel/ember-cli-babel) plugin.
+
+
+## Shadow DOM
+**Not to be confused with Virtual DOM**. Shadow DOM is still a work in progress, but basically a proposed way to have an "isolated" DOM encapsulated within your app's DOM.
+
+Creating a re-usable "widget" or control might be a good use-case for this. Browsers implement some of their controls using their own version of a shadow DOM.
+
+* [W3C Working Draft](http://www.w3.org/TR/shadow-dom/)
+* [What the Heck is Shadow DOM?](http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/)
+
+
+## Virtual DOM
+**Not to be confused with Shadow DOM**. The concept of a virtual DOM means abstracting your code (or in our case, Ember) away from using the browser's DOM in favor of a "virtual" DOM that can easily be accessed for read/writes or even serialized.
\ No newline at end of file
diff --git a/source/ember-cli/index.md b/source/ember-cli/index.md
new file mode 100644
index 000000000..b661124dc
--- /dev/null
+++ b/source/ember-cli/index.md
@@ -0,0 +1,58 @@
+Installing Ember is *easy*! And our new install process includes *Ember CLI*, Ember's build tool
+
+* State of the art asset management (including combining, minifying, and versioning)
+* Built-in generators can help you create components, routes, and more (and their test cases!)
+* A standard project layout. Working on other Ember apps is easy, they're organized similarly
+* Native [JavaScript modules](http://jsmodules.io/) to keep your project organized
+* A complete testing framework (unit tests, integration tests)
+* Access to a growing ecosystem of [Ember Addons](http://www.emberaddons.com/). Add functionality to your app without writing a single line of code! They're already packaged up and ready to add to your app
+
+
+## Installation
+
+Installing Ember is done using [NPM](#toc_got-node-and-npm). While you're at it we recommend you to also install phantomjs (if you don't have it already). Ember CLI uses phantomjs to run tests from the command line (without the need for a browser to be open).
+
+```bash
+npm install -g ember-cli
+npm install -g phantomjs
+```
+
+## Testing your installation
+
+At this point, you should be good to go... but we can test out your install to make sure everything works great.
+
+Let's run the generator for your project:
+
+```bash
+ember new my-app
+```
+
+This will create a new `my-app` folder and generate an application structure for you.
+
+Once the generation process finishes, let's verify that we can launch the newly created app:
+
+```bash
+cd my-app
+ember server
+```
+
+navigate to `http://localhost:4200` to see your new app in action.
+
+## Troubleshooting
+
+### Got Node (and NPM)?
+
+Node Package Manager (npm) comes bundled with node.js and makes installing easy.  If you're not sure if you have node.js installed, try running the following from your command line:
+
+```bash
+node --version
+```
+
+If the command works and you get back something like 0.10.x, you've already got it installed!
+
+If you **don't** have it installed...
+
+* Windows or Mac users [can simply download and run the installer](http://nodejs.org/download/).
+* Linux users [can check out this great guide](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager) by Joyent for install instructions.
+
+Once you've got node.js installed, re-run the above ```node --version``` to verify your install.
diff --git a/source/getting-ember/index.md b/source/getting-ember/index.md
deleted file mode 100644
index 04a56ad9b..000000000
--- a/source/getting-ember/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-##Ember Builds
-
-The Ember Release Management Team maintains a variety of ways to get  Ember and Ember Data builds.
-
-###Channels
-The latest [Release](/builds#/release), [Beta](/builds#/beta), and [Canary](/builds#/canary) builds of Ember and Ember data can be found [here](/builds). For each channel a development, minified, and production version is available. For more on the different channels read the [Post 1.0 Release Cycle](/blog/2013/09/06/new-ember-release-process.html) blog post.
-
-###Tagged Releases
-Past release and beta builds  of Ember and Ember Data are available at [Tagged Releases](/builds#/tagged). These builds can be useful to track down regressions in your application, but it is recommended to use the latest stable release in production.
-
-
-
-##Bower
-
-Bower is a package manager for the web. Bower makes it easy to manage dependencies in your application including Ember and Ember Data. To learn more about Bower visit [http://bower.io/](http://bower.io/).
-
-Adding Ember to your application with Bower is easy; simply run `bower install ember --save`. For Ember Data, run `bower install ember-data --save`. You can also add `ember` or `ember-data` to your `bower.json` file as follows.
-
-```json
-{
-	"name": "your-app",
-	"dependencies": {
-		"ember": "~1.6",
-		"ember-data": "~1.0.0-beta.8"
-	}
-}
-
-```
-
-##RubyGems
-
-If your application uses a Ruby based build system, you can use the [ember-source](http://rubygems.org/gems/ember-source) and [ember-data-source](http://rubygems.org/gems/ember-data-source) RubyGems to access ember and ember data sources from Ruby.
-
-If your application is built in Rails, the [ember-rails](http://rubygems.org/gems/ember-rails) RubyGem makes it easy to integrate Ember into your Ruby on Rails application.
-
diff --git a/source/models/connecting-to-an-http-server.md b/source/models/connecting-to-an-http-server.md
index eaab1153c..621922edd 100644
--- a/source/models/connecting-to-an-http-server.md
+++ b/source/models/connecting-to-an-http-server.md
@@ -20,10 +20,10 @@ data is structured.
 The REST adapter uses the name of the model to determine what URL to
 send JSON to.
 
-For example, if you ask for an `App.Photo` record by ID:
+For example, if you ask for a `photo` record by ID:
 
-```js
-App.PhotoRoute = Ember.Route.extend({
+```app/routes/photo.js
+export default Ember.Route.extend({
   model: function(params) {
     return this.store.find('photo', params.photo_id);
   }
@@ -52,12 +52,18 @@ REST adapter:
 
 Given the following models:
 
-```js
-App.Post = DS.Model.extend({
+```app/models/post.js
+import DS from 'ember-data';
+
+export default DS.Model.extend({
   title:    DS.attr(),
   comments: DS.hasMany('comment'),
   user:     DS.belongsTo('user')
 });
+```
+
+```app/models/comment.js
+import DS from 'ember-data';
 
 App.Comment = DS.Model.extend({
   body: DS.attr()
@@ -90,21 +96,29 @@ To quickly prototype a model and see the expected JSON, try using the [Ember Dat
 
 ### Customizing the Adapter
 
-To customize the REST adapter, define a subclass of `DS.RESTAdapter` and
-name it `App.ApplicationAdapter`. You can then override its properties
+To customize the REST adapter, create a `app/adapters/application.js` file
+and export a subclass of `DS.RESTAdapter`. You can then override its properties
 and methods to customize how records are retrieved and saved.
 
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
+  ...
+});
+```
+
 #### Customizing a Specific Model
 
 It's entirely possible that you need to define options for just one model instead of an application-wide customization. In that case, you can create an adapter named after the model you are specifying:
 
-```js
-App.PostAdapter = DS.RESTAdapter.extend({
+```app/adapters/post.js
+export default DS.RESTAdapter.extend({
   namespace: 'api/v2',
   host: 'https://api.example2.com'
 });
+```
 
-App.PhotoAdapter = DS.RESTAdapter.extend({
+```app/adapters/photo.js
+export default DS.RESTAdapter.extend({
   namespace: 'api/v1',
   host: 'https://api.example.com'
 });
@@ -124,8 +138,8 @@ particular person might go to `/api/v1/people/1`.
 
 In that case, set `namespace` property to `api/v1`.
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   namespace: 'api/v1'
 });
 ```
@@ -143,8 +157,8 @@ your server will need to be configured to send the correct CORS headers.
 
 To change the host that requests are sent to, set the `host` property:
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   host: 'https://api.example.com'
 });
 ```
@@ -159,8 +173,8 @@ property and Ember Data will send them along with each ajax request.
 
 For Example
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   headers: {
     'API_KEY': 'secret key',
     'ANOTHER_HEADER': 'Some header value'
diff --git a/source/models/customizing-adapters.md b/source/models/customizing-adapters.md
index cf8710028..6b9c7289a 100644
--- a/source/models/customizing-adapters.md
+++ b/source/models/customizing-adapters.md
@@ -17,22 +17,24 @@ more testable, easier to understand and reduces bloat for people who
 may want to subclass your adapter.
 
 If your backend has some consistent rules you can define an
-`ApplicationAdapter`. The `ApplicationAdapter` will get priority over
+`adapter:application`. The `adapter:application` will get priority over
 the default Adapter, however it will still be superseded by model
 specific Adapters.
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   // Application specific overrides go here
 });
 ```
 
 If you have one model that has exceptional rules for communicating
 with its backend than the others you can create a Model specific
-Adapter by naming an adapter "ModelName" + "Adapter".
+Adapter by running the command `ember generate adapter adapter-name`".
+For example, running `ember generate adapter post` will create the
+following file:
 
-```js
-App.PostAdapter = DS.RESTAdapter.extend({
+```app/adapters/post.js
+export default DS.RESTAdapter.extend({
   namespace: 'api/v1'
 });
 ```
@@ -72,13 +74,13 @@ non-standard backends.
 The `namespace` property can be used to prefix requests with a
 specific url namespace.
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   namespace: 'api/1'
 });
 ```
 
-Requests for `App.Person` would now target `http://emberjs.com/api/1/people/1`.
+Requests for `person` would now target `http://emberjs.com/api/1/people/1`.
 
 
 #### Host Customization
@@ -87,13 +89,13 @@ By default the adapter will target the current domain. If you would
 like to specify a new domain you can do so by setting the `host`
 property on the adapter.
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   host: 'https://api.example.com'
 });
 ```
 
-Requests for `App.Person` would now target `https://api.example.com/people/1`.
+Requests for `person` would now target `https://api.example.com/people/1`.
 
 
 #### Path Customization
@@ -106,16 +108,16 @@ For example, if you did not want to pluralize model names and needed
 underscore_case instead of camelCase you could override the
 `pathForType` method like this:
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   pathForType: function(type) {
     return Ember.String.underscore(type);
   }
 });
 ```
 
-Requests for `App.Person` would now target `/person/1`.
-Requests for `App.UserProfile` would now target `/user_profile/1`.
+Requests for `person` would now target `/person/1`.
+Requests for `userProfile` would now target `/user_profile/1`.
 
 #### Authoring Adapters
 
@@ -129,8 +131,8 @@ adapter it is important to remember to set this property to ensure
 Ember does the right thing in the case a user of your adapter
 does not specify an `ApplicationSerializer`.
 
-```js
-MyCustomAdapterAdapter = DS.RESTAdapter.extend({
+```app/adapters/my-custom-adapter.js
+export default DS.RESTAdapter.extend({
   defaultSerializer: '-default'
 });
 ```
diff --git a/source/models/defining-models.md b/source/models/defining-models.md
index 663f5fbd5..35ab576a6 100644
--- a/source/models/defining-models.md
+++ b/source/models/defining-models.md
@@ -12,8 +12,8 @@ Make sure to include `ember-data.js` after `ember.js`
 
 For every model in your application, create a subclass of `DS.Model`:
 
-```javascript
-App.Person = DS.Model.extend();
+```app/models/person.js
+export default DS.Model.extend();
 ```
 
 After you have defined a model class, you can start finding and creating
@@ -26,7 +26,7 @@ type of record to find:
 store.find('person', 1);
 ```
 
-The table below shows how model names map to model classes.
+The table below shows how model names map to model file paths.
 
 <table>
   <thead>
@@ -37,11 +37,11 @@ The table below shows how model names map to model classes.
   </thead>
   <tr>
     <td><code>photo</code></td>
-    <td><code>App.Photo</code></td>
+    <td><code>app/models/photo.js</code></td>
   </tr>
   <tr>
-    <td><code>adminUserProfile</code></td>
-    <td><code>App.AdminUserProfile</code></td>
+    <td><code>admin-user-profile</code></td>
+    <td><code>app/models/admin-user-profile.js</code></td>
   </tr>
 </table>
 
@@ -49,13 +49,11 @@ The table below shows how model names map to model classes.
 
 You can specify which attributes a model has by using `DS.attr`.
 
-```javascript
-var attr = DS.attr;
-
-App.Person = DS.Model.extend({
-  firstName: attr(),
-  lastName: attr(),
-  birthday: attr()
+```app/models/person.js
+export default DS.Model.extend({
+  firstName: DS.attr(),
+  lastName: DS.attr(),
+  birthday: DS.attr()
 });
 ```
 
@@ -67,10 +65,8 @@ You can use attributes just like any other property, including as part of a
 computed property. Frequently, you will want to define computed
 properties that combine or transform primitive attributes.
 
-```javascript
-var attr = DS.attr;
-
-App.Person = DS.Model.extend({
+```app/models/person.js
+export default DS.Model.extend({
   firstName: attr(),
   lastName: attr(),
 
@@ -87,8 +83,8 @@ If you don't specify the type of the attribute, it will be whatever was
 provided by the server. You can make sure that an attribute is always
 coerced into a particular type by passing a `type` to `attr`:
 
-```js
-App.Person = DS.Model.extend({
+```app/models/person.js
+export default DS.Model.extend({
   birthday: DS.attr('date')
 });
 ```
@@ -111,14 +107,12 @@ attribute types, and new types can be registered as transforms. See the
 
   Example
 
-  ```JavaScript
-  var attr = DS.attr;
-
-  App.User = DS.Model.extend({
-      username: attr('string'),
-      email: attr('string'),
-      verified: attr('boolean', {defaultValue: false}),
-      createdAt: attr('string', {
+  ```app/models/user.js
+  export default DS.Model.extend({
+      username: DS.attr('string'),
+      email: DS.attr('string'),
+      verified: DS.attr('boolean', {defaultValue: false}),
+      createdAt: DS.attr('string', {
           defaultValue: function() { return new Date(); }
       })
   });
@@ -135,12 +129,14 @@ define how your models relate to each other.
 To declare a one-to-one relationship between two models, use
 `DS.belongsTo`:
 
-```js
-App.User = DS.Model.extend({
+```app/models/user.js
+export default DS.Model.extend({
   profile: DS.belongsTo('profile')
 });
+```
 
-App.Profile = DS.Model.extend({
+```app/models/profile.js
+export default DS.Model.extend({
   user: DS.belongsTo('user')
 });
 ```
@@ -150,12 +146,14 @@ App.Profile = DS.Model.extend({
 To declare a one-to-many relationship between two models, use
 `DS.belongsTo` in combination with `DS.hasMany`, like this:
 
-```js
-App.Post = DS.Model.extend({
+```app/models/post.js
+export default DS.Model.extend({
   comments: DS.hasMany('comment')
 });
+```
 
-App.Comment = DS.Model.extend({
+```app/models/comment.js
+export default DS.Model.extend({
   post: DS.belongsTo('post')
 });
 ```
@@ -165,12 +163,13 @@ App.Comment = DS.Model.extend({
 To declare a many-to-many relationship between two models, use
 `DS.hasMany`:
 
-```js
-App.Post = DS.Model.extend({
+```app/models/post.js
+export default DS.Model.extend({
   tags: DS.hasMany('tag')
 });
 
-App.Tag = DS.Model.extend({
+```app/models/tag.js
+export default DS.Model.extend({
   posts: DS.hasMany('post')
 });
 ```
@@ -187,20 +186,18 @@ However, sometimes you may have multiple `belongsTo`/`hasMany`s for the
 same type. You can specify which property on the related model is the
 inverse using `DS.hasMany`'s `inverse` option:
 
-```javascript
-var belongsTo = DS.belongsTo,
-    hasMany = DS.hasMany;
-
-App.Comment = DS.Model.extend({
-  onePost: belongsTo('post'),
-  twoPost: belongsTo('post'),
-  redPost: belongsTo('post'),
-  bluePost: belongsTo('post')
+```app/models/comment.js
+export default DS.Model.extend({
+  onePost: DS.belongsTo('post'),
+  twoPost: DS.belongsTo('post'),
+  redPost: DS.belongsTo('post'),
+  bluePost: DS.belongsTo('post')
 });
+```
 
-
-App.Post = DS.Model.extend({
-  comments: hasMany('comment', {
+```app/models/post.js
+export default DS.Model.extend({
+  comments: DS.hasMany('comment', {
     inverse: 'redPost'
   })
 });
@@ -214,23 +211,17 @@ When you want to define a reflexive relation, you must either explicitly define
 the other side, and set the explicit inverse accordingly, and if you don't need the
 other side, set the inverse to null.
 
-```javascript
-var belongsTo = DS.belongsTo,
-    hasMany = DS.hasMany;
-
-App.Folder = DS.Model.extend({
-  children: hasMany('folder', {inverse: 'parent'}),
-  parent: belongsTo('folder', {inverse: 'children'})
+```app/models/folder.js
+export default DS.Model.extend({
+  children: DS.hasMany('folder', {inverse: 'parent'}),
+  parent: DS.belongsTo('folder', {inverse: 'children'})
 });
 ```
 
 or
 
-```javascript
-var belongsTo = DS.belongsTo,
-
-App.Folder = DS.Model.extend({
+```app/models/folder.js
+export default DS.Model.extend({
   parent: belongsTo('folder', {inverse: null})
 });
 ```
-
diff --git a/source/models/finding-records.md b/source/models/finding-records.md
index db1091a0c..78842f18c 100644
--- a/source/models/finding-records.md
+++ b/source/models/finding-records.md
@@ -67,19 +67,27 @@ This makes it easy to write apps with asynchronous data using Ember
 Data. Just return the requested record from the `model` hook, and let
 Ember deal with figuring out whether a network request is needed or not.
 
-```javascript
+```app/router.js
+var Router = Ember.Router.extend({});
+
 App.Router.map(function() {
   this.resource('posts');
   this.resource('post', { path: ':post_id' });
 });
 
-App.PostsRoute = Ember.Route.extend({
+export default Router;
+```
+
+```app/routes/posts.js
+export default Ember.Route.extend({
   model: function() {
     return this.store.find('post');
   }
 });
+```
 
-App.PostRoute = Ember.Route.extend({
+```app/routes/post.js
+export default Ember.Route.extend({
   model: function(params) {
     return this.store.find('post', params.post_id);
   }
diff --git a/source/models/frequently-asked-questions.md b/source/models/frequently-asked-questions.md
index a7a093963..a6bc5d9c9 100644
--- a/source/models/frequently-asked-questions.md
+++ b/source/models/frequently-asked-questions.md
@@ -64,8 +64,8 @@ This will offload searching all of the possible records to the server,
 while still creating a live updating list that includes records created
 and modified on the client.
 
-```js
-App.PostsFavoritedRoute = Ember.Route.extend({
+```app/routes/posts/favourited.js
+export default Ember.Route.extend({
   model: function() {
     var store = this.store;
 
diff --git a/source/models/handling-metadata.md b/source/models/handling-metadata.md
index 399ea8612..3ab533405 100644
--- a/source/models/handling-metadata.md
+++ b/source/models/handling-metadata.md
@@ -58,8 +58,8 @@ You can also customize metadata extraction by overriding the `extractMeta` metho
 
 You could extract it like so:
 
-```js
-App.ApplicationSerializer = DS.RESTSerializer.extend({
+```app/serializers/application.js
+export default DS.RESTSerializer.extend({
   extractMeta: function(store, type, payload) {
     if (payload && payload.total) {
       store.setMetadataFor(type, { total: payload.total });  // sets the metadata for "post"
diff --git a/source/models/index.md b/source/models/index.md
index d3e7bf291..1a4897483 100644
--- a/source/models/index.md
+++ b/source/models/index.md
@@ -33,18 +33,13 @@ Ember Data is also designed to work with streaming APIs like
 socket.io, Firebase, or WebSockets. You can open a socket to your server
 and push changes to records into the store whenever they occur.
 
-Currently, Ember Data ships as a separate library from Ember.js.  Until
-Ember Data is included as part of the standard distribution, you can get
-a copy of the latest passing build from
-[emberjs.com/builds][builds]:
+Currently, projects generated by `ember-cli` include Ember Data as a
+dependency in both `package.json` and `bower.json`. If you do not wish
+to use Ember Data, run the following command:
 
-* [Development][development-build]
-* [Minified][minified-build]
-
-[emberdata]: https://github.com/emberjs/data
-[builds]: /builds
-[development-build]: http://builds.emberjs.com/canary/ember-data.js
-[minified-build]: http://builds.emberjs.com/canary/ember-data.min.js
+```bash
+$ npm rm ember-data --save-dev
+```
 
 ### Core Concepts
 
@@ -63,11 +58,11 @@ This instance of `DS.Store` is created for you automatically and is shared
 among all of the objects in your application.
 
 You will use the store to retrieve records, as well to create new ones.
-For example, we might want to find an `App.Person` model with the ID of
+For example, we might want to find a `person` with the ID of
 `1` from our route's `model` hook:
 
-```js
-App.IndexRoute = Ember.Route.extend({
+```app/routes/index.js
+export default Ember.Route.extend({
   model: function() {
     return this.store.find('person', 1);
   }
@@ -82,8 +77,8 @@ if they leave your app and come back later (or if they refresh the page)
 should be represented by a model.
 
 For example, if you were writing a web application for placing orders at
-a restaurant, you might have models like `Order`, `LineItem`, and
-`MenuItem`.
+a restaurant, you might have models like `order`, `line-item`, and
+`menu-item`.
 
 Fetching orders becomes very easy:
 
@@ -95,23 +90,25 @@ Models define the type of data that will be provided by your server. For
 example, a `Person` model might have a `firstName` attribute that is a
 string, and a `birthday` attribute that is a date:
 
-```js
-App.Person = DS.Model.extend({
+```app/models/person.js
+export default DS.Model.extend({
   firstName: DS.attr('string'),
   birthday:  DS.attr('date')
 });
 ```
 
 A model also describes its relationships with other objects. For
-example, an `Order` may have many `LineItems`, and a `LineItem` may
-belong to a particular `Order`.
+example, an `order` may have many `line-items`, and a
+`line-item` may belong to a particular `order`.
 
-```js
-App.Order = DS.Model.extend({
+```app/models/order.js
+export default DS.Model.extend({
   lineItems: DS.hasMany('lineItem')
 });
+```
 
-App.LineItem = DS.Model.extend({
+```app/models/line-item.js
+export default DS.Model.extend({
   order: DS.belongsTo('order')
 });
 ```
@@ -128,8 +125,8 @@ to the server.
 A record is uniquely identified by its model type and id.
 
 For example, if you were writing a contact management app, you might
-have a model called `Person`. An individual record in your app might
-have a type of `Person` and an ID of `1` or `steve-buscemi`.
+have a `person`. An individual record in your app might
+have a type of `person` and an ID of `1` or `steve-buscemi`.
 
 ```js
 this.store.find('person', 1); // => { id: 1, name: 'steve-buscemi' }
diff --git a/source/models/pushing-records-into-the-store.md b/source/models/pushing-records-into-the-store.md
index ea747a790..441c4fe7a 100644
--- a/source/models/pushing-records-into-the-store.md
+++ b/source/models/pushing-records-into-the-store.md
@@ -24,20 +24,20 @@ To push a record into the store, call the store's `push()` method.
 For example, imagine we want to preload some data into the store when
 the application boots for the first time.
 
-We can use the `ApplicationRoute` to do so. The `ApplicationRoute` is
+We can use the `route:application` to do so. The `route:application` is
 the top-most route in the route hierarchy, and its `model` hook gets
 called once when the app starts up.
 
-```js
-var attr = DS.attr;
-
-App.Album = DS.Model.extend({
-  title: attr(),
-  artist: attr(),
-  songCount: attr()
+```app/models/album.js
+export default DS.Model.extend({
+  title: DS.attr(),
+  artist: DS.attr(),
+  songCount: DS.attr()
 });
+```
 
-App.ApplicationRoute = Ember.Route.extend({
+```app/routes/application.js
+export default Ember.Route.extend({
   model: function() {
     this.store.push('album', {
       id: 1,
diff --git a/source/models/the-basic-adapter.md b/source/models/the-basic-adapter.md
index 5107c5c95..79253e1ee 100644
--- a/source/models/the-basic-adapter.md
+++ b/source/models/the-basic-adapter.md
@@ -8,16 +8,18 @@ then load the data returned into the store.
 You provide the hooks to Ember Data by implementing a `sync` object on
 each model:
 
-```javascript
-App.Person = DS.Model.extend({
+```app/models/person.js
+var Person = DS.Model.extend({
   //...model definition...
 });
 
-App.Person.sync = {
+Person.sync = {
   find: function(id, process) {
     // ...
   }
 };
+
+export default Person
 ```
 
 ### Finding Records
@@ -48,8 +50,8 @@ Ember Data expects that the JSON you load in will have keys with the
 same name as the attributes and relationships that you have defined in
 the model. For example, if you have a `Person` model:
 
-```javascript
-App.Person = DS.Model.extend({
+```app/models/person.js
+export default DS.Model.extend({
   firstName: DS.attr('string'),
   lastName: DS.attr('string'),
   age: DS.attr('number')
diff --git a/source/models/the-fixture-adapter.md b/source/models/the-fixture-adapter.md
index c4582a5b8..cc1263f23 100644
--- a/source/models/the-fixture-adapter.md
+++ b/source/models/the-fixture-adapter.md
@@ -27,8 +27,8 @@ You should refer to [Defining a Model][1] for a more in-depth guide on using
 Ember Data Models, but for the purposes of demonstration we'll use an example
 modeling people who document Ember.js.
 
-```JavaScript
-App.Documenter = DS.Model.extend({
+```app/models/documenter.js
+export default DS.Model.extend({
   firstName: DS.attr( 'string' ),
   lastName: DS.attr( 'string' )
 });
@@ -39,20 +39,27 @@ App.Documenter = DS.Model.extend({
 In order to attach fixtures to your model, you have to use `reopenClass` method and define
 fixtures:
 
-```JavaScript
-App.Documenter.reopenClass({
+```app/models/documenter.js
+let Documenter = DS.Model.extend({
+  firstName: DS.attr( 'string' ),
+  lastName: DS.attr( 'string' )
+});
+
+Documenter.reopenClass({
   FIXTURES: [
     { id: 1, firstName: 'Trek', lastName: 'Glowacki' },
     { id: 2, firstName: 'Tom' , lastName: 'Dale'     }
   ]
 });
+
+export default Documenter
 ```
 
 That's it! You can now use all of methods for [Finding Records][2] in your
 application. For example:
 
-```JavaScript
-App.DocumenterRoute = Ember.Route.extend({
+```app/routes/documenter.js
+export default Ember.Route.extend({
   model: function() {
     return this.store.find('documenter', 1); // returns a promise that will resolve
                                              // with the record representing Trek Glowacki
diff --git a/source/models/the-rest-adapter.md b/source/models/the-rest-adapter.md
index 97f3ff290..8a45983a1 100644
--- a/source/models/the-rest-adapter.md
+++ b/source/models/the-rest-adapter.md
@@ -45,7 +45,7 @@ inflector.irregular('formula', 'formulae');
 inflector.uncountable('advice');
 ```
 
-This will tell the REST adapter that requests for `App.Formula` requests
+This will tell the REST adapter that requests for `formula`
 should go to `/formulae/1` instead of `/formulas/1`.
 
 #### Endpoint Path Customization
@@ -53,25 +53,25 @@ should go to `/formulae/1` instead of `/formulas/1`.
 Endpoint paths can be prefixed with a namespace by setting the `namespace`
 property on the adapter:
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   namespace: 'api/1'
 });
 ```
 
-Requests for `App.Person` would now target `http://emberjs.com/api/1/people/1`.
+Requests for `person` would now target `http://emberjs.com/api/1/people/1`.
 
 #### Host Customization
 
 An adapter can target other hosts by setting the `host` property.
 
-```js
-App.ApplicationAdapter = DS.RESTAdapter.extend({
+```app/adapters/application.js
+export default DS.RESTAdapter.extend({
   host: 'https://api.example.com'
 });
 ```
 
-Requests for `App.Person` would now target `https://api.example.com/people/1`.
+Requests for `person` would now target `https://api.example.com/people/1`.
 
 ### JSON Conventions
 
@@ -111,8 +111,8 @@ extractDeleteRecord: function(store, type, payload) {
 
 Attribute names should be camelized.  For example, if you have a model like this:
 
-```js
-App.Person = DS.Model.extend({
+```app/models/person.js
+export default DS.Model.extend({
   firstName: DS.attr('string'),
   lastName:  DS.attr('string'),
 
@@ -133,16 +133,18 @@ The JSON returned from your server should look like this:
 ```
 
 Irregular keys can be mapped with a custom serializer. If the JSON for
-the `Person` model has a key of `lastNameOfPerson`, and the desired
+`person` has a key of `lastNameOfPerson`, and the desired
 attribute name is simply `lastName`, then create a custom Serializer
 for the model and override the `normalizeHash` property.
 
-```js
-App.Person = DS.Model.extend({
+```app/models/person.js
+export default DS.Model.extend({
   lastName: DS.attr('string')
 });
+```
 
-App.PersonSerializer = DS.RESTSerializer.extend({
+```app/serializers/person.js
+export default DS.RESTSerializer.extend({
   normalizeHash: {
     lastNameOfPerson: function(hash) {
       hash.lastName = hash.lastNameOfPerson;
@@ -159,8 +161,8 @@ App.PersonSerializer = DS.RESTSerializer.extend({
 References to other records should be done by ID. For example, if you
 have a model with a `hasMany` relationship:
 
-```js
-App.Post = DS.Model.extend({
+```app/models/post.js
+export default DS.Model.extend({
   comments: DS.hasMany('comment', {async: true})
 });
 ```
@@ -182,8 +184,8 @@ Any `belongsTo` relationships in the JSON representation should be the
 camelized version of the Ember Data model's name, with the string
 `Id` appended. For example, if you have a model:
 
-```js
-App.Comment = DS.Model.extend({
+```app/models/comment.js
+export default DS.Model.extend({
   post: DS.belongsTo('post')
 });
 ```
@@ -201,13 +203,13 @@ The JSON should encode the relationship as an ID to another record:
 If needed these naming conventions can be overwritten by implementing
 the `keyForRelationship` method.
 
-```js
- App.ApplicationSerializer = DS.RESTSerializer.extend({
-   keyForRelationship: function(key, relationship) {
-      return key + 'Ids';
-   }
- });
- ```
+```app/serializers/application.js
+export default DS.RESTSerializer.extend({
+  keyForRelationship: function(key, relationship) {
+    return key + 'Ids';
+  }
+});
+```
 
 #### Sideloaded Relationships
 
@@ -247,8 +249,8 @@ server may return a non-standard date format.
 Ember Data can have new JSON transforms
 registered for use as attributes:
 
-```js
-App.CoordinatePointTransform = DS.Transform.extend({
+```app/transforms/coordinate-point.js
+export default DS.Transform.extend({
   serialize: function(value) {
     return [value.get('x'), value.get('y')];
   },
@@ -256,8 +258,10 @@ App.CoordinatePointTransform = DS.Transform.extend({
     return Ember.create({ x: value[0], y: value[1] });
   }
 });
+```
 
-App.Cursor = DS.Model.extend({
+```app/models/cursor.js
+export default DS.Model.extend({
   position: DS.attr('coordinatePoint')
 });
 ```
diff --git a/source/object-model/classes-and-instances.md b/source/object-model/classes-and-instances.md
index 57834529e..37a09ed09 100644
--- a/source/object-model/classes-and-instances.md
+++ b/source/object-model/classes-and-instances.md
@@ -2,21 +2,21 @@ To define a new Ember _class_, call the `extend()` method on
 `Ember.Object`:
 
 ```javascript
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   say: function(thing) {
     alert(thing);
   }
 });
 ```
 
-This defines a new `App.Person` class with a `say()` method.
+This defines a new `Person` class with a `say()` method.
 
 You can also create a _subclass_ from any existing class by calling
 its `extend()` method. For example, you might want to create a subclass
 of Ember's built-in `Ember.View` class:
 
-```js
-App.PersonView = Ember.View.extend({
+```app/views/person.js
+PersonView = Ember.View.extend({
   tagName: 'li',
   classNameBindings: ['isAdministrator']
 });
@@ -27,20 +27,20 @@ implementation of your parent class by calling the special `_super()`
 method:
 
 ```javascript
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   say: function(thing) {
     var name = this.get('name');
     alert(name + " says: " + thing);
   }
 });
 
-App.Soldier = App.Person.extend({
+Soldier = Person.extend({
   say: function(thing) {
     this._super(thing + ", sir!");
   }
 });
 
-var yehuda = App.Soldier.create({
+var yehuda = Soldier.create({
   name: "Yehuda Katz"
 });
 
@@ -55,7 +55,7 @@ computed properties you defined on the class will be available to
 instances:
 
 ```javascript
-var person = App.Person.create();
+var person = Person.create();
 person.say("Hello"); // alerts " says: Hello"
 ```
 
@@ -63,13 +63,13 @@ When creating an instance, you can initialize the value of its properties
 by passing an optional hash to the `create()` method:
 
 ```javascript
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   helloWorld: function() {
     alert("Hi, my name is " + this.get('name'));
   }
 });
 
-var tom = App.Person.create({
+var tom = Person.create({
   name: "Tom Dale"
 });
 
@@ -84,8 +84,8 @@ properties, create a new subclass and instantiate that.
 
 By convention, properties or variables that hold classes are
 PascalCased, while instances are not. So, for example, the variable
-`App.Person` would point to a class, while `person` would point to an instance
-(usually of the `App.Person` class). You should stick to these naming
+`Person` would point to a class, while `person` would point to an instance
+(usually of the `Person` class). You should stick to these naming
 conventions in your Ember applications.
 
 ### Initializing Instances
@@ -95,14 +95,14 @@ automatically. This is the ideal place to do setup required on new
 instances:
 
 ```js
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   init: function() {
     var name = this.get('name');
     alert(name + ", reporting for duty!");
   }
 });
 
-App.Person.create({
+Person.create({
   name: "Stefan Penner"
 });
 
@@ -119,7 +119,7 @@ When accessing the properties of an object, use the `get`
 and `set` accessor methods:
 
 ```js
-var person = App.Person.create();
+var person = Person.create();
 
 var name = person.get('name');
 person.set('name', "Tobias Fünke");
diff --git a/source/object-model/computed-properties-and-aggregate-data.md b/source/object-model/computed-properties-and-aggregate-data.md
index 62ae7a91e..04b8d9b8d 100644
--- a/source/object-model/computed-properties-and-aggregate-data.md
+++ b/source/object-model/computed-properties-and-aggregate-data.md
@@ -4,8 +4,8 @@ todo items in a controller to determine how many of them are completed.
 
 Here's what that computed property might look like:
 
-```javascript
-App.TodosController = Ember.Controller.extend({
+```app/controllers/todos.js
+export default Ember.Controller.extend({
   todos: [
     Ember.Object.create({ isDone: true }),
     Ember.Object.create({ isDone: false }),
@@ -31,8 +31,9 @@ this computed property when one of the following four events occurs:
 In the example above, the `remaining` count is `1`:
 
 ```javascript
-App.todosController = App.TodosController.create();
-App.todosController.get('remaining');
+import TodosController from 'app/controllers/todos';
+todosController = TodosController.create();
+todosController.get('remaining');
 // 1
 ```
 
@@ -40,17 +41,17 @@ If we change the todo's `isDone` property, the `remaining` property is updated
 automatically:
 
 ```javascript
-var todos = App.todosController.get('todos');
+var todos = todosController.get('todos');
 var todo = todos.objectAt(1);
 todo.set('isDone', true);
 
-App.todosController.get('remaining');
+todosController.get('remaining');
 // 0
 
 todo = Ember.Object.create({ isDone: false });
 todos.pushObject(todo);
 
-App.todosController.get('remaining');
+todosController.get('remaining');
 // 1
 ```
 
diff --git a/source/object-model/computed-properties.md b/source/object-model/computed-properties.md
index 4545130d9..9658549c6 100644
--- a/source/object-model/computed-properties.md
+++ b/source/object-model/computed-properties.md
@@ -9,7 +9,7 @@ It's super handy for taking one or more normal properties and transforming or ma
 We'll start with a simple example:
 
 ```javascript
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   // these will be supplied by `create`
   firstName: null,
   lastName: null,
@@ -19,7 +19,7 @@ App.Person = Ember.Object.extend({
   }.property('firstName', 'lastName')
 });
 
-var ironMan = App.Person.create({
+var ironMan = Person.create({
   firstName: "Tony",
   lastName:  "Stark"
 });
@@ -45,7 +45,7 @@ At this point, you might be wondering how you are able to call the `.property` f
 You can use computed properties as values to create new computed properties. Let's add a `description` computed property to the previous example, and use the existing `fullName` property and add in some other properties:
 
 ```javascript
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   firstName: null,
   lastName: null,
   age: null,
@@ -60,7 +60,7 @@ App.Person = Ember.Object.extend({
   }.property('fullName', 'age', 'country')
 });
 
-var captainAmerica = App.Person.create({
+var captainAmerica = Person.create({
   firstName: 'Steve',
   lastName: 'Rogers',
   age: 80,
@@ -89,7 +89,7 @@ Setting any dependent property will propagate changes through any computed prope
 You can also define what Ember should do when setting a computed property. If you try to set a computed property, it will be invoked with the key (property name), the value you want to set it to, and the previous value.
 
 ```javascript
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   firstName: null,
   lastName: null,
 
@@ -107,7 +107,7 @@ App.Person = Ember.Object.extend({
 });
 
 
-var captainAmerica = App.Person.create();
+var captainAmerica = Person.create();
 captainAmerica.set('fullName', "William Burnside");
 captainAmerica.get('firstName'); // William
 captainAmerica.get('lastName'); // Burnside
diff --git a/source/object-model/observers.md b/source/object-model/observers.md
index c04f0aecc..74f3ce92d 100644
--- a/source/object-model/observers.md
+++ b/source/object-model/observers.md
@@ -93,7 +93,7 @@ cannot rely on the side effect of set. Instead, specify that the observer
 should also run after init by using `.on('init')`:
 
 ```javascript
-App.Person = Ember.Object.extend({
+Person = Ember.Object.extend({
   init: function() {
     this.set('salutation', "Mr/Ms");
   },
diff --git a/source/routing/asynchronous-routing.md b/source/routing/asynchronous-routing.md
index 8a6a5bd6c..5a221a836 100644
--- a/source/routing/asynchronous-routing.md
+++ b/source/routing/asynchronous-routing.md
@@ -11,7 +11,7 @@ value). The way to retrieve this eventual value, or handle the cases
 when the promise rejects, is via the promise's `then` method, which
 accepts two optional callbacks, one for fulfillment and one for
 rejection. If the promise fulfills, the fulfillment handler gets called
-with the fulfilled value as its sole argument, and if the promise rejects, 
+with the fulfilled value as its sole argument, and if the promise rejects,
 the rejection handler gets called with a reason for the rejection as its
 sole argument. For example:
 
@@ -44,7 +44,7 @@ usernamesPromise.then(fetchPhotosOfUsers)
 
 In the above example, if any of the methods
 `fetchPhotosOfUsers`, `applyInstagramFilters`, or
-`uploadTrendyPhotoAlbum` returns a promise that rejects, 
+`uploadTrendyPhotoAlbum` returns a promise that rejects,
 `handleErrors` will be called with
 the reason for the failure. In this manner, promises approximate an
 asynchronous form of try-catch statements that prevent the rightward
@@ -53,18 +53,18 @@ approach to managing complex asynchronous logic in your applications.
 
 This guide doesn't intend to fully delve into all the different ways
 promises can be used, but if you'd like a more thorough introduction,
-take a look at the readme for [RSVP](https://github.com/tildeio/rsvp.js), 
-the promise library that Ember uses. 
+take a look at the readme for [RSVP](https://github.com/tildeio/rsvp.js),
+the promise library that Ember uses.
 
 ### The Router Pauses for Promises
 
 When transitioning between routes, the Ember router collects all of the
 models (via the `model` hook) that will be passed to the route's
 controllers at the end of the transition. If the `model` hook (or the related
-`beforeModel` or `afterModel` hooks) return normal (non-promise) objects or 
-arrays, the transition will complete immediately. But if the `model` hook 
-(or the related `beforeModel` or `afterModel` hooks) returns a promise (or 
-if a promise was provided as an argument to `transitionTo`), the transition 
+`beforeModel` or `afterModel` hooks) return normal (non-promise) objects or
+arrays, the transition will complete immediately. But if the `model` hook
+(or the related `beforeModel` or `afterModel` hooks) returns a promise (or
+if a promise was provided as an argument to `transitionTo`), the transition
 will pause until that promise fulfills or rejects.
 
 **Note:** The router considers any object with a `then` method
@@ -78,15 +78,15 @@ will be the fulfilled values from the promises.
 
 A basic example:
 
-```js
-App.TardyRoute = Ember.Route.extend({
+```app/routes/tardy.js
+export default Ember.Route.extend({
   model: function() {
     return new Ember.RSVP.Promise(function(resolve) {
       Ember.run.later(function() {
         resolve({ msg: "Hold Your Horses" });
       }, 3000);
     });
-  }, 
+  },
 
   setupController: function(controller, model) {
     console.log(model.msg); // "Hold Your Horses"
@@ -94,19 +94,19 @@ App.TardyRoute = Ember.Route.extend({
 });
 ```
 
-When transitioning into `TardyRoute`, the `model` hook will be called and
+When transitioning into `route:tardy`, the `model` hook will be called and
 return a promise that won't resolve until 3 seconds later, during which time
 the router will be paused in mid-transition. When the promise eventually
 fulfills, the router will continue transitioning and eventually call
-`TardyRoute`'s `setupController` hook with the resolved object.
+`route:tardy`'s `setupController` hook with the resolved object.
 
 This pause-on-promise behavior is extremely valuable for when you need
 to guarantee that a route's data has fully loaded before displaying a
-new template. 
+new template.
 
 ### When Promises Reject...
 
-We've covered the case when a model promise fulfills, but what if it rejects? 
+We've covered the case when a model promise fulfills, but what if it rejects?
 
 By default, if a model promise rejects during a transition, the transition is
 aborted, no new destination route templates are rendered, and an error
@@ -114,12 +114,12 @@ is logged to the console.
 
 You can configure this error-handling logic via the `error` handler on
 the route's `actions` hash. When a promise rejects, an `error` event
-will be fired on that route and bubble up to `ApplicationRoute`'s
+will be fired on that route and bubble up to `route:application`'s
 default error handler unless it is handled by a custom error handler
 along the way, e.g.:
 
-```js
-App.GoodForNothingRoute = Ember.Route.extend({
+```app/routes/good-for-nothing.js
+export default Ember.Route.extend({
   model: function() {
     return Ember.RSVP.reject("FAIL");
   },
@@ -139,18 +139,18 @@ App.GoodForNothingRoute = Ember.Route.extend({
 ```
 
 In the above example, the error event would stop right at
-`GoodForNothingRoute`'s error handler and not continue to bubble. To
-make the event continue bubbling up to `ApplicationRoute`, you can
+`route:good-for-nothing`'s error handler and not continue to bubble. To
+make the event continue bubbling up to `route:application`, you can
 return true from the error handler.
 
 ### Recovering from Rejection
 
 Rejected model promises halt transitions, but because promises are chainable,
-you can catch promise rejects within the `model` hook itself and convert 
+you can catch promise rejects within the `model` hook itself and convert
 them into fulfills that won't halt the transition.
 
-```js
-App.FunkyRoute = Ember.Route.extend({
+```app/routes/funky.js
+export default Ember.Route.extend({
   model: function() {
     return iHopeThisWorks().then(null, function() {
       // Promise rejected, fulfill with some default value to
@@ -167,7 +167,7 @@ The `model` hook covers many use cases for pause-on-promise transitions,
 but sometimes you'll need the help of the related hooks `beforeModel`
 and `afterModel`. The most common reason for this is that if you're
 transitioning into a route with a dynamic URL segment via `{{link-to}}` or
-`transitionTo` (as opposed to a transition caused by a URL change), 
+`transitionTo` (as opposed to a transition caused by a URL change),
 the model for the route you're transitioning into will have already been
 specified (e.g. `{{#link-to 'article' article}}` or
 `this.transitionTo('article', article)`), in which case the `model` hook
@@ -194,10 +194,10 @@ The following is a far-from-exhaustive list of use cases in which
   potentially wasteful server query in `model`
 - Ensuring that the user has an authentication token before proceeding
   onward to `model`
-- Loading application code required by this route 
+- Loading application code required by this route
 
-```js
-App.SecretArticlesRoute  = Ember.Route.extend({
+```app/routes/secret-articles.js
+export default Ember.Route.extend({
   beforeModel: function() {
     if (!this.controllerFor('auth').get('isLoggedIn')) {
       this.transitionTo('login');
@@ -212,12 +212,12 @@ App.SecretArticlesRoute  = Ember.Route.extend({
 
 The `afterModel` hook is called after a route's model (which might be a
 promise) is resolved, and follows the same pause-on-promise semantics as
-`model` and `beforeModel`. It is passed the already-resolved model 
+`model` and `beforeModel`. It is passed the already-resolved model
 and can therefore perform any additional logic that
 depends on the fully resolved value of a model.
 
-```js
-App.ArticlesRoute = Ember.Route.extend({
+```app/routes/articles.js
+export default Ember.Route.extend({
   model: function() {
     // `this.store.find('article')` returns a promise-like object
     // (it has a `then` method that can be used like a promise)
@@ -233,7 +233,7 @@ App.ArticlesRoute = Ember.Route.extend({
 
 You might be wondering why we can't just put the `afterModel` logic
 into the fulfill handler of the promise returned from `model`; the
-reason, as mentioned above, is that transitions initiated 
+reason, as mentioned above, is that transitions initiated
 via `{{link-to}}` or `transitionTo` likely already provided the
 model for this route, so `model` wouldn't be called in these cases.
 
@@ -243,4 +243,3 @@ model for this route, so `model` wouldn't be called in these cases.
 
 - [Embercasts: Client-side Authentication Part 2](http://www.embercasts.com/episodes/client-side-authentication-part-2)
 - [RC6 Blog Post describing these new features](/blog/2013/06/23/ember-1-0-rc6.html)
-
diff --git a/source/routing/defining-your-routes.md b/source/routing/defining-your-routes.md
index fdcfa0a26..34769cb18 100644
--- a/source/routing/defining-your-routes.md
+++ b/source/routing/defining-your-routes.md
@@ -10,8 +10,8 @@ calling `map`, you should pass a function that will be invoked with the value
 [routes](http://emberjs.com/guides/routing/defining-your-routes/) and
 [resources](http://emberjs.com/guides/routing/defining-your-routes/#toc_resources).
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.route('about', { path: '/about' });
   this.route('favorites', { path: '/favs' });
 });
@@ -20,15 +20,15 @@ App.Router.map(function() {
 Now, when the user visits `/about`, Ember.js will render the `about`
 template. Visiting `/favs` will render the `favorites` template.
 
-**Heads up!** You get a few routes for free: the `ApplicationRoute` and
-the `IndexRoute` (corresponding to the `/` path).
+**Heads up!** You get a few routes for free: the `route:application` and
+`route:index` (corresponding to the `/` path).
 [See below](#toc_initial-routes) for more details.
 
 Note that you can leave off the path if it is the same as the route
 name. In this case, the following is equivalent to the above example:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.route('about');
   this.route('favorites', { path: '/favs' });
 });
@@ -52,10 +52,10 @@ points to the currently active route.
 
 You can customize the behavior of a route by creating an `Ember.Route`
 subclass. For example, to customize what happens when your user visits
-`/`, create an `App.IndexRoute`:
+`/`, create an `route:index`:
 
-```javascript
-App.IndexRoute = Ember.Route.extend({
+```app/routes/index.js
+export default Ember.Route.extend({
   setupController: function(controller) {
     // Set the IndexController's `title`
     controller.set('title', 'My App');
@@ -63,7 +63,7 @@ App.IndexRoute = Ember.Route.extend({
 });
 ```
 
-The `IndexController` is the starting context for the `index` template.
+`controller:index` is the starting context for the `index` template.
 Now that you've set `title`, you can use it in the template:
 
 ```handlebars
@@ -71,7 +71,7 @@ Now that you've set `title`, you can use it in the template:
 <h1>{{title}}</h1>
 ```
 
-(If you don't explicitly define an `App.IndexController`, Ember.js will
+(If you don't explicitly define an `controller:index`, Ember.js will
 automatically generate one for you.)
 
 Ember.js automatically figures out the names of the routes and controllers based on
@@ -90,22 +90,22 @@ the name you pass to `this.route`.
   <tr>
     <td><code>/</code></td>
     <td><code>index</code></td>
-    <td><code>IndexController</code></td>
-    <td><code>IndexRoute</code></td>
+    <td><code>app/controllers/index</code></td>
+    <td><code>app/routes/index</code></td>
     <td><code>index</code></td>
   </tr>
   <tr>
     <td><code>/about</code></td>
     <td><code>about</code></td>
-    <td><code>AboutController</code></td>
-    <td><code>AboutRoute</code></td>
+    <td><code>app/controllers/about</code></td>
+    <td><code>app/routes/about</code></td>
     <td><code>about</code></td>
   </tr>
   <tr>
     <td><code>/favs</code></td>
     <td><code>favorites</code></td>
-    <td><code>FavoritesController</code></td>
-    <td><code>FavoritesRoute</code></td>
+    <td><code>app/controllers/favorites</code></td>
+    <td><code>app/routes/favorites</code></td>
     <td><code>favorites</code></td>
   </tr>
 </table>
@@ -114,8 +114,8 @@ the name you pass to `this.route`.
 
 You can define groups of routes that work with a resource:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('posts', { path: '/posts' }, function() {
     this.route('new');
   });
@@ -125,8 +125,8 @@ App.Router.map(function() {
 As with `this.route`, you can leave off the path if it's the same as the
 name of the route, so the following router is equivalent:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('posts', function() {
     this.route('new');
   });
@@ -148,29 +148,29 @@ This router creates three routes:
   <tr>
     <td><code>/</code></td>
     <td><code>index</code></td>
-    <td><code>IndexController</code></td>
-    <td><code>IndexRoute</code></td>
+    <td><code>app/controllers/index</code></td>
+    <td><code>app/routes/index</code></td>
     <td><code>index</code></td>
   </tr>
   <tr>
     <td>N/A</td>
     <td><code>posts</code><sup>1</sup></td>
-    <td><code>PostsController</code></td>
-    <td><code>PostsRoute</code></td>
+    <td><code>app/controllers/posts</code></td>
+    <td><code>app/routes/posts</code></td>
     <td><code>posts</code></td>
   </tr>
   <tr>
     <td><code>/posts</code></td>
     <td><code>posts.index</code></code></td>
-    <td><code>PostsController</code><br>↳<code>PostsIndexController</code></td>
-    <td><code>PostsRoute</code><br>↳<code>PostsIndexRoute</code></td>
+    <td><code>app/controllers/posts</code><br>↳<code>app/controllers/posts/index</code></td>
+    <td><code>app/routes/posts</code><br>↳<code>app/routes/posts/index</code></td>
     <td><code>posts</code><br>↳<code>posts/index</code></td>
   </tr>
   <tr>
     <td><code>/posts/new</code></td>
     <td><code>posts.new</code></td>
-    <td><code>PostsController</code><br>↳<code>PostsNewController</code></td>
-    <td><code>PostsRoute</code><br>↳<code>PostsNewRoute</code></td>
+    <td><code>app/controllers/posts</code><br>↳<code>app/controllers/posts/new</code></td>
+    <td><code>app/routes/posts</code><br>↳<code>app/posts/new</code></td>
     <td><code>posts</code><br>↳<code>posts/new</code></td>
   </tr>
 </table>
@@ -181,7 +181,7 @@ This router creates three routes:
 
 NOTE: If you define a resource using `this.resource` and **do not** supply
 a function, then the implicit `resource.index` route is **not** created. In
-that case, `/resource` will only use the `ResourceRoute`, `ResourceController`,
+that case, `/resource` will only use the `route:resource`, `resource:controllers`,
 and `resource` template.
 
 Routes nested under a resource take the name of the resource plus their
@@ -217,8 +217,8 @@ into a model.
 For example, if we have the resource `this.resource('posts');`, our
 route handler might look like this:
 
-```javascript
-App.PostsRoute = Ember.Route.extend({
+```app/posts/route.js
+export default Ember.Route.extend({
   model: function() {
     return this.store.find('post');
   }
@@ -238,13 +238,15 @@ Enter _dynamic segments_.
 A dynamic segment is a portion of a URL that starts with a `:` and is
 followed by an identifier.
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('posts');
   this.resource('post', { path: '/post/:post_id' });
 });
+```
 
-App.PostRoute = Ember.Route.extend({
+```app/post/route.js
+export default Ember.Route.extend({
   model: function(params) {
     return this.store.find('post', params.post_id);
   }
@@ -255,7 +257,7 @@ Because this pattern is so common, the above `model` hook is the
 default behavior.
 
 For example, if the dynamic segment is `:post_id`, Ember.js is smart
-enough to know that it should use the model `App.Post` (with the ID
+enough to know that it should use the Post model (with the ID
 provided in the URL). Specifically, unless you override `model`, the route will
 return `this.store.find('post', params.post_id)` automatically.
 
@@ -266,12 +268,14 @@ as expected out of the box.
 If your model does not use the `id` property in the URL, you should
 define a serialize method on your route:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('post', {path: '/posts/:post_slug'});
 });
+```
 
-App.PostRoute = Ember.Route.extend({
+```app/post/route.js
+export default Ember.Route.extend({
   model: function(params) {
     // the server returns `{ slug: 'foo-post' }`
     return Ember.$.getJSON('/posts/' + params.post_slug);
@@ -291,8 +295,8 @@ dynamic segment (in this case, `:post_id`).
 
 You can nest both routes and resources:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('post', { path: '/post/:post_id' }, function() {
     this.route('edit');
     this.resource('comments', function() {
@@ -318,51 +322,51 @@ This router creates five routes:
     <tr>
       <td><code>/</code></td>
       <td><code>index</code></td>
-      <td><code>App.IndexController</code></td>
-      <td><code>App.IndexRoute</code></td>
-      <td><code>index</code></td>
+      <td><code>app/controllers/index</code></td>
+      <td><code>app/routes/index</code></td>
+      <td><code>app/templates/index</code></td>
     </tr>
     <tr>
       <td>N/A</td>
       <td><code>post</code></td>
-      <td><code>App.PostController</code></td>
-      <td><code>App.PostRoute</code></td>
-      <td><code>post</code></td>
+      <td><code>app/controllers/post</code></td>
+      <td><code>app/routes/post</code></td>
+      <td><code>app/templates/post</code></td>
     </tr>
     <tr>
       <td><code>/post/:post_id<sup>2</sup></code></td>
       <td><code>post.index</code></td>
-      <td><code>App.PostIndexController</code></td>
-      <td><code>App.PostIndexRoute</code></td>
-      <td><code>post/index</code></td>
+      <td><code>app/controllers/post/index</code></td>
+      <td><code>app/routes/post/index</code></td>
+      <td><code>app/templates/post/index</code></td>
     </tr>
     <tr>
       <td><code>/post/:post_id/edit</code></td>
       <td><code>post.edit</code></td>
-      <td><code>App.PostEditController</code></td>
-      <td><code>App.PostEditRoute</code></td>
-      <td><code>post/edit</code></td>
+      <td><code>app/controllers/post/edit</code></td>
+      <td><code>app/routes/post/edit</code></td>
+      <td><code>app/templates/post/edit</code></td>
     </tr>
     <tr>
       <td>N/A</td>
       <td><code>comments</code></td>
-      <td><code>App.CommentsController</code></td>
-      <td><code>App.CommentsRoute</code></td>
-      <td><code>comments</code></td>
+      <td><code>app/controllers/comments</code></td>
+      <td><code>app/routes/comments</code></td>
+      <td><code>app/templates/comments</code></td>
     </tr>
     <tr>
       <td><code>/post/:post_id/comments</code></td>
       <td><code>comments.index</code></td>
-      <td><code>App.CommentsIndexController</code></td>
-      <td><code>App.CommentsIndexRoute</code></td>
-      <td><code>comments/index</code></td>
+      <td><code>app/controllers/comments/index</code></td>
+      <td><code>app/routes/comments/index</code></td>
+      <td><code>app/templates/comments/index</code></td>
     </tr>
     <tr>
       <td><code>/post/:post_id/comments/new</code></td>
       <td><code>comments.new</code></td>
-      <td><code>App.CommentsNewController</code></td>
-      <td><code>App.CommentsNewRoute</code></td>
-      <td><code>comments/new</code></td>
+      <td><code>app/controllers/comments/new</code></td>
+      <td><code>app/routes/comments/new</code></td>
+      <td><code>app/templates/comments/new</code></td>
     </tr>
   </table>
 </div>
@@ -379,8 +383,8 @@ class names don't get longer the deeper nested the resources are.
 
 You are also able to create deeply nested resources in order to preserve the namespace on your routes:
 
-```javascript
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('foo', function() {
     this.resource('foo.bar', { path: '/bar' }, function() {
       this.route('baz'); // This will be foo.bar.baz
@@ -405,30 +409,30 @@ This router creates the following routes:
     <tr>
       <td><code>/</code></td>
       <td><code>index</code></td>
-      <td><code>App.IndexController</code></td>
-      <td><code>App.IndexRoute</code></td>
-      <td><code>index</code></td>
+      <td><code>app/controllers/index</code></td>
+      <td><code>app/routes/index</code></td>
+      <td><code>app/templates/index</code></td>
     </tr>
     <tr>
       <td><code>/foo</code></td>
       <td><code>foo.index</code></td>
-      <td><code>App.FooIndexController</code></td>
-      <td><code>App.FooIndexRoute</code></td>
-      <td><code>foo/index</code></td>
+      <td><code>app/controllers/foo/index</code></td>
+      <td><code>app/routes/foo/index</code></td>
+      <td><code>app/templates/foo/index</code></td>
     </tr>
     <tr>
       <td><code>/foo/bar</code></td>
       <td><code>foo.bar.index</code></td>
-      <td><code>App.FooBarIndexController</code></td>
-      <td><code>App.FooBarIndexRoute</code></td>
-      <td><code>foo/bar/index</code></td>
+      <td><code>app/controllers/foo/bar/index</code></td>
+      <td><code>app/routes/foo/bar/index</code></td>
+      <td><code>app/templates/foo/bar/index</code></td>
     </tr>
     <tr>
       <td><code>/foo/bar/baz</code></td>
       <td><code>foo.bar.baz</code></td>
-      <td><code>App.FooBarBazController</code></td>
-      <td><code>App.FooBarBazRoute</code></td>
-      <td><code>foo/bar/baz</code></td>
+      <td><code>app/controllers/foo/bar/baz</code></td>
+      <td><code>app/routes/foo/bar/baz</code></td>
+      <td><code>app/templates/foo/bar/baz</code></td>
     </tr>
   </table>
 </div>
@@ -437,24 +441,25 @@ This router creates the following routes:
 
 A few routes are immediately available within your application:
 
-  - `App.ApplicationRoute` is entered when your app first boots up. It renders
+  - `route:application` is entered when your app first boots up. It renders
     the `application` template.
 
-  - `App.IndexRoute` is the default route, and will render the `index` template
+  - `route:index` is the default route, and will render the `index` template
     when the user visits `/` (unless `/` has been overridden by your own
     custom route).
 
 Remember, these routes are part of every application, so you don't need to
-specify them in `App.Router.map`.
+specify them in your `app/router.js`.
 
 ### Wildcard / globbing routes
 
 You can define wildcard routes that will match multiple routes. This could be used, for example,
-if you'd like a catchall route which is useful when the user enters an incorrect URL not managed
+if you'd like a catch-all route which is useful when the user enters an incorrect URL not managed
 by your app.
 
 ```javascript
-App.Router.map(function() {
+// app/router.js
+Router.map(function() {
   this.route('catchall', {path: '/*wildcard'});
 });
 ```
@@ -462,8 +467,8 @@ App.Router.map(function() {
 Like all routes with a dynamic segment, you must provide a context when using a `{{link-to}}`
 or `transitionTo` to programatically enter this route.
 
-```javascript
-App.ApplicationRoute = Ember.Route.extend({
+```app/application/route.js
+export default Ember.Route.extend({
   actions: {
     error: function() {
       this.transitionTo('catchall', 'application-error');
diff --git a/source/routing/generated-objects.md b/source/routing/generated-objects.md
index 38a045f79..ad514ba28 100644
--- a/source/routing/generated-objects.md
+++ b/source/routing/generated-objects.md
@@ -10,24 +10,19 @@ these objects is not found, appropriate objects will be generated in memory for
 Given you have the following route:
 
 ```javascript
-App.Router.map(function() {
+// app/router.js
+Router.map(function() {
   this.resource('posts');
 });
 ```
 
-When you navigate to `/posts`, Ember.js looks for `App.PostsRoute`.
-If it doesn't find it, it will automatically generate an `App.PostsRoute` for you.
-
-
-##### Custom Generated Routes
-You can have all your generated routes extend a custom route.  If you define `App.Route`,
-all generated routes will be instances of that route.
-
+When you navigate to `/posts`, Ember.js looks for `route:posts`.
+If it doesn't find it, it will automatically generate an `route:posts` for you.
 
 
 #### Generated Controllers
 
-If you navigate to route `posts`, Ember.js looks for a controller called `App.PostsController`.
+If you navigate to route `posts`, Ember.js looks for a controller called `controller:posts`.
 If you did not define it, one will be generated for you.
 
 Ember.js can generate three types of controllers:
@@ -45,13 +40,6 @@ The type of controller Ember.js chooses to generate for you depends on your rout
 [3]: /guides/controllers/representing-multiple-models-with-arraycontroller
 
 
-##### Custom Generated Controllers
-
-If you want to customize generated controllers, you can define your own `App.Controller`, `App.ObjectController`
-and `App.ArrayController`.  Generated controllers will extend one of these three (depending on the conditions above).
-
-
-
 #### Generated Views and Templates
 
 A route also expects a view and a template.  If you don't define a view,
@@ -64,6 +52,3 @@ as an `outlet` so that nested routes can be seamlessly inserted.  It is equivale
 ```handlebars
 {{outlet}}
 ```
-
-
-
diff --git a/source/routing/index.md b/source/routing/index.md
index ecf8f6f1b..942224c8b 100644
--- a/source/routing/index.md
+++ b/source/routing/index.md
@@ -33,23 +33,21 @@ or more of the following:
 
 ###Logging Route Changes
 
-As your application increases in complexity, it can be helpful to see exactly what is going on with the router. To have Ember write out transition events to the log, simply modify your `Ember.Application`:
+As your application increases in complexity, it can be helpful to see exactly what is going on with the router. To have Ember write out transition events to the log, simply modify your `config/environment.js`:
 
 ```javascript
-App = Ember.Application.create({
-  LOG_TRANSITIONS: true
-});
+ENV.APP.LOG_TRANSITIONS = true;
 ```
 
 ###Specifying a Root URL
 If your Ember application is one of multiple web applications served from the same domain, it may be necessary to indicate to the router what the root URL for your Ember application is. By default, Ember will assume it is served from the root of your domain.
 
-If for example, you wanted to serve your blogging application from emberjs.com/blog/, it would be necessary to specify a root URL of `/blog/`.
+If for example, you wanted to serve your blogging application from `emberjs.com/blog/`, it would be necessary to specify a root URL of `/blog/`.
 
 This can be achieved by setting the rootURL on the router:
 
 ```js
-App.Router.reopen({
+Router.reopen({
   rootURL: '/blog/'
 });
 ```
diff --git a/source/routing/link-to-router-flow.md b/source/routing/link-to-router-flow.md
index b8f063f9e..7a335b909 100644
--- a/source/routing/link-to-router-flow.md
+++ b/source/routing/link-to-router-flow.md
@@ -8,8 +8,8 @@ phases of the transition.
 Lets imagine a user is on the `/about/faq/` page of an application
 with the following router.
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('about', function() {
     this.route('faq');
   });
@@ -21,11 +21,11 @@ App.Router.map(function() {
 ```
 
 This would mean there are currently three nested active routes in this
-application. The `ApplicationRoute`, `AboutRoute` and the `AboutFaqRoute`.
+application. The `route:application`, `route:about` and the `route:about-faq`.
 
 <img src="../images/guides/routing/active-route.png" alt="Active route" class="highlight">
 
-Lets assume a user clicks on a `link-to` for the `UserProfileRoute` like
+Lets assume a user clicks on a `link-to` for the `controller:user/profile` like
 the one below.
 
 ```handlebars
@@ -37,7 +37,7 @@ user profile page. Broadly these steps are grouped into three phases,
 the Pre Transition Phase, the Model Resolution Phase and the Sync
 Phase. We will explore these phases in more depth below.
 
-#### Pre Transition Phase
+#### Pre-Transition Phase
 
 First Ember will create a transition object. This object is a promise
 which will be resolved when the transition is complete or rejected
@@ -56,8 +56,8 @@ whether or not the transition should occur. The code to intercept the
 `willTransition` action and abort a transition might looks something
 like this.
 
-```js
-App.AboutFaqRoute = Ember.Route.extend({
+```app/about-faq/route.js
+export default Ember.Route.extend({
   actions: {
     willTransition: function(transition) {
       if (this.controllerFor('form').get('userHasEnteredData') &&
diff --git a/source/routing/loading-and-error-substates.md b/source/routing/loading-and-error-substates.md
index 796851508..0f0d93d8b 100644
--- a/source/routing/loading-and-error-substates.md
+++ b/source/routing/loading-and-error-substates.md
@@ -15,14 +15,16 @@ the transition will resume.
 
 Consider the following:
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('foo', function() { // -> FooRoute
     this.route('slowModel');        // -> FooSlowModelRoute
   });
 });
+```
 
-App.FooSlowModelRoute = Ember.Route.extend({
+```app/foo-slow-model/route.js
+export default Ember.Route.extend({
   model: function() {
     return somePromiseThatTakesAWhileToResolve();
   }
@@ -45,8 +47,8 @@ So, how can we provide some visual feedback during the transition?
 Ember provides a default implementation of the `loading` process that implements
 the following loading substate behavior.
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('foo', function() {       // -> FooRoute
     this.resource('foo.bar', function() { // -> FooBarRoute
       this.route('baz');                  // -> FooBarBazRoute
@@ -67,15 +69,15 @@ above `foo.bar.baz` that it can transition into, starting with
 Ember will find a loading route at the above location if either a) a
 Route subclass has been defined for such a route, e.g.
 
-1. `App.FooBarLoadingRoute`
-2. `App.FooLoadingRoute`
-3. `App.LoadingRoute`
+1. `app/routes/foo/bar/loading`
+2. `app/routes/foo/loading`
+3. `app/routes/loading`
 
 or b) a properly-named loading template has been found, e.g.
 
-1. `foo/bar/loading`
-2. `foo/loading`
-3. `loading`
+1. `app/templates/foo/bar/loading`
+2. `app/templates/foo/loading`
+3. `app/templates/loading`
 
 During a slow asynchronous transition, Ember will transition into the
 first loading sub-state/route that it finds, if one exists. The
@@ -118,14 +120,14 @@ pre-transition route to enter a loading substate.
 
 If you return a promise from the various `beforeModel`/`model`/`afterModel` hooks,
 and it doesn't immediately resolve, a `loading` event will be fired on that route
-and bubble upward to `ApplicationRoute`.
+and bubble upward to `route:application`.
 
 If the `loading` handler is not defined at the specific route,
 the event will continue to bubble above a transition's pivot
-route, providing the `ApplicationRoute` the opportunity to manage it.
+route, providing the `route:application` the opportunity to manage it.
 
-```js
-App.FooSlowModelRoute = Ember.Route.extend({
+```app/foo-slow-model/route.js
+export default Ember.Route.extend({
   model: function() {
     return somePromiseThatTakesAWhileToResolve();
   },
@@ -145,8 +147,8 @@ The `loading` handler provides the ability to decide what to do during
 the loading process. If the last loading handler is not defined
 or returns `true`, Ember will perform the loading substate behavior.
 
-```js
-App.ApplicationRoute = Ember.Route.extend({
+```app/application/route.js
+export default Ember.Route.extend({
   actions: {
     loading: function(transition, originRoute) {
       displayLoadingSpinner();
@@ -167,8 +169,8 @@ Similar to how the default `loading` event handlers are implemented,
 the default `error` handlers will look for an appropriate error substate to
 enter, if one can be found.
 
-```js
-App.Router.map(function() {
+```$1
+Router.map(function() {
   this.resource('articles', function() { // -> ArticlesRoute
     this.route('overview');              // -> ArticlesOverviewRoute
   });
@@ -179,8 +181,8 @@ For instance, an error thrown or rejecting promise returned from
 `ArticlesOverviewRoute#model` (or `beforeModel` or `afterModel`)
 will look for:
 
-1. Either `ArticlesErrorRoute` or `articles/error` template
-2. Either `ErrorRoute` or `error` template
+1. Either `route:articles/error` or `articles/error` template
+2. Either `route:error` or `error` template
 
 If one of the above is found, the router will immediately transition into
 that substate (without updating the URL). The "reason" for the error
@@ -196,14 +198,16 @@ logged.
 Routes with dynamic segments are often mapped to a mental model of "two
 separate levels." Take for example:
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('foo', {path: '/foo/:id'}, function() {
     this.route('baz');
   });
 });
+```
 
-App.FooRoute = Ember.Route.extend({
+```app/foo/route.js
+export default Ember.Route.extend({
   model: function(params) {
     return new Ember.RSVP.Promise(function(resolve, reject) {
        reject("Error");
@@ -220,8 +224,8 @@ intentionally parallel behavior as the `foo` route is never successfully
 entered. In order to create a `foo` scope for errors and render `foo/error`
 into `foo`'s `outlet` you would need to split the dynamic segment:
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('foo', {path: '/foo'}, function() {
     this.resource('elem', {path: ':id'}, function() {
       this.route('baz');
@@ -242,8 +246,8 @@ This `error` event can be handled and used to display an error message,
 redirect to a login page, etc.
 
 
-```js
-App.ArticlesOverviewRoute = Ember.Route.extend({
+```app/articles-overview/route.js
+export default Ember.Route.extend({
   model: function(params) {
     return new Ember.RSVP.Promise(function(resolve, reject) {
        reject("Error");
@@ -269,8 +273,8 @@ at the Application level to perform any app logic and based on the
 result of the last `error` handler, Ember will decide if substate behavior
 must be performed or not.
 
-```js
-App.ApplicationRoute = Ember.Route.extend({
+```app/application/route.js
+export default Ember.Route.extend({
   actions: {
     error: function(error, transition) {
 
@@ -288,22 +292,24 @@ App.ApplicationRoute = Ember.Route.extend({
 
 ## Legacy `LoadingRoute`
 
-Previous versions of Ember (somewhat inadvertently) allowed you to define a global `LoadingRoute`
+Previous versions of Ember (somewhat inadvertently) allowed you to define a global `route:loading`
 which would be activated whenever a slow promise was encountered during
 a transition and exited upon completion of the transition. Because the
 `loading` template rendered as a top-level view and not within an
 outlet, it could be used for little more than displaying a loading
 spinner during slow transitions. Loading events/substates give you far
 more control, but if you'd like to emulate something similar to the legacy
-`LoadingRoute` behavior, you could do as follows:
+`route:loading` behavior, you could do as follows:
 
-```js
-App.LoadingView = Ember.View.extend({
+```app/views/loading.js
+export default Ember.View.extend({
   templateName: 'global-loading',
   elementId: 'global-loading'
 });
+```
 
-App.ApplicationRoute = Ember.Route.extend({
+```app/application/route.js
+export default Ember.Route.extend({
   actions: {
     loading: function() {
       var view = this.container.lookup('view:loading').append();
@@ -313,8 +319,6 @@ App.ApplicationRoute = Ember.Route.extend({
 });
 ```
 
-[Example JSBin](http://jsbin.com/leruqa)
-
-This will, like the legacy `LoadingRoute`, append a top-level view when the
+This will, like the legacy `route:loading`, append a top-level view when the
 router goes into a loading state, and tear down the view once the
 transition finishes.
diff --git a/source/routing/preventing-and-retrying-transitions.md b/source/routing/preventing-and-retrying-transitions.md
index 2b6c224c9..ac452b272 100644
--- a/source/routing/preventing-and-retrying-transitions.md
+++ b/source/routing/preventing-and-retrying-transitions.md
@@ -19,8 +19,8 @@ made on the form, which can make for a pretty frustrating user experience.
 
 Here's one way this situation could be handled:
 
-```js
-App.FormRoute = Ember.Route.extend({
+```app/form/route.js
+export default Ember.Route.extend({
   actions: {
     willTransition: function(transition) {
       if (this.controller.get('userHasEnteredData') &&
@@ -39,7 +39,7 @@ App.FormRoute = Ember.Route.extend({
 When the user clicks on a `{{link-to}}` helper, or when the app initiates a
 transition by using `transitionTo`, the transition will be aborted and the URL
 will remain unchanged. However, if the browser back button is used to
-navigate away from `FormRoute`, or if the user manually changes the URL, the
+navigate away from `route:form`, or if the user manually changes the URL, the
 new URL will be navigated to before the `willTransition` action is
 called. This will result in the browser displaying the new URL, even if
 `willTransition` calls `transition.abort()`.
@@ -51,8 +51,8 @@ The `model`, `beforeModel`, and `afterModel` hooks described in
 each get called with a transition object. This makes it possible for
 destination routes to abort attempted transitions.
 
-```js
-App.DiscoRoute = Ember.Route.extend({
+```app/disco/route.js
+export default Ember.Route.extend({
   beforeModel: function(transition) {
     if (new Date() < new Date("January 1, 1980")) {
       alert("Sorry, you need a time machine to enter this route.");
@@ -69,8 +69,8 @@ for this is having an authenticated route redirect the user to a login
 page, and then redirecting them back to the authenticated route once
 they've logged in.
 
-```js
-App.SomeAuthenticatedRoute = Ember.Route.extend({
+```app/some-authenticated/route.js
+export default Ember.Route.extend({
   beforeModel: function(transition) {
     if (!this.controllerFor('auth').get('userIsLoggedIn')) {
       var loginController = this.controllerFor('login');
@@ -79,8 +79,10 @@ App.SomeAuthenticatedRoute = Ember.Route.extend({
     }
   }
 });
+```
 
-App.LoginController = Ember.Controller.extend({
+```app/login/controller.js
+export default Ember.Controller.extend({
   actions: {
     login: function() {
       // Log the user in, then reattempt previous transition if it exists.
diff --git a/source/routing/query-params.md b/source/routing/query-params.md
index 728c2b643..ff4f0b9a4 100644
--- a/source/routing/query-params.md
+++ b/source/routing/query-params.md
@@ -2,7 +2,9 @@ Query parameters are optional key-value pairs that appear to the right of
 the `?` in a URL. For example, the following URL has two query params,
 `sort` and `page`, with respective values `ASC` and `2`:
 
-    http://example.com/articles?sort=ASC&page=2
+```text
+http://example.com/articles?sort=ASC&page=2
+```
 
 Query params allow for additional application state to be serialized
 into the URL that can't otherwise fit into the _path_ of the URL (i.e.
@@ -13,7 +15,7 @@ representing the current page, filter criteria, or sorting criteria.
 
 Query params can be declared on route-driven controllers, e.g. to
 configure query params that are active within the `articles` route,
-they must be declared on `ArticlesController`.
+they must be declared on `controller:application`.
 
 **Note:** The controller associated with a given route can be changed
 by specifying the `controllerName` property on that route.
@@ -21,26 +23,26 @@ by specifying the `controllerName` property on that route.
 Let's say we'd like to add a `category`
 query parameter that will filter out all the articles that haven't
 been categorized as popular. To do this, we specify `'category'`
-as one of `ArticlesController`'s `queryParams`:
+as one of `controller:article`'s `queryParams`:
 
-```js
-App.ArticlesController = Ember.ArrayController.extend({
+```app/articles/controller.js
+export default Ember.ArrayController.extend({
   queryParams: ['category'],
   category: null
 });
 ```
 
 This sets up a binding between the `category` query param in the URL,
-and the `category` property on `ArticlesController`. In other words,
+and the `category` property on `controller:articles`. In other words,
 once the `articles` route has been entered, any changes to the
 `category` query param in the URL will update the `category` property
-on `ArticlesController`, and vice versa.
+on `controller:articles`, and vice versa.
 
 Now we just need to define a computed property of our category-filtered
 array that the `articles` template will render:
 
-```js
-App.ArticlesController = Ember.ArrayController.extend({
+```$1
+export default Ember.ArrayController.extend({
   queryParams: ['category'],
   category: null,
 
@@ -64,7 +66,7 @@ With this code, we have established the following behaviors:
 2. If the user navigates to `/articles?category=recent`,
    `category` will be set to `"recent"`, so articles will be filtered.
 3. Once inside the `articles` route, any changes to the `category`
-   property on `ArticlesController` will cause the URL to update the
+   property on `controller:articles` will cause the URL to update the
    query param. By default, a query param property change won't cause a
    full router transition (i.e. it won't call `model` hooks and
    `setupController`, etc.); it will only update the URL.
@@ -83,7 +85,7 @@ The `link-to` helper supports specifying query params by way of the
 ```
 
 In the above examples, `direction` is presumably a query param property
-on the `PostsController`, but it could also refer to a `direction` property
+on the `controller:post`, but it could also refer to a `direction` property
 on any of the controllers associated with the `posts` route hierarchy,
 matching the leaf-most controller with the supplied property name.
 
@@ -134,8 +136,8 @@ associated with that controller, and set that query param's
 `refreshModel` config property to `true`:
 
 
-```js
-App.ArticlesRoute = Ember.Route.extend({
+```app/articles/route.js
+export default Ember.Route.extend({
   queryParams: {
     category: {
       refreshModel: true
@@ -151,8 +153,10 @@ App.ArticlesRoute = Ember.Route.extend({
     return this.store.findQuery('articles', params);
   }
 });
+```
 
-App.ArticlesController = Ember.ArrayController.extend({
+```app/articles/controller.js
+export default Ember.ArrayController.extend({
   queryParams: ['category'],
   category: null
 });
@@ -167,8 +171,8 @@ additional item from being added to your browser's history), you can
 specify this on the `Route`'s `queryParams` config hash, e.g. (continued
 from the example above):
 
-```js
-App.ArticlesRoute = Ember.Route.extend({
+```app/articles/route.js
+export default Ember.Route.extend({
   queryParams: {
     category: {
       replace: true
@@ -188,8 +192,8 @@ bind to a query param whose key is `foo`, e.g. `?foo=123`. You can also map
 a controller property to a different query param key using the
 following configuration syntax:
 
-```js
-App.ArticlesController = Ember.ArrayController.extend({
+```app/articles/controller.js
+export default Ember.ArrayController.extend({
   queryParams: {
     category: "articles_category"
   },
@@ -197,14 +201,14 @@ App.ArticlesController = Ember.ArrayController.extend({
 });
 ```
 
-This will cause changes to the `ArticlesController`'s `category`
+This will cause changes to the `controller:articles`'s `category`
 property to update the `articles_category` query param, and vice versa.
 
 Note that query params that require additional customization can
 be provided along with strings in the `queryParams` array.
 
-```js
-App.ArticlesController = Ember.ArrayController.extend({
+```$1
+export default Ember.ArrayController.extend({
   queryParams: [ "page", "filter", {
     category: "articles_category"
   }],
@@ -219,8 +223,8 @@ App.ArticlesController = Ember.ArrayController.extend({
 In the following example, the controller query param property `page` is
 considered to have a default value of `1`.
 
-```js
-App.ArticlesController = Ember.ArrayController.extend({
+```$1
+export default Ember.ArrayController.extend({
   queryParams: 'page',
   page: 1
 });
@@ -230,7 +234,7 @@ This affects query param behavior in two ways:
 
 1. Query param values are cast to the same datatype as the default
    value, e.g. a URL change from `/?page=3` to `/?page=2` will set
-   `ArticlesController`'s `page` property to the number `2`, rather than
+   `controller:articles`'s `page` property to the number `2`, rather than
    the string `"2"`. The same also applies to boolean default values.
 2. When a controller's query param property is currently set to its
    default value, this value won't be serialized into the URL. So in the
@@ -283,8 +287,8 @@ The result of this is that all links pointing back into the exited route
 will use the newly reset value `1` as the value for the `page` query
 param.
 
-```js
-App.ArticlesRoute = Ember.Route.extend({
+```app/articles/route.js
+export default Ember.Route.extend({
   resetController: function (controller, isExiting, transition) {
     if (isExiting) {
       // isExiting would be false if only the route's model was changing
@@ -300,8 +304,8 @@ even as a route's model changes. This can be accomplished by setting the
 `scope` option to `"controller"` within the controller's `queryParams`
 config hash:
 
-```js
-App.ArticlesController = Ember.ArrayController.extend({
+```app/articles/controller.js
+export default Ember.ArrayController.extend({
   queryParams: [{
     showMagnifyingGlass: {
       scope: "controller"
@@ -313,8 +317,8 @@ App.ArticlesController = Ember.ArrayController.extend({
 The following demonstrates how you can override both the scope and the
 query param URL key of a single controller query param property:
 
-```js
-App.ArticlesController = Ember.Controller.extend({
+```app/articles/controller.js
+export default Ember.Controller.extend({
   queryParams: [ "page", "filter",
     {
       showMagnifyingGlass: {
diff --git a/source/routing/redirection.md b/source/routing/redirection.md
index 34f976061..415581b18 100644
--- a/source/routing/redirection.md
+++ b/source/routing/redirection.md
@@ -16,11 +16,13 @@ If you want to redirect from one route to another, you can do the transition in
 the `beforeModel` hook of your route handler.
 
 ```javascript
-App.Router.map(function() {
+// app/router.js
+Router.map(function() {
   this.resource('posts');
 });
 
-App.IndexRoute = Ember.Route.extend({
+// app/index/route.js
+export default Ember.Route.extend({
   beforeModel: function() {
     this.transitionTo('posts');
   }
@@ -36,12 +38,14 @@ and thus function as aliases. (In fact, the default implementation of `afterMode
 
 ```javascript
 
-App.Router.map(function() {
+// app/router.js
+Router.map(function() {
   this.resource('posts');
   this.resource('post', { path: '/post/:post_id' });
 });
 
-App.PostsRoute = Ember.Route.extend({
+// app/posts/route.js
+export default Ember.Route.extend({
   afterModel: function(posts, transition) {
     if (posts.get('length') === 1) {
       this.transitionTo('post', posts.get('firstObject'));
@@ -59,7 +63,8 @@ with the single post object being its model.
 You can conditionally transition based on some other application state.
 
 ```javascript
-App.Router.map(function() {
+// app/router.js
+Router.map(function() {
   this.resource('topCharts', function() {
     this.route('choose', { path: '/' });
     this.route('albums');
@@ -69,7 +74,8 @@ App.Router.map(function() {
   });
 });
 
-App.TopChartsChooseRoute = Ember.Route.extend({
+// app/top-charts-choose/route.js
+export default Ember.Route.extend({
   beforeModel: function() {
     var lastFilter = this.controllerFor('application').get('lastFilter');
     this.transitionTo('topCharts.' + (lastFilter || 'songs'));
@@ -77,17 +83,22 @@ App.TopChartsChooseRoute = Ember.Route.extend({
 });
 
 // Superclass to be used by all of the filter routes below
-App.FilterRoute = Ember.Route.extend({
+// app/filter/route.js
+export default Ember.Route.extend({
   activate: function() {
     var controller = this.controllerFor('application');
     controller.set('lastFilter', this.templateName);
   }
 });
 
-App.TopChartsSongsRoute = App.FilterRoute.extend();
-App.TopChartsAlbumsRoute = App.FilterRoute.extend();
-App.TopChartsArtistsRoute = App.FilterRoute.extend();
-App.TopChartsPlaylistsRoute = App.FilterRoute.extend();
+// app/top-charts-songs/route.js
+export default Ember.Route.extend({
+// app/top-charts-albums/route.js
+export default Ember.Route.extend({
+// app/top-charts-artists/route.js
+export default Ember.Route.extend({
+// app/top-charts-playlists/route.js
+export default Ember.Route.extend({
 ```
 
 In this example, navigating to the `/` URL immediately transitions into
diff --git a/source/routing/rendering-a-template.md b/source/routing/rendering-a-template.md
index 2e220de76..811a89401 100644
--- a/source/routing/rendering-a-template.md
+++ b/source/routing/rendering-a-template.md
@@ -4,19 +4,21 @@ appropriate template to the screen.
 By default, a route handler will render the template into the closest
 parent with a template.
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('posts');
 });
+```
 
-App.PostsRoute = Ember.Route.extend();
+```app/posts/route.js
+export default Ember.Route.extend({
 ```
 
 If you want to render a template other than the one associated with the
 route handler, implement the `renderTemplate` hook:
 
-```js
-App.PostsRoute = Ember.Route.extend({
+```app/posts/route.js
+export default Ember.Route.extend({
   renderTemplate: function() {
     this.render('favoritePost');
   }
@@ -26,8 +28,8 @@ App.PostsRoute = Ember.Route.extend({
 If you want to use a different controller than the route handler's
 controller, pass the controller's name in the `controller` option:
 
-```js
-App.PostsRoute = Ember.Route.extend({
+```app/posts/route.js
+export default Ember.Route.extend({
   renderTemplate: function() {
     this.render({ controller: 'favoritePost' });
   }
@@ -45,8 +47,8 @@ you to specify two outlets with distinct names:
 So, if you want to render your posts into the `sidebar` outlet, use code
 like this:
 
-```js
-App.PostsRoute = Ember.Route.extend({
+```app/posts/route.js
+export default Ember.Route.extend({
   renderTemplate: function() {
     this.render({ outlet: 'sidebar' });
   }
@@ -56,8 +58,8 @@ App.PostsRoute = Ember.Route.extend({
 All of the options described above can be used together in whatever
 combination you'd like:
 
-```js
-App.PostsRoute = Ember.Route.extend({
+```app/posts/route.js
+export default Ember.Route.extend({
   renderTemplate: function() {
     var controller = this.controllerFor('favoritePost');
 
@@ -74,8 +76,8 @@ App.PostsRoute = Ember.Route.extend({
 
 If you want to render two different templates into outlets of two different rendered templates of a route:
 
-```js
-App.PostRoute = App.Route.extend({
+```app/post/route.js
+export default Ember.Route.extend({
   renderTemplate: function() {
     this.render('favoritePost', {   // the template to render
       into: 'posts',                // the template to render into
diff --git a/source/routing/sending-events-from-templates.md b/source/routing/sending-events-from-templates.md
index be0c16156..6d5516853 100644
--- a/source/routing/sending-events-from-templates.md
+++ b/source/routing/sending-events-from-templates.md
@@ -20,8 +20,8 @@ Although the view containing the `{{action}}` helper will be targeted by default
 
 The action handler can optionally accept a jQuery event object, which will be extended to include `view` and `context` properties. These properties can be useful when targeting a different view with your action. For instance:
 
-```javascript
-App.ListingView = Ember.View.extend({
+```app/views/loading.js
+export default Ember.View.extend({
   templateName: 'listing',
 
   edit: function(event) {
@@ -37,4 +37,3 @@ Any of the templates discussed above will produce an HTML element like this:
 ```
 
 Ember will delegate the event you specified to your target view's handler based upon the internally assigned `data-ember-action` id.
-
diff --git a/source/routing/setting-up-a-controller.md b/source/routing/setting-up-a-controller.md
index 0e78fa154..8c9c9abab 100644
--- a/source/routing/setting-up-a-controller.md
+++ b/source/routing/setting-up-a-controller.md
@@ -13,12 +13,13 @@ display-specific properties.
 To tell one of these controllers which model to present, set its
 `model` property in the route handler's `setupController` hook.
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('post', { path: '/posts/:post_id' });
 });
 
-App.PostRoute = Ember.Route.extend({
+``` app/post/route.js
+export default Ember.Route.extend({
   // The code below is the default behavior, so if this is all you
   // need, you do not need to provide a setupController implementation
   // at all.
@@ -31,13 +32,13 @@ App.PostRoute = Ember.Route.extend({
 The `setupController` hook receives the route handler's associated
 controller as its first argument. In this case, the `PostRoute`'s
 `setupController` receives the application's instance of
-`App.PostController`.
+`controller:posts`.
 
 To specify a controller other than the default, set the route's
 `controllerName` property:
 
-```js
-App.SpecialPostRoute = Ember.Route.extend({
+```app/special-post/route.js
+export default Ember.Route.extend({
   controllerName: 'post'
 });
 ```
@@ -53,8 +54,8 @@ associated controller to the route handler's model.
 If you want to configure a controller other than the controller
 associated with the route handler, use the `controllerFor` method:
 
-```js
-App.PostRoute = Ember.Route.extend({
+```app/post/route.js
+export default Ember.Route.extend({
   setupController: function(controller, model) {
     this.controllerFor('topPost').set('model', model);
   }
diff --git a/source/routing/specifying-a-routes-model.md b/source/routing/specifying-a-routes-model.md
index fd105b2db..67ceaf204 100644
--- a/source/routing/specifying-a-routes-model.md
+++ b/source/routing/specifying-a-routes-model.md
@@ -9,10 +9,10 @@ which model it should render by defining a route with the same name as
 the template, and implementing its `model` hook.
 
 For example, to provide some model data to the `photos` template, we
-would define an `App.PhotosRoute` object:
+would define an `route:photos` object:
 
-```js
-App.PhotosRoute = Ember.Route.extend({
+```app/photos/route.js
+export default Ember.Route.extend({
   model: function() {
     return [{
       title: "Tomster",
@@ -56,8 +56,8 @@ in the Asynchronous Routing guide.
 Let's look at an example in action. Here's a route that loads the most
 recent pull requests sent to Ember.js on GitHub:
 
-```js
-App.PullRequestsRoute = Ember.Route.extend({
+```app/pull-requests/route.js
+export default Ember.Route.extend({
   model: function() {
     return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
   }
@@ -83,8 +83,8 @@ the template only displayed the three most recent pull requests. We can
 rely on promise chaining to modify the data returned from the JSON
 request before it gets passed to the template:
 
-```js
-App.PullRequestsRoute = Ember.Route.extend({
+```app/pull-requests/route.js
+export default Ember.Route.extend({
   model: function() {
     var url = 'https://api.github.com/repos/emberjs/ember.js/pulls';
     return Ember.$.getJSON(url).then(function(data) {
@@ -101,12 +101,12 @@ hook?
 
 By default, the value returned from your `model` hook will be assigned
 to the `model` property of the associated controller. For example, if your
-`App.PostsRoute` returns an object from its `model` hook, that object
-will be set as the `model` property of the `App.PostsController`.
+`route:posts` returns an object from its `model` hook, that object
+will be set as the `model` property of the `controller:posts`.
 
 (This, under the hood, is how templates know which model to render: they
 look at their associated controller's `model` property. For example, the
-`photos` template will render whatever the `App.PhotosController`'s
+`photos` template will render whatever the `controller:photos`'s
 `model` property is set to.)
 
 See the [Setting Up a Controller guide][1] to learn how to change this
@@ -140,8 +140,8 @@ A dynamic segment is a part of the URL that is filled in by the current
 model's ID. Dynamic segments always start with a colon (`:`). Our photo
 example might have its `photo` route defined like this:
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('photo', { path: '/photos/:photo_id' });
 });
 ```
@@ -172,12 +172,14 @@ from the URL.
 Luckily, Ember will extract any dynamic segments from the URL for
 you and pass them as a hash to the `model` hook as the first argument:
 
-```js
-App.Router.map(function() {
+```app/router.js
+Router.map(function() {
   this.resource('photo', { path: '/photos/:photo_id' });
 });
+```
 
-App.PhotoRoute = Ember.Route.extend({
+```app/photo/route.js
+export default Ember.Route.extend({
   model: function(params) {
     return Ember.$.getJSON('/photos/'+params.photo_id);
   }
diff --git a/source/routing/specifying-the-location-api.md b/source/routing/specifying-the-location-api.md
index 7d377a2ce..e0e8a0253 100644
--- a/source/routing/specifying-the-location-api.md
+++ b/source/routing/specifying-the-location-api.md
@@ -6,7 +6,8 @@ Given the following router, entering `/#/posts/new` will take you to the `posts.
 route.
 
 ```javascript
-App.Router.map(function() {
+// app/router.js
+Router.map(function() {
   this.resource('posts', function() {
     this.route('new');
   });
@@ -14,13 +15,13 @@ App.Router.map(function() {
 ```
 
 If you want `/posts/new` to work instead, you can tell the Router to use the browser's
-[history](http://caniuse.com/history) API. 
+[history](http://caniuse.com/history) API.
 
-Keep in mind that your server must serve the Ember app from all the URLs defined in your 
-`Router.map` function. 
+Keep in mind that your server must serve the Ember app from all the URLs defined in your
+`Router.map` function.
 
 ```js
-App.Router.reopen({
+Router.reopen({
   location: 'history'
 });
 ```
@@ -32,7 +33,7 @@ don't want it to muck with the URL (for example when you embed your
 application in a larger page).
 
 ```js
-App.Router.reopen({
+Router.reopen({
   location: 'none'
 });
 ```
diff --git a/source/stylesheets/shared.css.scss b/source/stylesheets/shared.css.scss
index 7430a1305..39ce0cab6 100644
--- a/source/stylesheets/shared.css.scss
+++ b/source/stylesheets/shared.css.scss
@@ -19,10 +19,6 @@ code {
   margin: 1em 1.5em;
 }
 
-#content ul {
-  list-style-type: none;
-}
-
 #content .highlight .scroller {
   overflow: auto;
 }
diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss
index 353db560c..081139e0c 100644
--- a/source/stylesheets/site.css.scss
+++ b/source/stylesheets/site.css.scss
@@ -272,7 +272,6 @@ p {
           display: block;
           text-transform: none;
           color: #d84a32;
-          font-size: 13px;
           &:hover {
             background-color: #f2d1cb;
             color: black;
diff --git a/source/templates/development-helpers.md b/source/templates/development-helpers.md
index b4919a13c..5a2ee473f 100644
--- a/source/templates/development-helpers.md
+++ b/source/templates/development-helpers.md
@@ -35,7 +35,7 @@ For example, if you are wondering why a specific variable isn't displaying in
 your template, you could use the `{{debugger}}` helper. When the breakpoint is
 hit, you can use the `templateContext` in your console to lookup properties:
 
-```
+```javascript
 > templateContext.get('name')
 "Bruce Lee"
 ```
diff --git a/source/testing/test-runners.md b/source/testing/test-runners.md
index 8c05b04f2..a3ebf3bec 100644
--- a/source/testing/test-runners.md
+++ b/source/testing/test-runners.md
@@ -213,7 +213,7 @@ module.exports = function(config) {
 
 The reporters option determines how your test results are communicated back to you. The `progress` reporter will display a line that says something like this.
 
-```
+```text
 PhantomJS 1.9.7 (Mac OS X): Executed 2 of 2 SUCCESS (0.008 secs / 0.002 secs)
 ```
 
diff --git a/source/testing/testing-xhr.md b/source/testing/testing-xhr.md
index 6b06f66e0..56088fb62 100644
--- a/source/testing/testing-xhr.md
+++ b/source/testing/testing-xhr.md
@@ -10,7 +10,7 @@ When a promise runs, it schedules fulfillment/rejection to be executed by the ru
 
 Getting the results of a promise requires you to use the `then` method. Calling the `then` function on an existing promise:
 
-``` javascript
+```javascript
 // let's call the existing promise promise1, so you'd write:
 promise1.then(fulfillmentCallback, rejectionCallback);
 
@@ -27,7 +27,7 @@ In the case that `promise1` succeeds, then the `fulfillmentCallback` function wi
 
 If you pass in a function to `then` it casts the function into a promise and returns the promise.  The results of that promise will be what's returned from the function.
 
-``` javascript
+```javascript
 // let's call the existing promise promise1 and will have the result `3`, so you'd write:
 var promise2 = promise1.then(function(results){
   return results + 2;
@@ -57,7 +57,7 @@ var promise4 = promise1.then(function(results){
 
 If you pass a promise into `then` it will return the results of that promise.
 
-``` javascript
+```javascript
 // let's call the existing promises promise1 and promise2, so you'd write:
 var promise3 = promise1.then(promise2);
 
@@ -74,19 +74,23 @@ promise3.then(function(result){
 
 ####Promise Resolution
 
-    var promise = new Ember.RSVP.Promise(function(resolve){
-      // calling resolve will schedule an action to fulfill the promise 
-      // and call observers/chained promises.
-      resolve('hello world'); // Run loop needs to be on here
-    });
+```javascript
+var promise = new Ember.RSVP.Promise(function(resolve){
+  // calling resolve will schedule an action to fulfill the promise
+  // and call observers/chained promises.
+  resolve('hello world'); // Run loop needs to be on here
+});
+```
 
 ####Chaining/Observing Promises
 
-    // once the above promise has been resolved it will then notify 
-    // the observers/chained promises to.
-    promise.then(function(result){  // Run loop might* need to be on here
-      alert(result);
-    });
+```javascript
+// once the above promise has been resolved it will then notify
+// the observers/chained promises to.
+promise.then(function(result){  // Run loop might* need to be on here
+  alert(result);
+});
+```
 
 * Calling `then` (observing/chaining) only needs to be implicitely wrapped in a run call statement (eg `Ember.run(...)`) if there is a possibility you will chain/observe the promise after it's been fulfilled.  See the examples below which will help explain the different scenarios.
 
@@ -100,7 +104,7 @@ promise3.then(function(result){
 6. Run loop: run "fulfill the promise" task (which includes notifying all chained promises/observers of fulfillment)
 7. Run loop is off since there are no more tasks
 
-``` javascript
+```javascript
 new Ember.RSVP.Promise(function(resolve){
   // resolve will run ~10 ms after the then has been called and is observing
   Ember.run.later(this, resolve, 'hello', 10);
@@ -109,7 +113,7 @@ new Ember.RSVP.Promise(function(resolve){
 });
 ```
 
- 
+
 #####Walk through example of observing/chaining after the promise has fulfilled
 
 1. Run loop is off (testing mode)
@@ -121,7 +125,7 @@ new Ember.RSVP.Promise(function(resolve){
 8. Code: Observe Promise1 (since the promise has already fulfilled, schedule an async task to notify this observer of fulfillment)
 9. Uncaught Error: Assertion Failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in an Ember.run
 
-``` javascript
+```javascript
 var promise = new Ember.RSVP.Promise(function(resolve){
   // this will run before the then has happened below
   // and finish the triggered run loop
@@ -132,7 +136,7 @@ var promise = new Ember.RSVP.Promise(function(resolve){
 promise.then(function(result){
   alert(result);
 });
-  
+
 // correct, start the run loop again
 Ember.run(function(){
   promise.then(function(result){
@@ -149,19 +153,23 @@ When you are using Ember normally (ie when not in testing mode), the run loop is
 
 Here we are setting up a promise, and intentionally using `setTimeout` to mimic a delayed response from a fake server.  Once our fake server has responded we need to invoke the run loop manually, by wrapping the statement in a run call.
 
-    var promise = new Ember.RSVP.Promise(function(resolve){
-      setTimeout(function(){
-        Ember.run(this, resolve, 'hello world');
-      }, 20);
-    });
+```javascript
+var promise = new Ember.RSVP.Promise(function(resolve){
+  setTimeout(function(){
+    Ember.run(this, resolve, 'hello world');
+  }, 20);
+});
+```
 
 If you were to pass the above promise around to multiple methods, and they choose to observe/chain to the promise, it is likely that at some point the promise may already be resolved.  In that case you will need to wrap the observer/chained promise in a run call.
 
-    Ember.run(function(){
-      promise.then(function(result){
-        alert(result);
-      });
-    });
+```javascript
+Ember.run(function(){
+  promise.then(function(result){
+    alert(result);
+  });
+});
+```
 
 ####Synchronous Example using promises
 
@@ -170,7 +178,6 @@ If you're using a promise, but it resolves immediately then you can simply follo
 <script src="http://static.jsbin.com/js/embed.js"></script>
 <a class="jsbin-embed" href="http://jsbin.com/qoyinucu/45/embed?js,output">Simple promise example</a>
 
-
 ####Asynchronous Example using promises
 
 If you're using a promise, but there's a chance it might resolves after the test would finish you'll need to use the `stop` and `start` global qunit methods.  These methods will give you the ability to tell qunit to stop the test run on the current test (makes qunit wait) and start again when ready.  In this example we delay execution and wrap the resolve in a run call.  Since the chained promise begins observing before the promise has been resolved you won't need to wrap  the chained promise in a run call.
@@ -189,29 +196,32 @@ AJAX requests are the most prevelant use case where you will be creating promise
 
 Imagine you wanted to request a list of colors from a server.  Using ic-ajax you would use the following syntax
 
-    var promise = ic.ajax.request('/colors');
+```javascript
+var promise = ic.ajax.request('/colors');
+```
 
 This is an asynchronous call which returns a promise. When the promise has resolved, it will contain the list of colors. The convenient thing about ic-ajax is that it wraps the resolve of your ajax call in a call to Ember.run so you don't need to worry about it. We're going to set up some fixture data that can be returned instead of making an ajax call to fake the server so we can test our code
 
-    ic.ajax.defineFixture('/colors', {
-      response: [
-        {
-          id: 1,
-          color: "red"
-        },
-        {
-          id: 2,
-          color: "green"
-        },
-        {
-          id: 3,
-          color: "blue"
-        }
-      ],
-      jqXHR: {},
-      textStatus: 'success'
-    });
-
+```javascript
+ic.ajax.defineFixture('/colors', {
+  response: [
+    {
+      id: 1,
+      color: "red"
+    },
+    {
+      id: 2,
+      color: "green"
+    },
+    {
+      id: 3,
+      color: "blue"
+    }
+  ],
+  jqXHR: {},
+  textStatus: 'success'
+});
+```
 
 <a class="jsbin-embed" href="http://jsbin.com/OxIDiVU/366/embed?js,output">Using ic-ajax</a>
 
@@ -235,40 +245,46 @@ Often while doing integration tests, you don't actually want to hit the server b
 
 Imagine you wanted to request a list of colors from a server.  Using vanilla `jQuery` you would use the following syntax
 
-    $.getJSON('/colors', function(response){ /* ... */ });
+```javascript
+$.getJSON('/colors', function(response){ /* ... */ });
+```
 
 This is an asynchronous call which will pass the server's response to the callback provided. Unlike `ic-ajax`, with vanilla `jQuery` you need to wrap the callback syntax in a promise.
 
-    var promise = new Ember.RSVP.Promise(function(resolve){
-      $.getJSON('/colors', function(data){
-        resolve(data.response);
-      });
-    });
+```javascript
+var promise = new Ember.RSVP.Promise(function(resolve){
+  $.getJSON('/colors', function(data){
+    resolve(data.response);
+  });
+});
+```
 
 We're going to set up some fixture data that can be returned instead of making an ajax call to fake the server so we can test our code
 
-    $.mockjax({
-      type: 'GET',
-      url: '/colors',
-      status: '200',
-      dataType: 'json',
-      responseText: {
-        response: [
-          {
-            id: 1,
-            color: "red"
-          },
-          {
-            id: 2,
-            color: "green"
-          },
-          {
-            id: 3,
-            color: "blue"
-          }
-         ]
+```javascript
+$.mockjax({
+  type: 'GET',
+  url: '/colors',
+  status: '200',
+  dataType: 'json',
+  responseText: {
+    response: [
+      {
+        id: 1,
+        color: "red"
+      },
+      {
+        id: 2,
+        color: "green"
+      },
+      {
+        id: 3,
+        color: "blue"
       }
-    });
+     ]
+  }
+});
+```
 
 As you can see, there is a lot of flexibility in the `jquery-mockjax` api. You can specify not only the url and the response but the method, status code and data type. For the full jquery-mockax api check [their docs](https://github.com/appendto/jquery-mockjax).
 
diff --git a/source/understanding-ember-data/record-lifecycle.md b/source/understanding-ember-data/record-lifecycle.md
index 6dd3b4752..9e2af30e6 100644
--- a/source/understanding-ember-data/record-lifecycle.md
+++ b/source/understanding-ember-data/record-lifecycle.md
@@ -6,8 +6,8 @@ Data record.
 Throughout this guide, we will assume the existence of the following
 model:
 
-```javascript
-Person = DS.Model.extend({
+```app/models/person.js
+export default DS.Model.extend({
   firstName: DS.attr('string'),
   lastName: DS.attr('string'),
   father: DS.belongsTo('Person'),
@@ -25,8 +25,8 @@ materialized into an Ember Data record.
 
 ## Step 1: Finding a Record
 
-When you request a record using `Person.find(1)`, Ember Data will ask
-the store to find the record (`store.find(Person, 1)`).
+When you request a record using `store.find('person', 1)`, Ember Data
+will ask the store to find the record.
 
 <figure>
   <img src="../images/ember-data-guide/step1.png">
@@ -40,7 +40,7 @@ store will ask the adapter to fetch it.
 </figure>
 
 Since the adapter's request is asynchronous, the store will return a new
-`Person` instance immediately. At this point, the record has no backing
+`model:person` instance immediately. At this point, the record has no backing
 data.
 
 <figure>
@@ -69,7 +69,7 @@ This will, in turn, notify all attributes (`DS.attr`) and relationships
 ## Step 3: Getting an Attribute
 
 In response to the notification, the app will typically request some
-attribute. In this case, imagine that the `Person` was represented by
+attribute. In this case, imagine that the `model:person` was represented by
 the following template:
 
 ```handlebars
@@ -142,7 +142,7 @@ its `lastName` will not trigger additional materialization.
 ## Identity Map
 
 Additional requests for Person 1 will skip all of these steps, because
-`store.find(Person, 1)` will see that it has already created an instance
+`store.find('person', 1)` will see that it has already created an instance
 for that record and return it.
 
 This means that all requests for a record with the same model type and
@@ -153,7 +153,7 @@ JavaScript _identity_ for objects representing the same backend data.
 
 ## Practical Note
 
-In the example above, we used a template that rendered the `Person`
+In the example above, we used a template that rendered the `model:person`
 object directly. As a result, we got partially loaded output that
 automatically filled in as the data loaded.
 
diff --git a/source/views/adding-layouts-to-views.md b/source/views/adding-layouts-to-views.md
index 3ae3474b7..9cf513dae 100644
--- a/source/views/adding-layouts-to-views.md
+++ b/source/views/adding-layouts-to-views.md
@@ -9,29 +9,25 @@ The HTML contents of a view's rendered `template` will be inserted where the `{{
 
 First, you define the following layout template:
 
-```html
-<script type="text/x-handlebars" data-template-name="my_layout">
-  <div class="content-wrapper">
-    {{yield}}
-  </div>
-</script>
+```app/templates/my-layout.hbs
+<div class="content-wrapper">
+  {{yield}}
+</div>
 ```
 
 And then the following main template:
 
-```html
-<script type="text/x-handlebars" data-template-name="my_content">
+```app/templates/has-a-layout.hbs
   Hello, <b>{{view.name}}</b>!
-</script>
 ```
 
 Finally, you define a view, and instruct it to wrap the template with the defined layout:
 
-```javascript
-AViewWithLayout = Ember.View.extend({
+```app/views/with-a-layout.js
+export default Ember.View.extend({
   name: 'Teddy',
-  layoutName: 'my_layout',
-  templateName: 'my_content'
+  layoutName: 'my-layout',
+  templateName: 'has-a-layout'
 });
 ```
 
diff --git a/source/views/building-reusable-views.md b/source/views/building-reusable-views.md
deleted file mode 100644
index ad4dbf542..000000000
--- a/source/views/building-reusable-views.md
+++ /dev/null
@@ -1 +0,0 @@
-## ZOMGTREK ##
diff --git a/source/views/built-in-views.md b/source/views/built-in-views.md
index ccbb83e4d..1dba3ca9f 100644
--- a/source/views/built-in-views.md
+++ b/source/views/built-in-views.md
@@ -6,9 +6,12 @@ Ember comes pre-packaged with a set of views for building basic controls like te
 
 For example, here we have created a custom text field that toggles a dirty property:
 
-```javascript
-// {{view "my-text" value=name inputDidChange=nameDidChange}}
-App.MyTextView = Ember.TextField.extend({
+```app/templates/some-template-using-a-view.hbs
+{{view "my-input" value=name inputDidChange=nameDidChange}}
+```
+
+```app/views/my-input.js
+export default Ember.TextField.extend({
   inputDidChange: false,
   change: function() {
     this.set('inputDidChange', true);
diff --git a/source/views/customizing-a-views-element.md b/source/views/customizing-a-views-element.md
index a890c1a05..b9c44f23f 100644
--- a/source/views/customizing-a-views-element.md
+++ b/source/views/customizing-a-views-element.md
@@ -1,16 +1,16 @@
 A view is represented by a single DOM element on the page. You can change what kind of element is created by
 changing the `tagName` property.
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   tagName: 'span'
 });
 ```
 
 You can also specify which class names are applied to the view by setting its `classNames` property to an array of strings:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   classNames: ['my-view']
 });
 ```
@@ -18,14 +18,14 @@ App.MyView = Ember.View.extend({
 If you want class names to be determined by the state of properties on the view, you can use class name bindings. If you bind to
 a Boolean property, the class name will be added or removed depending on the value:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   classNameBindings: ['isUrgent'],
   isUrgent: true
 });
 ```
 
-This would render a view like this:
+This would render this HTML:
 
 ```html
 <div class="ember-view is-urgent">
@@ -36,8 +36,8 @@ If `isUrgent` is changed to `false`, then the `is-urgent` class name will be rem
 By default, the name of the Boolean property is dasherized. You can customize the class name
 applied by delimiting it with a colon:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   classNameBindings: ['isUrgent:urgent'],
   isUrgent: true
 });
@@ -49,10 +49,11 @@ This would render this HTML:
 <div class="ember-view urgent">
 ```
 
-Besides the custom class name for the value being `true`, you can also specify a class name which is used when the value is `false`:
+Besides the custom class name for the value being `true`,
+you can also specify a class name which is used when the value is `false`:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   classNameBindings: ['isEnabled:enabled:disabled'],
   isEnabled: false
 });
@@ -66,8 +67,8 @@ This would render this HTML:
 
 You can also specify to only add a class when the property is `false` by declaring `classNameBindings` like this:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   classNameBindings: ['isEnabled::disabled'],
   isEnabled: false
 });
@@ -89,8 +90,8 @@ If the `isEnabled` property is set to `true`, no class name is added:
 If the bound value is a string, that value will be added as a class name without
 modification:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   classNameBindings: ['priority'],
   priority: 'highestPriority'
 });
@@ -106,8 +107,8 @@ This would render this HTML:
 
 You can bind attributes to the DOM element that represents a view by using `attributeBindings`:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   tagName: 'a',
   attributeBindings: ['href'],
   href: "http://emberjs.com"
@@ -116,8 +117,8 @@ App.MyView = Ember.View.extend({
 
 You can also bind these attributes to differently named properties:
 
-```javascript
-App.MyView = Ember.View.extend({
+```app/views/my-view.js
+export default Ember.View.extend({
   tagName: 'a',
   attributeBindings: ['customHref:href'],
   customHref: "http://emberjs.com"
@@ -160,8 +161,8 @@ You can assign class names similarly:
 
 You can bind class names to a property of the view by using `classBinding` instead of `class`. The same behavior as described in `bind-attr` applies:
 
-```javascript
-App.AlertView = Ember.View.extend({
+```app/views/alert.js
+export default Ember.View.extend({
   priority: "p4",
   isUrgent: true
 });
diff --git a/source/views/defining-a-view.md b/source/views/defining-a-view.md
index 5cc7dcffe..395fa5670 100644
--- a/source/views/defining-a-view.md
+++ b/source/views/defining-a-view.md
@@ -1,20 +1,15 @@
 You can use `Ember.View` to render a Handlebars template and insert it into the DOM.
 
-To tell the view which template to use, set its `templateName` property. For example, if I had a `<script>` tag like this:
-
-```html
-<html>
-  <head>
-    <script type="text/x-handlebars" data-template-name="say-hello">
-      Hello, <b>{{view.name}}</b>
-    </script>
-  </head>
-</html>
+To tell the view which template to use, set its `templateName` property. For example
+if your project contains this template:
+
+```app/templates/say-hello.hbs
+Hello, <b>{{view.name}}</b>
 ```
 
 I would set the `templateName` property to `"say-hello"`.
 
-```javascript
+```app/views/some-view.js
 var view = Ember.View.create({
   templateName: 'say-hello',
   name: "Bob"
diff --git a/source/views/handling-events.md b/source/views/handling-events.md
index 366b4ec18..afcfc7e64 100644
--- a/source/views/handling-events.md
+++ b/source/views/handling-events.md
@@ -6,15 +6,15 @@ For example, imagine we have a template like this:
 
 ```handlebars
 {{#view "clickable"}}
-This is a clickable area!
+  This is a clickable area!
 {{/view}}
 ```
 
-Let's implement `App.ClickableView` such that when it is
+Let's implement `view:clickable` such that when it is
 clicked, an alert is displayed:
 
-```javascript
-App.ClickableView = Ember.View.extend({
+```app/views/clickable.js
+export default Ember.View.extend({
   click: function(evt) {
     alert("ClickableView was clicked!");
   }
@@ -29,10 +29,11 @@ documentation below.
 
 ###Sending Events
 
-To have the click event from `App.ClickableView` affect the state of your application, simply send an event to the view's controller:
+To have the click event from `view:clickable` affect the state of your application,
+simply send an event to the view's controller:
 
-````javascript
-App.ClickableView = Ember.View.extend({
+````app/views/clickable.js
+export default Ember.View.extend({
   click: function(evt) {
     this.get('controller').send('turnItUp', 11);
   }
@@ -42,8 +43,8 @@ App.ClickableView = Ember.View.extend({
 If the controller has an action handler called `turnItUp`, it will be called:
 
 
-````javascript
-App.PlaybackController = Ember.ObjectController.extend({
+````app/controllers/play-back.js
+export default Ember.Controller.extend({
   actions: {
     turnItUp: function(level){
       //Do your thing
@@ -54,11 +55,11 @@ App.PlaybackController = Ember.ObjectController.extend({
 
 If it doesn't, the message will be passed to the current route:
 
-````javascript
-App.PlaybackRoute = Ember.Route.extend({
+````app/routes/play-back.js
+export default Ember.Route.extend({
   actions: {
     turnItUp: function(level){
-      //This won't be called if it's defined on App.PlaybackController
+      //This won't be called if it's defined on controllers:play-back
     }
   }
 });
diff --git a/source/views/inserting-views-in-templates.md b/source/views/inserting-views-in-templates.md
index 481f94260..91c21a114 100644
--- a/source/views/inserting-views-in-templates.md
+++ b/source/views/inserting-views-in-templates.md
@@ -2,42 +2,35 @@ So far, we've discussed writing templates for a single view. However, as your ap
 
 ### {{view}}
 
-To add a child view to a parent, use the `{{view}}` helper. The `{{view}}` helper takes a string used to look up the view class.
-
-```javascript
-// Define parent view
-App.UserView = Ember.View.extend({
-  templateName: 'user',
+To add a child view to a parent, use the `{{view}}` helper.
+The `{{view}}` helper takes a string used to look up the view class.
 
+```app/views/user.js
+export default Ember.View.extend({
   firstName: "Albert",
   lastName: "Hofmann"
 });
+```
 
-// Define child view
-App.InfoView = Ember.View.extend({
-  templateName: 'info',
-
+```app/views/info.js
+export default Ember.View.extend({
   posts: 25,
   hobbies: "Riding bicycles"
 });
 ```
 
-```html
-<script type="text/x-handlebars" data-template-name="user">
-  User: {{view.firstName}} {{view.lastName}}
-  {{view "info"}}
-</script>
+```app/templates/user.hbs
+User: {{view.firstName}} {{view.lastName}}
+{{view "info"}}
 ```
 
-```html
-<script type="text/x-handlebars" data-template-name="info">
-  <b>Posts:</b> {{view.posts}}
-  <br>
-  <b>Hobbies:</b> {{view.hobbies}}
-</script>
+```app/templates/info.hbs
+<b>Posts:</b> {{view.posts}}
+<br>
+<b>Hobbies:</b> {{view.hobbies}}
 ```
 
-If we were to create an instance of `App.UserView` and render it, we would get
+If we were to create an instance of `view:user` and render it, we would get
 a DOM representation like this:
 
 ```html
@@ -49,50 +42,21 @@ User: Albert Hofmann
 </div>
 ```
 
-#### Relative Paths
-
-Instead of specifying an absolute path, you can also specify which view class
-to use relative to the parent view. For example, we could nest the above view
-hierarchy like this:
-
-```javascript
-App.UserView = Ember.View.extend({
-  templateName: 'user',
-
-  firstName: "Albert",
-  lastName: "Hofmann",
-
-  infoView: Ember.View.extend({
-    templateName: 'info',
-
-    posts: 25,
-    hobbies: "Riding bicycles"
-  })
-});
-```
-
-```handlebars
-User: {{view.firstName}} {{view.lastName}}
-{{view view.infoView}}
-```
-
-When using the view helper with a property, prefer starting the property name with a lowercase letter. Using an uppercase letter, such as in `{{view MyClass}}` may trigger a deprecated use-case.
-
 ### Setting Child View Templates
 
 If you'd like to specify the template your child views use inline in
 the main template, you can use the block form of the `{{view}}` helper.
 We might rewrite the above example like this:
 
-```javascript
-App.UserView = Ember.View.extend({
-  templateName: 'user',
-
+```app/views/user.js
+export default Ember.View.extend({
   firstName: "Albert",
   lastName: "Hofmann"
 });
+```
 
-App.InfoView = Ember.View.extend({
+```app/views/info.js
+export default Ember.View.extend({
   posts: 25,
   hobbies: "Riding bicycles"
 });
diff --git a/source/wip/rails.md b/source/wip/rails.md
index ab556f283..237af443c 100644
--- a/source/wip/rails.md
+++ b/source/wip/rails.md
@@ -22,7 +22,7 @@ It's worth noting that it's not at all necessary to host an Ember.js application
 
 Use the `rails` command to generate a new project:
 
-```
+```bash
 rails new photoblog -m http://emberjs.com/template.rb
 ```
 
@@ -36,7 +36,7 @@ The -m option specifies a template on which to base your new project. We have pr
   
 When rails has finished creating your application it will reside in the `photoblog` directory. Switch to this newly created directory:
 
-```
+```bash
 cd photoblog
 ```
 
@@ -44,19 +44,19 @@ cd photoblog
 
 This part will be familiar to anyone who has done Ruby on Rails development before. We'll create two new models, Photo and Comment. We start by asking Rails to generate the scaffolding for a Photo object.
 
-```
+```bash
 rails generate scaffold Photo title:string url:string
 ```
 
 Rails will generate a database migration, model, controller, resource routes, and other helpful files for us to start using. It will actually create more than we need: By default, rails scaffolding will generate standard CRUD (Create/Retrieve/Update/Destroy) views for our new model. Since our Ember.js application is going to be providing these views, we can safely remove them.
 
-```
+```bash
 rm -rf app/views/photos
 ```
 
 We should also ask Rails to generate our comment object and remove its views as well.
 
-```
+```bash
 rails generate scaffold Comment text:string
 rm -rf app/views/comments
 ```
@@ -96,7 +96,7 @@ end
 
 We can now run `rake db:migrate` to run these migrations and set up our database.
 
-```
+```bash
 → rake db:migrate
 ==  CreatePhotos: migrating ===================================================
 -- create_table(:photos)
@@ -115,11 +115,11 @@ Our server-side models are now setup and ready for use! What we've done here is
 
 Now that we have models set up to persist our data on the server, we need to describe them to Ember. ember-rails, included with our project template, provides generators to help us with this.
 
-```
+```bash
 rails generate ember:model Photo title:string url:string
 ```
 
-```
+```bash
 rails generate ember:model Comment text:string
 ```
 
@@ -193,7 +193,7 @@ Here, we're defining a state manager for our application. We set up our states o
 
 To see all our photos, we need an write an index view which shows them.  We have a generator that will help us with this.
 
-```
+```bash
 rails generate ember:view index photos
 ```
 
@@ -281,7 +281,7 @@ Now that we're done, we close out the subview and our iteration block. Our view
 
 Controllers serve as a mediator between your views and models. We've already discussed that we're going to need an `Ember.ArrayController` to manage our photo objects, so let's create it. You can create a new controller using the `ember:controller` generator. We can also create a new array controller by invoking the generator with the `--array` option:
 
-```
+```bash
 rails generate ember:controller photos --array
 ```
 
@@ -316,7 +316,7 @@ There's our title, but there's no content! We need to add some photos first, of
 
 We need to add the ability to add photos to our application in order to see some on the index page. First, let's verify everything is working as expected by sending a POST request to our API with a new photo object. Ensure the server is running, and execute the following command:
 
-```
+```bash
 curl -H "Content-Type: application/json" -X POST -d '{"photo":{"url":"http://farm8.staticflickr.com/7101/7007178689_9cd571fa10.jpg", "title":"Books"}}' http://localhost:3000/photos
 ```
 
@@ -330,13 +330,13 @@ We want to add a button at the bottom of of our index view that lets us create a
 
 First create the controller. A standard controller will work fine, we don't need an array controller in this case.
 
-```
+```bash
 rails generate ember:controller photo
 ```
 
 Next, create the new view.
 
-```
+```bash
 rails generate ember:view create photo
 ```
 
diff --git a/spec/highlighter_spec.rb b/spec/highlighter_spec.rb
index 5d82a4f30..ca4d6b8ca 100644
--- a/spec/highlighter_spec.rb
+++ b/spec/highlighter_spec.rb
@@ -47,6 +47,14 @@ class HelperTester
   end
 
   describe '#_highlight' do
+    it 'raises appropriate error in case language is nil' do
+      code = 'var blah = Ember.Object.create()'
+
+      expect {
+        HelperTester.new._highlight(code, nil)
+      }.to raise_error(Highlighter::MissingLanguageError)
+    end
+
     it 'returns a code block without a filename in the table when using a bare language fence' do
       code_block = HelperTester.new._highlight('var blah = Ember.Object.create()', 'javascript')
       expect(code_block).to eq <<-OUTPUT.sub(/\n$/, '')
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
new file mode 100644
index 000000000..ac01f2265
--- /dev/null
+++ b/spec/spec_helper.rb
@@ -0,0 +1,6 @@
+require "bundler"
+Bundler.setup
+
+require "middleman"
+
+Dir["./lib/*"].each { |f| require f }
diff --git a/spec/toc_helpers_spec.rb b/spec/toc_helpers_spec.rb
deleted file mode 100644
index e69de29bb..000000000
diff --git a/spec/toc_spec.rb b/spec/toc_spec.rb
index 0f4829112..2b94426c6 100644
--- a/spec/toc_spec.rb
+++ b/spec/toc_spec.rb
@@ -1,64 +1,725 @@
-#NOTE: start the middleman as in readme, then run bundle exec rspec
+require "spec_helper"
+require "hashie"
 
-require 'capybara/rspec'
-require 'capybara/poltergeist'
-require 'pry'
+describe TOC::Helpers do
+  let(:helper)                 { HelperTester.new }
+  let(:basic_chapter_title)    { "What even is middleman?" }
+  let(:basic_guide_title)      { "Middleman Basics" }
+  let(:basics_page)            { double(path: "middleman-basics/index.html") }
 
-unless `which phantomjs`.empty?
-  Capybara.register_driver :poltergeist do |app|
-    Capybara::Poltergeist::Driver.new(app, { :inspector => true, })
+  before(:each) do
+    class HelperTester
+      include TOC::Helpers
+    end
+
+    data_yml = %Q{
+guides:
+  - title: "Middleman Basics"
+    url: "middleman-basics"
+    chapters:
+      - title: "What even is middleman?"
+        url: "index"
+    }
+
+    data = Hashie::Mash.new(YAML.load(data_yml))
+    testing_page = double(path: "custom-extensions/testing-custom-extensions.html")
+
+    allow(helper).to receive(:data).and_return(data)
+    allow(helper).to receive(:current_page).and_return(testing_page)
+    allow(helper).to receive(:link_to).and_wrap_original do |_, title, url|
+      %Q{<a href="#{url}">#{title}</a>}
+    end
   end
-  Capybara.javascript_driver = :poltergeist
-end
 
-describe "TOC", :type => :feature do
-  include Capybara::DSL
+  after do
+    # Remove our testing class
+    Object.send :remove_const, :HelperTester
+  end
+
+  describe "#toc_for" do
+    before(:each) do
+      building_page = double(path: "custom-extensions/building-custom-extensions.html")
+      allow(helper).to receive(:request).and_return(building_page)
+    end
+
+    it "includes guide titles except guides that are marked to skip sidbar" do
+      data_yml = %Q{
+guides:
+  - title: "Middleman Basics"
+    url: "middleman-basics"
+    chapters:
+      - title: "What even is middleman?"
+        url: ""
+        skip_sidebar: true
+
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Advanced Concepts"
+        url: "index"
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      }
+
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      toc = helper.toc_for(data.guides)
+      expect(toc).to include("Advanced Middleman")
+      expect(toc).to include("Extending Middleman")
+
+      expect(toc).not_to include("Middleman Basics")
+    end
+
+    it "includes chapter titles except for chapter that are marked to skip sidbar" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+        skip_sidebar_item: true
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      - title: "Testing Middleman Extensions"
+        url: "testing-middleman-extensions"
+      }
+
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      toc = helper.toc_for(data.guides)
+
+      expect(toc).to include("Building Middleman Extensions")
+      expect(toc).to include("Testing Middleman Extensions")
+
+      expect(toc).not_to include("What are extensions?")
+    end
+
+    it "includes guide urls except guides that are marked to skip sidbar" do
+      data_yml = %Q{
+guides:
+  - title: "Middleman Basics"
+    url: "middleman-basics"
+    chapters:
+      - title: "What even is middleman?"
+        url: ""
+        skip_sidebar: true
+
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Advanced Concepts"
+        url: "index"
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      }
+
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      toc = helper.toc_for(data.guides)
+
+      expect(toc).to include("advanced-middleman")
+      expect(toc).to include("extending-middleman")
+
+      expect(toc).not_to include("middleman-basics")
+    end
+
+    it "includes chapter urls except for chapter that are marked to skip sidbar" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Advanced Concepts"
+        url: "index"
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+        skip_sidebar_item: true
+      - title: "Contributing to Middleman"
+        url: "contributing-to-middleman"
+      }
+
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      toc = helper.toc_for(data.guides)
+      advanced_index_page = double(path: "advanced-middleman/index.html")
+      allow(helper).to receive(:request).and_return(advanced_index_page)
+
+      expect(toc).to include(advanced_index_page.path)
+      expect(toc).to include("contributing-to-middleman")
+
+      expect(toc).not_to include("middleman-architecture")
+    end
+
+    it "contains a link to first chapter as a guide link even if it is marked with :skip_sidebar_item" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+        skip_sidebar_item: true
+      }
+
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      toc = helper.toc_for(data.guides)
+      expectation = %Q{<li class='level-1 '><a href=\"/extending-middleman/index.html\">Extending Middleman</a>}
+      expect(toc).to include(expectation)
+    end
+  end
+
+  describe "#page_title" do
+    before(:each) do
+      allow(helper).to receive(:current_page).and_return(basics_page)
+    end
+
+    it "is generic when current guide is not specified" do
+      allow(helper).to receive(:current_guide).and_return(nil)
+
+      expect(helper.page_title).to eq("Guides")
+    end
+
+    it "is current guide's title when current chapter is not specified" do
+      allow(helper).to receive(:current_chapter).and_return(nil)
+
+      expect(helper.page_title).to eq("Middleman Basics")
+    end
+
+    it "is a combination of current guide & chapter titles when both are specified" do
+      expect(helper.page_title).to eq("#{basic_guide_title}: #{basic_chapter_title}")
+    end
+  end
+
+  describe "#guide_name" do
+    before(:each) do
+      allow(helper).to receive(:current_page).and_return(basics_page)
+    end
+
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_guide).and_return(nil)
+
+      expect(helper.guide_name).to be_nil
+    end
+
+    it "is the current guide's title when current guide is specified" do
+      expect(helper.guide_name).to eq(basic_guide_title)
+    end
+  end
+
+  describe "#chapter_name" do
+    before(:each) do
+      allow(helper).to receive(:current_page).and_return(basics_page)
+    end
+
+    it "is an empty string when current chapter is not specified" do
+      allow(helper).to receive(:current_chapter).and_return(nil)
+
+      expect(helper.chapter_name).to eq("")
+    end
+
+    it "is current chapter's title when current chapter is specified" do
+      expect(helper.chapter_name).to eq(basic_chapter_title)
+    end
+  end
+
+  describe "#chapter_heading" do
+    before(:each) do
+      allow(helper).to receive(:current_page).and_return(basics_page)
+    end
+
+    it "is nil if chapter name is blank" do
+      allow(helper).to receive(:chapter_name).and_return("")
+
+      expect(helper.chapter_heading).to be_nil
+    end
+
+    it "is header markup with name & source URL when chapter name is specified" do
+      expect(helper.chapter_heading).to include(basic_chapter_title)
+      expect(helper.chapter_heading).to include("https://github.com/emberjs/guides/edit")
+    end
+  end
+
+  describe "#chapter_github_source_url" do
+    it "is the github URL to the source file for current page" do
+      expect(helper.chapter_github_source_url).to eq("https://github.com/emberjs/guides/edit/master/source/custom-extensions/testing-custom-extensions.md")
+    end
+  end
+
+  describe "#current_guide" do
+    before(:each) do
+      allow(helper).to receive(:current_page).and_return(basics_page)
+    end
+
+    it "is the current value if present" do
+      helper.instance_variable_set(:@current_guide, "some random value")
+      expect(helper.current_guide).to eq("some random value")
+    end
+
+    it "sets the guide associated with the current page as current guide & returns it" do
+      guide = helper.data.guides.first
+
+      expect(helper.instance_variable_get(:@current_guide)).to be_nil
+      expect(helper.current_guide).to eq(guide)
+      expect(helper.instance_variable_get(:@current_guide)).to eq(guide)
+    end
+  end
+
+  describe "#current_guide_index" do
+    before(:each) do
+      data_yml = %Q{
+guides:
+  - title: "Middleman Basics"
+    url: "middleman-basics"
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Advanced Concepts"
+        url: "index"
+    }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(basics_page)
+    end
+
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.current_guide_index).to be_nil
+    end
+
+    it "is the index of the current guide when specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/index.html"))
+
+      expect(helper.current_guide_index).to eq(1)
+    end
+  end
+
+  describe "#current_chapter" do
+    before(:each) do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Advanced Concepts"
+        url: "index"
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+      }
+      @data = Hashie::Mash.new(YAML.load(data_yml))
+    end
+
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.current_chapter).to be_nil
+    end
+
+    it "is the current value if present" do
+      allow(helper).to receive(:data).and_return(@data)
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/middleman-architecture.html"))
+      architecture_chapter = helper.data.guides.first.chapters.last
+
+      helper.instance_variable_set(:@current_chapter, architecture_chapter)
+
+      expect(helper.current_chapter).to eq(architecture_chapter)
+    end
+
+    it "sets the chapter associated with the current page as current chapter & returns it" do
+      allow(helper).to receive(:data).and_return(@data)
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/middleman-architecture.html"))
+      architecture_chapter = helper.data.guides.first.chapters.last
 
-  before do
-    Capybara.app_host = 'http://localhost:4567'
-    unless `which phantomjs`.empty?
-      Capybara.current_driver = :poltergeist
-    else
-      Capybara.current_driver = :selenium
+      expect(helper.instance_variable_get(:@current_chapter)).to be_nil
+      expect(helper.current_chapter).to eq(architecture_chapter)
+      expect(helper.instance_variable_get(:@current_chapter)).to eq(architecture_chapter)
     end
-    Capybara.run_server = false
   end
 
-  it "Within-guide page link" do
-    visit "/guides/models/finding-records"
-    find('a.next-guide').text.should =~ /Working with Records/
+  describe "#current_chapter_index" do
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.current_chapter_index).to be_nil
+    end
+
+    it "is nil if the current chapter is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.current_chapter_index).to be_nil
+    end
+
+    it "is the index of the current chapter in the current guide if both are specified" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Advanced Concepts"
+        url: "index"
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/middleman-architecture.html"))
+
+      expect(helper.current_chapter_index).to eq(1)
+    end
   end
 
-  it "Another within-guide page link " do
-    visit "/guides/object-model/bindings"
-    find('a.next-guide').text.should =~ /Reopening Classes and Instances/
+  describe "#chapter_links" do
+    it "is markup that consists of previous & next chapter links" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+        skip_sidebar_item: true
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      - title: "Testing Middleman Extensions"
+        url: "testing-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/building-middleman-extensions"))
+
+      expect(helper.chapter_links).to include("What are extensions?")
+      expect(helper.chapter_links).to include("Testing Middleman Extensions")
+    end
   end
 
-  it "Shows next section link" do
-    visit "/guides/views/manually-managing-view-hierarchy"
-    find('a.next-guide').text.should =~ /We're done with Views/
-    find('a.next-guide').text.should =~ /Next up: /
-    find('a.next-guide').text.should =~ /Enumerables/
-    find('a.next-guide').text.should =~ /Introduction/
+  describe "#previous_chapter_link" do
+    it "is link to previous chapter in current guide if previous chapter is specified" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/building-middleman-extensions"))
+
+      expect(helper.previous_chapter_link).to include("What are extensions?")
+      expect(helper.previous_chapter_link).to include("index")
+    end
+
+    it "is link to last chapter in previous guide if current chapter is first chapter in previous guide" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/building-middleman-extensions"))
+
+      expect(helper.previous_chapter_link).to include("Middleman Architecture")
+    end
   end
 
-  it "Shows previous section link" do
-    visit "/guides/routing"
-    find('a.previous-guide').text.should =~ /Templates: Writing Helpers/
+  describe "#next_chapter_link" do
+    it "is link to next chapter in current guide if next chapter is specified" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/index"))
+
+      expect(helper.next_chapter_link).to include("Building Middleman Extensions")
+    end
+
+    it "is link to the first chapter in next guide if next chapter is not specified" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/middleman-architecture"))
+
+      expectation = "We're done with Advanced Middleman. Next up: Extending Middleman - Building Middleman Extensions"
+      expect(helper.next_chapter_link).to include(expectation)
+    end
   end
 
-  it "Chills on the first page" do
-    visit "/guides/index.html"
-    page.should_not have_css('a.previous-guide')
+  describe "#previous_chapter" do
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.previous_chapter).to be_nil
+    end
+
+    it "is nil if current chapter index is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.previous_chapter).to be_nil
+    end
+
+    it "is nil if current chapter is the first chapter in the guide" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/middleman-architecture"))
+
+      expect(helper.previous_chapter).to be_nil
+    end
+
+    it "is the previous chapter when current guide & current chapter are specified & there is a chapter before that" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/building-middleman-extensions"))
+      extensions_chapter = helper.data.guides.first.chapters.first
+
+      expect(helper.previous_chapter).to eq(extensions_chapter)
+    end
   end
 
-  it "First page should have a link to the first guide" do
-    visit "/guides/index.html"
-    find('a.next-guide').text.should =~ /Getting Started/
+  describe "#next_chapter" do
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.next_chapter).to be_nil
+    end
+
+    it "is nil if current chapter index is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.next_chapter).to be_nil
+    end
+
+    it "is nil if current chapter is the last chapter in the guide" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/middleman-architecture"))
+
+      expect(helper.next_chapter).to be_nil
+    end
+
+    it "is the next chapter when current guide has a next chapter" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/index"))
+      building_chapter = helper.data.guides.first.chapters.last
+
+      expect(helper.next_chapter).to eq(building_chapter)
+    end
+  end
+
+  describe "#previous_guide" do
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.previous_guide).to be_nil
+    end
+
+    it "is nil if current guide index is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.previous_guide).to be_nil
+    end
+
+    it "is nil if current guide is the first guide" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/index"))
+
+      expect(helper.previous_guide).to be_nil
+    end
+
+    it "is the previous guide when current guide is specified & there is a guide before that" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/building-middleman-extensions"))
+      first_guide = helper.data.guides.first
+
+      expect(helper.previous_guide).to eq(first_guide)
+    end
+  end
+
+  describe "#next_guide" do
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.next_guide).to be_nil
+    end
+
+    it "is nil if current guide index is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.next_guide).to be_nil
+    end
+
+    it "is nil if current guide is the last guide" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/index"))
+
+      expect(helper.next_guide).to be_nil
+    end
+
+    it "is the next guide when current guide is specified & next guide exists" do
+      data_yml = %Q{
+guides:
+  - title: "Advanced Middleman"
+    url: "advanced-middleman"
+    chapters:
+      - title: "Middleman Architecture"
+        url: "middleman-architecture"
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "Building Middleman Extensions"
+        url: "building-middleman-extensions"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "advanced-middleman/middleman-architecture"))
+      next_guide = helper.data.guides.last
+      expect(helper.next_guide).to eq(next_guide)
+    end
   end
 
-  it "Chills on the last page" do
-    visit "/guides/contributing/adding-new-features"
-    page.should_not have_css('a.next-guide')
+  describe "#warning" do
+    it "is nil if current guide is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.warning).to be_nil
+    end
+
+    it "is nil if current chapter is not specified" do
+      allow(helper).to receive(:current_page).and_return(double(path: "some/nonexistent/path.html"))
+
+      expect(helper.warning).to be_nil
+    end
+
+    it "is nil if current chapter does not have a warning set" do
+      allow(helper).to receive(:current_chapter).and_return(double(:[] => false))
+
+      expect(helper.warning).to be_nil
+    end
+
+    it "is markup specific to the specified type of warning" do
+      data_yml = %Q{
+guides:
+  - title: "Extending Middleman"
+    url: "extending-middleman"
+    chapters:
+      - title: "What are extensions?"
+        url: "index"
+      }
+      data = Hashie::Mash.new(YAML.load(data_yml))
+      allow(helper).to receive(:data).and_return(data)
+      allow(helper).to receive(:current_page).and_return(double(path: "extending-middleman/index"))
+      allow(helper).to receive(:current_chapter).and_return({ "warning" => "canary" })
+
+      expect(helper.warning).to include("WARNING")
+    end
   end
 end