$name$ est un membre de l'équipe Snowpact avec les compétences : $skills$

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 est une bibliothèque Javascript, développée par Facebook, qui permet de développer des application web. Il est facile de créer des interfaces utilisateurs interactives avec React. Définissez des vues simples pour chaque état de votre application, et lorsque vos données changeront, React mettra à jour, de façon optimale. React peut être couplé avec n’importe quelle stack technique. Il est utilisé par des nombreux géants du marché comme Facebook, Instagram, Netflix, Airbnb, Dropbox...

Quand utiliser React
1. React est recommandé si vous souhaitez construire une application monopage ayant beaucoup d’interactivité avec l’utilisateur.
2. En utilisant un DOM virtuel, React est capable de mettre à jour, sans rechargement, seulement les éléments impactés par un changement au sein de la page web.
3. Ceci implique des gains en performance lui permettant de se démarquer de ses concurrents.

React

Snowpact a developpé une expertise dans la technologie React

Nous développons votre application en React

Présentation
React Native est un framework Javascript, développé par Facebook, qui permet de développer des applications mobile Android et iOS.

Quand l'utiliser
Si vous avez besoin de développer une application mobile qui doit consommer des API, utiliser des fonctions classiques du téléphone, et qui doit être disponible sur Android et iOS, c'est React Native qu'il faut choisir.

React Native

Snowpact a developpé une expertise dans la technologie React Native

Nous développons votre application en React Native

Gatsby est une plate-forme pour créer des applications et des sites Web avec l'aide de React. L'outil est basé sur JAMstack, un ensemble de technologie qui marchent bien ensemble (JAM c’est pour JavaScript, APIs & Markup).

Quand utiliser Gatsby ?

Gatsby est fantastique pour générer des sites statiques. Mais si vous le poussez plus loin, vous pouvez très bien construire des applications web plus complexe avec ! Dans notre cas, nous avons construit un générateur dynamique de site internet avec. Un espèce de Wix fait maison.

Gatsby

Snowpact a developpé une expertise dans la techno Gatsby

Nous développons votre site internet en Gatsby

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 JavaScript React grâce aux Source Maps.

Avez-vous déjà essayer d’intégrer des mails en HTML ? 

“c’est comme intégrer une page classique en html”

Vous l’avez peut-être déjà remarqué, les templates de mails sont souvent fait de cette manière :

 vous montrent que de nombreuses propriétés css / html (comme 

) ne sont pas supportées par plusieurs plateformes/client de mails.

Eh oui ! tout comme Internet Explorer 6 à son époque, 

 nécessite qu’on rajoute pas mal de hack pour rendre votre code compatible. Une des techniques les plus utilisés est le 

 utile montre les bonnes pratiques a utiliser pour avoir des mails qui fonctionnent partout.

Et pour finaliser le tout, c’est quand même plus dur de tester un mail qu’une page. Vous devez vraiment simuler l’envoi du mail afin de valider que le design que vous avez codé fonctionne bien chez tout le monde. Vous ne pouvez pas faire confiance à un navigateur pour faire un rendu de votre code.

Trouvez-nous une solution, s’il vous plaît !

MJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax.

Ce qui signifie pour les moins anglophones d’entre-nous :

MJML est responsive par design sur la plupart des clients emails les plus populaires, même Outlook. Écrivez moins de code, et codez plus efficacement avec la syntaxe sémantique de MJML.

Je vous ai gardé le meilleur argument pour la fin : 

Alors rien de plus simple. MJML a sa propre syntaxe sémantique, ou plus clairement ses propres balises. Ces balises sont transformés en code html avec une simple ligne de commande.

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 ?

Si vous souhaitez juste récupérer un code html produit par MJML, vous pouvez 

Ce qui est cool, c’est que plusieurs templates 

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.

Vous trouverez toute les balises disponibles dans 

A l’heure de l’écriture de ce billet, on veut plus avoir à faire avec le problème des années 2000 comme Internet Explorer 6. Personnellement, je ne veux plus apprendre à faire des hack, ou apprendre un language compliqué comme le 

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 existe pas, à nous de peut-être le développer :)

HTML

MJML

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

Simplifier la création de template d'email avec MJML

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 ?

Switcher de version node 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.

Murat

Développeur Front / Mobile / Back

Les articles de Murat

Comment réduire son bundle JavaScript React grâce aux Source Maps.

Murat

Simplifier la création de template d'email avec MJML

Murat

Tester les services AWS localement avec localstack

Murat

Switcher de version node automatiquement

Murat

Typer vos données avec Gatsby et Graphql

Murat