Ember vs Angular
-
Upload
troy-miles -
Category
Software
-
view
668 -
download
1
description
Transcript of Ember vs Angular
![Page 1: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/1.jpg)
Ember.js vs Angular.jsKareo, Irvine CA
5 June 2014
![Page 3: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/3.jpg)
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: [email protected]
![Page 4: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/4.jpg)
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
![Page 5: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/5.jpg)
Our Agenda
• What is Ember?
• Let’s build an Ember app
• Ember vs Angular
• Summary
• Questions?
![Page 6: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/6.jpg)
What is Ember?
![Page 7: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/7.jpg)
What is Ember?
• Created in 2011 by Yehuda 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
![Page 8: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/8.jpg)
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
![Page 9: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/9.jpg)
Templates
• Written in the Handlebars templating language
• Each template is back by a model
• Templates auto update when the model changes
![Page 10: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/10.jpg)
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
![Page 11: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/11.jpg)
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
![Page 12: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/12.jpg)
MVC the Ember Way
• Normally you rarely create views in Ember
• Reasons to create views:
• Complex handling of user events
• Creating reusable components
![Page 13: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/13.jpg)
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)
![Page 14: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/14.jpg)
Naming Conventions
• Ember uses naming conventions to wire up objects
• These conventions are used for routes, controllers, and templates
![Page 15: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/15.jpg)
Application
• App = Ember.Application.create();
• Ember looks for the following object:
• App.ApplicationRoute
• App.ApplicationController
• the application template
![Page 16: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/16.jpg)
Let’s build an Ember app
![Page 17: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/17.jpg)
Ember vs Angular
![Page 18: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/18.jpg)
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
![Page 19: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/19.jpg)
Potpouri
• Ember has no equivalent of Angular’s $scope
• Angular can be added to an existing web site
![Page 20: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/20.jpg)
Debugging
• Both Angular and Ember have debugging extensions
• Angular - Batarang
• Ember - Ember Inspector
• Both are available for Chrome and Firefox
![Page 21: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/21.jpg)
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,
![Page 22: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/22.jpg)
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
![Page 23: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/23.jpg)
Dependencies
• Angular
• none
• Ember
• jQuery
• Handlebars
![Page 24: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/24.jpg)
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
![Page 25: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/25.jpg)
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
![Page 26: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/26.jpg)
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
![Page 27: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/27.jpg)
Unit Testing
• Angular makes it super easy to unit test
• Ember is also very easy to unit test
![Page 28: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/28.jpg)
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
![Page 29: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/29.jpg)
Size
• Angular - minified 104 KB
• Ember - minified 277 KB
• + Handlebars - minified 43 KB
• + jQuery - minified 96 KB
![Page 30: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/30.jpg)
emberjs.com
• Excellent place to learn about Ember
• Holds online copy of the API & Guides
• Download the “starter kit”
![Page 31: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/31.jpg)
Summary
![Page 32: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/32.jpg)
Summary
• Both Ember and Angular are JavaScript MVC Frameworks
• They have very different approaches
• Angular has a few features not matched by Ember, yet
![Page 33: Ember vs Angular](https://reader034.fdocuments.in/reader034/viewer/2022042509/554bbd11b4c90530298b4d5f/html5/thumbnails/33.jpg)
Questions