Sexy html! Thank you JQuery! Gray hairs be gone!

Anyone who has worked with JQuery cannot deny the absolute simplicity it brings to the table in terms of animation. (This is definitely not the only thing JQuery is great at but what I am focusing on today)

Behind every webpage is ‘Private’ HTML

Having your own intellectual property out there for the world to see could be seen as an open invitation for some people to have a look at your code and make it their own.

Behind every good webpage is even better HTML. This HTML should be protected in more ways than one, but just how private is your HTML code when users are able to view the source code with just two clicks?

Modular JavaScript with RequireJs

"RequireJS is a JavaScript file and module loader"

While looking at some of the familiar namespacing patterns for JavaScript, I stumbled upon RequireJs.
Namespacing is essential in JavaScript to provide scope to your code in order to prevent conflicts with other variables, objects or functions with the same name that could have been loaded into the global namespace or scope.
There are no official namespaces in JavaScript but this can be achieved using objects and closures.

JavaScript unit testing with QUnit

All developers will agree that web development goes hand in hand with client side coding to be able to provide a rich user interface to their users which is prettier, more responsive and impressive. Having that said it should be equally important that we not only unit test our server side code but also client side as well. 

KnockedUp: Customizing the use of KnockoutJs

I blogged previously about a nifty little library called KnockoutJs.

To bring you up to speed, here is a typical example on the original usage of KnockoutJs:

Note that you have to specify all your bindings for an element in the data-bind attribute.

This got me thinking...

Doing all these bindings in one attribute may become untidy and unreadable. On the HTML, I wanted a way to explicitly define my bindings as attributes on a specific element.

...then KnockedUp was born

I created a library (dependent on JQuery & KnockoutJs) that gives you the same result as KnockoutJs and called it KnockedUp :) .

KnockedUp allows you to specify your data-bindings explicitly as normal attributes and not as in line values of the "data-bind" attribute. What this library does, is converting the KnockedUp syntax to proper KnockoutJs syntax.

These attribute-based bindings must start with an identifier, in my case "ko-". You can then have your HTML as:

Choose a ticket class:
<select ko-options="tickets"
        ko-optionsText="'name'"

        ko-optionsCaption="'Choose...'"

        ko-value="chosenTicket"></select>

<button ko-enable="chosenTicket"
        ko-click="resetTicket">Clear</button>

<p ko-with="chosenTicket">
You have chosen
<b ko-text = "name"></b>
($ <span ko-text = "price"></span>)
</p>

KnockedUp will scan the body for elements that contain attributes starting with "ko-" and add these attributes as values to the applicable data-bind attribute of the applicable element, then KnockoutJs will kick in and perform its magic.

Usage

Simply add the reference to KnockedUp and just before calling the "ko.applyBindings(...)" function of KnockoutJs, just call KnockedUp's function - "ku.applyMappings()":

ku.applyMappings();

ko.applyBindings(new TicketsViewModel());

You can download the plug-in here - It's only about 800 bytes!



Disclaimer: Please note that this is currently only in beta phase as its only a concept for now.

Tweet me @FanieReynders for any questions!

Cheers

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