Are you a web developer that’s looking at becoming a mobile developer too? In this session, I’ll introduce you to mobile development using AppBuilder, Telerik’s cross-platform mobile development IDE. It helps you create real iOS and Android apps using familiar web development technologies like HTML5, CSS3, and JavaScript. We will discuss how to leverage your existing web-development skills, using the Windows and web-based IDEs, navigation, cloud services, phone features like the camera and GPS, testing, debugging, and deploying your apps to the app stores. Are you a web developer that’s looking at becoming a mobile developer too? In this session, I’ll introduce you to mobile development using AppBuilder, Telerik’s cross-platform mobile development IDE. It helps you create real iOS and Android apps using familiar web development technologies like HTML5, CSS3, and JavaScript. We will discuss how to leverage your existing web-development skills, using the Windows and web-based IDEs, navigation, cloud services, phone features like the camera and GPS, testing, debugging, and deploying your apps to the app stores.

1. Using Your Web Development
Skills to Create Mobile Apps in
Telerik AppBuilder
J. TOWER, FALAFEL SOFTWARE

2. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Huge thanks to our sponsors & partners!

3. About Me
J. Tower
jtower@falafel.com
@jtowermi
Falafel Software
http://falafel.com
http://blog.falafel.com
@falafelsoftware

4. Session Overview
• Introduction to AppBuilder
• Demo Products
• Application Architecture
• Helpful Tools & Libraries
• Your Questions

5. Introduction to AppBuilder
Developers can use Telerik AppBuilder to create cross-
platform iOS, Android, and WP8 applications on the
Cordova platform using familiar web development
technologies such as HTML, CSS, and JavaScript.

6. What AppBuilder Is
• IDE—and related tools—for developing mobile apps
in HTML5/JS
• AppBuilder vs Cordova
• Cross-Platform
• Windows IDE, web-based IDE, Visual Studio Plug-in,
Sublime Text Package, Command-Line (Win/OS X)

7. What AppBuilder Isn't
• NOT a programming language (JavaScript)
• NOT a mobile API (Cordova)
• NOT a platform/framework (Kendo UI Mobile)
• NOT a widget library (Kendo UI Mobile)

8. Cordova PhoneGap
"Apache Cordova [is] the
engine that powers
PhoneGap, similar to how
WebKit is the engine that
powers Chrome or Safari"
- Brian Leroux
Adobe's PhoneGap is a
distribution of Apache
Cordova. PhoneGap now
refers to an Adobe-led free,
open source distribution of
Cordova

9. How Cordova Works
• Web assets are packaged in a native wrapper app
• Native wrapper app runs a full-screen UIWebView (iOS),
Webview (Android), or WebBrowser control (WP8) that
renders the web app packaged in it
• iOS and Android use WebKit-based browsers, WP8 uses
IE
• Cordova JavaScript library wraps native APIs to access
Phone features (GPS, camera, accelerometer, etc)

10. Credit: http://www.telerik.com/appbuilder

11. Application Architecture
Your
Own
Database
Your
Own
Services
Hosted
Database
Hosted
Database
Telerik
Data
Services
Azure
Mobile
Services
OR
OR

12. Model-View-Controller
Model
ControllerView

13. Model
ControllerView
MVC MVVM
ViewModel

14. How to Do MVVM in AppBuilder
Controller
• JavaScript classes modularized
into separate files
View
• Use view widgets (e.g., Kendo UI
Mobile), templates, & HTML
Model
• Deserialized from service calls
ViewModel*
• More modularized class files to
expose your model to your view
• Use Kendo's ObservableObject
class for viewmodels
• Kendo's binding statements to
connect view and view model

15. Helpful Tools & Libraries
• Kendo UI Framework
• Kendo UI Mobile
• Bootstrap
• RequrieJS
• Underscore.js

16. Kendo UI Framework
DataSource Model Template MVVM
Drag
Observable
Object
Node Template
Observable
Array
Validator Draggable

17. Framework Example: ObservableObject
var viewModel = kendo.observable({
name: "John Doe",
});
<form id="#view">
<input data-bind="value: name"
/>
</form>
kendo.bind($("#view"), viewModel);

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

19. Kendo UI Mobile Example: ListView
<ul id="some-id"></ul>
$("#some-id").kendoMobileListView({
pullToRefresh: true,
dataSource: { data: [...] }
});

20. Bootstrap (AKA Twitter Bootstrap)
A free collection of JavaScript and CSS helping web developers with
typography, forms elements, buttons, navigation and other widgets
CSS+JS

21. RequireJS
"RequireJS is a JavaScript file and module
loader…Using a modular script loader like RequireJS
will improve the speed and quality of your code."
- http://requirejs.org

22. RequireJS
// File A.js
require(['b'], function(b) {
// b, c, d, e will be loaded now
...
});
// File B.js
define(['c','d','e'], function(c, d, e)
{
return { ... };
});
// File C.js
define([], function() {
return { ... };
});

23. Underscore.js
"Underscore is a utility-belt library for JavaScript that
provides a lot of the functional programming
support…"
- http://underscorejs.org

24. var stooges = [
{name : 'moe', age : 40},
{name : 'larry', age : 50},
{name : 'curly', age : 60}
];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"]
Underscore.js

25. var obj = {
firstname : 'J.',
lastname : 'Tower‘
};
var obj2 = _.clone(obj);
Underscore.js

27. falafel.com/falafel-con-2014

28. Recap
• Introduced AppBuilder
• Demoed AppBuilder Products
• Covered Application Architecture
• Helpful Tools & Libraries

29. Premium community conference on Microsoft technologies itcampro@ itcamp14#
Huge thanks to our sponsors & partners!

30. Thank You. Questions?
J. Tower
jtower@falafel.com
@jtowermi
Falafel Software
http://falafel.com
http://blog.falafel.com
@falafelsoftware