Building your first windows store app in html5 js phonegap

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

Windows 8.1 Echosystem
Architecture
Personality, Pattern, Principles,

Platform
PhoneGap and Windows Store
Questions
Summary


2

Products

Editions

• Xbox
• Microsoft SkyDrive
)OneDrive )
• Windows Store

• Windows 8.1

• Windows 8.1 Pro

• Windows 8.1 Enterprise Windows RT
•


3

Windows 8.1 Platform Architecture
Desktop Apps

HTML

C/C++

Internet
Explorer

Windows Store apps

C# /
VB.NET

C++/
CX

C# /
VB.NET

Javascript

WinRT APIs

.Net CLR/
Silverlight

Win32

HTML
CSS

XAML

Comm. &
Data

Graphics &
Media

Devices
&
Others

Windows Kernel Services

4

Start screen

Charms
Task Manager


5


6

•
•
•
•

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


7

Screen modes:

• Full-screen, both landscape and portrait
• Side-by-side

Design and implementation tips:

• Accommodate any screen mode and size
• Maintain state
• Plan for ergonomics

8

Your

Contract

Windows
Store
app

Contract

Contracts


9

• 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


10

Live tile
• 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


11


12

Choose the most comfortable language
JavaScript

C#/VB.NET

C++

Knowledge
Preservation

Web, HTML,
JavaScript

XAML, WPF,
Silverlight

XAML, C++

Code Reuse

Web apps

WPF or Silverlight, C++ codebase
or .NET 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


13

WinRT Language Features
Metadata

Metadata

C++/CX
Code

Metadata

WinRT

C# 5.0
Code

JavaScript
Code


14

• Helpers for:
• Namespaces
• Classes
• Mixins
• Promises
• App Models
• Navigation

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

• Page & user controls


15

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


16


17

18

www.sela.co.il

• 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 netbut performance and experience
could* suffer


19

• 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)

20


21


22

• 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.

• 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

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

28

www.sela.co.il

• 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.

1.
2.
3.
4.

Create New Project
Add reference to Cordova.js
Register “deviceready” event
Done


31

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

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


32


33

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.

Shai Raiten
• shair@sela.co.il
• http://blogs.Microsoft.co.il/blogs/shair


35

Building your first windows store app in html5 js phonegap

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

En vedette

En vedette (16)

Similaire à Building your first windows store app in html5 js phonegap

Similaire à Building your first windows store app in html5 js phonegap (20)

Dernier

Dernier (20)

Building your first windows store app in html5 js phonegap