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

Premium community conference on Microsoft technologies itcampro@ itcamp14#

Huge thanks to our sponsors & partners!

About Me

J. Tower

jtower@falafel.com

@jtowermi

Falafel Software

http://falafel.com

http://blog.falafel.com

@falafelsoftware

Session Overview

• Introduction to AppBuilder

• Demo Products

• Application Architecture

• Helpful Tools & Libraries

• Your Questions

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.

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)

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)

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

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)

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

Application Architecture

YourOwn

Database

YourOwn

Services

HostedDatabase

HostedDatabase

Telerik Data

Services

Azure MobileServices

OR

OR

Model-View-Controller

Model

ControllerView

Model

ControllerView

MVC MVVM

ViewModel

How to Do MVVM in AppBuilderController

• 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 ObservableObjectclass for viewmodels

• Kendo's binding statements to connect view and view model

Helpful Tools & Libraries

• Kendo UI Framework

• Kendo UI Mobile

• Bootstrap

• RequrieJS

• Underscore.js

Kendo UI Framework

DataSource Model Template MVVM

DragObservable

ObjectNode Template

Observable

ArrayValidator Draggable

Framework Example: ObservableObject

var viewModel = kendo.observable({name: "John Doe",

});

<form id="#view"><input data-bind="value: name"

/></form>

kendo.bind($("#view"), viewModel);

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…

Kendo UI Mobile Example: ListView

<ul id="some-id"></ul>

$("#some-id").kendoMobileListView({pullToRefresh: true,dataSource: { data: [...] }

});

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

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

RequireJS

// File A.jsrequire(['b'], function(b) {

// b, c, d, e will be loaded now...

});

// File B.jsdefine(['c','d','e'], function(c, d, e) {

return { ... };});

// File C.jsdefine([], function() {

return { ... };});

Underscore.js

"Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support…"

- http://underscorejs.org

var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}

];

_.pluck(stooges, 'name');

=> ["moe", "larry", "curly"]

Underscore.js

var obj = {

firstname : 'J.',

lastname : 'Tower‘

};

var obj2 = _.clone(obj);

Underscore.js

falafel.com/falafel-con-2014

Recap

• Introduced AppBuilder

• Demoed AppBuilder Products

• Covered Application Architecture

• Helpful Tools & Libraries

Premium community conference on Microsoft technologies itcampro@ itcamp14#

Huge thanks to our sponsors & partners!

Thank You. Questions?

J. Tower

jtower@falafel.com

@jtowermi

Falafel Software

http://falafel.com

http://blog.falafel.com

@falafelsoftware