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.
I’m going to copy Derick Bailey here and quote Justin Meyer…
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.
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.
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.
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..
- Getting Started With RequireJS
- Alex Sexton On jQuery’s Best Friends
- Rebecca Murphy On PubSub
And don’t worry; rumors of my death by camera have been greatly exaggerated. :)