Real World Windows 8 Apps in JavaScript
Upcoming SlideShare
Loading in...5
×
 

Real World Windows 8 Apps in JavaScript

on

  • 3,102 views

Let’s talk about what Microsoft has given us for building ambitious, real-world Windows 8 apps in HTML5 and JavaScript—but also what’s missing, and how we can fill in the gaps.

Let’s talk about what Microsoft has given us for building ambitious, real-world Windows 8 apps in HTML5 and JavaScript—but also what’s missing, and how we can fill in the gaps.

Statistics

Views

Total Views
3,102
Views on SlideShare
3,053
Embed Views
49

Actions

Likes
1
Downloads
20
Comments
0

6 Embeds 49

https://twitter.com 31
http://lanyrd.com 9
http://jabbr.net 4
https://si0.twimg.com 2
http://www.linkedin.com 2
https://jabbr.net 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Hook: “Microsoft 1.0”
  • https://github.com/bnedu/beretta/blob/master/package.json#L14-47https://github.com/NobleJS/WinningJS-build

Real World Windows 8 Apps in JavaScript Real World Windows 8 Apps in JavaScript Presentation Transcript

  • Real-World Windows8 Apps in JavaScript
  • Domenic Denicola• https://github.com/domenic• https://npmjs.org/~domenic• https://github.com/NobleJSThings I’ve done recently:• http://es6isnigh.com• Promises/A+
  • NOOK Study 2.1http://www.barnesandnoble.com/nookstudy170K+ LOC
  • The Advanced BasicsIMPORTANT STUFF THAT’S NOT OBVIOUS
  • Windows vs. WinJSWindows: shared between all app typesMostly non-applicable stuff: Xaml, JSON, threading, …Gems you might have to deal with:• Windows.Graphics.Display.DisplayProperties.resolutionScale• Windows.UI.Notifications.ToastNotificationManager.createToastNotifier• Windows.Globalization.DateTimeFormatting.DateTimeFormatter.shortDate.formatUseful-looking namespaces:• Windows.Devices.Sensors, Windows.Storage.Pickers, Windows.Networking.PushNotifications, …
  • Windows vs. WinJSWinJS: JavaScript specificGood/useful:• WinJS.Application: application lifecycle• WinJS.Resources: resource strings• WinJS.UI: controlsBad/ugly:• WinJS.Utilities, WinJS.Fragments, WinJS.Navigation, WinJS.UI.Pages: use other libs• WinJS.Class, WinJS.Namespace: yet another class library• WinJS.Binding: one-way databinding, WTF!
  • Let’s talk about those controls<div data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ id: cmd, label: Command, icon: placeholder }"> </button></div>Inert until WinJS.UI.processAll is called:• Then they morph into fully-functioning controls• In particular the element gets a winControl property
  • Let’s talk about those controls The good news:• Implemented entirely in JavaScript, HTML, and CSS!• Takes care of so much for you• You can avoid the inline attributes (which can only refer to global variables) by using WinJS.UI.setOptions(element) after calling WinJS.UI.processAll(element).
  • Let’s talk about those controlsThe bad news:
  • Demo time
  • Cooking with GasWHAT REAL APPS NEED THAT STUPID DEMO APPS DON’T
  • It’s 2012. What do we expect?• A module system• A package ecosystem• A way to stop writing raw CSS/HTML/JS• A build process!Introducing: WinningJS-build
  • It’s 2012. How do we structure apps?• We use a MV* framework: • Angular • Backbone • Ember • Knockout • …• BUT! We need to integrate with WinJS controls • This needs custom solutions • WinningJS UI is one, but it’s immature and based on Knockout. • Come up with your own!• Ditch the WinJS navigation/pages/fragments. We know how to solve these problems.
  • It’s 2012. How do we write code?First, we write tests.Too bad there’s no support for running them, at all.This problem is not solved yet. Ideas:• Stub everything, including the DOM/WinJS.*/Windows.*, and run your tests in Node.• Create a “hidden screen” where you can manually run your tests.• Automate somehow.
  • • We need more open-source efforts: • Libraries to wrap overcomplicated WinJS/Windows • Integration into other MV* frameworksWhat’s • Sample appsNext • We need tooling: • Better scaffolding and build tools • Improve and extend Visual Studio… • … or branch out and make it work in a text editor • We need to solve the testing problem! Talk to me. Let’s build something.