High level introduction to Ember focusing less on code and more on what it's all about

1. Ember.js: Hipster Hamster Framework

2. http://www.reddit.com/r/webdev/comments/18n0o5/please_explain_like_im_five_what_are_emberjs/
Top answer:
-Reddit is great for lots of things but not everything
-Not a how to
-High level before diving in

3. http://www.reddit.com/r/webdev/comments/18n0o5/please_explain_like_im_five_what_are_emberjs/
Top answer:
-Reddit is great for lots of things but not everything
-Not a how to
-High level before diving in

4. Bindings
-Keep 2 objects in sync
-Country will update its president name whenever you change president

5. Computed
Properties
Auto-updating
Templates
-Create functions that can be used as properties
-Templates are bindings aware so they update when you data changes

6. Interactive
(MVC
Framework)
Static
(No JavaScript)
-When to use Ember?
-Spectrum: Static sites don’t need JS, interactive sites do
-Can get away with just JQuery but JQuery relies on the HTML
-Changing the HTML can break functionality unless you track of changes in the HTML done by
JQuery necessary = lots of work

7. Interactive
(MVC
Framework)
Static
(No JavaScript) JQuery
-When to use Ember?
-Spectrum: Static sites don’t need JS, interactive sites do
-Can get away with just JQuery but JQuery relies on the HTML
-Changing the HTML can break functionality unless you track of changes in the HTML done by
JQuery necessary = lots of work

8. -Popular alternatives
-Angular is most popular to compare against right now
-Ember provides more than these frameworks do, but as always, use the right tool for the
right job

9. http://todomvc.com/
Website that shows different implementations of a single page Todo list

10. http://emberjs.com/ember-users/
Ember is new but is production ready

11. “A framework for
creating ambitious
web applications.”
-Ambitious is the key word
-Goal is to compete with native apps and so borrows heavily from developing native
applications, especially from Cocoa

12. “Convention over
configuration”
-Like Rails
-Code generated that you’ll never see

13. Router
this.resource('tables')
App.TablesRoute
Controller App.TablesController
Model App.Table
View App.TablesView
Template tables
Tables Resource
-5 core pieces of Ember
-Naming convention is CRITICAL
-Since Ember does a lot for you, if you don’t name things correctly, it won’t work

14. Views Controllers ORM Data Store
Rails
JS
Ember
ERB
HTML
ActionController ActiveRecord
mySQL/
Postgres
$.html $.live $.ajax Resful API
Handlebars Ember.js Ember Data Resful API
https://speakerdeck.com/ardell/ember-dot-js-rails
-Rails MVC is NOT Ember MVC
-JS works but harder to ensure data and views match
-Ember takes over to help with that

15. - Ember uses and builds upon Handlebars.js
- Extension of the Mustache templating language
- Helps keep logic from the view

16. <script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
-Regular HTML with handlebars expression {{ content }}
-Add template through script tags
-Compile a template in JavaScript with Handlebars.compile
-Get HTML by executing the template with a context

17. +
HTML
Ember uses {{}} and extends functionality

18. Billy Shih
@tobillys
github.com/bbshih

19. Ember.js http://emberjs.com
Handlebars.js http://handlebarsjs.com
Peepcode https://peepcode.com/products/emberjs
TodoMVC http://todomvc.com/architecture-examples/
emberjs/#/
Jason Ardell https://speakerdeck.com/ardell/ember-dot-
js-rails
Robin Ward http://eviltrout.com/2013/02/10/why-
discourse-uses-emberjs.html
Sources

20. Example streaming radio app https://
github.com/inkredabull/sonific8tr
Railscasts
http://railscasts.com/episodes/408-ember-
part-1
http://railscasts.com/episodes/410-ember-
part-2
Other resources