Intro to Google’s Cloud for Developers

Updated deck for my presentation at Google Bangalore this Friday – enjoy!


Advertisements

I so want to love Windows 8, but…

So once again Windows 8 annoys me.

All I want to do is to print from the (to be frank, very poor) Reader App.

Unfortunately, every time I try to send anything to the printer, I get a completely unhelpful “Your printer is not connected …” error message.

Which is interesting, since every desktop app can print happily. And printing a test page works every time. And the printer troubleshooter identifies no problems – although it is keen for me to share the printer to the HomeGroup, and even though I don’t want to, it considers that an error.

(Errors really should be actual problems, but let’s no get into that discussion!)

So is it the Windows “Metro” mode that is just completely unreliable? Is it the Reader app?

Who knows?

But when you factor in the mail client that is all but useless and a reader app that is unable to print it really starts to indicate that the Windows 8 “Metro” environment, in its current form, simply isn’t reliable enough for even basic use.

If I’m continually being forced to use traditional desktop apps to do basic tasks, then it makes Windows RT a complete non-starter – no desktop apps work on Windows RT – and it makes Windows 8 a pointless upgrade from Windows 7.

So it’s time to download Adobe Reader and print from there.

Which makes me sad.

Model-View-ViewModel Sample

I ran a couple of sessions at the recent Software Architect conference.

At the conference, I showed a small M-V-VM sample based around the game of Tic-Tac-Toe (or Noughts and Crosses).

The slides and the sample can now be downloaded as follows:

Code

“Why M-V-VM is (not) Working” (Talk)

“Structuring XAML-based Applications” (Workshop)

Please feel free to use as you find appropriate.

Tincr and live reloading of CSS/JavaScript in Google Chrome

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.

image

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.

Recommended!

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


Getting started with RavenDB in an ASP.NET MVC application

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.

image

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.

image

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.

image

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:

image

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.

image

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 :-)


Using RavenDB with ASP.NET MVC 4

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.

image

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.


RavenDB and multiple databases

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.

image

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.

image

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.

image

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.

image

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

image

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

image

ASP.NET MVC: Improve perceived performance of ASP.NET MVC websites with asynchronous partial views

Imagine you’re building an ASP.NET MVC website which has some performance problems. I’m sure this would never actually happen to you, but imagine you’re facing this problem just for the sake of exploring the possibilities. :-)

Now, your web app is mostly fast and responsive, but there are certain types of data that just bring the whole thing to a grind. This article will cover a technique using ASP.NET MVC partial views, along with just a sprinkle of jQuery, JavaScript, and HTML5 to make your site feel nice and responsive even if you cannot increase the speed of certain operations.

First a disclaimer / warning. I’m going to show you how to make your site feel faster without speeding it up. If the users feel that it’s fast, then it’s fast enough. However, it might be better to try to just make it faster in the first place. This article assumes you have either tried or ruled out things like increasing the DB performance by adding the proper indexes, caching data where feasible, optimizing queries, etc. OK, assuming you’ve done as much as you can for pure performance, let’s get to improving the experience for the users.

Consider a basic website that shows data from several sources. In the sample case, it’s kind of an iGoogle landing page with different items: TODO, news, etc. In the screenshot below you can see there are several sets of information shown (my details, news, and most popular items).


(click to enlarge)

It turns out that my details and the main page are actually pretty fast. The news and popular items are not. Yet, we are computing them all at once in the MVC action. Thus the whole page feels sluggish and slow. Here is the underlying controller action method.

This is a perfectly reasonable action method. But after doing some profiling we see that we have the following performance footprint:

  10ms repository.GetUserItems()
 500ms repository.GetNews()
2000ms repository.GetPopular()
2510ms TOTAL

I don’t know about you, but 2.5 seconds seems like an unacceptable page load time. Don’t think so? Check out these amazing facts:

Latency is Everywhere and it Costs You Sales – How to Crush it
Latency matters. Amazon found every 100ms of latency cost them 1% in sales. Google found an extra .5 seconds in search page generation time dropped traffic by 20%.

So a simple solution would be to break the loading of the slower sections (news & popular in our case) apart from the faster sections in the page. We can load the fast data immediately using direct model to razor processing and push the loading of the slow parts to an asynchronous operation using AJAX.

That might be a lot of work in general. But with MVC we can employ a few techniques and really make this simple and foolproof.

First, we’re in luck from the start because we are already using partial views (a key step) for our razor code. If you don’t have partial views, they are easy to add. Here is the relevant page section which renders the data synchronously.

MVC will easily serve the PopularControl’s content up over AJAX and same for any other partial view. So let’s change our controller action in the most simple way to allow us to ask for those elements independently. Here’s the new controller code:

It is important to note that we are returning PartialView (not View) for the parts that were previously managed in the view (news & popular).

Assuming the metrics above, the page will now load in 10ms. That’s vastly better than 2,500ms. With razor rendering time and other overhead it’s more like 50ms, but still vastly better.

But our CSHTML is now messed up. What do we need to do to load this content asynchronously? First, we start by punching “holes” in our razor page where the JavaScript can add the content async. Notice how we use the data-url attribute to simplify coordinating the proper location for the content. We’ll see the JavaScript side of things shortly.

Each section that will be loaded asynchronously now has three changes.

  1. We have a div with the class partialContents. We use this in jQuery to locate them.
  2. Each partialContents section has a data-url for the location of the partialview controller action.
  3. Each partialContents section has a message and image to show an AJAX indicator that we are working on that area. There is no extra effort to show this. It appears by default and will be replaced as the content loads.

So the controller is ready to serve up this partial content. The view is showing a pending action and has a place to put the results. The final step is to just add the smallest amount of jQuery to do the download and update.

Here is the JavaScript file that does the work. Notice we simply select all the partialContents sections on page load with jQuery. The foreach one we pull out the url and call jQuery.load(). This does the download and updates the HTML for the correct partialContents.

That’s it! Now our site loads the slow sections in parallel and asynchronously.

To fully appreciate the difference you should see it for yourself. Check out the live demo I’ve posted here:

Sample: Improve Perceived Performance with Async Partial Views
Slow Version: http://samples.michaelckennedy.net/asyncviews/home
Async Version: http://samples.michaelckennedy.net/asyncviews/async

Be sure to click between them with the nav in the top right. Download the code here:

AsyncPartialViewsSampleKennedy.zip

Finally, here is the original version with the timing measured in FireBug:

Slow, Synchronous Version:

Notice the time: 2.6 seconds. Yuck. Here is the timing after the improvement:

Much Faster Async Version:

Now it’s 50ms! That is pretty awesome. Of course, if you look at the AJAX requests, they still take the same amount of time. But we do get the added benefit of natural parallelism from AJAX:

Now the whole page is ready in around 2 seconds which is in some sense truly faster (not just perceived) than the original.

So to recap, here are the steps we performed.

  1. Identified the segments of data that are slow.
  2. Took the original action method and change it to only load the fast content in the controller.
  3. Moved the CSHTML responsible for rendering each slow section to a partial view if it was not already done.
  4. Added an action method returning a PartialViewResult for each async section.
  5. Added a partialContent pending section with loading message and data-url to parts of the original page which are going to be loaded asynchronously.
  6. Use jQuery to find and call .load() for each section.

That’s it. Hopefully you will find this a useful technique for your slower pages.

Cheers,
@mkennedy

10 pieces of advice for teams

I have started to write up a more useful description of Xanpan. In doing so two things have happened. First I’ve realised that I have an awful lot I would like to say about it, I’m terrified it will become another book. Second, I’m becoming more and more aware of how Xanpan differs from Scrum, XP and Kanban.

As a result I expect this blog will get a little quieter. But before the end of the year I’d like to get a few entries finished and published which have been languishing for a while.

So without further ado here are 10 tips for teams and those who manage, administer or simply organise teams. Of course, if you are a self-managing team you should all read this list.

  1. Don’t load overload teams – consider 76% utilisation about the max
  2. Keep teams together – bring the work to the teams, don’t form teams around pieces of work and then break them up when it is finished (Corporate Psychopathy)
  3. Minimise disruption to the team, if the team needs to be regularly interruptible and responsive then set processes and expectations accordingly
  4. The more self-standing, free of dependencies, the team the more effective they will be
  5. The team should own the process and methods of working as well as the things they work on. By “own” I mean: they are allowed to change the process and methods.
  6. Make the boundaries and responsibilities of the team clear
  7. The team needs a full skills set to fill 4,5 and 6; and those with the skills need to be on the team full time
  8. Aim for an MVT (Minimally Viable Team) so put slightly fewer people and skills on than you initially think, expand the team as they show success but always keep them minimal
  9. Aim to recruit slowly and regularly, avoid foie gras recruitment, i.e. stuffing the team full of new people in the hope of increasing quantity in the near future (you won’t, you’ll cripple yourself in the short term)
  10. Give the team as much authority and power as possible to do their work, the more decentralised the organisation the more effective this will be

Looking at that list two things strike me. First is how many of my older blog entries are linked. Second about three of those items are things not to do. Simply not doing bad/mad/stupid things can deliver benefits.


Visual Studio 2012 Update 1 is available

Microsoft has just made good on its promise of frequent updates to Visual Studio.
The first update for Visual Studio 2012 is now available for download.

Somegar has done a nice blog describing the new features in this update: http://blogs.msdn.com/b/somasegar/archive/2012/11/26/visual-studio-2012-update-1-now-available.aspx

Or jump straight to the download at: http://www.microsoft.com/visualstudio/eng/downloads#d-visual-studio-2012-update