Mocking a monorepo (Čeština)

(22. listopadu 2020)

Toto je skutečný obrázek našeho vývojového prostředí poté, co jsme vytvořili falešný server pro naše repo

S rostoucí množství služeb , které se vytváří na našem backendu, začal mít vývoj frontendu vliv na to, kolik repozitářů a serverů potřebujete nainstalovat lokálně, aby bylo možné spustit frontend. A pokud vezmeme v úvahu také naši ( přepracování frontendové architektury ), věděli jsme, že musíme přijmout opatření, abychom měli rychlý a plynulý vývoj. To je místo, kde přichází náš falešný server Monorepo.

Trochu o LumApps

Pokud nevíte o LumApps , jsme globální technologická společnost s R & D týmy ve Francii, která poskytuje našim zákazníkům SaaS Digital Workplace řešení, které vytváří holistický pracovní prostor integrovaný s několika sadami a nástroji pro spolupráci. Chcete o nás vědět trochu víc? Přejděte na LumApps.com a podívejte se!

Co jsme potřebovali

Až na pár let Předtím byla naše frontendová aplikace docela přímočará, aby se spustila ve vašem vlastním vývojovém prostředí a začalo se kódováním. Provedli jste frontend a backend a bylo to! Ale protože společnost a aplikace za posledních pár let exponenciálně rostly, vytvořeny nové služby a noví vývojáři přicházející rozvíjet lokální spuštění aplikace už nebylo tak snadné jako dřív.

Tyto nové služby znamenaly, že je budete muset nakonfigurovat ve svém počítači, což nejenže zabralo čas na nastavení, ale také spousta CPU, což vytváří opravdu tvrdou kombinaci pro naše vývojová prostředí. Potřebovali jsme systém, který nám umožnil:

  • Odebrat tyto závislosti služeb pro místní rozvoj a mít jeden server , který sloužil datům, která frontend potřeboval pro místní rozvoj, a tím prodloužil čas místního rozvoje 🚀
  • Vytvořte sadu dat, která všechny týmy mohou znovu použít za účelem rozvoje svých funkcí. To znamenalo sdílení těchto údajů mezi týmy a umožnění těmto týmům vytvářet vlastní datové soubory, aby bylo možné odebrat / přidat konfiguraci pro každý konkrétní konfigurace týmu 🛠
  • mít konzistentní sadu dat , která lze znovu použít pro testy jednotek a integrace ✅

jak jsme to udělali

Po průzkumu , našli jsme šikovný modul npm s názvem json-server , což nám umožnilo vytvořit úplné falešné REST API s opravdu žádná konfigurace. Je to opravdu úžasný nástroj , který umožňuje nejen zesměšňovat data a vytvořit server, ale poskytuje spoustu základní funkce API ihned po vybalení, díky čemuž je tento nástroj opravdu další úroveň , pokud jde o zesměšňování. S ním bychom mohli například spustit POST a vytvořit zdroj a příště uděláme GET pro načtení seznamu zdrojů, nedávno vytvořený zdroj by tam byl! Umožňuje nám také vytvořit expresní js middlewares , které lze použít k vyladění požadavky a odpověď, což nám dává plný přístup ke změně, cokoli chceme!

json-server

Získejte falešné rozhraní REST API pomocí nulové kódování za méně než 30 sekund

www.npmjs.com

Kromě toho jsme vytvořili malý soubor JS s uzlem, který nám umožnil tyto falešné zprávy snadno spravovat soubory na monorepo.V podstatě json-server potřebuje vstupní bod json, kde falešná data žijí, ale protože používáme monorepo architekturu, chtěli jsme každý balíček má svá vlastní falešná data , takže jsou vlastníky těchto údajů a navíc nám umožňuje jasně vidět koncové body, které balíček spotřebovává. Tento soubor js uzlu je skript spuštěný před json-server a:

  • Prochází každý z balíčků v našem pracovním prostoru a hledá soubory s názvem api.json na _mocks a všechny zkombinuje do jednoho souboru se všemi daty z každého balíčku. Zohledňuje také další json-server konfigurace, například trasy nebo middlewares a umístí je vše dohromady na jednom místě
Uživatelská složka s podsložkou s názvem _mocks a 3 soubory: api.json, route.json a user.middleware.js
Takto vypadá náš uživatelský balíček s definovanými vlastními falešnými
  • Zapíše tyto kombinované soubory do předem definované složky a provede json-server s těmito soubory jako vstup .
  • To vše se provádí v jediném příkazu zesměšňovat příze který vytvoří soubory a poté spustí json-server .
  • Každému modulu jsme také umožnili vytvořit různé scénáře pro své odpovědi API, které nazýváme přepíše . Každý balíček může vytvořit tolik přepsání, kolik chtějí, což je podmnožina dat, která API vrací, s přepsáním různých hodnot a změněných tak, aby API vrací jiný scénář. Například naše odpověď API pro naši službu oznámení vypadá takto:
Odpověď API pro naši službu oznámení s položkami kláves, nepřečtená oznámení s hodnotou 5 a více ve skutečnosti
Naše služba oznámení vrací seznam oznámení, která se mají zobrazit, kolik z nich uživatel nečetl a pokud existuje více oznámení načíst

Ale co kdybychom chtěli snadno spustit frontend, kde uživatel nemá vůbec žádná oznámení? V takovém případě vytvoříme přepsání no-notifications.api.json , které přepíše tento soubor:

Odpověď API pro naši službu oznámení s nepřečtenými oznámeními s hodnotou 0 a více ve falešném
Přepsat scénář, kde pro aktuálního uživatele nejsou žádná oznámení

Na úrovni složky vypadá náš balíček oznámení takto:

Pro naše oznamovací centrum máme mnoho různých scénářů 😅

A abychom mohli tyto přepsání použít, stačí spustit yarn mocks -override no-notifications a náš soubor js uzlu bude hledat různá přepsání vytvořená v každém balíčku s názvem no-notifications

a sloučit své své hodnoty s původními hodnotami každé odpovědi API. To také znamenalo, že pokud existují další balíčky, které chtějí vytvořit přepsání scénáře no-notifications , mohou to také udělat ! Potřebují pouze vytvořit soubor s názvem no-notifications.api.json ve svých _mocks složka.

Nakonec můžete také použít několik přepsání najednou provedením yarn mocks -override no-notifications, admin, no-posts. Tím se použijí tyto přepisy jeden po druhém, přepíše se každý klíč v odpovědích API v uvedeném pořadí.

Co bude dál

Stále musíme projít několika dalšími scénáři, které chceme vyřešit, abychom našim vývojářům umožnili plynulejší vývojové prostředí:

  • Automaticky vytvářet falešné ze vzdálené back-endové služby.
  • Pravidelně ověřujte tyto posměšky proti vzdálené back-endové službě, abyste zkontrolovali, zda odpověď API nebyla změnit.
  • Otevřít zdroj tohoto malého uzlu js skriptu, takže ti z vás, kteří používají monorepos a chcete tento kód znovu použít, dokáže to! Zůstaňte naladěni na budoucí vývoj v této oblasti!

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *