Press "Enter" to skip to content

GOTO 2016 • Beyond Flux – Scalable Frontend Architectures built upon Publish/Subscribe • M. Kurze


va bene ciao a tutti, mi chiamo Michael
Sono un ingegnere del software dall’ego di Ike
e la Germania abbiamo creato soluzioni basate sul web
per il settore finanziario per banche e
il nostro FinTech e sì, sono venuto a parlare
sull’architettura per la scalata del web e
sì, perché è anche importante che io probabilmente
non devi convincerti qui perché
sei venuto alla presentazione ma se
ti piacerebbe dire agli altri bene che abbiamo
per costruire un web sempre più grande
applicazioni sempre più
grande quantità di codice che gira sul web
cliente e dobbiamo definire gli strumenti
che usiamo per quello che dobbiamo trovare
strumenti migliori perché le basi del codice sono
diventando più complesse le squadre sono
diventando più grande e dobbiamo anche avere
un linguaggio comune e comprensione a
vocabolario come abbiamo usato per parlare di
queste cose quindi quali sono gli aspetti di
architettura che mi interessa qui
per questo parlare questa complessità del web
la piattaforma applicativa è in crescita
tremendamente nell’ultimo paio di
anni e stare al passo con il cellulare
piattaforma e così la complessità nel
la piattaforma richiede più complesse
applicazioni così le persone stanno costruendo sempre
applicazioni web più complesse e questo
la complessità guida il braccio e il
la complessità della piattaforma lo guida così
è una sfida che una calma importante
negli ultimi due anni e il
la prossima sfida è la reattività o
reattività e nel concetto di web
front-end Io non sono davvero lo sai
parlando di tolleranza agli errori o di te
sapere morire presto o qualcosa del genere
reattività significa che l’applicazione
dovrebbe essere sempre pronti a rispondere alle
utente e quando si compila un modulo in a
applicazione web al giorno d’oggi non si aspetta
per inviare il modulo prima di ottenere il tuo
feedback sulla convalida e cose simili
così così c’è un concetto
comunicazione bidirezionale tra il
client Web e server
e questa è la terza sfida
questo è di particolare interesse qui in
questo parla della sua scalabilità e del web
applicazioni che sai che potresti pensare
su come ridimensionare bene su più CPU
core o qualcosa del genere ed è
non è davvero molto interessante per il web
per la maggior parte del tempo, forse sei tu
costruire un gioco 3d o qualcosa del genere
anche questo è importante ma bene
scalabilità che sto intendendo qui è un
ridimensionamento attraverso i vari background di team
se non solo il programma multiplo funziona
su un progetto ma in realtà più squadre
e quelle squadre tendono a conoscere il favore
diverse tecnologie tendono ad avere
diversi livelli di competenza
molto eterogeneo e vorremmo
sostenere che usando la nostra architettura così
e questo è bene il programma per il
soluzione che questo sarà il
argomento di questo discorso questo è il cosiddetto
flusso di dati unidirezionale e promette
per semplificare lo sviluppo e
manutenzione di applicazioni web così
in realtà non quello nuovo da 10 a 20 anni fa
hai già avuto questi tipi di web
applicazioni in cui c’era un database
seduto sul tuo server e ne aveva alcuni
contenuto che era interessante per gli utenti
loro farebbero una richiesta al al
server e servirebbe solo la vista
un pollice l’HTML di una rappresentazione di
il contenuto del tuo database insieme a
quella vista potrebbero ottenere una forma che
permesso loro di aggiungere o modificare il
contenuto del database e mentre loro
inviare il modulo a un’azione e quella in
accendi il server modifica il tuo
stato dell’applicazione quindi questo flusso di stato
visualizzare l’azione o l’intenzione di modificare il
stato e go full circle è in realtà
non è nuovo ciò che è nuovo è quello nell’ultimo
un paio d’anni anche questo è diventato un
argomento importante per il software lato client
sviluppo, in modo che è responsabile
che Facebook usa un go hanno fatto un
presentazione in cui hanno detto a tutti
beh, abbiamo un grosso problema nel nostro
numero di messaggi non letti da utilizzare
in modo sincrono attraverso l’intero
applicazione in modo che gli utenti navigassero
Facebook ci sono vari posti
se cosa
possibilità di leggere o inviare chat
messaggi ad altri utenti e apparentemente
è stato davvero difficile ottenere uno sconto
per sincronizzare ovunque e quando leggi
un messaggio per farlo davvero rimanere
sapere leggere e non tornare con
uno o duecento messaggi su cui fare clic
e oh davvero niente di nuovo quindi sì
gli utenti erano molto molto espliciti a riguardo
e così si è scoperto che un architettonico
il problema era diventato davvero un utente che affrontava
problema nel caso in cui non si può veramente leggere è
quindi c’è un messaggio su Facebook per
Mark Zuckerberg Penso che siamo 890 persone
votare per favore per migliorare la chiesa
questo e così sì sì ce n’erano alcuni
grado di pressione dall’alto verso il basso da modificare
questo per modificare l’architettura da trovare
fuori ciò che è sbagliato con la corrente
architettura con uno stato che è
ridondante su più componenti e
trova un modo migliore per gestirlo, quindi cosa
sembra il flusso unidirezionale
che Facebook ha inventato e loro
ha chiamato questo modello il flusso
l’architettura non è solo un software
che puoi scaricare è un
progetto architettonico che puoi
bene impiegare nella vostra applicazione così
stato dovrebbe essere memorizzato in questo qui
componenti chiamati negozi in cui ciascuno
il negozio è responsabile di una fetta di
stato e quelli non dovrebbero essere
sovrapposizione quindi ci dovrebbe essere distinto
e poi hai la vista che è a
facebook hanno già usato per reagire
rendere la vista così non era, non era vero?
è stata una bella partita perché reagire è
molto ben adattato alla fine posteriore
intera interfaccia utente ogni volta che si crea uno stato
cambiare in modo da poter raccogliere questo
modo tradizionale di rendering web
le applicazioni che conosci riflettono solo il
stato attuale del vostro database invece
lo farebbero semplicemente sul client
rifletta lo stato attuale del tuo
il tuo negozio e rendiamo l’intero
gerarchia dei componenti nella tua app e poi
ovviamente gli utenti lo usano semplicemente no
basta eseguire un monobrow vedere una vista di sola lettura
della sua applicazione così
sì come il cosiddetto creatore di azioni o
in realtà più creatori di azioni per
ogni cosa che l’utente può fare in un
applicazione per esempio messaggi di mercato
scrivi o crea un nuovo messaggio invialo a
qualcuno parla di un creatore di azioni
per la pasta era probabilmente api di riposo del web
e una volta che determina un’azione può
essere effettuato e dovrebbe essere applicato a
lo stato dell’applicazione su cui è memorizzato
il cliente invierà questa azione a
il cosiddetto speditore che semplicemente
notifica tutti i negozi su cosa
succede così qualcuno ha mandato un messaggio a
qualcuno sì e sì tutto questo succede
sul client e quindi se questo è un flusso
altre parti di questo che posso scaricare
dove devo compilare gli spazi vuoti o
come devo scrivere?
tutto me stesso bene che più
certo che non ce n’è, c’è un
gran numero in realtà un flusso
applicazioni al giorno d’oggi forex
implementazioni al giorno d’oggi quindi c’è il
flusso di vaniglia tradizionale di facebook
implementazione che non molte persone
Penso che ci sia yahoo flessibile che
è piuttosto popolare c’è alghe è i
pensare dal nostro B & B e che è un po ‘di più
conciso evita euler giocato e poi
bene, non ho ancora messo qui ancora io
avere una diapositiva separata per quello perché
è un po ‘diverso ma è anche
la gente molto popolare per lo più dice solo
riduci al posto del flusso oggigiorno sì e
bene per avere un po ‘di carne per questo
la teoria c’è c’è un po ‘di sì
più sì il semplice webshop possibile
si potrebbe dire che gli iraniani dmitriev
dare scritto in 15th lok ciclico
implementazioni quindi se ti piacciono le bandiere
vuoi saperne di più e scoprire il
giusta implementazione per te enorme te
potrebbe controllare e avere un a
guarda tutti i 15 diversi
implementazioni bene cosa lo fa
ha solo una lista di prodotti che puoi
comprare e ha un carrello della spesa
quindi ti permette di aggiungere prodotti al
carrello della spesa che è una azione e poi
c’è un’altra azione da controllare
contenuto di quel carrello della spesa così
logicamente probabilmente ne definiresti due
nuovi componenti qui la lista dei prodotti
visualizza il componente e una visualizzazione del carrello
componente e anche di solito è ragionevole
in questo caso per definire due negozi uno
negozio che gestisce che i prodotti sono
disponibile e il loro inventario in modo che tu possa
determinare se il prodotto è stato venduto
fuori e bene un altro negozio che gestisce
la tenuta del tuo carrello della spesa attuale
contenuto sì e di averne un po ‘
codice effettivo per questo cerco di continuare
semplificare l’esempio su cui si basava
yahoo flessibile e qui abbiamo un jsx
implementazione del componente di visualizzazione per
l’elenco dei prodotti a sinistra e se
non hai familiarità con j sx è il
reagire modo di generare HTML all’interno
il browser, quindi è un modo che puoi incorporare
letterali xml nel tuo codice JavaScript
per semplificare la generazione di cupola e
la cosa più importante che questa vista
componente lo rende solo il
stato attuale che è stato ricevuto da
il dal negozio dal prodotto
memorizzare in qualche modo vedremo come e cosa
consente all’utente di sapere premere il tasto
pulsante e per aggiungere questo prodotto al
carrello della spesa per questo l’azione
il creatore si chiama echa card che noi
importato qui e sì, rende solo
il titolo il premio e questa questa immagine
nel modello come abbiamo visto nella demo
e bene questa funzionalità è saggia questa
praticamente tutto ciò che è è
doveva essere fatto qui ma ce n’è un po ‘
Sì, qualche codice standardplice scusa dove
devi collegare questo componente vista
al negozio e questo è in realtà
a seconda dell’implementazione di Flex
che usi devi scrivere molto
questo codice boilerplate per l’iniziale
fornitura di
dati per l’ interrogazione del negozio a
ottieni i dati nel tuo componente di visualizzazione
e poi per tenerti aggiornato sai
ottenere gli ultimi o contenuti ogni volta
cambia e re-rendering la vista come
il nostro funziona in India non è quello
importante è solo il boilerplate e poi
sì, fai entrare tutto insieme
e tirare gli altri componenti nel
componente carrello acquisti ad esempio I
non entrerò nei dettagli per quello che sembra
molto simile e sì, fornisce un
render metodo che ti permette di calciare
fuori dalla tua interfaccia utente eseguendo il rendering iniziale
e poi sei pronto per la vista e
poi andare con la prossima parte del nostro
applicazione quelli sono l’azione
creatori che sono un po ‘ più semplici in
il caso più semplice che hai
creatore di azioni sincrone è solo aa
Chiamata unica sei il framework passa
questo fatto Kobuk per te quando invochi
un creatore di azioni quindi puoi farlo
chiamate asincrone anche e bene e
l’azione è solo un identificatore di stringa
dice che sai cosa è successo o cosa
dovrebbe succedere che un prodotto dovrebbe essere aggiunto
al carrello della spesa quindi un negozio più tardi
sapere se devono fare qualcosa e
poi alcuni payload associato ad un
sezione quindi in questo caso che prodotto era
aggiunto al carrello della spesa e
poi c’è il caso asincrono dove
tu dici ok, vado a dare un’occhiata a questo
carta per esempio yeah ci devi
parlare con il resto api ovviamente per fare un
dai un’occhiata e poi è questa la ricetta
è avvolto sentendoti parlare e
si spera che dirà il check-out di successo
puoi anche spedire la spedizione
azione quindi questo ti consente di fare un esempio
mostra una sorta di indicatore di progresso in
tra quelle azioni e quelle che hai
una chiamata down asincrona e sì
forse dovresti anche gestire il
tasti freccia qui che è, naturalmente
emesso nell’esempio e poi c’è
questo dispatcher che è sì solo io
non ha messo nulla qui perché il
l’implementazione del flusso lo farà
per te è fantastico, chiama tutto
i tuoi negozi di fila ea volte
deve fare alcune altre cose perché
flex in realtà non è così semplice
ecco perché devi scaricare un
quadro e non solo scrivere un ciclo for
nei tuoi negozi quindi ad esempio a
negozio di prodotti che mantiene una lista di
prodotto disponibile e il loro inventario
e sì si può interrogare questo negozio per ottenere
tutti i prodotti questo è ciò che il cosa
la vista fa per il rendering e dice
ok, ho intenzione di gestire questi metodi
questo dipende dall’implementazione del flusso
a volte sei solo un grande
passare la dichiarazione caso in cui tutti i
le azioni passano con la tua flessibilità
come questo tu dici ok, ho questi
gestori e queste richiamate associate
quindi quando qualcuno aggiunge qualcosa al
carrello della spesa Devo chiamare la mia diminuzione
metodo di inventario perché è quello che io
fare quando le cose sono messe nel
la carta e ya gestire la ricezione è molto
simile semplice che è solo l’azione
questo dice ok quando l’ applicazione è
dato il via abbiamo bisogno di mettere l’iniziale
prodotti nel negozio e equus
l’inventario è un po ‘più strano
perché il dispatcher è usato come
il successo in questa attesa per la chiamata è fatto così
in questo caso il negozio di prodotti dice quando
l’inventario è diminuito, ho lasciato il
il negozio di carte va per primo, quindi la porta dei tagli è
in grado di mettere qualcosa nel carrello
prima di rimuoverlo dal
inventario perché se il conteggio va a
zero il negozio di carte potrebbe dire ok c’è
in realtà non è rimasto nulla che non posso mettere
qualsiasi cosa nella carta quindi questo è un tipo
di dipendenza funzionale tra quelli
negozi e questo è il motivo per cui è il dispatcher
non è banale, adesso puoi davvero
creare l’attesa per le catene che formano a
cerchio e poi hai forse infinite
ricorsione o sì mi blocco quindi è a
un po ‘più complesso ah quindi quelli erano i
componenti della nostra applicazione e bene
quali sono i vantaggi che vediamo?
ad un approccio MVC più classico come
quelli che usano angularjs o backbone
hai una separazione molto severa di
Stato in quei negozi l’interfaccia utente e il
visualizzare i componenti
e il comportamento nelle azioni e
creatori di azioni in modo da sapere sempre dove
mettere qualcosa che è bello ciascuno
valore di memorizzazione ogni valore di data viene memorizzato
esattamente una volta così non ne abbiamo
problemi di incoerenza che hai avuto con
siamo con un approccio tradizionale a
facebook almeno capo con a
approccio tradizionale e hai un molto
arm yeah buona testabilità perché tu
sai esattamente come sai che la vista è giusta
dovrebbe trasformare un dato stato in
un albero dom e puoi controllare se il Dom
l’albero ha un bell’aspetto, un negozio cambia proprio
afferma dopo che un’azione è accaduta che puoi
guardare lo stato prima e dopo a
vedi se è buono e in realtà anche
semplifica il rendering lato server che
è molto difficile da fare se ci sentiamo impossibili
fare se stai usando angularjs si tu
basta dire ok ho generato lo stato iniziale
sul server inviato al da inviare
al client come oggetto JSON e
inviato la vista iniziale e il
HTML iniziale e quindi il macchinario giusto
raccoglie sul client e inizia
aggiornando la cupola quando quando il prossimo
l’azione accade ovviamente ci sono anche
un paio di svantaggi bene il
i negozi in una piccola applicazione sono giusti
tutto questo in piccole applicazioni tutto
questi non molto meta molto ma come
hai più azioni a cui siamo inclini
per ottenere conflitti o non realmente
sapere con quali negozi funziona
quali azioni e se hai intenzione di
cambia un carico utile di un’azione cosa
i negozi saranno interessati dalle cose
come quello sono questi negozi cablati
dipendenze anche se i negozi non lo sono
davvero isolato questo è ciò che fa
test più difficile e questo ti fa sapere
scambiando le parti più duro e i negozi sono
concettualmente Singleton è così per
rendering lato server che hanno effettivamente
una istanza di negozio per richiesta ma tu
non è sufficiente inserire due elenchi di prodotti
questa applicazione quindi dovresti
riscrivi la tua lista di prodotti se tu se tu
Volevo gestire sai due fonti di
prodotti che potrebbero essere messi in a
carrello della spesa
e poi c’è questo modello di voce
Ho sorvolato nel codice
qui in realtà lo stato mutevole trasportato
attraverso queste azioni che possono portare a
errori sottili quindi in questo caso il negozio
basta scavalcare il suo prodotto interno
stato quando vengono ricevuti nuovi prodotti ma
allo stesso tempo ottieni questo carico utile
attraverso l’azione Aggiungi al carrello e questo
è tutto il percorso attraverso la vista dal
dal passato di questo negozio attraverso il
vista attraverso il creatore di azioni sostenuta
in questo metodo e forse il
i prodotti sono già stati sostituiti e
da quando è stata sparata l’azione e in questo
caso si dovrebbe modificare questo prodotto qui
che vieni passato attraverso il payload
e non succederà nulla quindi devi
stai attento a non mutare gli oggetti
quello che metti nel carico utile e
piuttosto usare una sorta di ID per
oggetti di riferimento nel negozio e questo
è davvero un punto cruciale che è
indirizzato da Redux in modo da eliminare
questo problema completamente come dire okay
tutti i negozi non sono autorizzati a mutare
Stato dell’aria internamente hanno appena possibile quando
elaborazione in azione sono solo
permesso di sostituire completamente lo stato
quindi con redox questo c’è solo un grande
stato nella tua applicazione è grande
albero di stato e ogni volta che arriva un’azione
in quello sostituisce lo stato con un nuovo
lo stato riflette l’azione dell’utente dell’utente
quindi per confrontare questo questo schema
abbiamo visto prima che non abbiamo il
più gruppi di negozi è solo
questo negozio è fornito da
quadro e perché c’è solo uno
negozio sappiamo che non è necessario il dispatcher
altre azioni sembrano solo molto simili
in questo caso la vista in realtà
li crea e quindi li invia
facciamo una piccola differenza forse e si
come è cambiato il negozio o?
aggiornato per quelli i cosiddetti riduttori
sono usati quelle sono funzioni che hanno
la firma che li abbiamo appena visti
prendere uno stato o una sottostruttura dello stato
applica l’azione restituisce il nuovo stato
e con questa programmazione funzionale
modello ogni volta che un’azione arriva il
l’albero di stato intero è aggiornato e sostituito
bene a causa di vincoli di tempo non posso andare
in tutti i dettagli su redux ma è sì
elimina davvero questo stato mutevole
problemi che altri flussi hanno come ma
a parte questo ti dà anche un po ‘
davvero bello forse inaspettato vantaggi
bene tu hai questo funzionale
composizione quindi se sei per
programmazione funzionale che è davvero
davvero fantastico fa parti del tuo
applicazione facilmente testabile e quindi
sei un po ‘sicuro di te quando tu
metterli insieme sono ancora bene noi
funziona ancora e tu hai un’istantanea
riprodurre le funzionalità perché lo stato è
sostituito con un nuovo stato ogni volta che il
l’azione viene inviata puoi sempre e solo
annullare e tornare a uno stato precedente
perché funzioneranno ancora e tu puoi
basta registrare tutte le azioni
registrarli li ha inviati al server e
allora sai che qualcuno ha un problema
ti chiama puoi semplicemente riprodurli
localmente sulla tua workstation e vedi cosa
è andato storto e se lo fai se lo sei
facendolo funzionare correttamente lavoro con reagire AP
è quello che ti permette di sapere eseguire
alcuni sì controllo sporco più efficiente
perché il bene quando un riferimento
non cambia con il riferimento a
una parte della Terra è il tuo albero di stato
puoi essere sicuro che il contenuto non ha funzionato
cambia in modo da poter saltare il file
rendering di un’intera sottostruttura del tuo
vista perché conosci il secondo il
l’albero di stato corrispondente non è cambiato
così, ma per quello che avete veramente a
fallo bene e JavaScript no
in realtà lo rendono molto facile da fare questo
giusto, lo stato di muting è sì
javascript non ha built-in
verifica dei vincoli di immutabilità così
se stai cercando di mantenere i tuoi oggetti
da quando sei cambiato, devi
saltare attraverso di loro attraverso alcuni cerchi così
per esempio puoi usare un transpiler
quale che ti permette come la Bibbia
che ti permette di usare lo spread
costruttore
così puoi prendere un vecchio oggetto e creare
un nuovo oggetto in cui alcune proprietà hanno
stato aggiornato o modificato o si
davvero un modo duro e incall oggetto
congelare l’intero albero degli oggetti
ricorsivamente ma vorrei suggerire di fare
questo solo per i test perché è
saggi di impatto davvero pesanti o
puoi semplicemente andare oltre e usare qualcosa
come la fisica immutabile di J che è
in realtà molto bello offre immutabile
tipi di dati con protezione contro
modifica accidentale ma è anche
non bene, non è solo semplice
JavaScript si trova più in questo caso
buon vecchio oggetto JavaScript e matrici
sono molto facili da lavorare con ogni
sai che puoi sempre trovare qualcuno che
può lavorare con queste cose neutre Jas
devi assolutamente impararlo e bene
ciò equivale al potenziale ripido
la curva di apprendimento va per un mutabile jas
vale anche per questi funzionali
paradigmi di programmazione che alcune persone pensano
è dire che è molto facile e naturale
me altre persone lottano con esso ma
bene, signore, sì, dipende da come
beh si ottiene con esso e poi
ci sono i componenti del contenitore con
riduci quindi quelli sono il tuo livello superiore
componenti come la lista dei prodotti o il
carrello della spesa che rappresenta alcuni di voi
conosci alcune parti della tua applicazione
l’utente può fare cose utili con e
loro sì, di solito sono loro
conosci l’intero albero statale e lo hai
stare attento quando cambi le cose
l’ albero di stato perché forse è necessario
aggiungi un nuovo dato o rimuovi
qualcosa poi bene praticamente ogni
parte della tua vista potrebbe essere influenzata e
quindi siamo effettivamente durante questo periodo
dove sarebbe stato inventato Redux
successo l’anno scorso penso che ci siamo inventati
con qualcosa di diverso nella nostra azienda
perché anche noi stavamo lottando con il
problema di scalabilità che funziona con
più team sullo stesso progetto e
sì, abbiamo riscoperto un vecchio
programmazione dell’architettura o brevetto è
chiamato publish-subscribe ed è
effettivamente usato molto pesantemente sul server
lato con con middleware di messaggistica
e bene il suo scopo è permetterti di G
accoppiare i componenti così sì
disaccoppiamento mentre si riduce a permettere
i tuoi componenti per comunicare perché
devi sempre avere un modo per
loro per farlo, ma senza il centro
componente in realtà conoscendo il suo
ricevitori o anche se ce ne sono
componenti del destinatario quando viene inviato un messaggio
e i ricevitori non dovrebbero aver bisogno di
sapere chi ha effettivamente inviato un messaggio loro
dobbiamo guardarlo valutare cosa
è successo cosa devo fare ora e
si, come possiamo farlo bene?
essere alcuni mediatori un uomo nel
medio che è chiamato un bus evento o
broker di eventi a volte e bene solo
sa che tu sai che questo componente è
interessato ad eventi riguardanti il
carrello della spesa forse quel componente è
interessato a tutte le azioni dell’utente che devono
fare con la ricezione di nuovi prodotti e quando
si verifica un’azione che corrisponde a questi
abbonamenti e consegnerà il
messaggio attraverso i destinatari corretti
e questa selezione avviene attraverso il
argomenti configurabili quindi questi sono solo
identificatori di stringa che ti permettono di
forma canali di comunicazione nel tuo
domanda e per noi a sì
realizzare questo flusso di dati unidirezionale
modello che abbiamo visto prima
in realtà sembra un po ‘come questo noi
ho questo autobus per eventi che ho appena menzionato
che seduto nel mezzo e poi noi
avere due tipi di componenti davvero il
visualizzare i componenti che si associano molto attentamente a
i componenti della vista che hai dentro
flusso o redux stanno solo cercando di
mostra alcuni dati e bene l’utente è
in grado di sapere invocare azioni quando
interagendo con questi componenti della vista
e e ci sono le attività
componenti che svolgono il ruolo di of
i negozi e il contesto di flusso ma loro
non condividono più la stessa azione globale
namespace invece sono collegati
sì a questo bus di eventi pure e bene
sono lì
azioni che elaborano sono
selezionato attraverso gli argomenti dell’evento così abbiamo
due tipi di eventi nel sistema lì
sono gli eventi delle risorse sono solo loro
significato per trasportare lo stato dal
componenti di attività alla vista
componenti per la visualizzazione e di solito loro
ottenere lo stato dal api resto
prima e poi c’è l’azione
eventi che elaborano il trasporto
gli utenti intenti a lavorare con il
domanda e sì per segregare
questi componenti noi impieghiamo il
concetto di argomenti e bene questo forma a
sì una specie di flusso unidirezionale ma
su più livelli nell’applicazione così
questi sono questi argomenti per esempio questo
argomento potrebbe rappresentare il carrello della spesa
contenuto che potrebbe essere un argomento di risorsa
trasportato a una sola vista specifica
componenti il ​​carrello della spesa e un altro
argomento l’elenco dei prodotti disponibili
potrebbe essere interessante per altri due
componenti su questa applicazione immagino
no o un’azione può essere generata da uno
visualizzare componenti come in questo articolo
al carrello della spesa e potrebbe essere
elaborato da entrambi i carrelli
negozio di attività se lo farai e il
attività lista dei prodotti così sì che abbiamo
argomenti per entrambe le nostre risorse e
le azioni e quegli argomenti ti permettono di
configurare bene dopo la programmazione a
tempo di configurazione cosa pro cosa
i componenti dovrebbero essere in grado di parlare
l’un l’altro, ma ora abbiamo un codice
esempio è molto simile a cosa
abbiamo visto prima di avere una vista
componente che in questo contesto ottiene
non è non è stato da un negozio
ma nel contesto di questo si apre
applicazione ottiene la sua risorsa dal
evento pass per questo abbiamo un po ‘
biblioteca di supporto così in casa ovviamente noi
sviluppato una libreria per lux nostro
modelli per lavorare con questo tipo di
progetto e parla al bus eventi
per te e dice ok ogni volta che il
modifiche alle risorse dei prodotti anche se
risorsa configurata per il per
argomento associato ai prodotti
e dobbiamo ri-renderlo questo yo
componente e per questi reattori utilizzati
qui e guarda solo la corrente
stato di questa risorsa di questo prodotto
e forse non ha nemmeno ricevuto
prodotti ancora con cui è sempre possibile
si apre così dobbiamo anche ricorrere a
una lista vuota in questo caso e basta
rende quei prodotti e poi c’è
bene la possibilità per l’utente di aggiungere
un prodotto al carrello e per questo noi
istanziare un editore è anche questo
fatto attraverso questa libreria di modelli e
sì, è anche cablato okay è un po ‘
piccolo qui ma è il motivo per il tema
configurato sotto la metti in funzione della spesa
quindi in questo caso gli argomenti reali che
sono usati sul pass dell’evento quelli che non lo sono
aggiungi al carrello qui e prodotti qui a
quelli sono quelli configurati per questi
i nomi e la configurazione è simile
questo abbiamo questo componente vista elenco
per prodotti e per l’aggiunta al carrello
caratteristica c’è un’azione configurata e
questo è a due trattini
e la stessa azione è configurata sul
attività che gestisce lo stato ed è
bene dice che va bene decrementa il tuo
l’inventario usa quella caratteristica quando tu
ricevere questo a dash per precipitare l’ azione della macchina
quindi l’attività del prodotto non è uniforme
c’è bisogno di sapere che c’è uno shopping
carrello in realtà è solo il motivo per questo
questa azione al volo alla configurazione
tempo così potrebbe anche essere invocato da alcuni
altro altro evento e poi c’è questo
elenca le risorse che traducono i trasporti
l’ultimo stato e mentre è chiamato
elenco di prodotti dash o prodotto questo guinzaglio
e viene trasportato dall’attività
ai componenti della vista interessata
e per l’altra metà c’è un
componente di attività e anche questo
gestire la lista dei prodotti come abbiamo visto in
l’esempio di flusso prima e di nuovo esso
si interfaccia con questa libreria di modelli
ed è in grado di pubblicare la corrente
lista di risorse quando tutte le altre
i componenti sono in ascolto, quindi non c’è bisogno di farlo
essere una sorta di eventi del ciclo di vita
presentato pubblicato dal eventbus
stesso che dice va bene a tutti
l’ascolto e l’ascolto ora ha fatto
l’abbonamento in modo da poter iniziare
pubblicazione di dati e anche questa attività
è responsabile per l’aggiornamento del
i prodotti prodotti elencano lo stato quando quando a
è stata ricevuta una nuova azione di aggiunta del prodotto o
in questo caso l’inventario del decremento
perché è quello che viene chiamato qui
e per questo non solo
modificare il prodotto come abbiamo visto in a
esempio di flusso che era un problema con
la mutazione di stato e lo affermò
guarda il prodotto nel corrente
stato e quindi aggiornare l’inventario
lì quindi non sarebbe nemmeno possibile
modificare il prodotto che sta arrivando
perché l’ eventbus in questo in questo
quadro che abbiamo sempre costruito
duplica tutto ciò che riceve
attraverso attraverso una chiamata pubblicata così
in modo efficace componenti non possono parlare
ognuno non può modificarsi a vicenda e
non si possono immaginare l’un l’altro e anche loro
non sono autorizzati a esporre alcuna API così noi
fallo per principio, sono solo
permesso di parlare attraverso questi eventi così
quando rimuovi un componente da
l’applicazione non dovrebbe mai rompersi
l’applicazione forse alcuni componenti
non ottenere i dati ma di solito lo siamo
in grado di rimuovere un paio di quelli
componenti e bene il tutto solo
manca dallo schermo ma il
l’applicazione non si rompe, quindi si
qual è questa soluzione è una soluzione
Tieni traccia di questo quadro
um
che sì ci fornisce un pass per gli eventi
il framework si chiama Lux rjs e it
non solo l’evento l’ha superato
si occupa anche del componente
configurazione usiamo uno schema JSON per
così tu aggiungi uno schema al tuo
componente per consentire proprietà specifiche
essere impostato determina quali tipi di
gli argomenti possono essere configurati o forse tu
voglio solo aggiungerne alcuni
valori come e URL dell’API del servizio web
qualcosa del genere e poi anche questo
ti consente di comporre questi componenti
anche usando un formato JSON dichiarativo così
queste composizioni di questi componenti allora
stessi guardare come componenti dal
fuori e sì è riuscito a questo
il ciclo di vita dice al componente quando il
altri stanno ascoltando che ha i servizi
che abbiamo visto ad esempio per rendere un
componente e offre qualche sviluppo
strumenti per esempio puoi visualizzare cosa
quali eventi passano attraverso l’ applicazione
e come sono i componenti
in realtà la struttura insieme può solo
mostra questo rapidamente perché penso
c’è abbastanza tempo se capisco questo sì
quindi abbiamo la stessa demo integrata con
questo apre la struttura e ci sei io
basta aggiungere questo pulsante per aprirlo
widget per sviluppatori che è anche solo
un altro componente ed è in grado di toccare
in un flusso di eventi che passa attraverso
la tua applicazione e ti mostra cosa c’è
andando avanti chi è chi sono i collaboratori
chi ha pubblicato qualcosa che sta ricevendo
in realtà può anche guardare il contenuto
che è un po ‘ difficile su questo display ma
sai che è trasparente
cosa sta succedendo nella tua applicazione e
allora puoi visualizzare la struttura
che ti permette di vedere se hai collegato
insieme i tuoi componenti correttamente
perché guarda solo il Jason
definizione della tua pagina e corrispondenze
questi argomenti e quindi puoi fare causa
cose come filtro da entrambi i componenti
quindi ora mostra solo gli eventi
c’entra con questo
con questo componente ho appena selezionato qui
si e ed effettivamente alla domanda di
architettura sì, cosa pensiamo?
le nostre esperienze con il suo pop up
soluzione rispetto al flusso tradizionale
o forse reagisce domanda quindi sì il
vantaggio è chiaramente il disaccoppiamento di
componenti che ti permettono di stare bene
isolare i componenti dei test isolatamente
ma anche per riutilizzare un corso
applicazione o tra diverse pagine in
forse la tua applicazione lo fai
architettura visibile vedi dove
i componenti sono collegati se tu se tu
modificare un componente quali componenti
sarà influenzato da ciò che rende bene
composizione più flex di flessibile
rispetto al flex perché sei libero di farlo
definiamo i tuoi modelli in realtà noi
definire ad esempio un modello e anche
modello che trasporta le bandiere attraverso
l’applicazione così booleana che
è simile alla risorsa ma più semplice per
quei casi abbiamo solo bisogno di sapere se a
la finestra pop-up è aperta o qualcosa di simile
quello e forse tu hai avuto diverso
cose che ti piacerebbe estrarre
esempi di flussi di dati e dice anche
ogni componente è una scatola nera perché
non ha alcuna API in realtà
non importa se è implementato usando
un approccio funzionale o un imperativo
approccio quindi se hai sviluppo
squadre con background diversi e
ci sono alcuni funzionali hardcore
sviluppatori che vorrebbero implementare
il loro stato componente usando sai
ridurre le operazioni che tu e io possiamo fare
quello e se avete persone che lo sono
mani di estensioni reattive poi bene
un evento / abbonamento è davvero semplice
ad un abbonamento osservabile o xjs I
può metterli mettere quella cosa su quello e
quindi lavorare con RX js nel loro componente
e puoi anche sapere usare a
tecnologia di visualizzazione diversa se non lo fai
come reagire originariamente abbiamo iniziato
con a con angolare 1 e siamo ancora
usando l’ inglese è uno per pochi
componenti per lo più
ma di recente puoi anche usare reagire
solo un sottile strato adattatore che tu
devo scrivere ovviamente anche altro
quadri bene e c’è il
inconvenienti l’ecosistema è sicuramente
non paragonabile a quello con cui ti trovi
luxor redux cammini il percorso non letto
qui ma siamo sì, stiamo usando noi
lo stavo usando con finanziario
istituzioni per 23 anni e quindi noi
sono molto fiducioso nel farlo funzionare sì
ma tu hai ancora la libertà di fare
errori quando si determina quale
i componenti sono nella tua applicazione e
come li leghi insieme c’è
sempre la possibilità di per esempio
andando troppo piccolo si può originariamente noi
componenti definiti che erano solo uno
pulsante o 11 tablerow o qualcosa del genere
che e poi è diventato molto disordinato voi
posso immaginare di provare a disegnare questo
schema elettrico con centinaia di componenti
bene anche noi se abbiamo composizioni
semplifica le cose un po ‘ma può
diventare disordinato, quindi dovresti davvero provarci
identificare i componenti che sono reali
valore aziendale per l’utente finale e quello
rende le cose molto accessibili di solito
e abbiamo applicazioni che hanno
centinaia di quei componenti e loro
sono molto gestibili quindi 100 istanze
dovrebbe dire ma tende a tendenzialmente a
centinaia di classi di componenti sì e
allora è un flusso ancora così o il nuovo noi
detto parliamo di flusso e andare oltre
quello per il NM rimuove la creatività
tutto ciò che conta è che tu abbia
flusso di dati unidirezionale e avete
quei cambiamenti descritti come semplici oggetti
in tal senso sia il redux che il
L’approccio basato su pubblicazione-abbonamento è
in realtà più flusso di flusso perché in
flusso hai ancora questo non reattivo
modo di creare azioni e dispacciamento
loro allo stesso tempo così azioni come
oggetti semplici il modello evento si adatta a questo
ottimo
e bene sotto le stelle è questo per dire bene
è bello che tu stia inventando un
bandiere di benzina non facendo affatto flex
anche parlando di Redux, ovviamente
ma ci piace pensare che sia un po ‘
vero anche del nostro approccio e sì
in realtà non è così importante
terminologia ma è un po ‘
simile a quello che facciamo e poi a te
avere il giudizio altamente soggettivo di
cose che tutti questi approcci sono a
flusso unidirezionale ne parliamo tre
obiettivi principali che la nostra architettura dovrebbe
risolvere e gestire bene la complessità bene
forse se lo farai bene, lo farà anche
lavoro ma anche tu hai sempre questo
problema con uno stato mutabile il
la reattività sì dipende anche da come la usi
flusso ma come ho detto la creazione dell’azione
è la spedizione li fa male un po ‘e poi
scalabilità che significa non performance
saggio, ma il team di sviluppatori saggio pensiamo
si, siamo davvero a qualcosa
qui perché stiamo effettivamente sviluppando
pagina singola relativamente complessa
applicazioni con questo in più
squadre e non ottengono nel modo di
l’un l’altro troppo così che funziona
e poi ci sono questi problemi e bene
la sua registrazione istantanea del colpo di colpo del collo
importante per voi forse forse no e il
altre cose che imparano la curva, se lo sei
programmatore già funzionante quindi è
questo è un problema con redux, quindi questi
le cose dipendono molto dalla tua
situazione di longevità Redux è molto giovane
osservare si apre il modello stesso ha
ci sono stato per 20 anni, quindi penso a quelli
metodologie come l’event sourcing di tutti
si applicano gli schemi intorno a quelli visualizzati
a questa tecnica che abbiamo mostrato qui
ma ovviamente quello che stiamo facendo
particolare potrebbe essere troppo presto per dirlo
sì e ben che su di esso, sì la
quadro si chiama fortuna signore, se tu
voglio esaminare che le diapositive dovrebbero
essere alzato forse devo ancora fare
li pubblico ma sarà molto presto
altrimenti e mi chiedevo se ci fosse
sono tutte domande ora e va bene
dire grazie per la vostra attenzione
tutti

Please follow and like us: