This document discusses tools and techniques for building Cordova apps. It describes dependencies needed like Node.js, Android SDK, and plugins that allow accessing native device capabilities. The Multi-Device Hybrid Apps for Visual Studio extension helps acquire dependencies and configure builds for Android, iOS, and Windows platforms. It allows debugging apps on Android and Windows. Behind the scenes, it builds apps for different platforms from the same codebase.

2. MANY TOOLS OF THE TRADE
• Intel XDK
• PhoneGap
• App Builder
• Cordova

5. WHAT IT TAKES TO BUILD A CORDOVA
APP
Dependencies to install:
1. Joyent Node.js
2. Google Chrome
3. Git Command Line Tools
4. Apache Ant
5. Oracle Java 7
6. Android SDK
7. Apple iTunes
8. SQLite
9. WebSocket4Net
Need to configure:
 Command line targets
 Environment variables
 Deployment details
 Build Server
 Web Server
 and more!

6. To help with all of this, you have the Multi-
Device Hybrid Apps for Visual Studio
extension.
(Please feel free to send us suggestions for a longer name )

8. MULTI-DEVICE HYBRID APPS FOR
VISUAL STUDIO EXTENSION
This extension allows you to use Visual
Studio to:
 Acquire all required 3rd party
dependencies
 Configure everything to allow you to
build/deploy for the Android, iOS,
and Windows platforms
 Debug apps running on Android
and Windows Store
 Easily add native device capabilities

10. WHAT HAPPENS BEHIND THE SCENES
iOS + Android WWA

11. WHAT HAPPENS BEHIND THE SCENES
Windows +
Android
iOS

15. Apache Cordova is that it provides access to native
device capabilities not available to simple web apps via
“plugins.”
They provide JavaScript APIs that can access native code

20. Build
iOS, Android™, Windows® Phone, webOS,
BlackBerry)

21. Build

22. Build
How do I get started with PhoneGap Build?
Simply upload your web assets - a ZIP file of HTML,
CSS and JavaScript, or a single index.html file - to
PhoneGap Build, point us to your Git or SVN
repository.
PG Buld will compile & package for you. In minutes,
you’ll receive the download URLs for all mobile
platforms.

25. Publish to many app stores, across many form factors easily:
• Apple App Store
• Google Play
• Windows Store
• Tizen App Store
• Nook Store (Android)
• Amazon Store (Android)
• Chrome Store (web app)
• Facebook Store (web app)

32. RESOURCES
• Secrets of a JavaScript Ninja
• JavaScript: The Good Parts

33. LINK TO HTML5 CHEAT SHEET

34. DIVING INTO WINJS

35. Phone
WinJS 2.1WinJS 2.0
WINJS TODAY
New!

36. WINJS TODAY AND TOMORROW
http://

37. USER THEMES

38. ANIMATIONS ON PHONE

39. Turnstile Slide

40. var incoming; // A single element or an array of elements
WinJS.UI.Animation.turnstileForwardIn(incoming);
WinJS.UI.Animation.turnstileForwardOut(incoming);
WinJS.UI.Animation.turnstileBackwardIn(incoming);
WinJS.UI.Animation.turnstileBackwardOut(incoming);
WinJS.UI.Animation.slideUp(incoming);
WinJS.UI.Animation.slideDown(incoming);
USING ANIMATIONS

41. USING ANIMATIONS
var listview = document.getElementById("listview").winControl;
var items = [];
for (var i = listview.indexOfFirstVisible; i <
listview.indexOfLastVisible + 1; i++) {
items.push(listview.elementFromIndex(i).parentNode.parentNode);
}
WinJS.UI.Animation.turnstileForwardIn(items);

42. The future: modular and
composable
HOW PEOPLE TEND TO THINK OF
WINJS
WinJS UI Modules:
ListView, FlipView, Flyout, Tooltip, etc..
WinJS SPA
Modules:
Promises, Data
binding,
Scheduler,
Fragments,
Declarative
controls, etc…
AngularJS KnockoutJS EmberJS
Co-exist with other UI toolkits (e.g. Bootstrap)
UI.js
Base.js AngularJS
Other UI toolkits
(e.g. Bootstrap)
Today: all or
nothing

43.  In general, name spaces help avoid naming collisions and help with code
organization.
 The WinJS.Namespace object helps in other way. Objects are available at
the application scope.
 .define()
 .asWithParent()
 Advantage? Strongly typed.
WINJS.NAMESPACE

44. “USE STRICT”
 Strict Mode (ECMAScript 5) allows you to place your program, or function, in
a "strict" operating context.
 An attempt to assign foo = "bar"; where ‘foo’ hasn’t been defined will fail.
 eval() – virtually all cases will fail.
 Better error handling for objects

45. MODULE PATTERN
 JavaScript does not support access modifiers. You can’t mark an object or method
as public or private.
 Immediately Invoked Function Expression – IIFE
 We use function scope to our advantage and only leak the things we want
 Encapsulates some functions as private and exposes some functions as public..
 Best practice: explicitly pass all dependencies.
 Best practice: explicitly leak properties, objects, and methods.

46. WINJS.NAVIGATION.NAVIGATE()
 Set up our proposed location and state
 Raise our events: beforeNavigating, navigating, navigated
 The WinJS.Navigation namespace provides state and history
management, but it doesn’t actually do the navigation itself.
 We need to define a handler to the onnavigated event.
Code