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