JS MV* – Javascript framework speed dating – Knockout.

View Github Repository Open presentation in a new window

skinofstars

See all presentation from skinofstars

JS MV* – Javascript framework speed dating – Knockout.

1 0

jsmvc

Couple of basic examples of JS MV*

On Github skinofstars / jsmvc

JS MV*

Javascript framework speed dating

What I'm looking for in a framework

  • Capabilities
  • Flexible/Opinionated
  • Documentation
  • Community
  • Track Record

Something simple!

  • Get json feed to consume
  • Display on page

Like this

<p>Your browser does not support iframes.</p>

Knockout.

Knockout. HTML

    <h1 data-bind="text: title">Page Title</h1>

    <ul data-bind="foreach: entries">
        <li>
            <p data-bind="text: headline">Item</p>
        </li>
    </ul>

Knockout. JS

    $(document).ready(function(){
        var binding = ko.applyBindings(new NewsView());
    });

    function NewsView(){
        var self = this;
        self.title = ko.observable();
        self.entries = ko.observableArray([]);

        var newsUrl = "http://cdnedge.bbc.co.uk/nol/ukfs_news/hi/front_page/ticker.json";
        $.getJSON(newsUrl).then(function(data){
            self.title(data.name);

            $.each(data.entries, function(i,entry){
                self.entries.push(entry);
            });
        });
    }

I feel like...

  • Powerful publisher/subscriber
  • Neat templating
  • Un-opinionated - Easy to drop in
  • Lack of conventions
  • Documentation isn't too bad

  • Unproven? Though comes from ASP world

Knockout example page

Backbone.js

Backbone.js HTML

    <div class="container" id="main">
        <h1 id="title">Title</h1>
        <ul id="entries">
            <li></li>
        </ul>
    </div>

Backbone.js HTML

or maybe something like this?

    <script type="text/template" id="decorator_template">
        <h1><%= decoratorContent.title %></h1>
    </script>

    <ul id="entries">
    </ul>

    <script type="text/template" id="entry_template">
        <li><%= entry.headline %></li>
    </script>

Backbone.js JS - Models

    var DecoratorContent = Backbone.Model.extend({
        defaults: {
            title: 'Default page title'
        }
    });

    var Entry = Backbone.Model.extend({
        defaults: {
            headline: 'Default model headline'
        }
    });

    var Entries = Backbone.Collection.extend({
        model: Entry
    });

Backbone.js JS - View: Initialize

    var NewsView = Backbone.View.extend({
        el: $('body'),

        initialize: function(){
            _.bindAll(this, 'render', 'appendEntry');

            var self = this;
            this.collection = new Entries();
            this.decoratorContent = new DecoratorContent();

            var newsUrl = "http://cdnedge.bbc.co.uk/nol/ukfs_news/hi/front_page/ticker.json";

            $.getJSON(newsUrl).then(function(data){
                self.decoratorContent.set({'title': data.name});

                _(data.entries).each(function(item){
                    var entry = new Entry();
                    entry.set({
                        headline: item.headline
                    });
                    self.collection.add(entry);
                });

                self.render();
            });
        },

... it goes on!

Backbone.js JS - View: Render 

        render: function(){
            $('h1#title', this.el).text(this.decoratorContent.get('title'));

            models = this.collection.models;

            _.each(models, function(item){
                this.appendEntry(item);
            }, this);
        },

        appendEntry: function(item){
            $('ul#entries', this.el).append("<li>"+ item.get('headline') +"</li>");
        }
    });

Backbone.js JS - Finally 

    $(document).ready(function(){
        var newsView = new NewsView();
    });

I feel like...

  • Verbose - steep learning curve
  • Templating through jQuery
  • Opinionated
  • Well supported and widely used
  • ... and I'm probably not doing it right

Backbone example page

AngularJS

AngularJS HTML

    <html ng-app="News">
                        
    <div ng-controller="NewsCtrl">
        <h1>News Title</h1>
        <ul>
            <li ng-repeat="entry in items">
                <p>{{entry.text}}</p>
            </li>
        </ul>
    </div>

AngularJS JS

    angular.module("News", ['ngResource']);
    // can't actually use ngResource in this app :(

    function NewsCtrl($scope, $resource){
        $scope.title = '';
        $scope.items = [{
            text: 'basic item'
        }];

        var newsUrl = "http://cdnedge.bbc.co.uk/nol/ukfs_news/hi/front_page/ticker.json";

        $.getJSON(newsUrl).then(function(data){
            $scope.title = data.name;
            $.each(data.entries, function(i,entry){
                // use $apply as $.getJSON is out of scope
                $scope.$apply(function(){
                    $scope.items.push({
                        text: entry.headline
                    });
                });
            });
        });
    }

I feel like...

  • Strong HTML integration
  • Convention over configuration
  • Young, but supported by Google (..like DART)
  • Documentation is shallow

Angular example page

Also worth looking at...

  • Spine - light, backbony, for mobiles.
  • Sammy.js - small, modular and structured.
  • Ember - larger, templating and web compontents.
  • .... TodoMVC - for a many frameworks in action

Thanks!