The Problem Solver : HTML5

Using repeating elements in AngularJS

Maurice — Fri, 10 May 2013 19:30:15 GMT

Index:

In the previous posts I showed how to get started with AngularJS and use some of the basic AngularJS directives to data bind. In these examples I uses a really simple single element to bind to. However in lots of business cases you really need to display a list of repeating elements. Fortunately this is really easy to do.

The AngularJS ng-repeat directive

Whenever you need to repeat a specific block of HTML markup for each item in an array the ng-repeat directive is your friend. Take a look at the simple list of people below.

The data for this list is contained in an array that is added to the $scope object in the controller. The actual controller is real simple, see the code below.

   1: function DemoCtrl($scope) {

2:

   3:     $scope.people = [

   4:         { firstName: 'Maurice', lastName: 'de Beijer' },

   5:         { firstName: 'Jacob', lastName: 'Smith' },

   6:         { firstName: 'Sophia', lastName: 'Brown' },

   7:         { firstName: 'Mason', lastName: 'Lee' },

   8:         { firstName: 'Emma', lastName: 'Wilson' },

   9:         { firstName: 'Ethan', lastName: 'Martin' },

  10:         { firstName: 'Emily', lastName: 'Taylor' },

  11:         { firstName: 'Wiliam', lastName: 'Wong' },

  12:         { firstName: 'Emily', lastName: 'Campbell' },

  13:         { firstName: 'Liam', lastName: 'Williams' }

  14:     ];

  15: }

The markup to generate the list in the screenshot is also real simple:

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     <div ng-repeat="person in people">

   9:         {{person.firstName}} {{person.lastName}}

  10:     </div>

11:

  12:     <script src="Scripts/angular.js"></script>   1:  
   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  13: </body>

  14: </html>

The DIV element containing the ng-repeat, and everything inside it, is simply repeated for every person in the array of people. Simple right :-)

Editing the people

Editing the people in the list is really easy, just add an input control and use the same ng-model directive as before.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     <div ng-repeat="person in people">

   9:         <input type="text" ng-model="person.firstName"/>

  10:         {{person.firstName}} {{person.lastName}}

  11:     </div>

12:

  13:     <script src="Scripts/angular.js"></script>   1:  
   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  14: </body>

  15: </html>

In the screenshot below I am changing Jacob to Bob and as I type in the input element the text behind it is updated immediately.

Enjoy :-)

The AngularJS $scope is not the MVC Model

Maurice — Mon, 15 Apr 2013 17:39:00 GMT

Index:

In the previous post I showed how to create and use an MVC Controller in AngularJS to manage the logic of an application. In this post I showed how to use the $scope variable that is passed into the Controller to share data between the Controller and the View. This may lead you to believe that the $scope is the MVC Model used but you would be completely wrong.

The $scope is not the MVC Model

There is a common believe that the $scope object in AngularJS is the MVC Model, or ViewModel, but that is wrong. In fact the $scope is just the glue object that should be used to share things between the controller and the view. Now that sounds awfully like a model but it isn’t. In fact you will see a lot of people do just that and as a result report bugs like this one. In fact this isn’t a bug and it works as designed. The correct way is to add the model as a property to the @scope instead so the controller and the view can share it.

So what is the problem with treating the $scope as the Model?

The biggest problem is in the way AngularJS works with it’s scopes. There usually isn’t just a single scope but a collection of nested scopes. And these nested scopes are linked together through the JavaScript prototype chain. This means that as long as you only read properties JavaScript will search up the chain of prototypes. However as soon as you write to what feels the same property you actually create a new one on the scope you are writing to. The net result is you now have two different but identically named properties on different linked scopes. And this means your application might just behave in an unexpected way as with the “bug” mentioned above.

The correct way of working with $scope objects

It turns out the correct way of working with scope is pretty easy.

Treat $scope as read-only in views

Treat $scope as write-only in controllers

Or an even simpler rule:

An ng-model directive should always contain a “.” so it updates a property on the model which is on the scope and not a property on the scope directly. If you don’t have a “.” in your ng-model you are doing it wrong!

But don’t just take my word for it. Take a good look at this video from Miško Hevery starting at about 0:29. BTW the rest of this video is highly recommended as well.

Fixing our calculator controller and view

With this knowledge is it easy to see that the controller and view from the previous post are actually wrong as the view is writing directly to the $scope x and y properties. In fact the only reason this appeared to work is that the example was so simple that no nested scopes where created. Still lets do the proper thing and fix the example.

The corrected view is now:

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app ng-controller="DemoCtrl">

   8:         <input type="text" ng-model="model.x"/>

   9:         {{model.operator}}

  10:         <input type="text" ng-model="model.y"/>

11:

  12:         <button ng-click="add()">+</button>

  13:         <button ng-click="multiply()">*</button>

14:

  15:         = {{model.result}}

16:

  17:         <script src="Scripts/angular.js"></script>   1:  

   2:         <script src="App/Controllers/DemoCtrl.js">
</script>

  18:     </body>

  19: </html>

And the corrected controller now is as follows.

   1: function DemoCtrl($scope) {

   2:     $scope.model = {

   3:         x: 2,

   4:         y: 3,

   5:         result : "?",

   6:         operator : "?"

   7:         };

8:

   9:     $scope.multiply = function () {

  10:         $scope.model.operator = "*";

  11:         $scope.model.result = (+$scope.model.x) * (+$scope.model.y);

  12:     };

13:

  14:     $scope.add = function () {

  15:         $scope.model.operator = "+";

  16:         $scope.model.result = (+$scope.model.x) + (+$scope.model.y);

  17:     };

  18: }

Maybe not a big change but important to get right.

Enjoy!

Creating an AngularJS Controller

Maurice — Wed, 10 Apr 2013 13:05:00 GMT

Index:

In the previous blog post I showed how to get started with a really minimal AngularJS application. Even though the app could multiply two numbers it could hardly be called useful and as it turns out that is about as much as I could do with it.

Model View Controller

AngularJS is an MVC framework. So far we have only seen the View part as the HTML used was the view used to render the page to the user. As the name suggest there should be more in the form of a Controller and a Model.

The Controller part of an MVC application is normally the glue that ties a specific part of that application together. It gathers the data (Model) together and tells the View to render the data to the user. It also responds to events to do things.

Suppose we want to expand on the simple page from the previous post and turn this into a simple calculator, like in the screenshot below, the controller would be responsible for the calculations and the view would just be about displaying the data and not, like with the previous example, contain the actual calculation.

The AngularJS Controller

The controller that drives the logic of the application is a pretty simple JavaScript constructor function. As this is used with the new keyword to create an object I have capitalized the first letter as is the convention in JavaScript.

   1: function DemoCtrl($scope) {

   2:     $scope.x = 2;

   3:     $scope.y = 3;

   4:     $scope.result = "?";

   5:     $scope.operator = "?";

6:

   7:     $scope.multiply = function() {

   8:         $scope.operator = "*";

   9:         $scope.result = (+$scope.x) * (+$scope.y);

  10:     };

11:

  12:     $scope.add = function () {

  13:         $scope.operator = "+";

  14:         $scope.result = (+$scope.x) + (+$scope.y);

  15:     };

  16: }

The code basically consists of the X and Y value to be used in the calculation, two functions for adding and multiplying and a way to show the result and operator used. Adding two more functions for divide and subtract should be a simple enough exercise. The code is simple enough and pretty standard JavaScript. For those not used to JavaScript the (+$scope.x) expression is one of the ways you can convert a string to a number in JavaScript.

One special AngularJS thing is the $scope variable passed into the function and used.

What is the $scope?

The $scope variable is inserted automatically by AngularJS and serves as the bridge to share data between the controller and the view. Each variable added to the $scope is automatically be available for use in view data binding expressions. In fact there is always a scope, in the example from the previous the values where still stored in an AngularJS scope even though no controller was used.

The way AngularJS knows what to pass to the controller function is determined by the name. Just because we named it $scope AngularJS knows what to pass. This is done by a mechanism called dependency injection which is a very powerful mechanism used to separate different parts of the application and wire them up automatically at runtime while allowing us to pass in dummy services for testing purposes.

The AngularJS View

The view used is similar to the example from the previous blog post.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app ng-controller="DemoCtrl">

   8:         <input type="text" ng-model="x"/>

   9:         {{operator}}

  10:         <input type="text" ng-model="y"/>

11:

  12:         <button ng-click="add()">+</button>

  13:         <button ng-click="multiply()">*</button>

14:

  15:         = {{result}}

16:

  17:         <script src="Scripts/angular.js"></script>   1:  

   2:         <script src="App/Controllers/DemoCtrl.js">
</script>

  18:     </body>

  19: </html>

New is the ng-controller attribute that tells AngularJS to create the controller and what part of the HTML view it controls. In the view we don’t have to use the $scope variable, every expression is always evaluated scoped to the current $scope.

Testing the controller

One of the reasons for using an MVC framework is the capability to test the code. As the controller has no requirements for testing it should be easy enough to test it. Below is a test for adding two numbers using QUnit.

   1: test("Test adding 3 + 7", function () {

   2:     // Arrange

   3:     var scope = {};

   4:     var ctrl = new DemoCtrl(scope);

   5:     scope.x = "3";

   6:     scope.y = "7";

7:

   8:     // Act

   9:     scope.add();

10:

  11:     // Assert

  12:     ok(scope.operator === "+", "The operator should be +");

  13:     ok(scope.result === 10, "3 + 7 should be 10");

  14: });

Enjoy!

Getting started with AngularJS

Maurice — Fri, 05 Apr 2013 17:50:00 GMT

Index:

One of the nicer JavaScript frameworks out there to work with must be AngularJS. Now there are quite a few other ones out there and I have used a number of them but AngularJS seems to be the most structured of them. And while it is really powerful it is also really easy to get started with.

AngularJS is a client side framework for creating rich web applications using JavaScript and HTML. It isn’t just a library like jQuery or Knockout.js where you create the structure and call into the library as you see fit. With a framework like AngularJS it is the other way round and it calls into your code. This means you have to like the way it is designed but fortunately AngularJS is pretty flexible so that is not a big penalty to pay. In fact it is more of a benefit as it helps structure your application in a good way.

The simplest AngularJS application

Below is pretty much the simplest AngularJS application you can make. Maybe not very functional yet but is shows a few of the very important parts.

So what does it get to display a “2” on the screen? Well first of all the “2” isn’t a literal but actually a result of adding 1 + 1 together on the client. So this is already a “somewhat” dynamic HTML/JavaScript application. The complete code listing is below.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app>

   8:         {{1 + 1}}

   9:         <script src="Scripts/angular.js"></script>

  10:     </body>

  11: </html>

There are a few interesting things to note about this.

First of all there is the required script reference to angular.js. Either download this from the AngularJS site or use the NuGet package to add it to your Visual Studio 2012 project. No big new thing here.

Unlike with libraries like jQuery which we load using a similar script tag and then call the jQuery $() function whenever we want to things work a little different with AngularJS. In the case of a framework like AngularJS we let it do it’s work. With AngularJS we need to either do an automatic bootstrap or do so manually. The automatic process is by far the easiest and all we need to add for that is the ng-app attribute to some HTML element. In this case I added it to the <body> element so the whole page is an AngularJS application. If you prefer you can add it to a sub section of the page.

The last interesting part if the {{1 + 1}} part inside the body. The {{}} part is a data binding expression AngularJS will evaluate for us and display the result. In this case we are just adding two numbers but as we will see later we can do far more with this.

Making things interactive

The previous example is nice but I could just as well have hardcoded the value “2” in there. So lets make things a bit more interactive and have the user enter two numbers we can multiply.

The complete code needed for this is not much harder see below.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app>

   8:         <input type="text" ng-model="x"/>

   9:         *

  10:         <input type="text" ng-model="y"/>

  11:         = {{x * y}}

  12:         <script src="Scripts/angular.js"></script>

  13:     </body>

  14: </html>

The new thing in this example is that we have two <input> controls with an ng-model attribute. These ng-model attributes are used for two way data binding input controls with data used by AngularJS. In the expression below {{x * y}} we multiply the two numbers added. And with this interactive calculator we still had to write no JavaScript, the closest we came to writing code is a single data binding expression in the HTML.

Sweet :-)

SignalR and camelCase data contracts

Maurice — Thu, 14 Mar 2013 20:09:40 GMT

I really like SignalR for its capability to do push notifications from the server to the client. But there are a few thing in SignalR I am not quite happy with. Fortunately SignalR is really pluggable and you can change it to suit your needs. :-)

PascalCase versus camelCase

One thing I am not really happy about is the fact that all data is send over the wire with a request as is. And with SignalR the server tends to be C# where the convention is to have methods and properties in PascalCase. The client side however is JavaScript where the usual convention is to have methods and properties in camelCase.

With functions defined on a SignalR Hub this is no problem. SignalR does the right thing and converts them from the server side PascalCase to the client side camelCase so everyone is happy.

However with the data passed as arguments this is not the case and they are passed as is. It turns out SignalR is using JSON.NET which is a really powerful JSON serializer that can do just that. All you need to do is start using the CamelCasePropertyNamesContractResolver and Bob is your uncle. Or is he?

Unfortunately things aren’t that simple. It turns out just using CamelCasePropertyNamesContractResolver will break the internal SignalR data contracts and that is not a good thing. But with a bit of help we can still get this to work.

The SignalRContractResolver that makes things work

The solution is the SignalRContractResolver found here.

public class SignalRContractResolver : IContractResolver

    private readonly Assembly _assembly;

    private readonly IContractResolver _camelCaseContractResolver;

    private readonly IContractResolver _defaultContractSerializer;

    public SignalRContractResolver()

        _defaultContractSerializer = new DefaultContractResolver();

        _camelCaseContractResolver = new CamelCasePropertyNamesContractResolver();

        _assembly = typeof(Connection).Assembly;

    public JsonContract ResolveContract(Type type)

        if (type.Assembly.Equals(_assembly))

            return _defaultContractSerializer.ResolveContract(type);

        return _camelCaseContractResolver.ResolveContract(type);

With this contract resolver the SignalR types are send as is and all your custom types are send using the camelCase properties the JavaScript client code is used to. Sweet right :-)

With the SignalRContractResolver in place all we need to do is register it with SignalR. Below is the code I use to do that.

public static void RegisterHubs()

    var serializerSettings = new JsonSerializerSettings

        ContractResolver = new SignalRContractResolver()

};

    var jsonNetSerializer = new JsonNetSerializer(serializerSettings);

    GlobalHost.DependencyResolver.Register(typeof (IJsonSerializer), () => jsonNetSerializer);

    RouteTable.Routes.MapHubs();

Enjoy!

Using optimistic concurrency with RavenDB

Maurice — Wed, 30 Jan 2013 14:46:55 GMT

Whatever database your are using, relational or document, there is one thing you can be certain of as soon as you get a second user of the system and that is concurrency conflicts. It may not happen often but eventually it will happen that two users load the same document, make some changes to it and save it back to the database.

There are several ways of dealing with these kind of concurrency problems:

Just ignoring it and letting the second users changes overwrite the first ones
While this isn’t advisable if the data is very important there are lots of cases where it could be an okay solution. Sure it offends the developer in us, as it should, because we are ignoring error situations. But for an end user it might not be that bad at all, specially considering that this is a really cheap option to build and the changes of it occurring are quite low. Just make sure to check with your stakeholder of this is acceptable.
Using pessimistic locking of data
This option worked quite well in the old days where a client app had a stateful connection to the database. These days that is usually not the case and with web applications that is completely impossible due to the stateless nature of the web. So this one is out.
Using optimistic concurrency
This basically means we remember the version of a document loaded and pass that along when we save the document. In SQL Server this is typically done using a rowversion. With document database we tend to interact with the database over an HTTP connection and turns out the HTTP protocol has an optimistic concurrency mechanism in the form of E-TAG’s. RavenDB can use these HTTP E-TAG’s to do optimistic concurrency checks for us.

Ignoring concurrency issues

This is the easy one and exactly what we get if we use RavenDB as is.

Consider the following code:

static void Main(string[] args)

    _store = new DocumentStore

        Url = "http://localhost:8081/"

};

    using (_store)

        _store.Initialize();

        var id = CreateInitialDocument();

        var resetEvent = new ManualResetEvent(false);

        var tasks = new List<Task>();

        for (int i = 0; i < 2; i++)

            tasks.Add(Task.Factory.StartNew(() =>

                SimpleUpdateDocument(id, resetEvent)));

        Thread.Sleep(1000);

        resetEvent.Set();

        Task.WaitAll(tasks.ToArray());

        Console.WriteLine();

        Console.WriteLine("The result id:");

        using (var session = _store.OpenSession())

            var theData = session.Load<TheData>(id);

            Console.WriteLine(theData.Data);

As you can see the code creates a new document and updates that same document in multiple threads. Then it reads it back in a prints the result.

A simple implementation of updating might look something like this:

private static void SimpleUpdateDocument(string id, ManualResetEvent resetEvent)

    using (var session = _store.OpenSession())

        var theData = session.Load<TheData>(id);

        resetEvent.WaitOne();

        theData.Data = string.Format("Updated on thread: '{0}'", Thread.CurrentThread.ManagedThreadId);

        Console.WriteLine(theData.Data);

        session.SaveChanges();

Basicaly we load the document, wait for each thread to have the document loaded, update it and save it back to the database. Clearly a concurrency problem arises because the last thread to save the document will try to save its changes and overwrite the others changes.

If we run the code we will see the following output. It appears that there was no error and the changes made in thread 5 where the ones that where ultimately saved.

Looking at the RavenDB server window you will see all interactions. Basically two post operations to save the same document right after each other.

Maybe this is good enough for your case and then again maybe not.

Using optimistic concurrency

Switching to optimistic concurrency is quite easy. All we need to do is set the UseOptimisticConcurrency property on the Advanced object of the session to true. As soon as we do this the second update, the one that would inadvertently overwrite the first one, will result in a HTTP Error 409 – Conflict. This is the result of RavenDB checking for changes using the E-TAG send with each record. If a HTTP Error 409 – Conflict is detected this surfaces in the C# code as a ConcurrencyException. By catching this ConcurrencyException we can decide what to do.

private static void ConcurantUpdateDocument(string id, ManualResetEvent resetEvent)

    using (var session = _store.OpenSession())

try

            session.Advanced.UseOptimisticConcurrency = true;

            var theData = session.Load<TheData>(id);

            resetEvent.WaitOne();

            theData.Data = string.Format("Updated on thread: '{0}'", Thread.CurrentThread.ManagedThreadId);

            Console.WriteLine(theData.Data);

            session.SaveChanges();

        catch (ConcurrencyException ex)

            Console.WriteLine(ex.Message);

            Console.WriteLine("\tExpectedETag: {0}", ex.ExpectedETag);

            Console.WriteLine("\tActualETag:   {0}", ex.ActualETag);

using this new version of the update method we will guard against concurrency issues.

If we run the code now we will see the following output:

And the RavenDB sever will also clearly show the problem.

Conclusion

Concurrency handling in RavenDB is nice and simple. By default we just get the simple last user wins behavior. This may or may not be appropriate for your situation but is easy as it requires no additional code. If you want concurrency checking all you need to do is set the UseOptimisticConcurrency property on the session to true and that session will be checked.

Nice and simple.

Enjoy!

Paging through data in RavenDB

Maurice — Mon, 28 Jan 2013 19:52:58 GMT

RavenDB has a very nice feature in it being safe by default and returns just 128 documents. Now you can override these safe defaults but it is very unwise to do so. And even if you decide to do so are you really going to show a million customers to your user at the same time? I would guess not as the user would not be really happy with the response or the speed of it. In most cases using paging is a much better solution.

Paging through a RavenDB result set

It turns out that paging through a result set is really easy. Normally all you need to do is use the Skip() and Take() methods and filter the result set that way. Pretty easy right?

And suppose you want to display the total number of documents or pages to the user? No need to do a separate count. The RavenDB Query() function returns an IRavenQueryable instead of a plain IQueryable object. And this IRavenQueryable gives you two extra methods one of which is Statistics() with has an out argument of type RavenQueryStatistics.

This RavenQueryStatistics is interesting because it has a TotalResults property telling us how many results are returned from the query itself. There is a second useful property for paging, SkippedResults, which is needed in some cases where RavenDB will filter out duplicate results. See here for more information on when you need to use the SkippedResults property.

Paging in an ASP.NET MVC page

The following controller action lets us page though a large set of people with a page size.

public ActionResult Index(int pageNr = 1)

     const int pageSize = 10;

     RavenQueryStatistics stats;

     using (var session = Global.DocumentStore.OpenSession())

         var people = session.Query<Person>()

                                  .Statistics(out stats)

                                  .OrderBy(p => p.FirstName)

                                  .Skip((pageNr - 1) * pageSize)

                                  .Take(pageSize)

                                  .ToArray();

         ViewBag.PageNr = pageNr;

         ViewBag.PageCount = Math.Ceiling((double)stats.TotalResults / pageSize);

         return View(people);

And this is the related Razor view

@model IEnumerable<MvcApplication1.Models.Person>

@{

    ViewBag.Title = "People";

<h2>People</h2>

<h3>Page @ViewBag.PageNr of @ViewBag.PageCount</h3>

<ol>

    @foreach (var item in Model)

        <li>

            @Html.DisplayFor(modelItem => item.FirstName)

            @Html.DisplayFor(modelItem => item.LastName)

        </li>

</ol>

<a href="?pageNr=@(ViewBag.PageNr + 1)">Next</a>

Nice and simple, just the way I like it.

PS. Don’t like clicking on the next button button to load more data? Neither do I. One jQuery plugin that helps me there is infinite-scroll created by Paul Irish.

Enjoy!

Practical HTML5

Maurice — Fri, 25 Jan 2013 19:33:42 GMT

The slides from my presentation on Practical use of HTML5 for the DotNed user group.

Practical html5 from Maurice Beijer

The source code can be found here.

There is an online demo version hosted on Azure websites here.

Enjoy!

Praktisch aan de slag met HTML5

Maurice — Tue, 08 Jan 2013 12:05:00 GMT

Donderdag 24 januari 2013 doe ik weer een presentatie over HTML5 voor de DotNed gebruikersgroep.

Op dit moment is HTML5 een van de grote hypes. Door de HTML5 standaard te gebruiken gaan we alles anders doen op het web. Uiteraard gaat alles goed en vanaf nu werkt alles gewoon zoals verwacht op alle browsers hetzelfde. En zo zijn er nog wel meer fabeltjes.

Zoals iedereen, die al langer voor het web ontwikkelt, weet dat dit tot nu toe nog nooit het geval is geweest. En zelfs als dat in een wereld met perfecte browser leveranciers waar zou zijn dan zitten we nog met het feit dat niet iedere gebruiker zijn browser snel update. Zo gebruikt meer dan 10% van de gebruikers nog Internet Explorer 8.0 als hun browser en dat is nu niet echt een browser die de HTML5 standaard goed ondersteunt.

Betekent dit nu dat we helemaal niet met HTML5 aan de slag kunnen? Uiteraard kan dat wel, alleen moeten we goed kijken naar welke onderdelen we gebruiken. In deze sessie laat Maurice de Beijer zien hoe je een bestaande web applicatie kan vernieuwen met HTML5 onderdelen maar op een manier waarop oudere browsers toch gewoon blijven werken.

Ik hoop iedereen daar te zien :-)

Enabling Tincr on Windows 8

Maurice — Fri, 21 Dec 2012 19:02:40 GMT

Some time ago I posted a blog post on Tincr and live reloading of CSS/JavaScript in Google Chrome. This works really well with one exception, on Windows 8 it will not install. When you try Chrome shows the following error message:

This application is not supported on this computer. Installation has been disabled.

The Chromium team has acknowledged this as a bug but it still needs to be fixed.

The interim solution

Fortunately Lauricio Su came up with a nice workaround and posted it in the Tincr discussion group. Basically his solution is to run Chrome in Windows 7 compatibility mode and install Tincr. After that Chrome can be started in the normal way and Tincr will work just fine.

This worked just fine for me with one addition. I had to keep once instance of Chrome running before starting a new instance in compatibility mode. Without that Chrome would not get a connection to the Internet.

Enjoy!

Querying RavenDB databases

Maurice — Mon, 17 Dec 2012 20:07:49 GMT

As we have seen in previous blog posts getting data from a RavenDB database is easy. Either use the IDocumentSession.Query<T>() function to load a series of documents or the IDocumentSession..Load<T>() function to load a document using its identity. However sometimes we want more control over what we want to load. It turns out this is rather easy as the IDocumentSession.Query<T>() function returns an IQueryable<T>, actually it returns a IRavenQueryable<T> to be exact but more about that another time.

Querying the database

As IDocumentSession.Query<T>() return an IQueryable<T> we can just start composing queries just as we can with EntityFramework or another ORM. In my original online example you might have noticed that the books aren't ordered. As with any query this is easy to correct. All we need to do is add an order by clause.

   1: public ActionResult Index()

   2: {

   3:     using (var session = MvcApplication.DocumentStore.OpenSession())

   4:     {

   5:         var books = session.Query<Book>()

   6:             .OrderBy(b => b.Title)

   7:             .ToList();

8:

   9:         return View(books);

  10:     }

  11: }

If you prefer the full LINQ syntax that is no problem as it produced exactly the same result±

   1: public ActionResult Index()

   2: {

   3:     using (var session = MvcApplication.DocumentStore.OpenSession())

   4:     {

   5:         var books = from book in  session.Query<Book>()

   6:                     orderby book.Title

   7:                     select book;

8:

   9:         return View(books.ToList());

  10:     }

  11: }

Filtering data

In this case I am only ordering the result set but you can also use other operators if you like. Just want books from an author starting with “A”? No problem, just add the filter and it works. The following view search for books where the title or author starts with the passed string.

   1: public ActionResult BooksByAuthor(string author)

   2: {

   3:     using (var session = MvcApplication.DocumentStore.OpenSession())

   4:     {

   5:         var books = session.Query<Book>()

   6:             .Where(b => b.Author.StartsWith(author) || b.Title.StartsWith(author))

   7:             .OrderBy(b => b.Title)

   8:             .ToList();

9:

  10:         return View("Index", books);

  11:     }

  12: }

Lucene.Net indexes

If you try this you might notice one big difference from EntityFramework or in memory LINQ queries. If you search for books starting with a lowercase “the” both “The Hitchhiker's Guide to the Galaxy” and “The RavenDB Book” are returned. And in the query I am not doing anything about making this a case insensitive search. It turns out RavenDB does so by default as it uses Lucene.Net to create indexes. As we didn’t create any indexes you might be wondering where this comes from. It turns out that RavenDB always uses an index when you do a query. You can explicitly create them if you want to. However if you do not, as is the case here, RavenDB will try to find a matching index or create a temporary index if a marching one isn’t found. If the same temporary index is used frequently RavenDB will automatically promote it to a permanent index. That might sound like a bad idea, after all in SQL Server index help with querying but can also slow updates down. In RavenDB this isn’t the case as indexes are update asynchronously so we get the query benefits without the update penalties. Of course there is no such thing as a free lunch and in the case of RavenDB this can mean we use a stale index for the query. That might sounds bad but isn’t quite as bad as it sounds as the data is never stale, just the index, and we can easily control when we want to wait for a non stale index.

Want to try? I have this example running on Windows Azure here.

Enjoy!

Using RavenDB with Azure websites

Maurice — Mon, 10 Dec 2012 20:37:48 GMT

In a previous post I explored various options of hosting RavenDB. While using RavenDB as a Windows Service or hosted in IIS is probably the best way to go in most cases there are a number of cases where the embedded option is great. And one of the places where I really like the embedded option of hosting RavenDB is when doing simple standalone websites. And with the new Azure website option that is a great way to host them.

The code is real straightforward and just like before. I am using a DataDirectory option when creating the EmbeddableDocumentStore here but that does the same thing as I did before using the connection string.

   1: public static DocumentStore DocumentStore { get; private set; }

2:

   3: private void CreateRavenDB()

   4: {

   5:     DocumentStore = new EmbeddableDocumentStore()

   6:     {

   7:         DataDirectory = @"~\App_Data\db"

   8:     };

   9:     DocumentStore.Initialize();

  10: }

RavenDB Configuration

The example code from my previous blog posts will just work except for one gotcha. By default RavenDB will search for a post to use by itself. However that means scanning the available posts and that isn’t permitted by default. The result is an exception:

System.Net.NetworkInformation.NetworkInformationException: Access is denied

With a stack trace like this:

[NetworkInformationException (0x5): Access is denied]
   System.Net.NetworkInformation.SystemIPGlobalProperties.GetAllTcpConnections() +1570717
   System.Net.NetworkInformation.SystemIPGlobalProperties.GetActiveTcpListeners() +74
   Raven.Database.Util.PortUtil.FindPort() +79
   Raven.Database.Util.PortUtil.GetPort(String portStr) +133
   Raven.Database.Config.InMemoryRavenConfiguration.Initialize() +4355
   Raven.Database.Config.RavenConfiguration.LoadConfigurationAndInitialize(IEnumerable`1 values) +307
   Raven.Database.Config.RavenConfiguration..ctor() +196
   Raven.Client.Embedded.EmbeddableDocumentStore.get_Configuration() +87
   Raven.Client.Embedded.EmbeddableDocumentStore.set_DataDirectory(String value) +40
   MvcApplication3.MvcApplication.CreateRavenDB() +57
   MvcApplication3.MvcApplication.Application_Start() +169

The fix is simple. Instead of letting RavenDB search for a port by itself just specify one in the web.config. The setting required is "Raven/Port".

   1: <configuration>

   2:   <appSettings>

   3:     <add key="Raven/Port"

   4:          value="9090"/>

   5:     ....

   6:   </appSettings>

   7: ....

That is all there is to it :-)

Want to see for yourself?

I have a simple page using RavenDB as the backend store hosted on Azure right here.

Enjoy!

Different options for hosting RavenDB

Maurice — Wed, 05 Dec 2012 18:44:00 GMT

In the previous blog posts about RavenDB I used the Raven.Server.exe to create a database server. Just running raven.Server.exe and connecting to it is fine for development but certainly not our only option.

Running RavenDB as a Windows Service

Once you have the RavenDB.Server NuGet package you can install it as a Windows Service. This means it is always available and running whenever you need it. Certainly a nice and simple way of using RavenDB if you do so more often.

Installing is easy, just run Raven.Server.exe /install and it installs.

Running as an IIS application

Another option for hosting RavenDB is creating an IIS application and letting IIS take care of things. There is a little bit more work to it and I consider it more of a deployment option but its a great way of hosting RavenDB in production.

Running RavenDB in embedded mode

Yet one more option is running RavenDB in embedded mode. This is a great option if you don’t want to, or can’t, deploy an extra IIS application. A number of my websites run on a budget hosting infrastructure that make it harder to deploy extra IIS applications. Deploying to Azure Web Sites is another of those places where embedded mode is really useful.

As the client also contains the server the setup and capabilities are a little different. The most obvious difference is using the RavenDB.Embedded NuGet package and the EmbeddableDocumentStore class. The initialization code in the Global.asax now looks like this:

   1: public static DocumentStore DocumentStore { get; private set; }

2:

   3: private void CreateRavenDB()

   4: {

   5:     DocumentStore = new EmbeddableDocumentStore()

   6:     {

   7:         ConnectionStringName = "ravenDB"

   8:     };

   9:     DocumentStore.Initialize();

  10: }

And in the web.config we need the following configuration:

   1: <connectionStrings>

   2:   <add name="ravenDB"

   3:        connectionString="DataDir = ~\App_Data\RavenDB"/>

   4: </connectionStrings>

In this case the RavenDB folder inside the special App_Data folder is where all data is stored.

One thing to keep in mind is that this package uses the original 4.0.8 version of Newtonsoft.Json making it difficult to use with some of the newer releases of the ASP.NET team that ship with Newtonsoft.Json version 4.5.6. The upcoming RavenDB 2.0 should take care of that.

Conclusion

There are quite a few options when it comes to hosting RavenDB. Just choose whatever works best for your situation. In most business application I would opt for hosting as an IIS application if possible and otherwise as a Windows Service. When running on budget web hosting environment or other special cases the embedded option is really nice.

Enjoy!

Understanding Map - Reduce

Maurice — Mon, 03 Dec 2012 18:04:00 GMT

Quite a few people seem to be intimidated by the concept of Map-Reduce. As it turns out Map-Reduce is actually quite simple and straightforward when you get to understand the basic principle.

Basic principle

The basic Map-Reduce consists of two steps. I guess you are not going to be very surprised when I tell you that these steps are called Map and Reduce.

The Map process gets the raw data as input and discard anything in the data we are not interested in, basically each input has a corresponding output so we end up with the same number of simplified data elements. Simple right?

And the Reduce process takes the output of the Map process and combines/discards data to produce the result. Again pretty simple right? There is one catch with the Reduce though. It should output exactly the same data structure as it took as its input. The point being is you can run the same Reduce process multiple times if you would like to. I will come back to why you might want to do so.

A simple example.

The following code loads a few orders and does a Map reduce job on them.

   1: private static void MapReduce()

   2: {

   3:     var orders = LoadOrders();

   4:     Print(orders);

5:

   6:     var mapped = Map(orders);

   7:     Print(mapped);

8:

   9:     var reduced = Reduce(mapped);

  10:     Print(reduced);

  11: }

The Orders data structure looks like this:

   1: public class Order

   2: {

   3:     public Order()

   4:     {

   5:         Lines = new List<OrderLine>();

   6:     }

7:

   8:     public int CustomerId { get; set; }

   9:     public List<OrderLine> Lines { get; set; }

  10: }

11:

  12: public class OrderLine

  13: {

  14:     public string Book { get; set; }

  15:     public int Quantity { get; set; }

  16:     public decimal Price { get; set; }

  17: }

As you can see we have an order with a customer and a number of order lines. Each order line contains the books title, the quantity and the amount it was sold for. During the Map process we just extract the data we are interested in. In this case the books title and the price it was sold for. We store that in the following structure:

   1: public class ReducedTo

   2: {

   3:     public string Book { get; set; }

   4:     public decimal Amount { get; set; }

   5: }

The Map Process

So the Map function takes a collection of Orders as input and returns a collection of ReduceTo items.

   1: private static IEnumerable<ReducedTo> Map(IEnumerable<Order> orders)

   2: {

   3:     var result = new List<ReducedTo>();

4:

   5:     foreach (var order in orders)

   6:     {

   7:         foreach (var line in order.Lines)

   8:         {

   9:             result.Add(new ReducedTo()

  10:             {

  11:                 Book = line.Book,

  12:                 Amount = line.Price

  13:             });

  14:         }

  15:     }

16:

  17:     return result;

  18: }

In fact you could easily rewrite this into a LINQ query like this:

   1: private static IEnumerable<ReducedTo> Map(IEnumerable<Order> orders)

   2: {

   3:     return from order in orders

   4:            from line in order.Lines

   5:            select new ReducedTo

   6:            {

   7:                Book = line.Book,

   8:                Amount = line.Price

   9:            };

  10: }

And in fact that is all there is to a Map process, it is just a LINQ select clause. And when you look at it that way it becomes a lot simpler and easier to understand :-)

The Reduce process

With the Map done we can focus on the Reduce part. The important part is that the Reduce takes the result of the Map function both as input and output. As long as we take this into account the function is quite simple to write.

   1: private static IEnumerable<ReducedTo> Reduce(IEnumerable<ReducedTo> input)

   2: {

   3:     var result = new List<ReducedTo>();

4:

   5:     foreach (var reduced in input)

   6:     {

   7:         var existing = result.FirstOrDefault(r => r.Book == reduced.Book);

   8:         if (existing != null)

   9:         {

  10:             existing.Amount += reduced.Amount;

  11:         }

  12:         else

  13:         {

  14:             result.Add(reduced);

  15:         }

  16:     }

17:

  18:     return result;

  19: }

Pretty simple and if we think about it it is really just a grouping. So just as with the Map process we could easily rewrite this as a LINQ group by query like this:

   1: private static IEnumerable<ReducedTo> Reduce(IEnumerable<ReducedTo> input)

   2: {

   3:     return from sale in input

   4:            group sale by sale.Book into grp

   5:            select new ReducedTo()

   6:             {

   7:                 Book = grp.Key,

   8:                 Amount = grp.Sum(item => item.Amount)

   9:             };

  10: }

So where the Map process is just a LINQ select the Reduce process is just a LINQ group by with the additional collection that the input type is also the output type. Makes things a lot simpler right :-)

Running the sample code produces output like this.

Advantages of Map-Reduce

We have seen Map-Reduce is just another way of doing a LINQ group by query so what is the big deal? One of the biggest advantage of Map-Reduce is the fact that you can parallelize them. You can do so over multiple threads inside a single process or if you want to scale this out over many machines. The key to this is being able to repeat the Reduce step multiple times.

Suppose we want to analyze a lot of sales data and compute the sales amount per article. We could partition the data into as many partitions as we want. Lets assume that we split the sales orders into three partitions. For each group of orders we could map the sales into a collection of article and sales amount pair where each article could be repeated multiple times. After this is done the Reduce step groups the data so we have a single entry for each article with the total sales amount for that partition. Now when that has been done for each partition we combine the three reduced sets into a single set. This is much like the set after the first Map process and contains duplicate entries for each article so all we need to do is run the same reduce process over this much smaller set of data to get the final result. So in reality it is just divide and conquer where we divide the original data into as many partitions as we want to. In other words, a really easy system for scale out scenarios :-)

This is quite easy to do now with the same Map and Reduce functions we used before. The code below loads 25 different sets of orders and runs the Map and Reduce jobs on each of them. Once that is done it combines the different output sets into one new input and runs another Reduce over that to get the end result.

   1: private static void ParallelMapReduce()

   2: {

   3:     var tasks = new List<Task<IEnumerable<ReducedTo>>>();

   4:     for (int i = 0; i < 25; i++)

   5:     {

   6:         var task = Task<IEnumerable<ReducedTo>>.Factory.StartNew(() =>

   7:         {

   8:             var orders = LoadOrders();

   9:             var mapped = Map(orders);

  10:             var reduced = Reduce(mapped);

  11:             return reduced;

  12:         });

  13:         tasks.Add(task);

  14:     }

15:

  16:     Task.WaitAll(tasks.ToArray());

17:

  18:     foreach (var task in tasks)

  19:     {

  20:         Print(task.Result);

  21:     }

22:

  23:     var result = Reduce(tasks.Select(t => t.Result));

  24:     Print(result);

  25: }

To combine the different results I created an simple overload of the Reduce function that just combines multiple inputs and calls the original Reduce function like this:

   1: private static IEnumerable<ReducedTo> Reduce(IEnumerable<IEnumerable<ReducedTo>> args)

   2: {

   3:     var input = new List<ReducedTo>();

4:

   5:     foreach (var item in args)

   6:     {

   7:         input.AddRange(item);

   8:     }

9:

  10:     return Reduce(input);

  11: }

Running this will produce output like below. The white Map/Reduce output is different reduced sets of output from the 25 tasks and the yellow output the the second Reduce done with the output from the first 25 Reduce calls.

Conclusion

Map-Reduce is just another way of doing a LINQ group by but one that is very scalable because of a few simple rules. And once you understand that there is no longer a reason to be intimidated by Map-Reduce and start embracing its power.

Enjoy!

RavenDB and multiple databases

Maurice — Tue, 27 Nov 2012 18:03:00 GMT

In my previous two posts about RavenDB I used a Book class as the example. The first example was an ASP.NET MVC 3 application and the second was an ASP.NET MVC 4 application and I just copies the Books class from the first to the second example. As I just used the default namespace in both projects .NET would consider this two different classes, after all the namespace and assemblies are different.

How does RavenDB handle CLR types

It turns out RavenDB doesn’t really care about these differences with namespaces and assemblies. The extra information is stored as metadata along with the book data but only the actual class name, Book in this case, is used as the type discriminator. The screenshot below shows the metadata of one of the books I created using the original MVC3 application.

However when I started the second MVC4 application all 5 of the previously created books just appeared, even though the Book class in that application used a different namespace. And I could edit and save them without any problems. This did change the metadata to display the new namespace as shown in the screenshot below.

The important thing to remember here is that RavenDB just cares about our class name and will just use the data. In this case not much of a problem but that will not always be the case.

Using multiple database

The solution is the same as with SQL Server, just create multiple database to separate data from different application. Now you can go into the RavenDB management studio and create a new database there.

That works just fine But you can do it even easier. Just specify the database name in the connection string. In that case RavenDB automatically used that database for all operations and if it doesn’t exist yet it will be created as needed.

   1: <connectionStrings>

   2:   <add name="ravenDB"

   3:        connectionString="Url=http://localhost:8080;Database=Mvc4Demo"/>

   4: </connectionStrings>

Using unique databases for your applications you can be certain that you don’t inadvertently start mixing data from different applications just because the class name is the same.

Deleting old databases

One none obvious thing is how to delete old databases you don’t need any longer. There is no delete database option or command in RavenDB. In the screenshot below I have a database called OldData.

In order to delete it I have to go the default database and find the document pointing to this database and delete this.

Once that is done I can locate the actual folder on disk and delete it.

Enjoy!

Using RavenDB with ASP.NET MVC 4

Maurice — Mon, 26 Nov 2012 18:03:00 GMT

Some people might have wondered why I used ASP.NET MVC 3 in my previous blog post. The reason is that the RavenDB.Client package uses Newtonsoft.Json and ASP.NET MVC 4 also has a dependency on Newtonsoft.Json. In itself this isn’t a problem except that RavenDB requires Newtonsoft.Json version 4.0.8 and ASP.NET MVC 4 ships with a much newer version of Newtonsoft.Json, to be exact version 4.5.6.

The result is that trying to Install-Package RavenDB.Client produces the following error:

Install-Package : Updating 'Newtonsoft.Json 4.5.6' to 'Newtonsoft.Json 4.0.8' failed. Unable to find a version of 'Microsoft.AspNet.
WebApi.Client' that is compatible with 'Newtonsoft.Json 4.0.8'.

Does that mean you can’t use RavenDB with ASP.NET MCV 4?

No fortunately you can still go ahead and user RavenDB.Client. Instead of the default package you need to installl a specific version which is build with the same version of Newtonsoft.Json as ASP.NET MVC4.

   1: Install-Package RavenDB.Client -Version 1.0.971

After including this package, and copying the code from the previous post. We can run the ASP.NET MCV 4 application and we get to see the same books as before except now with the new stying.

However one thing to keep in mind is that RavenDB.Client is the only RavenDB NuGet package build against this version of Newtonsoft.Json. There is no updated version of RavenDB.Server or any of the other packages and that includes RavenDB.Embedded which can be very useful if you want to embed RavenDB server and client into one application. See this blog post by Ayende Rahien for more details on this NuGet package.

Enjoy!

Getting started with RavenDB in an ASP.NET MVC application

Maurice — Sun, 25 Nov 2012 15:18:23 GMT

RavenDB is one of the newer document type databases that is conceptually comparable to MongoDB or CouchDB. One of the nice thing about RavenDB, at least for a .NET developer, is that is has been developed with .NET in mind from the start. And this makes it really easy to get started with. In fact it is so easy to get started with that it surprises me that not everyone is using it.

One of the things that attract me to document databases like RavenDB is the fact that they are really fast and schema free. This means that I don’t have to worry about creating database tables or those administrator like tasks. Instead I just create my C# classes and store them as documents in the database. Make a change to my class, no problem it just keeps on working.

Creating a real simple ASP.NET MVC application using RavenDB

A quick demo will show just how easy it is to get started. I am starting with a standard ASP.NET MVC 3 application here. In order to get the RavenDB client and server packages I use NuGet to install them using the following two commands in the NuGet Package Manager Console:

   1: Install-Package RavenDB.Client

   2: Install-Package RavenDB.Server

The RavenDB Server

The RavenDB.Server package installs the server bit. There are other ways of doing things but for now lets do the simplest and just navigate to the Raven.Server.Exe and start it.

This will start the server running and by default it will listen on for HTTP traffic on port 8080. The server console will display all command that execute helping with debugging potential issues.

The RavenDB Client

The RavenDB.Client NuGet package installed the normal way into our project and added some references to the RavenDB client libraries. In order to use RavenDB in our C# code we first need to create a DocumentStore object. This is an object that only needs to be created once and can be cached for the duration of the application live time. One nice and simple way of doing this is by adding the following bit of code to the Global.asax and calling this from the Application_Start() function.

   1: public static IDocumentStore RavenDBDocumentStore { get; private set; }

2:

   3: private static void CreateRavenDBDocumentStore()

   4: {

   5:     RavenDBDocumentStore = new DocumentStore

   6:     {

   7:         ConnectionStringName = "ravenDB"

   8:     }.Initialize();

   9: }

In this case I am pointing to a connection string in the web.config so lets make sure that is added. Basically I am pointing this to HTTP port 8080 on the local machine which is the server we started before this.

   1: <connectionStrings>

   2:   <add name="DefaultConnection"

   3:        providerName="System.Data.SqlClient"

   4:        connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-RavenMvc-20121125145005;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-RavenMvc-20121125145005.mdf" />

   5:   <add name="ravenDB"

   6:        connectionString="Url=http://localhost:8080"/>

   7: </connectionStrings>

In order to store or retrieve data we need to use the DocumentStore to open a session. Most database interactions, and all standard ones, are done through a session object. This session object should be short lived, create one, do a few interactions with it and dispose of it. And when it comes to a few interactions RavenDB pushes you towards the right thing. Do to many database queries and you will see an InvalidOperationException with message “The maximum number of requests (30) allowed for this session has been reached.” informing you that you can do only 30 actions at the time. This might seems strange but RavenDB has a number of these defaults that lead developers towards making the right choices.

In this demo I am going to use a simple book application to show how simple it is to get started with RavenDB. The book class is pretty basic and looks like this;

   1: namespace RavenMvc.Models

   2: {

   3:     public class Book

   4:     {

   5:         public int Id { get; set; }

   6:         public string Title { get; set; }

   7:         public string Author { get; set; }

   8:     }

   9: }

A list of books application

Showing a lost of books is real simple. All I need is the following code:

   1: public class BooksController : Controller

   2: {

   3:     //

   4:     // GET: /Books/

   5:     public ActionResult Index()

   6:     {

   7:         using (var session = MvcApplication.RavenDBDocumentStore.OpenSession())

   8:         {

   9:             var books = session.Query<Book>().ToList();

  10:             return View(books);

  11:         }

  12:     }

  13: }

Just running this will work just fine. Note that I have not created any databases or tables. Instead RavenDB will just check to see of it knows about books and if so return them. In fact it will return the first 128 by default as that is another of those default to help developers make the right choice. The thing to note in the code is that I am using the DocumentStore to create a new session object, using the session to do a query and then disposing the session object again. This is the basic approach when using RavenDB that you keep on repeating.

Loading a single book

The session.Query<Book> returns an IQueryable object so you could just start do queries. However if you know the identity of the book it is faster to use the Load() function instead.

   1: //

   2: // GET: /Books/Details/5

   3: public ActionResult Details(int id)

   4: {

   5:     using (var session = MvcApplication.RavenDBDocumentStore.OpenSession())

   6:     {

   7:         var book = session.Load<Book>(id);

   8:         return View(book);

   9:     }

  10: }

Storing a new book in the database

Adding a new book isn’t much harder. In this case we do need to make sure we call SaveChanges() on the session as that commits the changes to the database. If we don’t do this they will be lost when the session is disposed.

   1: //

   2:         // POST: /Books/Create

   3:         [HttpPost]

   4:         public ActionResult Create(Book book)

   5:         {

   6:             if (ModelState.IsValid)

   7:             {

   8:                 using (var session = MvcApplication.RavenDBDocumentStore.OpenSession())

   9:                 {

  10:                     session.Store(book);

  11:                     session.SaveChanges();

  12:                 }

13:

  14:                 return RedirectToAction("Index");

  15:             }

16:

  17:             return View(book);

  18:         }

The important thing to remember is we haven’t defined any schema in the database for this to work. Instead RavenDB just saves the object. In fact it converts it to a JSON format first and stores it that way. The data is easy to see. Part of the RavenDB.Server package is a Silverlight client that lets you manage the server and inspect, or even change, the data. After adding a few books this looks like this:

If we edit a document we can see the actual JSON representation of the book. Note that the associated metadata contains the CLR type so RavenDB knows how to handle your query and deserialize the data.

Updating and deleting the books is just as simple.

   1: //

   2: // POST: /Books/Edit/5

   3: [HttpPost]

   4: public ActionResult Edit(int id, Book updated)

   5: {

   6:     if (ModelState.IsValid)

   7:     {

   8:         using (var session = MvcApplication.RavenDBDocumentStore.OpenSession())

   9:         {

  10:             var book = session.Load<Book>(id);

  11:             book.Title = updated.Title;

  12:             book.Author = updated.Author;

  13:             session.Store(book);

  14:             session.SaveChanges();

  15:         }

16:

  17:         return RedirectToAction("Index");

  18:     }

19:

  20:     return View(updated);

  21: }

22:

  23: //

  24: // POST: /Books/Delete/5

  25: [HttpPost]

  26: public ActionResult Delete(int id, Book deleted)

  27: {

  28:     using (var session = MvcApplication.RavenDBDocumentStore.OpenSession())

  29:     {

  30:         var book = session.Load<Book>(id);

  31:         session.Delete(book);

  32:         session.SaveChanges();

  33:     }

34:

  35:     return RedirectToAction("Index");

  36: }

That is all there is to it to get started. With a bit of simple C# code I can store books and I never needed to worry about the database side of things. Sweet :-)

Enjoy!

Tincr and live reloading of CSS/JavaScript in Google Chrome

Maurice — Sat, 17 Nov 2012 15:03:00 GMT

The standard workflow with web development is run the web application, make some changes to your CSS in Visual Studio, flip back to the browser and reload the page to see the effect. While this works relatively well it can be somewhat slow at times.

One improvement is make changes to your CSS in the browser. I use Google Chrome as my main browser and it’s CSS and JavaScript viewer is actually an editor so you can make changes there. The nice thing is you see the effect of your changes immediately making for a much faster feedback loop. The drawback is that changes are made in memory and you have to copy them back to the original CSS/JavaScript file. And if you accidently navigate away or reload the page your changes are gone.

Tincr to the rescue

Sometimes a utility comes along that is so incredibly useful that you wonder how you managed to live without is. Tincr is one of those plugins for Chrome that makes you wonder how you could do web development without it.

The basic idea behind Tincr is to create a link between the CSS/JavaScript files on disk in your project and in the browser and keep them in sync. That means that you can make any change you want to your CSS file in Visual Studio and as soon as you hit save the browser is automatically updated. The same goes the other way, make a change to your CSS in the Chrome developer tools and the change will be save to disk automatically.

How cool is that?

Here is a short demo from the maker showing Tincr in action.

Using Tincr with an ASP.NET MVC application is easy.

After installing Tincr you will see an additional tab in the Chrome developer tools. Select this and set the project type to HTTP Web Server and select the root directory for the project. By default auto refresh and auto save are enabled allowing for 2 way syncing.

Make sure to keep the Chrome Developer Tools open and switch back to Visual Studio and make some changes to your CSS. As soon as you save the file you will see the browser window update.

One gotcha with Windows 8

Unfortunately this plugin won’t install on Google Chrome running on Windows 8 even though other plugins work just fine. I am not 100% sure why but believe this is because it uses the NPAPI Chrome File API to get access to the file system.

Update: Lauricio Su came up with a good workaround. See here for more details.

Recommended!

Now if we would only have a similar plugin for Internet Explorer

Modern Web Development

Maurice — Sat, 10 Nov 2012 15:20:00 GMT

The PowerPoint and samples from my presentation at the QNH DevDays in Arnhem.

Modern web development from Maurice Beijer

SignalR demo

Other demos

Enjoy!

jQuery UI and Windows 8 and Internet Explorer 10 touch screens

Maurice — Wed, 24 Oct 2012 19:34:17 GMT

I recently did a blog post describing how to enable the jQuery UI drag effects. In this post I showed how to get the draggable effect to work on an iPad. While that works just fine it isn’t the end of the story. Microsoft has shipped Windows 8 and Internet Explorer 10 and the jQuery UI draggable effect doesn’t work there as is.

The solution

Fortunately the solution is a lot simpler and doesn’t require an additional plug-in. It turns out that Internet Explorer 10 has quite a good support for pointer and gesture events. What we need to do is take control of the action IE10 performs on touch. By default the browser takes care of things and in this case we don’t want that and take control ourselves using jQuery UI.

It turns out this is rather simple. There is an IE10 specific CSS settings called -ms-touch-action. Setting its value to 'none' is all we need to do. This will suppress the default IE10 behavior and pass the gestures on to the jQuery event handler.

   1: $("#draggable").css('-ms-touch-action', 'none');

Try for yourself

I have enhanced my small demo page here. You can toggle the support for touch events using the button to try both with and without support for touch.

Enjoy!