Developer Experience / GraphQL et ses outils

Developer Experience et GraphQL, retour sur notre dernier meetup avec l’AFUP Paris.

DX : DEVELOPER EXPERIENCE

La Developer Experience est tout simplement un moyen d’améliorer votre vie de développeur.
Découvrez tous les outils et astuces que vous pouvez mettre en place et adopter dans vos projets pour gagner du temps.
Voici quelques exemples qui vous sont présentés :

  • Debug bar : toutes les infos nécessaires
  • Symfony flex : installer des dépendances rapidement
  • MakerBunble pour générer du code facilement

GRAPHQL ET SES OUTILS 

GraphQL est un langage de requêtes – ou protocole de communication – entre un client et un serveur. Développé par Facebook, il propose une alternative aux API REST et aux Webservices comme SOAP/WSDL.
Au programme :

  • Ce que vous offre GraphQL
  • Ses types, ses périmètres et son écosystème
  • Un focus sur GraphQL en PHP

En prime, on vous dit tout sur notre librairie GraphQLite. Elle vous permet de faire la même chose, en beaucoup moins de lignes de code !

RENDEZ-VOUS SUR NOTRE BLOG TECHNIQUE 

thecodingmachine.io

WORKING WITH STYLE

Développer un site web ou une application mobile c’est bien, mais lui donner du style c’est encore mieux. Faites le tour des méthodes et bonnes astuces pour développer efficacement en CSS, SCSS, LESS ou encore en SASS.

PARTONS DE LA BASE : LE CSS 

Un peu d’histoire
Le CSS ou encore Cascading Style Sheets peut se traduire par une feuille de style en cascade. Il est utilisé pour mettre en forme, gérer le design de fichiers HTML ou XML.
Il permet notamment de :

  • Séparer la structure de la page et le style
  • Décliner les styles selon le récepteur
  • Permettre la cascade de styles

Les propriétés, qu’est-ce que c’est ?

Les propriétés sont regroupées par blocs de règles, entre accolades. Chaque bloc est précédé par un sélecteur désignant un élément de structure : éléments, classes, ID.
Display et positionnement
L’affichage sur CSS est simple :

  • Inline : affichage en ligne
  • Inline -block : création de bloc
  • Block : un ensemble d’éléments

Display flex : Il offre une capacité à un élément flexible de modifier ses dimensions pour remplir l’espace disponible de son container. Il est particulièrement apprécié sur du React Native.
Il existe plusieurs outils de position :

  • Static : sa position de base.
  • Relative : par rapport à sa position initiale (static).
  • Absolute : se fixe par rapport au parent le plus proche en relatif.
  • Fix : se fixe par rapport à la window.

LES NOUVEAUX LANGAGES 

Le CSS c’est bien mais il n’est pas assez souple. Plusieurs langages ont été créés pour pallier les manques du CSS.
Le SASS (Syntactillay Awesome Style Sheets) : un langage de script interprété en CSS qui intègre de grandes nouveautés :

  • Variables : changer la couleur d’un site ne sera plus un casse-tête, il suffira de changer la variable.
  • Mixins : rend votre travail beaucoup plus efficace, il vous permet de réutiliser des pans entiers de CSS, propriétés ou des sélecteurs.
  • Operators : le calcul est maintenant possible !

Son gros point faible est qu’il ne contient pas d’accolades dans son code. Pour répondre à cela, un nouveau langage est apparu : le LESS. Une réelle correction du SASS, il est maintenant possible de coder du CSS dans un fichier LESS.
Alors comment faire son choix ?

  • Simplicité : La syntaxe du LESS est plus proche du CSS. Néanmoins le SASS a su combler ce manque en lançant le SCSS qui tout comme le LESS intègre les accolades.
  • Profondeur : le SASS offre plus de profondeur sur la partie calcul.
  • Simple choice : le choix va au final se porter entre le $ ou @.

BOOTSTRAP

Bootstrap est un framework de style, de CSS, apportant plusieurs points positifs :

  • Fonctionne sur tous navigateurs modernes
  • Adopte une approche «Mobile First »
  • Il est personnalisable
  • Aide les développeurs anti-UX
  • Des centaines de templates sont disponibles
  • Il est intégré avec des plugins Vue, Angular et React
  • Et dispose d’une grande documentation disponible sur leur site

Il y a un point important à connaitre sur Bootstrap c’est le container : il doit absolument être placé au début de tout. Un container va contenir des row (lignes) et des col (colonnes). Il est donc important de respecter l’ordre : container – row – col.
Si vous n’êtes pas rigoureux vous allez vous retrouver avec des pixels en trop.
Astuce : Il est aussi possible de faire du display flex avec Bootstrap
Même si Bootstrap est customisable on retrouve souvent des sites qui se ressemblent et il est assez limité pour des écrans compliqués.

L’IMPORTANCE DE L’UI/UX

L’UX représente l’expérience globale ressentie par l’utilisateur lors de l’utilisation de l’interface. L’UI est ce qui fait le lien entre l’humain et la machine. Votre design doit avoir un but, il est donc important de déterminer votre cible et définir son utilisation.
Il y a néanmoins quelques bonnes astuces que vous pouvez déjà appliquer dans vos design :

  • L’importance des typos : préconisez des typos plutôt classiques, lisibles et facilement compréhensibles par votre audience.
  • Attention au scroll excessif : c’est une fonctionnalité basique qu’il faut savoir doser. Par exemple, le parallax est en général une mauvaise idée mais certains sites l’ont implémenté avec brio (Costa Coffee).
  • Adoptez un design responsive :  la navigation mobile a dépassé celle du deskop, il est donc primordial d’intégrer les normes du mobile (respecter la taille des icônes par exemple). Un bon moyen de poser de bonnes bases pour du responsive design est d’utiliser du display flex et du système de grid.

Pour travailler avec style et être accessible à tout le monde voici une infographie qui peut vous aider.

 

SAUVETAGE DE PROJET : MÉTHODES ET CAS PRATIQUE

Le diagnostic est tombé : votre projet est planté. Pas de panique, on vous donne 3 méthodes pour vous aider à mettre en place un plan d’action et sauver votre projet.

LES MÉTHODES DE SAUVETAGE

Méthode 1 : Ne pas avoir peur de supprimer le problème
Si les problèmes ont une origine technique, l’application développée sera difficile à sauver. La correction d’erreurs graves de conception de l’architecture est souvent très couteuse, il est parfois préférable de reprendre le développement « from scratch ».
Méthode 2 : Gérer les problèmes périphériques
Si l’application mérite d’être sauvée, il faut parfois s’attaquer aux problèmes humains. Une méthode assez délicate à entreprendre lorsque des sentiments négatifs sont engagés. Il est préférable de faire preuve de bon sens et de pragmatisme en adoptant des solutions efficaces :

  • Se désengager de son prestataire
  • Faire une pause pour se réorganiser
  • Changer les équipes et redonner un second souffle
  • Morceler les problèmes et relancer le développement par étape

Méthode 3 : Gérer les problèmes techniques
Pour gérer vos problèmes techniques, on vous propose une méthode simple à partager et facile à appliquer qui est de classez les risques et les actions en fonction de ces 4 critères :  

  • Impact : le coût associé à la survenance du risque
  • La probabilité de survenance du problème
  • Le coût associé à la mise en place d’un correctif
  • La catégorie associée au risque (architecture, sécurité du code, …)

Il suffit ensuite de monter un quadrant avec en abscisse : impact*probabilité et en ordonnée la complexité de mise en place du correctif.

CAS PRATIQUE : UNE MAUVAISE ARCHITECTURE 

Le projet

Notre client nous a sollicité pour la création d’un système de gestion électronique de documents (ou GED) suite à la dématérialisation de ses correspondances avec ses clients.
Le projet comprenait :

  • l’externalisation de l’ouverture et de la numérisation du courrier
  • sa distribution sous forme dématérialisée à travers une application qui gérait les workflows de demandes client.

Notre intervention

Les retards accumulés pendant le développement et les dysfonctionnements constatés nous ont amené à conduire un audit, d’analyser finement l’application et dessiner le périmètre d’un plan de sauvetage.

Les problèmes détectés

L’architecture de la solution ne convenait pas au besoin du client. Les données étaient distribuées dans deux bases de données distinctes. S’ajoutant à cela, le prestataire était parti d’un outil open-source et d’une technologie qu’il ne maîtrisait pas.
Résultat : l’application était instable avec des temps de réponse difficiles à supporter par les utilisateurs et menant parfois à des arrêts de production de plusieurs jours.

Les solutions apportées 

Le processus de build et l’utilisation systématique de caches et sessions ont permis de consolider l’application sans remettre en cause les fondements de l’outil.
L’industrialisation des développements, la mise en place de bonnes pratiques ainsi que le lancement de tests automatisés pour garantir les non régressions ont assuré la stabilité de l’application dans la durée.

Pour aller plus loin dans votre démarche, consultez notre livre blanc

Les bases de données : SQL, NoSQL, ElasticSearch

SQL, MYSQL, NoSQL, Elasticsearch, vous avez encore du mal à faire la différence entre les différentes bases de données et langages ?

Pas d’inquiétude, on vous explique les bases pour vous y retrouver !


Le langage SQL pour interagir avec les bases de données

Le langage Structured Query Language ou SQL permet de communiquer et de manipuler les bases de données relationnelles.

Ses points forts

  • Sa rigidité : la structure des tables et le type d’attributs sont définis et fixés en avance.
  • Ses jointures : les requêtes SQL offrent une puissante clause JOIN. Vous pouvez récupérer des données dans plusieurs tables en une seule requête.
  • Sa normalisation : il réduit au minimum la redondance des données via l’utilisation de clés étrangères.

Quelques commandes de base pour bien démarrer

  • Inner Join : intersection entre la table de A et la table de B.
  • Left/Right Outer Join : l’ensemble de la table A et l’intersection avec la table B (inversement pour la commande Right).
  • Natural Outer Join : colonne du même nom et du même type dans les deux tables (simplification du code).
  • Straight Join : une commande plus rare qui permet d’obliger MySQL de passer par la table qu’on lui indique.

Les autres fonctions SQL sympas et utiles

  • Trigger : fonction qui s’exécute lors d’un INSERT /UPDATE /DELETE.
  • Requête imbriquée : utile pour récupérer toutes les lignes dont le max est une colonne.
  • Cascade : permet de détruire automatiquement une donnée si sa liaison parente est détruite. Mais attention aux manipulations et destructions non désirées !
  • Transaction : permet de jouer un grand nombre de requêtes d’INSERT/d’UPDATE et de ne valider qu’à la fin ou de tout annuler.

Les bases de données NoSQL

Parmi les bases NoSQL les plus connues : la base de données MongoDB est notamment utilisée avec JavaScript et Node, et Redis est un espace de stockage en clé valeur.

Les points forts des bases de données NoSQL

  • La flexibilité : MongoDB fournit les données sous forme de documents JSON, permettant de faire évoluer plus simplement le modèle de données.
  • La scalabilité : vous pouvez rendre facilement et rapidement les bases de données scalables. Astuce : grâce au sharding automatique, vous pouvez augmenter les capacités des bases de données.
  • La performance : vous avez à disposition de nombreuses fonctionnalités : index, dynamic queries, tri des résultats, etc.

Qu’est-ce qui change ?

  • Query : la syntaxe des requêtes en NoSQL sont différentes, vous devrez donc prendre en compte certains changements.
  • Model : On utilise l’ODM Moogoose qui nous permet de créer nos modèles et nos schémas assez simplement comme on peut le faire dans un code.
  • Populate : Dans Mongoose, le populate remplace le principe des Jointures en utilisant des instances.

« Tout ça c’est bien sympa mais parfois on peut se retrouver assez limité par le SQL ou le NoSQL, comment faire ? »

C’est vrai ! On retrouve souvent des soucis de performance et la récupération d’informations peut prendre beaucoup de temps. Pour remédier à ces difficultés, la solution peut être d’utiliser Elasticsearch.


La solution Elasticsearch

Elasticsearch est une base de données NoSQL qui permet de stocker et d’indexer un grand nombre de documents.

Ses points forts

  • Une indexation des données selon vos propres règles.
  • Une recherche full-text permettant de faire des recherches approximatives.
  • Un horizontal scaling qui vous permet de scaler facilement.

Petit lexique Elasticsearch

  • Nœud : un processus Elasticsearch en cours d’exécution.
  • Cluster : un composé d’un ou de plusieurs nœuds.
  • Index : un espace de logique de stockage de documents de même type, représentant l’ensemble de vos données.
  • Lucene : une bibliothèque Open Source qui permet d’indexer et de rechercher du texte. Le moteur d’Elasticsearch.
  • Shard : une partition de l’index qui correspond à une instance de Lucene. Attention, il n’est pas possible de modifier le nombre de shards après leur création.
  • Document : un enregistrement dans un shard Elasticsearch.

Pour en savoir plus sur les langages, les bases de données et les dernières évolutions en matière de technologies, découvrez le blog technique de The Coding Machine.

Comment réussir son cahier des charges web ?

TheCodingMachine vous livre quelques règles pour réussir son cahier des charges web.

L’idée est claire dans votre tête, mais encore faut-il vous faire comprendre et vous assurer un rendu fidèle à vos attentes. Vous vous lancez dans la rédaction de votre cahier des charges, mais catastrophe… personne ne vous comprend !

Donnez du contexte et réfléchissez à vos objectifs

Dans votre cahier des charges web, vous pouvez présenter beaucoup d’éléments permettant au prestataire de comprendre votre besoin :

  • Apportez un contexte : se présenter permet aux différentes parties prenantes, décrire précisément pourquoi vous souhaitez vous lancer dans ce projet va permettre au prestataire de mieux s’approprier le projet et parfois de proposer des solutions pertinentes.
  • Adoptez une approche en entonnoir : partez de votre histoire, votre vision, votre stratégie, jusqu’à définir vos objectifs et vos performances actuels sur votre site web.  
  • Pensez aux contraintes : en définissant le contexte et comment vous souhaitez avancer avec votre prestataire.
  • N’oubliez pas la créa : définissez vos objectifs marketing (conversion, fidélisation, notoriété), le comportement de vos cibles et votre identité (charte graphique, ton à employer).

Définissez clairement votre besoin

Décrire son besoin n’est pas une mince affaire. D’autant que les manières de l’exprimer peuvent prendre beaucoup de forme. Vous pouvez par exemple utiliser des mockups (comme par exemple balsamiq), des schéma illustrant les différents parcours de vos utilisateurs… Ce qui est sûr, c’est que plus vous détaillerez (selon vos moyens) cette partie, plus le prestataire pourra vous faire une réponse pertinente !

Un site web englobe un certain nombre de fonctionnalités répondant à des besoins utilisateurs spécifiques. Il faut donc donner de la réalité à votre projet avec une description exhaustive de la structure que vous souhaitez lui donner.

Définissez les grands blocs fonctionnels en vous basant sur les besoins des utilisateurs et les fonctionnalités nécessaires pour piloter votre activité. Catégorisez vos besoins selon la navigation d’un internaute et détaillez au maximum les fonctionnalités. N’ayez surtout pas peur d’en faire trop !


Décrivez le chemin de navigation et pensez au positionnement de vos pages. Il est indispensable de se poser les bonnes questions sur les fonctionnalités et les contenus de chaque page pour garder une certaine cohérence. N’hésitez pas à prendre exemple sur d’autres sites.

N’hésitez pas non plus à hiérarchiser vos différents besoins. Cela va vous permettre de définir différentes versions dans le temps et donc d’avoir une approche MVP qui est souvent plus pertinente.

N’hésitez pas à aborder les questions techniques

La solution technique de votre projet doit attirer toute votre attention même si c’est compliqué. C’est ce qui vous permettra d’avoir un site fonctionnel, fidèle aux besoins des utilisateurs et qui optimise votre référencement naturel.
Posez-vous les bonnes questions : Quels outils d’analyse marketing je souhaite utiliser ? Mon site doit-il être responsive ? Comment modéliser mon tunnel de transformation ?  


Enfin, pensez à l’architecture technique. Si vous avez une préférence pour une solution technique (un CMS par exemple) ou vous souhaitez privilégier un environnement cible (LAMP ou Windows), dites-le. Autrement, le prestataire risque de vous répondre avec les technologies qu’il privilégie et vous ne pourrez pas comparer les différentes offres.

Faut-il se faire accompagner ?

Bien que TheCodingMachine puisse vous accompagner dans la rédaction de votre cahier des charges web, cela n’est pas forcément pertinent. En effet, vous astreindre à rédiger vous-même votre cahier des charges web va vous permettre de vous approprier le sujet. Vous saurez ainsi beaucoup mieux ce que vous souhaitez faire, vous en comprendrez beaucoup mieux les enjeux. Ainsi le dialogue avec votre futur prestataire va être plus constructif et vous en retirerez certainement beaucoup plus de valeur.

Comme vous avez pu le constater, rédiger un cahier des charges web n’est pas simple mais indispensable !

Pour faire un tour complet de la question, n’hésitez pas à télécharger notre livre blanc ici ou en cliquant sur l’image ci-dessous.

Livre blanc cahier des charges web

FAITES VOS PREMIERS PAS SUR GIT !

Outil indispensable chez TheCodingMachine, Git est un logiciel de gestion de versions qui permet de récupérer son travail, de le pousser sur les serveurs et les uploader en production. Découvrez les commandes de base, apprenez à résoudre des conflits et à réécrire votre historique grâce à nos astuces et bonnes pratiques.

BIEN DÉMARRER SUR GIT

Les commandes d’instructions de base
Introduction ou rappel des fondamentaux, voici les commandes de base indispensables pour bien démarrer :

  • Git pull : vous permet de récupérer l’historique de commits
  • Git add : indispensable pour ajouter des modifications
  • Git commit : commitez vos modifications
  • Git push : mise à jour de la version distante
  • Git status : vous permet de visualiser votre index de travail en cours (tout ce qui n’est pas encore commité) : les fichiers modifiés, ajoutés ou supprimés.
  • Git log: vous aide à consulter l’historique de commits de la branche actuelle. Le H ou le HEAD est la référence, l’identification du commit.

Voyagez dans l’arbre des commits
Ne vous perdez pas ! Il est très facile de commettre des erreurs quand vous souhaitez apporter des modifications dans la branche. Grâce à ces commandes vous pourrez vous promener en toute tranquillité.

  • Git checkout branch : change la branche courante
  • Git checkout -b branch : crée la branche et change tout de suite
  • Git checkout commit : détache la HEAD vers commit (qui se trouve généralement en haut de l’historique) et vous permet de revenir en arrière dans l’historique, sans forcément avoir à supprimer des commits.
  • Git checkout (commit) filepath : remplace filepath par la version commit du fichier, vous permet de réinitialiser des fichiers en local.

RÉSOLUTION DE CONFLITS

Vous avez téléchargé des changements et sans surprise, ils entrent en conflit avec d’autres changements. Git va essayer de les résoudre par lui-même, si ce n’est pas le cas c’est à vous de jouer !

  • Méthode standard : idéal pour les résolutions faciles, vous pouvez gérer manuellement vos conflits mais attention aux erreurs !
  • Intégration dans PHPStorm : Beaucoup plus pratique, vous obtenez une vue par fichier et par commit, ainsi qu’un listage des changements qui entrent en conflit (en rouge) et vous permet de rapidement identifier vos zones d’intervention.

RÉÉCRITURE D’HISTORIQUE

Nombreuses sont les raisons de vouloir réécrire son historique : gagner en lisibilité, récupérer des changements, changer de branche… Nous vous proposons ces bonnes pratiques pour éviter de casser votre historique.
Réécriture Simple

  • Git revert HEAD~N : annule N commits, créer un commit d’annulation
  • Git reset HEAD~N : supprime N commits, garde les changements
  • Git reset –hard HEAD~N : supprime N commits et les changements
  • Git reset –soft HEAD~N : supprime N commits, garde les changements et l’index de travail
  • Git commit –amend : un raccourci, édite-le commit précédent

Réécriture Complexe

  • Git rebase -i hash : réécriture dynamique depuis le commit hash
  • Git pull –rebase remote branch : pull dynamique de branch

LES BONNES ASTUCES

Nous avons fait le tour des commandes de base que vous pouvez utiliser sur GIT. Certaines peuvent être plus ou moins longues. Pour accélérer vos commandes et gagner en efficacité, vous pouvez créer des alias. Voici quelques exemples :

  • git config –global alias.nom_de_l_alias command
  • git fixup = git commit –amend
  • git rpl = git pull –rebase

Vous pouvez aussi consulter la Git Cheat Sheet de GitHub : un résumé des commandes d’instructions les plus utilisées, essentielle pour vous lancer sur GIT.
 

VOUS AVEZ AIMÉ CET ARTICLE ET VOUS VOULEZ EN SAVOIR PLUS ?

RENDEZ-VOUS TOUT DE SUITE SUR NOTRE BLOG TECHNIQUE !

SAUVETAGE DE PROJET : DETECTEZ TOUS LES RISQUES !

Il faut se rendre à l’évidence, un projet n’est jamais sans risque, le danger se cache dans les moindres recoins. Mais le risque n’est pas synonyme d’échec, il est toujours susceptible d’être géré. Le tout est de savoir l’identifier à chaque étape clé du projet, de le définir et d’y apporter une réponse.

 

APPRENEZ À DÉFINIR VOTRE BESOIN

Tout projet débute par l’élaboration d’un cahier des charges. Véritable fil rouge pour la suite des opérations, il se doit donc d’être clair et facilement interprétable. ll sert de point de repère entre les différents acteurs du projet et doit donc respecter un certain nombre de règles.
Vous ne savez pas si votre document est trop complexe ou au contraire pas assez complet ? Vous pouvez télécharger notre modèle pour vous aider.
Côté technique, si vous n’avez pas de solides compétences, n’hésitez pas à faire appel à un prestataire. La conception sera facilitée et il saura concevoir la solution la plus adaptée tout en évitant les erreurs. Gardez tout même un œil sur cette partie et donc la main sur votre projet ! Vous serez ainsi à même de pouvoir apporter des recommandations solides et viables.

FONCTIONNALITÉS, NE VOYEZ PAS TROP COMPLEXE… 

Le risque se crée et s’alimente en voyant trop grand dès le début. Plus le périmètre est large, plus vous apportez de la complexité et vous laissez de la place au risque. Avancez progressivement dans votre projet.
Commencez par concevoir de petites fonctionnalités qui pourront par la suite être améliorées et/ou auxquelles vous pourrez ajouter des fonctionnalités supplémentaires, plus complexes.
Pour bien démarrer un projet, il est indispensable de valider les spécifications techniques, c’est un gage de bonne compréhension du projet. Le développement sera la résultante de ces documents. Enfin, le lotissement de la solution doit être logique et compréhensible, l’ensemble doit pouvoir être fonctionnel.

VOUS POUVEZ ENFIN PASSER AU DÉVELOPPEMENT

Votre cahier des charges est prêt, vous vous êtes mis d’accord sur la conception, il est temps de passer à l’action et d’entrer dans la phase de développement. Mais vous entrez aussi dans un terrain miné où il est préférable d’y venir préparé.
Vous devez suivre scrupuleusement cette étape afin d’avoir une vue d’ensemble des différentes opérations. Fixez des points d’avancement réguliers afin de limiter les retards de production et d’impacter les compétences techniques des architectes et développeurs de la solution.
Dans la même logique, la transmission d’informations doit être continue. La communication est essentielle : les risques et leur gestion doivent être détaillés et partagés aux parties prenantes afin d’anticiper au maximum les obstacles rencontrés.
Aussi, la phase de développement d’un projet est souvent synonyme de périodes trop longues sans implication des utilisateurs. Pour parer à ce risque, prévoyez des recettes intermédiaires.

MISE EN PLACE DE LA SOLUTION, ÇA Y EST, VOUS ÊTES SUR LA DERNIÈRE LIGNE DROITE !

Votre projet est sur le point d’être lancé ! Ce n’est pas le moment de foncer tête baissée mais gardez toujours à l’esprit que les dernières failles peuvent tomber avant d’atteindre la ligne d’arrivée.
Impliquez-vous dans la recette du projet, pensez à réaliser des cahiers de tests et à créer des jeux de données pour tester les éléments de votre projet. Cela vous évitera d’avoir de mauvaises surprises une fois le lancement réalisé.
Prévoyez un environnement et un dimensionnement adéquat pour une utilisation optimale de votre application. Une mauvaise gestion ou prévision de l’utilisation des serveurs ou de l’infrastructure réseau risque de ralentir votre projet et/ou d’y apporter des coûts supplémentaires.
Il est ainsi préférable de séparer les développements de la production qui est elle responsable de la mise en place des serveurs, de l’environnement et de la gestion des sauvegardes.
 

Le risque peut apparaître à chaque étape du projet : une trop grande accumulation et une réaction trop lente peuvent rendre son sauvetage plus compliqué, voire le noyer complètement.

Notre expertise nous a permis d’identifier un certains nombre de signaux de risques et d’anticiper les actions humaines et techniques nécessaires pour éviter un échec et sauver un projet.  Il est donc indispensable de vous entourer des bonnes personnes en choisissant un prestataire fiable et qui saura structurer la réponse à vos besoins.

 

REACT-NATIVE

Dans un monde où tout est mobile first, comment développer une bonne application ?

Une application web est-elle la même chose qu’une application mobile ?
Notre équipe de Lyon répond à ces questions et nous confie tout ce qu’il faut savoir sur le Framework React-Native.

COMMENT DÉVELOPPER UNE APPLI MOBILE ?

Aujourd’hui, il existe trois méthodes pour développer une application mobile :

  • Le développement natif : il consiste à développer une application pour chaque langage du marché (iOS, Android, Windows…). De par la diversité des environnements de développement, cela a entraîné la naissance des solutions appelées Hybrides.
  • Le développement hybride : il permet le développement d’une application dans un navigateur grâce à des technologies web ou Webview (HTML, JavaScript, CSS…).


 
Avec ce type d’applications, nous perdons des fonctionnalités et donc de la performance du fait des nombreuses couches.
En effet, les couches Webview et Cordova se greffent à la couche natif du téléphone.
 
Des grands noms comme Facebook se sont rendu compte que l’hybride n’était pas la solution la plus adaptée en termes de performances. Ils ont donc créé React-Native.

  • React-Native : permet de développer en un seul langage, React, des applications pour Android et iOS.


Vos applications React-Native seront plus performantes et sécurisées du fait que la couche React-Native se greffe directement à la couche Natif du téléphone.
 

REACT-NATIVE

  • De quoi se compose React-Native ?

À la racine, on dispose d’un dossier App contenant du React, d’un dossier iOS et d’un dossier Android. Dans ces deux derniers nous avons de vraies applications qui communiquent avec React. Pendant le développement on attache peu d’importance aux dossiers iOS et Android, mais seulement au dossier App qui va communiquer avec l’application native.

  • Comment ça marche ?

Sur le téléphone, lorsqu’une application React-Native est lancée, il va y avoir deux threads qui vont fonctionner en parallèle : le thread JavaScript contenant le code et le thread UI, natif, qui lui affiche les composants.
React-Native a développé un bridge qui permet de faire communiquer ces deux threads qui parlent des langages différents : le thread JavaScript envoie son composant de code (ses informations JSON) au bridge React-Native qui va le traduire et l’afficher sur l’écran de l’application.

  • Questions récurrentes

Est-ce que je peux porter mon application mobile sur le web ?
Porter du React-Native sur le web n’est pas impossible mais ce n’est pas une bonne idée pour autant ! En effet, une application mobile est développée selon l’ergonomie et les composants d’un téléphone, c’est pourquoi la porter sur le web n’a aucun intérêt.
Si votre client vous demande une application mobile et une application web, nous vous conseillons de développer deux applications différentes en réutilisant les mêmes API derrière.

Est-ce que mon application va être acceptée sur les stores ?
En hybride il y a beaucoup de problèmes à déployer son application sur les stores mais en React-Native, les dossiers iOS et Android sont 100 % fiables.

Mon application est-elle aussi sécurisée qu’une application native ?
La technologie React-Native n’introduit pas de faille si elle est bien utilisée ! En effet, il y a des clés à connaître, comme ne pas stocker d’informations sensibles dans le téléphone.

Et Windows dans tout ça ?
Avec React-Native, nous pouvons déployer des applications sur iOS et Android mais il n’y a pas de dossier Windows. En effet, les windows phones ne représentent qu’environ 0,5 % du marché des téléphones en France. Cependant si vous avez un besoin très spécifique de développement, Microsoft a développé un plugin qui vous permet de le faire.

RETOUR D’EXPÉRIENCE

Chez TheCodingMachine nous développons des applications mobiles grâce au React-Native, voici notre retour d’expérience !


Nos points de vigilances

  • Les montées de version : pendant un temps React-Native développait une version par jour. Tout va très vite avec cette technologie et il est important de tout suivre.
  • Les bugs, mais ils sont très vite corrigés grâce à une communauté active.
  • iOS vs Android, certains comportements peuvent être différents entre ces deux systèmes d’exploitation.
  • Le déploiement sur les stores prend beaucoup de temps qu’il faut donc anticiper !

Nos bons points

  • La montée en expérience est très rapide, toute personne ayant fait du React, du Vue ou du JavaScript est capable de développer ses compétences très rapidement.
  • Côté UX et performances, React-Native n’a rien à envier aux applications natives.
  • L’automatisation des déploiements grâce à des outils comme Fastlane que nous utilisons.

Nos petits tips

  • Réaliser régulièrement une veille technologique, car comme nous l’avons dit plus haut, React-Native est un framework en constante mutation.
  • Faire attention aux maquettes, nous avons l’habitude d’en faire à destination du web mais il y a des différences sur mobile.
  • Développer sur Mac : en effet, il est possible d’émuler sur un téléphone Android et un iPhone à partir d’un Mac alors qu’émuler une application à partir d’un PC n’est pas possible sur iPhone.
  • Prendre en compte les encoches des téléphones lorsque vous créez votre application.

 
Pour rappel, TheCodingMachine a développé un boilerplate React-Native permettant de développer des applications mobiles robustes. Vous pouvez le consulter ici : https://github.com/thecodingmachine/react-native-boilerplate

Gérer les erreurs comme un pro ! Part 2

David est de retour pour nous en apprendre un peu plus sur la gestion des erreurs !

Si la partie 1 était surtout basée sur PHP, aujourd’hui il vous montre comment devenir un pro de la gestion des erreurs sur JavaScript, NodeJS, C…

Retrouvez la vidéo complète de sa présentation sur notre chaîne YouTube

APPRENONS DE NOS ERREURS GRÂCE AU POST MORTEM

Le Post Mortem est un outil d’aide à la gestion de projet. Utilisé à la fin de chaque projet, il permet d’améliorer la compréhension de celui-ci à travers une discussion et un partage entre les équipes.

 

LE POST MORTEM

Le Post Mortem est un bilan effectué sous forme d’une discussion, durant laquelle l’équipe échange sur les doutes, les difficultés et les succès rencontrés.
En amont de votre projet vous avez constitué une équipe QA, en aval vous devez créer une équipe en charge des Post Mortem qui rencontrera le directeur de projet ainsi que toute l’équipe afin de réaliser cette étape finale.
Quelque soit la durée de votre projet, il est toujours important de réaliser un Post Mortem. N’hésitez pas à bien noter toutes les étapes marquantes pour pouvoir les restituer fidèlement.

ET CHEZ THECODINGMACHINE ?

Chez nous, peu importe le projet, nous avons six grands axes sur lesquels nous échangeons. Parmi eux on trouve :

  • Une analyse chiffrée du projet : comprenant le temps, le budget. Regroupés dans un outil interne appelé la Time Machine
  • Le retour sur le QA réalisé en début de projet
  • Un point sur les techniques : la stack du projet et sa maîtrise
  • Les points fonctionnels: la compréhension du métier du client avec un retour d’expérience côté équipe comme côté client
  • Les problèmes rencontrés, et les solutions mises en place mais afin de discuter des erreurs pour ne pas les reproduire
  • Le sentiment général de toutes les parties prenantes du projet

Afin de toujours offrir à nos clients la meilleure expérience possible, nous développons de nouvelles méthodes de communication interne :

  • «La suite » : identification de potentiels rebonds des futurs projets, afin d’accompagner notre équipe commerciale
  • Le partage du compte rendu: réaliser un document de référence, dynamique, sur lequel nous trouverons toutes les discussions et les points précédemment cités. Ainsi, vous aurez toujours une trame de tous les projets et de toutes les solutions aux problèmes rencontrés.

POUR ALLER PLUS LOIN DANS LE POST MORTEM ?

Certains projets peuvent durer plusieurs mois, c’est pourquoi il est important d’échanger régulièrement sur la vie du projet avec toute votre équipe.
Nous préconisons de vous prêter à l’exercice au moins une fois par semaine, cela vous permettra de faire des bilans et des mises à jour régulières.
Il y a trois règles à respecter :

  1. Parlez avec franchise des erreurs que vous avez commises ou des difficultés que vous rencontrez. Vous trouverez toujours une personne qui saura répondre à votre besoin. Par exemple, si vous avez une surcharge de travail, dites-le à votre directeur de projet pourra vous alléger votre tâche.
  2. Ne cherchez ni coupable ni d’excuse: cela permettra de créer un climat de confiance !
  3. Ne restez pas focalisé sur vos problèmes et concentrez-vous sur des solutions pour aller de l’avant.

LE PARTAGE

Grâce à ces nouvelles actions au sein de votre entreprise, vous allez pouvoir mettre en avant les savoirs et les connaissances acquis tout au long du projet et améliorer l’entraide entre vos équipes.
En plus des points par équipe, nous vous recommandons d’en réaliser avec toute l’entreprise. C’est pourquoi chez TheCodingMachine, après nos formations du vendredi nous avons mis en place un lightning talk de 5 à 10min pour échanger tous ensemble des problèmes rencontrés et des solutions trouvées sur les différents projets. De plus, cela permet aux équipes techniques comme aux fonctions supports, de prendre connaissance des projets en cours.
Nous apprenons énormément grâce à tous nos projets. Et nous apprenons encore plus lorsque nous partageons nos connaissances. Réaliser un Post Mortem vous permettra de comprendre que nous pouvons tous apprendre les uns et des autres.