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 fo...
http://www.reddit.com/r/webdev/comments/18n0o5/please_explain_like_im_five_what_are_emberjs/Top answer:-Reddit is great fo...
Bindings-Keep 2 objects in sync-Country will update its president name whenever you change president
ComputedPropertiesAuto-updatingTemplates-Create functions that can be used as properties-Templates are bindings aware so t...
Interactive(MVCFramework)Static(No JavaScript)-When to use Ember?-Spectrum: Static sites don’t need JS, interactive sites ...
Interactive(MVCFramework)Static(No JavaScript) JQuery-When to use Ember?-Spectrum: Static sites don’t need JS, interactive...
-Popular alternatives-Angular is most popular to compare against right now-Ember provides more than these frameworks do, b...
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 forcreating ambitiousweb applications.”-Ambitious is the key word-Goal is to compete with native apps and so ...
“Convention overconfiguration”-Like Rails-Code generated that you’ll never see
Routerthis.resource(tables)App.TablesRouteController App.TablesControllerModel App.TableView App.TablesViewTemplate tables...
Views Controllers ORM Data StoreRailsJSEmberERBHTMLActionController ActiveRecordmySQL/Postgres$.html $.live $.ajax Resful ...
- 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">{{bod...
+HTMLEmber uses {{}} and extends functionality
Billy Shih@tobillysgithub.com/bbshih
Ember.js http://emberjs.comHandlebars.js http://handlebarsjs.comPeepcode https://peepcode.com/products/emberjsTodoMVC http...
Example streaming radio app https://github.com/inkredabull/sonific8trRailscastshttp://railscasts.com/episodes/408-ember-pa...
Upcoming SlideShare
Loading in …5
×

Ember,js: Hipster Hamster Framework

1,308 views
1,146 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,308
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ember,js: Hipster Hamster Framework

  1. 1. Ember.js: Hipster Hamster Framework
  2. 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. 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. 4. Bindings-Keep 2 objects in sync-Country will update its president name whenever you change president
  5. 5. ComputedPropertiesAuto-updatingTemplates-Create functions that can be used as properties-Templates are bindings aware so they update when you data changes
  6. 6. Interactive(MVCFramework)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 byJQuery necessary = lots of work
  7. 7. Interactive(MVCFramework)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 byJQuery necessary = lots of work
  8. 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 theright job
  9. 9. http://todomvc.com/Website that shows different implementations of a single page Todo list
  10. 10. http://emberjs.com/ember-users/Ember is new but is production ready
  11. 11. “A framework forcreating ambitiousweb applications.”-Ambitious is the key word-Goal is to compete with native apps and so borrows heavily from developing nativeapplications, especially from Cocoa
  12. 12. “Convention overconfiguration”-Like Rails-Code generated that you’ll never see
  13. 13. Routerthis.resource(tables)App.TablesRouteController App.TablesControllerModel App.TableView App.TablesViewTemplate tablesTables 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. 14. Views Controllers ORM Data StoreRailsJSEmberERBHTMLActionController ActiveRecordmySQL/Postgres$.html $.live $.ajax Resful APIHandlebars Ember.js Ember Data Resful APIhttps://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. 15. - Ember uses and builds upon Handlebars.js- Extension of the Mustache templating language- Helps keep logic from the view
  16. 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. 17. +HTMLEmber uses {{}} and extends functionality
  18. 18. Billy Shih@tobillysgithub.com/bbshih
  19. 19. Ember.js http://emberjs.comHandlebars.js http://handlebarsjs.comPeepcode https://peepcode.com/products/emberjsTodoMVC http://todomvc.com/architecture-examples/emberjs/#/Jason Ardell https://speakerdeck.com/ardell/ember-dot-js-railsRobin Ward http://eviltrout.com/2013/02/10/why-discourse-uses-emberjs.htmlSources
  20. 20. Example streaming radio app https://github.com/inkredabull/sonific8trRailscastshttp://railscasts.com/episodes/408-ember-part-1http://railscasts.com/episodes/410-ember-part-2Other resources

×