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)
MVC pattern
RESTfull API aka ASP.NET WebAPI GET, POST, PUT, DELTE
Tools
„What HTML would have been had it been designed for web apps“ Largest community Google, Nike, msnbc.com Size: 36K
Dependecies jQuery or jQueryLite, if jQuery not present
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
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>
„Gives structure to web apps with MVC“ Quite big community Twitter, Foursquare, SoundCloud Size: 6.4K
Dependencies jQuery or Zepto Underscore.js Json2.js <script type="text/template" id="item-template"> <li> <%= Name %> </li> </script>
MVC Model View Controller Router Collection Template Maps URLs to function
„Framework for creating ambitious web applications“ New, getting traction (v1.0 in 2013) Grupon, Zendesk, Square Size: 69K
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>
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
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>
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>
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
Examples