winjs at nyc code camp 2012
DESCRIPTION
TRANSCRIPT
![Page 2: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/2.jpg)
MARQUEE SPONSOR
![Page 3: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/3.jpg)
PLATINUM SPONSOR
![Page 4: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/4.jpg)
PLATINUM SPONSOR
![Page 5: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/5.jpg)
PLATINUM SPONSOR
![Page 6: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/6.jpg)
GOLD SPONSORS
![Page 7: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/7.jpg)
SILVER SPONSORS
![Page 8: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/8.jpg)
Agenda
Switching from C# What is WinJS? What’s under the hood? Where does WinJS fit? What’s new in WinJS? Patterns and Practices Managing WinJS on the Enterprise Testing WinJS for Store Submission
![Page 9: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/9.jpg)
What I will not talk about
Tiles and Notifications Content before Chrome Sensors/NFC Contracts/Charms New Controls Process Lifecycle Management Triggers/Background Tasks Etc…
![Page 10: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/10.jpg)
Switching from C#/XAML to WinJS
Difference in thinking – advantages of HTML5 over XAML XAML -> HTML5/CSS3 C#/CLR -> Javascript/WinJS Code Organization MVVM -> MVC Available Tools Is C# now obsolete?
![Page 11: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/11.jpg)
What is WinJS?
A standard library to access native Windows 8 functionality through Javascript and HTML5
Fully HTML5-compliant Uses attributes to add new Windows 8 functionality to standard
HTML5 code Accessed as a standard object in Javascript
![Page 12: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/12.jpg)
![Page 13: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/13.jpg)
What’s under the hood?
Language projections Web hardware-accelerated rendering and Javascript interpretation
technology originally started with IE9 (HTML5 compliant) Connects to the same .winmd components as the C#/XAML Windows
8 applications Chakra JScript engine has its peculiarities – garbage collection is done
at the end of script execution, can use up a lot of memory Will WinJS evolve away from IE roots?
![Page 14: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/14.jpg)
Under the hood (cont’d)
Chakra engine for Javascript interpretation
![Page 15: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/15.jpg)
Where does WinJS fit?
Rapid development, friendly to web developers Performance can be slower than other languages, may improve in the
future Can fully interface with components written in other languages More maintainable by enterprises with web developer staff Development can be less frustrating and cheaper if you take
advantage of libraries and resources already available to JS developers Lower costs and faster workflow – designers can work with HTML
directly
![Page 16: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/16.jpg)
![Page 17: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/17.jpg)
Other JS Libraries
jQuery Graphing (HighCharts or Raphael) MVC libraries You can create applications without using WinJS at all!
![Page 18: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/18.jpg)
What’s new?
Page Structure/Navigation Promises Cloud Integration Contracts Tiles and Notifications Speech Integration
![Page 19: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/19.jpg)
Page Structure and Navigation in WinJS Similar to the browser – HTML file that references JS files PageControlNavigator out of the box Navigation back stack Standard Project Template Demo
![Page 20: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/20.jpg)
Promises
Async pattern implemented in javascript, similar to try-catch-finally
WinJS.xhr({ url: urlString, responseType: "json" }).then( function handleResponse(result) { // Handle the returned data },
function handleException(exception) {// Handle return exception
} ).done(function afterResponse() {
// Handle code to be executed once xhr returns});
![Page 21: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/21.jpg)
Cloud integration
File Picker APIs – saving to the cloud and loading from the cloud – allows us to expose the cloud as part of the file system
File Picker APIs – exposes a custom UI that allows users to pick files to open or a location to save - hosted view activation.
File Picker APIs – what constitutes a file is up to you – aggregation? Roaming API – saving data in the cloud that is associated with your
profile Roaming API - creating an experience, not just one app on one machine SkyDrive Demo
![Page 22: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/22.jpg)
Patterns and Practices
MVC? Regions Combining WinJS with C# via .winmd components Modules and Dependency Injection Dynamic code loading (requires disabling security)
![Page 23: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/23.jpg)
MVVM
There were problems with MVVM Lack of controllers in classic MVVM, debate between heavy VMs and
use of controllers Dedicated classes to store information for presentation With XAML, only one DataContext per view Can’t be directly transitioned to WinJS – absence of two-way bindings,
multiple data contexts per view
![Page 24: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/24.jpg)
![Page 25: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/25.jpg)
![Page 26: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/26.jpg)
![Page 27: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/27.jpg)
MVC on WinJS
Where do we move from MVVM? Is MVVM dead? Current limitation: no two-way binding in WinJS Have to trap user input and respond to it Trapping can be done via a controller, get rid of classic MVVM Application/Domain Model conversion can be done via regions Use defined namespaces and classes to create observable objects;
ways to make objects observable are also available
![Page 28: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/28.jpg)
Regions
Using the magic of WinJS we can bind elements to objects, thus setting their datacontext
Two ways we can do the binding: data-win-bind and data-win-bindsource
data-win-bind is used for binding a single field to the data contextHTML5:<span data-win-bind=“innerText: dto.title”></span>JS:WinJS.Binding.processAll(target element, data context object)
![Page 29: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/29.jpg)
Regions (cont’d)
data-win-bindsource allows to set the data context for an element declaratively instead of calling WinJS.Binding.processAll() in Javascript
<div data-win-bindsource=“dto"> Allows for more binding code to be moved into HTML5
![Page 30: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/30.jpg)
Using .winmd components
You can create your own .winmd components in other languages that your app can interface with, the same way it does with WinJS
Take advantage of performance or library disparities – different components are implemented differently
![Page 31: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/31.jpg)
Modules and dependency injection
Javascript was born from simple scripting Modern applications require maintainable, testable code with private scope A module is an anonymous, self-executing function with parameters for
dependency injection:
(function (internalParam1, internalParam2) {"use strict";// private code goes here
})(globalParam1, globalParam2);
![Page 32: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/32.jpg)
Modules and namespaces
Exposing endpoints for public access from the module via classes and namespaces:
WinJS.Namespace.define("ClassicCars", {FindCars: _findCars(), // can define members in namespacesRepairBills: WinJS.Class.define(function(quantity) { // constructor code goes here },{ GetCost: _getCost }, // instance members{ repairBillTypes: [ “S", “U" ] }) // static members
});
![Page 33: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/33.jpg)
Dynamic code loading
What if we could update the application dynamically, without having to re-distribute it?
Can download HTML/JS code via iframe (security enabled, features disabled)
Fragments API – able to load in HTML content from external web sources into the application
Can download code directly into the app (requires unsecure calls, will not be allowed in the Windows Store)
execUnsafeLocalFunction - overrides HTML injection security
![Page 34: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/34.jpg)
Managing WinJS on the enterprise
What are the development costs? Effectiveness vs. C#/XAML or C++ Migration of previous code? What happens to legacy applications on C#? What happens to legacy web applications that we want to migrate to
Windows 8? How to write internal applications and deploy – next slide
![Page 35: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/35.jpg)
Enterprise story (unofficial)
Internal Windows Store for enterprise applications Deployment by employees to their machines from a restricted pool of
applications Enforces security policies Creates a contained environment for controlling what applications are
on enterprise machines
![Page 36: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/36.jpg)
![Page 37: WinJS at NYC Code Camp 2012](https://reader035.vdocuments.site/reader035/viewer/2022062511/54bb86814a7959db278b45a8/html5/thumbnails/37.jpg)
Testing for Submission - WACK
The submission process involves automatic testing Windows App Certification Kit Microsoft provides a testing kit for developers to test their
applications in advance Tests security, performance, etc. Subjectivity kept to a minimum, maximum transparency