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.
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:
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:
Making the change to Android switches the simulator to "Android mode," and with it, our same Kendo UI Mobile app looks a bit different:
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:
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:
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):
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:
<div data-role="header">My App</div>
Hello iOS and Android!
<div data-role="footer"><!--Put Stuff Here--></div>
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.
<input type="checkbox" id="mySwitch" />
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.
<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:
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.
We do not fully subscribe to the idea of "Write Once, Run Everywhere." We don't think that's the main goal of HTML5.
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.
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."
Subscribe to be the first to get our expert-written articles and tutorials for developers!