Angular v. Ember

JavaScript Frameworks

JavaScript Frameworks

  • HTML is not just for writing pages now
  • server based apps have low responsibility time
  • AJAX is cool, but it complicates everything
  • we need more sophisticated UI than is implemented in HMTL

Two ways

OOP way HTML way
  • UI composition - no knowledge of HTML/CSS is required
  • Easy to create something
  • Hard to customize anything
  • ExtJS, SmartClient, Kendo UI
  • UI as HTML templates
  • Everything under developers control
  • easier to learn
  • more knowledge required
  • Underscore, Angular, Ember

Alternative 3rd way

  • Create app as code in other language, let everything on framework generator
  • Any knowledge about code on client
  • Easy and fast for creating
  • Hard to fix client issues
  • ASP.NET, GWT, Lazslo, Facebook React

HTML way

  • In curent time
  • In current place
  • In current conditions

is best solution.

Main features

Templates

bind events with templates

2-way binding

variable to UI
UI to variable

Routing

Address bar is part of UI

MVC

Model View Controller

Angular

Foundation stones Angular

  • dependency injection
  • scope
  • directive
  • filter
  • provider
    • service
    • factory
    • value
    • constant

Dependency injection Angular

Dependency injection is a software design pattern in which one or more dependencies are injected, or passed by reference, into a dependent object.

Dependency injection Angular 


angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])

Scope Angular

  • scope is an object that refers to the application model
  • arranged in hierarchical structure
  • can watch expressions and propagate events

Directives Angular

markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children

Templates Angular

predefined directives form controls filters

Bind variables Angular templates 


{{varible}} // sanitized
{{{variable}}} //safe

Predefined directives Angular templates 


ng-app
ng-model
ng-click
ng-href
ng-class
ng-if
ng-repeat

Filters Angular templates

value formatters
currency , number, date,json, lowercase, uppercase, limitTo, orderBy 

                        {{ expression | filter }}

Examples

Angular

Ember

Foundation stones Ember

  • handlebars
  • actions
  • routing
  • views
  • components
  • Ember Magics

Templates Ember

  • Handlebars
  • unable to use more complex expressions


    
  {{#each items}}
    
  • {{agree_button}}
    • 
  {{/each}}

Actions Templates Ember

Template: 

     <button {{action 'showMore'}}>Show More...
Controller: 

actions: {
    expand: function() {
        ...code...
    }
}

Components Ember

Template 
 
{{navigation-bar}}
navigation-bar.js 

    App.NavigationBarComponent = Ember.Component.extend({
  classNames: ['primary']
});

Views Ember

very simillar to components

Magics Ember

When your application boots, Ember will look for these objects:
  • App.ApplicationRoute
  • App.ApplicationController
  • the application template

Magics Ember

If you create route /favorites, Ember.js will look for these objects:
  • App.FavoritesRoute
  • App.FavoritesController

Examples Ember