Windows 8 for Web Developers
The nextperience!
Cross competence......not cross platform.
Yes, you can use your favourite js library……but find out what the “integration story” is.
Anatomy of an HTML5 Metro appHTML5CSSJavascript + client frameworks   HTML5WinJSWinRT                                 WinJ...
DemoBasic solution
App package - appx- Package (zip) - Folders and files- Manifest              Host                       AppContainer- Appl...
App package .appx
WinJS – A Windows JavaScript libraryControls with themed stylingApplication modelNavigationUtils & helpersPromises        ...
WinJS – JavaScript files   <!-- WinJS JavaScript files -->   <script src="//Microsoft.WinJS.0.6/js/base.js"></script>   <s...
WinJS - ControlsControls are touch enabled and metro styled
ListView, grouping, Semantic Zoom• “Contract” for grouping your data• Semantic zoom adds to user experience
“ListView CRUD”- Need to implement a “big” contract….- …but you will be rewarded!
WinJS – Application model  WinJS.UI.processAll();  The Application object  Life time management  Queueing of events       ...
WinJS - processAll   // Simplified..   app.onactivated = function(e){       ...           WinJS.UI.processAll();       ......
The Application object- var app = WinJS.Application;  - Creating a placeholder for your application    object- Callbacks  ...
Queueing of events- Encapsulation still important!  - Eventing enables async integration of    modules- Simple interface  ...
DemoApplication start
CSS
CSS3 Grid!
CSS Grid- Web standard under construction - May change- No longer “float hell” - “As easy as using tables”- New unit: frag...
CSS Grid
CSS Grid  #container {    display: -ms-grid;    -ms-grid-columns: 300px 1fr 300px;    -ms-grid-rows: 100px 1fr 100px;  }  ...
WinJS - CSS  ...  @media   screen and (-ms-view-state: fullscreen-landscape)  {}  @media   screen and (-ms-view-state: sna...
WinJS – CSS     <!-- WinJS style sheets--only include one. -->     <link href="//Microsoft.WinJS.0.6/css/ui-dark.css"     ...
WinJS – Utils And helpers  Promises  xhr (AJAX)  Namespaces  Constructing objects  Mixins                            WinJS
WinJS – Promises - Async  promise.then(completeHandler,               errorHandler,               progressHandler)        ...
WinJS – xhr   WinJS.xhr({       url: "http://www.example.org/somedata.json"   }).then(function(response){       updateDisp...
WinRT - Windows Runtime• Recap (?)• Windows Namespace• (Accessing C# code possible)                                 WinRT
Metro HTML5 Contexts - Security- Local Context  - Default, secure, cross-domain                                    ms-wwa:...
Metro HTML5 Contexts – Security, xhr
DemoFeed reader
Our experienceLarge templatesNeed BlendWrapper classes, pros/consWinRT is written for C# and C++ too!
AdvicesEncapsulation is still important. (No scopes in HTML) Use events.Start to use Blend.Learn the CSS Grid.Put media qu...
Improvements..Unit testsTwo-way data bindingNo “larger app” architecture template/help“Blend mode” debugging in VS === kil...
ResourcesDev Center/msdnBuild/conference videosblog.jayway.com
Thank you!
Bonus slides...
WinJS - Namespaces
WinJS – Utils, scopingperformancea = 5;(function(global, WinJS) {    var q = WinJS.Utilities.query;   WinJS.UI.processAll(...
WinJS – Utilsvar MyThing = WinJS.Class.define(    function(){   },    {        somethingUseful: function(){   }    });
WinJS - Mixinsvar MyControl = WinJS.Class.mix(    function(element, options){        this._domElement = element;        //...
Windows 8 for Web Developers
Upcoming SlideShare
Loading in...5
×

Windows 8 for Web Developers

2,645

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Windws 8 Key product generator http://filespeedy.net/download/27062/YjhlO ;))
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
2,645
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Visa vilka templates som finnsVisa ”Fake references”
  • “Zooma UT!” (till A,B,C..)
  • “Kontroller, utilsoch lifecycle-ramverk”
  • Målet från Microsoft verkar vara att man bara ska behöva anropa processAll() precis i början av sin applikation.
  • NOTE: Varför används inte onready som default?
  • NOTE: Varför används inte onready som default?NOTE:Är capture som ”anti bubbling”?
  • ”From div to control”, WinJS.UI.processAll(); Inklusive DOM Explorer och JavaScript console
  • ”Så, här står vi nu med en blank solution.. Hur ska vi börja tänka kring design och layout?”HTML5 är designat för att enkelt kunna göra applikationer (!) för webben. CSS3 är exakt samma sak, fast för layout och design.
  • NOTE: Heter dom likadant? Nej! Byt och berätta om application-klassen!!!
  • “Alltpåslidenärviktigt”Detgår med fördelattnästla grids.NOTE: När man säger “dettaelementetskavara I kolumn #1”, hur vet renderarenvilken grid man menar?!?
  • Skriv inget under sista media queryn!
  • “Så,dåhar vi litekollpå layout och design I vårnya metro app. Nu skabaraappengöranågotvettigtockså… ”  JavaScript
  • Always call “done” as the last promise method in your promise chain! Otherwise, if you forget to provide an errorHandler, the error will be very silent.
  • Nämn att man kommunicerar mellan kontexterna med HTML5 PostMessage!
  • När ”frågan” kommer...
  • NOTE: Uppdatera den här?
  • Vad är den första parametern?
  • Windows 8 for Web Developers

    1. 1. Windows 8 for Web Developers
    2. 2. The nextperience!
    3. 3. Cross competence......not cross platform.
    4. 4. Yes, you can use your favourite js library……but find out what the “integration story” is.
    5. 5. Anatomy of an HTML5 Metro appHTML5CSSJavascript + client frameworks HTML5WinJSWinRT WinJSC# Libraries (Win8) WinRT
    6. 6. DemoBasic solution
    7. 7. App package - appx- Package (zip) - Folders and files- Manifest Host AppContainer- Application Folder
    8. 8. App package .appx
    9. 9. WinJS – A Windows JavaScript libraryControls with themed stylingApplication modelNavigationUtils & helpersPromises WinJSWinJS namespace
    10. 10. WinJS – JavaScript files <!-- WinJS JavaScript files --> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    11. 11. WinJS - ControlsControls are touch enabled and metro styled
    12. 12. ListView, grouping, Semantic Zoom• “Contract” for grouping your data• Semantic zoom adds to user experience
    13. 13. “ListView CRUD”- Need to implement a “big” contract….- …but you will be rewarded!
    14. 14. WinJS – Application model WinJS.UI.processAll(); The Application object Life time management Queueing of events WinJS Navigation
    15. 15. WinJS - processAll // Simplified.. app.onactivated = function(e){ ... WinJS.UI.processAll(); ... }; ----------- // Equivalent to, for each node with data-win-control: var object = new WinJS.UI.SomeMetroControl(element, options););
    16. 16. The Application object- var app = WinJS.Application; - Creating a placeholder for your application object- Callbacks - onloaded, onactivated, onready - onunloaded, oncheckpoint- Starting the app - app.start();
    17. 17. Queueing of events- Encapsulation still important! - Eventing enables async integration of modules- Simple interface - addEventListener(“eventName”, callback) - queueEvent(eventRecord) - removeEventListener(“eventName”, callback)
    18. 18. DemoApplication start
    19. 19. CSS
    20. 20. CSS3 Grid!
    21. 21. CSS Grid- Web standard under construction - May change- No longer “float hell” - “As easy as using tables”- New unit: fragment (fr) - Uses “remaining part of page”
    22. 22. CSS Grid
    23. 23. CSS Grid #container { display: -ms-grid; -ms-grid-columns: 300px 1fr 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; }
    24. 24. WinJS - CSS ... @media screen and (-ms-view-state: fullscreen-landscape) {} @media screen and (-ms-view-state: snapped) {} @media screen and (-ms-view-state: filled) {} @media screen and (-ms-view-state: fullscreen-portrait) {}
    25. 25. WinJS – CSS <!-- WinJS style sheets--only include one. --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">CODE!All prefixed win
    26. 26. WinJS – Utils And helpers Promises xhr (AJAX) Namespaces Constructing objects Mixins WinJS
    27. 27. WinJS – Promises - Async promise.then(completeHandler, errorHandler, progressHandler) .done()
    28. 28. WinJS – xhr WinJS.xhr({ url: "http://www.example.org/somedata.json" }).then(function(response){ updateDisplay(JSON.parse(response.responseText)); }) .done();
    29. 29. WinRT - Windows Runtime• Recap (?)• Windows Namespace• (Accessing C# code possible) WinRT
    30. 30. Metro HTML5 Contexts - Security- Local Context - Default, secure, cross-domain ms-wwa://- Web Context - No WinRT ms-wwa- http:// and web:/// https://
    31. 31. Metro HTML5 Contexts – Security, xhr
    32. 32. DemoFeed reader
    33. 33. Our experienceLarge templatesNeed BlendWrapper classes, pros/consWinRT is written for C# and C++ too!
    34. 34. AdvicesEncapsulation is still important. (No scopes in HTML) Use events.Start to use Blend.Learn the CSS Grid.Put media queries in the bottom of a file.
    35. 35. Improvements..Unit testsTwo-way data bindingNo “larger app” architecture template/help“Blend mode” debugging in VS === killer tool
    36. 36. ResourcesDev Center/msdnBuild/conference videosblog.jayway.com
    37. 37. Thank you!
    38. 38. Bonus slides...
    39. 39. WinJS - Namespaces
    40. 40. WinJS – Utils, scopingperformancea = 5;(function(global, WinJS) { var q = WinJS.Utilities.query; WinJS.UI.processAll().then(function() { q(".output").forEach(function(e) { e.innerText = a; }); });})(window, WinJS);
    41. 41. WinJS – Utilsvar MyThing = WinJS.Class.define( function(){ }, { somethingUseful: function(){ } });
    42. 42. WinJS - Mixinsvar MyControl = WinJS.Class.mix( function(element, options){ this._domElement = element; // your code here.. }, WinJS.UI.DOMEventMixin, WinJS.Utilities .createEventProperties({swizzle: 0, spin: 0}) );var c = new MyControl(element);c.onswizzle = function(){ }c.addEventListener("spin", function(){ }, false);
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×