Ember.js: Hipster Hamster Framework

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

Transcript

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