62
Timmy Kokke JavaScript in UWP apps

JavaScript in Universal Windows Platform apps

Embed Size (px)

Citation preview

Page 1: JavaScript in Universal Windows Platform apps

Timmy Kokke

JavaScript in UWP apps

Page 2: JavaScript in Universal Windows Platform apps

“JavaScript is unsuitable for building apps!”

random C# developer

Page 3: JavaScript in Universal Windows Platform apps

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

Page 4: JavaScript in Universal Windows Platform apps

agenda• Intro

• Hosted web apps

• WinJS

• Knockout JS

• AngularJS

Page 5: JavaScript in Universal Windows Platform apps

Intro

Page 6: JavaScript in Universal Windows Platform apps

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

Page 7: JavaScript in Universal Windows Platform apps

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

Page 8: JavaScript in Universal Windows Platform apps

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

• Webdriver• Console API• Content Security Policy

(CSP)

• … Much more

http://status.modern.ie

Page 9: JavaScript in Universal Windows Platform apps

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

• Class• Proxies• … again much more

http://status.modern.ie

Page 10: JavaScript in Universal Windows Platform apps

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/

Page 11: JavaScript in Universal Windows Platform apps

EdgeHTML Chakra

Hosted contentAlways up-to-date

Packaged contentOffline first

Page 12: JavaScript in Universal Windows Platform apps

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

Page 13: JavaScript in Universal Windows Platform apps

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

Page 14: JavaScript in Universal Windows Platform apps

JavaScript Frameworks

Page 15: JavaScript in Universal Windows Platform apps

JavaScript Frameworks

200820082009200920092009201020102010201020102011201120112011201220122012201220132013201320132013201420142014201420152015201520150

20

40

60

80

100

120

AngularJS Dojo Backbone knockout Reactjs

Page 16: JavaScript in Universal Windows Platform apps

JavaScript Frameworks• Use whatever you like

• Don’t use CDN for packaged apps

• MSApp.execUnsafeLocalFunction

Page 17: JavaScript in Universal Windows Platform apps

Hosted Web apps

Page 18: JavaScript in Universal Windows Platform apps

Developers want…

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

Page 19: JavaScript in Universal Windows Platform apps

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

Page 20: JavaScript in Universal Windows Platform apps

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

Page 21: JavaScript in Universal Windows Platform apps

Manifold.js

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

Page 22: JavaScript in Universal Windows Platform apps

Demo

Hosted Web Apps

Page 23: JavaScript in Universal Windows Platform apps

WinJS

Page 24: JavaScript in Universal Windows Platform apps

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

Page 25: JavaScript in Universal Windows Platform apps

WinJS features

Page 26: JavaScript in Universal Windows Platform apps

How does it work?

Page 27: JavaScript in Universal Windows Platform apps

How does it work?

Page 28: JavaScript in Universal Windows Platform apps

How does it work?

Page 29: JavaScript in Universal Windows Platform apps

How does it work?

Page 30: JavaScript in Universal Windows Platform apps

How does it work?

Page 31: JavaScript in Universal Windows Platform apps

How does it work?

Page 32: JavaScript in Universal Windows Platform apps

How does it work?

Page 33: JavaScript in Universal Windows Platform apps

How does it work?

Page 34: JavaScript in Universal Windows Platform apps

What more?• Classes

WinJS.NameSpaceWinJS.Class

• PromisesWinJS.Promise

• Databinding

• Pages

• Converters

Page 35: JavaScript in Universal Windows Platform apps

Demo

WinJS

Page 36: JavaScript in Universal Windows Platform apps

WinJS + Knockout JS

Page 37: JavaScript in Universal Windows Platform apps

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

Page 38: JavaScript in Universal Windows Platform apps

Initialization

Page 39: JavaScript in Universal Windows Platform apps

Initialization

Page 40: JavaScript in Universal Windows Platform apps

Bindings

Page 41: JavaScript in Universal Windows Platform apps

Observable

Page 42: JavaScript in Universal Windows Platform apps

Computed

Page 43: JavaScript in Universal Windows Platform apps

Custom bindings

Page 44: JavaScript in Universal Windows Platform apps

Custom bindings

Page 45: JavaScript in Universal Windows Platform apps

Knockout-WinJS

Page 46: JavaScript in Universal Windows Platform apps

Knockout-WinJS

Page 47: JavaScript in Universal Windows Platform apps

Demo

WinJS + Knockout

Page 48: JavaScript in Universal Windows Platform apps

WinJS + AngularJS

Page 49: JavaScript in Universal Windows Platform apps

OverviewModule

Route

$ScopeView Controller

ServiceDirective

Config

Page 50: JavaScript in Universal Windows Platform apps

Module• ng-app doesn’t work with WinJS

• After activation:

Page 51: JavaScript in Universal Windows Platform apps

Controller

Page 52: JavaScript in Universal Windows Platform apps

View

Page 53: JavaScript in Universal Windows Platform apps

Service

Page 54: JavaScript in Universal Windows Platform apps

Directive

Page 55: JavaScript in Universal Windows Platform apps

Config

Page 56: JavaScript in Universal Windows Platform apps

Angular-WinJS

Page 57: JavaScript in Universal Windows Platform apps

Angular-WinJS

Page 58: JavaScript in Universal Windows Platform apps

Navigation

Page 59: JavaScript in Universal Windows Platform apps

Demo

WinJS + Angular

Page 60: JavaScript in Universal Windows Platform apps

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

Page 61: JavaScript in Universal Windows Platform apps

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

Page 62: JavaScript in Universal Windows Platform apps

Thank you!