Best practices: Angular Services bouwen met behulp van een gevelontwerppatroon voor complexe systemen

Angular Services

Angular services-concept verwart nieuwkomers altijd met REST-services aan serverzijde. Als u nog steeds niet zeker weet wat het is, raad ik u aan de Angular-documentatie te lezen

Angular Services is verantwoordelijk voor het leveren van applicatiegegevens / bedrijfslogica aan componenten. Componenten moeten gegevens gebruiken / leveren voor service en functioneren als lijm tussen weergave en service. Het is een service die kan beslissen of hij valse gegevens moet verstrekken of naar de server wil gaan en gegevens uit de database / het bestand / een andere service (s) etc. wil ophalen.

In het ideale geval moeten services functiegericht zijn. U hebt de keuze om een ​​gigantische serviceklasse of microservicecollecties te bouwen. In de eerste benadering zal er slechts één service zijn die alle bedrijfslogica bevat en via Angular Dependency Injection in alle componenten binnen het systeem wordt aangeboden. Probleem met deze aanpak is dat gigantische serviceklasse opgeblazen wordt en uiteindelijk leidt tot een prestatieprobleem. Elk onderdeel wordt geïnjecteerd met service en functionaliteit die helemaal niet vereist is voor consumenten. Vind je het goed

In de tweede benadering (breed gevolgd), wordt een specifieke microservice gebouwd. Als uw systeem bijvoorbeeld componenten voor Login, SignUp en Dashboard heeft, moet u LoginService, SignUpService, DashboardService enzovoort bouwen. Elke service bevat de vereiste functionaliteit voor een specifiek doelonderdeel. Nu ziet dit ontwerp er goed uit, niet?

Probleem?

Terwijl u een grote en complexe Single Page-toepassing bouwt met Angular, zult u binnenkort honderden en duizenden componentklassen krijgen. Dit gezegd hebbende, zult u een gelijkaardig aantal Angular-diensten laten injecteren. Wat is hier het probleem?

Ongeacht de goede naamgevingsconventie die u hebt gevolgd voor het bouwen van componenten en services, er is tijd nodig om een ​​specifieke servicenaam voor een specifieke klasse te achterhalen. Je kunt ook dubbele serviceklasse schrijven met een iets andere naam voor hetzelfde onderdeel dan een ander gebouwd team. Als u in het Extreme Programming-model werkt, wordt van uw frontend-ontwikkelaars verondersteld dat ze blijven schakelen tussen modules / componenten / functies. Het zou niet veel tijd moeten kosten om de bijbehorende componenten en services te achterhalen.

Oplossing

We kunnen dit probleem oplossen met het ontwerppatroon van de gevel.

Gevel ontwerppatroon

Facade bespreekt het inkapselen van een complex subsysteem binnen een enkel interfaceobject. Dit vermindert de leercurve die nodig is om succesvol gebruik te maken van het subsysteem. Het bevordert ook de ontkoppeling van het subsysteem van zijn potentieel veel clients.

Het gevelobject moet een vrij eenvoudige voorstander of facilitator zijn. Het moet geen alwetend orakel of 'god'-object worden.

Hier is het goede lezen voor Gevelontwerppatroon in details

Gevel ontwerppatroon

Gevel in actie met Angular Services

Ik zou de volgende stappen aanbevelen om Angular-services te bouwen met behulp van een gevelpatroon:

Definieer al uw Angular-services volgens uw zakelijke vereisten en / of blijf meer toevoegen als dat nodig is.

Maak een service genaamd "FacadeService" (gebruik hier een andere naam)

Maak een gedeelde NgModule en bied alle Angular-services

Facade Service implementatie

Onze belangrijkste discussie zal alleen gaan over de "FacadeService" -service.

We hebben gesproken over twee benaderingen gigantische service versus microservice. We hebben hun voor- en nadelen gezien. De beste oplossing is om ze allebei samen te voegen om een ​​servicegevel te creëren. Nu, FacadeService-klasse zal een God-klasse zijn, maar heeft geen echte functionaliteit, maar een verpakking over de werkelijke services.

FacadeService verzamelt alle Angular-services binnen het genoemde systeem. Een eenvoudige benadering is om alle services in FacadeService in de constructor te injecteren. Maar als we dat doen, zullen we met hetzelfde probleem als bij gigantische serviceklasse eindigen.

Een slimmere manier zou zijn om alle Angular-services binnen FacadeService te aggregeren en hun instanties van Angular DI op te lossen binnen de 'property'-toegang.

Laten we het gebruik van AccountService bespreken.

We hebben een eigenschap gedefinieerd genaamd accountService binnen FacadeService. getOrderList () en getAddress () functies van FacadeService werken als wrappers voor daadwerkelijke methoden van accountService.

Wanneer toegang wordt verkregen tot accountService-lid, wordt het get-propertyblok uitgevoerd. Binnen get block controleren we of het back-upveld _accountService wordt geïnstantieerd. Zo niet, dan vragen we Angular Dependency Injector om een ​​instantie voor ons op te lossen.

Om toegang te krijgen tot de Angular DI-engine, moeten we de ingebouwde service van Inejctor Angular in FacadeService-constructor injecteren. injector.get () zal de DI-engine van Angular ondervragen om het aangevraagde service-exemplaar op te lossen als het wordt verstrekt. (Onthoud SharedModule waar we alle diensten hebben geleverd?)

Als je het zorgvuldig hebt geobserveerd, hebben we het ontwerppatroon van Singleton ook geïmplementeerd in het gedeelte 'Get property' van accountService property.

FacadeService binnen component (en) verbruiken

We hebben AccountService geaggregeerd in FacadeService en het is klaar om te worden verbruikt binnen OrderComponent en AddressComponent.

Resterende systeem afmaken

Op dezelfde manier als bij de implementatie van accountService, kunt u de implementatie van andere Angular-services in FacadeService voltooien.

Gevelontwerppatroon implementeren in Angular Services

Live demonstratie:

GitHub repository:

Samenvatting

Gevelontwerppatroon helpt ons bij het bouwen van complexe Angular-toepassingen door een vereenvoudigde toegang te bieden tot veel complexe Angular-microdiensten.

Proost!