Ember vs Angular

  • 488 views
Uploaded 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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
488
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Ember.js vs Angular.js Kareo, Irvine CA 5 June 2014
  • 2. All of the links: https://bitly.com/bundles/rockncoder/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. 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. Our Agenda • What is Ember? • Let’s build an Ember app • Ember vs Angular • Summary • Questions?
  • 6. What is Ember?
  • 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. 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. Templates • Written in the Handlebars templating language • Each template is back by a model • Templates auto update when the model changes
  • 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. 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. MVC the Ember Way • Normally you rarely create views in Ember • Reasons to create views: • Complex handling of user events • Creating reusable components
  • 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. Naming Conventions • Ember uses naming conventions to wire up objects • These conventions are used for routes, controllers, and templates
  • 15. Application • App = Ember.Application.create(); • Ember looks for the following object: • App.ApplicationRoute • App.ApplicationController • the application template
  • 16. Let’s build an Ember app
  • 17. Ember vs Angular
  • 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. Potpouri • Ember has no equivalent of Angular’s $scope • Angular can be added to an existing web site
  • 20. Debugging • Both Angular and Ember have debugging extensions • Angular - Batarang • Ember - Ember Inspector • Both are available for Chrome and Firefox
  • 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. 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. Dependencies • Angular • none • Ember • jQuery • Handlebars
  • 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. 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. 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. Unit Testing • Angular makes it super easy to unit test • Ember is also very easy to unit test
  • 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. Size • Angular - minified 104 KB • Ember - minified 277 KB • + Handlebars - minified 43 KB • + jQuery - minified 96 KB
  • 30. emberjs.com • Excellent place to learn about Ember • Holds online copy of the API & Guides • Download the “starter kit”
  • 31. Summary
  • 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. Questions
  • 34. All of the links: https://bitly.com/bundles/rockncoder/3