Upload
timmy-kokke
View
5.768
Download
4
Embed Size (px)
Citation preview
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!