Windows 8 JavaScript Apps –      getting it rightbrendan.kowitz@readify.net   http://www.kowitz.net   @brendankowitz
1   • Introduction    •   WinJs    •   Testing2   •   TypeScript    •   Using C# Libraries    •   Debugging3   • Wrapup
Why use WinJS?• Can still use C# libraries• Power of CSS3 and HTML5• WinJS’s bindings to native controls and  also has man...
Introducing “Sorty”
Elo
Getting started with WinJs• VS2012 (duh)  – VS 2012 Web Essentials  – Blend for Visual Studio• Online: Roadmap for Windows...
So it’s like making a web site?…•   Its HTML5, JS and CSS•   Can use a large number of existing JS libs•   You have some b...
…but not• COM Wrapped in JavaScript• Exception driven development• You don’t have network latency to load  resources• You ...
3rd Party JS Controls• Existing JavaScript plugins _can_  – Produce problematic HTML  – Break Windows 8 UX guides• Stick w...
Testing• C# code can take advantage of built-in  Visual Studio Testing framework• JS can use Mocha or other JS testing  li...
Testing demo
Using C# Libraries• Can only reference WinMD libraries• WinMD libraries can reference portable  and Windows Store librarie...
Async• You will need to make use of the Promise  pattern  WinJS.xhr({    url:"http://www.example.org/somedata.json"  }).do...
Libraries• Portable libraries• WinMD libraries• Windows Store Libraries
Consuming C# from WinJS
Typescript for WinJs?• Yes.• Windows 8 & VS2012• Download the TypeScript plugin:  http://go.microsoft.com/fwlink/?LinkID=2...
TypeScript in WinJS
Storage• Local storage• Roaming storage• Offline storage  – IndexDB
Debugging• You can debug in JS• You can debug in C#• No, you can’t debug across both (yet)
Gotchas• DEBUGGING. – If using C# Libraries with JS• WinJS adds crazy inline stuff to the DOM
Getting it together
Discussion• Do you currently have a WinJS app?• Would you consider writing a WinJS app?• Any other questions?
brendan.kowitz@readify.netThank you.                     http://www.kowitz.net                               @brendankowit...
Upcoming SlideShare
Loading in...5
×

Windows 8 javascript apps – getting it right

869

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
869
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • jQuery normalizes browser quirksBut you don’t have multiple browsersSizzle adds CSS selector queriesThis is native in IE10 (and IE9)WinJS has APIs for thisMost animations can be done with CSS3
  • Windows 8 javascript apps – getting it right

    1. 1. Windows 8 JavaScript Apps – getting it rightbrendan.kowitz@readify.net http://www.kowitz.net @brendankowitz
    2. 2. 1 • Introduction • WinJs • Testing2 • TypeScript • Using C# Libraries • Debugging3 • Wrapup
    3. 3. Why use WinJS?• Can still use C# libraries• Power of CSS3 and HTML5• WinJS’s bindings to native controls and also has many JS-only extensions for Win8• JavaScript was always ASYNC• Better than XAML
    4. 4. Introducing “Sorty”
    5. 5. Elo
    6. 6. Getting started with WinJs• VS2012 (duh) – VS 2012 Web Essentials – Blend for Visual Studio• Online: Roadmap for Windows Store apps using JavaScript – http://is.gd/ClIOax
    7. 7. So it’s like making a web site?…• Its HTML5, JS and CSS• Can use a large number of existing JS libs• You have some browser limitations• Watch out for DOM manipulation errors
    8. 8. …but not• COM Wrapped in JavaScript• Exception driven development• You don’t have network latency to load resources• You don’t have traditional page events• Tombstoning• You don’t _need_ jQuery
    9. 9. 3rd Party JS Controls• Existing JavaScript plugins _can_ – Produce problematic HTML – Break Windows 8 UX guides• Stick with shipped controls• Or build your own• Use those specifically created via a vendor (Telerik etc)
    10. 10. Testing• C# code can take advantage of built-in Visual Studio Testing framework• JS can use Mocha or other JS testing libraries
    11. 11. Testing demo
    12. 12. Using C# Libraries• Can only reference WinMD libraries• WinMD libraries can reference portable and Windows Store libraries• Unit testing supported• WinMD libraries CAN reference other Windows Store and Portable Libraries
    13. 13. Async• You will need to make use of the Promise pattern WinJS.xhr({ url:"http://www.example.org/somedata.json" }).done(function (response) { updateDisplay( JSON.parse(response.responseText)); }); http://wiki.commonjs.org/wiki/Promises/A
    14. 14. Libraries• Portable libraries• WinMD libraries• Windows Store Libraries
    15. 15. Consuming C# from WinJS
    16. 16. Typescript for WinJs?• Yes.• Windows 8 & VS2012• Download the TypeScript plugin: http://go.microsoft.com/fwlink/?LinkID=26 6563• VS 2012 Web Essentials: http://visualstudiogallery.msdn.microsoft.c om/07d54d12-7133-4e15-becb- 6f451ea3bea6
    17. 17. TypeScript in WinJS
    18. 18. Storage• Local storage• Roaming storage• Offline storage – IndexDB
    19. 19. Debugging• You can debug in JS• You can debug in C#• No, you can’t debug across both (yet)
    20. 20. Gotchas• DEBUGGING. – If using C# Libraries with JS• WinJS adds crazy inline stuff to the DOM
    21. 21. Getting it together
    22. 22. Discussion• Do you currently have a WinJS app?• Would you consider writing a WinJS app?• Any other questions?
    23. 23. brendan.kowitz@readify.netThank you. http://www.kowitz.net @brendankowitz http://hg.kowitz.net/ddd/2012-Brisbane

    ×