Hånende monorepo

(22. nov 2020)

Dette er et faktisk bilde av utviklingsmiljøet vårt etter at vi opprettet en mock-server for vår repo

With en økende mengde tjenester som blir opprettet på vår backend, vår frontend-utvikling begynte å bli påvirket av hvor mange repoer og servere du trengte å installere lokalt for å få frontend i gang. Og hvis vi også tar hensyn til vår ( frontend arkitektur omarbeid ), visste vi at vi måtte ta grep for å få en rask og jevn utviklingsopplevelse. Det er der vår monorepo-mock-server kommer inn.

Litt om LumApps

Hvis du ikke vet om LumApps , er vi en globalt teknologiselskap med R & D-team i Frankrike som gir våre kunder en SaaS Digital Workplace løsning, som skaper et helhetlig arbeidsområde, integrert med flere suiter og samarbeidsverktøy. Vil du vite litt mer om oss? Gå over til LumApps.com og ta en titt!

Det vi trengte

Inntil et par år siden, vår frontend-applikasjon var ganske grei å lansere i ditt eget utviklingsmiljø for å starte koding. Du henrettet frontend og backend, og det var det! Men siden selskapet og applikasjonen har vokst eksponentielt de siste par årene, med nye tjenester opprettet og nye utviklere som kommer inn for å utvikle produktet, var det ikke så enkelt å starte programmet lokalt som det pleide å være.

Disse nye tjenestene betydde at du ville trenge å konfigurere dem på maskinen din, noe som ikke bare tok tid å sette opp, men også en mye CPU, og skaper dermed en veldig tøff kombinasjon for utviklingsmiljøene våre. Vi trengte et system som tillot oss å:

  • Fjern disse avhengighetene for tjenester for lokal utvikling og har en enkelt server som serverte dataene som frontend trengte for lokal utvikling, og dermed økte lokal utviklingstid 🚀
  • Lag et sett med data som alle team kan gjenbruke for å utvikle funksjonaliteten. Dette betydde at delte dataene på tvers av teamene og la disse lagene lage sine egne datasett for å fjerne / legge til konfigurasjon for hver spesifikk teamkonfigurasjon 🛠
  • Ha et konsekvent sett med data som kan brukes på nytt for enhet- og integrasjonstester ✅

Hvordan vi gjorde det

Etter litt forskning , fant vi en smidig npm-modul kalt json-server som tillot oss å lage en fullstendig falsk REST API egentlig ingen konfigurasjon i det hele tatt. Det er virkelig et fantastisk verktøy , siden det ikke bare tillater å spotte data og opprette en server, men det gir mye kjerne-API-funksjoner ut av boksen, noe som gjør at dette verktøyet virkelig er neste nivå når det gjelder spott. Med den kan vi for eksempel utføre en POST for å opprette en ressurs og neste gang vi gjør en GET for å hente listen av ressurser, den nylig opprettede ressursen ville være der! Det tillater også å opprette express js mellomverk som kan brukes til å tilpasse forespørsler og svar, og gir oss full tilgang til å endre hva vi vil!

json-server

Få en full falsk REST API med null koding på mindre enn 30 sekunder

www.npmjs.com

På toppen av det opprettet vi en liten node js-fil som tillot oss å enkelt administrere disse mock filer på en monorepo.I utgangspunktet trenger json-server et json-inngangspunkt der mock-dataene lever, men siden vi bruker en monorepo-arkitektur, ville vi hver pakke for å ha sine egne mock-data så de er eierne av disse dataene, og dessuten lar det oss se tydelig sluttpunkter som en pakke bruker. Denne node-js-filen er et skript som er utført før json-server og den:

  • Går gjennom hver av pakkene i arbeidsområdet vårt og søker etter filer som heter api.json _mocks -mappen og kombinerer dem alle i en enkelt fil med alle dataene fra hver pakke. Det tar også hensyn til de andre json-server konfigurasjoner, for eksempel ruter eller mellomvare alt sammen på ett sted
En brukermappe med en undermappe kalt _mocks og 3 filer: api.json, routes.json og user.middleware.js
Slik ser brukerpakken ut med egne mocks definert
  • Skriver til en forhåndsdefinert mappe de kombinerte filene og kjører json-server med disse filene som inndata .
  • Alt dette utføres i en enkelt kommando garnhån oppretter filene og starter deretter json-server .
  • Vi tillot også hver modul å lage forskjellige scenarier for deres API-svar, som vi kaller tilsidesetter . Hver pakke kan opprette så mange overstyringer som de vil, som er en delmengde av dataene som API-en returnerer, med forskjellige verdier overstyrt og endret slik at APIen returnerer et annet scenario. Så for eksempel ser API-svaret vårt for varslingstjenesten slik ut:
Et API-svar for varslingstjenesten vår med nøkkelelementene, uleste varsler med verdien 5 og mer i sannhet
Vår varslingstjeneste returnerer en liste over varsler som skal vises, hvor mange av dem som ikke ble lest av brukeren, og hvis det er flere varsler å hente

Men hva om vi enkelt ville starte en frontend der brukeren ikke har noen varsler i det hele tatt? I så fall oppretter vi overstyringen no-notifications.api.json som overstyrer denne filen:

Et API-svar for varslingstjenesten vår med uleste varsler med verdien 0og mer i falsk
Overstyr for et scenario der det ikke er noen varsler for den nåværende brukeren

På mappenivå ser varslingspakken slik ut:

Vi har mange forskjellige scenarier for varslingssenteret vårt 😅

Og for å kunne bruke disse overstyringene, lanserer vi bare garn mocks -override no-notifications og vår node js-fil vil se etter de forskjellige overstyringene som er opprettet på hver pakke med navnet ingen varsler

og fusjonerer dype sine verdier med de opprinnelige verdiene for hvert API-svar. Dette betydde også at hvis det er andre pakker som ønsker å opprette en overstyring for ingen varsler scenariet, kan de også gjøre det ! De trenger bare å opprette en fil som heter no-notifications.api.json i _mocks -mappe.

Til slutt kan du også bruke flere overstyringer samtidig ved å gjøre garn mocks -override no-notifications, admin, no-posts. Dette vil bruke disse overstyringene etter hverandre og overstyre hver nøkkel i API-svarene i den angitte rekkefølgen.

Hva er neste

Vi trenger fortsatt å gå gjennom et par flere scenarier som vi ønsker å takle for å la utviklerne våre få en mer flytende utviklingsopplevelse:

  • Opprett mocks automatisk fra en ekstern backend-tjeneste.
  • Jevnlig validere disse spottene mot en ekstern backend-tjeneste for å kontrollere at API-svaret ikke endre.
  • Åpen kildekode denne lille noden js script så de av dere der ute som bruker monorepos og ønsker å gjenbruke denne koden kan gjøre det! Følg med for fremtidig utvikling om dette emnet!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *