hybrid web apps with manifold js

Dave Voyles, Sr. Tech Evangelist | MicrosoftDaveVoyles.com | @DaveVoyles

Hosted web apps with ManifoldJS

What is a Hosted Web App?

How do you build one?

What is ManfoldJS?• Node.js app that installs from NPM.

• Can run on any platform, and build for any platform.

• Helps you reach more users than ever by packaging your web experience as native apps across Android, iOS, and Windows

• Standards based on the latest W3C Manifest working draft. 

• Open Source

Why create a hosted web app?• Reach more users

o Package your web experience as native apps across Android, iOS, and Windows

• Update without having to go through App Storeso No more 6 day wait period – update when you want to push, no need for approval

• No need to reinvent the wheelo Already have a website? Why re-write all of that content for mobile apps?

How does ManifoldJS work?• Takes the meta-data about your site and generates native "hosted"

apps.

• If the platform doesn't support hosted apps, we use Cordova to polyfill it.

• Meta-data is stored in a JSON file, called the Web App Manifest

• Hybrid apps on your mobile device then point back to a website with this manifest, and inject the site into your app.

What is Cordova?• Platform for building native mobile apps using HTML5, CSS, and

JavaScript

• Open Source

• PhoneGap: Wraps Cordova and includes some additions

Web App ManifestDefines a JSON-based manifest to place metadata associated with a web app

Includes:App name, links to icons, preferred URL to open, screen orientation, display mode (e.g., in fullscreen)

Installation

Build ProcessCommand Line

Build ProcessWeb Generator

Demo: Building a web app

Hosting the web app

Example: NORAD Santa Tracker

Platform Enhancements• Cortana integration

o Ask her to open the app, to a specific section (Games, Music, movie)

• Live Tiles• Updates about Santa’s trip

Debugging with VorlonJS

Wrapping up• Reach more users

o Package your web experience as native apps across Android, iOS, and Windows

• Update without having to go through App Storeso No more 6 day wait period – update when you want to push, no need for approval

• No need to reinvent the wheelo Already have a website? Why re-write all of that content for mobile apps?

• Remote debugging with VorlonJSo Vorlonjs.com