MVVM for the Web using Knockout.js

Ever since the explosion of web-oriented apps, the need for doing complex things simpler becomes more obvious. Creating richer & more sophisticated UI's usually involves using JavaScript API's like JQuery.

What?

Knockout.js is an open-source JavaScript library (yep, not Microsoft - licensed under the MIT) that helps you create rich, responsive display & editor user interfaces with a clean underlying data model.

Any time you have sections of your UI that update automatically, Knockout.js can help you implement it in a simpler, more maintainable fashion.

Why?

The problem with designing for the web is that rich user interactivity is fairly hard to do. Even when using a JavaScript library (like JQuery) it can become quite cumbersome. Before you know it, you have a mess of inter-related event handlers that all pretty much do the same thing.

Now, with Knockout, we can say hello to more structured code based on true object orientation & declarative bindings. This means that Knockout brings the MVVM pattern comes to the web.

Like any other good JavaScript library, Knockout also supports a wide variety of browsers like IE 6+, FireFox 2+, Chrome, Safari & Opera.

Knockout can be added on top of your existing web application without requiring major architectural changes.

Developers familiar with Ruby on Rails, ASP.NET MVC, or other MV* technologies may see MVVM as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data… whatever works for you :)

How?

The best way of explaining Knockout.js is to actually show you. In order to keep this post short & sweet and on to the point - here's a link to the interactive tutorials found on the website - knockoutjs.com

Also - I've uploaded an simple example based on my demo on SkyDrive here

Enjoy experimenting & happy knocking!

@FanieReynders

Reflection.Emit: Heaven, but Hell with DateTime

We had to write a framework for a client, instant alarm bells, when I hear framework. Anyway they wanted to port an old style classic ASP app that was table driven, ie you add a table name to a setup screen and viola you have a screen to do CRUD on the data of that table etc etc.

This had to be ported into SharePoint and we decided to use EF4, WCF and Silverlight (no im not using an splist and bcs). Problem 1 is that WCF needs a defined contract and we can’t just pass “T” up and down. So we needed some code generation to generate the types at runtime, based on the table. Fairly easy, get the schema from the data returned and generate the type using CodeDom, been done before. Problem solved.

Problem 2: CodeDom cannot be run under Silverlight! Eish! But we can use Reflection.Emit. So I did and it worked after much learning and failure. Understanding IL is rather intense for an old coder like me (old dogs new tricks).

Im not going to go through the whole tutorial, but rather, just mention a problem we had that I could not find an answer on the WWW. When generating the code and runtime, it looked fine when you created and reflected it, but it doesn’t execute, infact you get a lovely {"Exception has been thrown by the target of an invocation."} error.

This is the code I needed to generate:

private int _EmployeeID;

private DateTime _StartDate;

public int EmployeeID

{

get

{

return this._EmployeeID;

}

set

{

if (value != this._EmployeeID)

{

this._EmployeeID = value;

this.OnPropertyChanged("EmployeeID");

}

}

}

public DateTime StartDate

{

get

{

return this._StartDate;

}

set

{

if (!(value!= this._StartDate))

{

this._StartDate = value;

this.OnPropertyChanged("StartDate");

}

}

}

So this Reflecton.Emit code below generates the If(value!=this.x) bit in the setter:

generator.DeclareLocal(typeof(bool));

generator.Emit(OpCodes.Nop);

generator.Emit(OpCodes.Ldarg_1);

generator.Emit(OpCodes.Ldarg_0);

generator.Emit(OpCodes.Ldfld, field);

generator.Emit(OpCodes.Ceq);

generator.Emit(OpCodes.Brtrue_S, endif);

The generated code looks sweet but if you run it, it fails on assigning the DataTime property, with that Invocation error. When I removed the “IF” generation block all was fine

Using ILSpy and Reflector, I cut and pasted the generated code in a separate project dll and compared the IL of this code vs. my generated type and they were different!

When generating a DateTime the compiled IL looked like this:

IL_0000: nop

IL_0001: ldarg.1

IL_0002: ldarg.0

IL_0003: ldfld valuetype [mscorlib]System.DateTime WpfApplication1.Employee::_StartDate

IL_0008: call bool [mscorlib]System.DateTime::op_Equality(valuetype [mscorlib]System.DateTime, valuetype [mscorlib]System.DateTime)

IL_000d: stloc.0

IL_000e: ldloc.0

IL_000f: brtrue.s IL_0026

My generated class looked like this:

IL_0000: nop

IL_0001: ldarg.1

IL_0002: ldarg.0

IL_0003: ldfld valuetype [mscorlib]System.DateTime SharePoint.SilverLight.Web.Employee::_StartDate

IL_0008: ceq

IL_000a: brtrue.s IL_0021

So looking at the compiled IL, is seems .Net is doing a DateTime.Equals(A,B) and not an if(A==B)

So for DateTime’s I changed my code to this.

generator.DeclareLocal(typeof(bool));

generator.Emit(OpCodes.Nop);

generator.Emit(OpCodes.Ldarg_1);

generator.Emit(OpCodes.Ldarg_0);

generator.Emit(OpCodes.Ldfld, field);

if(type==typeof(DateTime))

{

MethodInfo dateCompareMethod = typeof(DateTime).GetMethod("Equals",

new Type[] {

typeof(DateTime), typeof(DateTime)

}

);

generator.Emit(OpCodes.Call, dateCompareMethod);

generator.Emit(OpCodes.Stloc_0);

generator.Emit(OpCodes.Ldloc_0);

}

else

{

generator.Emit(OpCodes.Ceq);

}

generator.Emit(OpCodes.Brtrue_S, endif);

Viola code worked J and IL code looks like it should!

Hope this helps someone else.

How to ensure a terrible User Experience

Mobify your web with JQuery Mobile

Let's face it, we all use our (smart) phones most of the time to browse the web. Then you get sites that aren't formatted for mobiles and you end up zooming and panning away, confusing yourself with the "all over the show" navigation, not to mention the teeny tiny links that makes it difficult to click - if you have toes for fingers (like me).

It's no doubt about it, we as web developers need to cater for mobile devices when we do web apps & -sites. Usually we achieve this by duplicating pages & logic in a sub-web that is formatted specifically for mobile devices, having our site www.example.com for PCs and m.example.com for mobile. This can become quite cumbersome - especially when doing site maintenance.
 
Have no fear, JQuery Mobile is here!
For those that doesn't know what JQuery is, go here before moving on.

JQuery Mobile is a unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid JQuery and JQuery UI foundation. Focused on a lightweight code base built on progressive enhancement with a flexible, easily themeable design.


Built with HTML5 in mind, we can now leverage the super sexy UI on touch devices right on our web apps!

The JQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.

The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.

You can read more on JQuery Mobile on www.jquerymobile.com
or get it with NuGet - jquery.mobile

If you're not sure what NuGet is, I blogged about it a while back

Mobile View Engines to the rescue!
From the origin of the Razor view engine, things just got better. While working on an app (built with MVC & Razor), I came across a nifty Nuget package called MobileViewEngines

This adds all the plumbing for making your web app mobile viewable. In MVC this works great: If you have a view called "Index.chtml" for instance, just create another one called "Index.Mobile.chtml".

Everything else, will work seamlessly together - your controller will still return the "Index" view, but it will be dependant on the device if it will use the desktop or mobile version.

This can also be implemented on old school web forms.

Now, implement JQuery Mobile on top of this; and you have a truly winning solution.

Here is some information on this

I hope this can help anyone out there that wants to go mobile with their apps. The mobile world is bound to happen, it's not a question of if, it's a question of when. So best start now.

May you have a blessed 2012 and become the best in what you do - code! :) and remember: "Don't over do it, rather do it over"


Follow me on Twitter @FanieReynders

I do this, so you don’t have to…Corrupt Database

Every now and then, we are in the fortunate position to walk into the office, only to be confronted by this glaring screen.

At this point, we normally start muttering to ourselves, all sorts of obscenities…
After all the fun has been taken out of the morning, we realise, that right now, it is up to you to save the day.

You start checking your backups, and going through the normal procedure of restoring, when an
angry man starts screaming about all the work that will be lost if you restore to the last backup.

Sigh… Ok. What now?
Well, not to fret, there is some light at the end of the tunnel. First things first. Before going any further, I recommend you stop SQL Server, and make copies of the offending DB’s files so that you can always come back to this point, if all else fails. You want to see what is actually wrong with this DB. So you do the logical thing.

DBCC CHECKDB, only to be confronted with the very obvious answer of… The DB is SUSPECT!!!

No, really? I couldn’t tell that from the object explorer, and then I decided to do a check DB, just for you to confirm my suspicion all along. Thanks SQL. Then something in the back of your mind
comes creeping up. A little voice telling you, to change the DB status to something a little more friendly...

So you start by doing the following:
Change the suspect status by sp_resetstatus , which turns off the suspect flag on a database, but leaves all other database options intact.

If you were to run a SELECT DATABASEPROPERTYEX('YourDbName','STATUS') you would now get an ONLINE status.

Now you want to declare an emergency situation, and go and get some coffee, because whatever comes up after this, is what you will need to fix. This is also the point where you start to consider that maybe the current backup strategy is not really sufficient for this specific DB.

So you use ALTER DATABASE (YourDbName) SET EMERGENCY

Ok, coffee down, now you can start digging around. You do your DBCC CHECKDB again, and look for any obvious errors. In my case, I know that the log file was corrupt (As I actually broke it myself) and work through the rest of this result set just to confirm that nothing else was damaged.

Once you have your problem area identified, you can now decide whether it will be advisable to continue marching on through the process of recovery. You decide that there will be some data loss, but overall, your results should be quite good. And as this is one of the few options left for
you, you push on.

ALTER DATABASE (YourDbName) SET SINGLE_USER WITH ROLLBACK IMMEDIATE

You do this in order for SQL to be able to repair your corrupt DB without outside interference.

Then you attempt the repair:
DBCC CHECKDB (‘YourDbName’, REPAIR_ALLOW_DATA_LOSS)
From here on you hope that the angry man screaming at you hasn’t lost too much data, and allow SQL to fix the problem areas.

As you can see, in my scenario, it actually recreated the Log file.

Once all these steps are completed, all that’s left to do is to give the DB back to the users, too test, and look at any potential missing data records.

This might be inevitable, as there might be corruption on specific areas that they used, and as such, SQL will discard these changes, to get to a good state. Explaining this to the angry man, might be a bit more difficult…

You do this with the command ALTER DATBASE (YourDbName) SET MULTI_USER

You will now see this beautiful screen, where you can sit back and relax, and enjoy that second cup of coffee.

Obviously, this leads you back to that thought of the backup strategy. You have to be prepared for these sort of eventualities, and revisit DR situations as often as possible, to avoid these little problems as best you can.

PS: If all of these steps fail, remember that first recommendation of copying your files away first. You can always try to extract the data from a suspect DB manually. Again setting it into emergency mode, and single user, so that you can try and access the data, to export to a new DB. If you need more info on this, let me know, and I will be glad to help.

Scrum Basics

Introduction

Scrum is a management framework and, being one of many Agile 'flavours', is designed to add clarity, focus and transparency to project planning, development and implementation. Alistair Cockburn, from Agile Software Development: The Cooperative Game (2007), describes software development as 'a cooperative game of invention and communication'. Scrum provides a platform for people to work together effectively and to relentlessly make visible every problem that gets in the way of progress and, properly implemented, increases development speed, creates a culture of driven performance, and allows stable and consistent communication at all levels.

The information provided below serves to give an overview of the Scrum framework, the roles involved, and the various meetings that take place.

Role Breakdown

The Product Owner's responsibilities are:

• Working on a shared vision
• Gathering requirements

• Managing and prioritising the Product Backlog

• Accepting the software at the end of each iteration

• Managing the release plan

• The profitability of the project (Return on investment)

The Scrum Master's responsibilities are:

• Empowering and shepherding the team
• Removing impediments
• Keeping the process moving
• Socialising Scrum to the greater organisation

The Team's responsibilities are:

• Estimating size of backlog items
• Committing to increments of deliverable software, and delivering it
• Tracking own progress
• Is self-organising - but accountable to the Product Owner for delivering as promised

The Product Backlog

The Product Backlog is a living document that contains a list of work items that need to be completed over time. Items may be added to the backlog by anyone, but only the Product Owner, with input and negotiations with the stakeholders, has the right to determine the order in which they will be executed by the Team.

The Sprint Backlog

The Sprint Backlog represents the work that the team has committed themselves to complete during the course of the current sprint. This list is usually represented by a task board, but may take any form as long as it is able to 'radiate' this information to the whole team, or anyone else, and indicates progress.

The Sprint Meetings

The sprint is the heartbeat of the Scrum cycle. It is bookmarked by sprint planning at the start and by the sprint review and sprint retrospective at the end. The length of the sprint is fixed and is never extended. Each day during the sprint the team holds a daily Scrum meeting (daily stand-up). Each meeting in the Scrum cycle is strictly time-boxed. For a 30 day sprint (4 weeks) the time boxes for sprint planning 1 & 2, sprint review and sprint retrospective are set at four hours each. For shorter sprints the time-boxes should be adjusted proportionately with the length of the sprint, i.e. a sprint length of 2 weeks produces time-boxes of two hours for each meeting. The daily Scrum meeting is time-boxed to fifteen minutes in all cases.

The meetings in the Scrum cycle as summarised below:

• Sprint Planning - Part 1

Sprint Planning 1 is carried out at the start of the new sprint and is where the Product Owner presents the set of priority features that need to be executed. The Team discusses the items until such time that everyone understands the requirements in sufficient detail to be able to commit to their delivery at the end of the sprint. The Team alone decides what it can deliver in the sprint and takes into account the duration of the sprint, team size, team capabilities and the team's definition of done (DOD).

• Sprint Planning - Part 2

Sprint Planning 2 is held after Sprint Planning 1 and is a design workshop where the Team collaborates to create a high-level design of the features that they have committed to deliver in the sprint. Those features are broken down into a list of tasks that the Team collectively need to execute in order to turn the selected items into a deliverable product.

• Daily Scrum Meeting

The daily Scrum meeting is one of the three primary "inspect and adapt" aspects in Scrum. The Team meets to communicate and synchronise it's work to ensure continues progress and to avoid work impediments/blockages.

The daily Scrum meeting is not for reporting progress to the Scrum Master or Product Owner, but rather to keep each other informed by answering the three questions:

• What have I done since the last Scrum meeting?
• What will I be doing today?
• What is impeding or blocking my progress?

Further discussion may take place after the Scrum meeting if necessary.

• Sprint Review

While the sprint review does include a demonstration of the new features that the team has completed in the sprint, it's primary purpose is to 'inspect' what the team has delivered and gather feedback from the attendees to 'adapt' the plan for the next sprint. The focus of this meeting is a balanced combination of demonstration and conversation.

• Sprint Retrospective

This meeting is the final meeting of the sprint. Whereas the sprint review is focused on the Product, the retrospective is focused on the Process - the way in which the Team is working together, including their technical skills and the software development practices and tools they are using.

The sprint retrospective is restricted to the members of the Scrum Team - the Product Owner, development team members and the Scrum Master.

The focus of this meeting is to inspect, at a deep level, how the team is collaborating and performing, and to take actions to improve on processes, tools ,etc. This often requires deep introspection and sharing which should be done in a neutral environment.

• Estimation Meeting

During every sprint, the Product Owner convenes one or two meetings where the Scrum Team, and if required, other Stakeholders, meet to size the backlog items that have been added or to re-size large items that need to be split into smaller ones for tackling in the next sprint or two.

How to kill a Ninja