Ember.js vs Angular.jsKareo, Irvine CA

5 June 2014

All of the links: https://bitly.com/bundles/rockncoder/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

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

All of the links: https://bitly.com/bundles/rockncoder/3