It's an exciting milestone day for Kendo UI today! We just released the public beta for Kendo UI Mobile, the third piece of the Kendo UI story (joining already released Kendo UI Web and Kendo UI DataViz). We know a lot of you are very excited about doing mobile development with HTML5, so we're stoked to deliver this beta and get your feedback.

If you don't need to know anything else, go download the mobile beta now!

For everyone else, let's talk a little bit about what you will- and won't- find in this first public beta.

Why Kendo UI Mobile?

Let's answer the major question first: why should you use Kendo UI Mobile? Certainly, we're not the first to create an HTML5 toolset for mobile development, so what makes Kendo UI Mobile special and worth your time?

At it's core, Kendo UI is taking a unique approach to mobile HTML5 UI widgets by delivering a system that automatically adapts to the look-and-feel of your target device.

For example, if you visit the new Kendo UI Mobile beta demos, you will start with a demo that looks like this:

image

Clearly, it's an app that looks like an iOS app. The navigation bar is on the bottom. The title bar is on the top. The styles are all very iOSy. It looks and feels "right" for an iOS app.

Now direct your cursor to the upper-right of the online demos page, and you'll see a little drop-down that let's you switch between a simulated iOS and Android device:

image

Making the change to Android switches the simulator to "Android mode," and with it, our same Kendo UI Mobile app looks a bit different:

image

Now our navigation bar is on the top of the app. The title bar is hidden. The list formatting looks a bit different. And the styles are now very Androidy. All of this happened automatically thanks to Kendo UI Mobile. We didn't have to change our app code or apply any additional logic to make this app "look right" on both iOS and Android.

Unlike other UI libraries that try to "force" a common UI across all devices, we want to make it easy for developers to build apps with HTML5 that are near-native on iOS and Android (with other platforms to follow in the future). We want to free developers to focus on their app features and functionality, and worry less about getting their apps to "look right" or "feel right" on iOS and Android.

Of course, there are other benefits that uniquely distinguish Kendo UI Mobile, too:

  • It's built on the high-performance Kendo UI Core
  • It integrates seamlessly with the rest of the Kendo UI framework (Templates, Data Source, Validation, etc)
  • It prioritizes support for the dominant modern mobile browsers over support for legacy mobile browsers
  • It's built and backed by the same professional team creating the rest of Kendo UI

What's in the Beta?

Today's beta is a stake in the ground as we continue to drive towards the official v1 release in March. It does not cover everything we will deliver with the final release, but it provides a good starting point for getting familiar with Kendo UI Mobile. In the beta you'll find:

  • 7 UI Widgets: Button, ButtonGroup, ListView, NavBar, Switch, ScrollView, and TabStrip
  • Core mobile app framework (header, footer, content area)
  • Ajax page navigation
  • Default styles for iOS and Android

You can check-out everything in a Webkit browser (a "safe" limit for now since we're targeting iOS and Android, which are both Webkit) or directly on your iOS and Android mobile devices. If you access the demos from a mobile device, you will automatically be presented with the mobile version of the demo framework (built with Kendo UI Mobile, of course):

photo

How Do You Use Kendo UI Mobile?

Using Kendo UI Mobile differs slightly from Kendo UI Web and DataViz. For Kendo UI Mobile, we've adopted an attribute-driven configuration scheme that uses HTML5 data-* attributes to turn HTML5 in to mobile widgets.

For example, let's say we want to create a Kendo UI Mobile application frame (common for mobile apps). We would start by creating pure HTML that looks like this:

<body>
   <div data-role="view">
     <div data-role="header">My App</div>
     Hello iOS and Android!
     <div data-role="footer"><!--Put Stuff Here--></div>
   </div>
</body>

Simple enough. Notice the use of data-role. This is what instructs Kendo UI Mobile to convert HTML in to specific widgets when processed by JavaScript. That conversion happens with a single JavaScript call at the end of your page:

var app = new kendo.mobile.Application(); //document.body is used by default

Kendo UI Mobile will look for data-role attributes and initialize the mobile UI widgets.

Of course, you can also use the traditional JavaScript syntax familiar from Kendo UI Web to initialize Kendo UI Mobile widgets. To initialize a Kendo UI Mobile Switch, for example, you could use code like this:

<input type="checkbox" id="mySwitch" />
<script>
    $("#mySwitch").kendoMobileSwitch();
</script>

To help distinguish Kendo UI Mobile widgets from Kendo UI Web widgets, all Mobile widgets include "Mobile" in the JavaScript API. This is important for widgets like TabStrip, which exist in both Kendo UI Web and Mobile. Initializing the Web version uses the kendoTabStrip API. Initializing the Mobile version uses the kendoMobileTabStrip API.

Data Attribute Namespacing

A quick tip for those of you that may already be using widgets or code that conflicts with the Kendo UI data-* attributes: you can easily add a Kendo UI namespace to the data attributes.

To save everyone some typing time, we did not put the Kendo UI Mobile attributes in a namespace by default. You can easily add a namespace with a single JavaScript call at the top of your page, though:

<script>kendo.ns = “kendo-“;</script>

With this line, you instruct Kendo UI to use the "kendo" namespace for all data attributes. Now, when you configure your HTML, you would include the kendo prefix:

<div data-kendo-role=""></div>

You only need to take this step if you have a conflicting library on your page, so for most people, this step is unnecessary. But if you're among the few using Kendo UI Mobile with another data attribute library, here's your compatibility fix.

Kendo UI Mobile vs Kendo UI Web

We do not fully subscribe to the idea of "Write Once, Run Everywhere." We don't think that's the main goal of HTML5.

Instead, HTML5 gives developers the ability to learn and master a single set of skills (HTML/JavaScript/CSS) that can be used to target a wide range of platforms and devices. It's a bonus that some of the HTML, JavaScript, and CSS assets developed for an app can be reused in a true "write one, run everywhere" manner.

The same holds for Kendo UI.

Kendo UI Mobile is designed to support developers creating uncompromised, tailored experiences for mobile with HTML5. The perfect example is a business that wants to expand its presence on iOS and Android with "native-like" apps, but that lacks the time, skill, or interest to build both an Objective-C iOS app and Android Java app. Kendo UI Mobile helps a business build an app that can be wrapped with tools like PhoneGap and deployed to devices, or run and installed from a browser.

Kendo UI Web, meanwhile, is designed to support the general HTML5 developer's needs. Traditionally we might think of websites or web apps as being the primary target for Kendo UI Web. These experiences often target the desktop browser and may involve more data entry and manipulation. Kendo UI Web can be used to build functional experiences for mobile devices, but those experience will not "look native."

Two tools for two jobs, each helping you deliver great, targeted results, not a mediocre experience for all.

What's Next?

Today's beta is the first step towards our next major release in March. In that release, we'll launch the official Kendo UI Mobile v1, as well as delivering a host of updates to Kendo UI Web, DataViz, and Core. Be sure to visit the Kendo UI Roadmap for more details.

With the official release of Kendo UI Mobile, we'll address all of the feedback and bugs collected during this beta, and we'll introduce new widgets and behaviors (like the "Pull to Refresh" action). We'll also be working to refine and perfect the mobile styling for all widgets, ensuring Kendo UI Mobile doesn't approach the "not quite native Uncanny Valley."

For now, download the Kendo UI Mobile beta and start sharing your feedback in our forums and the official Kendo UI UserVoice! We can't wait to continue delivering more in our quest to give you everything you need for HTML5 and JavaScript development.


About the Author

Todd Anglin

is an avid HTML5, CSS3, and JavaScript advocate, and geek about all things web development. He is an active speaker and author, helping developers around the world learn and adopt HTML5. Todd works for Telerik as VP of HTML5 Web & Mobile Tools, where his current technical focus is on Kendo UI. Todd is @toddanglin on Twitter

Related Posts

Comments