Frameworks JavaScript en environnement MS

AMBIENT INTELLIGENCE

tech days•

2015

#mstechdays techdays.microsoft.fr

Frameworks JavaScript en environnement Microsoft – Etat des lieux

Sébastien Ollivier Adrien Siffermann@SebastienOll

[email protected]

@asiffermann

[email protected]

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


Démo


Créé en Janvier 2006 par John Resig

Librairie JavaScript pour augmenter la productivité et assurer la compatibilité cross-browser

Avantages de jQuery

Présentation


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


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


Démo


Créé en 2011 par Twitter

Framework CSS et JavaScript pour adapter vos sites à tous les types d’écrans

Avantages de Bootstrap

Présentation


Layout divisé en lignes de 12 colonnes

Positionnement via des classes CSS

Principes de base


Intégré par défaut dans les projets Starter Web



Intellisense CSS



Démo


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


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());




Détection des attributs data-bind

Intellisense dans les attributs data-bind



Démo


Créé en 2009 par Google

Framework MVC pour construire des Single Page Applications (SPA)

Avantages d’AngularJS

Présentation


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>



Intellisense

Templates de projets

Templates d’éléments (controller, modules, directives…)



Démo


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


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;

}


Inclus par défaut dans Visual Studio

Compilation

Intellisense

Erreurs de compilation



Démo


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


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


Type de projet spécifique

Debug directement depuis Visual Studio

Intellisense des APIs Cordova



Démo


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 ?


Sessions

Pour en savoir plus…


© 2015 Microsoft Corporation. All rights reserved.

tech days•

2015

#mstechdays techdays.microsoft.fr

Technology

Frameworks JavaScript en environnement MS