Jonathan Channon's Blog

Mocking HttpContext with Fake It Easy

admin — Tue, 30 Apr 2013 12:48:09 +0000

Lets start with the conclusion first and say “use Nancy for your web applications and APIs” as its brilliant!

If you want to continue reading lets crack on.

I’m currently working on a ASP.Net MVC project and one of the controller methods writes directly to the Response, eg. Response.Write(“How will I mock thee?”);

Having moved over to xUnit and FakeItEasy recently I wanted to write a unit or integration test depending how you see it to assert against the Http Response.

Doing this is no easy feat with MVC (with Nancy its all done for you) and you have to mock a lot of things. I’m hoping that in later releases this will be fixed because I know that ASP.Net Web API has made things a bit easier for testing (and wrote a testing library for it) so I assume the two projects will use bits of each other or their roadmap will merge.

I found that there a quite a lot of samples with Moq but nothing for Fake It Easy(FIE) so I checked in at the FIE Jabbr room and got some help and worked through some ideas and below is the result.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//Controller
public class MyController : Controller
{
[HttpPost]
public void Index()
{
Response.Write("This is fiddly");
Response.Flush();
}
}

//Unit Test
[Fact]
public void Should_contain_fiddly_in_response()
{
var sb = new StringBuilder();

var formCollection = new NameValueCollection();
formCollection.Add("MyPostedData","Boo");

var request = A.Fake<HttpRequestBase>();
A.CallTo(() => request.HttpMethod).Returns("POST");
A.CallTo(() => request.Headers).Returns(new NameValueCollection());
A.CallTo(() => request.Form).Returns(formCollection);
A.CallTo(() => request.QueryString).Returns(new NameValueCollection());

var response = A.Fake<HttpResponseBase>();
A.CallTo(() => response.Write(A<string>.Ignored)).Invokes((string x) => sb.Append(x));

var mockHttpContext = A.Fake<HttpContextBase>();
A.CallTo(() => mockHttpContext.Request).Returns(request);
A.CallTo(() => mockHttpContext.Response).Returns(response);

var controllerContext = new ControllerContext(mockHttpContext, new RouteData(), A.Fake<ControllerBase>());

var myController = new MyController()
{
ControllerContext = controllerContext
};

myController.Index();

Assert.Contains("fiddly", sb.ToString());
}

As we are not running this against a live web server we need to mock everything from base controller types to requests, responses and everything in between. My example initiates a bit more than is required ie. querystring and headers but hopefully it demonstrates what’s needed.

Firstly we create an instance of a StringBuilderthat will store the response information that we can assert against. We setup a NameValueCollection to add keys/values for posted data, we could do the same for headers etc if we wanted.

We then create an instance of a fake HttpRequestBase using FIE and setup all the relevant request properties.

We then create an instance of a fake HttpResponseBase and configure a callback that is invoked when our controller calls Response.Write. We also configure it to watch any calls to Response.Write with any string using the FIE syntax of A.Ignored, you could change it so it only looks for specific argument contents if you wanted. When the method is called it then takes the argument and adds it to the StringBuilder.

We then create a fake instance of HttpContextBase and assign the properties of Request and Response to the previously setup fakes.

We then have to create a ControllerContext and pass the fake Http context, a route collection and a fake ControllerBase which the controller under test inherits off. We then assign the controller context to an instance of the controller class we are testing.

We can now finally call the method under test and assert the results.

I would obviously recommend you put the fake setup in a factory method if you have multiple tests you class to prevent duplication. You can obviously then add header, querystring, form method arguments if you want the context populated with that kind of information.

Hope this helps anyone in a similar situation and provides a point of reference for the Fake It Easy project.

Up & Running with TypeScript and WebStorm

admin — Wed, 17 Apr 2013 11:00:07 +0000

I love my iMac and I’m on a mission to find a language I enjoy that I can use my Mac for (no Windows fan boy jokes please). There’s something in my mind I associate with work and my Windows laptop. Therefore, I don’t feel to excited about getting my laptop out of my bag in the evenings/weekends to play with other stuff.

As I want to broaden my knowledge I wanted to find something ideally statically typed (although I’m currently looking into Python) that would work on OS X. I’ve said previously that JavaScript seems the way to go in my current situation so I thought I’d take a look at TypeScript and also use WebStorm from Jetbrains as my IDE seeing as I’ve heard so many great things about them and their products (don’t worry I use ReSharper).

TypeScript

So I went over to TypeScript’s website and followed the Hello World type code examples under the “Learn” tab.

After understanding the basics of it and wanting to learn more I spotted this demo code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

class Student {
fullname : string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + " " + middleinitial + " " + lastname;
}
}

interface Person {
firstname: string;
lastname: string;
}

function greeter(person : Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

There is an interface that expects public properties of firstname and lastname. There is a Student class that has a constructor with arguments for firstname, middleinitial and lastname. TypeScript constructor arguments are shorthand for making the arguments properties on the object itself without having to code all that yourself. We then have a function called greeter that takes a method argument of our Person interface and uses the properties of it to return a string. We then create a new instance of the Student class and then call the greeter function with our instance. Woooaaahhh! I want static typing, WTF is going on here? Essentially TypeScript allows for Duck Typing where any object that makes calls to or uses properties that match another type, it will allow. Now technically you can do this in C# by using the “dynamic” keyword but I would still keep and one to one mapping even if it was dynamic/duck typed so not to confuse future users.

It may be this example that I don’t like where properties are being un-used or the fact that the keyword “interface” is being used and the class is not statically implementing it but I guess this is how TypeScript uses interfaces ie/duck typing. I can’t think of a reason why you’d have an object that exposes properties that are not used when they have been shoe horned/duck typed into another with fewer properties etc, however, this might just be my statically typed mind not liking it and it should chill and get with the dynamic nature of things!

Webstorm

So in my quest to develop something on my Mac I chose Webstorm as my IDE. I haven’t heard one bad thing against Jetbrains so it must be good right? Must be simple and intuitive? Ummm, no. Webstorm has support for TypeScript and uses the computer’s version of TypeScript to compile *.ts files into *.js files. So I installed Node.js and TypeScript (npm install -g typescript) and fired up Webstorm. Webstorm offers various project types to create new projects from but unfortunately no TypeScript one so I created an empty application. I added a *.ts file and Webstorm spots that this is a TypeScript file and wants to add a File Watcher. This means every time a change is made it recompiles in the background to produce *.js, that seems a bit keen for my liking and would prefer it on every time the file is saved but each to their own. I copied the above code into my my *.ts file. I then created a html file and referenced the JavaScript file that was created from the TypeScript compilation in the head section. (I’m using the term compilation but I guess it should be transpiling but you know what I’m getting at).

Ok, we’re ready to go and debug and here comes the confusion!

Being used to Visual Studio I thought it would start a web server instance up, open my system browser and away we go but unfortunately not. I was baffled but that doesn’t take much! I found the Run menu item and it had a Debug option and it then popped up window with a Edit Configuration option so I clicked that and it came up with the below:

As there was no TypeScript option I assumed JavaScript was the option to go with. Under this option it has Local and Remote menu items to choose from. If you look at Local it autofills a path to the index.html on the filesystem, under the Remote option it shows the project structure and asks for a URL. I tried localhost:1234 but nothing so I went back to the filesystem option and clicked Apply but that doesn’t actually do anything.

So went through it all again and saw the + icon in the screenshot and it gives you an option to add a JavaScript configuration and is a complete mirror of the above screenshot. Very odd. Clicked Apply, then tried to Debug again and it gave me the configuration I chose and then opened Chrome. Nothing. WTF!

Had a rummage around WebStorm and saw a note about needing a Jetbrains Chrome extension to debug. So off to the Chrome Store I went and installed the plugin. Tried to Debug and it now opened a browser with my page so things are looking good. Went to the TypeScript file and put a breakpoint on a line but it wasn’t getting hit. I then put a breakpoint on a line in the JavaScript file and it got hit. Yay! But no content was in my page. Baffled again. WebStorm was saying that it couldn’t set the innerHTML property of null. Eh? How can a body be null? After a while of head scratching I sussed it. Those of you that are eagle eyed will have spotted that I put the script declaration in my head and therefore when it got executed there was no such thing as a body tag in the DOM yet. So I moved the script declaration to the body and bingo we have content. I should know better and should have put the script tag at the bottom of the body anyway but this was just a “Hello World” app so wasn’t too worried.

Anyway it now works and either I’m too entrenched in Visual Studio and should learn to adapt to new IDE’s or I expect things to just work without having to RTFM. I must say if I have to read the manual on how to use pieces of software you have an instant fail however, as I’ve heard such great things about Jetbrains and Webstorm I’m willing to give it another go but it has me on the back foot already. I’m also still unsure how to set WebStorm up to use a local web server because debugging by pointing to a file system seems wrong, if anyone knows please let me know.

I hope this helps someone else to get up and running with TypeScript and WebStorm, if not I’m sure there are plenty who’ve had a laugh from this article asking how one person can be so dumb

Using DateTime in C# and SQL

admin — Mon, 08 Apr 2013 15:06:58 +0000

I’m sure there are millions of blog posts out there that already discuss this but I think its worth noting down even if its just something for me to remember.

Store your datetimes in UTC format into the database. Unfortunately this mean executing something like:

myObject.ExpiryDate = TimeZoneInfo.ConvertTimeToUtc(dateTime, TimeZoneInfo.FindSystemTimeZoneById(“timezoneid of users”)

In every central place where you update/insert DateTime values on your objects you will need the above.

When you display any DateTime information it must display as a local datetime value. You can do this by using myObject.ExpiryDate.ToLocalTime()

An example of this is if you stored a DateTime that was converted to UTC and it stored April 8th 14:30 2013, when a user in USA was given the date in their web application they would see it as April 8th 10:30 but UK users would read it as April 8th 15:30

If you have an existing application you need to make sure the server side logic regarding date storage converts to UTC and that your view layer converts to local time.

Its risky but if your users are all on the same time zone and the database server and all operating systems are the same you don’t need to worry about this and can use DateTime.Now for everything.

Using a Markdown ViewEngine with Nancy

admin — Mon, 08 Apr 2013 09:00:13 +0000

Whilst using stackoverflow.com and Github gists I’ve become a frequent user of Markdown.

For those of you that don’t know what Markdown is, its essentially a shorter/cleaner syntax that can be parsed to produce HTML. Below are a few examples:

1
2
3
4
5

#Hello World!
##You're awesome!
The quick brown fox jumped over the lazy coder
What the **hell** is this?
This is an [example link](http://example.com/)

1
2
3
4
5

<h1>Hello World!</h1>
<h2>You're awesome!</h2>
<p>The quick brown fox jumped over the lazy coder</p>
What the <strong>hell</strong> is this?
This is an <a href="http://example.com/"> example link</a>

You can see more examples in the earlier link.

When you’re writing a blog post or a lengthy page in your web app with lots of HTML it maybe easier to use Markdown as your preferred syntax. I currently use WordPress for my blog, it’s ok but its quite bloated for probably what I need. I looked into Calepin and Scriptogr.am as alternative blogging platforms but I felt it didn’t quite offer what I wanted but the approach was a good idea. It meant you could write a blog post and simply put the file in dropbox and it would appear on your blog.

As you may be aware, I’m a great fan of Nancy and the team/contributors were discussing having something similar to Calepin for Nancy so users could upload a Markdown file as a pull request or community article or have something that uses Markdown that can be plugged into Jekyll.

I initially looked into how hard it would be to convert Markdown into HTML with Nancy and as ever, very easy! I found some libraries that already provided the conversion process and decided upon MarkdownSharp.

I then thought we could use Markdown as a proper view engine like Razor. I was unsure of how to provide the ability of model binding, master pages etc but after speaking to @grumpydev he suggested using the built in view engine with Nancy to provide that functionality.

What this means is that you can have a Nancy route such as:

1
2
3
4
5
6
7
8
9
10
11

public class SampleModule : NancyModule
{
public SampleModule()
{
Get["/"] = _ =>
{
var model = new UserModel{FirstName = "John", LastName = "Smith"};
return View["Home", model];
}
}
}

This will find a Markdown file called Home.md or Home.markdown, translate the model and convert the markdown into a HTML view. You could define you markdown view like so:

1
2
3

#Hi there!

My first name is @Model.FirstName and my last name is @Model.LastName

This would then translate to:

1 2	<h1>Hi there!</h1> <p>My first name is John and my last name is Smith</p>

This is a simple demonstration but what it means is that you can now use the Markdown view engine instead of Razor if you so wished. Things like model binding, master pages, partials, model iteration etc etc can all be handled by the view engine and your views can be written in Markdown. To use features like partials and master pages you use the Super Simple View Engine syntax that as it sounds is super simple.

When I wrote the Markdown view engine I also wrote a demo with the easy approach of Calepin in mind.

I wrote a HTML view to act as my master page and then a route in Nancy that would take anything after the URL and find the view for it:

1
2
3
4
5
6
7
8
9
10

Get["/{viewname}"] = parameters =>
{
var popularposts = GetModel();

dynamic postModel = new ExpandoObject();
postModel.PopularPosts = popularposts;
postModel.MetaData = popularposts.FirstOrDefault(x => x.Slug == parameters.viewname);

return View["Posts/" + parameters.viewname, postModel];
};

In the Markdown file I would reference the master page, some partials, the model and a custom section for meta data about the blog post:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

@Master['master']

@Tags
Date: 15/03/2013
Title: Readme
Tags: Nancy,Runtime
@EndTags

@Section['Content']

@Partial['blogheader', Model.MetaData];

# Readme!

## Markdown Viewengine

This Markdown Viewengine allows views to be written in Markdown.

* Full Model support
* Master page support
* Supports HTML within any MD content
* Simple call `return View["Home"]` for Nancy to render your MD file

## Markdown Blog Demo

* Allows for dropping in Markdown files into a directory
* Allows for future post scheduling
* Generates slug automatically
* Uses meta data for date, tags, title
* Allows for custom HTML design

@Partial['blogfooter', Model.MetaData];

@EndSection

This would then render a good looking website with all the features expected in a view engine. It would use the meta data provided to write out things like page titles and tags for a blog post. It would also mean you could use the approach to write your own blog using Nancy and Markdown.

The GetModel() method used above checks a “Posts” directory for Markdown files and reads the metadata for them. What this means is that you can easily write a blog post using Nancy, Markdown and SuperSimpleViewEngine by just uploading the markdown file to a specific directory.

Ideally I would like to get rid of the master page and partial references so you could just have Markdown content in your file but I haven’t figured that out yet. Hopefully someone else can use the Markdown view engine or take the demo app and find an alternative way to provide the simplicity that Calepin offers.

Overall it’s another nice feature that Nancy can offer its users and I have enjoyed contributing to the OSS project and tinkering with code!

The Markdown View Engine and Demo will be released in 0.17 of Nancy due very soon!

The Old Development Language Switcheroo

admin — Tue, 02 Apr 2013 09:00:27 +0000

As a C# developer I think I’m pretty safe in saying that its not going away any time soon however, its my opinion that to not become irrelevant you need to have options. Some may argue that its better to be master of one than a Jack of all trades but lets just say you can’t find your next job in the primary language you want to work in. What do you do?

I have looked more into JavaScript recently and with that comes server and client scope for the use of the language so with some understanding of JS that would be probably the best bet for me however, as much as this may annoy some I think I actually prefer statically typed languages.

Now I know there is TypeScript that I could use for my node.js apps but I see that as more of a workaround and not a core feature of JavaScript. I’m not saying anything bad against JS and the libraries/frameworks that I have used I like but I just find it easier to learn and know what I can do when I have decent intellisense showing me what I can do with my code.

You could argue that I could go back to my first language of Delphi or I could look into C++, Java or PHP but my counter argument might just be laughter. In my opinion these are old languages. They may be reliable for some needs but I feel its looking back to the past somewhat and not looking forward.

I have recently come across Dart and want to spend some time looking into it to see if we suit each other.

Dart is a class-based, object-oriented language with lexical scoping, closures, and optional static typing. Dart helps you build structured modern web apps and is easy to learn for a wide range of developers.

There is also F# which I need to look at as my Twitter timeline has more and more references to this language.

There is also Kotlin but that’s as much as I know about it, the name. I think its based on Java and that rings alarm bells for me but I’m sure @Cranialstrain will put me right.

There is also Go and I’m sure there are many others that I could find but rightly or wrongly when deciding upon a language which lets be honest is a big investment you need to know there are the available jobs out there in that language. Its nice to learn new stuff and I highly recommend it but for me a whole new investment in a language has to warrant some pay offs such as employment.

I can’t say for sure what language I’d use if I had to change, at present most likely JavaScript but probably that is based out of limited options on my part, maybe I need to become a better polyglot programmer and learn some more languages to have better “options” and not become irrelevant.

Let me know what your primary language is and what you’d jump to if you had to.

The many approaches to Entity Framework

admin — Mon, 04 Mar 2013 10:44:07 +0000

I recently had a need to look into using Entity Framework (EF) for a ASP.NET MVC project. In the past I have always used PetaPoco as my ORM of choice and with hearing nothing but bad things about EF I was a little sceptical. There are various ways to use EF, Code First being one of them and the easiest from what I can gather and luckily the approach I needed to get up to speed on. This means you can define your model in code and EF will turn that into tables in your database.

The way I was going to see how EF could be architected in an application was to create a MVC application that provided CRUD capabilities for Customers, Orders and Products. Nothing complicated but something enough to see how EF could be fitted in with a MVC application. I would also like to use a unit of work pattern such as instantiate a model class, set some properties and call a save method. I would also like to keep the architecture well enough abstracted so that another ORM could take its place easily enough if needs be.

I will list the various approaches I took investigating the how EF could be integrated. They are not in any chronological order.

Approach One

My first approach was to create a generic repository, IRepository, to handle the the various crud methods needed and also a Save method. The implementation, Repository would take a IUnitOfWork constructor dependency which would expose the model type ie.Customer,Order, Product and allow EF to perform the CRUD actions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

public class Repository<T> : IRepository<T> where T : class
{
private readonly IUnitOfWork unitOfWork;
private readonly DbSet<T> entitySet;

public Repository(IUnitOfWork unitOfWork)
{
this.unitOfWork = unitOfWork;
entitySet = unitOfWork.GetEntitySet<T>();
}

public void Add(T entity)
{
entitySet.Add(entity);
}
}

public interface IUnitOfWork
{
void SaveChanges();
DbSet<TEntity> GetEntitySet<TEntity>() where TEntity : class;
}

public OrderController(IRepository<Order> orderRepository, IRepository<Customer> customerRepository )
{
this.orderRepository = orderRepository;
this.customerRepository = customerRepository;
}

There are two issues with this approach. Firstly, the IUnitOfWork exposes EF specific members which I don’t really want and secondly when a repository calls Save it will in turn call the SaveChanges method on EF which will save any changes across all repositories. This is because we have one EF database context per request as handled by our IOC container. To get around the saving issue we could have a new context per instance of the repository but I don’t think that is a good approach.

The full code can be seen on the master branch at Github – https://github.com/jchannon/EntityFrameworkMVC/tree/master/EntityFrameworkMVC

Approach Two

Another approach we could use is to remove IUnitOfWork altogether, keep the Save method on the repository but inject the context into the repository and still inject the repositories into the controllers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

public class Repository<T> : IRepository<T> where T : class
{
private readonly EntityFrameworkMvcDbContext context;
private readonly DbSet<T> entitySet;

public Repository(EntityFrameworkMvcDbContext context)
{
this.context = context;
entitySet = context.Set<T>();
}

public void Add(T entity)
{
entitySet.Add(entity);
}
}

This approach is pretty close to what I think we would want and reasonably straight forward but I still don’t like the fact that the SaveChanges would effect every modified/added model across all repositories. If you’re happy to live with that then I think you’re good to go.

The full code can be seen on the LessAbstraction branch at Github – https://github.com/jchannon/EntityFrameworkMVC/tree/LessAbstraction/EntityFrameworkMVC

Approach Three

Another approach for using EF and building on from approach one was to remove the GetEntitySet from the IUnitOfWork interface but keep the Save method, inject the context into the repositories to allow them to add/update and inject the IUnitOfWork and repositories into the controllers so the repositories could use Add and then IUnitOfWork could be used to call SaveChanges.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

public interface IUnitOfWork
{
void SaveChanges();
}

public class Repository<T> : IRepository<T> where T : class
{
private readonly DbSet<T> entitySet;

public Repository(EntityFrameworkMvcDbContext context)
{
entitySet = context.Set<T>();
}

public void Add(T entity)
{
entitySet.Add(entity);
}
}

public OrderController(IUnitOfWork unitOfWork, IRepository<Order> orderRepository, IRepository<Customer> customerRepository)
{
this.unitOfWork = unitOfWork;
this.orderRepository = orderRepository;
this.customerRepository = customerRepository;
}

I think that’s a decent approach however, I think it could be tidied up so that the controllers don’t get cluttered with too many constructor dependencies.

The full code can be seen on the GenericContextPerRequest branch at Github – https://github.com/jchannon/EntityFrameworkMVC/tree/GenericContextPerRequest/EntityFrameworkMVC

Approach Four

This below was another approach and the approach I decided I would use. It uses all the understandings gained from the above samples and hopes to provide a decent way of using EF.

The repositories are now exposed on the IUnitOfWork interface, the implementation takes the DBContext as a constructor dependency, the repository implementation also takes the DBContext to provide the CRUD features with EF and the controllers only have the IUnitOfWork injected into them.

1
2
3
4
5
6
7
8
9
10
11
12

public interface IUnitOfWork
{
void SaveChanges();
IRepository<Customer> CustomerRepository { get; }
IRepository<Product> ProductRepository { get; }
IRepository<Order> OrderRepository { get; }
}

public OrderController(IUnitOfWork unitOfWork )
{
this.unitOfWork = unitOfWork;
}

This means we can keep our one database context per request, the controllers are tidied up so we no longer have numerous constructor dependencies and the repositories can be used to do CRUD and then SaveChanges can be called by IUnitOfWork when we have finished with the repositories.

The only possible downside could be in time that we have numerous constructor dependencies on the IUnitOfWork implementation as well as numerous exposed repository properties on the IUnitOfWork interface. I don’t see this as a big issue as its only one class in your solution. If you didn’t want this to get too polluted you could create a repository factory and inject that into the controller and just have the SaveChanges on the IUnitOfWork interface. You wouldn’t want the IUnitOfWork to expose the repositories because as @daanleduc pointed out to me that would violate the SRP.

Conclusion

I only touched the basics of implementing EF into a MVC app but these approaches did take quite a while to discover and after hearing all the negativity towards EF and drawing from my experience I think I could see why people have issues with it in a much larger application as I’m sure there are other caveats to using EF. The biggest issue I saw with it was not exposing a Save method for the model type you were using, instead you have to commit all changes across the database context. I feel this made it quite difficult to create a decent architecture. I can see in a large enterprise application why EF could be helpful in allowing it to query the database for you and create/modify the tables for you based on your model changes but I think for now in smaller applications I think I still prefer micro-ORMs like PetaPoco, Dapper or Simple.Data due to the control it gives you and also the ease in which you can abstract the database communication. As @Cranialstrain says “the database is an implementation detail”. I’d also like to thank all those on Jabbr that helped me with the above approaches and long discussions had about Entity Framework!

Evaluating KnockoutJS and AngularJS – Part 2

admin — Tue, 05 Feb 2013 14:39:48 +0000

In Part 1, I described how I was using the demo tutorial from SammyJS to get a better understanding of AngularJS and KnockoutJS.

In this blog post I will focus on what I found when using KnockoutJS.

Again if you just want to get to the code then feel free to take a look here for Angular and here for Knockout.

Knockout

Firstly Knockout should be commended on their documentation and online tutorials. Their website tutorials follows a step by step approach and once you have completed each step you can click through to the next section. You can also leave the tutorial and come back to it and it will remember where you left. There is great support in the KnockoutJS room in Jabbr and I’d like to thank David Spörri for answering my newbie JS and Knockout questions.

Knockout also uses HTML elements and attributes like Angular to determine behaviour but Knockout’s approach is more HTML5 in that the most common usage is using the data-bind attribute. For example, the below will use the artist property on the viewmodel to render the div contents.

1	<div data-bind="text: artist"></div>

As this was going to be a SPA (Single Page Application), the main screen would have an area that would display either a list of products or more information about a single product. The way Knockout handles this is via a ‘with’ keyword.

1
2
3
4
5
6

So when the viewmodel’s ‘items’ property is populated it would show the first div and when the ‘chosenProduct’ property was populated it would show the second div. Nice and simple. You can then populate your markup with properties from the items and chosenProduct within those div’s.

As we have 2 pages/sections in our app we need to handle routing so that when we’re going to the root it populates our view model with all our products and when the user clicks a specific product it finds that product and populates our view model. KnockoutJS does not have this built into it like Angular does and uses SammyJS to handle this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Compared to Angular’s separation approach, here we have most things all in one class/viewmodel i.e/ the routing to assign the items property for all products and single item for the selected product as well as other viewmodel properties. We also have functions to add items and determine quantity as well as saving the information to localStorage. I guess it keeps it altogether in one place but this may get tricky once the app becomes quite large however, I’ve been told things can get separated by using RequireJS although I think in this demo that would require a large refactor.

Again in this demo outside of the main area that gets changed with markup we have a shopping cart that needs to update when we add something. I already had a function that calculated my quantities but it did not update the div with the new value. Even though the viewmodel property was a computed function it was not re-run every time something was added to the basket, for that to happen the computed function needs to have an observable property within it.

1
2
3
4
5
6
7
8

self.basketItemCount = ko.computed(function () {
var count = 0;
var items = self.basketItems();
for (var i = 0; i < items.length; i++) {
count += items[i].quantity(); //Given that the quantity is an observable property
}
return count;
});

We also wanted to do some animation when the item was added to the basket and because SammyJS has a dependency on jQuery it was very easy to add this to the viewmodel’s addItem function however like Angular this is not recommended as it ties the view to the viewmodel. What Knockout recommend is custom bindings.

1
2
3
4
5
6
7
8
9
10

ko.bindingHandlers.animateCart = {
update: function (element, valueAccessor, allBindingsAccessor) {
$(element)
.animate({ paddingTop: '30px' })
.animate({ paddingTop: '10px' });
}
};

//Usage
<div class="cart-info" data-bind="animateCart: basketAsJson()">div>

Now this is where the data binding gets confusing/interesting. My HTML could not use the basketItems viewmodel property as this is an observable array and so would only react when the array changed NOT when properties of objects within the array changed. I was a bit disappointed with that so I had to create a new function that obviously used an observeable within it ie/the basketItems but that was not enough to handle the properties changing within that array. So the recommendation from Robert Westerlund (a Javascript, Knockout and Regex wizard) was to use ko.toJSON(basketItems()). (The reason we use ko.toJSON and not JSON.stringify is because that would not pick up the observeable property values) This would mean that it would have to traverse all the objects to find the values and because they are observeable this function would fire every time, genius! This also meant when it changed I could also store the changes in localStorage for when the user came back to the website!

Conclusion

I found Knockout easier to comprehend and get going with compared to Angular which is always a winner when starting something new but Knockout is pretty much just about binding so for things like routing and separation of concerns you need to use other libraries whereas Angular has all that built in. I think for smaller projects without too much logic required Knockout is ideal and I really like the simplicity of SammyJS however, for larger applications that requires dependency injection, a clear separation of concerns and the easy ability to unit test logic Angular is a winner. In this case the term “pick the right tool for the job” certainly applies.

I guess I should go ahead and investigate Backbone now just to fully educate myself and I’ve been recommend this link – “Step by step from jQuery to Backbone” so here goes…

Evaluating KnockoutJS and AngularJS – Part 1

admin — Tue, 05 Feb 2013 09:06:13 +0000

As I stated in my earlier post “JavaScript is the future…maybe” so with that in mind I had to brush up my JS skills and get more involved with the language’s core concepts so after watching some videos and reading some articles I was ready to look at KnockoutJS and AngularJS.

Before I actually looked at these two I spent some time with SammyJS but realised afterwards it was mainly MVC based and not around 2-way binding that Knockout and Angular offer. However, I really liked it and it seemed very familiar and easy to use, the reason being it was inspired by Sinatra which we all know Nancy was also inspired by and we also know how much I like Nancy!

Getting to grips with any language or frameworks is tricky and the best way to do it is to write an application using it. The next difficult thing to overcome is an idea for writing an application. ToDo list’s are very common with JavaScript frameworks and there is a whole website for you to peruse but after looking at SammyJS and their docs they walk through writing a simple shopping basket so I thought I’d use that.

If you just want to get to the code then feel free to take a look here for Angular and here for Knockout.

This blog post will concentrate on AngularJS.

Angular

After looking at the demos on the the home page and reading the docs I was ready to start. (I also got recommended egghead.io for lots of free AngularJS videos)

I liked the look of Angular’s data bindings, it was very similar to HandlebarsJS which is a templating engine for JS and their specific attributes for doing certain things in the DOM seemed clean.

1
2
3

<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>

Angular uses “Controllers” and coming from experience with MVC it turned out they’re not really controllers but more ViewModels. Each Controller handles its own specific task for example, in CRUD you’d probably have a controller for each create, read, update and delete. I believe its possible to make it have one controller but that’s a bit more advanced!

The data in the SammyJS demo comes via a data.json file so I duly created my file and followed the examples of wiring up a backend. This is when things start getting a bit more in depth with Angular opposed to a simple Hello World app. Angular provides its own internal IOC container which is recommended you use to keep things nicely separated and of course it then injects your controller’s dependencies for you. See here for more about the subject. There is a bit of configuration needed in various places and one missing item or spelling mistake and you’ll be stuck due to the nature of dynamic nature of JavaScript.

I finally managed to get my wirings all sorted and my products displayed on screen but when I wanted to retrieve a single item this is when I started scratching my head. The recommended way of doing it was to use an abstracted class called $resource which allows you to query REST based services and obviously with just having one file this wasn’t going to work. $resource sits on top of $http but after playing with that I discarded my file and stuck it in memory for ease. If you’d like to see a $http demo with Nancy as a REST service see this blog post from Christiaan Baes

So now with a bit of filtering I could find my product and display it on screen. I had a controller for listing my products and another controller for displaying one item and a dependency injected into both to allow me to retrieve the data I wanted to display and I also had my routing setup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

//Routing
var app = angular.module('myCart', []).
config(function ($routeProvider) {
$routeProvider.
when('/', {
controller: 'IndexController',
templateUrl: '/templates/list.html'
}).
when('/:id', {
controller: 'DetailController',
templateUrl: '/templates/detail.html'
}).
otherwise({ redirectTo: '/' });
});

//Repository
app.factory('shoppingItemsService', function () {
var data = [
//My data is here!
];

return {
getItems: function () { return data; },
getItem: function (itemId) {
return data.filter(function (x) { return x.id === parseInt(itemId, 10); })[0];
}
};
});

//List Controller
app.controller(
'IndexController',
function ($scope, shoppingItemsService) {
$scope.items = shoppingItemsService.getItems();
}
);

//Detail Controller
app.controller(
'DetailController',
function ($scope, $routeParams, basketService, shoppingItemsService) {

$scope.item = shoppingItemsService.getItem($routeParams.id);
$scope.item.quantity = 1;

$scope.item.basketCount = basketService.getCount();

$scope.addItem = function () {
basketService.addItem($scope.item);
};
}
);

As the app is based around a single page application (SPA) the main area on the screen would show the products or product selected however I had an area, the cart info, that showed the quantity of items in my basket outside this main area. After a lot of head scratching I realised I could create a new controller that was responsible for setting a viewmodel property of the quantity and only update that specific area on screen. This meant when I was viewing a product and added a certain quantity to the basket this area would update automatically. Finally in the demo for a bit of added pizazz the cart info area animates.

This is the one bit that took me a long time to get my head around. Angular recommends that no DOM manipulation occurs in controllers but in separate classes/functions called Directives. I understand why, to keep your viewmodel not dependent on your view but man it was hard work! Directives allow you to determine your own HTML elements that Angular understands, again you can pass in dependencies and they will get resolved for you. Put whatever logic you want in your directive and then manipulate the DOM.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

app.directive('quantity', function () {
var linker = function (scope, element, attrs, basketService) {

scope.$watch(attrs.quantity, function (value, oldValue) {
if (value > oldValue) {
element
.animate({ paddingTop: '30px' })
.animate({ paddingTop: '10px' });
}
}, true);
};

return {
restrict: 'A',
link: linker
};
});

//Usage
<div class="cart-info" ng-controller="CartController" quantity="basketCount()">div>

One of the biggest things I found with Angular was that it was quite fiddly to setup however the documentation was very good and I had help from Phil Jones. Once I had solved whatever issue I was having at the time it was glaringly obvious what was needed and I why I was having problems but that’s all part of the learning curve I guess but mighty frustrating. Angular is certainly all encompassing by handling routing, model binding, separation of concerns and much more and so for a large app I can certainly see its potential but for small apps it may be a bit over the top but overall I did like it. There are also library extensions such as AngularUI which provide custom directives for DOM manipulation, ranked popular modules and specific Angular debuggers so this framework certainly has a lot behind it and I definitely think it will be sticking around for a while.

Using AngularJS/BackboneJS in Windows 8 JavaScript app

admin — Thu, 24 Jan 2013 16:19:09 +0000

To help me expand my JavaScript knowledge as I said I would in my previous post I thought I’d write a Windows 8 application using JavaScript.

After following a few “Hello World” tutorials from Microsoft I thought I’d take a look at the ToDo list demos shown at TodoMVC.com.

This website/Github repository takes the ToDo demo and implements it in all the various JS frameworks and libraries out there. As I said previously its a minefield.

Anyhow, I thought I’d start with Backbone, copy the files, add the references to WinJS and hit F5 and bingo. However, I got the below error:

A bit confused, I googled the issue and found that Microsoft have implemented security principles in WinJS applications to prevent un-sanitized markup to your page. So any time you might dynamically add some HTML to your page your application will throw an exception.

To get around this issue you can wrap your dynamic content calls with execUnsafeLocalFunction

You can read more about that from Microsoft’s documentation here

Here is how you would execute the function around dynamically adding HTML:

1
2
3
4

MSApp.execUnsafeLocalFunction(function() {
var body = document.getElementsByTagName('body')[0];
body.innerHTML = '

+ textColor + '">example

';
});

I moved onto Angular to see if that would help but again I hit the same bug. I did find in the Angular code that if you have a reference to jQuery in your page it would use that, so I downloaded the latest version, referenced it and still the same issue.

What I didn’t realise is that Backbone and Angular both ship jQuery or a subset of it within them and I didn’t fancy modifying those libraries.

I found jquery-win8 from appendTo which I thought was the answer so referenced that and still the same issue.

I then gave KnockoutJS a go and it worked perfectly, the reason being no dependency on jQuery.

I put a question on StackOverflow and after a couple of days Elijah Manor of AppendTo answered me.

appendTo’s version removes errors that occur when running jQuery at load time. You still may have code that violates the security model Microsoft put in place. Microsoft is trying to make you aware that there is a risk adding un-sanitized markup to your page.
If you are confident that is not the case you can try setting jQuery.isUnsafe to true after the appendTo library is included. That should wrap all possible unsafe calls with MSApp.execUnsafeLocalFunction so that Microsoft doesn’t complain.
Note: This flag is turned off by default

So I setup the Angular version of the TodoMVC demo in my Win8 application, referenced the WinJS libs, jquery-win8 and set jQuery.isUnsafe to true and the app started perfectly and all functionality was present. Yay!

1
2
3
4
5
6

One thing to note is that jquery-win8 runs off of jQuery 1.8.2 but appendTo are working on a 1.9 version.

JavaScript is the future…maybe!

admin — Wed, 09 Jan 2013 11:28:40 +0000

I’m not one for New Years resolutions but I thought it was time I looked at JavaScript more in depth.

I looked at Node.js a while back and found it very interesting and I probably need to go back to it. Over the last month or so there has been a large discussion about async in .Net frameworks and there appears to be a lot of misunderstanding about it (and lets leave it at that, I don’t want to start another flame war) but the thing we can definitely say with Node.js, well JavaScript to be fair is that it is perfectly asynchronous and non-blocking.

As a web developer I have used JavaScript from the early days of Response.Write moving onto frameworks such as script.aculo.us and MooTools and finally ending up with jQuery which has come pretty much a standard these days so my JavaScript skills are not completely new.

However, there has been a large push to use JS more and more for rich user friendly applications with things like KnockoutJS, AngularJS and BackboneJS on the client and Node.js on the server. Microsoft has even taken a prominent role in helping bring Node.js to a Windows environment as it started out on *nix based platforms. They have also started contributing to and including scripts in their Visual Studio project templates for jQuery.

JavaScript can now promote one language to develop on the server and the client which makes things easier and that is one argument I understand and I’m sure there are many others which either I have forgotten or I’m unaware of but the truth is JavaScript seems to be picking up pace in the development world.

We now have things like CoffeeScript that abstracts JS and allows users to type arguably neater code which then compiles into JS.

The big news is that Microsoft have developed Typescript which is an attempt to coerce or make the transition easier for C# developers to use JavaScript. Their mantra for TypeScript is

TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

With this development along with the fact that Windows 8 applications can be written in C#/XAML or JavaScript/HTML proves that MS and therefore probably the mainstream of developers are taking JS as a serious platform to start writing large production systems.

I am off to a talk about TypeScript with @markrendle on Jan 22nd so it’ll be interesting to see the language and the points put forward about it and JS as a whole.

As I mentioned earlier there is a large focus on rich content applications which use JS to make the application quick and easy to use and frameworks like KnockoutJS, AngularJS and Backbone have popped up allowing you to create these types of applications.

My biggest concern is which one do you use? I’ve had recommendations for each one which hasn’t helped. KnockoutJS is developed by @stevensanderson who works for MS so you could say it might be best to use that as it maybe more main stream and a more common requirement for employers to see you know it. I’ve heard arguments that AngularJS & BackBone provide the ability to write a more larger scale JS application where Knockout only provides JS type data binding and validation so again this is beneficial. I also discussed with someone that they and their company evaluated all of them and decided that the learning curve was too high for each and they went with jQuery and various plugins and Mustache for binding scenarios.

Obviously there are arguments that you should use a library/framework that supplies the solution to your requirements but generally developers want to learn something that will have long lasting benefits to them, yes they learn things for the sake of it but mostly it will benefit them in the long run, for example, you don’t hear of much use for the Whitespace programming language do you? So whilst there is an obvious push for more intensive use of JavaScript there still seems to be some sort of barrier to entry in deciding upon the correct path to take. Maybe over time the strongest will survive but whilst you’re waiting 1-2 years for something to mature you’re possibly losing business.