Systèmes d'exploitation pour smartphone iOS et Android

Dans le domaine de la gestion des données, le choix entre Hard Delete et Soft Delete peut avoir un impact significatif sur la sécurité et la récupération des informations. Ces deux méthodes de suppression de données sont essentielles pour les développeurs et les administrateurs de bases de données.

‍

Dans cet article, nous explorerons en détail ce qu'est le Hard Delete et le Soft Delete, leurs avantages respectifs, et comment choisir la meilleure approche en fonction des besoins spécifiques de votre projet. Nous fournirons également des exemples de code source pour illustrer leur mise en œuvre, afin que même les novices puissent comprendre ces concepts fondamentaux.

‍

Comprendre la différence entre Hard Delete et Soft Delete

‍

La gestion des données supprimées est une composante cruciale de toute application ou système de gestion de bases de données. Comprendre les distinctions entre le Hard Delete et le Soft Delete est le point de départ pour prendre des décisions éclairées.

‍

Hard Delete : La Suppression Définitive (h3)

‍

• Le Hard Delete, également connu sous le nom de suppression définitive, signifie que les données supprimées sont éliminées de manière permanente de la base de données.
• Cela signifie qu'une fois que vous avez effectué un Hard Delete, les données sont irrécupérables.
• Exemples de scénarios où le Hard Delete est approprié : suppression de données sensibles ou obsolètes, respect de la conformité légale.

‍

Soft Delete : La suppression réversible

‍

• Le Soft Delete, contrairement au Hard Delete, implique une suppression réversible.
• Les données supprimées sont marquées comme "supprimées" mais restent dans la base de données.
• Cela permet la récupération des données supprimées si nécessaire, offrant une couche de sécurité supplémentaire.
• Utilisation courante du Soft Delete : préservation de l'historique des données, récupération en cas d'erreur de suppression.

‍

En comprenant la différence fondamentale entre le Hard Delete et le Soft Delete, vous pouvez commencer à évaluer quelle méthode convient le mieux à votre projet. La prochaine section examinera les avantages de chacune de ces méthodes pour vous aider à prendre une décision éclairée.

‍

Les avantages du Hard Delete

‍

Le Hard Delete est une méthode de suppression de données qui peut s'avérer essentielle dans certaines situations. Examinons de plus près les avantages qu'il offre :

‍

L'un des principaux avantages du Hard Delete réside dans la sécurité qu'il offre. Lorsque vous effectuez un Hard Delete, les données sont supprimées de manière permanente de la base de données.

Cela garantit qu'aucune trace des données supprimées ne subsiste, réduisant ainsi le risque de divulgation d'informations sensibles.

‍

Dans certains secteurs, comme la santé ou les finances, la conformité légale est cruciale. Le Hard Delete permet de répondre à ces exigences en supprimant irrévocablement les données.

‍

En supprimant définitivement les données, le Hard Delete peut contribuer à améliorer les performances de la base de données en libérant de l'espace et en réduisant la charge de travail du système.

‍

Le Hard Delete simplifie la gestion des données, car il n'est pas nécessaire de gérer un ensemble de données supprimées de manière réversible. Cela peut simplifier les processus de sauvegarde et de restauration.

‍

Pour mieux comprendre la mise en œuvre du Hard Delete, voici un exemple de code SQL montrant comment effectuer une suppression permanente dans une base de données :

‍

Les avantages du Soft Delete

‍

Le Soft Delete, bien que différent du Hard Delete, présente des avantages significatifs dans certaines situations. Examinons en détail les avantages qu'il offre !

L'un des principaux avantages du Soft Delete est la capacité à récupérer des données supprimées par erreur. Les données marquées comme "supprimées" restent dans la base de données et peuvent être restaurées si nécessaire.

‍

Le Soft Delete permet de conserver un historique complet des données, y compris celles qui ont été supprimées. Cela peut être utile pour l'audit, la conformité ou l'analyse des tendances historiques.

‍

En évitant la suppression permanente des données, le Soft Delete offre une couche de protection contre les erreurs humaines, telles que la suppression accidentelle de données critiques.

‍

Lors de la mise en œuvre de nouvelles fonctionnalités ou de modifications de la structure de la base de données, le Soft Delete permet une transition en douceur en conservant les données existantes.

‍

Pour mieux comprendre la mise en œuvre du Soft Delete, voici un exemple de code SQL montrant comment marquer une ligne de données comme "supprimée" sans la supprimer définitivement :

‍

‍

Quand utiliser chacune des méthodes

‍

La décision entre Hard Delete et Soft Delete dépend largement des exigences particulières de votre projet. Voici des conseils pour vous aider à faire le choix approprié :

‍

Choisissez le Hard Delete lorsque la sécurité des données est une priorité absolue. Par exemple, dans les applications de santé ou financières, il est préférable d'opter pour une suppression définitive.

‍

Si la récupération des données supprimées est essentielle, le Soft Delete est la meilleure option. Cela s'applique notamment aux systèmes où les erreurs de suppression peuvent se produire.

‍

Pour respecter les réglementations strictes qui exigent la suppression permanente de données, le choix du Hard Delete est nécessaire.

‍

Si vous avez besoin de conserver un historique complet des données, optez pour le Soft Delete. Cela est particulièrement utile pour l'audit et la conformité.

Si vous souhaitez optimiser la performance de la base de données en réduisant la charge, le Hard Delete peut être plus approprié, car il libère de l'espace.

‍

Envisagez le Soft Delete lorsque vous prévoyez d'introduire de nouvelles fonctionnalités ou des changements structurels dans la base de données, car il permet une transition en douceur.

En évaluant soigneusement les besoins de votre projet en fonction de ces critères, vous pourrez prendre une décision éclairée quant à l'utilisation du Hard Delete ou du Soft Delete. Gardez à l'esprit que dans certains cas, une combinaison des deux méthodes peut également être envisagée pour répondre aux besoins spécifiques de votre application.

‍

Le choix entre Hard Delete et Soft Delete est une décision cruciale dans la gestion des données. Chacune de ces méthodes présente des avantages distincts, et le choix dépend des besoins spécifiques de votre projet.

‍

Le Hard Delete offre une sécurité maximale en supprimant définitivement les données, ce qui le rend idéal pour les applications où la confidentialité et la conformité légale sont essentielles. Cependant, il faut être prudent, car les données sont irrécupérables.

‍

Le Soft Delete, quant à lui, permet la récupération des données supprimées, préservant ainsi un historique complet et offrant une protection contre les erreurs humaines. Il est particulièrement adapté aux systèmes où la récupération des données est une priorité.

‍

Le choix entre ces deux méthodes peut également dépendre des contraintes de performance de votre base de données et de la flexibilité nécessaire pour les futures modifications.

‍

En fin de compte, il n'y a pas de réponse universelle. Il est essentiel d'évaluer les besoins de votre projet et de choisir la méthode qui répond le mieux à ces exigences spécifiques. Dans certains cas, une combinaison des deux méthodes peut également être envisagée pour une gestion des données supprimées plus complète.

‍

Quelle que soit la méthode choisie, la gestion des données supprimées est une composante essentielle de tout système de base de données bien conçu. En comprenant les avantages du Hard Delete et du Soft Delete, vous êtes mieux préparé à prendre des décisions éclairées pour garantir la sécurité et la flexibilité de votre application.

‍

N'hésitez pas à partager vos propres expériences et réflexions sur ce sujet dans les commentaires ci-dessous. La gestion des données supprimées est une discipline en constante évolution, et l'échange d'idées peut bénéficier à l'ensemble de la communauté de développement.

‍

‍

L'univers des applications mobiles évolue à une vitesse fulgurante, où chaque seconde compte et chaque expérience utilisateur peut faire la différence.

‍

Au cœur de cette révolution numérique, React Native, un framework développé par Meta (anciennement Facebook), se distingue comme un outil puissant permettant de créer des applications mobiles performantes et esthétiquement agréables pour iOS et Android à partir d'un seul et même code. Cet article se propose de vous faire découvrir cinq applications innovantes développées avec React Native. De la communication instantanée avec Discord à la gestion de vos inspirations avec Pinterest, en passant par l'amélioration de l'expérience de voyage avec Airbnb, le contrôle de votre véhicule Tesla, et le suivi de vos campagnes publicitaires Facebook avec Meta Ads Manager, ces exemples illustrent parfaitement comment React Native révolutionne le monde des applications mobiles. Découvrons ensemble comment ce framework JavaScript aide les développeurs à réduire les coûts et le temps de développement tout en offrant aux utilisateurs des applications rapides, réactives et visuellement attrayantes.

1. Discord : Un hub de communication unifié

Dans le monde numérique d'aujourd'hui, Discord s'est rapidement imposé comme une plateforme de communication incontournable, offrant chat vocal, vidéo, et texte aux communautés et amis du monde entier. Grâce à React Native, Discord a réussi à étendre son expérience utilisateur unique à des millions d'utilisateurs mobiles sur iOS et Android, tout en maintenant une performance et une qualité exceptionnelles.

React Native a permis à Discord de partager une grande partie de son code entre les plateformes mobiles, réduisant ainsi le temps de développement et les efforts nécessaires pour maintenir l'application. Cette approche a également facilité l'implémentation de fonctionnalités complexes telles que le chat en temps réel, les notifications push, et le streaming vocal en direct, garantissant ainsi que les utilisateurs bénéficient d'une expérience fluide et cohérente, quelle que soit la plateforme qu'ils utilisent.

La gestion des notifications en temps réel sur des appareils multiples était l'un des défis majeurs. React Native a offert à Discord une manière efficace de gérer ce flux de données en temps réel grâce à sa compatibilité native avec les systèmes d'exploitation mobiles. Voici un exemple simplifié de code illustrant comment les notifications push peuvent être gérées dans une application React Native :

import { PushNotificationIOS } from 'react-native';
 
PushNotificationIOS.addEventListener('notification', function(notification){
  console.log('You have received a new notification!', notification);
});
 
function sendNotification() {
  PushNotificationIOS.presentLocalNotification({
	alertBody: 'Votre ami a envoyé un message sur Discord!',
  });
}

‍

Cet extrait montre comment une application React Native peut écouter et réagir aux notifications push, un élément clé pour maintenir les utilisateurs engagés et informés dans l'environnement rapide de Discord.

L'adoption de React Native a permis à Discord non seulement de synchroniser l'expérience utilisateur entre les versions de bureau et mobiles mais aussi d'introduire des mises à jour simultanées sur toutes les plateformes. Cela signifie que les utilisateurs mobiles bénéficient des mêmes fonctionnalités et de la même réactivité que ceux sur PC, contribuant ainsi à renforcer la communauté et l'engagement global sur Discord.

L'utilisation de React Native par Discord est un exemple parfait de la manière dont les technologies modernes peuvent être utilisées pour créer des applications mobiles complexes et performantes.

‍

2. Airbnb : Réinventer l'expérience de voyage

Airbnb, le géant de la location de logements de vacances en ligne, a choisi React Native pour une partie de son développement mobile, cherchant à unifier l'expérience utilisateur sur les plateformes iOS et Android. Cette décision illustre la volonté d'Airbnb d'optimiser et de rendre plus agile le développement de nouvelles fonctionnalités, tout en maintenant une expérience utilisateur homogène et de haute qualité.

La transition vers React Native a été motivée par le besoin d'accélérer le développement de l'application mobile tout en réduisant les coûts. Grâce à React Native, Airbnb a pu réutiliser le code entre les plateformes mobiles et web, optimisant ainsi les ressources et réduisant significativement le temps de développement. Cette approche a également facilité la mise à jour et l'amélioration de l'application, permettant à Airbnb de répondre rapidement aux besoins des utilisateurs.

Un des principaux défis rencontrés par Airbnb était de maintenir une expérience utilisateur fluide et réactive, en particulier pour les fonctionnalités riches en contenu comme les galeries de photos et les cartes interactives. React Native a offert des solutions performantes à ces problématiques, notamment grâce à des composants optimisés et à la possibilité d'intégrer du code natif pour les parties les plus exigeantes de l'application. Voici un exemple de code illustrant l'intégration d'une galerie de photos dans une application React Native :

import React from 'react';
import { FlatList, Image, StyleSheet, View } from 'react-native';
 
export default const PhotoGallery = ({ photos }) => (
  <View style={styles.container}>
	<FlatList
  	data={photos}
  	renderItem={({ item }) => (
    	<Image source={{ uri: item.url }} style={styles.photo} />
  	)}
  	keyExtractor={item => item.id}
  	horizontal
	/>
  </View>
);
 
const styles = StyleSheet.create({
  container: {
	height: 200,
  },
  photo: {
	width: 200,
	height: 200,
	marginRight: 10,
  },
});

Cet exemple montre comment un composant de galerie de photos peut être implémenté dans React Native, offrant une expérience fluide et réactive aux utilisateurs souhaitant explorer les images des logements disponibles sur Airbnb.

L'adoption de React Native par Airbnb a significativement amélioré l'expérience utilisateur sur mobile. Les utilisateurs bénéficient désormais de performances optimales et d'une interface utilisateur cohérente sur les différentes plateformes. De plus, React Native a permis à Airbnb de déployer rapidement de nouvelles fonctionnalités, assurant ainsi que l'application répond toujours mieux aux attentes des voyageurs et des hôtes.

L'expérience d'Airbnb avec React Native démontre l'efficacité de ce framework pour le développement d'applications mobiles complexes et performantes.

‍

3. Tesla : Connectivité avancée pour les propriétaires de véhicules

Tesla, pionnière dans l'industrie des véhicules électriques, a également embrassé React Native pour offrir à ses propriétaires une application mobile riche en fonctionnalités, permettant de contrôler et de surveiller leurs véhicules à distance. Cette application représente un élément clé de l'expérience Tesla, reflétant l'innovation et la technologie de pointe de la marque.

L'utilisation de React Native par Tesla montre comment le framework peut être étendu au-delà des applications traditionnelles pour englober des fonctionnalités IoT (Internet of Things) avancées. React Native a permis à Tesla de développer une application performante qui interagit en temps réel avec ses véhicules, offrant des fonctionnalités telles que le contrôle à distance de la température, le verrouillage et déverrouillage des portes, et le suivi de la localisation du véhicule.

Un des défis majeurs pour Tesla était de garantir que l'application puisse communiquer de manière fiable et sécurisée avec les véhicules. Pour cela, Tesla a intégré des interfaces de programmation d'application (API) sécurisées, permettant à l'application React Native de transmettre des commandes et de recevoir des données du véhicule en temps réel. Voici un exemple simplifié de code montrant comment une commande peut être envoyée à un véhicule Tesla à partir de l'application :

import React, { useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
 
export default const VehicleControl = ({ apiToken, vehicleId }) => {
  const [status, setStatus] = useState('Disconnected');
 
  const unlockDoors = async () => {
	const response = await fetch(`https://api.tesla.com/api/1/vehicles/${vehicleId}/command/door_unlock`, {
  	method: 'POST',
  	headers: {
    	'Authorization': `Bearer ${apiToken}`,
    	'Content-Type': 'application/json',
  	},
	});
 
	if (response.ok) {
  	setStatus('Unlocked');
	} else {
  	setStatus('Failed to unlock');
	}
  };
 
  return (
	<View style={styles.container}>
  	<Button title="Unlock Doors" onPress={unlockDoors} />
  	<Text>{status}</Text>
	</View>
  );
};
 
const styles = StyleSheet.create({
  container: {
	flex: 1,
	justifyContent: 'center',
	alignItems: 'center',
  },
});

Cet exemple illustre comment les propriétaires de Tesla peuvent interagir avec leur véhicule directement depuis leur smartphone, en utilisant React Native pour envoyer des commandes sécurisées via l'API de Tesla.

‍

‍

L'application Tesla, développée avec React Native, enrichit considérablement l'expérience du propriétaire en offrant une interface intuitive pour accéder à une multitude de contrôles et d'informations sur le véhicule. Cette intégration harmonieuse de la technologie mobile et automobile souligne l'engagement de Tesla envers l'innovation et la satisfaction du client, en mettant la technologie de pointe au bout des doigts des utilisateurs.

La réussite de l'application Tesla démontre le potentiel de React Native pour développer des applications mobiles qui vont au-delà du cadre traditionnel, en s'étendant aux domaines de l'IoT et de l'interaction véhicule-utilisateur.

‍

4. Pinterest : Réinventer le partage d'inspirations

Pinterest est une application mobile très populaire utilisée par des millions de personnes pour trouver de l'inspiration, des idées pour leurs intérêts, hobbies et projets. La plateforme a intégré React Native de façon progressive dans son application iOS et Android pour optimiser le développement de nouvelles fonctionnalités et améliorer l'expérience utilisateur sur les deux plateformes.

L'un des plus grands défis de Pinterest était de maintenir une expérience utilisateur fluide et cohérente à travers les différentes plateformes tout en intégrant de nouvelles fonctionnalités de manière rapide et efficace. L'utilisation de React Native a permis à Pinterest de partager une grande partie de son code entre iOS et Android, ce qui a significativement réduit le temps de développement et les coûts associés.

Voici un exemple de composant React Native qui pourrait être utilisé pour afficher une grille de photos inspirantes, typique de Pinterest :

import React from 'react';
import { View, Image, StyleSheet, ScrollView } from 'react-native';
 
export default const InspirationGrid = ({ images }) => (
  <ScrollView contentContainerStyle={styles.grid}>
	{images.map((img, index) => (
  	<Image key={index} source={{ uri: img.url }} style={styles.photo} />
	))}
  </ScrollView>
);
 
const styles = StyleSheet.create({
  grid: {
	flexDirection: 'row',
	flexWrap: 'wrap',
	justifyContent: 'center',
  },
  photo: {
	width: 100,
	height: 100,
	margin: 2,
  },
});

‍

Ce code montre comment un simple composant React Native peut être utilisé pour créer une grille d'images, permettant aux utilisateurs de Pinterest de parcourir visuellement diverses inspirations rapidement et efficacement.

Pinterest utilise également React Native pour améliorer les interactions utilisateur en rendant l'application plus réactive et en réduisant les temps de chargement. Cela inclut l'amélioration des transitions et animations qui rendent l'exploration de contenus plus intuitive et engageante.

import { Animated } from 'react-native';
 
// Animation pour un effet de zoom lors du tap sur une image
const scaleValue = new Animated.Value(1);
 
const onPressImage = () => {
  Animated.spring(scaleValue, {
	toValue: 0.9,
	friction: 3,
	useNativeDriver: true,
  }).start(() => {
	Animated.spring(scaleValue, {
  	toValue: 1,
  	friction: 3,
  	useNativeDriver: true,
	}).start();
  });
};

Cet extrait de code démontre comment utiliser les animations de React Native pour ajouter un effet de zoom dynamique lorsqu'une image est pressée, améliorant ainsi l'engagement et l'expérience utilisateur sur l'application.

L'intégration de React Native dans l'application Pinterest a non seulement permis d'améliorer la performance et la cohérence entre les plateformes mais aussi de réduire le temps nécessaire pour tester et déployer de nouvelles fonctionnalités.

‍

‍

5. Meta Ads Manager : Optimisation de la gestion publicitaire

Meta Ads Manager (ou Publicité Facebook en français) est un exemple éminent de l'utilisation de React Native pour une application largement utilisée et critique pour les affaires. Conçue pour permettre aux entreprises et aux individus de gérer leurs campagnes publicitaires sur Facebook, cette application illustre parfaitement comment React Native facilite le développement rapide et efficace d'applications complexes et performantes qui nécessitent une gestion de données en temps réel et une interaction utilisateur intensive.

Un défi majeur pour Meta Ads Manager était de fournir une expérience utilisateur cohérente et performante sur les différentes plateformes mobiles, tout en intégrant des fonctionnalités complexes de gestion de campagnes publicitaires. React Native a permis de développer une application unique qui fonctionne de manière fluide à la fois sur iOS et Android, réduisant ainsi les coûts et le temps de développement associés au maintien de deux bases de code séparées.

Exemple de code pour une vue simplifiée de la gestion des campagnes dans Meta Ads Manager :

‍

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
 
export default const CampaignItem = ({ campaign, onEditPress }) => (
  <View style={styles.container}>
	<Text style={styles.title}>{campaign.name}</Text>
	<Text style={styles.status}>Statut: {campaign.status}</Text>
	<Button title="Modifier" onPress={() => onEditPress(campaign.id)} />
  </View>
);
 
const styles = StyleSheet.create({
  container: {
	padding: 10,
	borderBottomWidth: 1,
	borderBottomColor: '#ccc',
  },
  title: {
	fontSize: 16,
	fontWeight: 'bold',
  },
  status: {
	fontSize: 14,
	color: '#666',
  },
});

Ce composant affiche les informations clés d'une campagne publicitaire et permet une interaction rapide pour la modification, illustrant comment React Native peut être utilisé pour créer des interfaces utilisateur dynamiques et interactives.

L'application Meta Ads Manager nécessite non seulement une grande réactivité de l'interface mais aussi une gestion efficace des données en temps réel pour afficher les performances des campagnes publicitaires. React Native offre des outils puissants pour optimiser les performances, comme le chargement paresseux des données et la mise en cache des résultats, qui améliorent significativement l'expérience utilisateur.

‍

import { ScrollView, View, Text, ActivityIndicator } from 'react-native';
 
export default const CampaignList = ({ campaigns, isLoading }) => (
  <ScrollView>
	{isLoading ? (
  	<ActivityIndicator size="large" color="#0000ff" />
	) : (
  	campaigns.map(campaign => <CampaignItem key={campaign.id} campaign={campaign} />)
	)}
  </ScrollView>
);

Cet exemple montre comment les composants de React Native, tels que ScrollView et ActivityIndicator, peuvent être utilisés pour construire une expérience utilisateur fluide qui gère efficacement les états de chargement des données.

Meta Ads Manager est un exemple brillant de la manière dont React Native peut être exploité pour développer des applications mobiles complexes, largement utilisées et critiques pour le commerce.

En explorant ces cinq applications diverses - de Discord à Meta Ads Manager, en passant par Airbnb, Tesla, et Pinterest – nous avons pu constater la puissance et la flexibilité de React Native comme outil de développement d'applications mobiles. Chacun de ces exemples montre comment React Native permet de créer des expériences utilisateur riches et performantes sur iOS et Android à partir d'un code partagé, simplifiant le processus de développement tout en offrant une excellente qualité et réactivité.

React Native se distingue par sa capacité à réduire les délais de développement, à faciliter la maintenance des applications et à offrir une expérience utilisateur homogène sur différentes plateformes. Que ce soit pour améliorer la connectivité entre les véhicules et leurs propriétaires, fournir une plateforme de bien-être mental accessible, ou encore permettre aux créateurs de gérer leur présence en ligne, React Native se révèle être un choix stratégique pour les développeurs cherchant à innover et à répondre aux besoins des utilisateurs modernes.

‍

Ces exemples d'applications en React Native illustrent parfaitement comment la technologie peut être utilisée pour répondre à des besoins variés et complexes, ouvrant la voie à de nouvelles possibilités dans le monde du développement d'applications mobiles. Avec React Native, le futur des applications mobiles semble prometteur, marqué par une innovation continue et une expérience utilisateur toujours plus enrichie.

‍

Hola, je vais vous présenter le début d'une nouvelle série d'articles dédiées à la construction d'un projet Web et Mobile en mettant à profit l'Architecture Hexagonale. Durant toute cette série, nous allons explorer comment la logique métier peut être partagée et gérée efficacement à travers différentes plateformes.

‍

Nos objectifs

‍

Nous allons avoir plusieurs objectifs à atteindre au fil de ce projet :

• Apprendre comment développer une application Web et Mobile à la fois en mettant à profit les technologies modernes (Nx, Expo, Remix, Vitest, etc.)
• Comprendre les principes de l'Architecture Hexagonale et comment l'appliquer pour optimiser le partage de la logique métier
• Gagner en compétence et en confiance pour lancer votre propre projet multi-plateforme, tout en développant une base de code propre et maintenable

‍

‍

La structure de la série

‍

Comme je l'ai dis au début de ce premier article, ce projet donnera lieu à une série d'articles qui sera structurée de cette manière :

• Partie 1 (cet article) : présentation du projet et mise en place d'un monorepo avec Nx
• Partie 2 : développer sans UI avec l'Architecture Hexagonale
• Partie 3 : partager de la logique métier et des composants entre le Web et le Mobile
• Partie 4 : refactor serein avec les tests et l'Architecture Hexagonale
• Partie 5 : déploiement Web et Mobile avec Netlify et EAS

‍

Le projet

‍

Le projet qui va nous aider à mettre en avant l'Architecture Hexagonale est un outil de gestion de budget que l'on appellera broney (le bro qui t'aides à gérer ta money 😎). Cet outil sera composé de deux applications, une première, web, développée avec Remix et une deuxième, mobile, développée avec Expo. Nous aurons donc 2 applications React et React Native avec un package TypeScript qui contiendra la logique métier partagée entre ces 2 applications.

‍

Stack

La Stack que j'ai choisi est très subjective, on y trouve quelques frameworks qui mérite selon moi plus de lumière (Remix notamment et Nx face à NextJS et Turborepo). Néanmoins il est important de comprendre que peu importe les frameworks et libraires utilisées, le coeur de l'application sera complètement agnostique et réutilisable dans n'importe quel contexte.

• Monorepo avec Nx
• Application mobile avec Expo
• Application web avec Remix
• Testing avec Vitest
• Style avec Tailwind pour le web et twrnc pour le mobile
• Animation avec Framer Motion pour le web et React Native Reanimated pour le mobile
• Déploiement de l'application web avec Netlify
• Base de données, authentification, etc. avec Supabase
• Formatage du code avec Prettier
• Validation du code avec ESLint
• CI/CD avec les GitHub Actions
• Gestion d'état avec Zustand
• Gestion des formulaires avec React Hook Form
• Validation des types avec Zod
• Logging avec Sentry
• Traductions avec FormatJS
• Utilitaire de date avec date-fns

‍

Fonctionnalités

Pour mettre en avant l'Architecture Hexagonale nous allons avoir besoin de développer quelques fonctionnalités pour avoir de la logique métier. Nous allons nous focus sur les fonctionnalités suivantes :

• Mettre en place le storage : react native mmkv pour le mobile et localStorage pour le web
• Gérer les catégories : lister, ajouter, modifier et supprimer
• Gérer les portefeuilles : lister, ajouter, modifier et supprimer
• Gérer les transactions d'un compte : lister, ajouter, modifier et supprimer
• Authentification avec Supabase
• Dynamiser toute l'app avec Supabase

‍

Modèle de données

Pour mettre en place les fonctionnalités nous allons avoir besoin des entités suivantes :

• Wallet, un portefeuille qui a un solde négatif ou positif (par exemple on peut avoir le portefeuille "Compte Principal Julien" qui a un solde positif de 1000€)
• Category, des catégories servant à préciser le contexte des transactions faites (par exemple on a les catégories "Maison", "Restaurants" et "Divertissements")
• Transaction, les transactions sont liées à un portefeuille et à une catégorie pour savoir où l'argent est transférée (par exemple on a une transaction du portefeuille "Compte Principal Julien" de 50€ sur la catégorie "Restaurants")

‍

Mise en place du monorepo avec NX

‍

Initialisation du projet

Nous allons utiliser les commandes de Nx pour initialiser notre projet.

➜ npx create-nx-workspace@latest

✔ Where would you like to create your workspace? · broney
✔ Which stack do you want to use? · none
✔ Package-based monorepo, integrated monorepo, or standalone project? · package-based
✔ Enable distributed caching to make your CI faster · Yes

‍


Avec cette commande nous avons le projet Nx configuré de base et sans libs pour le moment. Nous allons travailler avec le style Package-Based Repos qui nous offre plus de liberté en limitant le couplage avec Nx si jamais on souhaite changer facilement d'outil de monorepo. Cela permet également d'avoir des node_modules différents pour chaque app ou lib du projet. En savoir plus sur les différents style d'implémentation de Nx.

‍

‍

Création de la lib core

Nous allons maintenant ajouter notre première lib, la plus importante : core. En effet, c'est dans cette lib que nous allons mettre notre Architecture Hexagonale et la logique métier qui sera utilisée par nos applications Web et Mobile.

➜ nx g @nx/js:lib libs/core

✔ Which unit test runner would you like to use? · vitest
✔ Which bundler would you like to use to build the library? Choose 'none' to skip build setup. · rollup

‍

Cette commande nous a généré une lib avec le framework de test Vitest, une config eslint et prettier que l'on peut adapter à nos preferences que je ne détaillerai pas ici.

Il est possible de compiler notre lib avec la commande nx core build et d'executer les tests avec nx core test.

‍

‍

Mise en place de la CI

Maintenant que nous avons les tests setup ainsi que prettier et eslint, il est pertinent de mettre en place une CI pour avoir du feedback régulier sur la bonne tenue du code. Pour la CI nous allons simplement suivre la documentation de Nx et utiliser les GitHub Actions.

Nous allons donc simplement ajouter un fichier .github/workflows/ci.yml assez simple qui peut être étoffé.

name: CI
on:
	push:
	branches:
	- main
	pull_request:

jobs:
	main:
		runs-on: ubuntu-latest
		steps:
			- uses: actions/checkout@v4
				with:
					fetch-depth: 0
			# Cache node_modules
			- uses: actions/setup-node@v3
				with:
					node-version: 20
					cache: 'yarn'
			- run: yarn --no-progress --frozen-lockfile
			- uses: nrwl/nx-set-shas@v4.0.4

			- run: npx nx format:check
			- run: npx nx affected -t lint,test,build --parallel=3

‍

Cette simple CI permet vérifier le bon formatage prettier, d'effectuer les validations eslint et de build et de s'assurer que les tests sont sans erreurs.

‍

‍

Structure du projet

‍

Rentrons plus en détails dans ce que l'on vise comme structure de projet une fois les apps mise en place et notre lib core développée avec l'architecture hexagonale.

- apps

    - mobile : notre application React Native développée avec Expo
    - web : notre application React développée avec React

- libs
    - ui : nos composants React et React Native utilisés par les apps web et mobile
    - tailwind : notre configuration tailwind utilisée par les apps web et mobile ainsi que la lib ui
    - core : notre architecture hexagonale qui contient le coeur de notre application et toute la logique métier réutilisable par les apps web et mobile

‍

Pour aller plus loin, on peut très bien envisager d'avoir une app en plus pour un Storybook.

La lib qui va nous intéresser et la lib core évidemment. Elle sera structurée de cette manière :

- libs
    - core
         - src
              - wallet
                   - tests
                        - wallet.service.test.ts : la logique métier testées
                        - wallet.test.ts : les règles métiers testées
                   - domain
                        - wallet.ts : l'entité qui représente les portefeuilles et qui contient des règles métiers
                        - wallet.repository.ts: le contrat qui détermine comment manipuler l'entité pour lister, ajouter, etc.
                        - wallet.service.ts : le service qui consume une implémentation de contrat‍
                   - infrastructure
                        - in-memory-wallet.repository.ts : une implémentation du contrat
                        - local-storage-wallet.repository.ts : idem
                        - supabase-wallet.repository.ts : idem
                   - user-interface
                        - wallet.store.ts : un store zustand vanilla, utilisable dans n'importe quel environnement javascript et qui sera utilisé dans nos apps
              - category
                   - ...
           - ...

‍

Nous verrons le contenu de chaque fichiers ainsi que les détails du fonctionnement de ces derniers dans le prochain article !

‍

‍

Conclusion

‍

Nous avons terminé le premier article de cette série sur le développement d'une application web et mobile avec l'Architecture Hexagonale et le partage de la logique métier et des composants UI.

Dans cette première partie nous avons vu comment mettre un place un monorepo et nous avons pourquoi et comment ce monorepo va nous aider à partager la logique métier entre nos différentes applications. Nous avons également bien délimité le périmètre et les fonctionnalités attendues pour notre première version, le MVP, de broney.

Enfin, à la fin de cet article nous avons commencé à entrevoir la structure du projet en mettant en évidence l'Architecture Hexagonale, ce sera le thème de la deuxième partie : Développer sans UI avec l'Architecture Hexagonale.

‍