ANGULAR DAY: ECCO LA NOSTRA ESPERIENZA!

Il 14 giugno si è tenuto un corso di una giornata a tema Angular, facente parte dell'Angular Day 2018: si è trattato di una introduzione alla creazione di architetture solide e scalabili in Angular, con l’introduzione di Redux e NGRX per la gestione dello stato applicativo.

La mattina è stata occupata da una panoramica teorica delle principali architetture Angular e di come si possano applicare con successo al paradigma Redux, tenuta da Fabio Biondi.

Sicuramente l’architettura vincente è composta da componenti organizzati in modo gerarchico: un parent stateful (che contiene la logica) è abbinato a dei child stateless (che si occupano solo di registrare gli input dell’utente e di notificare il parent). In questo modo, il codice è manutenibile e testabile, poichè tutta la logica e il flusso dei dati sono accentrati nel componente parent, e si può concentrare la scrittura dei test in parti localizzate senza bisogno di mock o di stub.

Tale paradigma si applica con notevole successo a una libreria di state management come Redux: essendo tutta la logica racchiusa nel componente parent, esso è l’unico che è consapevole dell’esistenza di Redux, riceve dati dalla libreria e coordina le azioni. I figli sono completamente agnostici alla piattaforma.

Ma cos’è Redux?

Non è nient’altro che una libreria che si occupa di mantenere e gestire lo stato di web app, particolarmente utile quando i moduli cominciano a diventare molti e difficili da gestire. Implementa il concetto di one source of truth: strutturazione di modelli di informazioni e schemi di dati in modo tale che ogni elemento di dati sia memorizzato esattamente una volta, evitando duplicati e modifiche inattese.

“This architecture might seem like an overkill,

but the beauty of this pattern

is how well it scales to large and complex apps.”

Dan Abramov - Creatore di Redux

I componenti chiave di Redux sono:

  • store: memorizza lo stato dell’intera web application
  • action: modifica lo store, ed è l’unica entità autorizzata a farlo
  • reducers: specificano come le action modificano lo store.

Lo store è semplicemente un albero di nodi che descrivono lo stato dei singoli componenti, una sorta di cache locale. Tramite i Redux Dev Tools, un plugin di chrome, è inoltre possibile esportare lo stato della web app in un log in JSON per facilitare la riproduzione e la correzione di bug, oltre che riportare lo store a stati precedenti.

Gli actions creator sono funzioni che creano actions, in un file .js, e i cui metodi vengono invocati dalla UI; lo stato viene gestito e modificato dai reducer.

La cosa importante dei reducer è che non devono mai modificare direttamente lo stato, ma restituire una copia aggiornata di esso: questo perchè Redux controlla se il vecchio stato è uguale al nuovo stato confrontando le posizioni di memoria dei due oggetti. Se vengono modificate le proprietà del vecchio oggetto all'interno di un reducer, il "nuovo stato" e il "vecchio stato" puntano entrambi allo stesso oggetto: quindi, i reducer devono essere funzioni pure, cioè restituire copie degli oggetti passati senza modificarli.

La libreria di binding Redux per eccellenza è sicuramente angular-redux/store; l’alternativa più popolare è comunque ngrx, che fa largo uso di rxjs. Include anche middlewares, memorization, lazy-store/effects, etc.

Dopo un pranzo offerto dall’hotel ospite, il pomeriggio è stata affrontata una sessione di live coding: Michele Stieven è partito da una applicazione Angular preesistente, ma incompleta: ne ha quindi ultimato l’implementazione mostrando le piene potenzialità di ngrx, mettendo in pratica davanti a noi i concetti spiegati in teoria durante la mattinata.

Giulia Menichini

Altre News

SPEAKER AL MOBICONF 2018!

NETFARM PARTNER BRONZE DI MOBICONF 2018!

Netfarm ha contribuito all'evento Seafuture con ODOO

NETFARM PARTECIPA ALL'ANGULAR DAY 2018 A VERONA!

ODOO: How to... Modificare il nome visualizzato di un prodotto

NETFARM PARTNER DEL PROGETTO SURFACE!

PREMIO PER L'APP SMARTY TALLAS!

NUOVE LINGUE PER L'APP SMARTY TALLAS

SINCRONIZZAZIONE ODOO - SPREADSHEET

Nuove features ed allargamento a tutta la Toscana per hAPPyMamma

Aumento di capitale per la Netfarm S.r.l.

AZerp

Netfarm si aggiudica il supporto tecnico su CMS Plone per ARPAT

Netfarm alla Mobiconf 2017

MOBICONF 2017

Nuova sede operativa a Massa-Carrara

Nuova collaborazione con S.I.M.M.

Medbook e Netfarm al Festival Internazionale della Robotica

LA GESTIONE DEI PRODOTTI CON ODOO. NUOVO TUTORIAL SUL BLOG!

Chiusura estiva

LE BASI DI ODOO. SUL BLOG LA PARTE 2.2 DEL TUTORIAL

NETFARM ENTRA IN TRANSFORM AND LIGHTING

LE BASI DI ODOO. SUL BLOG LA PARTE 2.1 DEL TUTORIAL

Netfarm diventa partner ODOO

Anche EMv4 passerà a 64bit

hAPPyMamma sugli store

SMARTY Tallas sugli store

MyMedBook e MyMedTag

Collaborazione con M.A.I.O.R.

Buone feste

Contributo per il progetto D.R.A.E.

Nuovo articolo sul blog!

Vivo Il Museo al LuBeC 2016

LE BASI DI ODOO. SUL BLOG LA PRIMA PARTE DEL TUTORIAL

Online il sito de "Il Museo di Itinerario nell'Arte"

App iOS Multilevel Marketing

INIZIO DELLA FASE DI TEST DI HAPPY MAMMA

FantasyTeam app

Nuovo contratto per M.A.I.O.R. S.r.l.

Contratto di consulenza per Ambiente SC

Nuovo articolo sul blog: Netfarm @ Pycon7 Italy

"Il Museo di Itinerario dell'Arte" per Zanichelli

Il Centro Servizi DAB Pumps alla MCE 2016

Conclusione del progetto T.O.S.C.A.

Netfarm è nella graduatoria della Regione Toscana con il progetto DRAE

Happy Mamma

Netfarm e Hapag LLoyd Italia

Netfarm per la palestra Prince

PROGETTO T.O.S.C.A. SUL CORRIERE DELLA SERA

Ambiente presenta T.O.S.C.A. al RemTech

Mtram User Meeting

online il nuovo sito della Conferenza Cisam

Mobiconf e Plone Conference di Ottobre

TOSCA Data Manager On-line

Container Fidenza sceglie ancora GTW anche per la gestione dei suoi listini

Netfarm news su Samsung Gear-S

T.O.S.C.A. : Netfarm ricrea la zona portuale di Piombino in 3D

Progetto Zanichelli

Progetto APPlone

Seconda fase del bando POR FESR 2014-2020

Online il sito del progetto AgriSmaRT

Csav Agency Italy ha vinto il premio "innovazione digitale" SMAU 2015

Online il nuovo sito del Centro Linguistico

Un software creato da Netfarm per Csav in finale allo SMAU Torino 2015

GIORNATA DI STUDIO SEKRET&Co.

nuove personalizzazioni di OpenERP per la Adriano Azzarri Rappresentanze s.a.s

Presentazione Progetto TOSCA

Sito TOSCA reso pubblico

Sito MRL online

DAB sceglie Netfarm

Ordine Archittetti Lucca

BUS Mobility

Agrismart

PAPER i NO

BRIDGE

OTRS MAIOR

SKYLABLE

CNIT

TRANSFORM and LIGHTING

8080

T.O.S.C.A.

INFOPORTO