PhoneGap/Cordova + Windows

Jesse MacFadyen aka @purplecabbage

About Me

  • I've been working with PhoneGap since late 2008
  • I've been working on Windows Phone 7&8 for over 2 years
  • I've been working on Windows 8 for a over a year too
  • I don't have a favorite color - unless you count 'transparent'

About this presentation

This presentation is:

  • part marketing
  • part knowledge sharing
  • part opinion
  • part comedy (hopefully)
  • part propaganda
  • part wrong ( probably )

What is Windows?

Windows is an operating system.

Windows runs on computers collectively called 'PCs'

  • laptops
  • desktops
  • tablets

I make fun of this, because Mac seems to be over-represented in the tech community these days. IMHO

What is PhoneGap?

MacOS Only Platforms

  • iOS

Windows Only Platforms

  • Windows Phone 7
  • Windows Phone 8
  • Windows 8

MacOS or Windows

  • Android
  • Blackberry
  • Tizen

Windows Phone 7

The first non-WebKit PhoneGap supported device

IE9

  • finally a standards compliant browser
  • Cordova support developed in partnership with Microsoft
  • issues with touch+scrolling
  • no support for SVG, localStorage
  • elegant JS<=>C# communication
  • unpack app resources to isolatedStorage
  • note: Cordova for Windows Phone 7 is now deprecated

Windows Phone 8

IE10

  • finally a MORE standards compliant browser
  • Cordova support developed in partnership with Microsoft
  • Microsoft introduced MSPointerEvents
  • SVG, localStorage
  • elegant JS<=>C# communication
  • web assets runnable from app package

Also ... webWorkers, page visibility, navigation timing, typed arrays, requestAnimationFrame, indexedDB, async script loading event, strict javascript

Windows 8 and 8.1

IE10 and IE11

  • Microsoft Embraces the Cordova way
  • javascript becomes a first class citizen in Windows 8
  • cordova.js for windows 8 is a simple? translation layer
  • there are no contacts in Windows 8 ( the People app does that )
  • very cool binding of JS<=>C# and even JS<=>C++
  • Other maintainers come and go, I'll take any help I can get.

Windows 8 Cordova pitfalls

  • cordova-cli cannot launch apps
  • docs are still in need of attention

Different Workflows

  • Multi-platform projects
  • CLI Single-platform projects
  • Visual Studio Templates

Multi-platform projects


// create  [ID [NAME [CONFIG]]]
$ cordova create c:/MyCordovaProject com.mydomain.myapp HelloCordova
$ cd c:/MyCordovaProject
$ cordova platform add wp8
$ cordova run wp8

Multi-platform projects folder layout


    config.xml  // Global config.xml for all your platforms
    hooks/  
    merges/
    platforms/  
    plugins/  
    www/    <= This is where you do your cross-device work

CLI Single-platform projects

  • each platform has it's own scripts
  • used by cordova-cli
  • you can use them too

// Usage: create PathToNewProject [ PackageName AppName ]
// in /bin folder
$ bin/create c:/MyCordovaProject com.mydomain.myapp HelloCordova
$ cd c:/MyCordovaProject
$ cordova\run

Visual Studio Templates

  • Windows Phone 7&8 only
  • .bat file in the root of the repo to install templates
  • Simple, I use it 10x a day to test things.
  • Still need to use cli to install plugins

The great plugin breakout

npm like registry at plugins.cordova.io

new site coming soon!

stage.plugins.cordova.io

Installing Plugins - 2 ways

  • Using cordova cli
  • Using 'plugman' directly

Using Cordova cli to install a plugin

  • Must be run from a cordova project root directory
  • Installs the plugin for all platforms in the project


$ cordova plugin add org.apache.cordova.camera

Installing plugins with 'plugman' directly


// $ plugman install --platform  --project  --plugin  [--variable NAME=VALUE]
// You will usually install plugman globally to do this
$ npm install -g plugman
// from the root of a Windows Phone 8 Cordova project
$ plugman install --platform wp8 --project . --plugin org.apache.cordova.camera

Developer tools

The choice is yours
  • Text Editors : TextMate, Sublime, Brackets, NotePad
  • IDEs : Eclipse, Visual Studio, XCode

Other more focused IDEs have come out as well.

  • Intel's XDK : http://software.intel.com/en-us/html5/tools
  • Telerik App Builder : http://www.telerik.com/appbuilder
  • Google Android Studio, Spark, Cloud 9, ...

Porting - Must Read

  • Be warned, you are entering a non-webkit world
  • TouchEvents -> PointerEvents
  • Use Hand.js

Watch the prefixes



{
    -webkit-border-radius: 0; 
    border-radius: 0;
}

Lot's more tips here : MSOpenTech Blog http://j.mp/P9YGcp

reqestAnimationFrame - safely


window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

Be Responsive

  • WP8 is 3 or more different screen sizes
  • Windows 8 is another 3 or more
  • Don't get me started on Android form factors
  • ad infinitum, ad nauseam

What's new?

  • Shared codebase Windows8.1 + WP8.1
  • WinJS for WP8.1 - Now Apache 2.0 Licensed
  • XBone

Shared codebase Windows8.1 + WP8.1

Apache Cordova for Windows 8.1 and Windows Phone 8.1 will be moving to a single repo.

Cordova 4.0

WinJS

https://github.com/winjs/winjs

THE END

... or is it?

Question Time

Tricks of the trade

  • my workflow, browser first ( with stubbed api calls )
  • get the interaction right first, then hook the real data