javascript in universal windows platform apps
TRANSCRIPT
![Page 1: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/1.jpg)
Timmy Kokke
JavaScript in UWP apps
![Page 2: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/2.jpg)
“JavaScript is unsuitable for building apps!”
random C# developer
![Page 3: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/3.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/4.jpg)
agenda• Intro
• Hosted web apps
• WinJS
• Knockout JS
• AngularJS
![Page 5: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/5.jpg)
Intro
![Page 6: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/6.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/7.jpg)
Why not?• No designer… anymore… • Cross-platform• Specific requirements• Learning curve• Documentation
![Page 8: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/8.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/9.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/10.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/11.jpg)
EdgeHTML Chakra
Hosted contentAlways up-to-date
Packaged contentOffline first
![Page 12: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/12.jpg)
Where?• Desktop + PC• IoT • Surface Hub• HoloLens• Phone• Xbox
![Page 13: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/13.jpg)
Tips•Think Web•Use Windows Runtime Component•Use debugger for exploration•Minification for Obfuscation
![Page 14: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/14.jpg)
JavaScript Frameworks
![Page 15: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/15.jpg)
JavaScript Frameworks
200820082009200920092009201020102010201020102011201120112011201220122012201220132013201320132013201420142014201420152015201520150
20
40
60
80
100
120
AngularJS Dojo Backbone knockout Reactjs
![Page 16: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/16.jpg)
JavaScript Frameworks• Use whatever you like
• Don’t use CDN for packaged apps
• MSApp.execUnsafeLocalFunction
![Page 17: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/17.jpg)
Hosted Web apps
![Page 18: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/18.jpg)
Developers want…
… their existing code to just run… more frameworks to just work
![Page 19: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/19.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/20.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/21.jpg)
Manifold.js
• Cross-plaform Package • Fallback to Apache Cordova• More at http://manifoldjs.com/documentation
![Page 22: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/22.jpg)
Demo
Hosted Web Apps
![Page 23: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/23.jpg)
WinJS
![Page 24: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/24.jpg)
“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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/25.jpg)
WinJS features
![Page 26: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/26.jpg)
How does it work?
![Page 27: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/27.jpg)
How does it work?
![Page 28: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/28.jpg)
How does it work?
![Page 29: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/29.jpg)
How does it work?
![Page 30: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/30.jpg)
How does it work?
![Page 31: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/31.jpg)
How does it work?
![Page 32: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/32.jpg)
How does it work?
![Page 33: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/33.jpg)
How does it work?
![Page 34: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/34.jpg)
What more?• Classes
WinJS.NameSpaceWinJS.Class
• PromisesWinJS.Promise
• Databinding
• Pages
• Converters
![Page 35: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/35.jpg)
Demo
WinJS
![Page 36: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/36.jpg)
WinJS + Knockout JS
![Page 37: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/37.jpg)
“Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern”
![Page 38: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/38.jpg)
Initialization
![Page 39: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/39.jpg)
Initialization
![Page 40: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/40.jpg)
Bindings
![Page 41: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/41.jpg)
Observable
![Page 42: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/42.jpg)
Computed
![Page 43: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/43.jpg)
Custom bindings
![Page 44: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/44.jpg)
Custom bindings
![Page 45: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/45.jpg)
Knockout-WinJS
![Page 46: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/46.jpg)
Knockout-WinJS
![Page 47: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/47.jpg)
Demo
WinJS + Knockout
![Page 48: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/48.jpg)
WinJS + AngularJS
![Page 49: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/49.jpg)
OverviewModule
Route
$ScopeView Controller
ServiceDirective
Config
![Page 50: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/50.jpg)
Module• ng-app doesn’t work with WinJS
• After activation:
![Page 51: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/51.jpg)
Controller
![Page 52: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/52.jpg)
View
![Page 53: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/53.jpg)
Service
![Page 54: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/54.jpg)
Directive
![Page 55: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/55.jpg)
Config
![Page 56: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/56.jpg)
Angular-WinJS
![Page 57: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/57.jpg)
Angular-WinJS
![Page 58: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/58.jpg)
Navigation
![Page 59: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/59.jpg)
Demo
WinJS + Angular
![Page 60: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/60.jpg)
Not discussed• Visual Studio tools for Apache Cordova• Anything else?
![Page 61: JavaScript in Universal Windows Platform apps](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/61.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062400/586fd3a91a28ab18428b4583/html5/thumbnails/62.jpg)
Thank you!