Scopri le librerie angolari e i microservizi

Blog

Scopri le librerie angolari e i microservizi

Viviamo in un mondo di microservizi e questo mondo è qui per restare. Gli sviluppatori di back-end devono immergersi in Progettazione guidata dal dominio , scrivere servizi senza stato, resilienti e ad alta disponibilità, mantenere i dati sincronizzati attraverso Modifica acquisizione dati , gestire i guasti di rete, gestire l'autenticazione, l'autorizzazione, JWT ... ed esponi una bellissima API Hypermedia in modo che gli sviluppatori front-end possano aggiungere un'ottima interfaccia utente.



commenti nel file json

Bene! Ma per quanto riguarda il front-end?

Diciamo che abbiamo diversi microservizi, diversi team, diverse API e, quindi, diverse interfacce utente. Come puoi creare un'interfaccia utente integrata e coerente in modo che i tuoi utenti non vedano effettivamente che ci sono tante interfacce utente quanti sono i microservizi? In questo post, sto implementando il Composizione dell'interfaccia utente lato client modello di progettazione utilizzando le librerie angolari.



Supponiamo di avere un'applicazione CD BookStore che consente ai clienti di acquistare CD e libri online, nonché agli amministratori di controllare l'inventario. Abbiamo anche un generatore di numeri ISBN complesso da gestire. Se modelliamo questa applicazione in Microservizi, potremmo finire per dividerla in 3 microservizi separati:

  • Negozio: Si occupa di visualizzare informazioni su CD e libri, consente agli utenti di acquistarli.
  • Inventario: Consente agli amministratori di verificare la disponibilità di un articolo in magazzino e di acquistare nuovi articoli, se necessario.
  • Generatore: Genera numeri ISBN ogni volta che viene creato un nuovo libro.

Ci ritroviamo con due ruoli (utente e amministratore) interagendo con queste 3 API tramite un'unica interfaccia utente :



Fin qui tutto bene. Ma ricorda che questi tre microservizi sono sviluppati da tre diversi team e quindi hanno tre diverse interfacce utente. Da un lato, abbiamo tre diverse interfacce utente e, dall'altro, vogliamo che i nostri utenti accedano a ciò che vedono come un'applicazione singola e integrata . Ci sono diversi modi per farlo, e l'unico modo che sto descrivendo qui è chiamato il Composizione dell'interfaccia utente lato client design pattern:

Problema: Come implementare una schermata o una pagina dell'interfaccia utente che visualizza i dati da più servizi?

Soluzione: Ogni team sviluppa un componente dell'interfaccia utente lato client, ad esempio un componente angolare, che implementa l'area della pagina/schermo per il proprio servizio. Un team dell'interfaccia utente è responsabile dell'implementazione degli scheletri di pagina che creano pagine/schermate componendo più componenti dell'interfaccia utente specifici del servizio.

L'idea è di aggregare, lato client, le nostre tre interfacce utente in una sola e finire con qualcosa che assomiglia a questo:

L'aggregazione di più interfacce utente in una sola funziona meglio se utilizzano tecnologie compatibili, ovviamente. In questo esempio, sto usando Angular e solo Angular per creare le 3 interfacce utente e lo scheletro della pagina.

Una novità con Angular CLI 6 è la possibilità di semplificare creare librerie . Tornando alla nostra architettura, potremmo dire che lo scheletro della pagina è l'applicazione Angular (l'applicazione CDBookStore), quindi ogni interfaccia utente del microservizio è una libreria (Store, Inventory, Generator).

iniziare con pycharm

In termini di comandi Angular CLI, questo è ciò che abbiamo:

# Main app called CDBookStore $ ng new cdbookstore --directory cdbookstore --routing true 

$ ng generate library store --prefix str
$ ng generate library inventory --prefix inv
$ ng generate library generator --prefix gen

come acquistare il token Moonrat

Dopo aver eseguito questi comandi, otterrai la seguente struttura di directory:

  • src/app/ è la buona vecchia struttura angolare. In questa directory, avremo lo scheletro della pagina dell'applicazione CDBookStore. Come vedrai, questa pagina scheletro è solo una barra laterale per navigare da un'interfaccia utente di microservizi a un'altra
  • project/ è la directory dove vanno a finire tutte le librerie
  • progetti/generatore: l'interfaccia utente per il microservizio Generator
  • progetti/inventario: l'interfaccia utente per il microservizio Inventory
  • progetti/negozio: l'interfaccia utente per il microservizio Store

La pagina scheletro è lì per aggregare tutti gli altri componenti. Fondamentalmente, è solo un menu della barra laterale (che ci consente di navigare da un'interfaccia utente di microservizi a un'altra) e un file . È dove potresti avere login/logout e altre preferenze dell'utente. Sembra così:

In termini di codice, nonostante si utilizzi Bootstrap, non c'è niente di speciale. La cosa interessante è il modo in cui sono definiti i percorsi. Il AppRoutingModulo definisce solo i percorsi dell'applicazione principale (qui i menu Home e About).

const routes: Routes = [  
{path: ‘’, component: HomeComponent},
{path: ‘home’, component: HomeComponent},
{path: ‘about’, component: AboutComponent},

];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Nella parte HTML della barra dei menu laterale, possiamo trovare la direttiva di navigazione e il router:

  




Come puoi vedere nel codice sopra, la direttiva routerLink viene utilizzata per accedere ai componenti principali dell'app e ai componenti delle librerie. Il trucco qui è che /home è definito nel modulo di routing, ma non /str, /inv o /gen. Questi percorsi sono definiti nelle librerie stesse.

Ora, quando facciamo clic su Store, Inventory o Generator, vogliamo che il router acceda ai componenti della libreria

Notare la relazione padre/figlio tra i router. Nell'immagine sopra, il router-outlet rosso è il genitore e appartiene all'app principale. Il router-outlet verde è il bambino e appartiene alla biblioteca. Nota che in store-routing.module.ts usiamo str ha il percorso principale e tutti gli altri percorsi sono figli (usando la parola chiave children):

const routes: Routes = [  
{
path: ‘str’, component: StoreComponent, children: [
{path: ‘’, component: HomeComponent},
{path: ‘home’, component: HomeComponent},
{path: ‘book-list’, component: BookListComponent},
{path: ‘book-detail’, component: BookDetailComponent},
]
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class StoreRoutingModule {
}

autenticazione a due fattori cryptopia

Il bello di avere una relazione router genitore/figlio è che puoi trarre vantaggio dalla navigazione delle funzioni. Ciò significa che se navighi in /home o /about rimani nell'applicazione principale, ma se navighi in /str, /str/home, /str/book-list o /str/book-detail, vai alla Libreria del negozio. Puoi anche eseguire il caricamento lento in base a una funzionalità (carica solo la libreria Store se necessario).

La libreria Store ha una barra di navigazione in alto, quindi necessita della direttiva routerLink. Nota che abbiamo solo bisogno di usare il percorso figlio [routerLink]=['lista-libro'] senza dover specificare /str (non c'è bisogno di [routerLink]=['/str/lista-libro']):

  








Il Composizione dell'interfaccia utente lato client modello di progettazione ha alcuni pro e contro. Se disponi già di interfacce utente esistenti per microservizi e se ognuna utilizza tecnologie completamente diverse (Angular vs React vs Vue.JS vs …) o versioni di framework diverse (Bootstrap 2 vs Bootstrap 4), l'aggregazione potrebbe essere difficile e potrebbe essere necessario riscrivere bit e pezzi per renderli compatibili.

Ma questo può effettivamente essere utile. Se non hai team estesi con centinaia di sviluppatori, potresti finire per essere quello che passa da un team all'altro e sarai felice di trovare (più o meno) le stesse tecnologie. Questo è definito nel Telaio modello. E per i tuoi utenti finali, l'applicazione avrà lo stesso aspetto (su telefoni cellulari, laptop, desktop, tablet), il che dà un senso di integrazione.

Con il modo in cui sono strutturate le librerie angolari, avere un repository mono è molto più semplice. Naturalmente, ogni libreria può avere il proprio ciclo di vita ed essere indipendente, ma alla fine è più facile averle sullo stesso repository. Non so se ami MonoRepos o no, ma alcuni lo fanno.

Progettiamo e sviluppiamo Microservizi ormai da diversi decenni (sì, si chiamavano sistemi distribuiti o servizi distribuiti), quindi sappiamo approssimativamente come farli funzionare sul back-end. Ora, la sfida è essere in grado di avere un'interfaccia utente che comunichi con diversi Microservizi, sviluppati da diversi team, e allo stesso tempo sia coerente e integrata per l'utente finale. Potresti non avere sempre questa esigenza (vedi come Amazon ha interfacce utente completamente diverse per i suoi servizi), ma se lo fai, allora il Composizione dell'interfaccia utente lato client il modello di progettazione è una buona alternativa.

invia un messaggio di testo da fogli di google

Se vuoi fare un tentativo, scarica il codice , installalo ed eseguilo (c'è solo il front-end, nessuna API di back-end). Spero che questo tutorial ti aiuterà sicuramente e se ti è piaciuto questo tutorial, considera di condividerlo con altri, grazie per la lettura!

Questo post è stato originariamente pubblicato qui

#angular #angular-js #microservices #web-development #devops