Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Using Your Web Development
Skills to Create Mobile Apps in
Telerik AppBuilder
J. 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
• You...
Introduction to AppBuilder
Developers can use Telerik AppBuilder to create cross-
platform iOS, Android, and WP8 applicati...
What AppBuilder Is
• IDE—and related tools—for developing mobile apps
in HTML5/JS
• AppBuilder vs Cordova
• Cross-Platform...
What AppBuilder Isn't
• NOT a programming language (JavaScript)
• NOT a mobile API (Cordova)
• NOT a platform/framework (K...
Cordova PhoneGap
"Apache Cordova [is] the
engine that powers
PhoneGap, similar to how
WebKit is the engine that
powers Chr...
How Cordova Works
• Web assets are packaged in a native wrapper app
• Native wrapper app runs a full-screen UIWebView (iOS...
Credit: http://www.telerik.com/appbuilder
Application Architecture
Your
Own
Database
Your
Own
Services
Hosted
Database
Hosted
Database
Telerik
Data
Services
Azure
M...
Model-View-Controller
Model
ControllerView
Model
ControllerView
MVC MVVM
ViewModel
How to Do MVVM in AppBuilder
Controller
• JavaScript classes modularized
into separate files
View
• Use view widgets (e.g....
Helpful Tools & Libraries
• Kendo UI Framework
• Kendo UI Mobile
• Bootstrap
• RequrieJS
• Underscore.js
Kendo UI Framework
DataSource Model Template MVVM
Drag
Observable
Object
Node Template
Observable
Array
Validator Draggable
Framework Example: ObservableObject
var viewModel = kendo.observable({
name: "John Doe",
});
<form id="#view">
<input data...
Kendo UI Mobile Widgets
ActionSheet BackButton Button ButtonGroup DetailButton Layout
ListView Loader ModalView NavBar Pan...
Kendo UI Mobile Example: ListView
<ul id="some-id"></ul>
$("#some-id").kendoMobileListView({
pullToRefresh: true,
dataSour...
Bootstrap (AKA Twitter Bootstrap)
A free collection of JavaScript and CSS helping web developers with
typography, forms el...
RequireJS
"RequireJS is a JavaScript file and module
loader…Using a modular script loader like RequireJS
will improve the ...
RequireJS
// File A.js
require(['b'], function(b) {
// b, c, d, e will be loaded now
...
});
// File B.js
define(['c','d',...
Underscore.js
"Underscore is a utility-belt library for JavaScript that
provides a lot of the functional programming
suppo...
var stooges = [
{name : 'moe', age : 40},
{name : 'larry', age : 50},
{name : 'curly', age : 60}
];
_.pluck(stooges, 'name...
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
@f...
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan Tower)
Upcoming SlideShare
Loading in …5
×

Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan Tower)

632 views

Published on



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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan Tower)

  1. 1. Using Your Web Development Skills to Create Mobile Apps in Telerik AppBuilder J. TOWER, FALAFEL SOFTWARE
  2. 2. Premium community conference on Microsoft technologies itcampro@ itcamp14# Huge thanks to our sponsors & partners!
  3. 3. About Me J. Tower jtower@falafel.com @jtowermi Falafel Software http://falafel.com http://blog.falafel.com @falafelsoftware
  4. 4. Session Overview • Introduction to AppBuilder • Demo Products • Application Architecture • Helpful Tools & Libraries • Your Questions
  5. 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. 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. 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. 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. 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. 10. Credit: http://www.telerik.com/appbuilder
  11. 11. Application Architecture Your Own Database Your Own Services Hosted Database Hosted Database Telerik Data Services Azure Mobile Services OR OR
  12. 12. Model-View-Controller Model ControllerView
  13. 13. Model ControllerView MVC MVVM ViewModel
  14. 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. 15. Helpful Tools & Libraries • Kendo UI Framework • Kendo UI Mobile • Bootstrap • RequrieJS • Underscore.js
  16. 16. Kendo UI Framework DataSource Model Template MVVM Drag Observable Object Node Template Observable Array Validator Draggable
  17. 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. 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. 19. Kendo UI Mobile Example: ListView <ul id="some-id"></ul> $("#some-id").kendoMobileListView({ pullToRefresh: true, dataSource: { data: [...] } });
  20. 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. 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. 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. 23. Underscore.js "Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support…" - http://underscorejs.org
  24. 24. var stooges = [ {name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60} ]; _.pluck(stooges, 'name'); => ["moe", "larry", "curly"] Underscore.js
  25. 25. var obj = { firstname : 'J.', lastname : 'Tower‘ }; var obj2 = _.clone(obj); Underscore.js
  26. 26. falafel.com/falafel-con-2014
  27. 27. Recap • Introduced AppBuilder • Demoed AppBuilder Products • Covered Application Architecture • Helpful Tools & Libraries
  28. 28. Premium community conference on Microsoft technologies itcampro@ itcamp14# Huge thanks to our sponsors & partners!
  29. 29. Thank You. Questions? J. Tower jtower@falafel.com @jtowermi Falafel Software http://falafel.com http://blog.falafel.com @falafelsoftware

×