Reusing JavaScript knowledge in Windows Store apps

543 views

Published on

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
543
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Hoe zat het ookalweer…
  • WinJS is de javascript library voor Windows Store appsWindows Phone apps en de rest. Het bevatalleswat je nodighebt voor het maken en gebruik van controls, alles voor promises en voor data-bindingJe moet het zienalseengrote toolkit, die op zichtzelfgebruiktkanworden…. Maar ook in combinatie met andere libraries.
  • Windows Storeapplicatieswordengebouwd met standard HTML, CSS en JavaScript. De JavaScript in een Store app is wezelijkniet heel veelandersdan de javascript op een website. JavaScript is JavaScript en HTML is HTML. Je hoeftalleengeenrekening te houden met andere browser… wateigenlijkwelfijn is 
  • Tochwilikeenpaarverschillennoemen:NavigatieNavigeren van paginanaarpaginaverloopt in een app andersdan op een website. Dit zit hem met name in de manierwaaroppagina’sgeladenworden. App model* Suspend, resume zijnandersTrust* Toegang tot bijvoorbeeldfilesystem
  • Een van de grootsteverschillentusseneen website en een Windows Store app is de context.
  • Create element gaatervanuitdat je weetwat je doet.ExecUnsafeLocalFunctiongeef je een function mee die unsafe wordtuitgevoerd. Handigals je eenfunctie van een 3rd party library aanroep die ietsdoetwatniet is toegestaan.De laatste 2 schrijvennaar inner en outer HTML zonderrestrictie.
  • Op node.jsMaaktgebruik van JavaScript, RequireJSVeel taken en pluginsEenvoudig te customizen en te installeren.
  • Yeoman is eenveelgebruikte tool voor scaffolding. Zoals je ook in ASP.NET MVC kuntzeggen, doe mij maar een view, of een controller, doet Yeoman dit voor JavaScript.Yeoman maaktgebruik van Yo is de tool die je draait om je delen van je programmaaan te maken. Grunt is de task runner… hebben we net besprokenBower is vergelijkbaar met NuGet, maar met de focus op front-end javascript frameworks. Uiterst configurable en werktgoedsamen met Grunt.
  • Ook router, collection
  • Reusing JavaScript knowledge in Windows Store apps

    1. 1. 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
    2. 2. Hergebruik van JavaScript kennis bij het bouwen van Windows Store apps Timmy Kokke
    3. 3. About me • ICT Consultant • senior web developer / architect • Windows Phone / Windows Store apps • C# / JavaScript • www.timmykokke.com • @sorskoot • Timmy.kokke@centric.eu • Store apps user group – www.StoreAppsUG.nl – @StoreAppsUG
    4. 4. WinJS
    5. 5. 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
    6. 6. Windows Store apps can be built using standards- based HTML, CSS and JavaScript
    7. 7. Window Store app is different from a website
    8. 8. Context Internet Explorer Web context OS User data Devices Communications Handlers Tiles Cryptography … … Windows Store app Local context Web context AppData Local Temp Roaming WinRT APIs
    9. 9. Feature Local context Web context Windows 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
    10. 10. WinJS, jQuery
    11. 11. jQuery •Since 2.0.0 official support for Windows Store apps
    12. 12. Demo
    13. 13. HTML insertion workarounds •toStaticHTML •createElement •MSApp.execUnsafeLocalFunction •WinJS.Utilities.setInnerHTMLUnsafe WinJS.Utilities.setOuterHTMLUnsafe
    14. 14. Grunt & .less
    15. 15. Grunt •Task runner •Easy to configure •Many different tasks available •Easy to customize •http://gruntjs.org
    16. 16. Grunt installation •node.js • http://nodejs.org npm install grunt-cli –g
    17. 17. 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
    18. 18. Demo
    19. 19. WinJS, jQuery, n pm, Yeoman, Backbone, Requ ire, Mustache
    20. 20. Yeoman, Grunt & Bower http://yeoman.io/ http://gruntjs.com http://bower.io/
    21. 21. Generators •Many official and community generators • Backbone • Angular • jQuery • Twitter bootstrap •http://yeoman.io/official-generators.html
    22. 22. Installation •node.js • http://nodejs.org •Yeoman • Automatically installs Grunt and Bower npm install -g yo
    23. 23. Backbone generator npm install generator-backbone -g
    24. 24. Backbone generator Yo backbone --template-engine=mustache
    25. 25. Scaffolding •backbone:model •backbone:view •backbone:collection •backbone:router •backbone:all Yo backbone:model exampleModel
    26. 26. Demo
    27. 27. Demo code •https://github.com/sorskoot/WinJSBackbone- Demo
    28. 28. 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

    ×