5 Strategies for Building Mobile Apps with Telerik

Traveling down the mobile development road can be challenging, given the diversity of mobile projects and the diversity of strategies available to build out mobile solutions. Also, understanding all of the offerings that can help a developer execute a strategy can be challenging. In this article I am going to silo Telerik’s mobile development offerings into logical and comprehensible strategies, so that a developer can easily travel Telerik’s mobile development road and stop off where a project’s requirements are met.

Disclaimer: Most of these strategies assume that you want to use web technologies to build an application UI to reach as many users as possible either using the web platform (i.e. browser) or outputting several hybrid native applications (i.e. WebView) for multiple mobile platforms from a single code base of HTML, CSS, and JavaScript.

Strategy 1: Use Kendo UI Web Widgets With Adaptive Mobile Rendering Options & Kendo UI Data Visualization Widgets

Screenshot 2014-08-21 15.56.22Screenshot 2014-08-21 16.04.47Both the Grid and the Scheduler professional widgets offer a mobile setting that when set to true will adjust the widgets’ behavior and UI to adapt to phones and tablets (aka Adaptive Rendering). In addition to these two widgets containing specific phone/tablet rendering options the Web and Data Visualization widgets are supported on touch devices. This makes it possible to build a mobile/desktop web UI with the Kendo UI Web and Data Visualization widgets without actually using a Kendo UI Mobile widget.

To get started with Kendo UI Web and Data visualization widgets, check out the demos or read the Getting Started documents.

Notes:

  • The Grid, Scheduler, and Data Visualization widgets are part of the Professional Kendo UI Widgets sold commercially. A fully functional 30 day trial of Kendo UI Professional is available.
  • Web and Data Visualization Widgets are supported on Firefox ESR, IE 7+, Safari 5+, Chrome Latest, Opera 15+, iOS 6.0+, Android 2.3+ (In Android 2.3 dataviz widgets support only Canvas rendering mode), BlackBerry OS 10+, Windows Phone 8+, and Chrome for Android.
  • This strategy is typically used to build web applications that run in a browser on a phone, tablet, or desktop (i.e. Responsive Design/Mobile First Design).

Strategy 2: Use Kendo UI Mobile, Web and DataViz Widgets Running On Browsers

Mobile widgets are not for mobile and tablet devices alone; they can be used alongside the web and data visualization class of widgets on a handful of browsers. Given that the mobile widgets work on several desktop browsers and many of the Web and Data Visualization widgets work on common tablet and phone browsers, a developer could construct a mobile web application using web, data visualization, and mobile widgets together, intending them to run on a web browser on mobile devices first and secondarily on desktop browsers.

To get started with Kendo UI Mobile Widgets check out the demos or read the Getting Started guides.

Notes:

  • Mobile Widgets are part of Kendo UI Core and commercially free for anyone to use for anything.
  • Mobile Widgets are supported on iOS 6.0+, Android 2.3+, BlackBerry OS 10+, Windows Phone 8+, and Chrome for Android, Chrome Latest, Opera 15+, Safari 5+, and IE 10+.
  • This strategy is typically used to build web applications that run primarily on a tablet or phone and secondarily on a small list of modern desktop browsers (i.e. Chrome Latest, Opera 15+, Safari 5+, and IE 10+)
  • Make sure you are aware of the limitations and caveats of instantiating and using mobile widgets outside of a Kendo UI mobile application instance (aka the Mobile Application Tookit/Framework).

Kendo2Kendo1

Strategy 3: Use Kendo UI Mobile Application Toolkit And Mobile Widgets Running on Mobile Browsers or in WebViews

Screenshot 2014-08-21 16.22.23Kendo UI offers a toolkit for building web-based mobile applications which make use of mobile widgets inside of a framework designed to run on mobile browsers. Think of the Kendo UI Mobile Application Toolkit as a mini-SPA (single page application) framework for mobile browsers. It’s similar in design to something like jQuery Mobile but much more sophisticated when it comes to building applications instead of websites.

When the Mobile widgets are used in conjunction with the Mobile Application toolkit, it’s assumed that the application is running on a phone or tablet device within a browser or a WebView.

To get started with the Kendo UI Mobile Application Toolkit read the, “Intro to Building Apps With Kendo UI Mobile” tutorial and review the API documents for kendo.mobile.Application.

Notes:

  • Kendo UI Widgets and Mobile Application Toolkit are part of Kendo UI Core and commercially free for anyone to use for anything.
  • The Kendo UI Mobile Application Toolkit uses declarative rendering to instantiate mobile widgets. Web and data visualization widgets have to be instantiated separately if used alongside mobile widgets on phone and tablet devices.
  • This strategy is typically used to build mobile applications that run in the mobile web browser or in a WebView that is contained within a native application (aka hybrid native application)
  • Cuteness.io is an example of a mobile application built using mobile widgets and the Kendo UI Moblie Applicaiton Toolkit. It’s not intended to be run by the majority of modern desktop web browsers (i.e. IE8 and IE9). You can examine a simulated view of the application here.
  • The Mobile Application Toolkit itself does not contain a solution for compiling an application to a hybrid native application (i.e. a native application where the app runs in a WebView) for a desired platform. The Mobile Toolkit helps a developer build mobile web applications.

Strategy 4: Use AppBuilder (Mobile Build/Development Tool) To Aid In Hybrid Native Development, Bridging Native API’s, and Output Cross-Platform Apps

Using Kendo UI Mobile widgets and the Mobile Application Toolkit, a developer can build a native hybrid application that is intended to simply run in a WebView. However, the developer is burdened with taking the Kendo UI mobile application and creating a native application with a WebView for each platform they would like the application to run on. Additionally, what if the application required access to a native API, like the camera? How will the developer bridge the gap between the web application in the WebView and the native environment? What’s needed is a tool that will take in HTML, CSS, and JavaScript and output the desired (i.e. iOS, Android, Windows Phone 8) native applications and also provide access to a devices native API’s (e.g. the devices camera).

This is exactly where AppBuilder steps in solves a number of complexities associated with hybrid development. In fact, solving the distribution and native API jungle is just the tip of the iceberg for AppBuilder. Appbuilder reduces the complexities associated with hybrid development and deployment.

video7

The best place to get started with AppBuilder is to sign up for a free trial and play around with the “Friends App” example application already set up and ready to roll. Of course, reading the docs is a great place to start too.

Notes:

  • Appbuilder is a commercial solution offering a free 30 day trial
  • Appbuilder offers a web-based cloud IDE requiring no downloads, installs, or configurations in order to create a native hybrid application. Additional solutions for working local instead of online are available (e.g. Sublime package, Node-based CLI interface, Windows client, Visual Studio extension).
  • Appbuilder offers built-in simulators for iOS, Android, and Windows 8 Phones but also can leverage native simulators available on your local OS.
  • Appbuilder offers the ability to run your application on a physical device and “live sync” any changes that occur in Appbuilder during development.
  • Appbuilder provides an application manager that can distribute your mobile app to public app stores, including the Apple AppStore, Google Play or the Windows Phone store. Or you can choose private app distribution to users through your own private app store.
  • Appbuilder does not lock a developer into Telerik only solutions (i.e. the Kendo UI mobile widgets and Mobile Application Toolkit are optional). Appbuilder plays nicely with the popular third party solutions for doing mobile development.
  • This strategy is typically used to build mobile hybrid applications that run as native applications on multiple phone and tablet platforms.
  • AppBuilder is built on top of Cordova and provides an easy way to manage Cordova plugins.
  • Telerik offers a series of verified Cordova/PhoneGap plugins for iOS, Android, and Windows Phone (e.g. plugins.telerik.com) that can be used by AppBuilder.
  • Appbuilder is one small part of an entire platform of solutions for mobile development (i.e. Testing, Prototyping, Back-end, Analytics, Deployment Management).

Strategy 5: Use Native Widgets to Augment Native Mobile Development done in Objective-C, Java, or C# with Native Android, iOS, Windows Widgets

A hybrid native mobile application is not always the ideal solution for a project. In those situations Telerik offers Native Android, iOS, Windows Widgets to be used by Objective-C, Java, or C# developers when doing native application development.

To get started with any of the native mobile widgets checkout one of their product pages:

Future Strategy: Use JavaScript via NativeScript To Build Truly Native iOS and Android applications

In the future, Telerik will be offering NativeScript which intends to move closer to the ideal of building mobile applications in one language (i.e. JavaScript) that can directly use the native APIs on multiple platforms without relying on Cordova.

NativeScript is currently available as a private preview. You can sign up for the NativeScript Insiders program here.

Notes:

  • With NativeScript, JavaScript can directly access native API’s. Full native API access is provided.
  • While NativeScript will be IDE agnostic, Appbuilder can be used to created iOS and Android native applications from NativeScript (i.e. JavaScript) instead of Cordova. Resulting in a something much close to a truly native application written in Objective-C or Java but of course written in JavaScript.
  • The UI stack is built on the native platform rendering and layout engine making use of the default native platform UI components
  • Eventually Windows Phone 8 will be supported

Conclusion

This article was not intended to give you in-depth working knowledge of each strategy, but more of a high level overview of Telerik solutions to help you formulate the best solution for your mobile project. It’s my hope, minimally, that I’ve set up a mental context for logically understanding the stops along Telerik’s mobile development road.

Header image courtesy of Nicholas A. Tonelli

Comments

  • Paul Lin

    Thank you for this clear overview about Telerik offerings.