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.
3. Agenda Brève histoire de JavaScript JavaScript dans IE JavaScript: le langage ECMAScript5 Frameworks& librairies JavaScript côté serveur Node.JS & Windows Azure
5. Brève histoire de JavaScript Netscape & Brendan Eich Mocha, LiveScript, JavaScript Microsoft JScript: IE3, 1996 Même langage, nom différent ECMAScriptPremière édition: Juin 1997 AJAX XMLHTTP : IE5, 1999 JSON "Découvert" par Crockford en 2001-2002 jQuery& John Resig: 2006 Les temps modernes?
6. Le chemin parcouru… <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img1978','','bar_nav_on_01.gif',1)"> <imgname="img1978" border="0" src="bar_nav_no_01.gif" width="24" height="88"> </a> ... <script language="JavaScript"> functionMM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> Depuis le JavaScript généré par DreamWeaver… Jusqu’aux applications modernes les plus complexes: Office Web Apps, Bing Maps, Gmail (443K LOC), etc.
7. JavaScript, l’Assembleur du Web? Scott Hanselman : JavaScript, l'Assembleur du Web? JavaScript est universellement déployé Il est rapide, et devient de plus en plus rapide JavaScript est le langage "de bas niveau" du Web Vous pouvez le fignoler à la main, ou le générer à partir d'un langage de plus haut niveau (CoffeScript, Script#, etc.)
9. Chakra Chakra est le nouveau moteur JavaScript dans IE9 et + Performances dignes d’un « navigateur moderne » Benchmarks + scénarios « réels » Support JavaScript dernier cri ECMAScript 5
10. Performances La course aux benchmarks E.g. WebKitSunSpider Nécessaire, mais pas suffisant! Il faut optimiser pour la « vraie vie »
12. « JavaScript & Metaperformance » Présentation de Douglas Crockford à Velocity2011 Dans le même esprit que MS Research, Douglas Crockforda utilisé sa propre application JSLint pour comparer les interpréteurs
19. JavaScript !== C# Règles de portée (scoping) Utilisation de Patterns type Module pour éviter de polluer la portée globale « traction » des variables et fonctions (hoisting) Les valeurs « presque fausses » (false-y values) Opérateurs de comparaison Déclaration des tableaux & objets Utilisation du for … in (indice: pas comme en C#) Utilisation des Closures …
20. scoping 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 Awful Part
21. scoping // 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
31. for … in 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; 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 }}
32. closures /* “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
37. Les apports d’ECMAScript 5 Énormément de « petits » changements pour rendre le langage plus cohérent « strict mode » La plus importante nouveauté d’après Crockford Supporté à partir de IE10 Modifications de la syntaxe JSON Nouvelles méthodes: tableaux, dates… Modèle objet amélioré Object.create, Object.keys … Getters & Setters Meta Object API …
38. Strict Mode Activé en ajoutant la chaîne magique: ‘use strict’; Ignorée par les précédents interpréteurs Périmètre fichier ou fonction (recommandé) Plus de variables globales implicites this n’est plus relié au scope global dans un appel de fonction plus de pollution accidentelle Et bien d’autres mesures de sécurité Recommandation: utiliser Strict Mode par défaut dès aujourd’hui
41. Script# Projet de Nikhil Kothari, aujourd'hui Partner Engineer chez Microsoft: http://projects.nikhilk.net/ScriptSharp Utilisé en interne par Microsoft Office Web Applications / SharePoint Office Web Services Bing : Maps, Mobile Windows Live Script# permet de compiler du C# en JavaScript On gagne la productivité des outils .NET, Visual Studio Particulièrement intéressant sur de grosses applications Focalisé sur la production d’applications JavaScript optimales (plus que sur le portage d’applications .NET)
42. Knockout.JS Projet de Steve Sanderdon, PM Web Tools chez Microsoft http://knockoutjs.com/ Permet d’utiliser le pattern MVVM pour développer des interfaces utilisateur HTML / JavaScript Implémente le pattern Observable Bindingbi-directionnel Fournit un système de templating permettant de générer l’interface à partir du ViewModel Exemples: http://knockoutjs.com/examples/
43. RxJS Projet mené par l'équipe Rx chez Microsoft http://msdn.microsoft.com/en-us/data/gg577609 Framework d’Event Processing, existe aussi pour .NET Particulièrement adapté à la nature asynchrone de JavaScript Basé sur deux notions principales: Observable Sequences Observers Sources de Séquences : Timers, DOM, AJAX, … ou custom Projections : .Select() Composition: .Throttle(), .DistinctUntilChanged(), …
46. Node.JS Node.JS est développé par Ryan Dahl chez Joyent C’est un framework permettant de développer des services haute performances sur un modèle asynchrone 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 Semblable dans le principe à l’Async CTP JavaScript choisi car particulièrement adapté au développement asynchrone grâce à ses forts aspects fonctionnels Le framework intègre le protocole HTTP en standard ainsi qu’une librairie système entièrement asynchrone
47. Hello Node varhttp = require('http'), mysql= (new (require('mysql').Client)({user: 'root'})); mysql.connect(); mysql.query('use castle;'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/json'}); mysql.query('select * from dragons', function (e, d) { if (e) { res.end('ERROR'); } else { res.end(JSON.stringify(d)); } }); }).listen(8124, '127.0.0.1'); console.log('Server running at http://127.0.0.1:8124/');
48. Node.JS dans Windows Azure Microsoft aide officiellement Ryan Dahl à porter Node.JS sur Windows Node est constitué d’un seul exécutable, node.exe, donc très simple à inclure dans un WorkerRole
50. Conclusion JavaScript est aujourd’hui l’un des langages de programmation les plus populaires Ses performances en font un environnement d’exécution de premier ordre, dans le navigateur et même sur le serveur Microsoft investit pour faire de JavaScript un langage de premier ordre sur sa plateforme: Performances: IE9, IE10 Respect des standards: ECMAScript 5 Outils de développement: F12, Dev11 Frameworks … et plus encore à venir!
52. Ressources! Essential JavaScript Patterns AddyOsmani JavaScript Patterns StoyanStefanov Eloquent JavaScript MarijnHaverbeke ECMA-262, Edition 5 ECMA International JavaScript: the Good Parts Douglas Crockford
Notas do Editor
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. Microsoft, il faut bien le dire, n'a pas particulièrement mis en avant JavaScript ces dernières années, et a même fourni beaucoup d'outils dans ASP.NET permettant de s'en affranchir en grande partie, ainsi bien entendu que des alternatives comme Silverlight permettant de créer des RIA.Mais cela ne veut pas dire que Microsoft est inactif sur JavaScript, bien au contraire, et cette session a pour but de faire un tour d'horizon de JavaScript chez MS.
Voilà une idée qui circule; ce n'est peut-être pas la meilleure analogie, mais ce sont les points qui l'ont inspiré. L'on pourrait donc dire que JavaScript est devenu en quelque sorte la VM (Machine Virtuelle) pour le Web: c'est l'environnement dans lequel les applications vont s'exécuter. Il y a donc une tendance forte depuis quelques années à en améliorer ses performances, y ajouter des frameworks pour en permettre l'industrialisation, voire même créer des "compilateurs" permettant de passer d'un langage de plus haut niveau vers JavaScript. Enfin, cette nouvelle ubiquité de JavaScript le pousse même à se développer côté serveur.
Microsoft s'est concentré sur l'idée d'améliorer les performances de JavaScript dans le monde réel, plutôt que de se focaliser sur des tests de performances quelque peu théoriques.
c.f. la démo DEV209/TR12 : « Hybrid », IE8 vs. IE9
Avec clubic.com pour le débogueur JavaScript
console.log()var script = document.createElement('script');script.src = 'http://code.jquery.com/jquery-latest.min.js';document.body.appendChild(script);Script tabDebugInsert breakpoint« Format JavaScript »WatchType nameHover over variableStep codeContinue on exceptionCall stacksProfilerAlso DOM calls
Pour les développeurs C#, et même tous les développeurs utilisant des langages "traditionnels" comme C++ ou Java, JavaScript recèle de nombreux écueils. En voici quelques-uns.Au final, l'important est de ne pas se laisser berner par la syntaxe JavaScript, qui ressemble effectivement à la famille "C/C++/Java/C#". Il s'agit en réalité d'un langage très différent.
test262.ecmascript.org ?DEV209 : data & accessorpropertiesIE10 : strict mode
Comment se faciliter la vie dès aujourd'hui quand on veut développer en JavaScript pour viser l'énorme base installée des navigateurs? Les frameworks à la rescousse!Je vais ici m'attarder sur un certain nombre de frameworks auxquels Microsoft participe activement, ou qui sont particulièrement intéressants pour des développeurs .NET.L'on aurait pu également parler de jQuery (un sujet à part entière!) auquel Microsoft participe activement. Ou bien de CoffeeScript.
L'idée de faire tourner JavaScript sur le serveur ne date pas d'hier, et date même des débuts de JavaScript! L'idée générale est la suivante: JavaScript est incontournable sur le "front-end", alors pourquoi ne pas réutiliser les compétences des développeurs pour leur permettre de développer également pour le "back-end"? C'est en quelque sorte le chemin inverse de Microsoft, qui avec Silverlight par exemple permet aux développeurs "back-end" ASP.NET de réutiliser leurs compétences sur le "front-end"...
L'auteur de Node.JS a vu dans le langage une plateforme idéale pour mettre en oeuvre un serveur dédiée aux entrées-sorties hautes performances asynchrones.Quels cas d'usage? Le Web bien sûr, même si l'architecture de Node.JS paraisse un peu extrême par rapport au trafic typiquement servi par un serveur HTTP classique. Mais surtout tous les échanges de messages effectués dans un cadre "temps réel" : serveurs de discussions ("tchat'"), jeux en réseaux, jeux sociaux, traitement de flux de données, diagnostics temps réel, tableaux de bord, etc.
Node.JS est né dans le monde Linux, mais est activement en cours de portage vers Windows, avec le soutien de Microsoft. Il se trouve que Windows dispose en effet d'un mécanisme d'I/O asynchrone natif nommé XXXXX, bien différent des API POSIX, mais qui permettra un portage natif de qualité.L'un des objectifs est bien entendu de pouvoir faire tourner Node.JS facilement sur Windows Azure, afin de bénéficier des apports de l'approche Platform As A Service, étendus au monde Node.JS.