javascript in universal windows platform apps

Timmy Kokke

JavaScript in UWP apps

“JavaScript is unsuitable for building apps!”

random C# developer

about• Timmy Kokke• Windows Platform Development

MVP• Consultant @ Centric• ASP.NET MVC / Xamarin

• Store Apps Usergroup http://storeappsug.nl

• http://WinJS.Ninja• http://timmykokke.com

• @sorskoot• http://Youtube.com/c/WinJsNinja

agenda• Intro

• Hosted web apps

• WinJS

• Knockout JS

• AngularJS

Intro

Why ‘web’ technology?• Great support in Microsoft Edge• Many frameworks available• Access to Windows Runtime• Visual Studio Support• TypeScript• No cross-browser• No legacy

Why not?• No designer… anymore… • Cross-platform• Specific requirements• Learning curve• Documentation

Edge features• WebGL• WebAudio API• New tags• <Picture>• <template>

• Webdriver• Console API• Content Security Policy

(CSP)

• … Much more

http://status.modern.ie

Edge - JavaScript• Template strings• Promises• Arrow functions• Block bindings• Get/set• Symbols• Spread• Iterators

• Class• Proxies• … again much more

http://status.modern.ie

ES6 support

IE 10

IE 11

Edge 12 FF

38Edge 13 FF

42FF 43

FF 44

CH 46OP 33

CH 47OP 34

CH 48OP 35

SF 6.1SF 7

SF 7.1SF 8

SF 9 WK KQ 4.14

7% 16% 63% 84% 66% 71% 72% 74% 63% 63% 65% 12% 21% 54% 71% 13%

Desktop Browsershttps://kangax.github.io/compat-table/es6/

EdgeHTML Chakra

Hosted contentAlways up-to-date

Packaged contentOffline first

Where?• Desktop + PC• IoT • Surface Hub• HoloLens• Phone• Xbox

Tips•Think Web•Use Windows Runtime Component•Use debugger for exploration•Minification for Obfuscation

JavaScript Frameworks

JavaScript Frameworks

200820082009200920092009201020102010201020102011201120112011201220122012201220132013201320132013201420142014201420152015201520150

20

40

60

80

100

120

AngularJS Dojo Backbone knockout Reactjs

JavaScript Frameworks• Use whatever you like

• Don’t use CDN for packaged apps

• MSApp.execUnsafeLocalFunction

Hosted Web apps

Developers want…

… their existing code to just run… more frameworks to just work

Hosted web apps.• Perfect for existing web apps• Package app without content• Configure allowed URLs• Mix’n’Match• Reviews from MS during lifetime of app• Not allowed to change during lifetime

WindowsRuntimeAccess="all" Match="https://*.websites.net/""allowForWebOnly" Match=https://*.website.net/

Developers can control the Universal APIs they want to expose "none" Match="http://ads.website.net/"

Default is no access

Manifest

Manifold.js

• Cross-plaform Package • Fallback to Apache Cordova• More at http://manifoldjs.com/documentation

Demo

Hosted Web Apps

WinJS

“WinJS is a set of JavaScript toolkits that allow developers to build applications using HTML/JS/CSS technology”

WinJS features

How does it work?

How does it work?

How does it work?

How does it work?

How does it work?

How does it work?

How does it work?

How does it work?

What more?• Classes

WinJS.NameSpaceWinJS.Class

• PromisesWinJS.Promise

• Databinding

• Pages

• Converters

Demo

WinJS

WinJS + Knockout JS

“Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern”

Initialization

Initialization

Bindings

Observable

Computed

Custom bindings

Custom bindings

Knockout-WinJS

Knockout-WinJS

Demo

WinJS + Knockout

WinJS + AngularJS

OverviewModule

Route

$ScopeView Controller

ServiceDirective

Config

Module• ng-app doesn’t work with WinJS

• After activation:

Controller

View

Service

Directive

Config

Angular-WinJS

Angular-WinJS

Navigation

Demo

WinJS + Angular

Not discussed• Visual Studio tools for Apache Cordova• Anything else?

Blog: http://timmykokke.comhttp://winjs.ninja

Twitter:@sorskoot

YouTube:http://youtube.com/c/winjsninja

Github:http://github.com/sorskoot

Store apps user group:http://storeappsug.nl

Thank you!