Présentation

Lisant beaucoup d'actualités sur Internet, je me suis intéressé aux flux RSS et ai réalisé un site permettant de constituer ma propre liste de lecture. Ainsi, je me rends sur une page web qui gère tous mes abonnements RSS et me permet de lire de ces sites depuis un endroit unique : plus besoin de s'embêter à ouvrir des tonnes de pages, à subir des pubs, ça diminue la bande passante utilisée et ça tient compte de ce que j'ai déjà lu !

Accès à la démo...

Vous pouvez tester la chose sur un compte démo ou même vous créer un compte si le site vous plaît :)

La technique

La totalité de l'application est réalisée en javascript et PHP : le javascript qui gère la mise en page et les interactions Ajax avec le serveur. C'est le serveur qui télécharge les documents XML, les RSS, depuis les sites externes et qui les analyse avant de les renvoyer à l'application JS.

Tout cela fonctionne bien et m'a fait prendre conscience que je pouvais aller encore plus loin avec une application iOS que je suis en train de faire et une couche serveur qui va pousser encore plus l'analyse. Cette application devrait sortir avant fin mars 2015.

Ayant été mandaté pour réaliser l'équivalent numérique* d'une plaquette commerciale pour un programme immobilier, j'ai pu intégrer quelques briques logicielles intéressantes au sein d'une application qui se trouve être un "simple" site : des pages classiques, un 360°, un diaporama et un panoramique utilisant des cube map. Le tout utilisant uniquement du JS et du CSS3...

Le point un peu embêtant avec cette démo est qu'il faut attendre le chargement la première fois que l'on la regarde : il y a plus de 20 Mo à télécharger pour voir le panoramique, le 360° et les images... Par contre, si on veut la revoir, les données étant stockées dans le cache de Safari sur iPad, l'accès est immédiat.

Accès à la démo...

Afin de savoir ce qu'un élément Canvas peut faire, autant le bombarder d'opérations simples :

• Bresenham : on trace des lignes avec un algo basique qui permettait d'afficher 12 lignes par frame en 50Hz sur un Atari ST...
• Lignes : en utilisant une image bien connue, j'essaye d'afficher le maximum de lignes, prises au hasard, au sein du canvas.
• Colonnes : pareil que précédemment mais avec... des colonnes...

Les deux derniers tests ont été implémentés pour essayer d'imaginer la faisabilité d'un Doom-like dans un Canvas :)

Pour découvrir l'élément Canvas et la façon de l'utiliser, rien de mieux que d'implémenter des effets que je connais bien pour les avoir implémentés en assembleur 68000 il y a 25 ans !

Il m'est arrivé d'avoir besoin d'évaluer des expressions arithmétiques dans du code Javascript, aussi bien pour une calculatrice toute simple que pour un tableur spécifique pour un client ou encore un moteur de génération de L-Systems paramétriques. J'ai donc décidé d'isoler ce code assez simple et de l'isoler dans un module réutilisable. Pour tester cette fonctionnalité, amusez-vous avec la zone de saisie ci-dessous :

Ce module gère bien sûr les 4 opérations de base, l'opérateur module (%), l'élévation à la puissance (grâce à **) et les parenthèses. De plus, il permet au développeur de se brancher sur l'objet d'évaluation pour être notifié en cas d'utilisation de symboles dans l'expression. Ces symboles peuvent être des variables ou des fonctions avec leurs arguments. Voici un exemple d'utilisation illustrant toutes les fonctionnalités :

var Calculator = new Evaluator({
        variable:function(varName)      {
            return ...;     //Renvoie la valeur de la variable *varName* que le programme gère.
        },
        callback:function(funcName, args)       {
            //Exemples d'utilisation
            if (funcName == "sqrt")     return Math.sqrt(args);
            if (funcName == "sin")      return Math.sin(args);
            if (funcName == "cos")      return Math.cos(args);
        }
    });
    //
    var Result = Calculator.eval("34-75*3+(4*8*2-4+6%5*2)-12*(15%7-3*2)+7").result;

Et oui, c'est rapide et simple à utiliser !

Pour info, le parsing / analyse de l'expression se fait de gauche à droite avec une machine à état, c'est plutôt rapide, mais je ne stocke aucun arbre me permettant d'optimiser les évaluation multiples d'une même expression dont les paramètres changeraient. Le code n'est vraiment pas difficile à modifier pour ajouter cette fonctionnalité.

Pour intégrer ce module dans votre code, il suffit simplement d'inclure le script directement dans votre page, qui pèse 1639 octets avant compression et 864 octets en zippé. �a ne devrait pas alourdir vos pages :)