Ember.js: Hipster Hamster Framework

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

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

Bindings

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

Computed Properties

Auto-updating Templates

-Create functions that can be used as properties-Templates are bindings aware so they update when you data changes

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

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

-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

http://todomvc.com/

Website that shows different implementations of a single page Todo list

http://emberjs.com/ember-users/

Ember is new but is production ready

“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

“Convention over configuration”

-Like Rails-Code generated that you’ll never see

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

Views Controllers ORM Data Store

Rails

JS

Ember

ERBHTML 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

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

<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

+HTML

Ember uses {{}} and extends functionality

Billy Shih@tobillys

github.com/bbshih

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

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