Real World Windows 8 Apps in JavaScript
Download as PPTX, PDF1 like2,102 views
The document discusses developing Windows 8 apps using JavaScript, highlighting the differences between Windows and WinJS, and providing insights on useful namespaces and controls. It emphasizes the need for modern app structure, module systems, and testing solutions, while proposing integration with existing frameworks and tools. Additionally, it identifies challenges and calls for open-source efforts to enhance the development experience.
Real World Windows 8 Apps in JavaScript
- 1. Real-World Windows 8 Apps in JavaScript
- 2. Domenic Denicola • https://github.com/domenic • https://npmjs.org/~domenic • https://github.com/NobleJS Things I’ve done recently: • http://es6isnigh.com • Promises/A+
- 4. The Advanced Basics IMPORTANT STUFF THAT’S NOT OBVIOUS
- 5. Windows vs. WinJS Windows: shared between all app types Mostly 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.format Useful-looking namespaces: • Windows.Devices.Sensors, Windows.Storage.Pickers, Windows.Networking.PushNotifications, …
- 6. Windows vs. WinJS WinJS: JavaScript specific Good/useful: • WinJS.Application: application lifecycle • WinJS.Resources: resource strings • WinJS.UI: controls Bad/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. 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
- 8. 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).
- 9. Let’s talk about those controls The bad news:
- 10. Demo time
- 11. Cooking with Gas WHAT REAL APPS NEED THAT STUPID DEMO APPS DON’T
- 12. 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
- 13. 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.
- 14. 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.
- 15. • We need more open-source efforts: • Libraries to wrap overcomplicated WinJS/Windows • Integration into other MV* frameworks What’s • Sample apps Next • 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.