Vývoj Windows Store aplikací pomocí HTML, CSS a Javascriptu

2012 © Skype. Commercially confidential.

2012 © Skype. Commercially confidential.

Aby bylo jasno …• původně Modern aplikace

• posléze Metro aplikace

• nyní Windows Store aplikace (Windows Store Apps)

2012 © Skype. Commercially confidential.

Obsah1. Skype a Windows 8

2. obecně o platformě Windows 8

3. Windows Store aplikace

4. Windows Library for Javascript

5. demo

2012 © Skype. Commercially confidential.

Skype a Windows 8

2012 © Skype. Commercially confidential.

Skype a Windows 8• Skype je součástí Microsoftu od 1.1.2012

• jsme samostatná divize – na stejné úrovni jako Windows, Office nebo Xbox

• napadlo nás, že udělat Skype pro Windows 8 není špatný nápad

• shodou okolností, podobný nápad mělo vedení Microsoftu

• přemýšleli jsme v čem to budeme psát

• chtělii jsme využít experty na web frontend (HTML, CSS)

• trochu jsme se báli C# + XAML

• Skype pro Windows 8 není jen o Javascriptu

• 100 vývojářů a QE, 10 týmů

• C++/C# backend, PHP web backend, Postgres database, web front end (HTML/CSS/JS)

2012 © Skype. Commercially confidential.

Windows 8

2012 © Skype. Commercially confidential.

Windows 8 - WinRT• nová sada API

• moderní a jednoduché

• HDC, WndProc, LPARAM, ...

• asynchronní

• zejména kvůli touch

• projekce WinRT API – C++, C#, VB, Javascript

2012 © Skype. Commercially confidential.

Co potřebujete pro vývoj• Windows 8

• Visual Studio 2012 (Express/Ultimate)

• Blend

• DOM Explorer

• Zephyr

• ale stačí notepad a PowerShell ...

• pokud nepotřebujeme psát native WinRT komponenty

• e-book: Brockschmidt, Kraig: “Programming Windows 8 Apps with HTML, CSS and Javascript” (zdrama)

• také jsme na ní začínali

• je skvělá

2012 © Skype. Commercially confidential.

Windows Store aplikace

2012 © Skype. Commercially confidential.

Proč zrovna HTML, Javascript a CSS• rozšířená technologie

• jednoduchost

• zkuste vysvětlit prarodičům C++ a Javascript

• nebude to pomalé?

• IE 10

• hardwareová akcelerace CSS

• můžeme psát i nativní kód v C++

• odpadají problémy s kompatibilitou

2012 © Skype. Commercially confidential.

Z čeho se Windows Store aplikace skládá

zdrojový kód (.js, .css, .html)

nativní kód (.dll)

resources (.png, .svg, …)

AppxManifest.xml

.appx

2012 © Skype. Commercially confidential.

Jak aplikace běží• wwahost.exe

• IE 10

• window.alert(…), window.open(…)

• sandbox

• izolace

• řízený přístup k citlivým zařízením (kamera, mikrofon)

• přístup do souborové systému (určuje manifest)

• lokální kontext vs. web kontext

• přístup k WinRT API, přístup ke vzdáleným skriptům

2012 © Skype. Commercially confidential.

Životní cyklus Windows Store aplikace• výdrž baterie, bandwidth

• focus → běží

• nemá focus → uspí se (suspended) a posléze ukončí (terminated)

• o uspání dostaneme zprávu, máme 5 s na uložení stavu (crash pokud to nestihneme)

• o ukončení zprávu nedostaneme, může nastat kdykoli, mimo naši kontrolu

• podpora pro “always connected”

• push notifikace

• toast, tile, badge

2012 © Skype. Commercially confidential.

Javascript, HTML a CSS

2012 © Skype. Commercially confidential.

Javascript• tak, jak ho všichni známe

• IE 10

• podpora ECMAScript 5 strict mode (“use strict”)

• existující knihovny

• JQuery

• Windows Library for Javascript 1.0 (WinJS)

• TypeScript

2012 © Skype. Commercially confidential.

WinJS• sdílená knihovna, automaticky distribuovaná přes Windows Store (manifest)

• „JQuery“ pro Windows Store aplikace

• Namespace, Class konstrukce

• derive, mix

• podpora pro práci s asynchronními voláními

• WinJS.Promise

• základní ovládací prvky Window Store aplikací (navíc k standardním HTML5)

• listview, rating, …

• data-binding – one-time, one-way

2012 © Skype. Commercially confidential.

HTML• HTML5

• Windows 8 specifické atributy

• data-win-control, data-win-bind, data-win-res, data-win-options

• standardní ovládací prvky

• navigace přidáváním elementů do DOMu spíše než přes <a href=“”>

2012 © Skype. Commercially confidential.

HTML markup - příklad<!-- sablona pro polozku listview -->

<div id="myTemplate" data-win-control="WinJS.Binding.Template">

<div style="width: 150px; height: 100px;">

<h2 data-win-bind="innerText: venueName"></h2>

<div data-win-res="{textContent: 'address_title'}"></div>

<div data-win-bind="innerText: venueAddress"></div>

</div>

</div>

2012 © Skype. Commercially confidential.

CSS• CSS3 na steroidech

• proprietární -ms property, -ms hodnoty, -ms pseudoelementy

• display: -ms-grid; display: -ms-flexbox;

• -ms-grid-columns: 1fr 300px;

• input::-ms-clear

• media query

• -ms-view-state: fullscreen | snapped | fill

2012 © Skype. Commercially confidential.

Demo

2012 © Skype. Commercially confidential.

Otázky?jindraparus

@jparus

jindrich.parus@skype.net

• “graduates hiring” program

• jobs.skype.com

Kam dál?