Me!

TJ VanToll

Getting Started with Kendo UI Core

| Comments

I’ve been using Kendo UI Core in a bunch of projects lately, so I thought I’d document the process I use to get Kendo UI Core up and running. Note that the workflow I show isn’t the “right” way of doing things, just the workflow I like.

Step 1) Download

I start by downloading Kendo UI Core from Bower, as it’s my preferred package manager for web apps:

$ bower install kendo-ui-core

You can alternatively download Kendo UI Core from GitHub, but Bower is my jam. (Not to be confused with Jam, which—believe it or not—is actually the name of a competing JavaScript package manager. Who knew?)

Step 2) Scaffold HTML

Next I create an index.html and paste in the following boilerplate HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bower_components/kendo-ui-core/src/styles/web/kendo.common.core.css">
    <link rel="stylesheet" href="bower_components/kendo-ui-core/src/styles/web/kendo.flat.css">
</head>
<body>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/kendo-ui-core/src/js/kendo.ui.core.js"></script>

</body>
</html>

A couple things to note here. First, my HTML follows the jQuery HTML style guide, which yes, actually is a thing.

Second, and more relevantly, I use the Kendo UI flat theme. (The import of kendo.flat.min.css file controls which theme the library uses.) Kendo UI has like 15 themes or something, but I’m a fan of the flat one. If you want to try out different themes all you have to do is switch “flat” in “kendo.flat.css” to the name of another theme. For instance changing “kendo.flat.min.css“ to “kendo.material.min.css” switches your app to Kendo UI’s new material design inspired theme.

See how the Flat theme is highlighted? That’s because it’s the best one.

Finally, note that I’m including the source files for jQuery and Kendo UI—not the minified ones. I do this because it makes debugging easier, and because I’m going to tackle minification later.

This markup makes for a decent starting point for demos and quick tests. I even keep this HTML stored as a Sublime snippet for when I need to get a quick test case up and running. And this workflow works great, but for bigger projects I want a little more structure, and a structure that’s ready to scale for bigger projects. Here’s how I do that.

Step 3) Package Management

I like using AMD and RequireJS to manage my app’s dependencies, and luckily Kendo UI Core is intelligently broken into AMD modules. To start with AMD I download RequireJS from Bower:

$ bower install requirejs

Next I create an app.js file to serve as the main JavaScript file for my app. At this point my project’s folder structure looks a little something like this:

.
├── bower_components
│   ├── jquery
│   │   └── ...
│   ├── kendo-ui-core
│   │   └── ...
│   └── requirejs
│       └── ...
├── index.html
└── js
    └── app.js

With this structure in place I switch my index.html to use a single <script> tag:

<script src="bower_components/requirejs/require.js" data-main="js/app"></script>

Then I paste the following code in as a starting point for app.js:

require.config({
    paths: {
        "jquery": "/bower_components/jquery/dist/jquery",
        "kendo-ui-core": "/bower_components/kendo-ui-core/src/js"
    }
});

require([ "jquery", "kendo-ui-core/kendo.ui.core" ], function( $ ) {

});

This gives me an entry point for my app that loads jQuery and Kendo UI Core dynamically. If my app only needs one portion of Kendo UI Core I only specify the modules I need in the require() call. For instance if I only want a MaskedTextBox I only require "jquery" and "kendo-ui-core/kendo.maskedtextbox"—i.e. require([ "jquery", "kendo-ui-core/kendo.maskedtextbox" ]).

Eventually I’ll add the RequireJS Optimizer to my app to optimize into a single <script> tag for production, but that won’t happen until I’m ready to deploy my project, and I wanted to focus this article on getting started. If you’re interested in the optimization workflow I use, check out my article on Using UI Libraries Without the Bloat.

For now I hope what I have here was helpful. If you have any other questions about using Kendo UI let me know in the comments.

Comments