HTML5. Développement d applications Web. Visual Studio 2015 et TFS. L art et la manière. avec. Philippe DIDIERGEORGES

Transcription

1 Epsilon_GT_v8_Mise en page 1 20/07/ :45 Page 29 Développement d applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS Préface Avant de commencer Préparation des outils et création du projet Architecture d'une application web Création d'api REST JavaScript moderne Single Page applications TypeScript Web apps adaptatives Intégration continue Les tests Déploiement et suivi en production Les nouvelles API d'html5 Évolution des standards et rétrocompatibilité ISSN ISBN Développeur Web depuis un peu plus de 10 ans et.net depuis 5 ans, Philippe DIDIERGEORGES a suivi la transformation du web intervenue depuis les années Dès sa découverte de Team Foundation Sever, en version 2010 à l'époque, il s'intéresse immédiatement à sa mise en œuvre dans le cadre de projets développés dans le respect des méthodologies agiles. Au quotidien, il participe à des projets de grande envergure sur les dernières technologies liées au web dans un environnement de travail Microsoft et anime régulièrement des conférences sur les salons professionnels. Cette volonté de partager ses connaissances et son retour d expérience sur la gestion du cycle de vie d une application et les technologies web motive ses nombreuses participations à divers blogs et forums et a trouvé une continuité naturelle dans l'écriture de ce livre. Plus d informations : Sur : b L'API REST avec ASP.NET 5 MVC 6 b L'application avec AngularJS en JavaScript, en TypeScript b Le style de l'application responsive avec CSS et LESS b Des exemples fonctionnels des API HTML5 les plus avancées HTML5 Développement Web HTML5 d applications Visual Studio 2015 et TFS Les chapitres du livre Développement d applications Web Ce livre s adresse à tout développeur, chef de projet ou directeur technique amené à travailler sur le développement d applications web HTML5 avec Visual Studio 2015 et Team Foundation Server. Le lecteur est guidé depuis l écriture du code côté serveur et client, en passant par la création des tests, jusqu à la mise en production. L auteur tient compte des problématiques inhérentes au développement en équipe et propose des solutions afin d assurer une agilité et une qualité de code optimale. Une connaissance des bases du langage C#, des concepts de la programmation orientée objet ainsi que des technologies du web est un prérequis indispensable pour tirer pleinement profit de ce livre. Dans un premier temps, le lecteur est guidé sur la mise en place de l environnement technique de développement et la planification du projet. Place au code ensuite avec la création d'une API REST JSON avec ASP.NET 5 MVC 6 associé à Entity Framework 7. Le chapitre dédié au JavaScript présente un ensemble de recommandations, de bonnes pratiques et de modèles de programmation à mettre en œuvre pour produire un code performant, propre et facile à maintenir. Les chapitres suivants ouvrent la voie au développement d applications monopages (Single Page Applications), l auteur propose de réaliser une application AngularJS complètement fonctionnelle. Le lecteur découvrira ensuite le langage TypeScript, sa syntaxe, ses concepts, pour développer des applications complexes tout en conservant les qualités qui ont fait la popularité du JavaScript. Le chapitre sur les web apps adaptatives plonge le développeur au sein des nouvelles techniques qu il doit maîtriser pour adapter ses interfaces aux divers terminaux aujourd hui connectés (Responsive web design). Après le développement proprement dit, l auteur présente les outils de Visual Studio et Team Foundation Server pour créer et industrialiser les tests sous toutes leurs formes. Le lecteur est ensuite guidé dans la création d un processus de Build d intégration continue, suivi tout naturellement de la configuration pour mettre en place le déploiement continu. Ensuite, l auteur détaille comment mettre en place le service Application Insights afin de suivre la disponibilité et l utilisation des applications web. Enfin, c est dans les derniers chapitres que vous trouverez une sélection d API HTML5 particulièrement intéressantes pour vous permettre de proposer des interactions toujours plus riches et de prendre dès aujourd hui la vague du web de demain. Des éléments complémentaires sont en téléchargement sur le site L art et la manière avec Visual Studio 2015 et TFS Préface d Étienne MARGRAFF Évangéliste HTML5, JavaScript et mobilité Microsoft France Téléchargement Philippe DIDIERGEORGES

2 Table des matières 1 Les éléments à télécharger sont disponibles à l'adresse suivante : Saisissez la référence de l'ouvrage EP5HTVS dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement. Préface Chapitre 1 Avant de commencer 1. Introduction HTML5 oui, mais pas que HTML JavaScript CSS Les outils Chapitre 2 Préparation des outils et création du projet 1. Introduction Team Foundation Server Visual Studio ALM Les services de TFS Planning Contrôle des sources Éléments de travail Automatisation de la build Tests et Lab Management Rapports et analyse Visual Studio Online ou serveur dédié

3 2 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 3. Démarrage du projet Création d'un compte Visual Studio Online Création du projet d'équipe Team Web Access Gestion de l'équipe et droits d'accès Les Work Items Le Product Backlog Gestion des versions et du planning Visual Studio Création du projet Connexion à TFS et configuration de l'espace de travail Connexion à un projet avec Team Foundation Version Control Création du projet et premier archivage de code Team Explorer Gestion des branches Les requêtes d'éléments de travail Les plug-ins indispensables Web Essentials Chutzpah Extension GitHub pour Visual Studio Chapitre 3 Architecture d'une application web 1. Introduction Qu'est-ce qu'une web app? Les approches possibles Fonctionnement de l'architecture monopage Le site web seul L'API et ses apps

4 Table des matières XML et JSON Applications JavaScript ou hybrides client-serveur L'application hybride client-serveur L'application JavaScript Comment choisir? Chapitre 4 Création d'api REST 1. Introduction Présentation de REST ASP.NET ou Node.js? ASP.NET MVC Node.js Lequel choisir? Le projet ASP.NET Création du projet Organisation du projet Configuration de MVC 6 et Entity Framework Ajout des dépendances Ajout du fichier de configuration Configuration d'asp.net MVC Entity Framework Création des modèles Création du contexte de base de données Création du Repository Configuration des migrations avec DNVM Création de la WebAPI Création des contrôleurs Les méthodes GET Ajout des méthodes POST, PUT et DELETE Gestion des erreurs

5 4 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 6.3 Tester avec Fiddler Concepts avancés Objets de transfert de données Asynchronisme Chapitre 5 JavaScript moderne 1. Introduction Conventions de code JavaScript Style Indentation Terminaison de ligne Opérations sur plusieurs lignes Variables Fonctions Comparateurs d'égalité Boucles et expressions booléennes Commentaires Conventions de nommage Variables et constantes Fonctions Classes et constructeurs Les pièges à éviter null et undefined eval() Les patterns de base à connaître Les classes L'héritage Les membres publics, privés et privilégiés Publics Privés Méthodes privilégiées

6 Table des matières Les fonctions anonymes à invocation immédiate Les modules Le pattern Module Le pattern Façade Gestion des dépendances avec AMD Les callbacks Les bonnes pratiques Le mode strict Erreurs personnalisées Documentation du code Les outils JSHint Introduction Configuration Déclaration d'exceptions Outils pour le développeur intégrés au navigateur Vorlon.JS Chapitre 6 Single Page Applications 1. Introduction Choisir un framework AngularJS Introduction Une application AngularJS simple Configuration du dossier wwwroot Premier exemple de code AngularJS Un exemple plus avancé Création du premier module Un premier contrôleur L'injection de dépendances

7 6 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS Le scope Les directives Conventions et style Filtres, services, providers, factories Développement de la web app Préparation du projet package.json bower.json Gruntfile.js Création de l'application Angular Création du conteneur de l'application Organisation des sources Gestion des routes Création des contrôleurs Création des vues Chargement de l'application dans la page web Ajout du menu de navigation Utiliser l'api $http Création de BooksService CRUD avec $resources Liste des livres Détail Ajouter un livre Afficher les critiques Ajouter une critique

8 Table des matières 7 Chapitre 7 TypeScript 1. Introduction Présentation de TypeScript Le langage Le système de typage Déclaration Les types primitifs Le type any L'inférence de type L'objet Les classes Les modificateurs public, private et protected L'héritage Les interfaces Les génériques Les modules Les modules internes Les modules externes ou modules ES Autres éléments intéressants du langage Boucle for...of Les Union Types Les fonctions anonymes fléchées d'es ES6 let et const Les déstructurations ES Les décorateurs Et pour le futur? Configurer le projet pour utiliser TypeScript Installation Compilation En ligne de commande Configuration de la compilation avec Visual Studio

9 8 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS Configuration de la compilation avec tsconfig.json Intégration à la build Grunt Utiliser TypeScript avec des librairies JavaScript Les fichiers de définition de type Récupération automatisée des fichiers de définition Utilisation des librairies en TypeScript Coder en AngularJS avec TypeScript Transformation du code AngularJS pour TypeScript Création des modules Configuration de RequireJS Et pour Angular 2? Déboguer en TypeScript Dans Visual Studio Dans les autres navigateurs Chapitre 8 Web apps adaptatives 1. Introduction Responsive design ou site dédié? Le site dédié Le site web responsive Optimisation L'approche RESS CSS Présentation de CSS Les feuilles de style Les sélecteurs CSS Les sélecteurs de base Le sélecteur d'attribut Les sélecteurs hiérarchiques Les pseudo-classes et pseudo-éléments

10 Table des matières Les media queries La syntaxe Les critères Définir les bonnes media queries pour son projet Le viewport LESS LESS et Sass Fonctionnalités de LESS Installation et utilisation de LESS Les variables Imbrication des fichiers Organisation des fichiers Imbrication de règles Mixins Mathématiques Boucles et conditions Le style de l'application Chapitre 9 Intégration continue 1. Introduction Build.NET Que fait une build.net? Team Foundation Build Architecture La définition de build Contrôleur de build local ou hébergé Build XAML Les modèles de processus Configuration Création des agents Création de la définition de build

11 10 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS Personnalisation du modèle de processus Activité personnalisée Build vnext Configuration Création de la définition de build Exécution Suivi des exécutions Build JavaScript Que fait une build JavaScript? Grunt Présentation Configuration de la build Grunt du projet Gulp Préparation des livrables pour la production Présentation Génération des Bundles avec Grunt Exécution de la build Exécution manuelle et automatisée Intégration à TFS Build Chapitre 10 Les tests 1. Introduction Les tests unitaires Tests unitaires et TDD Anatomie d'un test unitaire Les tests unitaires en.net Création d'un projet de test unitaire Configuration Écriture de tests Exécution des tests Intégration à la build TFS

12 Table des matières Les tests unitaires en JavaScript Karma Mocha Chai SinonJS Intégration à Grunt Les tests fonctionnels Introduction Plans, suites et cas de tests Planification Création d'un plan de test Création de suites de tests Création de cas de tests Exécution Suivi et rapports Tests de charge Introduction Les tests web Les tests de charge Tests de charge dans le cloud Chapitre 11 Déploiement et suivi en production 1. Introduction Déploiement continu sur Azure avec Visual Studio Online Présentation Configuration Gestion avancée des déploiements avec Release Manager Présentation Configuration Création du chemin de livraison en production Livraison d'une nouvelle version

13 12 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 4. Suivi et analyse de l'application en production avec Application Insights Présentation Configuration Configuration du service Ajout à un nouveau projet Ajout à un projet existant Récupération et analyse des données Récupération et analyse des premières données Informations disponibles de base Données d'utilisation des pages Intégration à une application AngularJS Suivi de la disponibilité Mise en place d'alertes Chapitre 12 Les nouvelles API d HTML5 1. Introduction Les Web Components Principes Comprendre le Shadow DOM Déclaration de nouveaux composants Utilisation des templates et des imports Utiliser les Web Components avec des librairies JavaScript Géolocalisation Présentation Comment ça marche?

14 Table des matières Hors ligne Le cache d'application Stockage de données en local Le Web Storage IndexedDB Accès au système FileAPI getusermedia Orientation, accélération et autres capteurs Graphisme avancé Canvas Canvas 2D Canvas 3D SVG Les Web Workers Et les autres? Chapitre 13 Évolution des standards et rétrocompatibilité 1. Introduction Connaître le support d'une fonctionnalité Détection et support des fonctionnalités Modernizr Présentation Utilisation Chargement asynchrone de fichiers Polyfills Index

15 Chapitre 7 TypeScript 1. Introduction TypeScript Avec l'explosion des applications web modernes sont apparues de nouvelles problématiques pour lesquelles le JavaScript n'avait pas été prévu au départ. D'un simple langage de script destiné à la validation des formulaires et la dynamisation de pages web, il est passé à un langage utilisé pour des applications complètes composées de plusieurs centaines de milliers de lignes de code. Ce changement implique que le code est écrit par des équipes de développeurs comptant parfois plusieurs dizaines de personnes. Comme nous l'avons vu, cela entraîne des problématiques de qualité de code, la mise en place de conventions, des tests unitaires, des tests de performances, de la compilation même. Sur de nombreux points, JavaScript a évolué pour pallier ces difficultés et la spécification ECMAScript 6, longtemps appelée ES6 et validée depuis peu sous la dénomination ES 2015, apporte son lot de nouveautés bienvenues avec la gestion des classes, des modules et de nombreuses évolutions de ce type. Le problème est que le parc actuel des navigateurs utilisés est très divers et que le support d'es6 n'est pour le moment que partiel même sur les navigateurs récents. TypeScript est né de ces problématiques et a pour objectif de proposer dès aujourd'hui tous les outils de développement modernes qui manquent à JavaScript. Cela inclut bien entendu les fonctionnalités d'es6 mais aussi des outils permettant de faciliter le travail des développeurs et une syntaxe qui sera moins déroutante pour les développeurs issus des langages fortement typés.

16 230 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 2. Présentation de TypeScript TypeScript est une surcouche de JavaScript qui permet de proposer des solutions aux problématiques propres au développement d'applications JavaScript de grande échelle. TypeScript vous offre le meilleur du JavaScript d'aujourd'hui et de demain : le langage supporte déjà la grande majorité des fonctionnalités d'ecmascript 6, la prochaine version de JavaScript, et vous permet d'entamer dès aujourd'hui le développement de vos applications avec cette version qui sera le nouveau standard dans les années à venir. La force de TypeScript est de proposer la compilation en ECMAScript 5 ou 6, ce qui vous permet de prévoir vos nouveaux développements avec ES6 en avance tout en assurant le support des navigateurs actuels avec ES5. Vous pourrez alors basculer en ES6 dès que les navigateurs offriront un niveau de support suffisant. TypeScript intègre les modules d'es6 qui permettent de séparer les responsabilités en fichiers et modules différents comme le font également de nombreux frameworks dont AngularJS. Les modules permettent de déclarer des dépendances entre eux et facilitent la création des tests unitaires tout en permettant d'organiser le code efficacement lorsque votre application comprend plusieurs centaines de milliers de lignes. En plus d'offrir le meilleur de JavaScript, TypeScript apporte des fonctionnalités spécifiques telles que le typage fort du langage. Grâce au typage fort, TypeScript permet de faciliter le travail des développeurs grâce à des outils d'aide et d'analyse en direct du code comme une IntelliSense aussi performante que pour du.net, et des validations par le compilateur permettant de détecter immédiatement des erreurs dues à un problème de type qui peuvent facilement apparaître avec le système de typage dynamique de JavaScript. Le système permet également d'utiliser des concepts tels que les interfaces, l'héritage, les membres privés ou publics, les énumérations et bien d'autres encore, avec une syntaxe simple et lisible alors que leur utilisation en JavaScript requiert une implémentation manuelle rendant le code plus lourd à lire. Editions ENI - All rights reserved

17 TypeScript Chapitre TypeScript a depuis sa création été très bien accueilli par la communauté et son usage est de plus en plus fréquent. Il se marie même si bien avec AngularJS que l'équipe développant le framework chez Google s'est associée à l'équipe TypeScript de Microsoft pour que la prochaine version majeure d'angularjs repose entièrement sur TypeScript. AngularJS 2 est annoncé pour une disponibilité prochaine et est entièrement basé sur ES6 avec TypeScript. 3. Le langage 3.1 Le système de typage Déclaration L'un des principes de base de TypeScript, qui lui a d'ailleurs valu son nom, et la possibilité de définir les types des variables et des objets utilisés dans le code. La définition du type d'une donnée s'effectue très simplement lors de sa déclaration de la façon suivante. Déclaration d'une variable typée var name: string; var age: number; var ismarried: boolean; De la même façon, il est possible de déclarer le type de retour d'une fonction ainsi que de ses paramètres d'entrée. Déclaration d'une fonction typée function getdisplayage(age: number): string { return age + " ans"; }

18 232 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS La fonction getdisplayage prend donc un nombre en entrée et retourne une chaîne de caractères. Le fait de renseigner ces informations permet à Visual Studio de fournir une IntelliSense adaptée et vous donne plus d'informations au moment d'utiliser cette fonction comme dans la capture ci-dessous : Si malgré tout une utilisation non conforme de la fonction est faite, Visual Studio vous avertit de l'erreur grâce au compilateur TypeScript. Si par exemple le paramètre passé est une chaîne de caractères au lieu d'un nombre : La compilation du code permet ainsi une première validation et limite le risque d'erreur de type Les types primitifs TypeScript dispose d'un ensemble de types primitifs. Parmi ceux-ci se trouvent bien entendu les types primitifs déjà présents dans JavaScript tels que String, Number, Boolean et Arrays pour les tableaux. À ces types primitifs issus de JavaScript s'ajoutent les énumérations. Elles sont identiques aux énumérations en C# et se déclarent avec le mot-clé enum au lieu de var. Editions ENI - All rights reserved

19 TypeScript Chapitre Déclaration et utilisation d'une énumération enum Color {Red, Green, Blue}; var c: Color = Color.Red; Tout comme en C#, les éléments des énumérations sont numérotés en partant de 0 mais il est possible d'en spécifier la valeur manuellement. enum Color {Red = 1, Green = 2, Blue = 5}; Le type Void permet de déterminer l'absence totale de type. Il est utilisé pour les fonctions ne retournant aucune valeur. Attention! Void ne désigne que l'absence de valeur et non pas un type indéfini Le type any En plus des types primitifs et des types personnalisés qui peuvent être définis avec TypeScript, il existe le type any. Le type any est le seul type dynamique de TypeScript. Les validations sur une donnée de type any sont minimales : il correspond en fait au système de typage de JavaScript. Ainsi, il est possible de déclarer explicitement une variable de type any si l'on n'a pas de moyen de connaître le type de données qui pourront être chargées dans celle-ci au moment de sa déclaration. var surprise: any; Si l'on modifie la déclaration de la fonction getdisplayage de l'exemple précédent afin que celle-ci accepte un paramètre de type any en entrée, la compilation ne lève plus d'erreur. En revanche, le risque d'erreur à l'exécution est grand du fait que n'importe quel type de donnée est accepté en entrée. Paramètre d'entrée de type any function getdisplayage(age: any): string { return age + " ans"; } console.log(getdisplayage("25"));

20 234 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS L'inférence de type TypeScript dispose d'un système d'inférence de type. Cela signifie simplement que dans le cas d'une variable directement initialisée à sa déclaration, TypeScript va déterminer son type à partir de la valeur d'initialisation. Inférence de type var name = "John"; var age = 42; // => string // => number Si aucun type n'a pu être inféré de façon certaine par le compilateur TypeScript, c'est le type any qui sera utilisé par défaut. Type any lorsque l'inférence est impossible var about = null; // => any var other; // => any var prop = { a; b; } // => { a:any; b:any; } 3.2 L'objet Les classes TypeScript implémente le système de classes d'ecmascript 6 avec sa syntaxe de déclaration. La classe est définie avec le mot-clé class suivi du nom choisi pour celle-ci et définit un constructor comme méthode d'instanciation. En reprenant l'exemple des classes décrites dans le chapitre JavaScript moderne et en le convertissant en TypeScript, on obtient le code suivant. Book class Book { title: string; author: string; } constructor(title: string, author: string) { this.title = title; this.author = author; } Editions ENI - All rights reserved