Download as PDF, PPTX
![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](https://image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-8-2048.jpg)
![Kendo UI Mobile Example: ListView
<ul id="some-id"></ul>
$("#some-id").kendoMobileListView({
pullToRefresh: true,
dataSource: { data: [...] }
});](https://image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-19-2048.jpg)
![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 { ... };
});](https://image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-22-2048.jpg)
![var stooges = [
{name : 'moe', age : 40},
{name : 'larry', age : 50},
{name : 'curly', age : 60}
];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"]
Underscore.js](https://image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-24-2048.jpg)
![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](https://crownmelresort.com/image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-8-2048.jpg)
![Kendo UI Mobile Example: ListView
<ul id="some-id"></ul>
$("#some-id").kendoMobileListView({
pullToRefresh: true,
dataSource: { data: [...] }
});](https://crownmelresort.com/image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-19-2048.jpg)
![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 { ... };
});](https://crownmelresort.com/image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-22-2048.jpg)
![var stooges = [
{name : 'moe', age : 40},
{name : 'larry', age : 50},
{name : 'curly', age : 60}
];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"]
Underscore.js](https://crownmelresort.com/image.slidesharecdn.com/bvkjbgehtkijdkin9uod-signature-a9e59779f7c5fc629c4c7a7daa88aa65bca9c66b86c6ec64415c41719c68017c-poli-140720122701-phpapp01/75/Use-Your-WebDev-Skills-to-Create-Mobile-Apps-in-Telerik-Appbuilder-Jonathan-Tower-24-2048.jpg)
Uploaded byITCamp
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan Tower)
The document provides an overview of Telerik AppBuilder, a tool for creating cross-platform mobile applications using web technologies like HTML, CSS, and JavaScript. It covers the architecture, key features, and helpful libraries including Kendo UI and RequireJS, while also differentiating AppBuilder from other tools like Cordova and PhoneGap. Additionally, it highlights the session details from a conference presentation, thanking sponsors and inviting questions.
More Related Content
Similar to Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan Tower)
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan Tower)
- 1. Using Your WebDevelopment Skills to Create Mobile Apps in Telerik AppBuilder J. TOWER, FALAFEL SOFTWARE
- 2. Premium community conferenceon Microsoft technologies itcampro@ itcamp14# Huge thanks to our sponsors & partners!
- 3. About Me J. Tower jtower@falafel.com @jtowermi FalafelSoftware http://falafel.com http://blog.falafel.com @falafelsoftware
- 4. Session Overview • Introductionto AppBuilder • Demo Products • Application Architecture • Helpful Tools & Libraries • Your Questions
- 5. Introduction to AppBuilder Developerscan 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.
- 11.
- 12.
- 13.
- 14. How to DoMVVM 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 DataSourceModel Template MVVM Drag Observable Object Node Template Observable Array Validator Draggable
- 17. Framework Example: ObservableObject varviewModel = kendo.observable({ name: "John Doe", }); <form id="#view"> <input data-bind="value: name" /> </form> kendo.bind($("#view"), viewModel);
- 18. Kendo UI MobileWidgets ActionSheet BackButton Button ButtonGroup DetailButton Layout ListView Loader ModalView NavBar Pane PopOver Scroller ScrollView SplitView Switch Swipe TabStrip View Many More…
- 19. Kendo UI MobileExample: ListView <ul id="some-id"></ul> $("#some-id").kendoMobileListView({ pullToRefresh: true, dataSource: { data: [...] } });
- 20. Bootstrap (AKA TwitterBootstrap) 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 aJavaScript 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 autility-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.
- 28. Recap • Introduced AppBuilder •Demoed AppBuilder Products • Covered Application Architecture • Helpful Tools & Libraries
- 29. Premium community conferenceon 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