Archives de
Catégorie : JavaScript

NodeJS fusionne avec iojs

NodeJS fusionne avec iojs

Et voilà, c’est fait : NodeJS fusionne avec iojs. L’annonce faite par Mikeal Rogers le 8 mai 2015 suivie d’un vote du Comité Technique 5 jours plus tard a permis de confirmer la rumeur qui courait depuis déjà un moment. Retour sur un événement historique pour notre cher internet et sur ses implications dans un futur proche et lointain.

NodeJS, kézako?

Pour les non-initiés, revenons-en aux définitions de base.

Node.js est ce qui permet, depuis 2009 / 2010, d’ utiliser JavaScript aussi hors du navigateur, comme des langages plus classiques, en lui donnant accès notamment à la manipulation de fichiers et aux interactions avec le réseau. Du fait de ses performances, et ses caractéristiques, il est surtout utilisé pour coder des serveurs web minimalistes, rapides, capables de répondre à de nombreuses requêtes en parallèle ou de faire du web temps-réel (chats / jeux multijoueurs…). Son développement et sa maintenance sont effectués par l’entreprise Joyent. Node.js est progressivement devenu populaire et est utilisé par Groupon, SAP, LinkedIn,Microsoft, Yahoo!, Walmart, Rakuten et PayPal entre autres. Nous l’utilisons également beaucoup chez Toxicode pour nos jeux multijoueurs et nos outils autour de l’apprentissage de la programmation.

Pourquoi iojs a changé la donne?

Il y quelque mois de cela, la v0.1 d’un  nouveau fork de Node, baptisé io.js, voyait le jour. Quand io.js a été lancé en janvier 2015, nombreux y ont vu une sorte de « Node amélioré », un fork plus agressif dans le développement et qui permettait d’implémenter des fonctions qui manquaient dans les v0.11 et 0.12 de NodeJS. (Pour les débutants comme moi, un fork est un projet ou logiciel issu d’une scission avec un projet initial unique, et qui partage avec lui une part de son code source).

Mais alors que Node.js avait déjà été forké auparavant, avec l’avènement de io.js, une vraie scission s’est produite : plusieurs contributeurs majeurs ont quitté Node.js et ont commencé à faire des pulls requests pour io.js. L’année 2014 avait déjà vu une diminution des suiveurs de Node.js, mais en 2015, la division s’est faite plus profonde également pour des raisons de gouvernance. En effet, la communauté des développeurs autour de Node.js s’agrandissant, certains des contributeurs trouvait qu’il était difficile de s’intégrer au projet et reprochaient aux chefs de projets un certain manque de transparence. Ils n’approuvaient pas de voir Node.js aux mains d’une compagnie privée, et d’avoir à passer du temps à faire accepter aux chefs de projets chacune des améliorations qu’ils voulaient apporter au code.

Au contraire, io.js a lancé dès janvier 2015 des cycles d’amélioration rapides, en suivant un modèle de gouvernance ouverte qui a attiré de nombreux contributeurs.

Naissance de la Node Foundation

Voyant l’évolution de la situation, Joyent a réagi rapidement, annonçant en février 2015 son intention de créer la Node Foundation, gérée par un Comité Technique, une initiative soutenue par IBM, Paypal, Microsoft et la Fondation Linux et qui permettrait de résoudre les problèmes de gouvernance qui s’étaient posés. Selon ioJS, les deux projets convergent donc sous l’appellation Fondation Node, « sous la tutelle conjointe des équipes techniques de Node.js et io.js ». Par ailleurs, la Node Foundation utilise le nom de Node.js et s’appuie sur un référentiel io.js

L’objectif principal est de réunifier la communauté divisée autour d’un modèle plus ouvert, transparent et proposant des updates très réguliers.

Souhaitons donc la bienvenue à cette nouvelle fondation  et gardons un oeil sur les prochains développements du projet !

 

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise

Apprendre à coder est un désir croissant chez de nombreuses personnes. Il vous suffit de regarder le succès de la Codeweek, la multiplication des ateliers autour de l’apprentissage de la programmation ou la volonté politique de l’instaurer à l’école pour mesurer cet engouement.

Chez Toxicode, notre ambition est de proposer des outils pour favoriser cet apprentissage et casser les barrières psychologiques que l’on peut avoir avant de commencer à apprendre à coder. C’est dans cet objectif que nous avons lancé Silent Teacher, un petit outil ludique qui permet de se familiariser avec le code informatique.

Mercredi 14 janvier, nous avons été, avec Pierre Lancien, animer deux ateliers pour apprendre à coder à la Cantine Numérique de Rennes. Nous avons fait le choix de faire deux sessions sur deux plages horaires différentes et nous avons eu deux publics totalement différents !

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise
Nicolas Leludez avec sa fille jouant aux jeux réalisés lors de la session

La première session était de 14h30 à 18h00, les participants étaient essentiellement des adolescents venus apprendre à coder un petit jeu. Mais nous avons aussi accueilli deux retraités et des adultes attirés par ce monde qu’ils voulaient découvrir. La seconde session était de 18h30 à 22h30, ce sont des adultes de divers horizons qui étaient présents (étudiants, salariés, etc). Malgré les idées reçues, il y avait une part non négligeable de femmes intéressées par l’apprentissage de code.

Notre atelier pour apprendre à coder à la Cantine Numérique Rennaise
Pierre Lancien expliquant comment utiliser l’outil de Toxicode Code n’ Slash

Cet atelier avait pour objectif d’initier chacun à l’apprentissage du code et, pour y parvenir, nous avons développé un outil intitulé « Code n’ Slash ». Pour le moment, il n’est pas encore disponible en ligne mais il le sera dans les prochains mois via notre portail. L’objectif était de permettre à chacun de construire le niveau de son jeu, à sa manière, grâce à des fonctionnalités regroupées dans une documentation. Ainsi, on peut être initié à apprendre à coder tout en s’amusant. Code n’ Slash permet de se familiariser avec la syntaxe de la programmation web, et ce, même sans avoir de notions en programmation ! De nombreux participants à cet atelier n’avaient jamais fait de code de leur vie.

A la fin de l’atelier, chacun pouvait retrouver les niveaux du jeu réalisés par les autres pour les comparer et y jouer. Ce qui est amusant, c’est que chaque personne a utilisé Code n’ Slash à sa manière pour en faire un jeu singulier. J’ai été impressionné par le calme qui régnait pendant la réalisation des niveaux tellement la concentration des « codeurs » était forte !

Je tenais à remercier la Cantine Numérique Rennaise pour nous avoir ouvert ses portes et Nicolas Ledez pour son aide précieuse dans l’animation de cet atelier d’apprentissage du code.

Plus d’informations sur le site de la ville de Rennes : http://metropole.rennes.fr/actualites/les-themes/loisirs/savoir-coder-l-autonomie-dans-un-monde-connecte/

HTML 5 et sa balise canvas

HTML 5 et sa balise canvas

Avec l’arrivée du HTML5, une nouvelle balise voit le jour : la balise canvas. Outil de dessin puissant, elle permet au développeur de créer des animations ou des jeux, beaucoup plus rapides et modulables qu’avec des balises HTML, directement sur le navigateur, sans plugin.

Mais alors, que permet cette balise ?
Est-elle simple d’utilisation ?
Quelles sont ses forces et ses faiblesses ?
Qui sont ses concurrents ?
Plein de questions auxquelles nous allons essayer de répondre.

Que permet-elle ?

Faire des animations, des bannières, des applications, des jeux etc… Tout ça sur votre navigateur, sans plugin. Mais plutôt que des mots, des exemples.

Des démos techniques :

Des jeux :


L’utiliser

Même si c’est une balise HTML, tout se passe en Javascript. Il faut donc pour commencer maîtriser un minimum le Javascript.

On commence par initialiser une balise canvas dans son .html.

<canvas id="canvas">
    Message qui s'affichera si la balise n’est pas supportée par le navigateur
</canvas>

Côté Javascript, on va récupérer la balise et la traiter un petit peu.

var canvas  = document.getElementById("canvas");
var context = canvas.getContext("2d");

Et c’est tout. A partir de ce contexte vous allez pouvoir tout faire. Par exemple :

context.drawImage(img, x, y);          //Afficher une image
context.fillStyle = "red";             //Changer la couleur de remplissage
context.fillRect(x, y, width, height); //Dessiner un carré plein (du coup rouge dans notre cas)
//etc...

Comme je ne vais pas vous écrire la documentation pour le canvas :

Hey ne partez pas ! Ce n’est pas parce que je vous donne des liens vers de la doc que je vais vous laisser tomber !

Il y a une fonction Javascript récente qui va nous être très utile pour faire du travail propre en canvas! Si vous avez déjà fait des petits scripts avancés en Javascript, vous avez sûrement déjà rencontré setTimeout et / ou setInterval.
Ce sont deux fonctions de timer en Javascript. Bon, pour elles, rien de nouveau: s’il est possible de faire de l’animation avec celles-ci, ce n’est pas une bonne idée. Vos boucles ne seront pas calculées en fonction du rafraîchissement de l’écran et vous pourrez donc avoir deux boucles qui s’exécutent (donc deux déplacements par exemple) avant un affichage.
En bref, elles ne sont pas faites pour de l’animation !

C’est pourquoi désormais nous avons requestAnimationFrame ! Parfaite pour de l’animation. Pourquoi parfaite ? Pour faire simple, cela va nous permettre de créer une boucle infinie, qui va s’exécuter de façon synchronisée avec le rafraîchissement de l’écran pour votre navigateur.

Mais comment fonctionne requestAnimationFrame ?
En schématisant un peu, vous appelez requestAnimationFrame et lui passez une fonction qui contient le code de votre animation. Quand le navigateur rafraîchira l’écran, il exécutera le code contenu dans la fonction !

Dans cette fonction que va exécuter le navigateur, on va lui passer un nouveau requestAnimationFrame avec notre code. Nous avons ainsi une boucle de calcul qui s’exécute à l’infini pour chaque rafraîchissement de l’écran.

Voici ce que ça donne dans le code :

function run () {
    /* On l’appelle dès le début, après le prochain
    rafraîchissement d’écran, run sera rappelé, et ainsi de suite */
    requestAnimationFrame(run);  

    //Notre code à effectuer pour chaque rafraîchissement d'écran.
}

Si vous voulez aller plus loin sur l’aspect technique, vous pouvez lire cet article.


Autour de canvas

Des tutoriels intéressants :

Il n’existe pas encore d’éditeurs de code spécifiques pour canvas comme flash develop pour flash ou code::block pour le c.
Cependant on commence à trouver pas mal de librairies et de frameworks :

  • Phaser. Un framework de jeu.
  • Box2DJS. Pour faire de la physique.
  • Fabric. Pour créer et manipuler des objets facilement sur le canvas.


Un flash killer ?

On connaît tous les jeux flash, certains sites n’étant même que des bibliothèques de ceux-ci.
Flash est le concurrent direct de notre petite balise canvas.
Et oui, on peut faire la même chose en flash qu’en canvas, alors pourquoi l’un plutôt que l’autre ?

Flash a été lancé en 1996, et continue à être mis à jour. Il a été le sauveteur des animations web. Aucun concurrent pour lui à l’époque, il était la solution.
Forcément, en 18 ans d’existence, Flash possède une énorme communauté, une solution à quasiment tous les problèmes sur 20 forums différents, que ce soit pour l’animation ou de l’actionscript, beaucoup de librairies, des environnements pour programmer.

Canvas a lui, de la documentation… (bon j’exagère un peu).

Oui mais. Parce qu’il y a un mais, et même plusieurs.
Le plus important c’est que Flash n’est pas natif au navigateur. Il appartient à une société, Adobe, or c’est la w3c qui s’occupe de la “normalisation” des services web, pour que tous les navigateurs fassent la même chose.

Et donc ? Tout le monde a Flash player installé sur son ordinateur.
Eh bien plus maintenant, et ce sont de grosses entreprises qui s’en mêlent, comme Google ou Apple. Et c’est tout à leur avantage d’utiliser une norme, plutôt que d’utiliser une technologie qui appartient à quelqu’un et qui en fait ce qu’il veut.

Google vous prévient qu’un site comporte du Flash sur vos mobiles et pourrait ne pas fonctionner. Les nouveaux systèmes Android ne supportent plus Flash. Googlemaps va être désactivé pour Flash.

Apple critique énormément Flash, le tenant responsable de certains crashes de navigateurs. Apple refuse lui aussi Flash sur ses périphériques mobiles.

En conséquence, Adobe arrête les mise à jours de Flash pour mobile.
Il est important de noter aussi que la plupart des logiciels pour Flash sont payants.

Le débat du HTML5 Flash killer est assez récurrent sur la toile et évolue de jour en jour.


Pour conclure

Même si canvas est encore jeune, il semble avoir déjà été adopté par beaucoup de monde, et sollicité par de grosses entreprises, ce qui lui présage un avenir très intéressant. Canvas arrive dans une ère où les navigateurs et le Javascript commencent à être très puissants, il suffit de regarder des technologies comme asm.js émerger, des jeux unity fonctionner avec un simple plugin. Il ne serait plus étonnant de voir le prochain gros mmorpg/moba tourner sur navigateur.

Les navigateurs web entrent dans une nouvelle ère. Canvas en fait partie. Seul l’avenir nous dira comment cela évoluera.

Google Analytics pour les jeux JavaScript

Google Analytics pour les jeux JavaScript

Lorsque l’on crée son jeu HTML5, on ajoute souvent le script de Google Analytics sur sa page web, afin de savoir combien de personnes jouent à notre jeu, et d’autres infos utiles comme leurs pays, leurs langues et leurs navigateurs. Mais si on utilise l’API Google Analytics, on peut faire bien plus que ça.

Vous aussi, devenez de véritables big brothers grâce à cet article qui vous expliquera toutes les ficelles de l’espionnage de vos joueurs.

toxicode_blog01

Que pouvez-vous enregistrer ?

Virtuellement tout ce pour quoi vous pouvez donner une valeur sous forme de chaîne de caractères à votre utilisateur. Par exemple : le niveau actuel, le nombre de Game Over, le nombre de clics, en combien de temps il passe sur le tutoriel, le niveau de difficulté choisie, est-ce qu’il a désactivé le son…

Cependant, gardez le tout le plus simple possible. Google Analytics ne vient pas remplacer votre base de données, et il n’est pas intéressant de mettre par exemple l’ensemble de l’inventaire dans une variable que vous sauvegarderez. En faisant ça, vous perdrez la possibilité de trier via les valeurs comme vous pourriez le faire avec des valeurs simples.

Il est également possible d’enregistrer des évènements (le joueur bat un boss, finit une partie etc.). Les fonctionnalités du site Google Analytics vous permettront ensuite de visualiser la fréquence des évènements sous forme de statistiques. Vous pourrez ainsi observer si l’ajout d’un nouveau boss dans le jeu le jeudi 30 février augmente le nombre de Game Over, ou autre…

Enfin, vous pouvez segmenter vos joueurs en leur donnant des tags particuliers. Typiquement, vous pouvez ainsi dire à Google que le visiteur a payé son abonnement, a déjà acheté un contenu In-Game, que c’est un nouveau joueur. Ou alors que c’est un joueur qui n’est pas venu depuis plus d’un mois.

Grâce à ces segmentations, vous pourrez ensuite trier les joueurs sur l’interface de Google Analytics. Vous pourrez ainsi voir l’effet de l’ajout de votre nouveau boss sur les nouveaux venus VS sur les joueurs vétérans.

Tout ceci vous permettra de rendre votre jeu plus fun, plus addictif, ou même plus rentable selon vos aspirations personnelles.

toxicode_blog02a

Rentrons dans la technique

Avant toute choses, il faut savoir qu’il existe deux versions de l’API Google Analytics : ga.js et analytics.js. La seconde (plus récente) sera utilisée dans cet article.

Elle permet entre autre de déclarer des évènements et variables à la volée (il fallait auparavant les déclarer depuis l’interface web), et se charge de manière asynchrone.

Voici un exemple du script à inclure dans la page.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

La première partie très condensée est un peu de magie vaudou made in Google, qui permet de déclarer la fonction ga, et de commencer à charger le script de Google Analytics. Une fois le script chargé, il remplace ga, tout en lançant la série de méthodes que l’on aurait pu appeler entre temps. De cette façon, il n’y a pas besoin de faire de callback une fois le fichier chargé, tout est transparent.

Ensuite, la première ligne du deuxième bloc initialise l’analytics avec votre compte utilisateur (il faut mettre son identifiant à la place du UA-XXXX-Y qui n’est qu’un placeholder). Le troisième paramètre, ‘auto’, se réfère au paramètres que vous pouvez donner à votre Tracker Analytics.

Par exemple, vous pouvez interdire d’envoyer des données si le domaine n’est pas le bon (pour empêcher d’envoyer des données sur votre serveur de développement par exemple). Plus d’infos sur les possibilités ici. Mais sachez que vous pouvez par exemple y autoriser les envois de données depuis localhost, si vous souhaitez tester le fonctionnement de Google Analytics.

La deuxième ligne du second bloc envoie une page vue. C’est par défaut le seul comportement de Google Analytics. Elle peut également prendre un troisième paramètre, qui configure les propriétés de la page vue.

Vous pouvez l’utiliser par exemple pour overrider l’url que vous envoyez, afin de savoir si le joueur est dans le menu de votre jeu, ou dans les options, ou sur l’inventaire…. Pensez à rappeler cette commande à chaque fois que vous voudrez envoyer une valeur de pageview.

Envoyer des events

Pour envoyer des events, il suffit d’utiliser la méthode send :

ga('send', 'event', 'playerGotItem', 'diamondSword', 5);

Le premier paramètre, « send« , est commun avec la méthode pour envoyer une pageview. C’est en réalité le nom de la méthode commune à tout envoie de donnée sur votre Tracker Analytics.

Le second paramètre, « event« , permet de dire que vous envoyez un évènement, par opposition à une pageview par exemple.

Le troisième paramètre, « playerGotItem » ici, est le nom de la catégorie d’évènement. Dans le cas d’un jeu, considérez le comme le nom de l’event. Sentez vous libre de le remplacer par ce que bon vous semble.

Le quatrième paramètre est normalement le nom de l’event. Dans le cadre d’un jeu, il est plus intéressant de le considérer comme une valeur. Par exemple, je dis ici que le joueur a obtenu l’épée en diamant. Ce paramètre est optionnel.

Enfin, le dernier paramètre est normalement la valeur numérique de l’évènement. Utilisez la (ou non, elle est optionnelle), pour stocker des informations complémentaires. Par exemple, lors d’un Game Over, vous pouvez y stocker le niveau actuel du joueur. L’intérêt est que cette valeur étant numérique, vous pouvez utilisez Google Analytics pour faire des graphs l’utilisant.

toxicode_blog02b

Segmentez vos utilisateurs avec les dimensions

Pour segmenter vos utilisateurs (premium / non premiums par exemple), il est d’usage d’utiliser les dimensions. Dans notre cas, ça peut être premium, non-premium, beginner-user, advanced-user…

Vous devez définir pour chaque dimension un index entre 1 et 20 (entre 1 et 200 si vous êtes un utilisateur Google Analytics payant). Vous pouvez ensuite déclarer votre dimension en utilisant :

ga('set', 'dimension5', 'premium-user);

Dans cet exemple, vous dites que l’utilisateur est un utilisateur premium, ce qui le place dans la dimension numéro 5.

Vous pourrez ensuite trier vos utilisateur dans l’interface Google Analytics en fonction de ces différents critères.

C’est tout pour aujourd’hui. N’hésitez pas à poster vos astuces, questions, corrections en commentaire.

Illustrations par Lou Pine (www.loupine.fr)

« Boot to Gecko » et cap sur l’HTML5

« Boot to Gecko » et cap sur l’HTML5

Chez Toxicode, nous faisons des paris technologiques et l’un d’eux consiste à miser sur un langage de programmation appelé le JavaScript.

Je ne suis pas développeur donc je ne m’aventurerai pas sur un terrain technique dont je ne maîtrise pas les tenants et aboutissants.

Cependant, nous essaierons de parler de temps en temps ici de la mise en avant du JavaScript car nous estimons que c’est un langage qui est prometteur.

On parlera également de l’HTML5 puisque ce sont des notions étroitement liées. D’un côté, l’HTML5 a un rôle d’affichage et de l’autre côté, le JavaScript a un rôle de pilotage. Dans le langage courant (c’est à dire pour les non-techniques comme moi), on utilise souvent le terme HTML5 pour désigner les nouvelles technologies du web qui englobent le JavaScript, le CSS3… D’ailleurs, l’utilisation du CSS3 combiné au JavaScript est un excellent concurrent au Flash avec un avantage non négligeable qui est d’être compatible sur de nombreux supports.

Cette précision était importante pour mieux comprendre le sujet de ce billet de blog. Les systèmes d’exploitation des Smartphones les plus populaires sont iOS (Apple), Android (Google), BlackBerry OS (RIM) ou encore Windows mobile (Microsoft). Il y a un nouvel acteur qui aimerait percer dans ce domaine et qui est Mozilla. Il s’agit de l’entreprise qui développe le navigateur web Firefox. En restant dans cette lignée, Mozilla est en train de développer un système d’exploitation, baptisé “Boot to Gecko”, dont toutes les fonctionnalités (du SMS aux applications) seront en HTML5.

Comme je l’ai dit précédemment, l’HTML5 est employé pour désigner les nouvelles technologies du web et donc Mozilla compte bien utiliser son expérience dans ce domaine pour réaliser son système d’exploitation. L’expérience de Mozilla est essentiellement présente dans son navigateur Firefox puisque le rôle d’un navigateur web est justement d’interpréter ces technologies.

L’objectif de ce système d’exploitation est d’être orienté web mais on pourra bien évidemment l’utiliser sans être connecté à la toile. La position de Mozilla se démarque des autres systèmes d’exploitation précédemment cités en adoptant un standard du web pour concevoir Boot to Gecko. Un “market place” est disponible pour les développeurs qui aimeraient proposer leurs applications à sa sortie.

Les avantages d’un tel système sont de permettre la création d’applications facilement pour les développeurs, mais également de proposer des téléphones peu onéreux.

C’est un exemple parmi tant d’autres illustrant l’intérêt qui est porté au JavaScript en ce moment et nous ne manquerons pas d’en présenter d’autres à l’avenir sur notre blog.