building html5 apps for cross platform mobile

Building HTML5 apps for cross platform mobileDave VoylesSr. Tech Evangelist@DaveVoyles

Advanced HTML5: Diving into the Canvas TagDave VoylesSr. Tech Evangelist | Microsoft@DaveVoyles@gdiphilly

Welcome!Who are you?

What do you hope to get out of this class?

Icebreaker: What is your favorite TV show or video game of the 90s?

About MePreviously a Sr. Engineer on the Xbox team at Comcast

Have been working in the games industry for nearly 5 years

I’m a recent transplant from Long Island, NY.

What we’ll cover

• Tools for writing HTML5 apps• Frameworks that can be used• Advanced HTML5 features (webGL)

What to expect

• Some of it may be over your head - Ask questions! Even I don’t know it all

• This is a high-level overview of a complicated subject

• You’ll learn about the various tools you can use to write cross platform applications

Many Tools of the trade• Intel XDK• PhoneGap• App Builder• Cordova

How does Cordova work?

Popular JavaScript Libraries:

• jQuery• jQuery Mobile• AngularJS• Ember.js• Knockout.JS• Bootstrap• Modernizer

If it has a browser, it can run these apps*

* For the most part

Plugins?

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 and device capabilities on multiple platforms.

So which tool is best?

PhoneGap Build

Build

• Support multiple platforms (iOS, Android™, Windows® Phone, webOS, BlackBerry)

• Compiles the projects for you• All code is stored in the cloud

Build

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.

Intel XDK

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)

Telerik App Builder

You don’t need a Mac to deploy to iOS, when using Telerik App Builder!

Cordova (Visual Studio)

Are there other options?

Resources• Secrets of a JavaScript Ninja• JavaScript: The Good Parts

Link to HTML5 cheat sheet

Questions? Comments?

Survey: http://bit.ly/gdi-canvas