La notation JavaScript condensé dans un objet devenu si populaire ! Une traduction de l'article What is JSON?
Classé dans Conventions JavaScript
Recherche par mots-clés
25 résultats trouvés pour la recherche « JSON »
-
Qu'est-ce que JSON en Node.js
0 commentaire
-
Qu'est-ce que le fichier package.json en Node.js
Comment décrire simplement pour un développeur et un programme ce qu'est et fait votre développement ? Une traduction de l'article What is the file package.json?
Classé dans Pour commencer > npm
-
Des sites web Node.js pour débuter en JavaScript serveur avec NodeAtlas
Je vous propose de créer vos propres sites Node.js armés pour un rendu de qualité côté client et avec très peu de JavaScript. Vous pourrez ensuite, petit à petit et à votre rythme, vous plonger dans la partie Back-end JavaScript offerte par Node.js. Tout ceci est possible grâce au module npm (node.js package manager) NodeAtlas.
NodeAtlas est un Framework JavaScript côté serveur orienté Front-end, c'est-à-dire qu'il permet de faire tourner des sites multilingues complets uniquement avec les parties Vue et Route d'activées le reste étant fait par le framework. Bien évidemment, en activant la partie Contrôleur et Modèle vous prendrez la main sur le JavaScript serveur et vous pourrez créer de grands sites de qualités avec tout ce que l'on est en droit d'attendre : compte utilisateur, envoi de message, chat en direct... ou de solides applications web couplées à des Frameworks Javascript Frontaux comme Vue ou même simplement du code maison ! Mais commençons par le commencement.
Sachez que le blog sur lequel vous lisez cet article est fait avec NodeAtlas (obtenir les sources), ce qui lui permet de respecter facilement les standards HTML/CSS et de fournir sans efforts de hautes performances.
NodeAtlas est designé pour :
- Les débutants en JavaScript qui souhaitent se mettre au Node.js rapidement.
- Les experts Front-end, en leur permettant de créer des sites web ou des maquettes HTML de qualité.
- Les experts en développement web et/ou JavaScript en leur permettant de créer des sites web et applications JavaScript à hautes performances serveurs.
-
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 !
-
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 :
- Les débutants en JavaScript qui souhaitent se mettre au Node.js rapidement.
- Les experts Front-end, en leur permettant de créer des sites web ou des maquettes HTML de qualité.
- Les experts en développement web et/ou JavaScript en leur permettant de créer des sites web et applications JavaScript à hautes performances serveurs.
-
Comment faire du routage strict avec Vue Router et Vue Server Renderer ?
L'URL www.example.com/foo n'est pas la même URL que www.example.com/foo/. Or, si cela n'est pas gênant dans une application monopage (plus loin SPA pour « Single Page Application »), cela devient critique pour de l'optimisation de moteur de recherche (plus loin SEO pour « Search Engine Optimization ») dès lors que le contenu est généré côté serveur.
Côté serveur, les routeurs comme celui d'Express possèdent un mode strict pour que l'adresse /foo ne soit pas la même que l'adresse /foo/. Mais qu'en est t-il de Vue Router ? Et surtout, comment faire concorder le routage client et le routage serveur pour que l'hydratation (la prise en main côté client d'un rendu côté serveur) concorde ?
Je vous le donne en mille : de base, là où Express en mode strict vous renverra une page 200 pour /foo/ et une page 404 pour /foo, Vue Router lui, en mode strict, vous renverra exactement l'inverse !
Comment dans ce cas utiliser Vue Router et Vue Server Renderer pour du routage strict dont les moteurs de recherche sont si friand pour une SEO à toute épreuve ? La réponse à la fin !
Cependant, afin que ce billet soit utile également pour ceux n'ayant pas (encore) ce problème et qui souhaitent découvrir par l'exemple comment fonctionne du SSR avec Vue (et de facto, qu'est-ce que c'est réellement), je vais élaborer un code pour vous accompagner dans cette compréhension, pas à pas. Seulement ensuite nous mettrons en évidence notre problème avant de le résoudre.
-
Les types en JavaScript : pour tout savoir !
Mais le JavaScript n'est pas typé ? Mais si, il y en a 13 ! Ah non, il y en 7... Bah il me semble qu'il y a Object, Function, Array, Math, String, Number, Boolean. Et tu fais quoi de RegExp ? Attends, Function c'est pas un type, c'est un sous type mais Null c'est un type... ? Ho là là...
Si vous faites du jQuery à vos heures ou même pas mal de JavaScript sur vos sites web, il est temps d'apprendre tout ce qu'il y a à savoir sur le typage implicite de JavaScript, car oui : contrairement à ce que certain vous ont dit, JavaScript manipule des éléments typés, on peut même dire que le JavaScript est faiblement typé et dynamiquement typé si vous voulez tout savoir. Les fonctions (et les instances) Object, Function, Array, Date, String, Number, Boolean, RegExp, Error ou encore les objets globaux, Math et JSON : tous sont d'un seul et même type, le type Object. Pourtant String, Number et Boolean sont eux-mêmes un type à par entière en plus des deux petits spéciaux les type Null et Undefined.
Si vous deviez retenir quelques trucs rapidement à propos du JavaScript et des types ça serait que :
- Le JavaScript n'a que 6 types : Object, Number, String, Boolean, Null et Undefined.
- À part le type Object : les 5 autres types sont dit des types primitifs.
- Les types Null et Undefined sont des types spéciaux.
- La Function n'est qu'un type Object qui peut être exécuté et instancié avec « new ».
- Array, Date et RegExp sont des types Object instanciables (Function).
- Math et JSON sont simplement un type Object (ne s'instancie pas avec « new »).
- Bien que Number, String et Boolean soient des types primitifs, il existe un équivalent de type Object instanciable (Function) pour chacun d'eux (à ne pas confondre).
Les 6 types en JavaScript Je vais dans un premier temps vous proposer la traduction d'un article de Dmitry Baranovskiy —développeur JavaScript expérimenté— qui explique très bien les types en JavaScript. Je lèverai le doute sur le fameux sixième type (Null ou Function). Et je vous fournirai des lignes de code test pour mettre en évidence ce qui a été expliqué.
Dans cet article les propos entre [ ... ] sont les miens ainsi que ceux qui ne sont pas entre « ... ».
Pour finir, bien que l'auteur vous encourage à lire les spécifications officielles (pour les initiés), je vous encourage pour ma part à lire JavaScript Eloquent (disponible en français ici).
-
Modules JavaScript natifs et isomorphisme avec import, export et require
Si vous êtes développeur web, vous devez savoir que pour que l'utilisateur final puisse afficher une page web sur son navigateur via le protocole HTTP, il faut deux choses : un code client, et un code serveur :
Dans son plus simple appareil, le code serveur est délivré par un serveur web comme Apache, nginx ou encore IIS à partir d'un fichier. Dans de nombreux cas, ce n'est pas à partir d'un fichier HTML, mais à partir du résultat créé en analysant du code serveur dans des fichiers PHP, .NET, Python, Ruby, etc. qu'est généré le rendu HTML.
Côté client, une fois la page reçue, le HTML sert de base au navigateur pour construire un DOM qui permettra d'afficher le site web. C'est alors le code JavaScript appelé par la page qui permettra de changer le DOM et donc, de faire des interactions à l'écran.
Le développeur à donc deux travaux, développer un code qui fonctionne côté serveur et développer un autre code qui fonctionne côté client (le serveur web étant là passerelle entre client / serveur), d'où la séparation connu des rôles de développeur frontend (partie cliente) et développeur backend (partie serveur).
Imaginez que l'on puisse, à partir d'exactement le même code, produire du code côté serveur et côté client ! C'est ce que l'on appelle l'isomorphisme. Un code isomorphique est un code qui peut-être exécuté par le serveur et par le client.
Nous allons donc utiliser le sujet de l'isomorphisme comme fil conducteur dans cet article pour traiter :
- de l'import / export de Modules ECMAScript en version 6,
- du JavaScript côté serveur avec Node.js,
- des équivalences ECMAScript version 5 pour le require / export,
- de l'isomorphisme exploitable pour faire du web avec Vanilla JS et Node.js.
-
SQL brut VS constructeur de requête VS mappage d'objet-relationnel en Node.js avec JavaScript
Dans ce billet de blog, nous allons comparer trois grandes différentes manières d'interroger une base de données relationnelle avec le langage de programmation JavaScript depuis Node.js souvent croisés sous les termes de “Raw SQL”, “Query Builder” et “ORM”.
Les bases de données sont au cœur du stockage de l'état de presque toutes les applications web. C'est pourquoi il est essentiel de bien prendre en charge les interactions avec la base de données pour garantir le bon fonctionnement d'une application JavaScript. Une façon d'interagir avec bon nombre de bases de données relationnelles est d'utiliser le SQL (“Structured Query Language”). Le SQL permet de changer très facilement de système de base de données ou de client utilisant cette base de données. Avec votre client, vous pouvez ensuite effectuer les interactions CRUD typiques : C (“Create”) pour Créer, R (“Read”) pour lire, U (“Update”) pour mettre à jour et D (“Delete”) pour supprimer des données.
Après avoir lu cet article, vous en saurez plus sur les différences entre du SQL brut (“Raw SQL”), un constructeur de requêtes (“Query Builder”) et un mappage d'objet-relationnel (“ORM”). Vous saurez également comment utiliser chacun d'entre eux en JavaScript par l'exemple.
Bien que cela ne soit pas nécessaire à la lecture et la compréhension de cet article, tout le code de ce billet est testable après installation du projet associé qui se trouve dans ce dépôt GitHub. Vous devez juste installer un serveur MySQL et Node.js sur votre environnement local. Nous allons faire la supposition que vous êtes déjà familier avec les bases du SQL et du JavaScript en ce qui concerne la compréhension des exemples. Sinon les conclusions, elles, restent abordables pour les non développeurs également (je suppose, je suis mal placer pour le certifier du coup).
Pour initialiser la base de donnée et les tables que nous allons utiliser dans ce billet, vous pouvez utiliser le script database-users-roles.js avec la commande node database-users-roles.js depuis le projet GitHub.
-
Vanilla JS - Documentation en français
Vanilla JS
Vanilla JS est un framework rapide, léger et multi-plateforme pour créer d'incroyables et puissantes applications JavaScript
-
Qu'est-ce que npm en Node.js
Présentation du gestionnaire de dépôt et d'installation de projet de Node.js. Une traduction de l'article What is npm?
Classé dans Pour commencer > npm
-
Utilisation de ECMAScript 5 en Node.js
Petite liste de fonctionnalités implémentées depuis ECMAScript 5 que vous ne connaissez peut-être pas ! Une traduction de l'article Using ECMA5 in Node.js
Classé dans Conventions JavaScript
-
É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).
-
Conserver un affichage Desktop sur mobile avec une version Responsive Web Design
Depuis que le Responsive Web Design a commencé son invasion, beaucoup de site ne possède plus qu'une unique version qui gère :
- un affichage complet pour écrans larges de type écran d'ordinateur (Desktop) et
- un affichage léger et partiellement complet pour les écrans de type mobiles/tablettes.
Cela revient souvent à inhiber des fonctionnements jugés peu utiles par les développeurs ou ergonomiquement trop instables pour être présentés sur les petits appareils et empêche alors :
- d'afficher la version Desktop sur les mobiles/tablettes ou
- d'afficher la version Desktop dans une fenêtre de navigateur rétréci.
Je vous propose, à travers des exemples CSS-Driven, de vous expliquer comment gérer deux versions d'affichage de vos pages avec comme toujours une seule structure HTML sémantique.
-
Quelles conventions CSS utiliser pour des structures HTML réutilisable ?
Je viens de (re)terminer la lecture du Guide CSS Fr et j'ai eu envie d'apporter quelques modifications et ajouts à ces très bons conseils. Cet article va donc en quelque sorte constituer mes conventions en matière de création et maintenance HTML et CSS. Elles sont donc identiques à ce qui est écrit sur Guide CSS Fr à cet article prêt !
Affreux sélecteur... http://www.puce-et-media.com/ N'ayant rien à ajouter aux parties autres que « 4. Convention de nommage », je passe directement à mes propres conventions de nommage en vous sensibilisant à l'anatomie d'une page HTML.
Je finirai néanmoins par pointer du doigt une erreur, sinon la seule, en ce qui concerne la totale inutilité du préfixe .js- destiné à séparer le visuel du fonctionnel.
Note : Tous les exemples d'inclusion de fragment HTML sont tirés du framework Node.js NodeAtlas mais c'est juste à titre illustratif, c'est la même chose avec vos frameworks préférés.
-
Comment accéder aux informations sur les paquets de modules en Node.js
Comment obtenir le détail d'un paquet npm par l'exemple. Une traduction de l'article How to access module package info
Classé dans Pour commencer > npm
-
Qu'est-ce que require en Node.js
À quoi sert require, comment fonctionne t-il et comment l'utiliser ? Une traduction de l'article What is require?
Classé dans Pour commencer
-
Une alternative au Switch, c'est possible en JavaScript
Vous connaissez tous l'instruction switch en JavaScript ; c'est une bonne alternative à la suite d'instruction if, else if, else if, else if... else dans le cas de choix multiples. Et si vous vous en débarrassiez pour quelque chose de plus
simpleconcis ?
-
Node.js : le guide pour convaincre son Boss
On parle souvent de la grande vélocité de Node.js et de son brillant avenir. Mais il n'est pas toujours judicieux de l'utiliser. Pour certains cas d'utilisations, c'est le meilleur choix à faire (application web temps réel). Pour d'autres cas, ça le deviendra mais c'est encore un peu tôt (CMS web). Et pour d'autre il ne sera jamais réellement adapté (intelligence artificielle). Voici l'adaptation française d'un article de Felix Geisendörfer, contributeur Node.js. Il nous explique de manière pragmatique comment raisonnablement et rationnellement il est possible d'utiliser Node.js pour son business.
« Maintenant que vous êtes au point sur l'utilisation de Node.js, il est temps de convaincre votre boss. Enfin peut-être. J'ai eu l'occasion de conseiller différente entreprise sur la question : Node.js est la bonne technologie ? Et parfois, la réponse est tout simplement non.
Ce guide est ma collection opiniâtre des conseils pour ceux d'entre vous qui veulent savoir si Node.js fait sens pour leur entreprise, et si oui, comment convaincre la direction.
-
Séparations des rôles du HTML / CSS / JavaScript et mise en application
Cet article fait office de conventions d'architecture d'un site web orienté composant pour la partie cliente, peu importe la technologie d'implémentation finale, de manière à ce que le code soit valide, performant et maintenable par des développeurs front-end, des développeurs back-end ainsi que des pousseurs de contenu. Ces techniques étant en constantes évolution, et les problématiques évoluant au fur et à mesure de mes itérations créatives, cet article est voué à se compléter et changer.
Contenu, apparence et comportement
-
Qu'est-ce que try-catch en Node.js
Quel est la place de try-catch dans la manière de gérer les erreurs en Node.js ? Une traduction de l'article What is try-catch?
Classé dans Erreurs
-
Le module de console intégré en Node.js
Pourquoi existe t'il un module console en Node.js puisqu'il existe des équivalences dans le module process ? Une traduction de l'article The built-in console module
Classé dans Pour commencer
-
Gérer sa cascade de grille et de composant avec Bootstrap
Afin d'apporter un cadre à l'équipe et parce que créer nos propres UI Kit n'est pas à l'ordre du jour, nous avons pris le partie d'utiliser Bootstrap 3 non sans chagrin.
L'idée finale derrière cette utilisation est de pouvoir créer facilement des composants et de pouvoir les déplacer n'importe ou dans un layout ou dans un composant lui-même.
Après avoir défendu l'idée que je n'avais pas besoin d'un quelconque Framework pour réaliser cela, je me suis atteler à Bootstrap.
Les remarques n'ont pas tardées à tomber sur la manière d'intégrer tout cela :
- « Ça ne sert à rien de mettre un “.col-xs-12” ici, ça revient au même de ne rien mettre »,
- « Pourquoi il n'y a pas un seul “.container” pour gérer toute la page comme dans la source de cette page »,
- « Il ne faut pas mettre les “.container” dans les composants mais à l'extérieur sinon en mettant les composants dans des petites colonnes on va dépasser la largeur de la grille. Regarde la source de cette page »,
- « T'as pas besoin de “.container” pour utiliser des “.row” », etc.
Le constat est clair, l'utilisation de Bootstrap pour réaliser des pages en imbriquant des composants est une chose, mais le faire correctement en est une autre !
Suivez le guide pour comprendre les guidelines que doivent suivre tout composant pour être « Drag and Droppable » n'importe où !
-
Installer et utiliser Node.js sous Windows
Je vous propose à travers cet article de découvrir Node.js pour le système d'exploitation Windows 7, 8 et 10. Node.js est multi-plateforme et s'exécute tout aussi bien sous Unix que sous Mac. Mais QUID de Windows ? Vous allez voir que c'est assez trivial même si certains modules dépendent de quelques logiciels externes pour compiler (python27, msvc2013). Assez rapidement donc, il vous sera possible de développer des sites web et applications web très interactives et avec une grande vélocité d'exécution le tout avec JavaScript !
-
Est-il si null cet undefined ?
Si vous faites du JavaScript régulièrement —et il est de plus en plus difficile d'y couper si vous êtes développeur web—, vous vous êtes peut-être déjà posé cette question : « Quelle est la différence entre la valeur null et la valeur undefined ? ». Question qu'on ne se pose pas quand on vient d'un autre langage.
Si nous résumons ensemble nous pouvons tomber d'accord sur le fait que :
- Null et Undefined sont tous les deux des types ne possédant qu'une seule valeur ; les constantes respectives null et undefined.
- Ils s'utilisent tous les deux pour indiquer « l'absence ».
- Ils sont tous les deux évalués à false dans un contexte booléen (ex. : dans une structure de contrôle conditionnelle if, avec l'opérateur binaire d'égalité a == b, avec l'opérateur ternaire conditionnel a ? b : c, etc.).
En gros, ils servent donc à la même chose non ? Cette réponse ne me convient pas car, même s'il est vrai qu'à chaque première vu les comportements JavaScript semblent « loufoque », l'expérience m'a toujours montré que « c'était moi » qui n'avait pas compris correctement le JavaScript. Si les deux types existes, il y a probablement une distinction. Voici ce qui en est concrètement dit :
La valeur undefined appartient au type primitif Undefined et est utilisée quand aucune valeur typée n'a été assignée à une variable.
La valeur null appartient au type primitif Null et représente l'absence de valeur, la non-existence d'une référence dans une variable.
La distinction est plus clair ainsi non ? Pas vraiment... On va retrousser nos manches et regarder un peu ce qu'on peut éclaircir. Si vous n'avez pas le temps de suivre l'explication exhaustive (et intéressante je l'espère) qui va suivre, je vous laisse filer à la conclusion qui répond à cette question. Si par contre vous êtes curieux et/ou avez le temps de comprendre les différences, c'est juste en dessous !
