Vývoj Windows Store aplikací pomocí HTML,CSS a Javascriptu2012 © Skype. Commercially confidential.
Aby bylo jasno …• původně Modern aplikace• posléze Metro aplikace• nyní Windows Store aplikace (Windows Store Apps) 2012 ©...
Obsah1. Skype a Windows 82. obecně o platformě Windows 83. Windows Store aplikace4. Windows Library for Javascript5. demo ...
Skype a Windows 82012 © Skype. Commercially confidential.
Skype a Windows 8• Skype je součástí Microsoftu od 1.1.2012  •    jsme samostatná divize – na stejné úrovni jako Windows, ...
Windows 82012 © Skype. Commercially confidential.
Windows 8 - WinRT•       nová sada API•       moderní a jednoduché    •      HDC, WndProc, LPARAM, ...•       asynchronní ...
Co potřebujete pro vývoj• Windows 8• Visual Studio 2012 (Express/Ultimate)  •    Blend  •    DOM Explorer  •    Zephyr• al...
Windows Store aplikace2012 © Skype. Commercially confidential.
Proč zrovna HTML, Javascript a CSS• rozšířená technologie• jednoduchost  •    zkuste vysvětlit prarodičům C++ a Javascript...
Z čeho se Windows Store aplikace skládá                                            zdrojový kód (.js,                     ...
Jak aplikace běží• wwahost.exe  •    IE 10  •    window.alert(…), window.open(…)• sandbox  •    izolace  •    řízený příst...
Životní cyklus Windows Store aplikace• výdrž baterie, bandwidth• focus → běží• nemá focus → uspí se (suspended) a posléze ...
Javascript, HTML a CSS2012 © Skype. Commercially confidential.
Javascript• tak, jak ho všichni známe• IE 10• podpora ECMAScript 5 strict mode (“use strict”)• existující knihovny  •    J...
WinJS• sdílená knihovna, automaticky distribuovaná přes Windows Store (manifest)  • „JQuery“ pro Windows Store aplikace• N...
HTML• HTML5• Windows 8 specifické atributy  •    data-win-control, data-win-bind,       data-win-res, data-win-options• st...
HTML markup - příklad<!-- sablona pro polozku listview --><div id="myTemplate" data-win-control="WinJS.Binding.Template"> ...
CSS• CSS3 na steroidech• proprietární -ms property, -ms hodnoty, -ms pseudoelementy  •    display: -ms-grid; display: -ms-...
Demo2012 © Skype. Commercially confidential.
Otázky?        jindraparus        @jparus        jindrich.parus@skype.netKam dál?• “graduates hiring” program• jobs.skype....
Upcoming SlideShare
Loading in …5
×

Vyvoj Windows Store aplikaci pomoci HTML, CSS a Javascriptu

661 views

Published on

  • Be the first to comment

  • Be the first to like this

Vyvoj Windows Store aplikaci pomoci HTML, CSS a Javascriptu

  1. 1. Vývoj Windows Store aplikací pomocí HTML,CSS a Javascriptu2012 © Skype. Commercially confidential.
  2. 2. Aby bylo jasno …• původně Modern aplikace• posléze Metro aplikace• nyní Windows Store aplikace (Windows Store Apps) 2012 © Skype. Commercially confidential.
  3. 3. Obsah1. Skype a Windows 82. obecně o platformě Windows 83. Windows Store aplikace4. Windows Library for Javascript5. demo 2012 © Skype. Commercially confidential.
  4. 4. Skype a Windows 82012 © Skype. Commercially confidential.
  5. 5. 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.
  6. 6. Windows 82012 © Skype. Commercially confidential.
  7. 7. 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.
  8. 8. 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.
  9. 9. Windows Store aplikace2012 © Skype. Commercially confidential.
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. Ž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.
  14. 14. Javascript, HTML a CSS2012 © Skype. Commercially confidential.
  15. 15. 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.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. Demo2012 © Skype. Commercially confidential.
  21. 21. Otázky? jindraparus @jparus jindrich.parus@skype.netKam dál?• “graduates hiring” program• jobs.skype.com 2012 © Skype. Commercially confidential.

×