SlideShare a Scribd company logo
1 of 23
Windows 8 JavaScript Apps –
      getting it right

brendan.kowitz@readify.net   http://www.kowitz.net   @brendankowitz
1   • Introduction

    •   WinJs
    •   Testing
2   •   TypeScript
    •   Using C# Libraries
    •   Debugging

3   • 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.net

Thank you.                     http://www.kowitz.net

                               @brendankowitz




     http://hg.kowitz.net/ddd/2012-Brisbane

More Related Content

What's hot (8)

Brief overview of TypeScript - Ljubljana JavaScript Users Group
 Brief overview of TypeScript - Ljubljana JavaScript Users Group Brief overview of TypeScript - Ljubljana JavaScript Users Group
Brief overview of TypeScript - Ljubljana JavaScript Users Group
 
ITT Flisol 2013
ITT Flisol 2013ITT Flisol 2013
ITT Flisol 2013
 
NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1
 
Bledar Gjocaj - Java open source
Bledar Gjocaj - Java open sourceBledar Gjocaj - Java open source
Bledar Gjocaj - Java open source
 
A guide to getting started with WebdriverIO
A guide to getting started with WebdriverIOA guide to getting started with WebdriverIO
A guide to getting started with WebdriverIO
 
WebdriverIO: the Swiss Army Knife of testing
WebdriverIO: the Swiss Army Knife of testingWebdriverIO: the Swiss Army Knife of testing
WebdriverIO: the Swiss Army Knife of testing
 
[NijmegenJS] Node.js - 2014/04/25
[NijmegenJS] Node.js - 2014/04/25[NijmegenJS] Node.js - 2014/04/25
[NijmegenJS] Node.js - 2014/04/25
 
Web development in JavaEE7 with JSF, does it still matter?
Web development in JavaEE7 with JSF, does it still matter?Web development in JavaEE7 with JSF, does it still matter?
Web development in JavaEE7 with JSF, does it still matter?
 

Viewers also liked

ใบงานสำรวจตนเอง M6หยก
ใบงานสำรวจตนเอง M6หยกใบงานสำรวจตนเอง M6หยก
ใบงานสำรวจตนเอง M6หยก
Yokyok' Nnp
 
The new public health and std hiv prevention
The new public health and std hiv preventionThe new public health and std hiv prevention
The new public health and std hiv prevention
Springer
 
Penman Presentation-9 Quotation Slides...
Penman Presentation-9 Quotation Slides...Penman Presentation-9 Quotation Slides...
Penman Presentation-9 Quotation Slides...
Pradip Banerjee
 
Learning in non stationary environments
Learning in non stationary environmentsLearning in non stationary environments
Learning in non stationary environments
Springer
 
Principles of oocyte and embryo donation
Principles of oocyte and embryo donationPrinciples of oocyte and embryo donation
Principles of oocyte and embryo donation
Springer
 
Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)
Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)
Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)
Chris Bogan
 

Viewers also liked (16)

ใบงานสำรวจตนเอง M6หยก
ใบงานสำรวจตนเอง M6หยกใบงานสำรวจตนเอง M6หยก
ใบงานสำรวจตนเอง M6หยก
 
Building windows phone 7 apps for the enterprise
Building windows phone 7 apps for the enterpriseBuilding windows phone 7 apps for the enterprise
Building windows phone 7 apps for the enterprise
 
The new public health and std hiv prevention
The new public health and std hiv preventionThe new public health and std hiv prevention
The new public health and std hiv prevention
 
Penman Presentation-9 Quotation Slides...
Penman Presentation-9 Quotation Slides...Penman Presentation-9 Quotation Slides...
Penman Presentation-9 Quotation Slides...
 
Learning in non stationary environments
Learning in non stationary environmentsLearning in non stationary environments
Learning in non stationary environments
 
Principles of oocyte and embryo donation
Principles of oocyte and embryo donationPrinciples of oocyte and embryo donation
Principles of oocyte and embryo donation
 
Introduccion a la informatica
Introduccion a la informaticaIntroduccion a la informatica
Introduccion a la informatica
 
Subvenciones relacionadas con el ciclo integral del agua para las Entidades L...
Subvenciones relacionadas con el ciclo integral del agua para las Entidades L...Subvenciones relacionadas con el ciclo integral del agua para las Entidades L...
Subvenciones relacionadas con el ciclo integral del agua para las Entidades L...
 
59
5959
59
 
鑽石的重量與尺寸
鑽石的重量與尺寸鑽石的重量與尺寸
鑽石的重量與尺寸
 
Dimensiones del E-commerce en Colombia
Dimensiones del E-commerce en ColombiaDimensiones del E-commerce en Colombia
Dimensiones del E-commerce en Colombia
 
Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)
Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)
Blockbuster Launch Evolution - Chris Bogan Keynote-FINAL (09-24-2015)
 
Frequency spectrum
Frequency spectrumFrequency spectrum
Frequency spectrum
 
Structural and oct changes in diabetic retinopathy1
Structural and oct changes in diabetic retinopathy1Structural and oct changes in diabetic retinopathy1
Structural and oct changes in diabetic retinopathy1
 
GRAN DEBATE HOTELERO 2013
GRAN DEBATE HOTELERO 2013GRAN DEBATE HOTELERO 2013
GRAN DEBATE HOTELERO 2013
 
Presentación Openclass Ecommerce Manager Esnedi 11/2016
Presentación Openclass Ecommerce Manager Esnedi 11/2016Presentación Openclass Ecommerce Manager Esnedi 11/2016
Presentación Openclass Ecommerce Manager Esnedi 11/2016
 

Similar to Windows 8 javascript apps – getting it right

Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal language
Ronald Harmsen
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Gabriel Villa
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Jeremy Likness
 

Similar to Windows 8 javascript apps – getting it right (20)

Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScript
 
Developing a mobile cross-platform library
Developing a mobile cross-platform libraryDeveloping a mobile cross-platform library
Developing a mobile cross-platform library
 
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
 
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)
 
Radu vunvulea building and testing windows 8 metro style applications using ...
Radu vunvulea  building and testing windows 8 metro style applications using ...Radu vunvulea  building and testing windows 8 metro style applications using ...
Radu vunvulea building and testing windows 8 metro style applications using ...
 
Setting up your development environment
Setting up your development environmentSetting up your development environment
Setting up your development environment
 
Node.js for .NET Developers
Node.js for .NET DevelopersNode.js for .NET Developers
Node.js for .NET Developers
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal language
 
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
 
20120802 timisoara
20120802 timisoara20120802 timisoara
20120802 timisoara
 
Blazor.pptx
Blazor.pptxBlazor.pptx
Blazor.pptx
 
Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JS
 
Nodejs
NodejsNodejs
Nodejs
 
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav TulachJDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
Php on Windows
Php on WindowsPhp on Windows
Php on Windows
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 

Windows 8 javascript apps – getting it right

  • 1. Windows 8 JavaScript Apps – getting it right brendan.kowitz@readify.net http://www.kowitz.net @brendankowitz
  • 2. 1 • Introduction • WinJs • Testing 2 • TypeScript • Using C# Libraries • Debugging 3 • Wrapup
  • 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
  • 5. Elo
  • 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. 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. …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. 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. Testing • C# code can take advantage of built-in Visual Studio Testing framework • JS can use Mocha or other JS testing libraries
  • 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. 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. Libraries • Portable libraries • WinMD libraries • Windows Store Libraries
  • 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
  • 18. Storage • Local storage • Roaming storage • Offline storage – IndexDB
  • 19. Debugging • You can debug in JS • You can debug in C# • No, you can’t debug across both (yet)
  • 20. Gotchas • DEBUGGING. – If using C# Libraries with JS • WinJS adds crazy inline stuff to the DOM
  • 22. Discussion • Do you currently have a WinJS app? • Would you consider writing a WinJS app? • Any other questions?
  • 23. brendan.kowitz@readify.net Thank you. http://www.kowitz.net @brendankowitz http://hg.kowitz.net/ddd/2012-Brisbane

Editor's Notes

  1. 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