Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
JavaScriptpour les développeurs .NET<br />Thomas Conté<br />Microsoft<br />
Agenda<br />Brève histoire de JavaScript<br />JavaScript dans IE<br />JavaScript: le langage<br />ECMAScript5<br />Framewo...
Piqûre de rappel<br />
Brève histoire de JavaScript<br />Netscape & Brendan Eich<br />Mocha, LiveScript, JavaScript<br />Microsoft<br />JScript: ...
Le chemin parcouru…<br /><a href="index.html" onMouseOut="MM_swapImgRestore()" <br />onMouseOver="MM_swapImage('img1978','...
JavaScript, l’Assembleur du Web?<br />Scott Hanselman : JavaScript, l'Assembleur du Web?<br />JavaScript est universelleme...
JavaScript dans<br />Internet Explorer<br />
Chakra<br />Chakra est le nouveau moteur JavaScript dans IE9 et +<br />Performances dignes d’un « navigateur moderne »<br ...
Performances<br />La course aux benchmarks<br />E.g. WebKitSunSpider<br />Nécessaire, mais pas suffisant!<br />Il faut opt...
JSMeter<br />http://research.microsoft.com/en-us/projects/jsmeter/<br />Instrumentation de Internet Explorer 8<br />iejscr...
« JavaScript & Metaperformance »<br />Présentation de Douglas Crockford à Velocity2011<br />Dans le même esprit que MS Res...
Crockford « JSLint benchmark »<br />
Architecture de Chakra<br />
Démo<br />Chakra<br />
Developer Tools<br />
Démo<br />Developer Tools<br />
JavaScript: le langage<br />
JavaScript !== C#<br />Règles de portée (scoping)<br />Utilisation de Patterns type Module pour éviter de polluer la porté...
scoping<br />function mange() {// Code incorrect!    var quoi = "un mars",         jaiFaim = true;        if ( jaiFaim ) {...
scoping<br />// Code correctfunction mange() {    var quoi = "un mars",         jaiFaim = true,        timeToWait, bodyPar...
hoisting<br />console.log( someVariable ); //undefinedvar someVariable = 42; //Global variableconsole.log( someVariable );...
hoisting<br />var someVariable = undefined;console.log( someVariable ); //undefinedsomeVariable = 42; //Global variablecon...
false-y values<br />false<br />null<br />undefined<br />"" (empty string)<br />0<br />NaN (not a number)<br />Awful Part<b...
comparaisons<br />console.log(0=='');//true<br />console.log(0=='0');//true<br />console.log(false=='0');//true<br />conso...
comparaisons<br />console.log(0==='');//false<br />console.log(0==='0');//false<br />console.log(false==='0');//false<br /...
tableaux & objets<br />var person={<br />firstName:"Thomas",<br />lastName:"Conté",<br />sayFullName:function(){<br />	con...
objets & prototypes<br />function Car(model, year, miles) {   this.model = model;   this.year  = year;   this.miles = mile...
for … in<br />var myArray = [], name;myArray[5] = "test";console.log( myArray.length ); //6Array.prototype.someVariable = ...
var myArray = [], name;myArray[5] = "test";console.log( myArray.length ); //6for ( var i = 0, length = myArray.length; i <...
for … in<br />var Person = function( firstName, lastName ) {  this.firstName = firstName;  this.lastName = lastName;  retu...
closures<br />/* “Une closure est un type d'objet particulier qui combine deux éléments: une fonction, et l'environnement ...
closures<br />for (var i = 0; i < 10; i++) {  document.getElementById('box' + i).onclick = function() {    alert('You clic...
module<br />var testModule = (function(){    var counter = 0;    return {        incrementCounter: function() {           ...
ECMAScript 5<br />
Historique<br />
Les apports d’ECMAScript 5<br />Énormément de « petits » changements pour rendre le langage plus cohérent<br />« strict mo...
Strict Mode<br />Activé en ajoutant la chaîne magique:<br />‘use strict’;<br />Ignorée par les précédents interpréteurs<br...
Démo<br />ECMAScript 5<br />
Frameworks<br />
Script#<br />Projet de Nikhil Kothari, aujourd'hui Partner Engineer chez Microsoft: http://projects.nikhilk.net/ScriptShar...
Knockout.JS<br />Projet de Steve Sanderdon, PM Web Tools chez Microsoft<br />http://knockoutjs.com/<br />Permet d’utiliser...
RxJS<br />Projet mené par l'équipe Rx chez Microsoft<br />http://msdn.microsoft.com/en-us/data/gg577609<br />Framework d’E...
RxJS<br />varinput = $("#searchInput");<br />varwords = input.toObservable("keyup")<br />            .Select(function(x) {...
JavaScript sur le serveur<br />
Node.JS<br />Node.JS est développé par Ryan Dahl chez Joyent<br />C’est un framework permettant de développer des services...
Hello Node<br />varhttp = require('http'),<br />  mysql= (new (require('mysql').Client)({user: 'root'}));<br />mysql.conne...
Node.JS dans Windows Azure<br />Microsoft aide officiellement Ryan Dahl à porter Node.JS sur Windows<br />Node est constit...
Démo<br />Node.JS sur Windows Azure<br />
Conclusion<br />JavaScript est aujourd’hui l’un des langages de programmation les plus populaires<br />Ses performances en...
Brendan Eich, CapitolJS : http://www.slideshare.net/BrendanEich/capitol-js<br />
Prochain SlideShare
Chargement dans…5
×

JavaScript pour les développeurs .NET

2 361 vues

Publié le

L'idée est de faire un point sur JavaScript, ses origines et son actualité, vu de la perspective d'un développeur Microsoft. Cette présentation est essentiellement destinée aux développeurs .NET qui auraient le sentiment d'avoir un peu lâché JavaScript, et qui voudraient se remettre dans le bain.

Publié dans : Technologie
  • Soyez le premier à commenter

JavaScript pour les développeurs .NET

  1. 1.
  2. 2. JavaScriptpour les développeurs .NET<br />Thomas Conté<br />Microsoft<br />
  3. 3. Agenda<br />Brève histoire de JavaScript<br />JavaScript dans IE<br />JavaScript: le langage<br />ECMAScript5<br />Frameworks& librairies<br />JavaScript côté serveur<br />Node.JS & Windows Azure<br />
  4. 4. Piqûre de rappel<br />
  5. 5. Brève histoire de JavaScript<br />Netscape & Brendan Eich<br />Mocha, LiveScript, JavaScript<br />Microsoft<br />JScript: IE3, 1996<br />Même langage, nom différent<br />ECMAScriptPremière édition: Juin 1997<br />AJAX<br />XMLHTTP : IE5, 1999<br />JSON "Découvert" par Crockford en 2001-2002<br />jQuery& John Resig: 2006<br />Les temps modernes?<br />
  6. 6. Le chemin parcouru…<br /><a href="index.html" onMouseOut="MM_swapImgRestore()" <br />onMouseOver="MM_swapImage('img1978','','bar_nav_on_01.gif',1)"><br /> <imgname="img1978" border="0" src="bar_nav_no_01.gif" width="24" height="88"><br /></a><br />...<br /><script language="JavaScript"><br />functionMM_swapImage() { //v3.0<br />var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)<br />if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}<br />}<br /></script><br />Depuis le JavaScript généré par DreamWeaver…<br />Jusqu’aux applications modernes les plus complexes: Office Web Apps, Bing Maps, Gmail (443K LOC), etc.<br />
  7. 7. JavaScript, l’Assembleur du Web?<br />Scott Hanselman : JavaScript, l'Assembleur du Web?<br />JavaScript est universellement déployé<br />Il est rapide, et devient de plus en plus rapide<br />JavaScript est le langage "de bas niveau" du Web<br />Vous pouvez le fignoler à la main, ou le générer à partir d'un langage de plus haut niveau (CoffeScript, Script#, etc.)<br />
  8. 8. JavaScript dans<br />Internet Explorer<br />
  9. 9. Chakra<br />Chakra est le nouveau moteur JavaScript dans IE9 et +<br />Performances dignes d’un « navigateur moderne »<br />Benchmarks + scénarios « réels »<br />Support JavaScript dernier cri<br />ECMAScript 5<br />
  10. 10. Performances<br />La course aux benchmarks<br />E.g. WebKitSunSpider<br />Nécessaire, mais pas suffisant!<br />Il faut optimiser pour la « vraie vie »<br />
  11. 11. JSMeter<br />http://research.microsoft.com/en-us/projects/jsmeter/<br />Instrumentation de Internet Explorer 8<br />iejscript*.cpp<br />custom jscript.dll<br />website visits<br />custom trace files<br />Analyseurs<br />custom trace files<br />
  12. 12. « JavaScript & Metaperformance »<br />Présentation de Douglas Crockford à Velocity2011<br />Dans le même esprit que MS Research, Douglas Crockforda utilisé sa propre application JSLint pour comparer les interpréteurs<br />
  13. 13. Crockford « JSLint benchmark »<br />
  14. 14. Architecture de Chakra<br />
  15. 15. Démo<br />Chakra<br />
  16. 16. Developer Tools<br />
  17. 17. Démo<br />Developer Tools<br />
  18. 18. JavaScript: le langage<br />
  19. 19. JavaScript !== C#<br />Règles de portée (scoping)<br />Utilisation de Patterns type Module pour éviter de polluer la portée globale<br />« traction » des variables et fonctions (hoisting)<br />Les valeurs « presque fausses » (false-y values)<br />Opérateurs de comparaison<br />Déclaration des tableaux & objets<br />Utilisation du for … in (indice: pas comme en C#)<br />Utilisation des Closures<br />…<br />
  20. 20. scoping<br />function mange() {// Code incorrect!    var quoi = "un mars",         jaiFaim = true;        if ( jaiFaim ) {        // En C#, timeToWaitn’est accessible que dans ce if; pas en JavaScript!        var timeToWait = 10;                console.log( "Attendre " + timeToWait + " minutes" );                mache();    }        function mache() {        var comment = "ma bouche";                // Cette fonction a accès à timeToWait car elle est en fait dans        // le périmètre de la fonction eat()        console.log( "Après " + timeToWait +             " minutes, je mange " + quoi + " avec " + comment );    }}mange();// Attendre 10 minutes// Après 10 minutes, je mange un mars avec ma bouche<br />Awful Part<br />
  21. 21. scoping<br />// Code correctfunction mange() {    var quoi = "un mars",         jaiFaim = true,        timeToWait, bodyPart;        if ( jaiFaim ) {        timeToWait = 10;                console.log( "Attendre " + timeToWait + " minutes" );                mache();    }        function mache() {        var comment = "ma bouche";                console.log( "Après " + timeToWait +             " minutes, je mange " + quoi +             " avec " + comment );    }}mange();// Attendre 10 minutes// Après 10 minutes, je mange un mars avec ma bouche<br />
  22. 22. hoisting<br />console.log( someVariable ); //undefinedvar someVariable = 42; //Global variableconsole.log( someVariable ); // 42function doSomething() {    console.log( someVariable ); // undefined    //Pourquoi undefined??    someVariable = 1    console.log( someVariable ); // 1        console.log( window.someVariable ); // 42    //Pourquoi 42?        if ( false ) {        var someVariable = 0;    }}doSomething();<br />
  23. 23. hoisting<br />var someVariable = undefined;console.log( someVariable ); //undefinedsomeVariable = 42; //Global variableconsole.log( someVariable ); // 42function doSomething() {    //Le hoisting amène le var en haut de la fonction,     //et l’initialise à undefined !    var someVariable = undefined;    console.log( someVariable ); // undefined    someVariable = 1    console.log( someVariable ); // 1    //Cette ligne de code n’accède pas à la var globale,    //mais à la locale qui a été « tractée »    console.log( window.someVariable ); // 42    if ( false ) {        someVariable = 0;    }}doSomething();<br />
  24. 24. false-y values<br />false<br />null<br />undefined<br />"" (empty string)<br />0<br />NaN (not a number)<br />Awful Part<br />
  25. 25. comparaisons<br />console.log(0=='');//true<br />console.log(0=='0');//true<br />console.log(false=='0');//true<br />console.log(null==undefined);//true<br />console.log(0==' trn ');//true<br />
  26. 26. comparaisons<br />console.log(0==='');//false<br />console.log(0==='0');//false<br />console.log(false==='0');//false<br />console.log(null===undefined); //false<br />console.log(0===' trn ');//false<br />
  27. 27. tableaux & objets<br />var person={<br />firstName:"Thomas",<br />lastName:"Conté",<br />sayFullName:function(){<br /> console.log(this.firstName+" "+<br />this.lastName);<br />}<br />},<br />keys=["123","676","242","4e3"];<br />
  28. 28. objets & prototypes<br />function Car(model, year, miles) {   this.model = model;   this.year  = year;   this.miles = miles;} /* On utilise Object.prototype.newMethod et pas Object.prototype sinon l'on redéfinit le prototype!*/Car.prototype.toString = function() {        return this.model + " has done " +<br />        this.miles + " miles";};  var civic = new Car("Honda Civic", 2009, 20000);var mondeo = new Car("Ford Mondeo", 2010, 5000); console.log(civic.toString());<br />
  29. 29. for … in<br />var myArray = [], name;myArray[5] = "test";console.log( myArray.length ); //6Array.prototype.someVariable = "pourquoi?";for ( name in myArray ) {    console.log( name, myArray[name] );     //Outputs...     //   5, test    //   someVariable, pourquoi ?}<br />
  30. 30. var myArray = [], name;myArray[5] = "test";console.log( myArray.length ); //6for ( var i = 0, length = myArray.length; i < length; i++ ) {    console.log( i, myArray[i] );     //Outputs...    //   0, undefined    //   1, undefined    //   2, undefined    //   3, undefined    //   4, undefined    //   5, test }<br />for … in<br />
  31. 31. for … in<br />var Person = function( firstName, lastName ) {  this.firstName = firstName;  this.lastName = lastName;  return this;};Person.prototype = {  isMarried : false,  hasKids: false};var john = new Person( "John", "Smith" ),  linda = new Person( "Linda", "Davis" ),  name;john.isMarried = true;<br />console.log( "sans vérifier hasOwnProperty" );for ( name in john ) {  console.log( name + ": " + john[name] );   //Outputs  //  firstName: John   //  lastName: Smith  //  isMarried: true  //  hasKids: false}console.log( "en vérifiant hasOwnProperty" );for ( name in linda ) {  if ( linda.hasOwnProperty(name) ) {    console.log( name + ": " + linda[name] );     //Outputs    //  firstName: Linda    //  lastName: Davis  }}<br />
  32. 32. closures<br />/* “Une closure est un type d'objet particulier qui combine deux éléments: une fonction, et l'environnement dans lequel cette fonction a été créée. L'environnement contient toutes les variables locales qui étaient dans le périmètre au moment de la création de la closure.” -- https://developer.mozilla.org/en/JavaScript/Guide/Closures */function makeAdder( x ) {    return function( y ) {        return x + y;    };}var add5 = makeAdder( 5 );var add10 = makeAdder( 10 );console.log( add5(2) ); // 7console.log( add10(2) ); // 12<br />
  33. 33. closures<br />for (var i = 0; i < 10; i++) {  document.getElementById('box' + i).onclick = function() {    alert('You clicked on box #' + i);  };}<br />pas marche!<br />for (var i = 0; i < 10; i++) {  document.getElementById('box'+i).onclick = (function(index){    return function() {      alert('You clicked on box #' + index);    };  })(i);}<br />marche!<br />
  34. 34. module<br />var testModule = (function(){    var counter = 0;    return {        incrementCounter: function() {            return counter++;        },        resetCounter: function() {            console.log('counterwas:' + counter);            counter = 0        }    }})(); /*test*/testModule.incrementCounter();testModule.resetCounter();<br />
  35. 35. ECMAScript 5<br />
  36. 36. Historique<br />
  37. 37. Les apports d’ECMAScript 5<br />Énormément de « petits » changements pour rendre le langage plus cohérent<br />« strict mode »<br />La plus importante nouveauté d’après Crockford<br />Supporté à partir de IE10<br />Modifications de la syntaxe<br />JSON<br />Nouvelles méthodes: tableaux, dates…<br />Modèle objet amélioré<br />Object.create, Object.keys …<br />Getters & Setters<br />Meta Object API<br />…<br />
  38. 38. Strict Mode<br />Activé en ajoutant la chaîne magique:<br />‘use strict’;<br />Ignorée par les précédents interpréteurs<br />Périmètre fichier ou fonction (recommandé)<br />Plus de variables globales implicites<br />this n’est plus relié au scope global dans un appel de fonction  plus de pollution accidentelle<br />Et bien d’autres mesures de sécurité<br />Recommandation: utiliser Strict Mode par défaut dès aujourd’hui<br />
  39. 39. Démo<br />ECMAScript 5<br />
  40. 40. Frameworks<br />
  41. 41. Script#<br />Projet de Nikhil Kothari, aujourd'hui Partner Engineer chez Microsoft: http://projects.nikhilk.net/ScriptSharp<br />Utilisé en interne par Microsoft<br />Office Web Applications / SharePoint Office Web Services<br />Bing : Maps, Mobile<br />Windows Live<br />Script# permet de compiler du C# en JavaScript<br />On gagne la productivité des outils .NET, Visual Studio<br />Particulièrement intéressant sur de grosses applications<br />Focalisé sur la production d’applications JavaScript optimales (plus que sur le portage d’applications .NET)<br />
  42. 42. Knockout.JS<br />Projet de Steve Sanderdon, PM Web Tools chez Microsoft<br />http://knockoutjs.com/<br />Permet d’utiliser le pattern MVVM pour développer des interfaces utilisateur HTML / JavaScript<br />Implémente le pattern Observable<br />Bindingbi-directionnel<br />Fournit un système de templating permettant de générer l’interface à partir du ViewModel<br />Exemples: http://knockoutjs.com/examples/<br />
  43. 43. RxJS<br />Projet mené par l'équipe Rx chez Microsoft<br />http://msdn.microsoft.com/en-us/data/gg577609<br />Framework d’Event Processing, existe aussi pour .NET<br />Particulièrement adapté à la nature asynchrone de JavaScript<br />Basé sur deux notions principales:<br />Observable Sequences<br />Observers<br />Sources de Séquences : Timers, DOM, AJAX, … ou custom<br />Projections : .Select()<br />Composition: .Throttle(), .DistinctUntilChanged(), …<br />
  44. 44. RxJS<br />varinput = $("#searchInput");<br />varwords = input.toObservable("keyup")<br /> .Select(function(x) {<br />returninput.val(); })<br /> .Throttle(500)<br /> .DistinctUntilChanged()<br /> .Select(function(term) {<br />return search(term); })<br /> .Switch();<br />words.Subscribe(function(data) {<br /> $("#results").empty();<br /> $.each(data, function(index, value) {<br /> $("#results").append("<li>" + value + "</li>"); });<br />});<br />
  45. 45. JavaScript sur le serveur<br />
  46. 46. Node.JS<br />Node.JS est développé par Ryan Dahl chez Joyent<br />C’est un framework permettant de développer des services haute performances sur un modèle asynchrone<br />L’idée étant que le modèle asynchrone est plus performant et plus efficace que le classique modèle multithreadé quand on a beaucoup d’entrées-sorties à gérer<br />Semblable dans le principe à l’Async CTP<br />JavaScript choisi car particulièrement adapté au développement asynchrone grâce à ses forts aspects fonctionnels<br />Le framework intègre le protocole HTTP en standard ainsi qu’une librairie système entièrement asynchrone<br />
  47. 47. Hello Node<br />varhttp = require('http'),<br />  mysql= (new (require('mysql').Client)({user: 'root'}));<br />mysql.connect();<br />mysql.query('use castle;');<br />http.createServer(function (req, res) {<br />  res.writeHead(200, {'Content-Type': 'text/json'});<br />mysql.query('select * from dragons', function (e, d) {<br />  if (e) { <br />     res.end('ERROR'); <br />} else { <br />res.end(JSON.stringify(d));<br />}<br />});<br />}).listen(8124, '127.0.0.1');<br />console.log('Server running at http://127.0.0.1:8124/');<br />
  48. 48. Node.JS dans Windows Azure<br />Microsoft aide officiellement Ryan Dahl à porter Node.JS sur Windows<br />Node est constitué d’un seul exécutable, node.exe, donc très simple à inclure dans un WorkerRole<br />
  49. 49. Démo<br />Node.JS sur Windows Azure<br />
  50. 50. Conclusion<br />JavaScript est aujourd’hui l’un des langages de programmation les plus populaires<br />Ses performances en font un environnement d’exécution de premier ordre, dans le navigateur et même sur le serveur<br />Microsoft investit pour faire de JavaScript un langage de premier ordre sur sa plateforme:<br />Performances: IE9, IE10<br />Respect des standards: ECMAScript 5<br />Outils de développement: F12, Dev11<br />Frameworks<br />… et plus encore à venir!<br />
  51. 51. Brendan Eich, CapitolJS : http://www.slideshare.net/BrendanEich/capitol-js<br />
  52. 52. Ressources!<br />Essential JavaScript Patterns<br />AddyOsmani<br />JavaScript Patterns<br />StoyanStefanov<br />Eloquent JavaScript<br />MarijnHaverbeke<br />ECMA-262, Edition 5<br />ECMA International<br />JavaScript: the Good Parts<br />Douglas Crockford<br />

×