SlideShare une entreprise Scribd logo
1  sur  32
Télécharger pour lire hors ligne
AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr
Frameworks JavaScript en environnement
Microsoft – Etat des lieux
Sébastien Ollivier Adrien Siffermann
@SebastienOll
sollivier@infinitesquare.com
@asiffermann
asiffermann@infinitesquare.com
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
Démo
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
Démo
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
Démo
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
Démo
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
Démo
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
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émo
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
Démo
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…
tech.days 2015#mstechdaysFrameworks JavaScript en environnement Microsoft – Etat des lieux
© 2015 Microsoft Corporation. All rights reserved.
tech days•
2015
#mstechdays techdays.microsoft.fr

Contenu connexe

Tendances

ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSRenaud Dumont
 
Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Laurent Guérin
 
Visual Basic 9.0 Trucs Et Astuces Dans Visual Studio 2008
Visual Basic 9.0   Trucs Et Astuces Dans Visual Studio 2008Visual Basic 9.0   Trucs Et Astuces Dans Visual Studio 2008
Visual Basic 9.0 Trucs Et Astuces Dans Visual Studio 2008Gregory Renard
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutesDavid Bo
 
M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...
M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...
M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...CERTyou Formation
 
Le Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery MobileLe Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery MobileMicrosoft
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsOLBATI
 
M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3CERTyou Formation
 
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...Microsoft
 
Vers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérienceVers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérienceMicrosoft
 
Angluars js
Angluars jsAngluars js
Angluars jsRYMAA
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Yves-Emmanuel Jutard
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSOAT
 
M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4CERTyou Formation
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 
Keynote Azure
Keynote AzureKeynote Azure
Keynote AzureMicrosoft
 
L'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSL'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSDavid Bottiau
 

Tendances (20)

Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2
 
Visual Basic 9.0 Trucs Et Astuces Dans Visual Studio 2008
Visual Basic 9.0   Trucs Et Astuces Dans Visual Studio 2008Visual Basic 9.0   Trucs Et Astuces Dans Visual Studio 2008
Visual Basic 9.0 Trucs Et Astuces Dans Visual Studio 2008
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutes
 
M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...
M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...
M10262 formation-developper-des-applications-windows-avec-microsoft-visual-st...
 
Le Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery MobileLe Web mobile avec ASP.Net MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery Mobile
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
 
M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3M20480 formation-programmer-en-html5-avec-javascript-et-css3
M20480 formation-programmer-en-html5-avec-javascript-et-css3
 
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
Nouvelles expériences d'authentification avec Windows 8.1 pour vos applicatio...
 
Vers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérienceVers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérience
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVC
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4M20486 formation-developper-des-applications-web-asp-net-mvc-4
M20486 formation-developper-des-applications-web-asp-net-mvc-4
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Keynote Azure
Keynote AzureKeynote Azure
Keynote Azure
 
L'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSL'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJS
 

En vedette

En lo más profundo Mireya Perez
En lo más profundo Mireya PerezEn lo más profundo Mireya Perez
En lo más profundo Mireya PerezMireyaPerez1
 
Clase revolucion mexicana2
Clase revolucion mexicana2Clase revolucion mexicana2
Clase revolucion mexicana2Nameless RV
 
Proyecto tics la seca
Proyecto tics la secaProyecto tics la seca
Proyecto tics la secaJohn Morales
 
Cortesía griega
Cortesía griegaCortesía griega
Cortesía griegaNameless RV
 
Oscar julian hernandez bonilla (power point)
Oscar julian hernandez bonilla (power point)Oscar julian hernandez bonilla (power point)
Oscar julian hernandez bonilla (power point)OSJULIAN
 
Trabajo sandra
Trabajo sandraTrabajo sandra
Trabajo sandraeximia
 
543 presentacion-final
543 presentacion-final543 presentacion-final
543 presentacion-finalagonzalrez1
 
Support_Cours 2 Master Pranet Université Rennes 2
Support_Cours 2 Master Pranet Université Rennes 2 Support_Cours 2 Master Pranet Université Rennes 2
Support_Cours 2 Master Pranet Université Rennes 2 Laurent Neyssensas
 
Diapositivas de twitter
Diapositivas de twitterDiapositivas de twitter
Diapositivas de twittertatiz16
 
Presentacion de google
Presentacion de googlePresentacion de google
Presentacion de googlemarcus18232
 

En vedette (20)

Elesban
ElesbanElesban
Elesban
 
En lo más profundo Mireya Perez
En lo más profundo Mireya PerezEn lo más profundo Mireya Perez
En lo más profundo Mireya Perez
 
La tecnologia
La tecnologiaLa tecnologia
La tecnologia
 
Factorización
FactorizaciónFactorización
Factorización
 
Guitarra
GuitarraGuitarra
Guitarra
 
Cayuco 3
Cayuco 3Cayuco 3
Cayuco 3
 
Hidroponia
HidroponiaHidroponia
Hidroponia
 
Clase revolucion mexicana2
Clase revolucion mexicana2Clase revolucion mexicana2
Clase revolucion mexicana2
 
Proyecto tics la seca
Proyecto tics la secaProyecto tics la seca
Proyecto tics la seca
 
E. de las diapositivas
E. de las diapositivasE. de las diapositivas
E. de las diapositivas
 
Cortesía griega
Cortesía griegaCortesía griega
Cortesía griega
 
Celac susy y mili
Celac susy y miliCelac susy y mili
Celac susy y mili
 
Fundación tesãi rekávo
Fundación tesãi rekávoFundación tesãi rekávo
Fundación tesãi rekávo
 
Oscar julian hernandez bonilla (power point)
Oscar julian hernandez bonilla (power point)Oscar julian hernandez bonilla (power point)
Oscar julian hernandez bonilla (power point)
 
Trabajo sandra
Trabajo sandraTrabajo sandra
Trabajo sandra
 
543 presentacion-final
543 presentacion-final543 presentacion-final
543 presentacion-final
 
Support_Cours 2 Master Pranet Université Rennes 2
Support_Cours 2 Master Pranet Université Rennes 2 Support_Cours 2 Master Pranet Université Rennes 2
Support_Cours 2 Master Pranet Université Rennes 2
 
Diapositivas de twitter
Diapositivas de twitterDiapositivas de twitter
Diapositivas de twitter
 
Presentacion de google
Presentacion de googlePresentacion de google
Presentacion de google
 
Celac susy y mili
Celac susy y miliCelac susy y mili
Celac susy y mili
 

Similaire à Frameworks JavaScript en environnement MS

Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005Gregory Renard
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...
Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...
Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...Microsoft Technet France
 
Microsoft Experieces 2016 - Retour d’expériences sur TFS Online
Microsoft Experieces 2016 - Retour d’expériences sur TFS OnlineMicrosoft Experieces 2016 - Retour d’expériences sur TFS Online
Microsoft Experieces 2016 - Retour d’expériences sur TFS OnlineDenis Voituron
 
WebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits Microsoft
WebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits MicrosoftWebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits Microsoft
WebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits MicrosoftChristophe Lauer
 
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et MonacoCycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et MonacoMicrosoft
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8Microsoft
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2Microsoft
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO CAMP
 
DMCA #20: Migration Natif vers react natif
DMCA #20: Migration Natif vers react natifDMCA #20: Migration Natif vers react natif
DMCA #20: Migration Natif vers react natifOlivier Destrebecq
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...PimpMySharePoint
 
PowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & AzurePowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & AzureMicrosoft Décideurs IT
 
Softfluent speig mdday2010
Softfluent speig mdday2010Softfluent speig mdday2010
Softfluent speig mdday2010MD DAY
 
PowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & AzurePowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & AzureMicrosoft Technet France
 
M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010
M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010
M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010CERTyou Formation
 
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Romain Linsolas
 
Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...
Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...
Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...Vincent Thavonekham-Pro
 
Visual Studio 2013
Visual Studio 2013Visual Studio 2013
Visual Studio 2013Microsoft
 

Similaire à Frameworks JavaScript en environnement MS (20)

Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...
Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...
Retour d’expérience sur ‘TFS Online’ (VSTS) dans une solution industrielle (c...
 
Microsoft Experieces 2016 - Retour d’expériences sur TFS Online
Microsoft Experieces 2016 - Retour d’expériences sur TFS OnlineMicrosoft Experieces 2016 - Retour d’expériences sur TFS Online
Microsoft Experieces 2016 - Retour d’expériences sur TFS Online
 
WebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits Microsoft
WebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits MicrosoftWebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits Microsoft
WebCamp Paris 1 : Les 20 minutes d&rsquo;actu des technos et produits Microsoft
 
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et MonacoCycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
Cycle de vie d'un projet web agile avec TFS 2013, Azure VM et Monaco
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
 
DMCA #20: Migration Natif vers react natif
DMCA #20: Migration Natif vers react natifDMCA #20: Migration Natif vers react natif
DMCA #20: Migration Natif vers react natif
 
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
La gouvernance, ou comment rapprocher les équipes de développement et d'infra...
 
PowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & AzurePowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & Azure
 
Softfluent speig mdday2010
Softfluent speig mdday2010Softfluent speig mdday2010
Softfluent speig mdday2010
 
PowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & AzurePowerShell Desired State Configuration & Azure
PowerShell Desired State Configuration & Azure
 
M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010
M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010
M10557 formation-introduction-au-developpement-web-avec-visual-studio-2010
 
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
 
Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...
Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...
Gab2015 vincent thavonekham_alm_devops_complète_en30_min_et_comment_gérer_la_...
 
Visual Studio 2013
Visual Studio 2013Visual Studio 2013
Visual Studio 2013
 

Plus de Sébastien Ollivier

Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Sébastien Ollivier
 
Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?Sébastien Ollivier
 
Microsoft experiences azure et asp.net core
Microsoft experiences   azure et asp.net coreMicrosoft experiences   azure et asp.net core
Microsoft experiences azure et asp.net coreSébastien Ollivier
 
Le développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaLe développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaSébastien Ollivier
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppSébastien Ollivier
 

Plus de Sébastien Ollivier (6)

Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
 
Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?Progressive Web App : Pourquoi et comment se passer des stores ?
Progressive Web App : Pourquoi et comment se passer des stores ?
 
ngParis - Rendu cote serveur
ngParis - Rendu cote serveurngParis - Rendu cote serveur
ngParis - Rendu cote serveur
 
Microsoft experiences azure et asp.net core
Microsoft experiences   azure et asp.net coreMicrosoft experiences   azure et asp.net core
Microsoft experiences azure et asp.net core
 
Le développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaLe développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordova
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 

Frameworks JavaScript en environnement MS

  • 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

Notes de l'éditeur

  1. Sébastien (11h00)
  2. Sébastien (11h00)
  3. Sébastien (11h01)
  4. Adrien (11h03)
  5. Adrien (11h04)
  6. Adrien (11h05)
  7. Adrien (11h06)
  8. Sébastien (11h09)
  9. Sébastien (11h10)
  10. Sébastien (11h11)
  11. Sébastien (11h12)
  12. Adrien (11h15)
  13. Adrien (11h16)
  14. Adrien (11h17)
  15. Adrien (11h18)
  16. Sébastien (11h21)
  17. Sébastien (11h22)
  18. Sébastien (11h23)
  19. Sébastien (11h24)
  20. Adrien (11h27)
  21. Adrien (11h28)
  22. Adrien (11h29)
  23. Adrien (11h30)
  24. Sébastien (11h33) Parler à l’oral de PhoneGap
  25. Sébastien (11h34)
  26. Sébastien (11h35)
  27. Sébastien (11h36)
  28. Adrien (11h39)
  29. Adrien (11h40)