facebook.com/telerik

@telerik

Hybrid Mobile Application &Kendo UI Mobile

Agenda

What is Hybrid Application

Introducing Kendo UI Mobile

Demo creating TEARCH APP

Demo creating Netflix Movie Browser

Dhananjay Kumar– Customer Advocate, Telerik India– Microsoft MVP – Connected System

Development– Mindcracker MVP– @debug_mode– http://debugmode.net– http://telerikhelper.net – Dhananjay.kumar@telerik.com

Who Am I ?

Different Types of AppsApps for Devices

Native Apps

Mobile Web Apps

Hybrid Apps

facebook.com/telerik

@telerik

Native Apps Development • Objective C• MACiOS

• Java • Eclipse Android

• Visual Studio • C#/XAML

Windows Phone

100 LOC

100 LOC

100 LOC

300 LOC

Development

Maintenance

facebook.com/telerik

@telerik

What is Hybrid App ?

Neither Native App nor Web App

facebook.com/telerik

@telerik

Single Code Base

ios Android Windows

facebook.com/telerik

@telerik

Hybrid App Development

CSS

JAVASCRIPT

HTML

Deploy using Cordova

ios Android

Windows Phone

Various Platforms

Steps for Hybrid App Development Step 1: Create App using

HTML JavaScript , CSS

Step 2: Package the App using Phone Gap

Step 3: Submit the package to App Store, Market Place or Google Play

How it works ?It runs in Web View Control UIWebView : ios, WebView : Android

Runs in full screen mode using Web Kit browsers

Access Device capabilities using Cordova JS API

Hybrid or Native?Hybrid

Multiple Platform

Easy to build

Use existing web development skills

Best suited for Data Driven Applications

Native

Fast Performance

Complex Codes

Huge learning curve

High investment but better performance

Summary

Target multiple mobile platforms

Take advantage of device capabilities like geolocation , contacts , camera etc.

App will run even if device is offline

Really do not need advanced graphics performance

facebook.com/telerik

@telerik

- Introduction

Kendo UI

Everything you need to build HTML5 + JavaScript sites & APPS

What is Kendo UI ?

“Kendo UI solves an important problem faced by JavaScript and HTML5 developers. It delivers a unified framework backed by professional support. It's easier to learn, easier to upgrade, ultimately making it easier to build apps with HTML5.”

-Todd Anglin, VP – HTML5 Web & Mobile Tools, Telerik

Kendo UI Blocks

Kendo Framework Elements

Kendo UI Web

Kendo UI DataViz

Kendo UI Mobile

facebook.com/telerik

@telerik

Kendo UI Mobile

HTML5 powered native mobile UI that automatically adapts to different devices

What is Kendo UI Mobile ?

Native UI on Every Device

Automatic Layout System

Tablet Ready

Ready for App Stores

Kendo UI Framework

DataSource Model Template MVVM

Drag OvservableObject Node Template

OvservableArray Validator

Draggable

Kendo UI Mobile WidgetsActionShee

tBackButto

n Button ButtonGroup

DetailButton

Layout ListView Loader ModalView NavBar

Pane PopOver Scroller ScrollView SplitView

Switch Swipe TabStrip View

Complete Mobile Application Framework

facebook.com/telerik

@telerik

Building Apps with Kendo UI Mobile

facebook.com/telerik

@telerik

DEMO