© 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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 3
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 5
Windows 8.1 Features and Terms
Start screen
Task Manager
Charms
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6
Windows 8
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7
Be Fast and Fluid
• Purposeful animations• Predefined Animation Library• Touch-ready apps• Binding instead of events
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9
Use the Correct Contracts
Contracts
YourWindows Store
app
Contract Contract
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12
Roam to the Cloud
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 14
How WinRT Works – Language Projections
Metadata
Metadata
Metadata
WinRT
WinRT Language Features
C# 5.0 Code
C++/CXCode
JavaScriptCode
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 15
WinJS Overview
•Helpers for:• Namespaces• Classes• Mixins
•Promises•App Models•Navigation•Page & user controls
•Data binding•Controls•Animations•Templates•Utilities•Default CSS styles
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 16
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19
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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 20
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)
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 21
Development Options
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 22
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
PhoneGap API
JavaScript Native
API Reference - http://docs.phonegap.com/en/3.1.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
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 31
Hello PhoneGapWindows Store / Visual Studio
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 32
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.
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 35
Thanks You!Shai Raiten• [email protected]• http://blogs.Microsoft.co.il/blogs/shair