Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Avoiding Common Pitfalls
The mistakes everyone makes with Ember.js
@alexspeller
Routing
• Resource vs Route
• < 1.7 - routes cannot have sub routes
• >= 1.7 - only difference is namespace inheritance
• ...
Routing
• Validation vs Setup phase
• First all beforeModel / model / afterModel hooks
are called
• Then all activate / se...
Routing
• Route nesting === Template Nesting
• If you want a non-nested template, give the path
option
Routing
• Automatic index route is generated when using
resources
Routing
• Index is not just for collections
Routing
• The model hook will not be always be called
Routing
• You can transition without providing all params
Routing
!
• Routes and controllers are not necessarily 1:1
Routing
• serialize is called for link-to
Routing
• Hackathon result
• http://alexspeller.com/ember-diagonal/
Actions
• Actions bubble to all active routes
Templates
• Precompilation
Templates
• {{bind-attr}} special behaviour for class
Templates
• classNameBindings on helpers e.g. {{link-to}}
Templates
• Difference between {{render}}, {{partial}} and
{{view}}
• http://emberjs.com/guides/templates/rendering-
with-...
Templates
• {{#each}} helper has a lot of subtle different uses
• http://ember.guru/2014/hidden-features-of-the-
each-aka-...
Components
• Components are intentionally isolated
• You should pass in all the state you need
• Communicating between com...
Components - sendAction
• Actions must be passed in the template as strings
Computed Properties
• Forgetting the property helper
Array dependent keys - [], @each
Computed Properties
• Overwriting Computed properties
Computed Properties
• Wrong dependencies
Observers
• Not called for unconsumed computed properties
• Synchronous
• http://emberjs.com/guides/object-model/
observer...
Promises
• Errors getting swallowed
Promises
• Aggregating Promises Em.RSVP.all etc
Promises
!
• Stefan Penner talk:
• https://www.youtube.com/watch?v=eHomHs3PrP8
The Run Loop
• Not using Em.run when dealing with 3rd Party Callbacks
Ember Data
• Non-live relations https://github.com/emberjs/
data/issues/1308
store.filter is a workaround for this
Ember Data
• Invalid JSON
• “” is not valid JSON:
• Silently fails :(
Ember Data
• find() vs find({})
• find(‘posts’) returns a live array of all records in a
store, even new records
• find(‘posts...
Ember Data
• in-memory caching issues
• store.find(‘post’, 1) will cache after first request
• post.reload() now possible
• ...
Debugging
• Use the debugger! (and {{debugger}})
• Use console.log! (and {{log}})
• Use the Ember Inspector!
• LOG_TRANSIT...
Architecture
JavaScript
• Some things aren’t real objects, e.g. strings
• Can be confusing sometimes
JavaScript Mistakes
• “Ember Object Self Troll”
• http://reefpoints.dockyard.com/2014/04/17/
ember-object-self-troll.html
JavaScript Mistakes
• Function scope and “this”
JavaScript Mistakes
• Native array methods e.g. push
Coffeescript
• Action bubbling
Coffeescript
• Em.computed makes for nicer properties
https://gist.github.com/alexspeller/8317125
Mistakes asking for help
• Asking the wrong question - asking too broadly
• Not giving a reproducible example
• Not using ...
Thank You!
@alexspeller
emberkit.com
Upcoming SlideShare
Loading in …5
×

Avoiding Common Pitfalls in Ember.js

22,364 views

Published on

The mistakes everyone makes, collated from many hours helping people on IRC and the forums

Published in: Software
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Avoiding Common Pitfalls in Ember.js

  1. 1. Avoiding Common Pitfalls The mistakes everyone makes with Ember.js @alexspeller
  2. 2. Routing • Resource vs Route • < 1.7 - routes cannot have sub routes • >= 1.7 - only difference is namespace inheritance • Guideline: route == verb, resource == noun
  3. 3. Routing • Validation vs Setup phase • First all beforeModel / model / afterModel hooks are called • Then all activate / setupController / renderTemplate hooks are called • Calling transition.abort() or this.transitionTo() in the validation phase cancels the transition without affecting controller state
  4. 4. Routing • Route nesting === Template Nesting • If you want a non-nested template, give the path option
  5. 5. Routing • Automatic index route is generated when using resources
  6. 6. Routing • Index is not just for collections
  7. 7. Routing • The model hook will not be always be called
  8. 8. Routing • You can transition without providing all params
  9. 9. Routing ! • Routes and controllers are not necessarily 1:1
  10. 10. Routing • serialize is called for link-to
  11. 11. Routing • Hackathon result • http://alexspeller.com/ember-diagonal/
  12. 12. Actions • Actions bubble to all active routes
  13. 13. Templates • Precompilation
  14. 14. Templates • {{bind-attr}} special behaviour for class
  15. 15. Templates • classNameBindings on helpers e.g. {{link-to}}
  16. 16. Templates • Difference between {{render}}, {{partial}} and {{view}} • http://emberjs.com/guides/templates/rendering- with-helpers/ • Render cannot take arguments - is not contextual • Render does not have anything to do with the route of the same name, does not need an associated route
  17. 17. Templates • {{#each}} helper has a lot of subtle different uses • http://ember.guru/2014/hidden-features-of-the- each-aka-loopedy-loop-helper
  18. 18. Components • Components are intentionally isolated • You should pass in all the state you need • Communicating between components is hard • http://madhatted.com/2013/8/31/emberfest- presentation-complex-architectures-in-ember
  19. 19. Components - sendAction • Actions must be passed in the template as strings
  20. 20. Computed Properties • Forgetting the property helper
  21. 21. Array dependent keys - [], @each
  22. 22. Computed Properties • Overwriting Computed properties
  23. 23. Computed Properties • Wrong dependencies
  24. 24. Observers • Not called for unconsumed computed properties • Synchronous • http://emberjs.com/guides/object-model/ observers/ is (now) good at explaining all the issues
  25. 25. Promises • Errors getting swallowed
  26. 26. Promises • Aggregating Promises Em.RSVP.all etc
  27. 27. Promises ! • Stefan Penner talk: • https://www.youtube.com/watch?v=eHomHs3PrP8
  28. 28. The Run Loop • Not using Em.run when dealing with 3rd Party Callbacks
  29. 29. Ember Data • Non-live relations https://github.com/emberjs/ data/issues/1308 store.filter is a workaround for this
  30. 30. Ember Data • Invalid JSON • “” is not valid JSON: • Silently fails :(
  31. 31. Ember Data • find() vs find({}) • find(‘posts’) returns a live array of all records in a store, even new records • find(‘posts’, {}) will perform the same query but the result is not live
  32. 32. Ember Data • in-memory caching issues • store.find(‘post’, 1) will cache after first request • post.reload() now possible • If it may not be loaded it can be quite ugly:
  33. 33. Debugging • Use the debugger! (and {{debugger}}) • Use console.log! (and {{log}}) • Use the Ember Inspector! • LOG_TRANSITIONS and LOG_TRANSITIONS_INTERNAL • http://eviltrout.com/2014/08/16/debugging-ember- js.html
  34. 34. Architecture
  35. 35. JavaScript • Some things aren’t real objects, e.g. strings • Can be confusing sometimes
  36. 36. JavaScript Mistakes • “Ember Object Self Troll” • http://reefpoints.dockyard.com/2014/04/17/ ember-object-self-troll.html
  37. 37. JavaScript Mistakes • Function scope and “this”
  38. 38. JavaScript Mistakes • Native array methods e.g. push
  39. 39. Coffeescript • Action bubbling
  40. 40. Coffeescript • Em.computed makes for nicer properties https://gist.github.com/alexspeller/8317125
  41. 41. Mistakes asking for help • Asking the wrong question - asking too broadly • Not giving a reproducible example • Not using a jsbin / jsfiddle • Noone will show you how to do it “wrong” • Not saying “I don’t understand”
  42. 42. Thank You! @alexspeller emberkit.com

×