1.
MV*
Welcome.
Friday 20 September 13

2.
MV*
Choice.
Friday 20 September 13

3.
MV*It’s all about
you.
Friday 20 September 13

4.
MV*Model
View
Whatever
Friday 20 September 13

5.
MV*
Friday 20 September 13

6.
MV*“Ask yourself how interactive your
web application needs to be. On
the less interactive side of the
scale, there are huge wins with
server side rendered HTML. The
more interactive your application
becomes, the more you’ll benefit
from a client side MVC
framework.” - Robin Ward
Friday 20 September 13

7.
MV*Let’s
compare!
Friday 20 September 13

8.
MV*
0
3200
6400
9600
12800
16000
14231
8207
15622
Backbone Ember Angular
Popularity: stars on github
Friday 20 September 13

9.
MV*
Friday 20 September 13

10.
MV*“Provides the common
foundation that data-rich web
applications with ambitious
interfaces require — while very
deliberately avoiding painting you
into a corner by making any
decisions that you're better
equipped to make yourself.”
Friday 20 September 13

11.
MV*“Backbone is not a complete
framework. It's a set of building
blocks. It leaves much of the
application design, architecture
and scalability to the developer,
including memory management,
view management, and more.”
-Derick Bailey
Friday 20 September 13

12.
MV*Models
! app.Transaction =
Backbone.Model.extend({});
Friday 20 September 13

13.
MV*Models getters and setters
! transaction =
app.txns.create({desc: 'woolies'});
! transaction.set('desc', 'spar');
! transaction.get('desc');
Friday 20 September 13

14.
MV*Collections
var Transactions =
Backbone.Collection.extend({
! ! model: app.Transaction
! });
Friday 20 September 13

15.
MV*Views
! ! <script type="text/template"
id="txn-template">
! ! ! <div class="view">
! ! ! ! <label><%- desc %></label>
! ! ! </div>
! ! </script>
Friday 20 September 13

16.
MV*Views part 2
app.TxnView = Backbone.View.extend({
! tagName: 'li',
! template: _.template($('#txn-template').html()),
! render: function () {
! this.$el
.html(this.template(this.model.toJSON()));
! return this;
! },
});
Friday 20 September 13

17.
MV*Views with Marionette.js
app.TxnView =
Marionette.ItemView.extend({
template: '#txn-template'
});
Friday 20 September 13

18.
MV*http://backplug.io
Friday 20 September 13

19.
MV*
Friday 20 September 13

20.
MV*
Friday 20 September 13

21.
MV*“Allows developers to create scalable
single-page applications by incorporating
common idioms and best practices into a
framework that provides a rich object
model, declarative two-way data binding,
computed properties, automatically-
updating templates powered by
Handlebars.js, and a router for managing
application state.”
Friday 20 September 13

22.
MV*Models
{
! description: "Woolworths HB",
! amount: -566
}
Friday 20 September 13

23.
MV*A simple app (1/4) - app.html
<script type="text/x-handlebars">
<h3>My App</h3>
{{outlet}}
</script>
Friday 20 September 13

24.
MV*A simple app (2/4) - app.js
App = Ember.Application.create({});
// route-> #/transactions
App.Router.map(function() {
this.resource('transactions');
});
Friday 20 September 13

25.
MV*A simple app (3/4) - app.js
App.TransactionsRoute = Ember.Route.extend({
model: function() {
return $.getJSON('/txns.json').promise();
}
});
Friday 20 September 13

26.
MV*A simple app (4/4) - app.html
<script
type="text/x-handlebars"
id="transactions">
{{#each model}}
<div>
{{description}} R{{amount}}
</div>
{{/each}}
</script>
Friday 20 September 13

27.
MV*Very rails-like
<div>
{{#link-to 'transaction', this}}
!{{description}} R{{amount}}
{{/link-to}}
</div>
Friday 20 September 13

28.
MV*
Friday 20 September 13

29.
MV*
Friday 20 September 13

30.
MV*“Declarative programming should
be used for building UIs and
wiring software components.
Imperative programming is
excellent for expressing business
logic.”
Friday 20 September 13

31.
MV*“Unlike other frameworks, there
is no need to inherit from
proprietary types; to wrap the
model in accessors methods.
Just plain old JavaScript here.”
Friday 20 September 13

32.
MV*Models
{
! description: "Woolworths HB",
! date: new Date(2013,8,19),
! amount: -566
}
Friday 20 September 13

33.
MV*Routing
$routeProvider.when('/txns',
{
controller:TxnCtrl,
templateUrl:'txns.html'
}
);
Friday 20 September 13

34.
MV*Controllers
function TxnCtrl($scope) {
! $scope.txns= [
! ! {
! ! ! description: "Woolworths"
! ! },
! ! {
! ! ! description: "Spar"
! ! }!!
! ]
}
Friday 20 September 13

35.
MV*Angular views
<div ng-repeat="txn in txns">
{{ txn.description }}
</div>
Friday 20 September 13

36.
MV*Directives
A directive allows you to extend
the HTML vocabulary in a
declarative fashion.
Friday 20 September 13

37.
MV*Directives in action
<section id="main"
ng-show="txns.length"
ng-cloak>
Friday 20 September 13

38.
MV*Not only attributes
<transaction
! description="{{desc}}"
! amount="{{amount}}" />
Friday 20 September 13

39.
MV*Filters
<li ng-repeat="txn in txns">
{{txn|roundDown|formatWithZeroes}}
</li>
Friday 20 September 13

40.
MV*Injection
function TxnCtrl($scope, $location)
{
return $location.path("/logon" );
}
Friday 20 September 13

41.
MV*Doesn’t work
$.get('http://url.co',function(t){
! $scope.transaction = t;
});
Friday 20 September 13

42.
MV*This works
function TxnCtrl($scope, $http){
! $http.get('http://url.co')
.success(function(t){
! ! $scope.transaction = t;
! });
}
Friday 20 September 13

43.
MV*This also works
$.get('http://url.co',function(t){
! $scope.$apply(function () {
! ! $scope.transaction = t;
! });
});
Friday 20 September 13

44.
MV*
Friday 20 September 13

45.
MV*Remember, it’s
all about you.
Friday 20 September 13

46.
MV*
Friday 20 September 13

47.
MV*
Friday 20 September 13

48.
MV*
Friday 20 September 13

49.
MV*
hendrik.swanepoel@gmail.com
fluit fluit my storie is uit.
Friday 20 September 13