Ember, AngularJS,
Backbone.js,
Knockout, … eeem??
Aleš Rosina, SAOP d.o.o.
Not yet another JS
I have jQuery, why using anything else?
Single Page Aplication (SPA)
3
MVC pattern
4
RESTfull API aka ASP.NET WebAPI
5
Tools
6
„What HTML would have been had it been designed
for web apps“
• Largest community
• Google, Nike, msnbc.com
• Size: 36K
•
7
Dependecies
•
jQuery
•
or jQueryLite, if jQuery not present
8
MVC
•
Model
•
$scope – attributes of it – not a „real“ model
•
Routing
•
Maps URLs to templates and vice versa
•
•
Controlers
View
•
aka Template
9
Simple example
http://jsfiddle.net/rszmu/
function MainCtrl($scope) {
// Model initialisation
$scope.userName = 'world';
$scope.greet = function() {
// Event handler
$scope.userName = $scope.userName.toUpperCase();
$scope.message = "Hello " + $scope.userName;
}
}
<div ng-app ng-controller="MainCtrl">
<input type="text" ng-model="userName" />
<button ng-click="greet()">Click here!</button>
<h3>{{message}}</h3>
</div>
10
•
•
•
•
„Gives structure to web apps with MVC“
Quite big community
Twitter, Foursquare, SoundCloud
Size: 6.4K
11
Dependencies
•
•
•
jQuery or Zepto
Underscore.js
Json2.js
<script type="text/template" id="item-template">
<li> <%= Name %> </li>
</script>
12
MVC
•
Model
•
Collection
•
View
•
Template
•
Controller
•
View
•
Router
•
Maps URLs to function
13
•
•
•
•
„Framework for creating ambitious web applications“
New, getting traction (v1.0 in 2013)
Grupon, Zendesk, Square
Size: 69K
14
Dependencies
•
•
jQuery
Handlebars.js
15
MVC
•
Model
•
Uses JS objects with getters and setters
•
Routers
•
Maps URLs to states and vice versa
•
Controlers
•
Where all the magic happens
•
Views
•
Always associated with a template
16
Core app
var App = Em.Application.create();
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.ApplicationController = Em.View.extend({
});
App.Router = Em.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
});
App.initialize();
(...)
<body>
<script type="text/x-handlebars"
data-template-name="application">
<h1>Hello World!</h1>
</script>
</body>
(...)
17
http://jsfiddle.net/qQ382/
Another example
App = Ember.Application.create({});
App.wife = Ember.Object.create({
householdIncome: 80000
});
App.husband = Ember.Object.create({
householdIncomeBinding: 'App.wife.householdIncome'
});
Ember.run.later(function() {
// someone gets a raise
App.husband.set('householdIncome', 90000);
}, 3000);
<script type="text/x-handlebars" >
Wifes income: {{App.wife.householdIncome}}<br/>
Husbands income: {{App.husband.householdIncome}}
</script>
18
Which one is best for me?
Picking a Javascript framework isn't about preference. It's about what
best fits your project.
Examples
20
21
Q&A.
© Copyright 2026 Paperzz