Quoi de neuf dans WinJS 2.0 ?

659 vues

Publié le

Windows 8 a introduit le Framework WinJS permettant de développer des applications de type Windows Store avec JavaScript. Dans Windows 8.1, Microsoft a fait évoluer ce Framework pour proposer de nouvelles fonctionnalités, des optimisations de performances, etc. Au cours de cette session, vous découvrirez toutes les nouveautés apportées par le Framework WinJS 2.0 pour le développement d'applications Windows 8.1!

Speakers : Thomas LEBRUN (Infinite Square), Soriya THACH (Infinite Square)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
659
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Quoi de neuf dans WinJS 2.0 ?

  1. 1. Quoi de neuf dans WinJS 2.0 ? Soriya THACH Consultant Infinite Square sthach@infinitesquare.co m @SoriyaThach Thomas LEBRUN Consultant Infinite Square tlebrun@infinitesquare.co m @thomas_lebrun
  2. 2. Infinite Square stand 19  Société de conseil, expertise, réalisation, formation, spécialisée dans le développement d’applications logicielles innovantes sur les technologies Microsoft  100% des consultants certifiés Microsoft, parmi lesquels 10 MVP et 2 Nokia Champions  GOLD Certified Partner sur 5 domaines de compétences  Centre de formation agrée #mstechdays Infinite Square aux TechDays 2014
  3. 3. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toute les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays
  4. 4. Agenda • Rappels • WinJS 2.0 en 1 slide • Focus sur les nouveautés • Questions #mstechdays
  5. 5. RAPPELS #mstechdays
  6. 6. Rappel Windows 8 WinJS 1.0 #mstechdays Windows 8.1 WinJS 2.0
  7. 7. Rappels (2) #mstechdays
  8. 8. WINJS 2.0 EN 1 SLIDE #mstechdays
  9. 9. WinJS 2.0 en 1 slide Des contrôles améliorés Infrastructure List view App bar Scheduler Le pattern Dispose Débogage Asynchrone De nouveaux contrôles Hub Navigation bar Search box Back button #mstechdays Building Blocks Binding template Repeater Item Container
  10. 10. FOCUS SUR LES NOUVEAUTÉS #mstechdays
  11. 11. Améliorations des performances de la ListView ListView avec 1000 items (sur Microsoft Surface) 2000 1750 1500 1250 1000 750 500 250 0 Startup WinJS 1.0 #mstechdays Insert WinJS 2.0 Remove
  12. 12. Améliorations des performances de la ListView (2) ListView avec 1000 items (sur Microsoft Surface) 2000 1750 1500 1250 1000 750 500 250 0 Startup WinJS 1.0 #mstechdays Insert WinJS 2.0 Remove
  13. 13. Améliorations des performances de la ListView (3) WinJS 1.0 #mstechdays WinJS 2.0
  14. 14. Améliorations des performances de la ListView (4) Temps d’affichage (ms) de 100 Templates 0 10 20 30 40 50 60 70 80 90 100 WinJS 1.0 #mstechdays 110 120 WinJS 2.0 130 140 150 160 170 180 190 200
  15. 15. Améliorations des performances de la ListView (4) Temps d’affichage (ms) de 100 Templates 0 10 20 30 40 50 60 70 80 90 100 WinJS 1.0 #mstechdays 110 120 WinJS 2.0 130 140 150 160 170 180 190 200
  16. 16. ListView: De nouvelles mises en page possibles Header Header Vertical GridLayout Grouped ListLayout CellSpaningLayout • Vous pouvez facilement créer vos propres mises en page grâce à IListLayout2! #mstechdays
  17. 17. LISTVIEW Drag and Drop & Layouts #mstechdays
  18. 18. Le Hub • Nouveau contrôle avec un objectif principal: la mise en avant de contenu! • Le contrôle est composé de « Sections », chaque sections possédant un « Header » • Idéal pour les scénarios dans lequel vous souhaitez mettre en avant des images #mstechdays
  19. 19. Le Hub – Mise en place <div data-win-control="WinJS.UI.Hub"> </div> #mstechdays
  20. 20. Le Hub – Mise en place (2) <div data-win-control="WinJS.UI.Hub"> <div data-win-control="WinJS.UI.HubSection" data-win-options="{header: ‘Foo'}"> <!– INSERER VOTRE CONTENU --> </div> </div> #mstechdays
  21. 21. Le Hub – Mise en place (3) <div data-win-control="WinJS.UI.Hub"> <div data-win-control="WinJS.UI.HubSection" data-win-options="{header: ‘Foo'}"> <!– INSERER VOTRE CONTENU --> </div> <div data-win-control="WinJS.UI.HubSection" data-win-options="{header: ‘Bar'}"> <!-- INSERER VOTRE CONTENU --> </div> </div> #mstechdays
  22. 22. HUB #mstechdays
  23. 23. La SearchBox • Windows 8.1 tire parti des « erreurs » de Windows 8 – On peut maintenant inciter l’utilisateur à faire une recherche • Le contrôle SearchBox est dédié à cela – Fonctionnalités similaires au SearchPane de la barre des Charms (autocomplétion, liste de résultats, etc.) mais intégré dans la page #mstechdays
  24. 24. La SearchBox – Mise en place <div id=“mySearchBox" data-win-control="WinJS.UI.SearchBox“></div> mySearchBox.addEventListener("suggestionsrequested", suggestionsRequestedHandler); mySearchBox.addEventListener("querysubmitted", querySubmittedHandler); • Les évènements (SuggestionsRequested et QuerySubmitted) sont les mêmes que pour le SearchPane! #mstechdays
  25. 25. SEARCHBOX #mstechdays
  26. 26. Le Scheduler – La problématique actuelle • setImmediate permet d’exécuter une tâche juste après la passe de rendu graphique • Si plusieurs appels à la méthode setImmediate sont exécutés simultanément, comment connaitre l’ordre d’exécution ? #mstechdays
  27. 27. Le Scheduler – La problématique actuelle (2) Task Task setImmediate(); Task Task setImmediate(); Task Task Task setImmediate(); Task Task #mstechdays
  28. 28. Le Scheduler – Le Scheduler WinJS 2.0 Task Task schedule(func, pri); Task Task schedule(func, pri); Task Task Task schedule(func, pri); Task Task #mstechdays
  29. 29. Le Scheduler – Le Scheduler WinJS 2.0 Task Task Task Task Task Task Task Task Task #mstechdays
  30. 30. Le Scheduler – Mise en place setImmediate(foo); var S = WinJS.Utilities.Scheduler; S.schedule(foo, S.Priority.normal); or S.schedule(foo, S.Priority.high); or S.schedule(foo, S.Priority.idle); #mstechdays
  31. 31. Le Pattern Dispose - Rappels Garbage Collector #mstechdays
  32. 32. Le Pattern Dispose – Rappels (2) Garbage Collector #mstechdays
  33. 33. La Pattern Dispose – Utilisation avec WinJS Garbage Collector .dispose(); #mstechdays
  34. 34. La Pattern Dispose – Utilisation avec WinJS Garbage Collector .dispose(); #mstechdays
  35. 35. Le Repeater • Quelle alternative pour afficher des données sous forme de liste ? – GridView – ListView • Contrôles pratiques mais parfois trop complexes – Utiliser un bazooka pour tuer une mouche  • Le « Repeater » (ItemsControl en XAML) réponds au besoin: – D’afficher une liste d’éléments avec le même template – C’est tout ! (pas de sélection, pas de groupes, pas de header, etc.) #mstechdays
  36. 36. Le Repeater (2) WinJS.Binding.List HTML UI #mstechdays
  37. 37. REPEATER #mstechdays
  38. 38. Le Repeater (3) – Mise en place var myBindingList = new WinJS.Binding.List(…); <div data-win-control="WinJS.UI.Repeater" data-win-options="{data: myBindingList}"> <label data-win-bind="textContent: description"></label> <progress data-win-bind="value: value" max="100"></progress> </div> #mstechdays
  39. 39. Conclusions • WinJS 2.0, c’est – – – – – Des contrôles améliorés De nouveaux contrôles Des Beaucoup d’optimisations de performances Une facilité de déboggage Et encore plein d’autres choses! • A vous les belles apps!  #mstechdays
  40. 40. QUESTIONS ? #mstechdays
  41. 41. Digital is business

×