building your first windows store app in html5 js phonegap

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israelwww.sela.co.il

Building Your First Windows Store App in HTML5/JS

Shai RaitenSenior ArchitectSela Group

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 2

Windows 8.1 Echosystem

Architecture

Personality, Pattern, Principles,

Platform

PhoneGap and Windows Store

Questions

Summary


Windows 8.1 Editions and the Windows Ecosystem

EditionsProducts

• Windows 8.1 Pro

• Windows RT

• Windows 8.1

• Windows 8.1 EnterpriseAppLockerWindows To GoDirectAccess

Hyper-V

BitLocker

EFS

Start Screen

Live TilesWindows Store

ARM-Based

Office 2013

Tablet PC

• Xbox• Microsoft SkyDrive

)OneDrive )• Windows Store


Windows 8.1 Architecture

Windows 8.1 Platform Architecture

Windows Kernel Services

Win32

Desktop Apps

HTML C/C++ C# /VB.NET

Internet Explorer

.Net CLR/Silverlight

Windows Store apps

C++/CX

C# /VB.NET Javascript

Comm. &Data

XAML HTMLCSS

WinRT APIs

Graphics &Media

Devices&

Others


Windows 8.1 Features and Terms

Start screen

Task Manager

Charms


Windows 8


Be Fast and Fluid

• Purposeful animations• Predefined Animation Library• Touch-ready apps• Binding instead of events


Side-by-side and Scale

Screen modes:• Full-screen, both landscape and

portrait• Side-by-side

Side-by-SideFull=screen Landscape Full screen Portrait

Design and implementation tips:• Accommodate any screen mode and size• Maintain state• Plan for ergonomics


Use the Correct Contracts

Contracts

YourWindows Store

app

Contract Contract


Invest in a Great Tile

•Tiles are the front door of the app•Secondary tiles link to specific pages and information• Live tiles are used for dynamically updated information• Secondary and live tiles can be pinned to the Start screen


Feel Connected and Alive

• Live tiles for dynamic information on tiles • Toast messages for dynamic pop-ups• App feels alive and updated even when dormant• User is drawn to your app all the time

Toast Message

Live tile


Roam to the Cloud


Comparison between HTML/JavaScript, XAML/C#, and XAML/C++

JavaScript C#/VB.NET C++

Knowledge Preservation

Web, HTML, JavaScript

XAML, WPF, Silverlight

XAML, C++

Code Reuse Web apps WPF or Silverlight, or .NET codebase

C++ codebase

Execution Environment

Internet Explorer JavaScript engine

.NET CLR with access to WinRT

Runs directly on top of WinRT

Language Style Dynamic Static Static

Memory Management

Managed by the JavaScript engine

Managed by the .NET CLR

Unmanaged, uses reference counting

Create WinRT Components

No Yes Yes

Choose the most comfortable language


How WinRT Works – Language Projections

Metadata

Metadata

Metadata

WinRT

WinRT Language Features

C# 5.0 Code

C++/CXCode

JavaScriptCode


WinJS Overview

•Helpers for:• Namespaces• Classes• Mixins

•Promises•App Models•Navigation•Page & user controls

•Data binding•Controls•Animations•Templates•Utilities•Default CSS styles


Namespaces, Classes, and Mixins

WinJS includes APIs for• Creating logical namespaces through the WinJS.Namespace object • Defining classes and mixins by using the WinJS.Class object

Making use of both these objects• Helps to reuse code• Helps to create an object model in an app


Building Windows Store App

18© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israelwww.sela.co.il

Understanding Mobile Space

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel


Mobile Application or Mobile Web Application?

• Mobile Web Apps – Limited functionality w/ HTML – Flash is problematic

• Mobile Applications – Native or cross-compile? – Both provide much more

functionality than “Web” – Native is platform-specific – Cross-compile casts a wider net-

but performance and experience could* suffer


Platform Selection

• Web – HTML with JavaScript/CSS

• Cross-compile – Adobe AIR (AS3, MXML) – PhoneGap (JS, HTML) – Titanium (JS, HTML)– Xamarin (C#, XAML)– Unity

• Native (only choose one) – Objective-C (iOS) – Java (Android / BlackBerry) – C#/Silverlight/XAML (Windows)


Development Options


Multi-platform developers earn more

PhoneGap

• PhoneGap is open source mobile development framework.

- Developed by Nitobi Software - Bought by Adobe

• Renamed to Cordova after the shift to Adobe

• Enables building mobile device applications using the Web technology stack –HTML, CSS, and JavaScript.

PhoneGap

• A PhoneGap application is considered Hybrid.

- They are neither truly native, nor purely web based. - All layout rendering is done via the Web View

• Supports 7 platforms

What PhoneGap Is all About?

WrapperBridge

PhoneGap User Interface

PhoneGap API

JavaScript Native

API Reference - http://docs.phonegap.com/en/3.1.0/index.html

http://docs.phonegap.com/en/3.9.0/index.html

http://docs.phonegap.com/en/3.9.0/index.html

28© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israelwww.sela.co.il

Getting StartedPhoneGap

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel

Development Environment

• Set up your development environment- PC, Mac- XCode, Eclipse, Visual Studio- SDKs, JDKs, Plug-Ins

Same as for Native Development

• Adobe® PhoneGap™ Build- Simply upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and we do the work of compiling for you.

Getting Started with Windows Store

1. Create New Project2. Add reference to Cordova.js3. Register “deviceready” event4. Done


Hello PhoneGapWindows Store / Visual Studio


Load JavaScript\CSS Dynamically - JQuery

function includeJS(jsFile) { $('head').append($('<script>').attr('type', 'text/javascript').attr('src', jsFile));}

// Pick a JS to loadswitch(device.platform){ case “Android”: includeJS(‘android.js'); break; case “BlackBerry 10”: includeJS(‘bb.js'); break; case “Win32NT”: includeJS(‘win8.js'); break;}

Summary

Platform-specific native applications seem to be slowly fading away into a niche or need-basis.

HTML/JavaScript applications, done right, can be a good alternative, and can save you time an money.

If you’re not sure, validate.


Thanks You!Shai Raiten• [email protected]• http://blogs.Microsoft.co.il/blogs/shair

mailto:[email protected]

http://blogs.microsoft.co.il/blogs/shair

building your first windows store app in html5 js phonegap

Technology

baruch hirsch st

bnei brak

nitobi software

pro windows

web html

live tile live tiles

app secondary tiles

web native