Ember vs Angular


Published on

Angular and Ember, along with Backbone, are the most popular JavaScript MV* frameworks, yet they couldn't be more different in how they are used to build apps. Take a walk for an evening into the Ember world. First we will explore how to build an app in Ember then we will compare and contrast it to how it is done in Angular.

Published in: Software, Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ember vs Angular

  1. 1. Ember.js vs Angular.js Kareo, Irvine CA 5 June 2014
  2. 2. All of the links: https://bitly.com/bundles/rockncoder/3
  3. 3. Who am I? Hi, I am Troy. I have fun as a full stack programmer. I develop using ASP.NET MVC or Node.js on the backend and the web or mobile up front. ! I can be reached at: rockncoder@gmail.com
  4. 4. MongoDB 9 to 5 • July 19th, One day Intensive Training Course • Focused on MongoDB use in web & mobile MongoDB apps • Examples in JavaScript / Java / C# / • Web,Android, and iOS • www.meetup.com/South-Bay-Mobile-User- Group
  5. 5. Our Agenda • What is Ember? • Let’s build an Ember app • Ember vs Angular • Summary • Questions?
  6. 6. What is Ember?
  7. 7. What is Ember? • Created in 2011 byYehuda Katz,Tom Dale, and the Ember Core Team • Version 1.0 released 6 September 2013 • Creates scalable, single-page, JavaScript MVC applications • Apps consist of: routes, templates, models, views, and controllers • Current version: 1.5.1
  8. 8. Ember Router • Allows the state of the app to serialized and deserialized via the URL • Each route responsible for set up and tear down of its functions • Ember Router ensures that routes initialized in the correct order
  9. 9. Templates • Written in the Handlebars templating language • Each template is back by a model • Templates auto update when the model changes
  10. 10. More Templates • Expressions, like {{property}}, put information from the model into HTML • Outlets allow templates to be nested using the {{outlet}} helper • Components are custom HTML elements which reduce repetition in templates and allow for the creation of reusable controls
  11. 11. MVC the Ember Way • Models stores persistent state • Templates display the model to the user • Models are usually loaded via REST • Ember is backend agnostic
  12. 12. MVC the Ember Way • Normally you rarely create views in Ember • Reasons to create views: • Complex handling of user events • Creating reusable components
  13. 13. MVC the Ember Way • Controllers • Ember.ObjectController • Ember.ArrayController • We can have one controller dependent upon another so long as their is a parent/ child relationship via URL (need)
  14. 14. Naming Conventions • Ember uses naming conventions to wire up objects • These conventions are used for routes, controllers, and templates
  15. 15. Application • App = Ember.Application.create(); • Ember looks for the following object: • App.ApplicationRoute • App.ApplicationController • the application template
  16. 16. Let’s build an Ember app
  17. 17. Ember vs Angular
  18. 18. Templates vs Directives • Both Ember and Angular use templates • Angular’s are “in-line”, Ember’s are not • If you aren’t careful,Angular can flash unprepared HTML • Angular is an HTML compiler • Ember has no equivalent of directives
  19. 19. Potpouri • Ember has no equivalent of Angular’s $scope • Angular can be added to an existing web site
  20. 20. Debugging • Both Angular and Ember have debugging extensions • Angular - Batarang • Ember - Ember Inspector • Both are available for Chrome and Firefox
  21. 21. filters vs helpers • Angular’s filters make it easy to render models • Helpers can be used in a similar fashion, but less refined • Helpers have no built in handlers for currency,
  22. 22. Convention over Configuration • Ember’s use of conventions makes it easier for new developers to join a team • But it can also feel like a trap, making it difficult if you stray off of the happy path
  23. 23. Dependencies • Angular • none • Ember • jQuery • Handlebars
  24. 24. POJO • Angular bases all of its data on POJO, plain ol’ JavaScript objects • Ember’s objects are subclasses of Ember.Object • Angular has no need for getters/setters • An object model is one less thing to learn
  25. 25. The pain of POJO • Angular’s POJO has problems • Requires lots of code to do dirty checking • Quirks and gotchas due to JS prototypal inheritance
  26. 26. The blessing of Ember.Object • Strict use of getter/setter preserves the uniform access principle • Use of familiar and well-tested patterns • Makes computed properties easy to implement
  27. 27. Unit Testing • Angular makes it super easy to unit test • Ember is also very easy to unit test
  28. 28. Performance ! • Angular is usually faster than Ember rendering thousands of items • But Angular’s $watches are very slow when applied to arrays or other complex structures
  29. 29. Size • Angular - minified 104 KB • Ember - minified 277 KB • + Handlebars - minified 43 KB • + jQuery - minified 96 KB
  30. 30. emberjs.com • Excellent place to learn about Ember • Holds online copy of the API & Guides • Download the “starter kit”
  31. 31. Summary
  32. 32. Summary • Both Ember and Angular are JavaScript MVC Frameworks • They have very different approaches • Angular has a few features not matched by Ember, yet
  33. 33. Questions
  34. 34. All of the links: https://bitly.com/bundles/rockncoder/3
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.