SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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 GroupPeter A. Pirc
 
NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1NodeJs Intro - JavaScript Zagreb Meetup #1
NodeJs Intro - JavaScript Zagreb Meetup #1Tomislav Capan
 
Bledar Gjocaj - Java open source
Bledar Gjocaj - Java open sourceBledar Gjocaj - Java open source
Bledar Gjocaj - Java open sourceOpen Labs Albania
 
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 WebdriverIONilenth Selvaraja
 
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 testingDaniel Chivescu
 
[NijmegenJS] Node.js - 2014/04/25
[NijmegenJS] Node.js - 2014/04/25[NijmegenJS] Node.js - 2014/04/25
[NijmegenJS] Node.js - 2014/04/25jvdheijden
 
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?Paris Apostolopoulos
 

Tendances (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?
 

En vedette

ใบงานสำรวจตนเอง M6หยก
ใบงานสำรวจตนเอง M6หยกใบงานสำรวจตนเอง M6หยก
ใบงานสำรวจตนเอง M6หยกYokyok' Nnp
 
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 enterprisebrendankowitz
 
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 preventionSpringer
 
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 environmentsSpringer
 
Principles of oocyte and embryo donation
Principles of oocyte and embryo donationPrinciples of oocyte and embryo donation
Principles of oocyte and embryo donationSpringer
 
Introduccion a la informatica
Introduccion a la informaticaIntroduccion a la informatica
Introduccion a la informaticanauppa07
 
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...CEDER Merindades
 
鑽石的重量與尺寸
鑽石的重量與尺寸鑽石的重量與尺寸
鑽石的重量與尺寸neo423
 
Dimensiones del E-commerce en Colombia
Dimensiones del E-commerce en ColombiaDimensiones del E-commerce en Colombia
Dimensiones del E-commerce en ColombiaWebstrategias
 
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
 
Frequency spectrum
Frequency spectrumFrequency spectrum
Frequency spectrumNikhil Baby
 
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 retinopathy1suchismita Rout
 
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/2016Jorge Gonzalez Marcos
 

En vedette (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
 

Similaire à Windows 8 javascript apps – getting it right

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 JavaScriptDomenic Denicola
 
Developing a mobile cross-platform library
Developing a mobile cross-platform libraryDeveloping a mobile cross-platform library
Developing a mobile cross-platform libraryKostis Dadamis
 
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 timeEinar Ingebrigtsen
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsTimmy Kokke
 
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)brendankowitz
 
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 ...Radu Vunvulea
 
Setting up your development environment
Setting up your development environmentSetting up your development environment
Setting up your development environmentNicole Ryan
 
Node.js for .NET Developers
Node.js for .NET DevelopersNode.js for .NET Developers
Node.js for .NET DevelopersDavid Neal
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal languageRonald Harmsen
 
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 / HTML5David Voyles
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conferencedmethvin
 
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
 
Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JSbrendankowitz
 
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 TulachPROIDEA
 
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 2Jeremy Likness
 

Similaire à 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
 

Dernier

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 

Dernier (20)

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 

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

Notes de l'éditeur

  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