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
• “graduates hiring” program
• jobs.skype.com
Kam dál?