ݺߣ

ݺߣShare a Scribd company logo

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

•Download as PPTX, PDF•
•
Jindra Parus
Jindra Parus

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

1 of 19
Download to read offline
Vývoj Windows Store aplikací pomocí HTML, CSS a Javascriptu 2012 © Skype. Commercially confidential.
Aby bylo jasno … • původně Modern aplikace • posléze Metro aplikace • nyní Windows Store aplikace 2012 © Skype. Commercially confidential.
Co si odnesete • jednoduchost • čistota • příležitost 2012 © Skype. Commercially confidential.
Obsah 1. obecně o platformě Windows 8 2. Windows Store aplikace 3. Windows Library for Javascript 4. demo 2012 © Skype. Commercially confidential.
Windows 8 2012 © Skype. Commercially confidential.
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.
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.
Windows Store aplikace 2012 © Skype. Commercially confidential.
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.
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 WinRTAPI, 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) 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) • 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.
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.
á? jindraparus @jparus jindrich.parus@skype.net Kam dál? • job hall • jobs.skype.com 2012 © Skype. Commercially confidential.

More Related Content

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

  • 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. á? jindraparus @jparus jindrich.parus@skype.net Kam dál? • job hall • jobs.skype.com 2012 © Skype. Commercially confidential.

Editor's Notes

  1. puvodne Modern aplikace - to budeznitblbeza par let, protožeuž to nebude Modernposleze Metro, ale pak se ukazaloze to je jen codename a veskutecnostinemeckasamoobluha - co muzemeocekavat pro prazske metro se zatim nevioficialninazev Windows Store apps
  2. co siodnesetetetovaninebude, rozbila se jehlickovatiskarnaPsani aplikaci pro windows 8 store je jednoducheJS, HTML, CSSJednoduche WinRT APIWindows Store prinaseji cistotu UXfull screen, bezchromu, soustredi se naobsahprednaska Jan Cibulka v UX hallWindows Store aplikace predstavuji prilezitostStoreWindows 8 predstavuji masivnidistribucnikanalprednaskaStepanaBechynskehobezdev to nejde, takzetatoprednaska je bezpochybynejdulezitejsi
  3. Windows 8 je nova verze OS od MS. RP public. GA 26. rijna.Windows 8 prinaseji krome klasickeho desktopu zalozeneho na Win32 i novy druh aplikaci zalonych na WinRT API. WinRT je nova sada API pro Windows Store aplikace.Oproti Win32 je WinRT modernejsi a jednodussi (OOP, zadne HDC, WndProc a LPARAM)Rada volani asynchronni kvuli touch – nemuzeme si dovolit blokovat.Promise v javascriptu, await v C#Aplikace zalozene na WinRT bezi v sanboxu – izolace od ostatnich aplikaci, rizeny pristup k zarizenim jako napr. Kamera a mikrofon, pristup do souboroveho systemu.Existujiprojekce pro Javascript, C#, C++ a VBProcjsemsivybralJavascript + HTML + CSS nawebexpo?publikumtechnologiejizzna, akoratpouziva v jinemkontextuMS melpodobnyduvod
  4. win8 (RP public, 26. rijna GA)visual studio 2012 expressale pokudnedelame native komponenty, kterevyzadujikompilaci, takstaci notepad, Win8 applikace je pouzezazipovanybalicekblenddom explorerkniha “Programming Windows 8 Apps with HTML, CSS and Javascript” od KraigaBrockschmidta (preview http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx)
  5. .NET (proprietarnitechnologie MS) ma velkoupenetraci, ale ne zdalekatakovoujako JS a HTML5Jednoduchostexistujiciaplikace, knihovnykazdy se to snadnonauci a muzesirikat app developernebude to pomale?js engine IE 10muzemepsati native (hybridniaplikace)C++potrebujemeruznekomponenty pro ruznearchitektury - x86, x64, arm.NET.NET framework 4.5odpadajicrossbrowserproblemy, aplikacepobezijen v IE10
  6. kod - html, js, csspristup v markupu&lt;imgsrc=”/images/logo.png”&gt;v koduopenFile(“ms-appx:///images/logo.png”)nativnikoddllskypeano, low level socket komunikaci, kodovani, dekodovanivideazatim v jsnedelame ;-)zdrojeobrazky (rastr, svg), zvuky, jazykoveretezcems-resource://manifest.xmlco je aplikacezac (zakladniidentifikace, store)capabilities - deklarujemepristup k sys. zdrojumkamera, micinternetexplicitnipovoleniuzivatelem, muzekdykolivypnoutjazykypodpis - zabranujezneuzitikoducele v jednombalicku - appx, vlastne zip, ale ma vychytavky pro distribuci a zabezpecenijskod je videt, yay!azbudeskype, tak se podivejteinstalaceprespowershell scriptvlastnejenzapisasinamilion mist v registrechnekonzistencepriselhani deploy/unistall, vim o sys. registru vice nezbychchtel
  7. wwahost - IE 10 bez UI, renderuje HTML a provadi JShosted environmentexistujiodlisnostiwindow.alert(...), window.open(...) nefungujisandboxizolace od systemu a ostatnichaplikacibroked access kezdrojum (kamera, mic, …)kamaplikacemuzepsat, odkudmuze cist (manifest!)lokalnikontextma pristup k WinRT APIbezi v nemhlavnistranka (deklarovana v manifestu)web kontextnemapristup k WinRT APIma pristupkevzdalenymskriptumiframems-appx-web:/// nebo http[s]://localdata, locallsettings, roaming folder, temp folderroaming, opravdu??