Telerik blogs

Oh, the luxuries of life at the spa. Sitting in a quiet room with low light, gentle music, and being pampered by attendees. It's the spa life for me.

a spa

(image from panpacificvancouver)

Wait, no. Sorry - not that spa. I'm talking about SPA's - Single Page Applications - the idea of building a web site or web application that only loads a full page of HTML from the server, once.

SPA's don't need to do a complete server refresh to get new content. Instead, they update through JavaScript, making calls to various APIs to get new content as needed. Some SPA's will provide the appearance of page navigation, allowing browser bookmarks and link sharing, but this optional. Some SPA's have a large amount of functionality and cross the boundaries of multiple "pages" without doing a full server refresh. Others, though, are less complex. SPA's can provide a high level of interactivity, but they do have to. It's a very nebulous idea, but one that is becoming ever more popular as JavaScript engines and frameworks become more powerful, and as features of the HTML, JavaScript and CSS standards make it easier for us to build this level of interaction.

Kendo UI has provided an MVVM implementation for some time now, which is a popular pattern for organizing code and building SPA sites. With the most recent release of Kendo UI, though, we've added a few additional peices to make the luxurious lifestyle of SPA development even easier. So sit back, enjoy the cucumber infused mineral water and tranquel environmental sounds. We'll be starting your DOM massage shortly.

The basic massage package

Kendo UI has long provided the ability to render HTML templates, bind a ViewModel to the HTML, create controls and widgets through data-* attributes, and more. All of this provides a foundation for building a view layer in a single page app, but wiring it all together has largely been left to the individual developer in the past. With the introduction of kendo.View, though, the orchestration of these peices has been consolidated in to an easy to use API that provides a better semantic understanding of the functionality it encapsulates.

If you're coming from another framework like Backbone.js, the Kendo UI View is going to be very different and very minimal. Rather than providing a lot of behavior and functionality, the Kendo UI View is more strictly a view in that it is only the visual portion of the MVVM setup. It is equivalent to a Ruby on Rails or ASP.NET MVC "view" in how it works and what it does.

To get a View up and running, you need two things:

  1. An HTML template to render
  2. An instance of the kendo.View object

Once you have those, you can .render the View instance in to the DOM.

var kittehView = new kendo.View("<img src='http://placekitten.com/300/200'>");
kittehView.render("#someElement");

The result is an adorable kitteh from PlaceKitten.com:

The template doesn't have to be anything more than a simple string of HTML, as shown here. But it can be much more than that.

Deep tissue massage package

When the application in question will have multiple views that are rendered, and the HTML template should not be visible if it is not being rendered, a <script> tag can be used with a custom type attribute. Having a custom type attribute will prevent the browser from rendering the contents of the tag, but still allow access to the contents.

<script id="kitteh-template" type="text/x-kendo-template">
  <h2>TEH KITTEH</h2>
  <img data-bind="attr: {src: url}">
</script>

When an HTML template is provided in this manner, the id of the script tag can be supplied to the kendo.View instance directly. A kendo.observable can also be provided as a model in the options parameter for the view.

var kitteh = kendo.observable({
  url: "http://placekitten.com/301/201"
});

var kittehView = new kendo.View("kitteh-template", {
  model: kitteh
});

kittehView.render("#someElement");

The result is yet another adorable kitty picture, this time with a title above it:

The model is a standard Kendo UI MVVM observable object that contains any data and/or functionality that is needed for the view. This allows all of the usual behaviors of an MVVM, including the ability to respond to events, do data-binding, and more.

There are still other options that can be passed in to a view, and other things that can be done with it. For more information, check out the full API documentation.

Additional SPA packages

The kendo.View wraps up a lot of the pieces that have been around for a while to create a simple API and a more meaningful set of semantics that help us build Single Page Apps. But this isn't the only thing that the latest Kendo UI release gave us. The use of a kendo.Layout, for example, allows us to swap out DOM content within a sub-section of a view. We can also use a kendo.Router to provide navigation capabilities in our app, letting our users bookmark a link or share it with friends.

There's more to building a SPA than just these three peices, as well. Good application architecture, layered feature sets, and understanding when a Single Page App makes sense vs when we would want to do a complete server round trip are equally as important. All of this, and probably more, will be covered in future blog posts, though. For now, getting started with a kendo.View should help to get things rolling.


About the Author

Derick Bailey

About the Author
Derick Bailey is a Developer Advocate for Kendo UI, a developer, speaker, trainer, screen-caster and much more. He's been slinging code since the late 80’s and doing it professionally since the mid 90's. These days, Derick spends his time primarily writing javascript with back-end languages of all types, including Ruby, NodeJS, .NET and more. Derick blogs atDerickBailey.LosTechies.com, produces screencasts atWatchMeCode.net, tweets as @derickbailey and provides support and assistance for JavaScript, BackboneJS,MarionetteJS and much more around the web.

Comments

Comments are disabled in preview mode.