reusing javascript knowledge in windows store apps
TRANSCRIPT
Laat ons weten wat u vindt van deze sessie! Vul de evaluatie in via www.techdaysapp.nl en maak kans op een van de 20 prijzen*. Prijswinnaars worden bekend gemaakt via Twitter (#TechDaysNL). Gebruik hiervoor de code op uw badge.
Let us know how you feel about this session! Give your feedback via www.techdaysapp.nl and possibly win one of the 20 prices*. Winners will be announced via Twitter (#TechDaysNL). Use your personal code on your badge.
* Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prices are examples
Hergebruik van JavaScript kennis bij het bouwen van Windows Store apps
Timmy Kokke
About me
• ICT Consultant• senior web developer / architect•Windows Phone / Windows Store apps•C# / JavaScript•www.timmykokke.com•@sorskoot• [email protected]• Store apps user group – www.StoreAppsUG.nl – @StoreAppsUG
WinJS
WinJS
•The JavaScript Library for Windows Store apps• And Windows Phone• And everything else
• Controls, promises, and data-binding• Toolkit• as standalone solution• or with other libraries
Windows Store apps can be built using standards-based HTML, CSS and JavaScript
Window Store app is different from a website
Context
Internet Explorer
Web context
OSUser data Devices Communications Handlers Tiles Cryptography … …
Windows Store appLocal context
Web context
AppData
Local Temp Roaming
WinRT APIs
Feature Local context Web contextWindows Runtime Yes No
Windows Library for JavaScript Yes Partial
JavaScript URIs(attribute="javascript:code") No Yes
Data URIs ("data:" ) for fonts No Yes
External script references (<script src="http://*" /> ) No Yes
window.close Yes No
Cross-domain XHR requests Yes No
http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx
WinJS, jQuery
jQuery
•Since 2.0.0 official support for Windows Store apps
Demo
HTML insertion workarounds
• toStaticHTML•createElement •MSApp.execUnsafeLocalFunction•WinJS.Utilities.setInnerHTMLUnsafe WinJS.Utilities.setOuterHTMLUnsafe
Grunt & .less
Grunt
•Task runner•Easy to configure•Many different tasks available•Easy to customize
•http://gruntjs.org
Grunt installation
•node.js• http://nodejs.org
npm install grunt-cli –g
Tasks
•2600+ plugins available•A lot of different tasks• Hinting / linting• Minification / Uglify• Test runners• Optimization• Watchers• Helpers for various frameworks like RequireJS, Angular or Ember
•http://gruntjs.com/plugins
Demo
WinJS, jQuery, npm, Yeoman, Backbone, Require, Mustache
Yeoman, Grunt & Bower
http://yeoman.io/ http://gruntjs.com http://bower.io/
Generators
•Many official and community generators• Backbone• Angular• jQuery• Twitter bootstrap
•http://yeoman.io/official-generators.html
Installation
•node.js• http://nodejs.org
•Yeoman
• Automatically installs Grunt and Bower
npm install -g yo
Backbone generator
npm install generator-backbone -g
Backbone generator
Yo backbone --template-engine=mustache
Scaffolding
•backbone:model•backbone:view•backbone:collection•backbone:router•backbone:all
Yo backbone:model exampleModel
Demo
Demo code
•https://github.com/sorskoot/WinJSBackbone-Demo
Laat ons weten wat u vindt van deze sessie! Vul de evaluatie in via www.techdaysapp.nl en maak kans op een van de 20 prijzen*. Prijswinnaars worden bekend gemaakt via Twitter (#TechDaysNL). Gebruik hiervoor de code op uw badge.
Let us know how you feel about this session! Give your feedback via www.techdaysapp.nl and possibly win one of the 20 prices*. Winners will be announced via Twitter (#TechDaysNL). Use your personal code on your badge.
* Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prices are examples