frameworks javascript en environnement ms
TRANSCRIPT
Frameworks JavaScript en environnement Microsoft – Etat des lieux
Sébastien Ollivier Adrien Siffermann@SebastienOll
@asiffermann
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
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
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
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
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
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
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
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
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());
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
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
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>
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
tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Créé en 2012 par Microsoft
TypeScript est un langage de programmation qui se transcompileen JavaScript afin d’améliorer et de sécuriser la production de code
Avantages de TypeScript
Présentation
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;
}
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
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
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
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
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 ?
tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
Sessions
Pour en savoir plus…