SlideShare a Scribd company logo
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.
Otázky?
        jindraparus

        @jparus

        jindrich.parus@skype.net



Kam dál?
• job hall

• jobs.skype.com


 2012 © Skype. Commercially confidential.

More Related Content

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

Co přináší Oracle Database 12c Release 2
Co přináší Oracle Database 12c Release 2Co přináší Oracle Database 12c Release 2
Co přináší Oracle Database 12c Release 2MarketingArrowECS_CZ
 
PhoneGap Školení #1
PhoneGap Školení #1PhoneGap Školení #1
PhoneGap Školení #1Martin Kaše
 
Borek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro webBorek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro webDevelcz
 
KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)
KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)
KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)Michal ZOBEC
 
Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]
Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]
Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]Security Session
 
Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Pavel Růžička
 
Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]Tomáš Kukol
 
Spring framework - J2EE S Lidskou Tvari
Spring framework - J2EE S Lidskou TvariSpring framework - J2EE S Lidskou Tvari
Spring framework - J2EE S Lidskou TvariRoman Pichlík
 
Anonymní Inteligenti - Angular js
Anonymní Inteligenti - Angular jsAnonymní Inteligenti - Angular js
Anonymní Inteligenti - Angular jsPetr Stanislav
 

Similar to Vývoj Windows Store aplikací pomocí HTML, CSS a Javascriptu (20)

Joomla! na MS Windows
Joomla! na MS WindowsJoomla! na MS Windows
Joomla! na MS Windows
 
Webové technologie
Webové technologieWebové technologie
Webové technologie
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
 
06 Cvičení.pptx
06 Cvičení.pptx06 Cvičení.pptx
06 Cvičení.pptx
 
Co přináší Oracle Database 12c Release 2
Co přináší Oracle Database 12c Release 2Co přináší Oracle Database 12c Release 2
Co přináší Oracle Database 12c Release 2
 
PhoneGap Školení #1
PhoneGap Školení #1PhoneGap Školení #1
PhoneGap Školení #1
 
Borek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro webBorek Bernard: TypeScript - příčetný jazyk pro web
Borek Bernard: TypeScript - příčetný jazyk pro web
 
TNPW2-2013-07
TNPW2-2013-07TNPW2-2013-07
TNPW2-2013-07
 
KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)
KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)
KeePass: Základy, pokročilé využití a KeePass Enterprise (čtvrtek, 14.4.2022)
 
TNPW2-2013-03
TNPW2-2013-03TNPW2-2013-03
TNPW2-2013-03
 
Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]
Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]
Softwarove protektory / KAREL LEJSKA, MILAN BARTOŠ [DEFENDIO]
 
Začínáme iOS vývoj
Začínáme iOS vývojZačínáme iOS vývoj
Začínáme iOS vývoj
 
Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)
 
Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]Smalltalk prakticky [CZ]
Smalltalk prakticky [CZ]
 
TNPW2-2016-03
TNPW2-2016-03TNPW2-2016-03
TNPW2-2016-03
 
Horizon 8 + Instant Clones
Horizon 8 + Instant ClonesHorizon 8 + Instant Clones
Horizon 8 + Instant Clones
 
TNPW2-2016-05
TNPW2-2016-05TNPW2-2016-05
TNPW2-2016-05
 
TNPW2-2012-02
TNPW2-2012-02TNPW2-2012-02
TNPW2-2012-02
 
Spring framework - J2EE S Lidskou Tvari
Spring framework - J2EE S Lidskou TvariSpring framework - J2EE S Lidskou Tvari
Spring framework - J2EE S Lidskou Tvari
 
Anonymní Inteligenti - Angular js
Anonymní Inteligenti - Angular jsAnonymní Inteligenti - Angular js
Anonymní Inteligenti - Angular js
 

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. Otázky? 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??