Een monorepo bespotten

(22 nov.2020)

Dit is een actueel beeld van onze ontwikkelingsomgeving nadat we een nepserver voor onze opslagplaats hebben gemaakt

Met een toenemend aantal services werd gemaakt op onze backend, onze frontend-ontwikkeling werd beïnvloed door het aantal opslagplaatsen en servers dat u nodig had om lokaal te installeren om de frontend op gang te krijgen. En als we ook rekening houden met onze ( herziening van de frontend-architectuur ), wisten we dat we actie moesten ondernemen om een snelle en soepele ontwikkelingservaring. Dat is waar onze monorepo mock-server binnenkomt.

Een klein beetje over LumApps

Als je niets weet over LumApps , zijn we een wereldwijd technologiebedrijf met R & D-teams in Frankrijk die onze klanten een SaaS Digital Workplace -oplossing, die een holistische werkruimte creëert, geïntegreerd met verschillende suites en samenwerkingstools. Iets meer over ons weten? Ga naar LumApps.com en neem een ​​kijkje!

Wat we nodig hadden

Tot een paar jaar geleden was onze frontend-applicatie vrij eenvoudig te starten in uw eigen ontwikkelomgeving om te beginnen met coderen. Je hebt de frontend en de backend uitgevoerd, en dat was het! Maar sinds het bedrijf en de applicatie exponentieel zijn gegroeid in de afgelopen jaren, met nieuwe services gemaakt en nieuwe ontwikkelaars komen binnen om te ontwikkelen het product, was het lokaal opstarten van de applicatie niet zo eenvoudig als vroeger.

Deze nieuwe services betekenden dat u ze op uw machine moest configureren, wat niet alleen tijd kostte om in te stellen, maar ook een veel CPU, waardoor een erg moeilijke combinatie voor onze ontwikkelomgevingen ontstaat. We hadden een systeem nodig waarmee we:

  • die afhankelijkheden van services konden verwijderen voor lokale ontwikkeling en een enkele server hebben die de gegevens levert die de frontend nodig heeft voor lokale ontwikkeling, waardoor de lokale ontwikkelingstijd toeneemt 🚀
  • Creëer een gegevensset die alle teams zouden kunnen hergebruiken om hun functionaliteiten te ontwikkelen. Dit betekende dat die gegevens tussen teams deelden en die teams toestond hun eigen gegevenssets te maken om voor elke specifieke teamconfiguratie 🛠
  • Zorg voor een consistente set gegevens die kan worden hergebruikt voor eenheid en integratietests ✅

Hoe we het deden

Na wat onderzoek hebben we een handige npm-module gevonden met de naam json-server waarmee we een volledige nep-REST API konden maken met echt helemaal geen configuratie. Het is echt een geweldige tool , aangezien het niet alleen toelaat om gegevens te bespotten en een server te maken, maar het biedt ook veel kern API-functionaliteiten uit de doos, wat deze tool echt het volgende niveau maakt als het om spot gaat. Hiermee kunnen we bijvoorbeeld een POST uitvoeren om een ​​bron te maken en de volgende keer dat we een GET doen om de lijst op te halen van bronnen, zou de recent aangemaakte bron daar zijn! Het staat ons ook toe om express js middlewares te maken die kunnen worden gebruikt om te tweaken verzoeken en reacties, waardoor we volledige toegang hebben om te veranderen wat we willen!

json-server

Krijg een volledige nep-REST API met nulcodering in minder dan 30 seconden

www.npmjs.com

Bovendien hebben we een klein node js-bestand gemaakt waarmee we deze mock bestanden op een monorepo.In principe heeft json-server een json-ingangspunt nodig waar de nepgegevens leven, maar aangezien we een monorepo-architectuur gebruiken, wilden we elk pakket heeft zijn eigen nepgegevens dus zij zijn de eigenaren van die gegevens en bovendien kunnen we de eindpunten die een pakket verbruikt. Dit node js-bestand is een script dat wordt uitgevoerd vóór json-server en het:

  • Doorloopt elk van de pakketten in onze werkruimte en zoekt naar bestanden met de naam api.json op de _mocks map en combineert ze allemaal in een enkel bestand met alle gegevens van elk pakket. Het houdt ook rekening met de andere json-server configuraties, zoals routeert of middlewares , en plaatst ze allemaal samen op één locatie
Een gebruikersmap met een submap genaamd _mocks en 3 bestanden: api.json, routes.json en user.middleware.js
Zo ziet ons gebruikerspakket eruit met zijn eigen gedefinieerde mocks
  • Schrijft die gecombineerde bestanden naar een vooraf gedefinieerde map en voert json-server uit met die bestanden als invoer .
  • Dit wordt allemaal uitgevoerd in een enkele opdracht garen bespot die maakt de bestanden aan en start vervolgens json-server .
  • We hebben ook toegestaan ​​dat elke module verschillende scenarios voor hun API-reacties maakt, die we overschrijft . Elk pakket kan zoveel overschrijvingen maken als ze willen, die een subset zijn van de gegevens die de API retourneert, waarbij verschillende waarden worden overschreven en gewijzigd, zodat de API een ander scenario retourneert. Onze API-reactie voor onze notificatieservice ziet er bijvoorbeeld als volgt uit:
Een API-reactie voor onze notificatieservice met de sleutelitems, ongelezen meldingen met een waarde van 5 en meer in true
Onze meldingsservice retourneert een lijst met meldingen om weer te geven, hoeveel meldingen niet door de gebruiker zijn gelezen en of er meer meldingen zijn op te halen

Maar wat als we gemakkelijk een frontend willen starten waar de gebruiker helemaal geen notificaties heeft? In dat geval maken we de override no-notificaties.api.json die dit bestand overschrijft:

Een API-antwoord voor onze notificatieservice met de ongelezen notificaties met een waarde van 0 en meer in false
Overschrijven voor een scenario waarin er geen meldingen zijn voor de huidige gebruiker

Op mapniveau ziet ons meldingspakket er als volgt uit:

We hebben veel verschillende scenarios voor ons meldingscentrum 😅

En om deze overschrijvingen toe te passen, lanceren we garen bespot -override no-notificaties en ons node js-bestand zal zoeken naar de verschillende overschrijvingen die op elk pakket zijn gemaakt met de naam geen-meldingen

en voegen diep hun waarden samen met de originele waarden van elke API-reactie. Dit betekende ook dat als er andere pakketten zijn die een override willen maken voor het geen-meldingen scenario, ze dat ook kunnen doen ! Ze hoeven alleen een bestand met de naam no-Notificaties.api.json te maken in hun _mocks map.

Ten slotte kunt u ook meerdere overschrijvingen tegelijk toepassen door garen bespot -override geen-meldingen, admin, geen-berichten. Dit zal deze overschrijvingen een voor een toepassen, waarbij elke sleutel in de API-reacties in de opgegeven volgorde wordt overschreven.

Wat is het volgende

We moeten nog een aantal scenarios doorlopen die we willen aanpakken om onze ontwikkelaars een meer vloeiende ontwikkelingservaring te geven:

  • Maak automatisch nep van een externe backend-service.
  • Valideer periodiek tegen een externe back-endservice om te controleren of de API-reactie niet wijzigen.
  • Open source dit kleine knooppunt js script zodat degenen onder u die monorepos gebruiken en wil deze code hergebruiken kan het! Blijf op de hoogte voor toekomstige ontwikkelingen over dit onderwerp!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *