Real World Windows 8 Apps in JavaScript

  • View
    2.192

  • Download
    4

Embed Size (px)

DESCRIPTION

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.

Text of Real World Windows 8 Apps in JavaScript

  • 1. Real-World Windows8 Apps in JavaScript

2. Domenic Denicola https://github.com/domenic https://npmjs.org/~domenic https://github.com/NobleJSThings Ive done recently: http://es6isnigh.com Promises/A+ 3. NOOK Study 2.1http://www.barnesandnoble.com/nookstudy170K+ LOC 4. The Advanced BasicsIMPORTANT STUFF THATS NOT OBVIOUS 5. 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, 6. 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! 7. Lets talk about those controls

Inert until WinJS.UI.processAll is called: Then they morph into fully-functioning controls In particular the element gets a winControl property 8. Lets 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 usingWinJS.UI.setOptions(element) after calling WinJS.UI.processAll(element). 9. Lets talk about those controlsThe bad news: 10. Demo time 11. Cooking with GasWHAT REAL APPS NEED THAT STUPID DEMO APPS DONT 12. Its 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 13. Its 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 its immature and based on Knockout. Come up with your own! Ditch the WinJS navigation/pages/fragments. We know how to solve these problems. 14. Its 2012. How do we write code?First, we write tests.Too bad theres 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. 15. We need more open-source efforts: Libraries to wrap overcomplicated WinJS/Windows Integration into other MV* frameworksWhats 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. Lets build something.