Le document présente un état des lieux des frameworks JavaScript en environnement Microsoft lors des TechDays 2015. Il aborde plusieurs technologies, notamment jQuery, Bootstrap, Knockout.js, AngularJS, TypeScript et Cordova, en décrivant leurs avantages et intégrations dans Visual Studio. Un focus est mis sur les caractéristiques et utilisations spécifiques de chaque framework pour différents types de projets.

1. AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr

2. Frameworks JavaScript en environnement
Microsoft – Etat des lieux
Sébastien Ollivier Adrien Siffermann
@SebastienOll
sollivier@infinitesquare.com
@asiffermann
asiffermann@infinitesquare.com

3. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 TechDays News Feed
 Dynamiser le rendu avec jQuery
 Améliorer l’interface graphique avec Bootstrap
 Profiter du binding Knockout.js
 Créer une application avec AngularJS
 Tirer parti du compilateur TypeScript
 Publier une application mobile avec Cordova
 Conclusion

4. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Démo

5. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Créé en Janvier 2006 par John Resig
 Librairie JavaScript pour augmenter la productivité et assurer la
compatibilité cross-browser
 Avantages de jQuery
Présentation

6. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Des sélecteurs pour parcourir le DOM
 Des fonctions pour manipuler le DOM
 Des fonctions pour travailler avec les évènements
 Des outils pour travailler plus simplement en AJAX
 Validation avec jQuery Validate
Principes de base

7. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Intégré par défaut dans les projets Starter Web
 Récupération des packages dans les projets
 Intellisense JavaScript
 Génération des attributs de validation avec les Helpers MVC
Intégration dans Visual Studio

8. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Démo

9. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Créé en 2011 par Twitter
 Framework CSS et JavaScript pour adapter vos sites à tous les
types d’écrans
 Avantages de Bootstrap
Présentation

10. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Layout divisé en lignes de 12 colonnes
 Positionnement via des classes CSS
Principes de base

11. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Intégré par défaut dans les projets Starter Web
 Récupération des packages dans les projets
 Intellisense JavaScript
 Intellisense CSS
Intégration dans Visual Studio

12. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Démo

13. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Présentation
 Créé en 2010 par Steve Sanderson (Microsoft)
 Simplification des interfaces dynamiques avec le pattern Model-
View-View Model (MVVM) en JavaScript
 Avantages de Knockout.js

14. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Des attributs data-bind dans le layout HTML
 Une fonction JavaScript pour le ViewModel
Principes de base
<p>Nom: <strong data-bind="text: firstName"></strong></p>
function PersonViewModel() {
this.firstName = "Sébastien";
}
ko.applyBindings(new PersonViewModel());

15. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Récupération des packages dans les projets
 Intellisense JavaScript
 Détection des attributs data-bind
 Intellisense dans les attributs data-bind
Intégration dans Visual Studio

16. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Démo

17. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Créé en 2009 par Google
 Framework MVC pour construire des Single Page Applications
(SPA)
 Avantages d’AngularJS
Présentation

18. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Une fonction JavaScript pour le contrôleur
 Des services sous forme de singleton
 Des vues HTML avec du binding déclaratif
Principes de base
function ListController($scope, listService) {
$scope.items = [];
}
angular.module("NewsfeedApp").controller("listController", listController);
<ul data-ng-hide="isLoading">
<li data-ng-repeat="item in items">
<a href="#/items/{{item.Id}}">{{item.Title}}</a>
</li>
</ul>

19. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Récupération des packages dans les projets
 Intellisense
 Templates de projets
 Templates d’éléments (controller, modules, directives…)
Intégration dans Visual Studio

20. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Démo

21. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Créé en 2012 par Microsoft
 TypeScript est un langage de programmation qui se transcompile
en JavaScript afin d’améliorer et de sécuriser la production de
code
 Avantages de TypeScript
Présentation

22. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Typage des variables
 Création de classes, d’interfaces…
Principes de base
export class Item {
constructor(id: number, label: string) {
this.id = id;
this.label = label;
}
public id: number;
public label: string;
}

23. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Inclus par défaut dans Visual Studio
 Compilation
 Intellisense
 Erreurs de compilation
Intégration dans Visual Studio

24. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Démo

25. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Développé depuis 2011 par Apache Fondation
 Permet d’encapsuler une application Web dans une application
native (WP, iOS, Android, …)
 Avantages de Cordova
Présentation

26. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Encapsulation dans un composant WebView de
la plateforme cible
 APIs JS permettant d’accéder aux APIs Native
 Mécanismes de plugin pour enrichir Cordova
(environ 700)
 Permet d’inclure du code spécifique par
plateforme dans les dossiers « merge »
Principes de base

27. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Type de projet spécifique
 Debug directement depuis Visual Studio
 Intellisense des APIs Cordova
Intégration dans Visual Studio

28. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Démo

29. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Application métier
 Application avec une interface plus dynamique (calculs côté
client, données locales…)
 Application cliente « pure » (navigation animée, cache local,
offline…)
 Application destinée à la fois au Web et au mobile
Quel framework pour quel type de projet ?

30. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
 Sessions
Pour en savoir plus…

31. tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux

32. © 2015 Microsoft Corporation. All rights reserved.
tech days•
2015
#mstechdays techdays.microsoft.fr