Download presentation
Presentation is loading. Please wait.
1
Ember, AngularJS, Backbone.js, Knockout, … eeem??
Aleš Rosina, SAOP d.o.o.
2
Not yet another JS I have jQuery, why using anything else?
3
Single Page Aplication (SPA)
4
MVC pattern
5
RESTfull API aka ASP.NET WebAPI
GET, POST, PUT, DELTE
6
Tools
7
„What HTML would have been had it been designed for web apps“
Largest community Google, Nike, msnbc.com Size: 36K
8
Dependecies jQuery or jQueryLite, if jQuery not present
9
MVC Model Routing Controlers View
$scope – attributes of it – not a „real“ model Routing Maps URLs to templates and vice versa Controlers View aka Template
10
Simple example Index.html 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; } Index.html <div ng-app ng-controller="MainCtrl"> <input type="text" ng-model="userName" /> <button ng-click="greet()">Click here!</button> <h3>{{message}}</h3> </div>
11
„Gives structure to web apps with MVC“
Quite big community Twitter, Foursquare, SoundCloud Size: 6.4K
12
Dependencies jQuery or Zepto Underscore.js Json2.js
<script type="text/template" id="item-template"> <li> <%= Name %> </li> </script>
13
MVC Model View Controller Router Collection Template
Maps URLs to function
14
„Framework for creating ambitious web applications“
New, getting traction (v1.0 in 2013) Grupon, Zendesk, Square Size: 69K
15
Dependencies jQuery Handlebars.js
<script type="text/x-handlebars" data-template-name="answer"> <a href="#" class="author-name">{{ answer.author.name }}</a> <span class="status-info">respondeu:</span> {{#if answer.created_at}} {{datetime answer.created_at}} {{/if}} <p class="input-user">{{ answer.content.text }}</p> </script>
16
MVC Model Routers Controlers Views
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
17
Core app Index.html 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(); Index.html (...) <body> <script type="text/x-handlebars" data-template-name="application"> <h1>Hello World!</h1> </script> </body>
18
Another example Index.html http://jsfiddle.net/qQ382/
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); Index.html <script type="text/x-handlebars" > Wifes income: {{App.wife.householdIncome}}<br/> Husbands income: {{App.husband.householdIncome}} </script>
19
Which one is best for me? Picking a Javascript framework isn't about preference. It's about what best fits your project. by Lauren Orsini from readwrite.com
20
Examples
Similar presentations
