Kendo UI Mobile Guidance

Over the past couple of months, I've been thinking about and compiling pragmatic development tips regarding Kendo UI mobile widgets and application tools. What resulted is a guide book and a demo application called "whats-er-name" that together provide an opinionated development style and definitive set of prescriptions for using Kendo UI mobile.

In this article, I'll introduce the guide and the sample application used by the guide. But, before we do, we need to cover some prerequisites required in order to take advantage of them.

Before You Go Seeking Guidance

To get the most out of the guide and sample app, you'll need to be comfortable with some common concepts and tools in front-end development. To help, I've list some prerequisites and associating links below covering what each item is and where you can learn more.

Before reading the guide or running the associating demo app, you should minimally be versed in the following concepts, tools, and JavaScript patterns:

• Single Page Applications - What is it?
• Kendo UI Mobile Widgets & Application Logic - Learn it | Docs
  • Using Kendo MVVM in a mobile application
  • View Parameters
• Declarative JavaScript - What is it? | Learn it
• MVVM/Data Binding (specifically Kendo UI MVVM) - What is it? | learn it | Docs
• Kendo UI DataSource - What is it? | Learn it | Docs
• Kendo UI Templates - What is it? | Learn it | Docs
• Command-line/Terminal - What is it? | Learn it
• NodeJS - What is it? | Learn it | Docs
  • NPM - What is it? | Learn it | Docs
  • Bower - What is it? | Learn it | Docs
  • gulp.js - What is it? | Learn it | Docs

You do not need to have expert or intermediate knowledge of these things. You simply need to have some introductory knowledge from which to build. But, having no knowledge at all will surely be an obstacle in grokking the insights and prescriptions. If you are unfamiliar with any of the prerequisites mentioned, I'd suggest becoming familiar, before approaching the guide and sample application.

Another possible resource that might prove helpful to consume before approaching the guide is the "Kendo Mobile Sushi Demo" on Github. This mobile app demo provides three different patterns (declarative instantiation only, declaritive+MVVM, and AngularJS) for coding a Kendo UI Mobile application. By studying the sushi application and the different patterns for creating a mobile app using Kendo UI, you will be well-equipped to make sense of my guide and the whats-er-name app.

The whats-er-name App

Any good, comprehensive developer guide includes both pragmatic prescriptions, as well as demonstrations of these prescriptions in action. I knew I couldn't just talk about what was ideal I had to actually show it, too. Thus, I designed and developed the whats-er-name application to provide the context necessary to write and bolster the insightful-ness of the guide.

What exactly does the application do? It captures head-shots and names for the purpose of memorizing a group of peoples' names. The impulse for this application was to help me memorize the names of each child on my son's football team.

Below is the wireframe I drafted when spec'ing out the whats-er-name application.

You should familiarize yourself with the whats-er-name code (i.e. download, build it, use the app preferably on a real device) before reading the guide. By doing this you'll be ideally positioned to get the most out of the guide.

As you examine the application, keep in mind that the whats-er-name code was written for the purpose of crafting the guide (so, for instance, storing image data URIs in localStorage is not an ideal solution). In other words, pay attention to the rationale around the total formation of the entire application rather than to a specific individual part of the application. With that said, I do think you'll find the application more complete than a typical demo application.

Below is a small video walk-thru of the whats-er-name user interface functionality in action.

By doing a deep dive into the details (i.e. structuring and architecture) of the whats-er-name application, you'll not only find guidance on Kendo UI mobile development, but also several aspects of general front-end engineering.

The Guide Book

The first thing I want to stress about the guide book is that it's not intended to be an introduction to Kendo UI mobile. It's possible that a developer could catapult themselves into Kendo UI mobile development from reading it. But, if a proper introduction is what you are after, I'd suggest that you first turn to the docs, a pluralsight course, or the falafel field guide. Personally, I'd just read the docs to get a basic idea of the Kendo UI mobile offering.

The guide can be broken down into the following three conceptual sections.

• Kendo UI Mobile Do's
• Kendo UI Mobile Cautions & Don'ts
• How To Build An Kendo UI Mobile Application (a detailed explanation via whats-er-name)

The last thing I want to say about the guide is that it's focused on Kendo UI mobile widgets and application logic. It's not mingled with AngularJS or hybrid development (i.e. AppBuilder) as they relate to Kendo UI mobile. The guide is purely focused on the Kendo UI mobile offering. In the future, the guide may be extended to include insights into both AngularJS development and hybrid development.

Go Get it

If you're ready to get started with the guide and sample application, then the last detail you need before heading off into Kendo UI mobile nirvana is where you can find the resources.

The whats-er-name application can be found, cloned, or downloaded on github.

The source for the guide book can also be found on github but you can read it right now by simply visiting the following https://github.com/telerik/kendo-ui-mobile-guide.

My hope is that the example application and guide will help reduce a long ramping-up phase or steep learning curve that developers may experience by using Kendo UI mobile. It's an honest offering of exactly how I would implement the tool to my advantage, while avoiding anything that could cause a disadvantage.

I'm open to feedback, issues, or pull requests on either resources. Additionally, I'll be using the guide and app as material for my presentation at the Telerik Next conference in Boston, Massachusetts May 3-5, 2015). Come and join me!

Header image courtesy of Luke Ma