$name$ est un membre de l'équipe Snowpact avec les compétences : $skills$. Vous trouverez sur cette page ses contributions

React Native

Google Cloud

Hubspot

Express.js

Java

JQuery

Gatsby

Murat

Vous l’aurez peut-être remarqué, quand vous lancez un 

 dans votre projet React afin d’obtenir le 

 afin de lister le contenu de votre dossier build, vous vous retrouvez avec quelque chose de ce genre :

 ? Ce sont des fichiers qui permettent de débugger votre code 

Ces fichiers vous servent à pouvoir débugger votre code depuis votre navigateur, mais dans ce tutoriel, nous allons voir comment 

 est une commande qui permet d’analyser votre build.

Installez-le globalement afin d’y avoir accès en tant que commande dans votre terminal :

Une fois installée, exécutez dans votre projet React cette commande :

Votre navigateur va s’ouvrir automatiquement avec une 

 des dépendances et des tailles que ça occupe. C’est pas magnifique ça ? :D

Pour éviter de lancer la commande dans tous les fichiers un à un, vous pouvez également éxécuter :

Vous aurez alors une petite fenêtre en haut qui vous permettra de switcher entre les différents fichiers, ou d’afficher le tout combiné.

À partir de maintenant, c’est assez simple. Il faut que vous vous posez la question de savoir si une dépendance est très lourde :

est-ce qu’il n’y a pas d’alternative plus légère ?

est-ce qu’on peut pas juste écrire un bout de code dans le cas où on l’utilise à 1% ? Exemple 

Prenons la cartographie de notre bundle précédent.

 occupe une grosse partie de mon bundle. 

. Et on remarque qu’à l’intérieur on a les modules :

Maintenant si je regarde comment j’utilise firebase dans mon code, je remarque.

Donc j’importe le module entier. Mais comme mon application react créé avec 

, je peux importer uniquement ce que j’ai besoin :

Je me retrouve donc seulement avec ce que j’ai besoin, et j’ai économisé 

Désactiver la génération des fichiers .map

En production, vous pouvez vous demander si laisser ces fichiers est utile ou non.

En tout cas, si vous souhaitez les enlever, créé un fichier .env à la racine de votre projet avec pour valeur :

Plus vous aurez une application légère, plus votre application chargera vite côté utilisateur, et qui dit rapidité, dit moins de personne qui quitte votre page pendant un chargement^^

React

Les .js.map ça vous dit quelque chose ? On va vous apprendre à explorer les fichiers map pour auditer votre bundle React, afin de réduire sa taille.

Comment réduire son bundle React ?

MJML : le framework qui simplifie la création d’emails responsives

Vous voulez créer des newsletters professionnelles et adaptées à tous les écrans, mais vous ne savez pas comment faire ? Vous en avez marre de vous battre avec le code HTML et les hacks pour rendre vos emails compatibles avec tous les clients de messagerie ? Alors, vous allez adorer MJML, le framework qui simplifie la création d’emails responsives. MJML est un langage de balisage qui vous permet de créer des emails responsives facilement, en utilisant des tags simples et intuitifs. Avec MJML, vous n’avez plus besoin de vous soucier des problèmes de compatibilité, de design ou de performance de vos emails. MJML s’occupe de tout, et vous offre un résultat optimal sur tous les supports. Dans cet article, nous allons vous montrer comment utiliser MJML, ses avantages, ses fonctionnalités, et comment le tester et le déployer facilement. Vous verrez que MJML est un outil puissant et pratique, qui vous fera gagner du temps et de la qualité dans la création de vos emails. 

Qu’est-ce que MJML et pourquoi l’utiliser ?

MJML est un langage basé sur le XML, qui vous permet de créer des emails responsives sans avoir à vous soucier du code HTML et des hacks. MJML utilise des balises sémantiques, qui sont ensuite converties en HTML compatible avec la plupart des clients de messagerie, y compris Outlook. MJML vous fait gagner du temps, de l’énergie et de la qualité dans la conception de vos emails.

MJML a été développé par Mailjet, une entreprise française spécialisée dans l’emailing. MJML est un projet open-source, qui bénéficie d’une large communauté de contributeurs et d’utilisateurs. MJML dispose également d’une documentation complète et de nombreux exemples de templates pour vous inspirer.

MJML repose sur une syntaxe simple et intuitive, qui utilise des balises pour définir les différents éléments de votre email. Par exemple, vous pouvez utiliser les balises suivantes :

 : la balise racine, qui englobe tout le code MJML.

 : la balise qui contient le corps de votre email.

 : la balise qui définit une section de votre email, qui peut contenir une ou plusieurs colonnes.

 : la balise qui définit une colonne de votre email, qui peut contenir différents types de contenu, comme du texte, des images, des boutons, etc.

 : la balise qui permet d’insérer du texte dans votre email, avec des attributs pour modifier la police, la couleur, la taille, etc.

 : la balise qui permet d’insérer une image dans votre email, avec des attributs pour modifier la largeur, la hauteur, le lien, etc.

 : la balise qui permet d’insérer un bouton dans votre email, avec des attributs pour modifier la couleur, le texte, le lien, etc.

 : la balise qui permet d’insérer un séparateur dans votre email, avec des attributs pour modifier la couleur, l’épaisseur, etc.

Vous pouvez trouver la liste complète des balises et des attributs disponibles sur la 

Cela fait beaucoup de code et surtout beaucoup de hack pour un simple écran avec un logo, un texte et un bouton.

Mais c’est bien ce dont on a besoin pour avoir un email compatible avec tous les clients.

Vous voulez juste un code HTML compatible tout client ?

Pour obtenir un code HTML à partir de MJML, vous n’avez qu’à vous rendre sur le 

 et saisir votre code MJML. Vous verrez alors le résultat en HTML et en aperçu visuel.

Vous pouvez également profiter des nombreux 

, qui vous permettent de créer des emails adaptés à vos besoins et à votre secteur d’activité.

Vous voulez intégrer l’outil dans votre flux de développement ?

Par contre si vous souhaitez intégrer juste 

 dans votre processus de développement, il vous suffira alors, dans votre projet de lancer :

Si vous utilisez Visual Studio Code, vous pouvez également installer une extension 

 pour voir en live le rendu de votre fichier.

En rédigeant ce billet, je me suis dit que je ne voulais plus revivre le cauchemar des années 2000 avec Internet Explorer 6. Personnellement, je n’ai plus envie d’apprendre des hacks, ou un langage compliqué comme le VML, pour simplement intégrer un email.

C’est pourquoi je préfère toujours vérifier si un outil (open-source de préférence) existe afin de m’éviter ces problèmes. Et si ça n'existe pas, à nous de peut-être le développer :)

HTML

MJML

MJML, ou l'outil qui vous permettra de coder facilement des mails responsives et compatibles partout (Outlook, Gmail, Apple...)

MJML : le secret des emails responsives réussis

Aujourd’hui, de plus en plus d’applications sont hébergés sur le Cloud. Et ceux qui hébergent sur le cloud utilisent sûrement 

. Les raisons pour laquelle de nombreux utilisateurs migrent vers ces plateformes sont multiples : la multitude de services proposés, la fiabilité, la sécurité…

Et c’est de ça qu’on va discuter aujourd’hui, les services. Vous souhaitez migrer votre application vers 

 afin d’utiliser leurs services cool comme 

. Y a-t-il un moyen pour tester ces services avant de créer toute l’infrastructure chez eux ?

Et bien la réponse à cette question est oui, et ça s’appelle 

, accessible à cette URL, est un framework de tests/mocks open-source pour les applications Cloud. Développé à l’origine par Atlassian, ce n’est pas un service officiel d’Amazon, mais son grand nombre d’utilisateurs et de stars github (presque 30.000 !) font de ce service une référence lorsqu’on parle de AWS à un développeur.

 vous fournira donc, une grande partie des fonctionnalités et APIs présents sur l’environnement réel 

, comme ils le disent dans leurs description :

the focus is primarily on supporting the AWS cloud stack.

Tout d’abord, pas besoin d’avoir une infra 

 de disponible pour l’implémenter. Pas même besoin d’avoir une connexion internet, car tout se passe en local. Et si vous avez une infra de disponible, mais vous avez une grande équipe de développeurs, pas besoin de créer des accès pour tout le monde.

Ensuite, vous pouvez facilement ajouter / supprimer / modifier / casser tout ce que vous voulez là-dedans.

Enfin, pour solidifier votre application, vous pouvez utiliser 

Localstack peut être initialiser via un script au démarrage de l’instance. La documentation à ce sujet est disponible 

Il suffit d’ajouter cette ligne à votre fichier de configuration docker :

volumes: - ./localstack:/docker-entrypoint-initaws.d

Créer un dossier localstack au même niveau que votre fichier 

, et créer un fichier .sh. Ce dossier sera monté en tant que dossier 

 dans cette nouvelle instance. Ainsi, Localstack pourra executera tous les fichiers 

 a besoin des credentials et de la région pour être exécuter correctement. C’est ce qu’on va faire dans ce fichier. De plus, dans notre cas, on utilise le service SQS de Amazon, et on a besoin d’initaliser une première queue.

Démarer votre service docker, puis allez sur 

. Si vous avez une réponse positive de type :

Alors bonne nouvelle, le service a démarré avec succès. Vous pouvez commencer à développer.

Vous pouvez également voir plus en détails quels services sont en cours d’exécution en visitant 

 pour connecter les services AWS. Le lien avec aws sera fait grâce au paramètre 

 qui servira de faire la bascule entre localstack en dev, et le vrai AWS en prod. Pour l’instant on peut juste créer :

À la base, les différents services AWS avaient chacunes leurs propres url:port avec localstack. Aujourd’hui, tous les services sont disponible via la même url : 

Maintenant, nous allons initialiser un objet ‘aws-sdk’, pour SQS dans notre cas :

Et enfin, ajouter un nouveau message dans la queue programmatiquement :

Et voila c’est tout ! On peut maintenant tester notre résultat.

Une fois que vous avez fini de jouer avec 

, et que vous communiquer avec localstack, vous pouvez vous connecter dans le container afin de voir ce qui se passe.

À l’intérieur, vous pouvez éxecuter les commandes aws grâce à l’utilitaire 

Vous pouvez trouver la documentation pour chacune des commandes disponible 

 pour nos tests unitaires. La seule chose à faire pour faire passer nos tests, c’est d’abord d’initialiser le service.

Je vous laisse développer vos propres tests d’intégrations.

Garder à l’esprit, que c’est un service non officiel, qui n’a pas été créé par Amazon. Il se peut que demain Amazon mettent à jour leurs services de façon à casser 

. Avec la communauté derrière, ils mettront à jours le service assez rapidement, mais tenez compte de ça.

Avant de livrer en production, vous serez quand même obligé de vraiment utiliser la connexion avec la réelle instance de aws. Même si 

 vous facilite beaucoup de chose, ce n’est au final pas le service final que vous utiliserez.

Node.js

Docker

Utiliser les services AWS, sans vraiment utiliser AWS.

Tester les services AWS localement avec localstack

Vous travaillez sur une application react-native qui fonctionne seulement sur 

. Et de temps en temps vous switchez de projet pour passer à une application nodejs qui doit avoir pour version minimum la version 

Vous avez déjà heureusement installé (Node Version Manager, nvm)[https://github.com/nvm-sh/nvm]. Mais c’est quand même fatiguant de tout le temps saisir :

C’est là qu’entre en jeu, le fichier 

, à la racine de votre projet, permet de définir la version qui node par défaut du projet.

Cela va générer automatiquement un fichier nvmrc avec la version actuelle de votre node.

Maintenant si vous vous rendez sur votre dossier, puis faites :

La version de votre node va être automatiquement switché pour celle du projet. Pratique, mais pas assez car cela nécessite une étape manuelle.

, vous pouvez rajouter quelques lignes de configuration afin de load automatiquement la version du 

, donc la configuration suivante va être pour ceux qui l’utilisent aussi. Pour les autres, je vous laisse regarder (ce lien)[https://github.com/nvm-sh/nvm#deeper-shell-integration].

Ajoutez ce bloc de ligne juste après l’initalisation de .nvm :

Fermez vos terminals puis rouvrez-les, puis admirez le résultat !

Maintenant votre version de node va automatiquement changé selon le dossier où vous vous trouvez ! Pratique !

Certains de vos projets ont besoin de node version 14, et d'autres version 12. Et vous changez manuellement de version à chaque fois ?

Comment switcher de version node.js automatiquement ?

Dans cet article, je vais vous parler un peu de mon expérience avec gatsby, et des limitations qui m’ont un peu surpris lorsque je commencer à jouer un peu plus avec le code.

Vous avez monté votre blog, et pour chacun des posts vous utilisez 

Dans votre page template, vous avez sûrement une requête graphql de ce type

Lorsque vous avez quelques articles, vous éxecutez un 

, le projet compile bien et vous avez vos premiers post bien générés.

 de tous vos fichiers, et mettez les à vide. Et la qu’est-ce qu’il se passe quand vous essayez de recompiler ?

Comment gatsby vous mets à disposition les données de vos fichiers de sources ?

Le simple fait d’avoir une propriété à vide (

 réellement), peut faire planter votre compilation. Pourquoi ?

Ce qu’il se passe en fait lors du build, c’est que Gatsby va parcourir toute vos sources de données, et 

 les données. Il va vérifier dans chaque 

 ce que vous avez, et créer le typage graphql. C’est l’étape du 

Pour illustrer avec le cas précédent, si aucun fichier comporte un 

 avec une donnée, Graphql ne mettra pas à disposition de propriété 

En d’autres mots, si vous avez une données “nullable”, et qu’aucun des fichiers a une valeur pour cette donnée, alors adieu la compilation !

Mais tout n’est pas peine perdu. Gatsby met à votre disposition une page qui vous explique 

Gatsby met à votre disposition une méthode 

 qui permet de typer votre objet. Si on applique cela à notre objet que nous avions précédemment :

Ce qu’il se passe ici, c’est que vous indiquer à Gatsby le typage des données attendus. Vous devez commencer par l’objet qui héritera de 

). Dedans se trouve notre frontmatter à qui on va créer un type 

Bref, j’imagine que vous avez déjà compris sans expliquer ce que ça fait. Je vais juste vous expliquer les différentes annotations / types présents :

Annotation(optionnel) Indique à gatsby qu’il peut inférer également les données de ce type

AnnotationIndique à gatsby que nous sommes sûr de ce type, et qu’on ne veut pas qu’il parcours les données. Cela fera economiser du temps de build pour les plus gros projets

AnnotationPermet de linker avec une autre source de donnée, en le liant à la propriété 

AnnotationPermet de lier à une image locale lorsque vous avez un lien relatif. C’est ce que gatsby fait par défaut pour vos images

 permet d’indiquer que cette valeur ne peut pas être null

Bien entendu vous pouvez créer vos types comme on l’a vu plus haut.

. Vous avez sûrement dans votre projet des auteurs, un 

Et vous avez également peut-être dans votre fichier 

, cette propriété mapping proposée par gatsby pour rendre disponible automatiquement dans vos requêtes qui vise le blog, l’auteur lié directement :

Mon conseil, enlever cette partie et utiliser plutôt 

. Cela permet de faire la même chose, avec le bénéfice de pouvoir gérer les auteurs 

Si vous aimez réellement Gatsby, et que vous commencez à vous intéresser un peu plus, alors il est sûr à 100% que vous allez rencontrer ce problème.

Alors prenez bien le temps de lire cet article, et commencez à typer vos données dès maintenant !

GraphQL

Comment typer proprement vos données en gatsby et graphql, afin d'éviter les erreurs de compilations pour les données manquantes.

Typer vos données avec Gatsby et Graphql

Le “crash reporting” vous connaissez ? C’est une des notions les plus importantes afin d’assurer la bonne qualité de votre application.

Les bugs et crashes qui appairaissent dans votre application une fois déployée, peuvent être très difficile à taquer. Vous ne serez sûrement pas en contact avec les utilisateurs afins qu’ils puissent vous détailler ce qu’il s’est passé. Et encore pire, l’utilisateur vous laissera sûrement une mauvaise note.

Dans ce tutoriel, nous allons voir comment intégrer le module 

Ce tutoriel nécessite que vous ayez complété 

notre première partie sur l’initialisation de firebase avec React Native

 propose des fonctionnalités utiles pour les développeurs.

Créer le projet dans la console Firebase

, assurez-vous que votre projet est créé, sinon suivez l’article précédent.

Intégrer @react-native-firebase/crashlytics

Exécutez dans un terminal dans votre projet :

Afin d’être sûr que le paramétrage fonctionne, créez d’abord un fichier 

 à la racine de votre projet, en y ajoutant :

 permet de dire à Crashlytics d’également tracker les bugs en mode debug. C’est important pour notre premier test.

Ensuite, soit lors d’un clic de bouton, soit au chargement d’un screen, insérez ce bout de code :

, puis attendez 1 ou 2 minutes pour voir apparaître votre erreur :

Testez la manip’ sur les 2 simulateurs 

Maintenant, on peut passer aux cas pratiques !

 va maintenant attraper les erreurs qui proviennent dans votre application, et vous les lister dans la console. Mais comme vous le savez, le code 

 est compilé en natif, donc vous perdez votre code javascript lors de la release.

Donc vos stack d’erreurs ne seront pas très lisible.

Exemple de stack d’erreur reporté par 

La méthode pour récupérer l’erreur javascript est la suivante :

L’explication étant maintenant terminée, passons à la 

 pratique. Le composant ErrorBoundary permet de rattraper les erreurs qui se produisent dans le code javascript, et de montrer une vue plus propre à l’utilisateur, au lieu de faire cracher l’application.

Nous allons mettre en place ce composant, et envoyer les erreurs à Crashlytics à ce moment.

, entourez votre application avec ce composant :

Voila ! Maintenant à chaque crash, nous allons envoyer les informations js à la console 

. Ce que j’aime bien mettre en place, c’est le rechargement de l’application lors du clic sur le bouton, grâce à la dépendance 

Grâce à l’étape précédente, vous aurez la stacktrace javascript. Mais c’est toujours mieux de rajouter plus d’info (bien sûr, avec parcimonie).

J’utilise la 2ème méthode pour savoir sur quelle page l’utilisateur se trouvait avant le grand crash.

Et voila ! Ça fait pas mal d’information quand même. Maintenant j’espère que vous allez pouvoir débugger vos applications plus facilement. Ne tracker pas des informations susceptibles d’identifier vos utilisateurs (#rgpd).

Murat

Développeur Front / Mobile / Back

Expertises:

Les articles de Murat

Comment réduire son bundle React ?

Murat

MJML : le secret des emails responsives réussis

Murat

Tester les services AWS localement avec localstack

Murat

Comment switcher de version node.js automatiquement ?

Murat

Typer vos données avec Gatsby et Graphql

Murat