Tous les articles pour 2016

  • Vue + NodeAtlas : de l'art du SSR ou Rendu Côte Serveur avec JavaScript

    Nous allons voir dans cet article comment faire du rendu côté serveur ou SSR (Server-Side Render) avec le framework JavaScript client MVVM (Modèle-Vue-Vue Modèle) Vue couplé au framework JavaScript serveur MVC(2) (Model View Controller) NodeAtlas !

    Alors ce titre parle peut-être aux habitués des architectures clientes MVVM qui ont des difficultés avec le référencement et semble peut-être barbare pour d'autres. Lançons-nous dans une petite explication histoire de rendre cet article intéressant également pour les néophytes : comprenons le problème et trouvons la solution à travers cette page.

    Quel est le problème traité dans cet article ?

    Le problème avec les frameworks MVVM client est qu'ils construisent le site à partir de rien. Fouillez la source du code de la réponse HTTP de la page courante, celle lue par les indexeurs de contenus ou les navigateurs sans JavaScript ; il n'y a rien. Aussi, si je crée une liste d'actions futures pour la roadmap de ma super App, et que je souhaite pouvoir manipuler aisément (ajout et retrait) ses éléments grâce à un coupleur de données vue-modèle ; le revers de la médaille sera que les informations utilisées pour cette construction proviendront de fichiers JavaScript ou morceaux de HTML qui ne veulent rien dire pour les indexeurs où même les validateurs de page. Vos sites sont donc souvent « SEO merdiques » et « W3C bancales ».

    Quelle solution ?

    Le SSR ou Rendu Côté Serveur. Voyons ça au travers de cette page exemple avec Vue et NodeAtlas !


  • Vue.js vs React vs Angular vs les autres MVVM

    Vue.js est un framework JavaScript client progressif permettant de créer, maintenir et évoluer des interfaces utilisateurs en liant les données utilisées entre la Vue et le Model. C'est une alternative sérieuse à React, Angular et les autres frameworks MVVM (Modèle Vue VueModèle).

    Vue.js

    J'ai eut l'occasion d'essayer Vue.js dans sa version 1 et son extrême simplicité et flexibilité m'a séduite. À l’instar de NodeAtlas, sa puissance vient de ses fonctionnalités intégrables de manière évolutives et versatiles ; on peut tout aussi bien utiliser Vue simplement sur le formulaire d'une page ou à plus grande échelle avec des composants et du routage à travers l'architecture d'un site complet.

    Cependant, là où en version 1, Vue paraissait une alternative séduisante à AngularJS (aka Angular 1) ou Knockout, dans sa version 2 il devient de plus une alternative sérieuse à Angular (aka Angular 2), React et les autres frameworks MVVM tant sur le plan des fonctionnalités que des performances.

    Pour faire simple —si vous débarquez dans le monde des framework JavaScript client MVVM et que vous ne savez pas quoi choisir— vous devriez choisir Vue ! Quoi qu'il arrive, il sera un choix pertinent pour les cas d'utilisation que vous en ferrez.

    Nous allons dans cet article :

    1. rapidement exposer pourquoi vous devriez utiliser Vue en lieu et place de Angular ou React dès maintenant et
    2. lire la traduction des explications approfondies à propos des différences entre Vue et les autres frameworks.

  • Éviter le détournement de clic par iFrame de votre site

    J'en vois déjà venir d'assez loin : « les iFrames c'est old school ». Ça me rappel l'époque ou les Frames « c'était old school ». Pour les gars du fond, une iFrame permet d'insérer dans la page courante d'un site le contenu complet d'une autre page. Et si vous ne vous y intéressez plus car vous n'en voyez pas l'intérêt, sachez que d'autres peuvent le voir.

    Effectivement, vous n'êtes pas à l'abri de retrouver une page de votre site dans l'iFrame d'un autre site. À partir de là, pas mal de scénarios sont envisageables ; du moins dérangeant comme la solicitiation de votre serveur à chaque fois que la page du site embarquant votre page est réclamée aux plus génants comme le détournement de clic (clickjacking).


  • Créer et maintenir des maquettes HTML avec NodeAtlas

    NodeAtlas est une application multi-os écrite en Node.js qui va vous permettre de créer, modifier et maintenir tout un ensemble de maquette HTML. Ces maquettes HTML pourront ensuite être validées par le client, et ré-utilisées totalement ou en partie par les développeurs Back-end quelque soit leurs technologies. Ces maquettes HTML pourront également servir de site stand-alone fonctionnant sans serveur ou avec un simple serveur HTTP pour créer des documentations JSDoc ou autre comme pour GitHub par exemple. C'est ce que nous allons voir dans cet article.

    Mais NodeAtlas permet également de faire tourner des sites web complet, performant et rapide tel que le site sur lequel vous être entrain de lire cet article.

    NodeAtlas est designé pour :


  • Version mobile et version desktop : ça n existe pas !

    J'entends tous les jours qu'une « version mobile n'est pas une option », sous entendu que l'on souhaite créer une version de site pour mobile et une version de site pour desktop « en même temps » et derrière la même adresse. J'entends aussi qu'il serait bien de s'occuper d'une « version tablette » pendant qu'on n'y est !

    Pour réaliser cela, quoi de mieux que l'utilisation du Responsive Web Design !

    Jusque là tout va bien me direz-vous ? Pas du tout.... Une « Version Desktop », c'est tactile ? Une « Version Mobile », ça a pas de bande passante ? Et bon sang, c'est quoi une « Version Tablette » ?

    Stop version desktop et mobile !

    Même si dans la théorie tout le monde croit se comprendre —avec des histoires de tailles—, je me sens contraint et forcer de faire du « Gloubi-boulga » quand j'utilise les spécifications imposées proposées par un client ou pire parfois... par un professionnel. Et cela au lieu de faire ce qu'on me demande en premier lieu, du Responsive Web Design.

    La simple évocation de « Mobile vs. Desktop » est une preuve flagrante de l'incompréhension total de la chose. De la même manière que certain pensant utiliser une méthode Agile s'y prennent en réalité à La RACHE ; il est intéressant de s'assurer ici qu'on ne confond pas tout.


  • Coder proprement en JavaScript par l'exemple : upload d'image

    Dans cet article il ne va pas être question d'expliquer l'utilité du point virgule (« semi-colon ») ; ou encore les bienfaits de l'opérateur d'égalité stricte (« strict equality operator ») === mais plutôt de vous démontrer par l'exemple comment produire du code que vous et les autres pourrez relire sans entrer dans les détails si cela n'est pas nécessaire.

    Nous allons tout au long de cet article aborder plusieurs notions comme :

    • La programmation par intentionintentional programming ») ou le fait de rassembler et nommer chaque suite d'instruction dans une fonction pour rendre le code aisé à la relecture.
    • La programmation par fonction de rappelfunction callback ») ou le fait de déléguer à une fonction externe ce qu'il va se passer à la fin d'une suite d'instruction.
    • La programmation par entrée / sortieI/O ») ou le fait que chaque fonction doit clairement définir ce qu'elle attend en entrée (« inputs »), et ce qu'elle renvoit en sortie (« outputs »).
    • La programmation asynchrone ou le fait d'attendre un évènement ou un temps précis sur un tour (« tick ») de la boucle d'évènement (« Event Loop ») avant l'exécution du code.

    C'est parti pour apprendre tout ça à travers un exemple d'upload de fichier.


  • Des Easter Eggs sur vos sites avec le Konami Code JavaScript

    Connaissez-vous ce petit code de triche qu'est le Konami Code ? Ce code à entrer dans les jeux vidéos permet de débloquer des options secrètes. Je vous propose de l'implémenter sur vos sites web en JavaScript avec une petite API maison gérant le clavier et le tactile. Suivez le guide !

    Konami Code

    L'API présenté dans cet article lève un événement JavaScript quand vous entrez la célèbre séquence du Konami Code « Haut Haut Bas Bas Gauche Droite Gauche Droite B A » avec votre clavier. Cela marche également avec votre doigt en glissant « Haut Haut Bas Bas Gauche Droite Gauche Droite » puis en faisant « Tap Tap ».


  • JavaScript et callback par nom de paramètre comme dans AngularJS

    Ce qui m'a interpellé la première fois que j'ai pu m'essayer à AngularJS, c'est la possibilité offerte de sélectionner les services que l'on souhaite en les récupérant par leur nom d'argument, et non par leur position d'argument. Ce concept n'existe pas en JavaScript et pourtant le fait est bien là : function ($scope, $http) ou function ($http, $scope) renvoi les bons contenus de variable en fonction de leurs noms et function (scope, $http) vous dit que scope n'existe pas !

    Accès par nom de paramètre
    Accès par nom de paramètre

    Comment cela est-il possible en JavaScript ? Il est possible de « simuler » un passage par nom d'argument avec un type Object en utilisant ses noms de propriété, mais là, il s'agit bel et bien de différents arguments.

    Voici le petit exercice que je vous propose dans cet article, faire du « Reverse Engineering » sur le mécanisme « caché » permettant aux fonctions de rappel (callback) JavaScript de délivrer leurs arguments par « nom d'argument » en lieu et place du mécanisme natif qui est par « position d'argument ».

    Note : on parle souvent de passage par « nom de paramètre » dans les autres langages. Ici, en réalité, il s'agit plutôt de passage par nom d'argument car cette fonctionnalité est associée aux arguments fournis par la fonction de rappel et non aux paramètres que l'on fourniraient à une fonction. Pour rappel on fournit des arguments en déclarant une fonction, et on passe des paramètres en exécutant une fonction.


  • Utiliser AngularJS en respectant les recommandations W3C et SEO

    AngularJS est un régale pour toute création d'Application Web de petite et moyenne taille. J'entends par là, des ensembles d'interfaces web ou l'utilisateur est sollicité à participer au remplissage de contenu par l'intermédiaire de champs, listes, boutons, etc.

    AngularJS

    Le principe est le suivant : sortir le contenu utile du HTML pour le ranger dans un scope JavaScript afin de le manipuler plus aisément et parsemer le HTML de référence à ce scope de contenu. L'avantage est que le contenu a sa propre vie, et n'est plus figé dans le HTML et surtout toute mise à jour de contenu dans le JavaScript entraîne sa mise à jour dans le HTML, bien pratique.

    Le revers de la médaille est que la source HTML mangée par les moteurs de recherche pour le référencement ne ressemble plus qu'à un ensemble de variables, et les balises et attributs HTML rencontrés font pâlir n'importe quel validateur W3C.

    C'est parti pour un tutoriel vous expliquant comment contenter le W3C pour pouvoir correctement implémenter vos recommandations SEO avec AngularJS.


Lire dans une autre langue