Maison > interface Web > js tutoriel > La pile ORL: Key Decisions pour créer une application Web complète dans 5

La pile ORL: Key Decisions pour créer une application Web complète dans 5

Patricia Arquette
Libérer: 2025-01-30 00:36:09
original
786 Les gens l'ont consulté

La création d'une application Web d'évolution complète nécessite une planification minutieuse et des décisions stratégiques dès le départ. Chaque choix, de la sélection du cadre à l'authentification, a un impact sur le coût, l'évolutivité et l'adaptabilité. Cet article détaille les choix de conception derrière la pile ORL, une solution de stockage complète réutilisable construite avec express, next.js et trpc.

The ENT Stack: Key Decisions for Building a Full-Stack Web App in 5

La pile ORL vise à être un projet unique et déployable qui partage le code entre le backend et le frontend tout en permettant un déploiement indépendant. Il est conçu pour la rentabilité (fonctionnant initialement sur des VP à faible coût) mais avec l'évolutivité pour gérer la croissance future. Pour éviter une refactorisation coûteuse, les décisions clés ont été rendues d'avance sur treize domaines critiques: sélection du cadre, structure du projet, couche API, environnement et configuration, base de données, authentification et autorisation, validation et gestion des erreurs, gestion de l'État, internationalisation (I18N), journalisation, envoi de l'envoi (envoi , Testing et DevOps.

La pile ORL est disponible en monorepo sur github et un package NPM pour un échafaudage de projet facile.

  • Référentiel GitHub
  • ? package npm
  • ? Guide de démarrage rapide
  • ? Documentation

(c'est 2025, et revisiter notre pile technologique est pratiquement un rituel annuel!)

Voici un résumé des principales décisions architecturales:

1. Sélection du framework

  • backend (express): choisi pour son minimalisme, sa stabilité et sa flexibilité. Des alternatives comme les NESTJ et les explosions ont été prises en compte, mais Express a fourni le meilleur équilibre de simplicité et de fiabilité prouvée.
  • frontend (next.js): Tire de la popularité de React et des fonctionnalités robustes de Next.js, un soutien communautaire solide et un support par Vercel assure la viabilité à long terme et l'accessibilité des développeurs.

2. Structure du projet (monorepo avec PNPM)

Une structure monorepo utilisant des espaces de travail PNPM facilite le partage de code entre le backend et le frontend, offrant une vitesse et une simplicité sur le fil ou les espaces de travail NPM. La structure du répertoire est organisée comme suit:

<code>apps
- backend
  - ...
- frontend
  - ...
packages
- shared
  - config
  - enums
  - i18n
  - schemas
  - scripts
  - services
  - types</code>
Copier après la connexion

3. Couche API (TRPC)

TRPC a été sélectionné sur REST et GraphQL pour son approche adaptée aux développeurs et sa sécurité de type de bout en bout. Son intégration transparente avec la requête Next.js et Tanstack minimise les plates-formes et améliore l'inférence du type.

4. Environnement et configuration (T3 Env, ESM, Tailwind)

T3 Env assure la validation statique des variables environnementales. Les classes de configuration personnalisées gèrent les paramètres statiques, tandis que ESM (modules ECMascript) prend en charge le partage de code entre le backend et le frontend. Le vent arrière CSS est utilisé pour le style frontal.

5. Base de données (MySQL avec Slizzle Orm)

Une base de données MySQL conforme à l'acide a été choisie pour la fiabilité et les garanties de transaction. Drizzle Orm fournit une approche légère et sécurisée de type pour les interactions de base de données.

6. Authentification et autorisation (Protection sans mot de passe et au niveau de l'itinéraire)

Un système d'authentification sans mot de passe personnalisé offre une flexibilité et un contrôle. La protection de base au niveau de l'itinéraire est implémentée à l'aide d'un indicateur protected dans la définition des routes.

7. Validation et gestion des erreurs (ZOD, TRPC ErrorFormatter, SONNER)

ZOD gère la validation d'entrée, tandis que les TRPC errorFormatter standardise la gestion des erreurs. Les toasts SONNER affichent les erreurs aux utilisateurs. Une personnalité ErrorService assure une manipulation des erreurs explicites.

8. Gestion de l'État (Zustand, Tanstack Query)

Zustand gère l'état mondial synchrone simple et synchrone, tandis que la requête Tanstack gère la gestion de l'État asynchrone.

9. Internationalisation (I18N) (solution personnalisée avec intl-messageFormat)

Une solution I18N personnalisée utilisant des fonctions de type type autonome avec la syntaxe des soins intensifs (via intl-messageformat) fournit une sécurité de type et une partage d'arborescence. Les routes sont également entièrement traduites.

10. Journalisation (pino)

Pino fournit une journalisation structurée pour le backend et le frontend, offrant une vitesse et une sortie cohérente.

11. Envoi (renvoi, guidon, MailSlurp)

RENNENCE simplifie l'envoi des e-mails, le guidon crée des modèles de messagerie et MailSlurp facilite les tests de messagerie.

12. Test (dramaturge, supertest)

Le dramaturge gère les tests API Frontend E2E et Backend (intégrés à SuperTest).

13. DevOps (AWS ECS, Terraform, GitHub Actions, S3, CloudFront) - Référentiel séparé

AWS ECS, Terraform, GitHub Actions, S3 et CloudFront Gérer l'infrastructure et CI / CD, détaillé dans un référentiel séparé.

La pile ORL est open source et accueille les contributions. Signaler les problèmes ou poser des questions via le référentiel GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal