Slides of Hybrid mobile app with Kendo UI Mobilesession in CSC Noida

1. Hybrid Mobile Application &
Kendo UI Mobile
facebook.com/telerik @telerik

2. Agenda
What is Hybrid Application
Introducing Kendo UI Mobile
Demo creating TEARCH APP
Demo creating Netflix Movie Browser

3. Who Am I ?
 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

4. Different Types of Apps
Apps for
Devices
Native Mobile Hybrid
Apps Web Apps Apps

5. Development
Native Apps Development
100
• Objective C LOC
iOS • MAC
• Java 100 300
Android • Eclipse LOC
LOC
Windows • Visual Studio
Phone • C#/XAML 100
LOC
Maintenance
facebook.com/telerik @telerik

6. What is Hybrid App ?
facebook.com/telerik @telerik

7. Single Code Base
ios Android Windows
facebook.com/telerik @telerik

8. HTML ios Android
JAVASCRIPT
Deploy using
Cordova
CSS
Windows
Phone
Hybrid App Various Platforms
Development
facebook.com/telerik @telerik

9. 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

10. 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

11. Hybrid or Native?
Hybrid Native
Multiple Platform Fast Performance
Easy to build Complex Codes
Use existing web
Huge learning curve
development skills
Best suited for Data High investment but
Driven Applications better performance

12. 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

13. Kendo UI
- Introduction
facebook.com/telerik @telerik

14. What is Kendo UI ?
Everything you need to build HTML5 + JavaScript sites & APPS
“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

15. Kendo UI Blocks
Kendo UI Kendo UI Kendo UI
Web DataViz Mobile
Kendo Framework Elements

16. Kendo UI Mobile
facebook.com/telerik @telerik

17. What is Kendo UI Mobile ?
 HTML5 powered native mobile UI that automatically adapts to
different devices

18. Native UI on Every Device

19. Automatic Layout System

20. Tablet Ready

21. Ready for App Stores

22. Kendo UI Framework
DataSource Model Template MVVM
Drag OvservableObject Node Template
Draggable
OvservableArray Validator

23. Kendo UI Mobile Widgets
ActionSheet BackButton Button ButtonGroup DetailButton
Layout ListView Loader ModalView NavBar
Pane PopOver Scroller ScrollView SplitView
Switch Swipe TabStrip View

24. Complete
Mobile Application Framework

25. Building Apps with Kendo UI
Mobile
facebook.com/telerik @telerik

26. DEMO
facebook.com/telerik @telerik