• Save
Windows 8 javascript apps – getting it right
Upcoming SlideShare
Loading in...5

Windows 8 javascript apps – getting it right






Total Views
Views on SlideShare
Embed Views



3 Embeds 42

http://www.kowitz.net 24
http://kowitz.net 16
http://www.newsblur.com 2



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Windows 8 javascript apps – getting it right Presentation Transcript

  • 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 many JS-only extensions for Win8• JavaScript was always ASYNC• Better than XAML
  • Introducing “Sorty”
  • Elo
  • 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
  • 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
  • …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
  • 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)
  • Testing• C# code can take advantage of built-in Visual Studio Testing framework• JS can use Mocha or other JS testing libraries
  • Testing demo
  • 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
  • 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
  • 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=26 6563• VS 2012 Web Essentials: http://visualstudiogallery.msdn.microsoft.c om/07d54d12-7133-4e15-becb- 6f451ea3bea6
  • 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 @brendankowitz http://hg.kowitz.net/ddd/2012-Brisbane