This document discusses adding native functionality to hybrid mobile apps. It begins with an introduction to hybrid apps, explaining that they are built with web technologies but run within a native container on devices. It then covers the Kendo UI Mobile framework for developing hybrid apps and emphasizes its cross-platform capabilities. The document focuses on using Cordova plugins to access native device features like notifications, action sheets, social sharing, and toasts from within a hybrid app. It concludes with an announcement that a demo of these concepts will be shown.

1. Native Touches to your Hybrid
Apps
Lohith G N

2. About Me
Technical Evangelist
Microsoft MVP (ASP.NET/IIS)
lohith.nagaraj@telerik.com
@kashyapa
http://www.kashyapas.com
http://www.telerikhelper.net
Lohith G N
http://www.telerik.com

3. Agenda
• Hybrid Apps - Introduction
• Lap around Kendo UI Mobile
• Cordova Plugins for Native Features
• Demo

4. Hybrid Apps
What’s a Hybrid ?
Swiss Knife Image Courtesy: James Case

5. Definition
 Heterogeneous source
 Written with technology used for websites & Mobile web implementations
 Hosted/Runs in Native Container on device
 Marriage of Web Technology + Native execution

6. How ?
 Web View Control (UIWebView - iOS, WebView - Android/Others)
 Full Screen format - Native Browser rendering engine (WebKit)
 Abstract layer, device capabilities as JS API (Apache Cordova)
 Native wrapper compiled around HTML/CSS/JS – adds interop layer
 Interop layer connects JS API with native API’s

7. When ?
 Target Multiple Mobile Platforms
 Take advantage of device capabilities – GeoLocation, etc.
 Offline usage
 No need of advanced graphics performance

9. ®

10. Let's talk Mobile ...
Use Web skills to make Mobile Apps!

11. Kendo UI Mobile
Build Hybrid or Mobile Web apps
Completely Open Source & Free!
Bower install to any project
Has Angular Directives to render
Totally Cross-Platform

12. Hybrid Mobile Apps
Kendo UI Mobile powered
Best with AppBuilder
Use Cordova Plugins for Native API
Respective App Store
presence

13. Remember the UI Widgets
A complete application toolset for building hybrid and mobile web applications
ActionSheet
ButtonGroup
Drawer
Forms
ListView
MobileButton
ModalView
NavBar
PopOver
Scroller
ScrollView
SplitView
Switch
TabStrip

14. Kendo UI Mobile
Flexibility for Developers
Plays well with others
Offline capabilities Flat Themes
OS Adaptive Rendering

15. Something for everyone
Kendo UI Core
Application Framework | Web | Mobile | Completely Free
Kendo UI Professional
Enterprise UI | Licensed per Developer | Support & Maintenance

16. Native Touches

17. Cordova Plugins
• Bridge between HTML & Native Layer
• Invoke Native things using Plugins
• Native Behaviors & Controls can be used in Hybrid
Apps

18. Plugins we will see today
• Notification
• ActionSheet
• Social Sharing
• Toast

19. Demo

20. Thanks !
Lohith.Nagaraj@Telerik.com