From Mobile Website to Mobile AppjQuery LA - 20 February 2013

Thursday, February 21, 13

Introduction

Thursday, February 21, 13

Who Am I?

• Troy Miles

• Senior Software Engineer w/ 30+ years of experience

• Mobile/Mobile Web

• iOS, Android, & Windows Phone 7

Thursday, February 21, 13

Thursday, February 21, 13

Intermediate PhoneGap

• JS best practices, iScroll, Maps, Ajax + more

• Saturday, May 18th

• 9 AM to 6 PM

• $99 - lunch included

• http://bit.ly/XlxzYp

• CraveLab - Downtown Los Angeles

Thursday, February 21, 13

You May Get Mad At Me

• Sorry, in advance if I insult your favorite: company, device, or personality

• I have nothing against any of these companies

• I will gladly do a project for any of them, for the right price

Thursday, February 21, 13

Others will hate you

• The cult of Java, Objective-C, and C# believe that only through pain can good mobile apps be created

• I believe they are wrong

Thursday, February 21, 13

What You Know is Valuable

• I am assuming that everyone here is a web dev of some sort

• You should understand: HTML, CSS, and a bit of JavaScript

Thursday, February 21, 13

Our Goals

• Explain Difference Between Mobile Web - Device Apps - Hybrid Apps

• Show How to Structure Websites to Move

• Introduce Apache Cordova (PhoneGap)

• Move a Website into PhoneGap

• Deploy App to a Device

Thursday, February 21, 13

Hybrid Apps

Thursday, February 21, 13

Web Apps Device Apps

Can migrate web skills Longer learning curve

One source base Many source bases

Deploy when you want Deployment needs approval

You choose when to update User chooses when to update

No device memory used Uses device memory

Difficult to monetize Monetization is built-in

Restricted device access Full access to device hardware

Slower Faster

Thursday, February 21, 13

Hybrid Apps

Can migrate web skills

One source base

Deployment needs approval

User chooses when to update

Uses device memory

Monetization is possible

Access to some device hardware

Faster than web, slower than device

Thursday, February 21, 13

Web to Mobile Web

Thursday, February 21, 13

Mobile Websites

• Smaller screen

• Slower speeds

• Touch enabled

• Orientation

Thursday, February 21, 13

Build to Move

Thursday, February 21, 13

Build to Move

• Don’t hardcode dimensions

• Modularize your code

• Use CSS

Thursday, February 21, 13

Apache Cordova

Thursday, February 21, 13

Pronounced “PhoneGap”

• Created by a Nitobi, acquired by Adobe

• Open sourced by Adobe

• PhoneGap is a trademark of Adobe

• Telerik’s Icenium is also based on Cordova

• Creates “Hybrid” Apps

Thursday, February 21, 13

Featured PhoneGap Apps

• http://phonegap.com/app/feature/

Thursday, February 21, 13

Icenium

Thursday, February 21, 13

Icenium

• Built by Telerik

• Current version is 1.2

• PhoneGap code runs on it unmodified

• Deploy directly to device

• Free until May 1st

• Includes Kendo UI Mobile

Thursday, February 21, 13

Window 8

Thursday, February 21, 13

Windows 8

• Can use HTML, CSS, & JavaScript Program

• JS is a first class citizen on Windows RT

• UI Libraries don’t work well under it

• JS Libraries should be fine

Thursday, February 21, 13

Summary

Thursday, February 21, 13

Next Steps

• Just Starting out? Try Icenium, it is free until May 1st.

• Try PhoneGap and PhoneGap Build

• Learn a JavaScript MVC Framework like: Backbone, Knockout, or Ember

Thursday, February 21, 13

Links

• http://phonegap.com

• http://www.icenium.com/

• http://addyosmani.github.com/todomvc/

Thursday, February 21, 13

Me

• @therockncoder

• rockncoder@gmail.com

• http://therockncoder.blogspot.com/

• http://www.youtube.com/user/rockncoder

• https://github.com/Rockncoder

Thursday, February 21, 13

Questions?

Thursday, February 21, 13