Date post: | 08-May-2015 |
Category: |
Software |
Upload: | troy-miles |
View: | 664 times |
Download: | 1 times |
Ember.js vs Angular.jsKareo, Irvine CA
5 June 2014
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]
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
Our Agenda
• What is Ember?
• Let’s build an Ember app
• Ember vs Angular
• Summary
• Questions?
What is Ember?
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
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
Templates
• Written in the Handlebars templating language
• Each template is back by a model
• Templates auto update when the model changes
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
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
MVC the Ember Way
• Normally you rarely create views in Ember
• Reasons to create views:
• Complex handling of user events
• Creating reusable components
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)
Naming Conventions
• Ember uses naming conventions to wire up objects
• These conventions are used for routes, controllers, and templates
Application
• App = Ember.Application.create();
• Ember looks for the following object:
• App.ApplicationRoute
• App.ApplicationController
• the application template
Let’s build an Ember app
Ember vs Angular
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
Potpouri
• Ember has no equivalent of Angular’s $scope
• Angular can be added to an existing web site
Debugging
• Both Angular and Ember have debugging extensions
• Angular - Batarang
• Ember - Ember Inspector
• Both are available for Chrome and Firefox
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,
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
Dependencies
• Angular
• none
• Ember
• jQuery
• Handlebars
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
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
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
Unit Testing
• Angular makes it super easy to unit test
• Ember is also very easy to unit test
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
Size
• Angular - minified 104 KB
• Ember - minified 277 KB
• + Handlebars - minified 43 KB
• + jQuery - minified 96 KB
emberjs.com
• Excellent place to learn about Ember
• Holds online copy of the API & Guides
• Download the “starter kit”
Summary
Summary
• Both Ember and Angular are JavaScript MVC Frameworks
• They have very different approaches
• Angular has a few features not matched by Ember, yet
Questions