Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Windows 8 for Web Developers

3,072 views

Published on

Published in: Technology
  • 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

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);

×