Avant de commencer 1. Introduction 15 2. HTML5 oui, mais pas que... 15 2.1 HTML5 16 2.2 JavaScript 17 2.3 CSS 18 3. Les outils 18 Préparation des outils et création du projet 1. Introduction 21 2. Team Foundation Server 21 2.1 Visual Studio ALM 21 2.2 Les services de TFS 22 2.2.1 Planning 22 2.2.2 Contrôle des sources 23 2.2.3 Éléments de travail 24 2.2.4 Automatisation de la build 25 2.2.5 Tests et Lab Management 26 2.2.6 Rapports et analyse 27 2.3 Visual Studio Online ou serveur dédié 27 3. Démarrage du projet 29 3.1 Création d'un compte Visual Studio Online 29 3.2 Création du projet d'équipe 31 3.3 Team Web Access 34 3.3.1 Gestion de l'équipe et droits d'accès 35 3.3.2 Les Work Items 37 1/13
3.3.3 Le Product Backlog 38 3.3.4 Gestion des versions et du planning 43 4. Visual Studio 48 4.1 Création du projet 52 4.1.1 Connexion à TFS et configuration de l'espace de travail 52 4.1.2 Connexion à un projet avec Team Foundation Version Control 57 4.1.3 Création du projet et premier archivage de code 60 4.2 Team Explorer 64 4.2.1 Gestion des branches 65 4.2.2 Les requêtes d'éléments de travail 68 5. Les plug-ins indispensables 70 5.1 Web Essentials 71 5.2 Chutzpah 71 5.3 Extension GitHub pour Visual Studio 71 Architecture d'une application web 1. Introduction 73 2. Qu'est-ce qu'une web app? 73 3. Les approches possibles 74 3.1 Fonctionnement de l'architecture monopage 74 3.2 Le site web seul 75 3.3 L'API et ses apps 75 3.4 XML et JSON 76 4. Applications JavaScript ou hybrides client-serveur 78 4.1 L'application hybride client-serveur 78 4.2 L'application JavaScript 79 4.3 Comment choisir? 79 2/13
Création d'api REST 1. Introduction 81 2. Présentation de REST 81 3. ASP.NET ou Node.js? 82 3.1 ASP.NET MVC 82 3.2 Node.js 83 3.3 Lequel choisir? 83 4. Le projet ASP.NET 5 84 4.1 Création du projet 84 4.2 Organisation du projet 87 4.3 Configuration de MVC 6 et Entity Framework 7 88 4.3.1 Ajout des dépendances 88 4.3.2 Ajout du fichier de configuration 92 4.3.3 Configuration d'asp.net MVC 93 5. Entity Framework 7 95 5.1 Création des modèles 95 5.2 Création du contexte de base de données 98 5.3 Création du Repository 99 5.4 Configuration des migrations avec DNVM 104 6. Création de la WebAPI 107 6.1 Création des contrôleurs 107 6.1.1 Les méthodes GET 108 6.1.2 Ajout des méthodes POST, PUT et DELETE 109 6.2 Gestion des erreurs 111 6.3 Tester avec Fiddler 112 6.4 Concepts avancés 116 6.4.1 Objets de transfert de données 116 6.4.2 Asynchronisme 117 3/13
JavaScript moderne 1. Introduction 121 2. Conventions de code JavaScript 122 2.1 Style 122 2.1.1 Indentation 122 2.1.2 Terminaison de ligne 123 2.1.3 Opérations sur plusieurs lignes 124 2.1.4 Variables 125 2.1.5 Fonctions 127 2.1.6 Comparateurs d'égalité 129 2.1.7 Boucles et expressions booléennes 130 2.1.8 Commentaires 132 2.2 Conventions de nommage 133 2.2.1 Variables et constantes 133 2.2.2 Fonctions 134 2.2.3 Classes et constructeurs 135 2.3 Les pièges à éviter 135 2.3.1 null et undefined 135 2.3.2 eval() 136 3. Les patterns de base à connaître 137 3.1 Les classes 137 3.2 L'héritage 139 3.3 Les membres publics, privés et privilégiés 140 3.3.1 Publics 140 3.3.2 Privés 140 3.3.3 Méthodes privilégiées 141 3.4 Les fonctions anonymes à invocation immédiate 142 3.5 Les modules 144 3.5.1 Le pattern Module 144 3.5.2 Le pattern Façade 146 3.5.3 Gestion des dépendances avec AMD 147 3.6 Les callbacks 148 4/13
4. Les bonnes pratiques 150 4.1 Le mode strict 150 4.2 Erreurs personnalisées 153 4.3 Documentation du code 154 5. Les outils 155 5.1 JSHint 155 5.1.1 Introduction 155 5.1.2 Configuration 157 5.1.3 Déclaration d'exceptions 158 5.2 Outils pour le développeur intégrés au navigateur 159 5.3 Vorlon.JS 162 Single Page Applications 1. Introduction 165 2. Choisir un framework 165 3. AngularJS 166 3.1 Introduction 166 3.2 Une application AngularJS simple 167 3.2.1 Configuration du dossier wwwroot 167 3.2.2 Premier exemple de code AngularJS 168 3.3 Un exemple plus avancé 171 3.3.1 Création du premier module 171 3.3.2 Un premier contrôleur 173 3.3.3 L'injection de dépendances 175 3.3.4 Le scope 176 3.3.5 Les directives 179 3.3.6 Conventions et style 183 3.3.7 Filtres, services, providers, factories 184 5/13
4. Développement de la web app 184 4.1 Préparation du projet 184 4.1.1 package.json 185 4.1.2 bower.json 186 4.1.3 Gruntfile.js 188 4.2 Création de l'application Angular 192 4.2.1 Création du conteneur de l'application 192 4.2.2 Organisation des sources 197 4.2.3 Gestion des routes 198 4.2.4 Création des contrôleurs 199 4.2.5 Création des vues 202 4.2.6 Chargement de l'application dans la page web 204 4.2.7 Ajout du menu de navigation 209 4.3 Utiliser l'api 210 4.3.1 $http 210 4.3.2 Création de BooksService 210 4.3.3 CRUD avec $resources 214 4.3.4 Liste des livres 216 4.3.5 Détail 217 4.3.6 Ajouter un livre 219 4.3.7 Afficher les critiques 221 4.3.8 Ajouter une critique 224 TypeScript 1. Introduction 229 2. Présentation de TypeScript 230 3. Le langage 231 3.1 Le système de typage 231 3.1.1 Déclaration 231 3.1.2 Les types primitifs 232 6/13
3.1.3 Le type any 233 3.1.4 L'inférence de type 234 3.2 L'objet 234 3.2.1 Les classes 234 3.2.2 Les modificateurs public, private et protected 235 3.2.3 L'héritage 237 3.2.4 Les interfaces 237 3.3 Les génériques 239 3.4 Les modules 240 3.4.1 Les modules internes 240 3.4.2 Les modules externes ou modules ES6 243 3.5 Autres éléments intéressants du langage 247 3.5.1 Boucle for...of 247 3.5.2 Les Union Types 247 3.5.3 Les fonctions anonymes fléchées d'es6 248 3.5.4 ES6 let et const 249 3.5.5 Les déstructurations ES6 250 3.5.6 Les décorateurs 251 3.6 Et pour le futur? 252 4. Configurer le projet pour utiliser TypeScript 253 4.1 Installation 253 4.2 Compilation 253 4.2.1 En ligne de commande 253 4.2.2 Configuration de la compilation avec Visual Studio 254 4.2.3 Configuration de la compilation avec tsconfig.json 255 4.2.4 Intégration à la build Grunt 256 4.3 Utiliser TypeScript avec des librairies JavaScript 258 4.3.1 Les fichiers de définition de type 258 4.3.2 Récupération automatisée des fichiers de définition 258 4.3.3 Utilisation des librairies en TypeScript 260 4.4 Coder en AngularJS avec TypeScript 261 4.4.1 Transformation du code AngularJS pour TypeScript 261 4.4.2 Création des modules 263 4.4.3 Configuration de RequireJS 266 4.4.4 Et pour Angular 2? 270 7/13
4.5 Déboguer en TypeScript 271 4.5.1 Dans Visual Studio 271 4.5.2 Dans les autres navigateurs 272 Web apps adaptatives 1. Introduction 275 2. Responsive design ou site dédié? 276 2.1 Le site dédié 276 2.2 Le site web responsive 277 2.3 Optimisation 278 2.4 L'approche RESS 279 3. CSS 280 3.1 Présentation de CSS 280 3.2 Les feuilles de style 280 3.3 Les sélecteurs CSS 281 3.3.1 Les sélecteurs de base 282 3.3.2 Le sélecteur d'attribut 284 3.3.3 Les sélecteurs hiérarchiques 285 3.3.4 Les pseudo-classes et pseudo-éléments 287 3.4 Les media queries 289 3.4.1 La syntaxe 290 3.4.2 Les critères 291 3.4.3 Définir les bonnes media queries pour son projet 291 3.4.4 Le viewport 292 4. LESS 295 4.1 LESS et Sass 295 4.2 Fonctionnalités de LESS 297 4.2.1 Installation et utilisation de LESS 297 4.2.2 Les variables 299 4.2.3 Imbrication des fichiers 299 8/13
4.2.4 Organisation des fichiers 301 4.2.5 Imbrication de règles 303 4.2.6 Mixins 304 4.2.7 Mathématiques 306 4.2.8 Boucles et conditions 306 4.2.9 Le style de l'application 309 Intégration continue 1. Introduction 311 2. Build.NET 311 2.1 Que fait une build.net? 311 2.2 Team Foundation Build 312 2.2.1 Architecture 312 2.2.2 La définition de build 313 2.2.3 Contrôleur de build local ou hébergé 314 2.3 Build XAML 314 2.3.1 Les modèles de processus 315 2.3.2 Configuration 316 2.3.3 Création des agents 317 2.3.4 Création de la définition de build 317 2.3.5 Personnalisation du modèle de processus 321 2.3.6 Activité personnalisée 322 2.4 Build vnext 323 2.4.1 Configuration 323 2.4.2 Création de la définition de build 325 2.4.3 Exécution 333 2.4.4 Suivi des exécutions 334 3. Build JavaScript 335 3.1 Que fait une build JavaScript? 335 3.2 Grunt 336 3.2.1 Présentation 336 9/13
3.2.2 Configuration de la build Grunt du projet 336 3.3 Gulp 337 3.4 Préparation des livrables pour la production 338 3.4.1 Présentation 338 3.4.2 Génération des Bundles avec Grunt 339 3.5 Exécution de la build 342 3.5.1 Exécution manuelle et automatisée 342 3.5.2 Intégration à TFS Build 342 Les tests 1. Introduction 343 2. Les tests unitaires 344 2.1 Tests unitaires et TDD 344 2.2 Anatomie d'un test unitaire 345 2.3 Les tests unitaires en.net 345 2.3.1 Création d'un projet de test unitaire 345 2.3.2 Configuration 346 2.3.3 Écriture de tests 347 2.3.4 Exécution des tests 350 2.3.5 Intégration à la build TFS 352 2.4 Les tests unitaires en JavaScript 352 2.4.1 Karma 352 2.4.2 Mocha 356 2.4.3 Chai 357 2.4.4 SinonJS 359 2.4.5 Intégration à Grunt 361 3. Les tests fonctionnels 362 3.1 Introduction 362 3.2 Plans, suites et cas de tests 364 3.3 Planification 365 3.3.1 Création d'un plan de test 365 10/13
3.3.2 Création de suites de tests 366 3.3.3 Création de cas de tests 367 3.4 Exécution 371 3.5 Suivi et rapports 374 4. Tests de charge 376 4.1 Introduction 376 4.2 Les tests web 377 4.3 Les tests de charge 380 4.4 Tests de charge dans le cloud 386 Déploiement et suivi en production 1. Introduction 387 2. Déploiement continu sur Azure avec Visual Studio Online 388 2.1 Présentation 388 2.2 Configuration 388 3. Gestion avancée des déploiements avec Release Manager 392 3.1 Présentation 392 3.2 Configuration 393 3.2.1 Création du chemin de livraison en production 401 3.2.2 Livraison d'une nouvelle version 405 4. Suivi et analyse de l'application en production avec Application Insights 407 4.1 Présentation 407 4.2 Configuration 408 4.2.1 Configuration du service 408 4.2.2 Ajout à un nouveau projet 413 4.2.3 Ajout à un projet existant 414 4.3 Récupération et analyse des données 415 4.3.1 Récupération et analyse des premières données 415 11/13
4.3.2 Informations disponibles de base 417 4.3.3 Données d'utilisation des pages 419 4.3.4 Intégration à une application AngularJS 420 4.3.5 Suivi de la disponibilité 424 4.3.6 Mise en place d'alertes 426 Les nouvelles API d HTML5 1. Introduction 429 2. Les Web Components 430 2.1 Principes 430 2.1.1 Comprendre le Shadow DOM 430 2.1.2 Déclaration de nouveaux composants 433 2.1.3 Utilisation des templates et des imports 434 2.1.4 Utiliser les Web Components avec des librairies JavaScript 438 3. Géolocalisation 439 3.1 Présentation 439 3.2 Comment ça marche? 439 4. Hors ligne 441 4.1 Le cache d'application 441 4.2 Stockage de données en local 444 4.2.1 Le Web Storage 444 4.2.2 IndexedDB 445 5. Accès au système 446 5.1 FileAPI 446 5.2 getusermedia 452 5.3 Orientation, accélération et autres capteurs 454 6. Graphisme avancé 455 12/13
6.1 Canvas 455 6.1.1 Canvas 2D 455 6.1.2 Canvas 3D 457 6.2 SVG 457 7. Les Web Workers 460 8. Et les autres? 467 Évolution des standards et rétrocompatibilité 1. Introduction 469 2. Connaître le support d'une fonctionnalité 470 3. Détection et support des fonctionnalités 471 3.1 Modernizr 471 3.1.1 Présentation 471 3.1.2 Utilisation 471 3.1.3 Chargement asynchrone de fichiers 473 3.2 Polyfills 474 Index 475 13/13