Představení nevídaného nasazení Javascriptu a HTML pro vývoj aplikací pro Windows 8 Metro.

1. Vývoj Windows Store aplikací pomocí HTML,
CSS a Javascriptu
2012 © Skype. Commercially confidential.

2. Aby bylo jasno …
• původně Modern aplikace
• posléze Metro aplikace
• nyní Windows Store aplikace
2012 © Skype. Commercially confidential.

3. Co si odnesete
• jednoduchost
• čistota
• příležitost
2012 © Skype. Commercially confidential.

4. Obsah
1. obecně o platformě Windows 8
2. Windows Store aplikace
3. Windows Library for Javascript
4. demo
2012 © Skype. Commercially confidential.

5. Windows 8
2012 © Skype. Commercially confidential.

6. Windows 8 - WinRT
• nová sada API
• moderní
• jednoduché (žádné HDC, WndProc a LPARAM)
• asynchronní
• bezpečné
• sandbox
• přístup k citlivým zařízením (kamera, mikrofon)
• projekce WinRT API – C++, C#, VB, Javascript
2012 © Skype. Commercially confidential.

7. Co potřebujete pro vývoj
• Windows 8
• Visual Studio 2012 (Express/Ultimate)
• Blend
• DOM Explorer (“Firebug pro Windows Store aplikace”)
• ale stačí notepad a PowerShell ...
2012 © Skype. Commercially confidential.

8. Windows Store aplikace
2012 © Skype. Commercially confidential.

9. Proč zrovna HTML, Javascript a CSS
• rozšířená technologie
• jednoduchost
• 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.

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

11. 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 WinRTAPI, přístup ke vzdáleným skriptům
2012 © Skype. Commercially confidential.

12. Ž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.

13. Javascript, HTML a CSS
2012 © Skype. Commercially confidential.

14. 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)
2012 © Skype. Commercially confidential.

15. 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)
• data-binding – one-time, one-way
2012 © Skype. Commercially confidential.

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

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

18. Demo
2012 © Skype. Commercially confidential.

19. Otázky?
jindraparus
@jparus
jindrich.parus@skype.net
Kam dál?
• job hall
• jobs.skype.com
2012 © Skype. Commercially confidential.