Building Databound JavaScript Apps with KnockoutJS

Here’s the recap of the webinar that I delivered:

Find the links to downloads and presentation on my follow-up blog.

-Nish

Advertisements

Building MVVM & Single Page Apps in JS – TechEd Relive session recap

I had a fantastic time speaking at the Tech-ed relive event organized by B.net User Group! Thanks to everyone who attended and made this fun! My special thanks to the organizers at Bdotnet – Vic, Lohith, Vinod & others for inviting me to speak here!

I spoke on topic “Building MVVM & SPA in JS” where I

Here’s the presentation deck:

Demos

Please click on the below links to download the demos:

If you have any questions write to me na[at]nnish[.]com or find me on twitter @nishanil

-Nish

Demystifying “this” in JavaScript

If you have worked with Object Oriented languages in the past and then moving to JavaScript, one of the first thing that you need to do is to understand the usage of “this” operator.

this” in other languages that are class-based like C++, Java & C# points to the object that holds the current instance of the class. JavaScript too provides a similar concept using the same this keyword, but beware! – there is a significant difference. In JavaScript functions are first-class objects and they aren’t part of anything else. So the object declared by this (termed as function context) is not determined by how the function is declared but by how it’s invoked. It means the same function can have different contexts depending on how it’s called.

This can be explained by a simple example:

 <script type="text/javascript">

        window.firstName = "WindowFirstName";
        window.lastName = "WindowLastName";

       function fullName(){
            return this.firstName + " " + this.lastName;
        }

        var person1 = new Object();
        person1.firstName = "Steve";
        person1.lastName = "Jobs";
        person1.fullName = fullName;

        var person2 = new Object();
        person2.firstName = "Nish";
        person2.lastName = "Anil";
        person2.fullName = fullName;

       alert(fullName());
       alert(person1.fullName());
       alert(fullName.call(person2));

    </script>

 

In the above code sample notice the function fullName() which returns firstName and lastName and how they access the properties using this operator.  Each alert defined here provides a different output and explains the function context in its true sense! Let’s explore each of the outputs –

alert(fullName())

Here fullName() is accessed as top-level function and remember the top-level functions are properties of window so the function context will be the window itself. In this execution the code will look for firstName and lastName in the window object which is actually set on top with values WindowFirstName & WindowLastName! So the output will be:

image

alert(person1.fullName())

 fullName is a property that is defined within persorn1 object which internally holds the reference of the function fullName. So in this case the function context will be of the calling function person2 and hence it returns values of firstName & lastName defined within the object.

image

alert(fullName.call(person2))

In JavaScript you can explicitly control what’s used as the function context by invoking a function via the Function methods call() &apply().

In this case we are invoking the function using the call() method and specifying the first parameter as it’s function context. person2 is passed to the call() method which set’s the function context as person2.  Hence the output:

image

Hope this post explained “this” in JavaScript and why you should care! You can read more on using this at the Mozilla developer Network documentation.

-Nish

‘LESS’– a better way to write CSS

css-less-nnish

Are you a programmer like me who thinks design is a planet just outside your universe? Then you know CSS is fun, exciting and easy until your website grows fat with pages and complicated layouts. If you have ever tried fixing a layout in such a page – you know what I mean. Did I talk about fixing a layout? Oh yeah thanks to all the browsers.

Many at times while writing CSS I wished I could write it more programmatically than just styling them. For e.g. If CSS had allowed variable declarations, I could have simply held the values in variables, perform few operations and re-use them in properties. But that’s too much to ask for from a stylesheet language which should just do styling!

After doing couple of research I came across LESS – The dynamic stylesheet language. I spent a few hours re-styling some of my demos with LESS and I am must say I am thoroughly impressed with it. 

Read more on my Infragistics blog ‘LESS’– A dynamic language that simplifies your CSS

Have a feedback? Let me know @nishanil

by Nishanth Anil

How to fallback when jQuery on CDN fail

google_failwhale

Google and Microsoft provide their own Ajax Content delivery network which deliver JavaScript libraries like jQuery, Knockout, Angular etc. for developers for free!

As a web developer you are more than happy to refer them on your web pages and take the full benefit of CDN. But what if they fail? You will simply look bad!

Fortunately there is a simple trick that let’s you fallback to your web server’s JavaScript files.

Check out this blog for details: Simple trick to silently fallback when CDN’s unreachable.

Have a feedback? Let me know @nishanil

JavaScript MV* Framework blog series, Getting Started with BackboneJS

Javascript-MVC-Juggle

 

JavaScript has become one of the most popular programming languages on the web. At first, developers didn’t take it seriously, simply because it was not intended for server side programming. It was a common misconception among professional developers that this language was meant for “Amateurs” as it focused only on User Interface. JavaScript got the spotlight when the usage of Ajax came to light and professional programmers gave importance to the responsiveness of the page. But now the language has become more popular than ever as the User Experience has become the key part of web development. Accessing web is not limited to browsers alone – there are lot many devices with varying screen sizes accessing the same content. With the rise of HTML5 and CSS3 the web will become more adaptive and responsive than ever and JavaScript plays a major role in it. It has also gained popularity in the server side programming which is made possible by NodeJS framework.

Increase in usage of JavaScript in modern applications demand developers to write maintainable code, separate concerns and improve testability. JavaScript is a “class” less language and it was not designed to support Object Oriented Programming, however you can achieve similar results by workarounds. So if you are a developer from an Object Oriented Programming world, then you will find it hard until you get used to it. Though there are some DOM manipulation libraries like jQuery which simplifies client side scripting of HTML, they actually do not solve the problem of effectively handling separation of concerns. You will end up writing lot many jQuery selectors and callbacks to keep the data in sync between the HTML, JavaScript and the data fetched from the server and we’re still stuck with the Spaghetti code.

Fortunately there are a few libraries and frameworks that come to rescue.

What is MV*?

Though all the frameworks out there somewhat tries to be MVC but they do not necessarily follow the pattern strictly. The idea of all the patterns is to separate Model, View and Logic that hooks the two behind which is the controller. However BackboneJS embeds the controller logic in the view itself though it efficiently maintains the separation. On the other side we do have other libraries which implement Model-View-Presenter(MVP) and Model-View-ViewModel(MVVM)pattern. For this reason we will refer these frameworks as MV* implementation.

I kick started a new blog series on my Infragistics Blog which will introduce you to BackboneJS, KnockoutJS, AngularJS and EmberJS JavaScript Frameworks.

Have a look at the first part of this series – Hello Backbone.

Have a feedback? Find me on twitter @nishanil

-Nish