Inheritance With Kendo UI

If you have been reading some of my other blog posts on things like the DataSource and Models, then you know that I like to talk about some of the lesser known features of Kendo UI.  Kendo UI is more than just great looking widgets with amazing features.  It’s an extremely powerful tool in your JavaScript development arsenal.  The fine team working on Kendo UI knows their JavaScript and has exposed some of what they implemented for you to use as well.

One of the things that tends to happen quickly in JavaScript programming, is that those of use coming from Object Oriented backgrounds get frustrated with the quirkiness of JavaScript’s Object Model.  It’s somewhat counter-intuitive when it comes to things like simple inheritance strategies and oftentimes we give up and just start chaining elements until we’ve built “the monster”.

It’s essential that we take some of the fantastic structure and DRY principals from OO and use them in our JavaScript development.  Especially as JavaScript plays more and more of a role on the server (Node.js anyone?  I see your zippered hoodies out there.).

Douglas Crockford wrote what has really become the definitive book for JavaScript development called “JavaScript: The Good Parts”.  If you are a JavaScript developer and don’t own that, you should buy it immediately.  Since then, the following image has been seen many times on the web.

It’s funny, but not really.  Ok, it’s really funny.

Is that much of JavaScript really all bad?

No!  JavaScript is a great language that was originally created in – hold on, let me jump over to Wikipedia and look this up – 1995!  And here we are today building the next generation of rich applications on that language.  If it was bad, it would not have survived.

Oh contraire.  JavaScript is quite an elegant language that is described as a

“prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented,[6] imperative, and functional[1][7]programming styles.”

- Wikipedia   (See!  I told you I was going to Wikipedia!)

Wow – that’s a lot of ability in one language.  Functional languages are powerful, but when you are able to add in OO principals, it get's really beautiful.

Enough already! Let’s see some inheritance…

You can create a new object with Kendo UI by calling kendo.Class.extend to define it.

var person = kendo.Class.extend({});

That creates a new Person object. We can now add some properties to that person object, as well as any functions that we want to create. Object literal notation is used here, so variables are declared with a : separating them from their value instead of an =. Also, we use the "this" keyword to reference local variables inside the object. Failure to specify the context will result in the variable not being found.

Notice I set the "isAPrettyCoolPerson" boolean to false by default? I'm a glass half full kind of guy!

var Person = kendo.Class.extend({
    firstName: 'Not Set',
    lastName: 'Not Set',
    isAPrettyCoolPerson: false,
    sayHello: function() {
        alert("Hello! I'm " + this.firstName + " " + this.lastName);
    }
});

var person = new Person();
person.sayHello();

We can also add a constructor for this object by including an "init" method. We could then create a new person by newing up a new Person object. We’ll create a new John Bristowe.  We’ll also set his “isAPrettyCoolPerson” to true since he’s the bees knees.

I bet you didn’t know it was that easy to create your own Bristowe.  It is.

var Person = kendo.Class.extend({

    firstName: 'Not Set',

    lastName: 'Not Set',

    isAPrettyCoolPerson: false,

    init: function(firstName, lastName) {

 if (firstName) this.firstName = firstName;

 if (lastName) this.lastName = lastName;

    },

    sayHello: function() {

        alert("Hello! I'm " + this.firstName + " " + this.lastName);

    }

});

var person = new Person("John", "Bristowe");

person.isAPrettyCoolPerson = true;

person.sayHello();

Now we can instantiate a new person object of type parent that inherits the properties of Person by extending the base person object.  Here I’ve created an instance of my Dad who is a parent.  My dad’s also a really cool person so we’ll toggle that on.

var Parent = Person.extend({

    firstName: 'Mark',

    lastName: 'Holland'

});

var myDad = new Parent();

myDad.isAPrettyCoolPerson = true;

myDad.sayHello();

alert(myDad.isAPrettyCoolPerson);

Notice how much even Chrome hates alerts?  It’s like, “that first alert was cool, but 1 is 1 too many.”

Now a child would inherit some, but not all properties from their parents. I inherit my father's last name, but I override the first name since I have my own. Also, since my dad is a pretty cool person, that's a trait that I should inherit from his as well right?

var Child = Parent.extend({});

var me = new Child();
me.firstName = "Burke";

me.sayHello();
alert(me.isPrettyCoolPerson);

WHAT!

Apparently I didn’t inherit that trait.  Actually I did.  I inherited the same trait my father did from the person object.  Because “isACoolPerson” was set after my dad was created, it is specific to his object instance of Parent.  And by default, parents are not cool people.  Just ask my kids.

Here is the complete fiddle for you to play with sans alerts.

Next Steps

That’s it for now.  Go ahead and familiarize yourself with inheritance with Kendo UI.  In the future I’ll show you how to wrap Kendo UI widgets in classes so you can re-use properties and keep your code as DRY as possible with OO principles like inheritance.  We might even do a SINGLETON!!