MVVM in the web world

Introduction

Lately I have been experimenting with some web and I must say. the web is really making really amazing advances. The JS libraries out there are pretty awesome and make your job much more fun that it was a couple of years back !

One library that really really impressed me is (no not JQuery even though I must say I am quite impressed with JQuery as well !!) Knockout.js. The idea behind Knockout.js is to introduce MVVM to the world of web… One might ask does it even make sense to introduce a pattern like MVVM, how will it work without data binding capabilities ?? Well easy, bake binding capabilities in the library Smile and that is what Knockout.js is all about.

I will not give a deep dive to knockout but I will just show some of the capabilities of this library and then explain why I see this library playing a big part of web development we know today.

Binding capabilities of Knockout

So for those that are used to XAML technologies binding is our bread and butter. You can databind to properties in the view model to any DependencyProperty in an element. With Knockout the same features are available… Lets have a look

Knockout as the awesome JS library that it is uses unobtrusive javascript which really means it uses attributes to specify behaviour thus if JS is not enabled, no big deal everything would render since browsers ignore attributes that they do not understand.

To set the datacontext you call ko.applyBindings(viewModel, domElement) the second parameter is optional and if you do not set it, binding will be applied to the root element (and yes binding works like DataContext in XAML its “inherited”.

To specify a binding you specify the data-bind attribute to the element and inside you specify the type of binding and to which property

image

There are many types of bindings (by type I mean the “text” in this case part of the binding). You can see the full list here.

As I said I am not going to do a deep dive since the documentation for knockout is pretty awesome but here are some highlights for those that are used to XAML binding.

In XAML we are used to convertors if for example we have a bool property and we want to control Visibility; in Knockout you just put the code there and then. If you want to bind to more that one property just seperate it with a comma Smile simple; easy; AWESOME

image

For example in the above snippet I am binding the css class to be negativeTextBid if the negative property is greater or equal to positive BUT if it is the other way round then I am setting positiveTextBig. And yea I am also binding the text to count property in the same line. Wuhu!! You can imagine what one can do with such binding capabilities!

Ok so cool what about updates, if I change a property in my ViewModel how do I push it to the UI. Well in XAML we have INotifyPropertyChanged in Knockout.js we have ko.observable();

image

An observable will do all the work of looking up who is referencing it and give it the update. One other really awesome thing that comes in Knockout is dependantObservable (or also known as computed properties). This is a property that has a function and the function depends on other observables thus when one of those observables changes also the computed property/ dependant observable will fire a notification to the UI.

image

For collections (i.e. INotifyCollectionChanged for those XAML guys reading) there is ko.observableArray();

Speaking of which.. So how would you leverage a ko.observableArray?

Is there something like ItemsControl?

hah of course… There is something called the foreach binding… you put it for a div and magic happens

image

What about DataTemplates like stuff? well Knockout can also be used with JQuery templates to do this sort of stuff. Read more here

Ok so hang on tight for some more coolness…

What about commanding

In XAML technologies we have command that would link for example a button click to some sort of action/functionality in the ViewModel. In knockout this is just a normal databing called the click binding. Read more here

image

and yes you can go beyond click. There is event binding, selectedOptions binding and many others…

So why would you want to have ViewModels in javascript?

Well today’s web is quite complex and having code running around, manipulating DOM elements after getting responses from AJAX calls can become one giant nightmare. By having a “UI layer” that separates the concerns where the HTML is your presentation and the viewModels in Javascript are the facilitators for the presentation data, then have a binding mechanism that glues the 2 together; is really a dream come true. Thank you Knockout!

One must understand that Javascript of 2012 is not the same as we know it a couple of years back where it was really a scripting language to do small things that you could not do declaratively in html. With the introduction of AJAX Javascript started growing and growing into a full fledge language that many today work with everyday to build compelling web applications. So YES you must ensure that you apply the proper patterns even when doing Javascript! Fail to do so and you will get stuck in nightmares and hate the web with all your might !

Knockout really enables you to clean up your presentation layer and introduce MVVM to it. It does so by giving us Databinding capabilities and a whole bunch of utils to facilitate javascript development for the presentation layer.

If you did not try it already, I suggest you give it a shot!

Knockout you truly knocked me out !

Thinking in boxes

So if you have been following my blog lately you would have noticed I am doing some adventures in HTML lately… No I am not leaving my XAML love behind I just feel that I should look at other stuff and get ideas from different technology stacks.

Introduction

In todays article I want to show how layout specifically one nicknamed as the “Traditional Box Model” comes in handy to know for those that like me come form a XAML background, a background which has a rich layout system, a background where panels are the kings of the realm. We’ll see how in HTML, yes this is a bit harder, but very achievable. We will also see how HTML5 and CSS3 introduces some really cool concepts and how layout becomes comparable to XAML layout and panels.

I remember back in the days when I used to do web (around 6 years ago) many would layout the page by using a <table />. Yes a table believe it or not! You might ask yourself “but a table is really for displaying lists of data no??”. Well layout is not really the most intuitive thing to figure out in HTML and devs love shortcuts thus yes; tables were (and in some cases still are) a tool to do layout. But is it the best way to do layout?? No, its not really… A more flexible way to do layout is by using divs. Enter the “Box Model”.

Box Model

Lets say we wanted to do something like this

image

 

 

 

One way of picturing this layout is that every box is a div (some might argue it doesn’t really need to be a div but really any element that has display: block, but for simplicity, let’s say divs for now). A div by default will occupy all the width available, so if we had the following HTML the output would not really resemble the layout we have in the image here.

 

image

This would actually render into something like this

image

Blue div == ‘mainSection’; Red div == ‘sideSection’;

In order to get these 2 divs side by side, we need to specify a CSS property called float. You can specify left, right, none or inherit. In our case we will want to set the mainSection to float: left and the sideSection to float: left. The piece that many forget to add, which then results in chaos is to set to the next element (in our case the footer) the css property clear: both. This will restore the flow of the document and basically in our case it will prevent the footer from going up on the side of the sideSection div.

So here is the CSS styling we have done so far

image

And here is the result we got

image

 

Nothing really changed did it?? Nope it did not. And the reason for that is that as I was saying before a div will occupy the full width available by default. What we can do here to make the mainSection and sideSection layout side by side is to set a width for the divs. And we finally get a result that looks like this

 

image

What is annoying here is that we had to specify a width to both divs… In all fairness the sideSection can stay without a width and this would make it occupy the reminder width inside the page. That’s cool BUT we want our mainSection to take the dynamic width and not really the sideSection, right? Yes you can do it with the Traditional Box Model BUT instead lets have a look at how we can do this and much more using the new hot stuff from HTML5 and CSS3.

Enter “Flexible Box Model”

The flexible box model is still something that browsers are experimenting with in fact you’ll find that you will need to annotate the properties for this with –webkit and –moz- and –ms . don’t you love experimental things Smile Anyways, the idea with this is to be able to be more dynamic, to have a proper way how to specify layout. With this model you’ll be able to specify if you want the flow to be horizontal or vertical (just like orientation in StackPanel for those XAML guys reading) you’ll be able to specify how much “percentage” of the space available vertically/horizontal should a box take up (just like ColumnDefenitions and RowDefinitions in Grid for those XAML guys reading). You will also be able to specify the alignment and yes also the index you want each box to be in…

Does this feel more like panels in the XAML world. WUHUU now we are talking …. so let’s pimp up our screen with some hot and spicy HTML 5 / CSS3.

Let’s start fresh… here is some new HTML … Basically a parent div with 4 divs and lets start rocking!

imageThe first thing we want to do is tell the container div that we want to use the new box model. To do so we set display: box. Since this is experimental still we need to specify display:-webkit-box;

As I was saying the new flexible box model supports orientation, you do this by specifying box-orient. As expected this takes horizontal and vertical . P.S do not forget to add the –webkit- and all the rest.

 

image

And this gives us

image

This might look like its nothing but hey we just started… Ok seems like these boxes are only using the width that the inside text measures, lets make them use all space available evenly (just like we would do with a XAML Grid)

To do so we use another cool CSS3 feature. The magic property is called box-flex.

image

And this gives us

image

Already very exciting isn’t it?! What was that 1 we set to box-flex. The 1 is basically being used in the following formula >> widthOfParent * 1/numberOfElements = widthForElement (ex: 600 * 1/4 = 150). For example if I set 3 for one of the boxes, I get this result which is Box3 is as big as the other 3 boxes all together. (doesn’t it sound like a * measure for ColumnDefinitions in XAML Smile )

image

Yes resizing the browser window will nicely resize these boxes just like one would expect. AWESOMENESS on a stick!!!!!

What if I want that all boxes are 100px BUT (since I am a crazy evil designer that likes to bully developers) I want them to be all centred in the middle of the screen. Well to give each box a size we know what we have to do, set the width css property. To specify how to layout them there is a new CSS3 property called box-pack. This property will tell the Browser how to distribute the free space. You can set this to start, end, center and justify. Lets go for center (-webkit-box-pack:center;) and we get something like this

image

if I specify –webkit-box-pack: justify I get this

image

What if we want to change the rendering order of the boxes? CSS3 to the rescue Smile box-direction a new CSS property will do the trick by setting it to reverse. –webkit-box-direction:reverse

image

image

 

 

And yes you can even change the order of the boxes (just like a XAML Panel) by specifying the box-ordinal-group

image

image

 

 

Last but not least is box-align which can be center, left, right and also stretch.

 

 

Conclusion

Check out more details on this over here. I hope that this article really shows you that HTML5 and CSS3 are really making some very cool and exciting things for us devs. If like me you come from a background where layout is something really rich (which in any XAML technology, layout is super easy to work with) HTML5 and CSS3 are building mechanisms to be leveraged and easily build awesome web applications.

I am very excited about this, layout sometimes is taken for granted but what is a good UI platform without a good and flexible layout system. Thankfully HTML5 and CSS3 are here to rescue us from the evil designer requests Smile