The Problem Solver

The game is on. The competition is open. It's time for FrameRate Fest 2012. Internet Explorer 9 challenges you to play yourself to the front line of HTML5.
 
In this creative competition it's all about building an awesome HTML5 frame. In this year's edition there is an extra challenge: create a small but nice, awesome or freaky game component in your frame. Your ultimate chance to gain fame.
 
Cause we've got a worldwide scoop: a developers Kinect code in combination with your HTML5 game. And you'll be the first one to explore this technique. You like this WOW? You'd better start NOW. Subscribe yourself and let the Frames begin.

Enjoy!

TheProblemSolver
DotNetEvents

In deze, tijdens de TechDays opgenomen, podcast spreekt Maurice de Beijer met Steve Sanderson over de toekomst van web development met de moderne browsers. Ze spreken ondermeer over Knockout.js, een JavaScript library die MVVM stijl databinding mogelijk maakt binnen HTML/JavaScript applicaties.

Je kan de podcast hier beluisteren.

Enjoy!

TheProblemSolver
DotNetEvents

Several people asked about getting the slides and samples from my HTML5 & REST talk at the TechDays 2012 conference in the Netherlands. You can download the slides and the sample if you like.

Enjoy!

TheProblemSolver
DotNetEvents

Several people asked about getting the slides and samples from my HTML5 talk at the TechDays conference in the Netherlands. You can download the slides and the sample if you like.

Enjoy!

TheProblemSolver
DotNetEvents

In the previous two blog posts about getting started with Knockout.js and controlling updates using Knockout.js I showed to to get started with the awesome Knockout.js library. In this post I am going to show how easy it is to load a collection of items from a REST service and data bind to the complete collection.

To data bind to collections of data Knockout supports the foreach data binding. This lets us point at a collection of data and create a new item for each object in the collection. In the example below I am using an html <table> to display a list of books. The <tbody> has the data binding attribute so its contents are going to be repeated for each item in the collection being used, books in this case.

<table border="1">

    <thead>

        <tr>

            <th>

                Title

            </th>

            <th>

                Author

            </th>

        </tr>

    </thead>

    <tbody data-bind="foreach: books">

        <tr>

            <td data-bind="text: title">

                This will be the title

            </td>

            <td data-bind="text: author">

                This will be the author

            </td>

        </tr>

    </tbody>

</table>

So this looks, and is, very much like a data template but a little different. Normally when using JavaScript templates the actual template is stored as a string somewhere, often in a script block, and you don’t get to see anything until you actually use it. However in this case it is just HTML and without Knockout.js will be rendered as regular HTML. So if we just render this as is we get the following output in the browser.

Nice as this makes debugging the data template layout a lot easier.

Next we need to create a ViewModel and use Knockout to data bind it.

The basic ViewModel we need is really simple, all it needs to expose is a books array. To make sure the UI is updated with changes we don’t use a simple array but an observableArray as shown below. And if we call applyBindings() the data binding will be activated.

$(function () {

    var viewModel = {};

    viewModel.books = ko.observableArray();

    ko.applyBindings(viewModel);

});

With this data binding is functional but we don’t have any data to display yet. As expected this results in an empty array. Notice the data template row is gone now.

Adding some data is easy. I have included a WCF Web API REST service here and the jQuery.getJSON() function makes it rather easy to consume the REST service with a few lines of code. In this case I am using the jQuery.each() function to process each object returned and I turn them into objects with observable properties, not strictly required here, and push them into the books observable array. This last push will cause the UI to update itself because of the data binding. The complete JavaScript code looks like this:

$(function () {

    var viewModel = {};

    viewModel.books = ko.observableArray();

    ko.applyBindings(viewModel);

    $.getJSON("/services/books").then(function (books) {

        $.each(books, function () {

            viewModel.books.push({

                title: ko.observable(this.Title),

                author: ko.observable(this.Author)

            });

        });

    });

});

And the end result:

Sweet

Enjoy!

TheProblemSolver
DotNetEvents

In deze podcast spreekt Maurice de Beijer met Roland Guijt over de moderne manier van het ontwikkelen van web applicaties. Roland verteld over het gebruik van Knockout.js voor de data binding van data aan de HTML elementen on de browser. Verder verteld hij waar hij jQuery allemaal gebruikt en geeft hij diverse tips over het ontwikkelen van single page web applicaties.

De podcast is hier te downloaden.

Voor het gemak kan je natuurlijk ook een RSS feed, iTunes of Zune link gebruiken.

Enjoy!

TheProblemSolver
DotNetEvents

People have been wondering for a while what the future of WF3 was since the release of WF4. So far both workflow stacks have coexisted in .NET 4 and there has been no official statement about the future of the older WF3 stack.

That has just changed!

The workflow team at Microsoft has just announced that they are marking the WF3 stack as deprecated with the next release of the .NET framework, .NET 4.5.

Of course the types are still there but you will get compile time  warnings for using them and you can expect the classes to be dropped some time in the future.

“Warning BC40000: X is obsolete: ‘WF 3 types are deprecated. Please use WF 4 instead.’”

So if you are sill using WF3 this is a good moment to invest the time and start learning Wf4.

You can read the official announcement here.

Enjoy!

TheProblemSolver
DotNetEvents

In the previous blog post about Knockout.js I showed why and how to get started with Knockout.js. And I explained that the reason I really like Knockout.js is that it is a very familiar way of working with its MVVM style.

I created a small demo where we could update the first and last name of a person and the ViewModel would combine the two and display the concatenated parts as the complete name. This worked just fine as soon as I started using observables except for one thing. Whenever I start typing the full name isn’t updated until the <input> control losses focus.

Quite often this will be good enough as the resulting value isn’t used right away but there are cases, like here, where it is and we want more frequent updates.

The value binding

As it turns out the value data binding has an additional option, the valueUpdate, that controls when the value, and therefor the computed observable full name is updated. By adding that to the data-bind expression we can get real time updates. There are several options but for these real time scenarios using the value of afterkeydown works best.

The markup now looks like this:

<fieldset>

    <legend>Enter person</legend>

    <p>

        First name:

        <input type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown'" />

    </p>

    <p>

        last name:

        <input type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown'" />

    </p>

    <p>

        Full name: <span data-bind="text: fullName"></span>

    </p>

</fieldset>

The JavaScript is unchanged and looks like this:

$(function () {

    var viewModel = {};

    viewModel.firstName = ko.observable("Maurice");

    viewModel.lastName = ko.observable("de Beijer");

    viewModel.fullName = ko.computed(function () {

        return viewModel.firstName() + " " + viewModel.lastName();

    });

    ko.applyBindings(viewModel);

});

With this change the full name is updated with each character entered.

Sweet

Enjoy!

TheProblemSolver
DotNetEvents

Once you get into doing more client side JavaScript code with business applications and REST services you are going to run into the question of how to construct the client side HTML required to show the data to the users.

Using jQuery

Assuming most people are going to be using jQuery on the client you might start with some jQuery code to generate HTML.

Your code might look something like this

$(function () {

    $("#btn").click(function () {

        $.getJSON("/services/books").then(function (books) {

            $.each(books, function () {

                $("<li>").text(this.Title + " by " + this.Author).appendTo("#books");

            });

        });

    });

});

The code isn’t very complicated but then we are only showing a simple bit of text. And in all likelihood the actual HTML that needs to be generated will be quite a bit more complex. And the code increases as least as much, but often much more, in complexity.

Using templates

The next step people tend to take is using templates. There are lots of different templating libraries out there with more coming but in this example I am using the JavaScript Micro-Templating function John Resig wrote. If you are looking for others take a look at Underscore.js or JsRender/JsViews (still in preview at the moment). Specially Underscore.js is a nice library to look at because all the additional functions in there.

Using templates we separate the code from the template to generate the required HTML. The code is easier to understand.

$(function () {

    $("#btn").click(function () {

        $.getJSON("/services/books").then(function (books) {

            var html = tmpl("books_tmpl", { books: books });

            $("#books").html(html);

        });

    });

});

However this comes at a cost as we also need a template and that is a mixture of markup and expressions. The expressions syntax varies depending on the templating engine, in this case it’s <%= JavaScript Expression %>. Not hard to use but it is another bit of executing code that has to be maintained.

<script type="text/html" id="books_tmpl">

  <% for ( var i = 0; i < books.length; i++ ) { 

    var book = books[i];%>

    <li><a href="/services/books/<%=book.Id%>"><%=book.Title%> by <%=book.Author%></a></li>

  <% } %>

</script>

Using Knockout.js

As soon as we start using Knockout.js this become somewhat more like Silverlight/WPF. Not that it is exactly the same but it uses the same MVVM pattern and data binding that Silverlight developers are used to. Something I really like . Now Knockout.js is my no means the only way to do this, just as with templates there are plenty of other options like Backbone or JavaScriptMVC for example. See this blog post for a longer list of alternatives.

Personally I really like the MVVM and binding style Knockout.js uses.

Instead of splitting the HTML into a static and a dynamically generated part with Knockout.js you embed data binding expressions in your HTML. Notice the data-bind attributes in the following HTML snippet. They indicate data binding syntax. The first two data bind the value property of the <input> control to the firstName and lastName from the ViewModel. The third data binds the text in the <span> against the fullName of the ViewModel.

<fieldset>

    <legend>Enter person</legend>

    <p>

        First name:

        <input type="text" data-bind="value: firstName" />

    </p>

    <p>

        last name:

        <input type="text" data-bind="value: lastName" />

    </p>

    <p>

        Full name: <span data-bind="text: fullName"></span>

    </p>

</fieldset>

So what does the view model look like? It can be a real simple JavaScript object. In fact the following would work. It would be less than perfect thou and we can do better.

var viewModel = {

    firstName: "Maurice",

    lastName: "de Beijer",

    fullName: "Maurice de Beijer"

};

A better way is to use the Knockout functionality and define the data fields using observables. By using Observables we can observer changes being made. And by defining the fullName as a computed observable we can have the <span> with the fullName dynamically update. A much better ViewModel:

var viewModel = {};

viewModel.firstName = ko.observable("Maurice");

viewModel.lastName = ko.observable("de Beijer");

viewModel.fullName = ko.computed(function () {

    return viewModel.firstName() + " " + viewModel.lastName();

});

Of course we still need to tell Knockout to use the ViewModel and that takes all of one line:

ko.applyBindings(viewModel);

So the complete JavaScript in my page is now:

$(function () {

    var viewModel = {};

    viewModel.firstName = ko.observable("Maurice");

    viewModel.lastName = ko.observable("de Beijer");

    viewModel.fullName = ko.computed(function () {

        return viewModel.firstName() + " " + viewModel.lastName();

    });

    ko.applyBindings(viewModel);

});

And the nice thing is that updating the first name automatically updates the fullName

This is just the first baby steps using Knockout.js as it is far more capable than just this. In fact we can data bind against arrays of data and create nice list etc. The Knockout.js site has some nice tutorials that will help you get started.

Enjoy!

TheProblemSolver
DotNetEvents