Building Really Big Applications With Kendo UI

Introduction

I would like to make a brief introduction this morning. My name is Burke Holland and I am a Developer Evangelist on the Kendo UI team. That name might jog your memory just a bit. I used to write blog posts and do tutorials / screencasts on how to use HTML5 and Kendo UI. As of late, you might have asked yourself - “Self, what happened to that bald guy who used to write for Kendo UI.” As it turns out, Mr. Clint Lechner actually nailed it when he pinged me over Twitter last week.

HTML5 Camera

Now this tweet makes little to no sense unless you know about my pet project, HTML5 Camera. This was a side project that I started after learning about getUserMedia and WebRTC. Even more interesting for me in working on this application was the chance to work on a large project built entirely in JavaScript. When I say large, I mean hugenormous. There are over 10K lines of JavaScript code in this project. SRSLY. This makes it an interesting challenge as it is no secret that you cannot build large applications in JavaScript.

I’m going to copy Derick Bailey here and quote Justin Meyer…

However, breaking up a large JavaScript application into “bit-sized pieces” isn’t exactly straightforward. Mostly because JavaScript has an inherent lack of a module system. Beyond that, it’s difficult to know exactly how to break up a large JavaScript application so that it best scales. That’s going to depend a lot on what frameworks you use. This is where libraries like Backbone and Ember really begin to shine. The goal of these libraries is to provide your front-end code with some structure so that you can in fact build “bite-sized” chunks that you can assemble into a larger application. The truth is that the browser is no longer just for displaying markup and animating menu items. Business logic, models, and even data storage have crossed over and now live in the browser.

Kendo UI And Large Applications

In the case of Kendo UI, you can use other libraries like Backbone to help structure your code. In fact, Derick does this quite frequently and is a big fan of the combination.

For HTML5 Camera, I did not use a third party pattern library so I want to break down what I used and how the application is built. This is by no means the gospel for building large JavaScript applications, but should give you an idea of some of the options that you have when building these types of applications with Kendo UI.

RequireJS

Everyone learns everything somewhere.  I know that’s a shocking statement, but I think sometimes we assume understanding is inborn.  Especially when some people make it look so easy. For me, the real eye opener was Alex Sexton’s talk called “jQuery’s Best Friends”. I’m dropping a lot of names here, but these people have been influential for me and I simply want to pass on to you what I have gleaned from them.

In this talk, Alex mentions RequireJS. You may or may not be familiar with this library. RequireJS is an implementation of AMD JavaScript Modules. The idea here is that you will write modules which will have no knowledge of each other at all. These modules will talk to themselves, but won’t take any dependencies on other modules. In fact, they can’t even talk directly to other modules. Instead, they are going to use messaging - often referred to as PubSub to send and receive commands from other modules. I’ll talk more about PubSub in a minute.

RequireJS does quite a bit. It allows you to specify dependencies for a particular script, and then makes sure that those external scripts are loaded before the dependent code is executed. This is really the backbone of a large JavaScript application. This will be the glue that holds everything together. RequireJS can be a bit tricky to get up and running with, but I used this article and found it quite easy once I got rolling. That article uses Backbone and Underscore, but I replaced that with jQuery and Kendo.

Project Structure

When structuring your project, it’s essential to really define what your modules are. You might even have modules within modules. There is nothing saying that you can’t. In fact, there is nothing that says you have to do anything a particular way. You should do it in the way that helps you best write maintainable and scalable code. Let’s take a quick look at HTML5 Camera.

I have outlined each of the modules in a hot pink square. You’re welcome. Notice that each image on the right-hand side is a module. The different live effects are all 1 module, and the button that cycles through the effects is still another module. Each of these modules is contained in its own folder and has it’s own view. A view is simply a Kendo UI Template that gets rendered by the module and attached to the DOM. Each module is unaware of where it will be on the page. It receives the ID of a container, and then attaches itself as the immediate child of that container and uses the view as its contents. Here is a sample of the folder layout I used for all of the HTML5 Camera JavaScripts.

Each folder represents a module. Not all modules have a visible interface ( view ), but most do. The customize module allows the user to click on an image and bring up a Kendo UI Window which has Kendo UI Sliders and allows the user to adjust the brightness, contrast, hue, saturation and other effects.

Messaging With PubSub

As I mentioned before, these modules are completely clueless about each other. The thumbnail images have no knowledge of the camera and vice versa. The camera itself has no knowledge of the effects. It only knows how to display the feed and capture an image. The idea here is that you should be able to take any of these modules, drop it on any HTML page with jQuery and Kendo UI, and it would still work. In order for these modules to be able to come together as a full application, they do in fact need to talk to each other. This is done with PubSub messaging. I highly recommend that you stop right here, and watch Rebecca Murphy’s quick video on getting started with PubSub. It’s simple, it’s brilliant and it will change how you build applications.

Are you back? Did you watch the video. I wasn’t kidding when I said to watch it. Watch it twice if you can.

Now that you know what PubSub is, it makes sense how the modules will talk to each other. One thing that comes up when building these applications is, “When do I use PubSub, and when do I just call a function directly?”. Brandon Satrom and I are in agreement that a good rule of thumb is that within the module itself you should call functions directly. By and large it doesn’t make sense for a module to publish messages to itself. There are of course ALWAYS exceptions to every rule so take that as a general guide. Conversely, never call a function on another module as you will have to take a dependency on that module to do so, which is not what you want. Use PubSub to communicate with other modules, even if those modules are ultimately contained in the current one.

Using Kendo UI MVVM

If you are used to patterns, and specifically the MVVM pattern then you may be wondering if it comes into play here at all. The answer is, yes, but only where it makes sense. Do not feel like you need to use MVVM everywhere because you used it once. Use it where it makes sense and leave it out if it doesn’t. In HTML5 Camera, the customize window is a prime candidate for Kendo UI MVVM as each slider needs to update as it’s moved. It makes perfect sense here.

That is in fact the only place where I use MVVM in this application.

But How Much Kendo UI Is Really There?

You have probably noticed that Kendo UI is not readily visible via widgets everywhere you turn in HTML5 Camera. This is true. In fact, it really only uses the Kendo UI Slider and Kendo UI Window widgets. However, this application is fundamentally structured on Kendo UI Templates and Animations. The DataSource is also used to cycle through effects with paging. I realize that there hasn’t been much written on animations (this is forthcoming - I promise), but they are great in that they use CSS 3 transitions when they available and fall back to jQuery Animate when they are not.

YOU HAVE BEEN WORKING ON A CAMERA APP ALL THIS TIME??!?!?

Yes and no. We have been working with Google on some forthcoming technology in Chrome that I will be blogging about very shortly. The camera application was just the vehicle we used as our test to break some new ground both in the areas of Kendo UI and Chrome. Keep your eyes and ears peeled as we reveal more of this in the coming weeks.

For now, you can download HTML5 Camera from GitHub and have a look at the project.  There is no README at the moment, which I realize is a cardinal offense, but I just haven’t had the chance to create a proper one and I don’t want to withhold the code from you on that basis alone.  It’s a Node based Express application so you will need to get that up and running if you want to actually run the app on your machine. The important thing here is that you understand the logical structure of the project and get some resources for how to go about building a large application. So lets recap. What you need to review from this post is..

1. Getting Started With RequireJS
2. Alex Sexton On jQuery’s Best Friends
3. Rebecca Murphy On PubSub

If you take the time to review and digest each of the above items, I think you will find a vast amount of clarity in how to go about building graceful, maintainable and scalable applications with JavaScript. You can even use the r.js optimizer to take all of your development JavaScript code and uglify it, then slam it into a single file which will go at the bottom of your page(s), effectively obfuscating your code to a degree.

And don’t worry; rumors of my death by camera have been greatly exaggerated. :)