quindi ciao e benvenuto a costruire single
applicazioni di pagina nel modo giusto come Brian
ho detto che mi chiamo Justin Meyer, sono l’amministratore delegato
di bateau B e per gli ultimi otto anni
tutto quello che ho fatto è costruire grandi cose
Applicazioni JavaScript per ogni
tipo di situazione che puoi immaginare e
questo discorso c’era circa 30 in quello
slide di questo discorso riguarda about the
tecniche migliori o le più uniche
tecniche che usiamo per costruire
mantenibile ad alte prestazioni e a
applicazioni JavaScript poco divertenti
Ho strutturato questo discorso in dieci cinque
lampo minuto parla così ho intenzione di avere
per andare estremamente veloce otterrà un
poco tecnico se tu se non lo fai
capire parte del codice o del
le diapositive cercano solo di ascoltare il suono
della mia voce perché spiegherà
in linea di principio quello che sto facendo ignora semplicemente
quello che vedi sullo schermo, quindi con
questo in mente oh attendere un prima cosa che ho
devo parlare di aver creato un posto mio
ordinare un’applicazione che è una semplice app
che comprende tutte le tecniche
grazie a chiunque abbia appena alzato il microfono
si potrebbe trovare alla barra Tobii
Metti il mio ordine e io sarò tu
usandolo per tutti gli esempi e
tecniche di cui ho parlato oggi, quindi sono
andrò davvero veloce e lo mostrerò
nell’app in modo che quando parliamo
queste tecniche puoi vedere come
applica un’app molto semplice ha una home page
quando si esegue il rendering lato server quando si
scegli un ristorante che farà un
stato push che ti permette di scegliere a
dichiarare e scegliere una città e ottenere
informazioni su un ristorante e un posto
un ordine così vai a Chicago e tre
un due naturalmente e metterò il mio
ordine e una volta effettuato l’ordine
puoi vedere una cronologia degli ordini dove puoi
camminare attraverso
ogni ordine attraverso diversi stati così
si sta preparando per la consegna
consegnato e questo è in tempo reale
applicazione se qualcun altro era su di esso
facendo cambiamenti vedresti quelli
cambia così questa app se la controlli
fuori su Github ha tutto ciò che sono
parlando di così puoi tornare indietro e
impara queste cose in dettaglio così nonostante
quanto tecnico ho detto che questo discorso sarebbe finito
essere la prima cosa che penso che facciamo
unico epitopo II è fare uso di controllo
liste di controllo hanno una lunga storia di
fare tutto meglio dall’aiutare
i piloti volano per aiutare i medici a salvare vite umane
abbiamo un progetto di lista di controllo che puoi
vedere qui la checklist bateau v github io
questa è una lista di controllo davvero semplice
ha solo un sacco di gestione UX e
domande sullo sviluppo cose come sono
lì gli eventi sociali ci sono ciò che è
la visione del progetto nel
roadmap fai esperienza utente
test fai quello è un altro buono
fai recensioni sul codice sorgente
Penso che le liste di controllo abbiano funzionato davvero
bene per noi perché mi permetta di tornare a
vista del relatore perché penso a tutti
sa cosa deve essere fatto su un progetto
è solo difficile a volte dare la priorità a esso
sappiamo tutti che dovremmo fare il codice
recensioni che sappiamo tutti dovremmo scrivere
test a volte non lo facciamo per lo più
perché sai che ne abbiamo altri
priorità altre cose che stiamo pensando
su una lista di controllo lo rende facile da fare
certo che tutti stanno facendo la cosa giusta
in ogni momento perché ne abbiamo fatti tanti
progetti probabilmente su 34 progetti
ora abbiamo alcuni dati interessanti –
per quanto riguarda ciò che influenza il più forte
ciò che è correlato più forte con il successo
quindi questi sono i più alti dirigenti
cose correlate che sono correlate al successo
ovviamente la cosa numero uno che
è correlato al successo è possibile rilasciare
un progetto entro sei mesi proprio così
questo è ovvio
cose come allenamenti annuali e
aziende che in realtà hanno sociale
eventi per la loro squadra al di fuori del lavoro
anche quelli sono fortemente correlati al successo
le cose progettuali correlate
fortemente al successo facendo test utente
ottenere la documentazione di progettazione ora ecco
la cosa veramente interessante queste sono
i più alti fattori legati allo sviluppo
che sono correlati al successo e lo sono
lontano sono correlati al successo sessuale lontano
meno della maggior parte della gestione e
la maggior parte delle domande di UX, quindi questo ha
lista di controllo almeno per noi come azienda
ci ha guidati e un po ‘ci ha umiliato
perché ci rendiamo conto che la gestione e
le decisioni sull’esperienza utente spesso contano
molto più delle decisioni tecnologiche ma
come tecnologi siamo costantemente
essere appeso in battaglie quadro e
cose del genere o se ti interessa davvero
circa il successo del vostro progetto si
potrebbe guardare in alcuni dei più il
gestione esperienza utente elementi che
la tua squadra dovrebbe fare così questo è il
solo non tecnico, quindi entriamo
le cose tecniche quindi l’ho trovato
citazione impressionante su goop JavaScript guru
ingegnere di squadra cromato addy Osmani x ‘
sito web e dice il segreto per
costruire app di grandi dimensioni non deve mai essere realizzato
le grandi applicazioni rompono il tuo
applicazioni in piccoli pezzi quindi
assemblare quelle dimensioni testabili
pezzi nella tua grande applicazione è
estremamente bene ha detto che è quello
quello è un buon scherzo ma penso che lo sia anche
piccolo così voi ragazzi non potete leggerlo realizzare
Quanto sono esilarante, sono uno dei nostri
primo sviluppo più importante
le strategie erano l’introduzione del
flusso di lavoro mod illuminato che tratta ogni
modulo come propria applicazione che cosa
significa in pratica che invece di
organizzando i tuoi progetti come questo dove
ogni modulo è raggruppato per tipo che hai
una cartella per tutti i tuoi file JavaScript a
cartella per tutti i tuoi file CSS che abbiamo sempre
raggruppa tutto
ogni modulo nella propria cartella ogni
modulo aveva qualche cartella ha i suoi test
la propria documentazione qualsiasi altro file
come CSS o modelli che sono
associato ad esso andare in quella cartella e
ci sono altre due cose che includiamo
includiamo sempre una pagina di test che viene eseguita
solo che i test dei moduli e per la visualizzazione
i moduli visivi dei widget includono una demo
pagina che mostra solo quello
funzionalità dei moduli quindi i vantaggi per
questo è più facile identificare quando
qualcuno manca test proprio perché
puoi guardare nella cartella e dire hey
non c’è neanche un file di test, penso
gli sviluppatori sono molto più propensi a
aggiornare un test quando sono quando sono
lavorando in un modulo e il test è
fissandoli in faccia perché è dentro
la stessa cartella e ovviamente prelievo
fare test e creare lead di pagine dimostrative
a buon design API e finalmente penso
il più grande è che puoi
svilupparsi in modo isolato su cui lavorare
il tuo modulo e sono solo test all’interno
una cartella che ignora completamente il resto
dell’applicazione
quindi ho un rapido esempio di questo nel mio
quindi ho la mia pagina per gli ordini che tu
posso vedere qui posso modificare quello che posso
questo è il solo il widget dell’ordine e io
può anche eseguire i suoi test piuttosto carina
di base e questo sembra nel codice
ecco il mio ordine e ho la mia pagina demo
che carichi importa il mio componente del mio ordine
e lo usa nella pagina e così è
semplice è quello di ottenere una pagina di prova e di una
pagina di test Sto solo caricando l’ordine
test di prova altamente incoraggiano le persone a
usa questo modello okay
numero tre, quindi abbiamo preso ultimamente
l’idea di ogni modulo è sua
propria applicazione all’estremo limite
che conosco mettendo molto del nostro
moduli nei propri progetti e poi
pubblicarli su NPM e poi
importandoli nel nostro grande progetto così
ad esempio il luogo in cui l’app del mio ordine ha un
widget di schede invece di sapere nascondere
via dentro di te inserisci il mio codice degli ordini
Abbiamo creato un alone messo messo schede
nel proprio repository con i propri test
e per importarlo nel nostro progetto è
semplice come il bit di installazione di NPM
schede che lo aggiungeranno al nodo
cartella dei moduli e quindi per importarlo
in quell’ordine che ordina un modulo tutto
Faccio è importare schede bit è un’abitudine
elemento e sto usando la sintassi es6 se
la gente non lo riconosce e perché
è un elemento personalizzato tutto ciò che devo fare
è aggiungere schede bit alla mia pagina e sto andando
per creare un pannello per il menu del pranzo e
Finalmente creerò un pannello per il
menu per la cena e per renderlo I
passa semplicemente attraverso ogni voce del menu
aggiungere una casella di controllo per se il se il
la voce del menu del pranzo è selezionata e alla sua
nome e prezzo e poi mi limiterò a copiare
questo codice per rendere il menu della cena
quindi spero che tu possa vedere come una parte di
il mettere cose repository interno
può essere estratto da NPM
estremamente facile proprio su qualsiasi altro
progetto che abbiamo vogliamo bit-tab noi
può solo installarlo e usarlo come
rapidamente come ho appena mostrato ora se lo sei
usando comune Jas e browserify sei
come questo è vecchio cappello ho visto questo
prima, ma se stai usando Jas comune
e browserizza solo te che stai limitando
chi può usare il tuo codice e quale codice tu
può usare perché uno dei più grandi
problemi con JavaScript sul lato client
lo sviluppo è la frammentazione di tutti
il diverso modulo che carica le sintassi
ecco la prossima sintassi di es es6
quali sono le schede bit di importazione che ci sono
comune JSON browserify
c’è il timer
c’è l’AMD e la gente è ancora bloccata
nel 2005 usiamo tag script e e
link tags per caricare il loro bene che caricano
il loro codice JavaScript così usiamo a
progetto per costruire le nostre applicazioni chiamate
steel Jas e questo ci permette di essere qui
il codice delle schede indipendentemente dalle schede di offerta
caricamento se sono altri modelli CSS
i moduli J comuni o i moduli AMD che possiamo
esportare questo progetto in modo che possa essere
usato da chiunque usi AMD comune
Jas es6 quindi questo eseguirà uno script io
esegui il mio script di compilazione per grunt e vedrai
creerà una cartella dist con tutti
queste esportazioni così – ma le schede possono essere utilizzate
da chiunque vedrai anche le schede
meno file sono stati trascritti in CSS e noi
inserito il plugin CSS per requirejs così
se si sta utilizzando AMD si può effettivamente
richiedono queste schede e lo stile
dipende da così la mia speranza per tutto questo è
ovviamente lo usiamo per riutilizzare molto noi
puoi creare widget che li usano in tutto il loro
anche diversi progetti molto facilmente
quando tiri fuori qualcosa e tu
pubblicarlo su NPM lo aggiunge molto
utile bit di
dati per la versione semantica del tuo
pacchetto perché quando tutto è nascosto
via in applicazione e qualcuno fa un
cambia un modulo che potrebbe essere il tuo codice
dipende da non sapere se lo hanno
aggiunto una nuova funzione o hanno rotto
l’API o hanno risolto un bug quando tu
pubblicare qualcosa per le persone di NPM sono
mettendo quel numero di versione e
tipicamente ti dà anche una buona idea
è reso più facile la gestione del rilascio
noi faremo in realtà messo le nostre pagine in
diversi repository per un grande sito
e poi se vogliamo assemblare il pieno
sito ci limitiamo a puntare a versioni specifiche
di pagine diverse e se una pagina
la versione si sta rompendo bene, ci limitiamo a rotolare
tornare a una versione precedente e ridistribuire
il sito che è veramente bello e
finalmente la mia speranza è per progetti come
Jas in acciaio che può migliorare
dall’open source lato client c’è un grande
problema in JavaScript open source
comunità in questo momento comparativo si guarda
ai nodi dove ci sono pochi progetti
dipende da altri progetti è molto difficile
costruire come una ricca gerarchia di
funzionalità avanzate in JavaScript
a causa di tutti i diversi moduli
caricamento sintassi ma se ce la possiamo fare
in modo che tu possa usare qualsiasi sintassi del modulo
lo vuoi ed esportalo a vicenda
sintassi del modulo, quindi la mia speranza è quella
possiamo iniziare a ottenere questa ricca topologia
di progetti JavaScript open source quindi
questo è ciò che ho appena mostrato
abilita quel numero per HTML personalizzato
composizione elementi personalizzati sono
Sono ovunque parlare andando sul perché
sono fantastici e ho intenzione di parlare
su cosa penso che facciamo speciale con
elementi personalizzati quindi prima il motivo è
eccezionale
alcuni di voi in questa stanza potrebbero essere vecchi
abbastanza da ricordare i vecchi tempi ogni volta
volevi aggiungere funzionalità a a
sito che dovresti mettere aggiungere un po ‘di HTML
alla tua pagina e quindi si avrebbe dovuto in
il tuo JavaScript trova quell’elemento e
invocare qualche comportamento su di esso è tutto
andato ora perché ogni quadro moderno
ti consente di definire elementi personalizzati e a
elemento personalizzato quando è inserito in
la pagina
lo sai istanza stessa così questo è
come sembra reagire questo è ciò che
sembra un angolare
questo è quello che sembra in kangjae s
che è quello che sto usando per questo
presentazione quando progettiamo il nostro
applicazioni o char quando progettiamo il nostro
elementi personalizzati li progettiamo con questo
ragazzo in mente questo è il Toby’s UX
direttore giusto non lo sa
JavaScript ma lui conosce HTML e CSS noi
abbiamo due obiettivi che vogliamo fare nostro
modelli in modo che possa capirli
ma vogliamo anche renderli personalizzati
elementi abbastanza potenti da poterlo
comportamenti espressi senza preoccuparsi di Bob
gli ingegneri stanno bene così puoi
modificare e aggiungere un sacco di ricchezza alla
pagina senza se stesso solo da
capendo questi elementi e
riordinandoli così abbiamo una volta che abbiamo
due strategie per che il primo è
un tag team di due diversi tipi di
gli elementi personalizzati il primo sono personalizzati
elementi che possono effettivamente caricare dati
nella pagina nel modello e il
in secondo luogo sono gli elementi personalizzati che sono
componibili per cui ecco un uovo per
esempio ho un componente grafico bit
dove aggiungo serie diverse
aggiungerai che conosci nuove linee sul
grafico dato alcuni dati quindi ho intenzione di mostrare
un rapido esempio di questo in azione lasciami
aggiorna la pagina okay, quindi qui ho un
pagina che mostra un singolo ristorante
cronologia degli ordini l’importo speso per
ogni ordine e questo si presenta così questo
assomiglia a questo ho usato il mio modello di ordine per
trovare tutti gli ordini per la città di cagliata di formaggio
questo è il nome di un ristorante
sembra che sia del Wisconsin e poi
Metto quei dati nel modello
e quindi sto usando quei dati per questo
serie bit ora diciamo il designer
vuole aggiungere un altro cuoco fare a
confronto comparativo tra formaggio
Cagliata City e qualche altro ristorante
chi
tene palace Non ho intenzione di battere a macchina
invece ho intenzione di rubare il codice loro
può aggiungere un altro modello di ordine, quindi questo è
andando a caricare i dati dei palazzi di poutine in
la pagina e poi tutti avrebbero dovuto
fare è aggiungere un’altra serie di bit per questo
dati e quindi salvare la pagina aggiornarlo
e hanno creato il loro nuovo
comportamento giusto hanno caricato i dati
loro stessi hanno aggiunto una nuova linea a
il grafico quindi è la prima cosa che facciamo noi
la seconda cosa che facciamo è e
potreste aver notato che abbiamo effettivamente
permettere alle persone di dichiarare dipendenze in
il modello stesso così qui che può
importazione da UI po grafico si grafico che
sta effettivamente facendo l’importazione di quello
modulo nella pagina questo è grande per
i nostri progettisti quindi se volevano aggiungere
bit di schede per la pagina bene solo loro
le schede bit di importazione possono importare schede di bit e
iniziare ad usarlo nella pagina ancora una volta che
non dobbiamo disturbarci come gli ingegneri
quindi l’ ultima cosa che facciamo non è per
il nostro designer è per noi e io davvero
amo le prossime specifiche dei componenti web
e che puoi definire
componenti leggeri in genere di costo
nella pagina direttamente questo sta definendo
un componente del mondo ciao che puoi vedere
è il modello e uno stile e il suo
comportamento abbiamo la nostra versione di questo
in cui è possibile definire un componente non possibile
e dargli il suo tag i suoi stili come meno
e costruisci le cose in questo modo così davvero
come questo quattro perché cosa succede se
in una grande applicazione si tende a
inizia davvero a ricevere un sacco di piccoli
widget e non vuoi averli
cinque file diversi che sono meno file a
modello e un modello di vista per qualcosa
che può essere piuttosto piccolo
ok il prossimo è il numero cinque è l’unità
questo è tutto merito di modelli di visualizzazione testabili
come progettiamo, testiamo e costruiamo le nostre
visualizza modelli e costruisci modelli di vista
Mi piacciono molto tutte le volte in più
lavoro che stai facendo in grande
Applicazione JavaScript, quindi userò
questo esempio l’ordine dei ristoranti o
il dispiaciuto che quando scegli il tuo
pagina ristoranti e questa pagina carica il
afferma quindi è possibile scegliere uno stato quindi
puoi caricare le tue città che puoi
scegli una città, poi vedi la tua lista di
ristoranti e poi se cambi il tuo
lo stato rimuove davvero i ristoranti
e ricarica nuove città per quello stato
ma poi devi scegliere e cancella
la città l’ opzione città giusto questo cosa
hanno scelto per la loro città così prima cosa
Cerco sempre di dare un’occhiata al
funzionalità e quindi identifico il
valori che rappresentano lo stato giusto così
il modo in cui faccio sempre questo è che ho
una specie di oggetto JavaScript che io
tieni traccia di tutte le graffette
proprietà di questo utente di questo
di come te il design o il
comportamento qualunque si voglia chiamarlo così
la prima cosa che puoi vedere è che stiamo caricando
Stati cosi ho intenzione di avere Stati come a
prometto che sarà una serie di
tutti i dati dello stato che sta per risolvere
a un array con tutti i dati di stato che sono
dirà che lo stato che scelgono
Io salverò quello stato come a
stringa per quale stato hanno scelto
le città saranno una promessa di tutti
le città che stanno caricando e la città
che hanno selezionato sarà il nome
della città e poi finalmente c’è
Gonna Be ristoranti era solo andando essere un
promessa con tutti i ristoranti
proprio qui c’è la prima cosa che faccio quando
Vengo su una pagina per progettare che sono io
capire queste proprietà e il
comportamento per queste proprietà il secondo
cosa che faccio è scrivere un test per il
guarda il modello Sono un grande fan del test-driven
sviluppo
quindi tutto questo sarà che io vado
attraverso queste diapositive davvero veloci quindi se
non lo capisci
di nuovo ascolta le parole della mia voce
non prestare attenzione allo schermo in modo da
testarlo ho impostato i miei test
infrastruttura carica i moduli che io
Ho bisogno quindi di creare i miei dati falsi per il mio
test perché sta andando il mio modello di vista
per raggiungere il modello di chiedere per voi
conosci ristoranti e stati e città
quindi io uso questa utilità di installazione per
dirottare tutte le richieste Ajax intercettarle
e invece usare i dati falsi che sono
fornendo così invece di quando un quando noi
prova a fare una richiesta di indirizzo all’API
afferma e invece useremo il nostro falso
dati che sto fornendo e infine
Creerò un’istanza del mio modello di visualizzazione
che sto per creare una lista di ristoranti
guarda il modello e poi verificherò tutto
i diversi passaggi che cercherò
che farò in modo che il mio
la proprietà dello stato è una promessa e io sono
tornare indietro tutti i miei dati falsi degli Stati
quindi metterò lo stato in uno stato
proprietà a uno stato e quindi verificarlo
Ottengo i cambiamenti della mia città e ottengo una lista
di città dalle stesse stesse città che
abbinare miei dati falsi e quindi ho intenzione di
ambientare la città e io continuerò a mantenere
camminando attraverso questo cambierà
i ristoranti e ho intenzione di ottenere il
dati del ristorante giusto indietro e poi
alla fine ho intenzione di impostare lo stato su a
stato diverso e verificare che la città
il valore è rimosso e che sto ottenendo un
lista di tutte le città un elenco di nuove città
è così che scrivo solo un test
test del comportamento del modello di vista
e quelle proprietà così finalmente sono
scriverò il modello di vista e questo è
di nuovo questo è con Kas questo è quello che
sembra che diventa davvero facile voi
basta definire il comportamento per il tuo
diverse proprietà iniziali dello stato
valore è tutti gli stati caricati dal
server il comportamento dello stato è side
efficace ogni volta che lo stato è impostato I
voglio rimuovere qualunque città è stata impostata
perché se stai cambiando questo
lo stato bene allora qualunque cosa se City
hai scelto non dovrebbe non contare così
rimuovilo, quindi definirò il
comportamento delle città città è
dipende da uno stato quindi se c’è un
state per cui restituirò tutte le città
quello stato e altrimenti lo farò
nessun ritorno di voi potrebbe chiedere
quello è che non è lavori validi dalla sintassi
sto usando la sintassi es6 che fa un
oggetto con stato: stato successivo e
finalmente Sto solo andando definire il
comportamento dei ristoranti che è
proprio come le città se c’è una città in un
stato restituire tutti i ristoranti per quello
combinazione dello stato della città va bene e poi il
l’ultima cosa è che scrivi solo il tuo
modello così qui il modello è
sto solo mostrando la parte del
modello per il menu a discesa dello stato e tu
posso vedere che sto facendo cose come disabilitare
Seleziona fino a quando lo stato è
in attesa mentre è in sospeso che sto mostrando
caricamento come unica opzione e poi se
la persona non ha scelto uno stato che sono
dirò scegli uno stato e io lo farò
passa attraverso la lista degli stati e la lista
loro ragione, quindi penso che i benefici per
questo modello è davvero così, se lo sei
capire le proprietà stateful di
il tuo modello di vista e poi testarli
quindi l’implementazione diventa più facile
da fare e infine i tuoi modelli
diventare super semplice, vero?
tutto in quell’ordine va bene il prossimo
uno è il routing a due vie che spiegherò
una differenza tra routing a due vie e
routing a senso unico che fornisce un esempio di utilizzo
caso e il discorso sui benefici di
routing bidirezionale in modo che tutti siano familiari
con routing a senso unico soprattutto se tu
provengono dal mondo a senso unico lato server
il routing in cui inserisci gli URL e ottieni
tipicamente nel server che chiamerà
qualche metodo da qualche parte ma in realtà un modo
il routing significa che ottieni qualche URL e tu
recuperare alcuni dati da esso va
attraverso le regole di routing e torna indietro
fuori alcuni dati
quindi se tu avessi ristoranti, formaggio, città
passa attraverso queste regole di routing che farai
ottenere ristoranti città di formaggio come dati
allo stesso modo se tu avessi ristoranti formaggio
il caricatore della città passa attraverso
questi percorsi lo otterrai
oggetto torna a un percorso consente di
passare dai dati indietro attraverso i percorsi
per ottenere il tuo URL finale e lo mostrerò
perché questo è davvero bello un secondo solo
dare un altro esempio se avessi una pagina
ristorante stato Illinois City Chicago
ha attraversato questi percorsi Prendo un URL
che sembra che così il beneficio della
vero vantaggio che sto per raggiungere
per il routing a due vie è possibile
cambia se usi il routing a due vie
puoi scrivere le tue applicazioni in questo modo
puoi modificare i percorsi in qualsiasi momento
e devi solo cambiare i percorsi
e il resto della vostra applicazione solo
continua a lavorare ma per fare questo è necessario
cambia leggermente il tuo codice, quindi lo farò
mostrare i cambiamenti nel codice così un sacco di
le volte le persone scrivono le loro app che sembrano
come questo se il percorso corrisponde ad alcuni
fare questo altrimenti la mappa del percorso
quale è qualche altro modello fare questo a
utilizzare il routing a due vie la prima cosa che tu
è necessario modificare il codice in
invece usa proprietà stateful che sono
sulla strada quindi invece sto andando a
controlla se la proprietà della pagina rotte è
a casa poi vado a rendere la casa
elemento personalizzato altrimenti se lo è
ristoranti che renderò il
elemento della lista dei ristoranti , quindi è uno
il cambiamento che devi fare è andare da questo
a questo il prossimo cambiamento è invece di
scrivendo le tue url come questo dove sei
tipo di scriverli manualmente da soli
nel modello invece usi a
template Io uso un helper che sta per
passare attraverso l’algoritmo di routing inverso
e questo prenderà la lumaca del ristorante di pagina
uguale a lumaca e convertirlo allo stesso
href abbiamo visto prima ma la magia di
il routing a due vie è che se passi da
questo questi percorsi a queste vie bene
tutto funziona ancora perché è tutto
solo controllando le proprietà e tutto il tuo
URL
sono creati attraverso il percorso inverso
algoritmo quindi i benefici che ti permette
per scrivere il tuo percorso i tuoi URL in un modo
Là
mi dispiace gestire tutti i tuoi URL in un unico spazio
e avere il resto della tua domanda
funziona solo indipendentemente dall’aspetto dei tuoi URL
come bene il prossimo è il numero sette
e questo è quello che probabilmente sono
personalmente molto entusiasta di parlare
di
Penso che abbiamo risolto davvero bene
modo come fare connessioni in tempo reale e
un sacco di ottimizzazioni delle prestazioni in
nel client in tempo reale e
l’ottimizzazione delle prestazioni questo può essere
davvero difficile da ottenere a volte a volte
Diciamo che avevo due widget che io
voluto mettere nella pagina e scrivere
indipendentemente e questi stanno andando
mostra che uno mostrerà completato due
Dews l’altro mostrerà incompleto
fare è solo alcune domande da richiedere
voi ragazzi pensate a come li facciamo
due possono essere combinati per creare un singolo
richiesta per tutti di fare come faremmo
quando si verifica un aggiornamento sul lato server
qualsiasi cosa nuova da fare è crearla come facciamo noi
gestisci la lista per metterla in come facciamo noi
gestire quando avviene l’aggiornamento per spostarlo
da una lista a un’altra lista e poi
come possiamo salvare i loro dati in
archiviazione locale quindi non dobbiamo fare
la stessa richiesta di nuovo la risposta a tutti
di questi problemi è sorprendentemente semplice
è logico
Si pone come esso come in diagrammi di Venn che
potrebbe chiedersi perché stabilisce la ragione
è perché ogni volta che richiedi i dati
da una pagina che stai effettivamente fornendo a
rappresenta un tour che stai richiedendo dati
dal server che stai fornendo a
rappresentazione del set che desideri
dei dati che si desidera caricare tutti
giusto se volessi tutti i diritti per l’utente
cinque che sono completati in modo vero potrei fare
qualcosa come questo e impostare un rappresenta
adesso conosci un set se lo tratti
come un set
e puoi usarlo per confrontarlo con altri
imposta così ho impostato B qui set B è utente
cinque completati per non completati a
Do è chi è il set critico B rappresenta a
sottoinsieme di set a così so se ho
già caricato impostato a non è necessario
carica i dati di B così abbiamo creato un basso
libreria di livello che ci permette di fare set
confronti con oggetti che sembrano
questi ti consente anche di creare set personalizzati
algebra in modo da poter confrontare gli altri
cose che non sono semplicemente dritte
proprietà quindi se volevo intervalli o
proprietà enumerabili enumerabili o
proprietà di tipo booleano che posso fare
cose come questa che è comparata sanno
che l’arrangiamento inizia a 0 e
finisce a 50 è un sottoinsieme di un intervallo che
inizia da 0 e termina a 100 ora con
questa logica stabilita inizierò a camminare
attraverso molte delle prestazioni
ottimizzazioni che puoi fare così
il primo è che ne hai due diversi
widget che sono stati caricati
a carico degli altri il caricamento incompleto a
Non è che non si desidera loro di conoscere
l’un l’ altro ma quello che puoi farli andare
attraverso è lo stesso livello del modello e quello
il livello del modello può vedere le richieste in arrivo
attendere un istante fino a quando alcuni potrebbero avere un
possibilità di riunirsi almeno a quelli
che stanno arrivando nello stesso momento e
può fare un’unione di quelle serie e invece
fai una richiesta per tutti i dati, diciamo io
andato a una pagina che mostra tutto completato –
quote e che ha richiesto il giusto il
completato – quote dal server e
poi sono andato alla pagina che mostra tutto
le quote bene richiederanno tutte le quote
così, ma posso fare una certa differenza
e ottenere e sapere che io proprio in realtà
necessario perché ho già caricato
quelli completati so che ne ho solo bisogno
caricare solo quelli incompleti ora dove
i set sono davvero realistici
connessioni quindi diciamo il server
ha spinto alcuni dati per Anu da completare
falso ID cinque
fanno piatti che puoi leggere ora che ho
ho capito ora che ne ho due diversi
imposta nella pagina che sono attualmente
mostrando che sto mostrando il completo e
incompleto possiamo fare la stessa logica impostata
per vedere che il nuovo set da fare è un
sottoinsieme del set incompleto e poi
inserire automaticamente i nuovi dati in
fare attenzione alla lista e lasciare che si leghi
di solo in realtà inserendo nel Dom
con nessuna logica aggiuntiva, proprio il
il super modello si prenderà cura di questo e
Ti spiegherò come in un secondo così questo
posiziona la tua app per ordini posiziona la mia app per ordini
ha utilizzato set di tutte queste cose
aggiornamenti automatici in tempo reale in linea
il caching che sto per spiegare può farlo
combinare richieste simili a come noi
già visto e supporta anche l’ autunno
attraverso il caching e tutta questa roba
ottieni gratis con questo sottostante
impostare la logica che non mi è piaciuto fare
qualcosa di speciale per questo solo per
lavoro nella mia applicazione quindi parliamo
su come funziona il caching inline in questo modo
è una grande tecnica se lo fai
rendering lato server quando l’utente
arriva alla pagina che chiederanno
l’HTML alla pagina e in linea nell’HTML
della pagina che stai per mettere i dati
per qualsiasi pagina che sta andando poi
richiesta in questo caso inseriamo in linea
variabile della cache e quindi la pagina è
sarà disegnato ma poi JavaScript è
comincerò a correre e lo farà
prova a fare una richiesta per il nuovo
preparare la consegna e consegnare gli ordini
il super modello che sta per attraversare
il modello eccellente di un super modello è gonna
vedi hey stai richiedendo insiemi di dati
quello è già nella cache inline che sono
intenzione di rimandarlo indietro a te e
la pagina non cambierà perché è
solo ottenendo gli stessi dati che erano
già usato per rendere la pagina ma il
la pagina sarà ora in diretta con i dati che
aveva bisogno di aggiungere un comportamento ricco e poi
si userà quei dati per aggiornare locali
stoccaggio che è importante per il prossimo
cosa che è il
contanti fall-through così la caduta attraverso
il denaro funziona quando qualcuno va a questo
pagina con la data push che sta per fare a
richiesta di tutti i dati per la pagina
sta per colpire la super modella e
la super modella sta per dire oh questo
sono tutti questi diversi stati
rappresentare tutti i dati dell’ordine così sono
combinerò tutto ciò in una singola richiesta
e prima inviare quella richiesta al locale
la memoria locale di archiviazione risponderà
con quei dati e sarà usato
per soddisfare tutti e quattro questi
richiede e disegna la pagina ma nel
sfondo sta andando a fare una richiesta
al server ottenere i dati ottenere i dati
dal server ne farà uno
richiedere al server e quindi utilizzarlo
per aggiornare gli articoli nella pagina e
farà qualsiasi inserimento o rimozione con
i nuovi dati nella nuova lista
automaticamente e parliamo di come
in tempo reale funziona così in tempo reale funziona
il server sta andando a spingere un evento aggiornato
la super modella sa tutto di
liste che sono attive sulla pagina
perché quando hai richiesto i dati e
ti ha restituito una lista di cui è a conoscenza
quell’elenco tiene traccia di esso così quando
quando avviene l’ aggiornamento , diciamo che lo è
cambiare un nuovo oggetto da nuovo a
preparando vedrà che il
l’oggetto non appartiene più alla nuova lista
e ora appartiene alla preparazione del trucco
che cambiano al al per i dati
modello ma poi il live binding andrà bene
abbi cura di spostarlo nel giusto
posto in modo da ottenere un comportamento in tempo reale per
libero con set quindi penso sia solo
perché mi piace così tanto che penso sia
vale la pena mostrarlo molto velocemente, quindi se io
avere il mio posto il mio ordine
quindi qui posso solo cancellare gli ordini e
faranno solo scompaiono a destra a sinistra
in tempo reale ma non dovevo farlo
qualsiasi cosa diversa dal solo chiamato distruggere
sul mio modello perché invierà il
connessione in tempo reale o è così
invia una richiesta e il tempo reale
la connessione dirà hey qualcosa è stata
cancellato passerà attraverso tutte le liste
che la pagina è attualmente in rendering e
basta rimuovere l’elemento automaticamente I
penso che sia matto che puoi ottenere
in tempo reale per libero spero che voi ragazzi lo facciate
troppo bene
numero
va bene
numero otto live reload quindi sono solo
comincerò con una demo per questo così tu
ragazzi se avete mai usato richiede come
lo sai che a volte in un grande
l’applicazione può richiedere molto tempo
ricarica la tua pagina quindi vedrò
quanto tempo ci vuole per ricaricare questa pagina
ok, prendi due punti quattro sei
secondi usiamo molto live usiamo live
ricarica la tecnologia in modo che io possa correre e
collegalo a un server di ricarica live e
ora quello che posso fare in realtà lo faccio
la pagina di cronologia degli ordini voglio solo
mostra la differenza di velocità in cui tu
puoi sviluppare con la ricarica live così puoi
guardalo e io salvo ed è quasi
istantanea quanto velocemente riesco a vedere il
risultati di cambiamenti nel mio codice e in tutti i
deve fare è salvarlo e solo giusto
funziona così sto andando parlare di come questo
funziona ma prima voglio dire perché è
fantastico se non è ovvio così è
Fantastico tutto ciò che riguarda l’umano
attenzione se davvero devo aspettare
due secondi per ricaricare la mia pagina
quando comincio a pensare a reddit o
controllando le mie e – mail o qualcosa del genere
ma se potessi fare un cambiamento
e vedere l’aggiornamento pagina subito
entro un secondo rimango concentrato
sui miei compiti live ricaricando come funziona
per prima cosa parliamo di come funziona il caricamento
senza live ricaricare con qualcosa di simile
requirejs
vai alla tua pagina che ti caricera ‘
modulo principale quindi caricherà il tuo
dipendenze dei moduli principali che correranno
qualsiasi delle dipendenze che non hanno
dipendenze stesse poi sta andando
per continuare a caricare le dipendenze dopo
dipendenze finché non carica tutto
grafo delle dipendenze e poi sta andando a
inizia a eseguire queste cose
fino a quando non esegue il modulo cronologia
il modulo principale che tipicamente
scrivi scrivi come appare la pagina
vivere ricaricare cosa fa e perché
può essere così veloce è che quando cambio
la storia meno quello che farà è che lo è
cancellerò quel codice di moduli e lo è
segnerà qualsiasi modulo genitore come
aver bisogno di essere riusato ‘aggiungere che sta per
devi solo scaricare quel file ora
e poi eseguirlo e solo solo il suo
moduli genitore e quindi aggiornerà il
pagina con un colore diverso come I
ha mostrato così questo consente di risparmiare una quantità enorme
di tempo che non devi riscaricare
jQuery non hai nemmeno bisogno di eseguire
jQuery hai appena apportato una modifica e tutto il resto
i moduli tipo di rieseguire
stessi che hanno bisogno di solo freddo che è
tutto su questo è divertente non riguardo
prestazioni, ma questo è molto
sulle prestazioni che mi piacciono
abbiamo risolto come fare davvero i modelli
beh, penso che abbiamo risolto come costruire
la tua applicazione in modo che carichi tanto velocemente quanto
possibile davvero bene e in un molto
modo unico ok
quindi andrò davvero veloce attraverso questo oh io
pensavo di avere otto minuti il mio timer è
off ok freddo va bene quindi è a partire dalle
la diapositiva sbagliata qui, quindi vado a
spiego io sto andando provare a passare attraverso questo
davvero veloce perché mi piace questo sono
Spiegherò come ottimizzare un sito
non viene caricato progressivamente perché
le stesse tecniche si applicano a un sito che
è solo una specie di diverse pagine statiche
ecco le mie pagine statiche e qui è il
moduli che caricano per prima cosa
le persone fanno tipicamente quando sono
costruendo un sito come questo, lo faranno
stipare tutto ciò di cui una pagina ha bisogno
un file di produzione che non è eccezionale
perché allora se le cose sono usate trasversalmente
tutti i diversi siti ogni volta che
l’utente cambia le pagine che devono
riscaricare più del dovuto
quindi la prossima cosa che la gente fa è che lo faranno
dì oh, vado
Voglio raggruppare ciò che voglio creare
quei moduli nel loro bundle e
allora avrò tutte le mie pagine aperte
quel fascio giusto così che io possa
sperimentare alcuni vantaggi del caching
ora il problema con questo è che può
essere ingannevole molto difficile senza molto
prova ed errore per ottenere l’optimum
disposizioni di pacchetti in cui appartiene
cosa sai che JS è stato usato solo
in tre di questi moduli forse dovrei
avere un altro pacchetto che questi tre
tre pagine si caricano e poi loro
tutto ancora carica anche il core bundle
può prendere queste decisioni per sempre e
mai capito bene ma abbiamo un
algoritmo che può quindi farmi il mio
meglio spiegare come funziona l’algoritmo
se questo è il tuo grafico di dipendenza il
la prima cosa che fa è tirare fuori tutto
moduli che sono i più condivisi così
jQuery e titolo CSS condivisi da
tutto li combina questi tre
le cose sono usate tutte insieme in modo da combinarle
il loro cursore è usato dai ristoranti di
ordine quindi sono come um Sono a e sono solo
continuerò a combinare i moduli fino a quando non ottengo
questo tipo di installazione siamo fondamentalmente dentro
questa situazione ho intenzione di schierare il
la homepage delle dipendenze dovrebbe essere caricata
questi pacchi dovrebbero mangiare i ristoranti
caricare questi fasci ordine avrebbe dovuto
caricare questi pacchetti e la cronologia lo farebbe
devo caricare questi pacchetti ora questo è un
grafico delle dipendenze tutto suo dove
hai il caching perfetto ma e tutti
pagina carica solo esattamente ciò di cui ha bisogno
le home page caricano solo ciò di cui ha bisogno
ma il problema sono i ristoranti qui
caricare cinque diversi script giusto e
se hai 20 pagine con sovrapposizione
strane dipendenze che potresti dover
inizia a caricare una tonnellata di pacchetti che è
dove la seconda fase di questo raggruppamento
l’algoritmo arriva in quello che può fare è
prova tutte le diverse combinazioni
che è come se tu conoscessi un NP completo
problema ma in genere si spera di no
avere troppi pacchetti in modo che possiamo provare
ogni combinazione e prova a combinare
impacchetta e poi controlla quanto
codice aggiuntivo che ogni pagina deve avere
quando si combinano i pacchetti così le home page
devi caricare il cursore che deve farlo
caricare due ordini di kilobyte è necessario
carica 30 kilobyte perché hanno il
caricamento può jazz carosello e così carped
proverà un’altra combinazione diversa
in questo caso combinerà questi
due così adesso i ristoranti si stanno solo caricando
quattro moduli ancora e in questo caso il
lo spreco extra in ogni pagina è solo sette
kilobyte quindi usa quella combinazione e
quindi continuare ad andare avanti per se deve a
combinare altri moduli è un modo
che puoi ottenere il caching perfetto e il
solo il costo è il tuo forse caricare alcuni
byte in più di codice che qualche altra pagina
avra ‘bisogno che sia probabile
andare a quella pagina comunque così che è il nostro
algoritmo di raggruppamento l’unico altro
cosa voglio dire è quanto possiamo essere cool
collegalo al nostro atto il nostro modulo principale di
la nostra applicazione è in realtà un modello
e perché possiamo fare carico dalla
modello questo è come ciò che in realtà
sembra che abbiamo il nostro routing
regole e importeremo se qualcuno
naviga alla home page importiamo il
app home bundle e quando è risolto
mettiamo quell’elemento lì e questo
modo in cui possiamo mostrare uno spinner come gli utenti
Il codice JavaScript deve caricare o
qualcosa di simile
finalmente il rendering lato server è tutto
su come sbarazzarsi di questo tipo di
filatori sarò solo parlare di vero e proprio
veloce come lo facciamo è buono per SEO I
ho quattro minuti così posso stare bene
bene si desidera il rendering lato server per
prestazioni percepite in modo che l’app venga caricata
e l’utente può vedere la loro pagina
anche se javascript non è completo
inizializzato ancora ed è ottimo per SEO
la tecnica che usiamo è di correre
tutto in un unico contesto virtuale
Dom va bene, c’è molto di diverso
tecniche cosa significa ciò che è singolo
contesto significa molte volte persone
beh, ne parlerò non significa a
molte volte le persone quando una nuova richiesta
entra e creeranno un headless
ciò creerà un nuovo contesto nel nodo
e che significa che ha una propria
impostare il tempo fuori è un po ‘come il tuo
finestra dotata proprio punto nuovo documento e
esegui tutto il codice JavaScript importa tutto
il codice JavaScript ed eseguilo lì
non facciamo che abbiamo sempre corsa nel
lo stesso contesto in modo così fondamentale che significa tutto
del nostro rendering tutto il nostro codice solo noi
devo caricarlo una volta e il nostro rendering
non siamo noi non stiamo creando come un nuovo
documentare ogni volta per rendere e noi siamo
usando molto ciò che Dom virtuale significa
stiamo usando un Dom molto leggero
ha davvero solo un penny e un inserto
prima e come rimuovere il bambino è come
i pochi e setattribuiscono pochissimi
metodi molto leggeri molto veloci e
allora parlerò di quando fai le cose
in questo modo ne hai il costo
tutto è collegato al rendering
ciclo di vita dove non lo sei
correre nel proprio contesto può essere
difficile sapere che tutte le richieste Ajax
hanno finito perché ci potrebbe essere in
lo stesso contesto per cui l’Ajax richiede
una diversa risposta alla pagina in corso e
devi farlo e io lo farò
spiega come lavoriamo, ma prima come
configuriamo come viene configurata questa app
il rendering lato server in generale noi
carica il nostro modulo principale che è quello stash
modulo con un plugin speciale perché
aggiunge il rendering del nodo ad esso e quindi da
riceviamo una richiesta in qualunque modo tu sappia
la tua domanda ottieni una richiesta e
risposta oggetto dal nodo lo facciamo
allora tiriamo fuori solo la parte del
percorso del URL dell’URL richiesto che
ci importa e abbiamo uno speciale
renderizza la funzione del nodo che richiede
cura di rendere quel modello con il
con il DOM virtuale e restituisce a
prometti che si risolve come puoi vedere
qui l’HTML del principale reso
modello e qualsiasi dato che era
associato a quella richiesta di pagina quindi se
stiamo aspettando che gli Stati lo caricino
includerà i dati degli Stati e noi
praticamente passato tutto questo ad un layout noi
anche tu puoi vedere qui abbiamo caricato il layout
quella scorta che è
solo un modello che ha un tag body e
Tag HTML che possiamo inserire il nostro principale
nascondici e poi rendiamo quello e
inviare il risultato al cliente il
solo l’altra cosa è ciò che volevo
per menzionare era che per collegarti sai
per impedire il rendering e inviare il file
dati insieme alla risposta della pagina per
il caching in linea lo facciamo così se noi
avere il nostro modello di vista del ristorante al
in cima a dove stavano ottenendo tutti gli stati
il componente a cui appartiene noi aspettiamo
finché non viene inserito otteniamo questa promessa
e otteniamo il nostro modello di visualizzazione più in alto e noi
dì hey, questa è la tua attesa per questa pagina
i dati passano che gli stati promettono che lo faranno
ottenere serializzato e aggiunto alla cache
questo è proprio quello che provo per il
diverse tecniche per lato server
rendendo possibile duplicare tutto il tuo
codice che è terribile per la mantenibilità
ma probabilmente potresti diventare fantastico
prestazione è un browser senza testa
in realtà davvero grandioso se puoi memorizzare nella cache
tutte le tue pagine perché senza testa
il browser quasi certamente funzionerà
il codice di front-end del tuo orologio correttamente ma
non è lento abbastanza è troppo lento
per la stessa dinamica come su richiesta
rendering lato server e penso singolo
context virtual DOM è come il perfetto
miscela di abbastanza veloce per on-demand
rendering lato server e manutenibile
abbastanza in modo che tu possa effettivamente scrivere un
applicazione con esso così quelli sono i miei 10
cose che penso che tutti abbiano bisogno di te
conoscere una moderna applicazione JavaScript
Spero che quelle 10 cose ti aiutino a girare
il tuo sviluppo fino alle 11 quindi grazie
applicazioni di pagina nel modo giusto come Brian
ho detto che mi chiamo Justin Meyer, sono l’amministratore delegato
di bateau B e per gli ultimi otto anni
tutto quello che ho fatto è costruire grandi cose
Applicazioni JavaScript per ogni
tipo di situazione che puoi immaginare e
questo discorso c’era circa 30 in quello
slide di questo discorso riguarda about the
tecniche migliori o le più uniche
tecniche che usiamo per costruire
mantenibile ad alte prestazioni e a
applicazioni JavaScript poco divertenti
Ho strutturato questo discorso in dieci cinque
lampo minuto parla così ho intenzione di avere
per andare estremamente veloce otterrà un
poco tecnico se tu se non lo fai
capire parte del codice o del
le diapositive cercano solo di ascoltare il suono
della mia voce perché spiegherà
in linea di principio quello che sto facendo ignora semplicemente
quello che vedi sullo schermo, quindi con
questo in mente oh attendere un prima cosa che ho
devo parlare di aver creato un posto mio
ordinare un’applicazione che è una semplice app
che comprende tutte le tecniche
grazie a chiunque abbia appena alzato il microfono
si potrebbe trovare alla barra Tobii
Metti il mio ordine e io sarò tu
usandolo per tutti gli esempi e
tecniche di cui ho parlato oggi, quindi sono
andrò davvero veloce e lo mostrerò
nell’app in modo che quando parliamo
queste tecniche puoi vedere come
applica un’app molto semplice ha una home page
quando si esegue il rendering lato server quando si
scegli un ristorante che farà un
stato push che ti permette di scegliere a
dichiarare e scegliere una città e ottenere
informazioni su un ristorante e un posto
un ordine così vai a Chicago e tre
un due naturalmente e metterò il mio
ordine e una volta effettuato l’ordine
puoi vedere una cronologia degli ordini dove puoi
camminare attraverso
ogni ordine attraverso diversi stati così
si sta preparando per la consegna
consegnato e questo è in tempo reale
applicazione se qualcun altro era su di esso
facendo cambiamenti vedresti quelli
cambia così questa app se la controlli
fuori su Github ha tutto ciò che sono
parlando di così puoi tornare indietro e
impara queste cose in dettaglio così nonostante
quanto tecnico ho detto che questo discorso sarebbe finito
essere la prima cosa che penso che facciamo
unico epitopo II è fare uso di controllo
liste di controllo hanno una lunga storia di
fare tutto meglio dall’aiutare
i piloti volano per aiutare i medici a salvare vite umane
abbiamo un progetto di lista di controllo che puoi
vedere qui la checklist bateau v github io
questa è una lista di controllo davvero semplice
ha solo un sacco di gestione UX e
domande sullo sviluppo cose come sono
lì gli eventi sociali ci sono ciò che è
la visione del progetto nel
roadmap fai esperienza utente
test fai quello è un altro buono
fai recensioni sul codice sorgente
Penso che le liste di controllo abbiano funzionato davvero
bene per noi perché mi permetta di tornare a
vista del relatore perché penso a tutti
sa cosa deve essere fatto su un progetto
è solo difficile a volte dare la priorità a esso
sappiamo tutti che dovremmo fare il codice
recensioni che sappiamo tutti dovremmo scrivere
test a volte non lo facciamo per lo più
perché sai che ne abbiamo altri
priorità altre cose che stiamo pensando
su una lista di controllo lo rende facile da fare
certo che tutti stanno facendo la cosa giusta
in ogni momento perché ne abbiamo fatti tanti
progetti probabilmente su 34 progetti
ora abbiamo alcuni dati interessanti –
per quanto riguarda ciò che influenza il più forte
ciò che è correlato più forte con il successo
quindi questi sono i più alti dirigenti
cose correlate che sono correlate al successo
ovviamente la cosa numero uno che
è correlato al successo è possibile rilasciare
un progetto entro sei mesi proprio così
questo è ovvio
cose come allenamenti annuali e
aziende che in realtà hanno sociale
eventi per la loro squadra al di fuori del lavoro
anche quelli sono fortemente correlati al successo
le cose progettuali correlate
fortemente al successo facendo test utente
ottenere la documentazione di progettazione ora ecco
la cosa veramente interessante queste sono
i più alti fattori legati allo sviluppo
che sono correlati al successo e lo sono
lontano sono correlati al successo sessuale lontano
meno della maggior parte della gestione e
la maggior parte delle domande di UX, quindi questo ha
lista di controllo almeno per noi come azienda
ci ha guidati e un po ‘ci ha umiliato
perché ci rendiamo conto che la gestione e
le decisioni sull’esperienza utente spesso contano
molto più delle decisioni tecnologiche ma
come tecnologi siamo costantemente
essere appeso in battaglie quadro e
cose del genere o se ti interessa davvero
circa il successo del vostro progetto si
potrebbe guardare in alcuni dei più il
gestione esperienza utente elementi che
la tua squadra dovrebbe fare così questo è il
solo non tecnico, quindi entriamo
le cose tecniche quindi l’ho trovato
citazione impressionante su goop JavaScript guru
ingegnere di squadra cromato addy Osmani x ‘
sito web e dice il segreto per
costruire app di grandi dimensioni non deve mai essere realizzato
le grandi applicazioni rompono il tuo
applicazioni in piccoli pezzi quindi
assemblare quelle dimensioni testabili
pezzi nella tua grande applicazione è
estremamente bene ha detto che è quello
quello è un buon scherzo ma penso che lo sia anche
piccolo così voi ragazzi non potete leggerlo realizzare
Quanto sono esilarante, sono uno dei nostri
primo sviluppo più importante
le strategie erano l’introduzione del
flusso di lavoro mod illuminato che tratta ogni
modulo come propria applicazione che cosa
significa in pratica che invece di
organizzando i tuoi progetti come questo dove
ogni modulo è raggruppato per tipo che hai
una cartella per tutti i tuoi file JavaScript a
cartella per tutti i tuoi file CSS che abbiamo sempre
raggruppa tutto
ogni modulo nella propria cartella ogni
modulo aveva qualche cartella ha i suoi test
la propria documentazione qualsiasi altro file
come CSS o modelli che sono
associato ad esso andare in quella cartella e
ci sono altre due cose che includiamo
includiamo sempre una pagina di test che viene eseguita
solo che i test dei moduli e per la visualizzazione
i moduli visivi dei widget includono una demo
pagina che mostra solo quello
funzionalità dei moduli quindi i vantaggi per
questo è più facile identificare quando
qualcuno manca test proprio perché
puoi guardare nella cartella e dire hey
non c’è neanche un file di test, penso
gli sviluppatori sono molto più propensi a
aggiornare un test quando sono quando sono
lavorando in un modulo e il test è
fissandoli in faccia perché è dentro
la stessa cartella e ovviamente prelievo
fare test e creare lead di pagine dimostrative
a buon design API e finalmente penso
il più grande è che puoi
svilupparsi in modo isolato su cui lavorare
il tuo modulo e sono solo test all’interno
una cartella che ignora completamente il resto
dell’applicazione
quindi ho un rapido esempio di questo nel mio
quindi ho la mia pagina per gli ordini che tu
posso vedere qui posso modificare quello che posso
questo è il solo il widget dell’ordine e io
può anche eseguire i suoi test piuttosto carina
di base e questo sembra nel codice
ecco il mio ordine e ho la mia pagina demo
che carichi importa il mio componente del mio ordine
e lo usa nella pagina e così è
semplice è quello di ottenere una pagina di prova e di una
pagina di test Sto solo caricando l’ordine
test di prova altamente incoraggiano le persone a
usa questo modello okay
numero tre, quindi abbiamo preso ultimamente
l’idea di ogni modulo è sua
propria applicazione all’estremo limite
che conosco mettendo molto del nostro
moduli nei propri progetti e poi
pubblicarli su NPM e poi
importandoli nel nostro grande progetto così
ad esempio il luogo in cui l’app del mio ordine ha un
widget di schede invece di sapere nascondere
via dentro di te inserisci il mio codice degli ordini
Abbiamo creato un alone messo messo schede
nel proprio repository con i propri test
e per importarlo nel nostro progetto è
semplice come il bit di installazione di NPM
schede che lo aggiungeranno al nodo
cartella dei moduli e quindi per importarlo
in quell’ordine che ordina un modulo tutto
Faccio è importare schede bit è un’abitudine
elemento e sto usando la sintassi es6 se
la gente non lo riconosce e perché
è un elemento personalizzato tutto ciò che devo fare
è aggiungere schede bit alla mia pagina e sto andando
per creare un pannello per il menu del pranzo e
Finalmente creerò un pannello per il
menu per la cena e per renderlo I
passa semplicemente attraverso ogni voce del menu
aggiungere una casella di controllo per se il se il
la voce del menu del pranzo è selezionata e alla sua
nome e prezzo e poi mi limiterò a copiare
questo codice per rendere il menu della cena
quindi spero che tu possa vedere come una parte di
il mettere cose repository interno
può essere estratto da NPM
estremamente facile proprio su qualsiasi altro
progetto che abbiamo vogliamo bit-tab noi
può solo installarlo e usarlo come
rapidamente come ho appena mostrato ora se lo sei
usando comune Jas e browserify sei
come questo è vecchio cappello ho visto questo
prima, ma se stai usando Jas comune
e browserizza solo te che stai limitando
chi può usare il tuo codice e quale codice tu
può usare perché uno dei più grandi
problemi con JavaScript sul lato client
lo sviluppo è la frammentazione di tutti
il diverso modulo che carica le sintassi
ecco la prossima sintassi di es es6
quali sono le schede bit di importazione che ci sono
comune JSON browserify
c’è il timer
c’è l’AMD e la gente è ancora bloccata
nel 2005 usiamo tag script e e
link tags per caricare il loro bene che caricano
il loro codice JavaScript così usiamo a
progetto per costruire le nostre applicazioni chiamate
steel Jas e questo ci permette di essere qui
il codice delle schede indipendentemente dalle schede di offerta
caricamento se sono altri modelli CSS
i moduli J comuni o i moduli AMD che possiamo
esportare questo progetto in modo che possa essere
usato da chiunque usi AMD comune
Jas es6 quindi questo eseguirà uno script io
esegui il mio script di compilazione per grunt e vedrai
creerà una cartella dist con tutti
queste esportazioni così – ma le schede possono essere utilizzate
da chiunque vedrai anche le schede
meno file sono stati trascritti in CSS e noi
inserito il plugin CSS per requirejs così
se si sta utilizzando AMD si può effettivamente
richiedono queste schede e lo stile
dipende da così la mia speranza per tutto questo è
ovviamente lo usiamo per riutilizzare molto noi
puoi creare widget che li usano in tutto il loro
anche diversi progetti molto facilmente
quando tiri fuori qualcosa e tu
pubblicarlo su NPM lo aggiunge molto
utile bit di
dati per la versione semantica del tuo
pacchetto perché quando tutto è nascosto
via in applicazione e qualcuno fa un
cambia un modulo che potrebbe essere il tuo codice
dipende da non sapere se lo hanno
aggiunto una nuova funzione o hanno rotto
l’API o hanno risolto un bug quando tu
pubblicare qualcosa per le persone di NPM sono
mettendo quel numero di versione e
tipicamente ti dà anche una buona idea
è reso più facile la gestione del rilascio
noi faremo in realtà messo le nostre pagine in
diversi repository per un grande sito
e poi se vogliamo assemblare il pieno
sito ci limitiamo a puntare a versioni specifiche
di pagine diverse e se una pagina
la versione si sta rompendo bene, ci limitiamo a rotolare
tornare a una versione precedente e ridistribuire
il sito che è veramente bello e
finalmente la mia speranza è per progetti come
Jas in acciaio che può migliorare
dall’open source lato client c’è un grande
problema in JavaScript open source
comunità in questo momento comparativo si guarda
ai nodi dove ci sono pochi progetti
dipende da altri progetti è molto difficile
costruire come una ricca gerarchia di
funzionalità avanzate in JavaScript
a causa di tutti i diversi moduli
caricamento sintassi ma se ce la possiamo fare
in modo che tu possa usare qualsiasi sintassi del modulo
lo vuoi ed esportalo a vicenda
sintassi del modulo, quindi la mia speranza è quella
possiamo iniziare a ottenere questa ricca topologia
di progetti JavaScript open source quindi
questo è ciò che ho appena mostrato
abilita quel numero per HTML personalizzato
composizione elementi personalizzati sono
Sono ovunque parlare andando sul perché
sono fantastici e ho intenzione di parlare
su cosa penso che facciamo speciale con
elementi personalizzati quindi prima il motivo è
eccezionale
alcuni di voi in questa stanza potrebbero essere vecchi
abbastanza da ricordare i vecchi tempi ogni volta
volevi aggiungere funzionalità a a
sito che dovresti mettere aggiungere un po ‘di HTML
alla tua pagina e quindi si avrebbe dovuto in
il tuo JavaScript trova quell’elemento e
invocare qualche comportamento su di esso è tutto
andato ora perché ogni quadro moderno
ti consente di definire elementi personalizzati e a
elemento personalizzato quando è inserito in
la pagina
lo sai istanza stessa così questo è
come sembra reagire questo è ciò che
sembra un angolare
questo è quello che sembra in kangjae s
che è quello che sto usando per questo
presentazione quando progettiamo il nostro
applicazioni o char quando progettiamo il nostro
elementi personalizzati li progettiamo con questo
ragazzo in mente questo è il Toby’s UX
direttore giusto non lo sa
JavaScript ma lui conosce HTML e CSS noi
abbiamo due obiettivi che vogliamo fare nostro
modelli in modo che possa capirli
ma vogliamo anche renderli personalizzati
elementi abbastanza potenti da poterlo
comportamenti espressi senza preoccuparsi di Bob
gli ingegneri stanno bene così puoi
modificare e aggiungere un sacco di ricchezza alla
pagina senza se stesso solo da
capendo questi elementi e
riordinandoli così abbiamo una volta che abbiamo
due strategie per che il primo è
un tag team di due diversi tipi di
gli elementi personalizzati il primo sono personalizzati
elementi che possono effettivamente caricare dati
nella pagina nel modello e il
in secondo luogo sono gli elementi personalizzati che sono
componibili per cui ecco un uovo per
esempio ho un componente grafico bit
dove aggiungo serie diverse
aggiungerai che conosci nuove linee sul
grafico dato alcuni dati quindi ho intenzione di mostrare
un rapido esempio di questo in azione lasciami
aggiorna la pagina okay, quindi qui ho un
pagina che mostra un singolo ristorante
cronologia degli ordini l’importo speso per
ogni ordine e questo si presenta così questo
assomiglia a questo ho usato il mio modello di ordine per
trovare tutti gli ordini per la città di cagliata di formaggio
questo è il nome di un ristorante
sembra che sia del Wisconsin e poi
Metto quei dati nel modello
e quindi sto usando quei dati per questo
serie bit ora diciamo il designer
vuole aggiungere un altro cuoco fare a
confronto comparativo tra formaggio
Cagliata City e qualche altro ristorante
chi
tene palace Non ho intenzione di battere a macchina
invece ho intenzione di rubare il codice loro
può aggiungere un altro modello di ordine, quindi questo è
andando a caricare i dati dei palazzi di poutine in
la pagina e poi tutti avrebbero dovuto
fare è aggiungere un’altra serie di bit per questo
dati e quindi salvare la pagina aggiornarlo
e hanno creato il loro nuovo
comportamento giusto hanno caricato i dati
loro stessi hanno aggiunto una nuova linea a
il grafico quindi è la prima cosa che facciamo noi
la seconda cosa che facciamo è e
potreste aver notato che abbiamo effettivamente
permettere alle persone di dichiarare dipendenze in
il modello stesso così qui che può
importazione da UI po grafico si grafico che
sta effettivamente facendo l’importazione di quello
modulo nella pagina questo è grande per
i nostri progettisti quindi se volevano aggiungere
bit di schede per la pagina bene solo loro
le schede bit di importazione possono importare schede di bit e
iniziare ad usarlo nella pagina ancora una volta che
non dobbiamo disturbarci come gli ingegneri
quindi l’ ultima cosa che facciamo non è per
il nostro designer è per noi e io davvero
amo le prossime specifiche dei componenti web
e che puoi definire
componenti leggeri in genere di costo
nella pagina direttamente questo sta definendo
un componente del mondo ciao che puoi vedere
è il modello e uno stile e il suo
comportamento abbiamo la nostra versione di questo
in cui è possibile definire un componente non possibile
e dargli il suo tag i suoi stili come meno
e costruisci le cose in questo modo così davvero
come questo quattro perché cosa succede se
in una grande applicazione si tende a
inizia davvero a ricevere un sacco di piccoli
widget e non vuoi averli
cinque file diversi che sono meno file a
modello e un modello di vista per qualcosa
che può essere piuttosto piccolo
ok il prossimo è il numero cinque è l’unità
questo è tutto merito di modelli di visualizzazione testabili
come progettiamo, testiamo e costruiamo le nostre
visualizza modelli e costruisci modelli di vista
Mi piacciono molto tutte le volte in più
lavoro che stai facendo in grande
Applicazione JavaScript, quindi userò
questo esempio l’ordine dei ristoranti o
il dispiaciuto che quando scegli il tuo
pagina ristoranti e questa pagina carica il
afferma quindi è possibile scegliere uno stato quindi
puoi caricare le tue città che puoi
scegli una città, poi vedi la tua lista di
ristoranti e poi se cambi il tuo
lo stato rimuove davvero i ristoranti
e ricarica nuove città per quello stato
ma poi devi scegliere e cancella
la città l’ opzione città giusto questo cosa
hanno scelto per la loro città così prima cosa
Cerco sempre di dare un’occhiata al
funzionalità e quindi identifico il
valori che rappresentano lo stato giusto così
il modo in cui faccio sempre questo è che ho
una specie di oggetto JavaScript che io
tieni traccia di tutte le graffette
proprietà di questo utente di questo
di come te il design o il
comportamento qualunque si voglia chiamarlo così
la prima cosa che puoi vedere è che stiamo caricando
Stati cosi ho intenzione di avere Stati come a
prometto che sarà una serie di
tutti i dati dello stato che sta per risolvere
a un array con tutti i dati di stato che sono
dirà che lo stato che scelgono
Io salverò quello stato come a
stringa per quale stato hanno scelto
le città saranno una promessa di tutti
le città che stanno caricando e la città
che hanno selezionato sarà il nome
della città e poi finalmente c’è
Gonna Be ristoranti era solo andando essere un
promessa con tutti i ristoranti
proprio qui c’è la prima cosa che faccio quando
Vengo su una pagina per progettare che sono io
capire queste proprietà e il
comportamento per queste proprietà il secondo
cosa che faccio è scrivere un test per il
guarda il modello Sono un grande fan del test-driven
sviluppo
quindi tutto questo sarà che io vado
attraverso queste diapositive davvero veloci quindi se
non lo capisci
di nuovo ascolta le parole della mia voce
non prestare attenzione allo schermo in modo da
testarlo ho impostato i miei test
infrastruttura carica i moduli che io
Ho bisogno quindi di creare i miei dati falsi per il mio
test perché sta andando il mio modello di vista
per raggiungere il modello di chiedere per voi
conosci ristoranti e stati e città
quindi io uso questa utilità di installazione per
dirottare tutte le richieste Ajax intercettarle
e invece usare i dati falsi che sono
fornendo così invece di quando un quando noi
prova a fare una richiesta di indirizzo all’API
afferma e invece useremo il nostro falso
dati che sto fornendo e infine
Creerò un’istanza del mio modello di visualizzazione
che sto per creare una lista di ristoranti
guarda il modello e poi verificherò tutto
i diversi passaggi che cercherò
che farò in modo che il mio
la proprietà dello stato è una promessa e io sono
tornare indietro tutti i miei dati falsi degli Stati
quindi metterò lo stato in uno stato
proprietà a uno stato e quindi verificarlo
Ottengo i cambiamenti della mia città e ottengo una lista
di città dalle stesse stesse città che
abbinare miei dati falsi e quindi ho intenzione di
ambientare la città e io continuerò a mantenere
camminando attraverso questo cambierà
i ristoranti e ho intenzione di ottenere il
dati del ristorante giusto indietro e poi
alla fine ho intenzione di impostare lo stato su a
stato diverso e verificare che la città
il valore è rimosso e che sto ottenendo un
lista di tutte le città un elenco di nuove città
è così che scrivo solo un test
test del comportamento del modello di vista
e quelle proprietà così finalmente sono
scriverò il modello di vista e questo è
di nuovo questo è con Kas questo è quello che
sembra che diventa davvero facile voi
basta definire il comportamento per il tuo
diverse proprietà iniziali dello stato
valore è tutti gli stati caricati dal
server il comportamento dello stato è side
efficace ogni volta che lo stato è impostato I
voglio rimuovere qualunque città è stata impostata
perché se stai cambiando questo
lo stato bene allora qualunque cosa se City
hai scelto non dovrebbe non contare così
rimuovilo, quindi definirò il
comportamento delle città città è
dipende da uno stato quindi se c’è un
state per cui restituirò tutte le città
quello stato e altrimenti lo farò
nessun ritorno di voi potrebbe chiedere
quello è che non è lavori validi dalla sintassi
sto usando la sintassi es6 che fa un
oggetto con stato: stato successivo e
finalmente Sto solo andando definire il
comportamento dei ristoranti che è
proprio come le città se c’è una città in un
stato restituire tutti i ristoranti per quello
combinazione dello stato della città va bene e poi il
l’ultima cosa è che scrivi solo il tuo
modello così qui il modello è
sto solo mostrando la parte del
modello per il menu a discesa dello stato e tu
posso vedere che sto facendo cose come disabilitare
Seleziona fino a quando lo stato è
in attesa mentre è in sospeso che sto mostrando
caricamento come unica opzione e poi se
la persona non ha scelto uno stato che sono
dirò scegli uno stato e io lo farò
passa attraverso la lista degli stati e la lista
loro ragione, quindi penso che i benefici per
questo modello è davvero così, se lo sei
capire le proprietà stateful di
il tuo modello di vista e poi testarli
quindi l’implementazione diventa più facile
da fare e infine i tuoi modelli
diventare super semplice, vero?
tutto in quell’ordine va bene il prossimo
uno è il routing a due vie che spiegherò
una differenza tra routing a due vie e
routing a senso unico che fornisce un esempio di utilizzo
caso e il discorso sui benefici di
routing bidirezionale in modo che tutti siano familiari
con routing a senso unico soprattutto se tu
provengono dal mondo a senso unico lato server
il routing in cui inserisci gli URL e ottieni
tipicamente nel server che chiamerà
qualche metodo da qualche parte ma in realtà un modo
il routing significa che ottieni qualche URL e tu
recuperare alcuni dati da esso va
attraverso le regole di routing e torna indietro
fuori alcuni dati
quindi se tu avessi ristoranti, formaggio, città
passa attraverso queste regole di routing che farai
ottenere ristoranti città di formaggio come dati
allo stesso modo se tu avessi ristoranti formaggio
il caricatore della città passa attraverso
questi percorsi lo otterrai
oggetto torna a un percorso consente di
passare dai dati indietro attraverso i percorsi
per ottenere il tuo URL finale e lo mostrerò
perché questo è davvero bello un secondo solo
dare un altro esempio se avessi una pagina
ristorante stato Illinois City Chicago
ha attraversato questi percorsi Prendo un URL
che sembra che così il beneficio della
vero vantaggio che sto per raggiungere
per il routing a due vie è possibile
cambia se usi il routing a due vie
puoi scrivere le tue applicazioni in questo modo
puoi modificare i percorsi in qualsiasi momento
e devi solo cambiare i percorsi
e il resto della vostra applicazione solo
continua a lavorare ma per fare questo è necessario
cambia leggermente il tuo codice, quindi lo farò
mostrare i cambiamenti nel codice così un sacco di
le volte le persone scrivono le loro app che sembrano
come questo se il percorso corrisponde ad alcuni
fare questo altrimenti la mappa del percorso
quale è qualche altro modello fare questo a
utilizzare il routing a due vie la prima cosa che tu
è necessario modificare il codice in
invece usa proprietà stateful che sono
sulla strada quindi invece sto andando a
controlla se la proprietà della pagina rotte è
a casa poi vado a rendere la casa
elemento personalizzato altrimenti se lo è
ristoranti che renderò il
elemento della lista dei ristoranti , quindi è uno
il cambiamento che devi fare è andare da questo
a questo il prossimo cambiamento è invece di
scrivendo le tue url come questo dove sei
tipo di scriverli manualmente da soli
nel modello invece usi a
template Io uso un helper che sta per
passare attraverso l’algoritmo di routing inverso
e questo prenderà la lumaca del ristorante di pagina
uguale a lumaca e convertirlo allo stesso
href abbiamo visto prima ma la magia di
il routing a due vie è che se passi da
questo questi percorsi a queste vie bene
tutto funziona ancora perché è tutto
solo controllando le proprietà e tutto il tuo
URL
sono creati attraverso il percorso inverso
algoritmo quindi i benefici che ti permette
per scrivere il tuo percorso i tuoi URL in un modo
Là
mi dispiace gestire tutti i tuoi URL in un unico spazio
e avere il resto della tua domanda
funziona solo indipendentemente dall’aspetto dei tuoi URL
come bene il prossimo è il numero sette
e questo è quello che probabilmente sono
personalmente molto entusiasta di parlare
di
Penso che abbiamo risolto davvero bene
modo come fare connessioni in tempo reale e
un sacco di ottimizzazioni delle prestazioni in
nel client in tempo reale e
l’ottimizzazione delle prestazioni questo può essere
davvero difficile da ottenere a volte a volte
Diciamo che avevo due widget che io
voluto mettere nella pagina e scrivere
indipendentemente e questi stanno andando
mostra che uno mostrerà completato due
Dews l’altro mostrerà incompleto
fare è solo alcune domande da richiedere
voi ragazzi pensate a come li facciamo
due possono essere combinati per creare un singolo
richiesta per tutti di fare come faremmo
quando si verifica un aggiornamento sul lato server
qualsiasi cosa nuova da fare è crearla come facciamo noi
gestisci la lista per metterla in come facciamo noi
gestire quando avviene l’aggiornamento per spostarlo
da una lista a un’altra lista e poi
come possiamo salvare i loro dati in
archiviazione locale quindi non dobbiamo fare
la stessa richiesta di nuovo la risposta a tutti
di questi problemi è sorprendentemente semplice
è logico
Si pone come esso come in diagrammi di Venn che
potrebbe chiedersi perché stabilisce la ragione
è perché ogni volta che richiedi i dati
da una pagina che stai effettivamente fornendo a
rappresenta un tour che stai richiedendo dati
dal server che stai fornendo a
rappresentazione del set che desideri
dei dati che si desidera caricare tutti
giusto se volessi tutti i diritti per l’utente
cinque che sono completati in modo vero potrei fare
qualcosa come questo e impostare un rappresenta
adesso conosci un set se lo tratti
come un set
e puoi usarlo per confrontarlo con altri
imposta così ho impostato B qui set B è utente
cinque completati per non completati a
Do è chi è il set critico B rappresenta a
sottoinsieme di set a così so se ho
già caricato impostato a non è necessario
carica i dati di B così abbiamo creato un basso
libreria di livello che ci permette di fare set
confronti con oggetti che sembrano
questi ti consente anche di creare set personalizzati
algebra in modo da poter confrontare gli altri
cose che non sono semplicemente dritte
proprietà quindi se volevo intervalli o
proprietà enumerabili enumerabili o
proprietà di tipo booleano che posso fare
cose come questa che è comparata sanno
che l’arrangiamento inizia a 0 e
finisce a 50 è un sottoinsieme di un intervallo che
inizia da 0 e termina a 100 ora con
questa logica stabilita inizierò a camminare
attraverso molte delle prestazioni
ottimizzazioni che puoi fare così
il primo è che ne hai due diversi
widget che sono stati caricati
a carico degli altri il caricamento incompleto a
Non è che non si desidera loro di conoscere
l’un l’ altro ma quello che puoi farli andare
attraverso è lo stesso livello del modello e quello
il livello del modello può vedere le richieste in arrivo
attendere un istante fino a quando alcuni potrebbero avere un
possibilità di riunirsi almeno a quelli
che stanno arrivando nello stesso momento e
può fare un’unione di quelle serie e invece
fai una richiesta per tutti i dati, diciamo io
andato a una pagina che mostra tutto completato –
quote e che ha richiesto il giusto il
completato – quote dal server e
poi sono andato alla pagina che mostra tutto
le quote bene richiederanno tutte le quote
così, ma posso fare una certa differenza
e ottenere e sapere che io proprio in realtà
necessario perché ho già caricato
quelli completati so che ne ho solo bisogno
caricare solo quelli incompleti ora dove
i set sono davvero realistici
connessioni quindi diciamo il server
ha spinto alcuni dati per Anu da completare
falso ID cinque
fanno piatti che puoi leggere ora che ho
ho capito ora che ne ho due diversi
imposta nella pagina che sono attualmente
mostrando che sto mostrando il completo e
incompleto possiamo fare la stessa logica impostata
per vedere che il nuovo set da fare è un
sottoinsieme del set incompleto e poi
inserire automaticamente i nuovi dati in
fare attenzione alla lista e lasciare che si leghi
di solo in realtà inserendo nel Dom
con nessuna logica aggiuntiva, proprio il
il super modello si prenderà cura di questo e
Ti spiegherò come in un secondo così questo
posiziona la tua app per ordini posiziona la mia app per ordini
ha utilizzato set di tutte queste cose
aggiornamenti automatici in tempo reale in linea
il caching che sto per spiegare può farlo
combinare richieste simili a come noi
già visto e supporta anche l’ autunno
attraverso il caching e tutta questa roba
ottieni gratis con questo sottostante
impostare la logica che non mi è piaciuto fare
qualcosa di speciale per questo solo per
lavoro nella mia applicazione quindi parliamo
su come funziona il caching inline in questo modo
è una grande tecnica se lo fai
rendering lato server quando l’utente
arriva alla pagina che chiederanno
l’HTML alla pagina e in linea nell’HTML
della pagina che stai per mettere i dati
per qualsiasi pagina che sta andando poi
richiesta in questo caso inseriamo in linea
variabile della cache e quindi la pagina è
sarà disegnato ma poi JavaScript è
comincerò a correre e lo farà
prova a fare una richiesta per il nuovo
preparare la consegna e consegnare gli ordini
il super modello che sta per attraversare
il modello eccellente di un super modello è gonna
vedi hey stai richiedendo insiemi di dati
quello è già nella cache inline che sono
intenzione di rimandarlo indietro a te e
la pagina non cambierà perché è
solo ottenendo gli stessi dati che erano
già usato per rendere la pagina ma il
la pagina sarà ora in diretta con i dati che
aveva bisogno di aggiungere un comportamento ricco e poi
si userà quei dati per aggiornare locali
stoccaggio che è importante per il prossimo
cosa che è il
contanti fall-through così la caduta attraverso
il denaro funziona quando qualcuno va a questo
pagina con la data push che sta per fare a
richiesta di tutti i dati per la pagina
sta per colpire la super modella e
la super modella sta per dire oh questo
sono tutti questi diversi stati
rappresentare tutti i dati dell’ordine così sono
combinerò tutto ciò in una singola richiesta
e prima inviare quella richiesta al locale
la memoria locale di archiviazione risponderà
con quei dati e sarà usato
per soddisfare tutti e quattro questi
richiede e disegna la pagina ma nel
sfondo sta andando a fare una richiesta
al server ottenere i dati ottenere i dati
dal server ne farà uno
richiedere al server e quindi utilizzarlo
per aggiornare gli articoli nella pagina e
farà qualsiasi inserimento o rimozione con
i nuovi dati nella nuova lista
automaticamente e parliamo di come
in tempo reale funziona così in tempo reale funziona
il server sta andando a spingere un evento aggiornato
la super modella sa tutto di
liste che sono attive sulla pagina
perché quando hai richiesto i dati e
ti ha restituito una lista di cui è a conoscenza
quell’elenco tiene traccia di esso così quando
quando avviene l’ aggiornamento , diciamo che lo è
cambiare un nuovo oggetto da nuovo a
preparando vedrà che il
l’oggetto non appartiene più alla nuova lista
e ora appartiene alla preparazione del trucco
che cambiano al al per i dati
modello ma poi il live binding andrà bene
abbi cura di spostarlo nel giusto
posto in modo da ottenere un comportamento in tempo reale per
libero con set quindi penso sia solo
perché mi piace così tanto che penso sia
vale la pena mostrarlo molto velocemente, quindi se io
avere il mio posto il mio ordine
quindi qui posso solo cancellare gli ordini e
faranno solo scompaiono a destra a sinistra
in tempo reale ma non dovevo farlo
qualsiasi cosa diversa dal solo chiamato distruggere
sul mio modello perché invierà il
connessione in tempo reale o è così
invia una richiesta e il tempo reale
la connessione dirà hey qualcosa è stata
cancellato passerà attraverso tutte le liste
che la pagina è attualmente in rendering e
basta rimuovere l’elemento automaticamente I
penso che sia matto che puoi ottenere
in tempo reale per libero spero che voi ragazzi lo facciate
troppo bene
numero
va bene
numero otto live reload quindi sono solo
comincerò con una demo per questo così tu
ragazzi se avete mai usato richiede come
lo sai che a volte in un grande
l’applicazione può richiedere molto tempo
ricarica la tua pagina quindi vedrò
quanto tempo ci vuole per ricaricare questa pagina
ok, prendi due punti quattro sei
secondi usiamo molto live usiamo live
ricarica la tecnologia in modo che io possa correre e
collegalo a un server di ricarica live e
ora quello che posso fare in realtà lo faccio
la pagina di cronologia degli ordini voglio solo
mostra la differenza di velocità in cui tu
puoi sviluppare con la ricarica live così puoi
guardalo e io salvo ed è quasi
istantanea quanto velocemente riesco a vedere il
risultati di cambiamenti nel mio codice e in tutti i
deve fare è salvarlo e solo giusto
funziona così sto andando parlare di come questo
funziona ma prima voglio dire perché è
fantastico se non è ovvio così è
Fantastico tutto ciò che riguarda l’umano
attenzione se davvero devo aspettare
due secondi per ricaricare la mia pagina
quando comincio a pensare a reddit o
controllando le mie e – mail o qualcosa del genere
ma se potessi fare un cambiamento
e vedere l’aggiornamento pagina subito
entro un secondo rimango concentrato
sui miei compiti live ricaricando come funziona
per prima cosa parliamo di come funziona il caricamento
senza live ricaricare con qualcosa di simile
requirejs
vai alla tua pagina che ti caricera ‘
modulo principale quindi caricherà il tuo
dipendenze dei moduli principali che correranno
qualsiasi delle dipendenze che non hanno
dipendenze stesse poi sta andando
per continuare a caricare le dipendenze dopo
dipendenze finché non carica tutto
grafo delle dipendenze e poi sta andando a
inizia a eseguire queste cose
fino a quando non esegue il modulo cronologia
il modulo principale che tipicamente
scrivi scrivi come appare la pagina
vivere ricaricare cosa fa e perché
può essere così veloce è che quando cambio
la storia meno quello che farà è che lo è
cancellerò quel codice di moduli e lo è
segnerà qualsiasi modulo genitore come
aver bisogno di essere riusato ‘aggiungere che sta per
devi solo scaricare quel file ora
e poi eseguirlo e solo solo il suo
moduli genitore e quindi aggiornerà il
pagina con un colore diverso come I
ha mostrato così questo consente di risparmiare una quantità enorme
di tempo che non devi riscaricare
jQuery non hai nemmeno bisogno di eseguire
jQuery hai appena apportato una modifica e tutto il resto
i moduli tipo di rieseguire
stessi che hanno bisogno di solo freddo che è
tutto su questo è divertente non riguardo
prestazioni, ma questo è molto
sulle prestazioni che mi piacciono
abbiamo risolto come fare davvero i modelli
beh, penso che abbiamo risolto come costruire
la tua applicazione in modo che carichi tanto velocemente quanto
possibile davvero bene e in un molto
modo unico ok
quindi andrò davvero veloce attraverso questo oh io
pensavo di avere otto minuti il mio timer è
off ok freddo va bene quindi è a partire dalle
la diapositiva sbagliata qui, quindi vado a
spiego io sto andando provare a passare attraverso questo
davvero veloce perché mi piace questo sono
Spiegherò come ottimizzare un sito
non viene caricato progressivamente perché
le stesse tecniche si applicano a un sito che
è solo una specie di diverse pagine statiche
ecco le mie pagine statiche e qui è il
moduli che caricano per prima cosa
le persone fanno tipicamente quando sono
costruendo un sito come questo, lo faranno
stipare tutto ciò di cui una pagina ha bisogno
un file di produzione che non è eccezionale
perché allora se le cose sono usate trasversalmente
tutti i diversi siti ogni volta che
l’utente cambia le pagine che devono
riscaricare più del dovuto
quindi la prossima cosa che la gente fa è che lo faranno
dì oh, vado
Voglio raggruppare ciò che voglio creare
quei moduli nel loro bundle e
allora avrò tutte le mie pagine aperte
quel fascio giusto così che io possa
sperimentare alcuni vantaggi del caching
ora il problema con questo è che può
essere ingannevole molto difficile senza molto
prova ed errore per ottenere l’optimum
disposizioni di pacchetti in cui appartiene
cosa sai che JS è stato usato solo
in tre di questi moduli forse dovrei
avere un altro pacchetto che questi tre
tre pagine si caricano e poi loro
tutto ancora carica anche il core bundle
può prendere queste decisioni per sempre e
mai capito bene ma abbiamo un
algoritmo che può quindi farmi il mio
meglio spiegare come funziona l’algoritmo
se questo è il tuo grafico di dipendenza il
la prima cosa che fa è tirare fuori tutto
moduli che sono i più condivisi così
jQuery e titolo CSS condivisi da
tutto li combina questi tre
le cose sono usate tutte insieme in modo da combinarle
il loro cursore è usato dai ristoranti di
ordine quindi sono come um Sono a e sono solo
continuerò a combinare i moduli fino a quando non ottengo
questo tipo di installazione siamo fondamentalmente dentro
questa situazione ho intenzione di schierare il
la homepage delle dipendenze dovrebbe essere caricata
questi pacchi dovrebbero mangiare i ristoranti
caricare questi fasci ordine avrebbe dovuto
caricare questi pacchetti e la cronologia lo farebbe
devo caricare questi pacchetti ora questo è un
grafico delle dipendenze tutto suo dove
hai il caching perfetto ma e tutti
pagina carica solo esattamente ciò di cui ha bisogno
le home page caricano solo ciò di cui ha bisogno
ma il problema sono i ristoranti qui
caricare cinque diversi script giusto e
se hai 20 pagine con sovrapposizione
strane dipendenze che potresti dover
inizia a caricare una tonnellata di pacchetti che è
dove la seconda fase di questo raggruppamento
l’algoritmo arriva in quello che può fare è
prova tutte le diverse combinazioni
che è come se tu conoscessi un NP completo
problema ma in genere si spera di no
avere troppi pacchetti in modo che possiamo provare
ogni combinazione e prova a combinare
impacchetta e poi controlla quanto
codice aggiuntivo che ogni pagina deve avere
quando si combinano i pacchetti così le home page
devi caricare il cursore che deve farlo
caricare due ordini di kilobyte è necessario
carica 30 kilobyte perché hanno il
caricamento può jazz carosello e così carped
proverà un’altra combinazione diversa
in questo caso combinerà questi
due così adesso i ristoranti si stanno solo caricando
quattro moduli ancora e in questo caso il
lo spreco extra in ogni pagina è solo sette
kilobyte quindi usa quella combinazione e
quindi continuare ad andare avanti per se deve a
combinare altri moduli è un modo
che puoi ottenere il caching perfetto e il
solo il costo è il tuo forse caricare alcuni
byte in più di codice che qualche altra pagina
avra ‘bisogno che sia probabile
andare a quella pagina comunque così che è il nostro
algoritmo di raggruppamento l’unico altro
cosa voglio dire è quanto possiamo essere cool
collegalo al nostro atto il nostro modulo principale di
la nostra applicazione è in realtà un modello
e perché possiamo fare carico dalla
modello questo è come ciò che in realtà
sembra che abbiamo il nostro routing
regole e importeremo se qualcuno
naviga alla home page importiamo il
app home bundle e quando è risolto
mettiamo quell’elemento lì e questo
modo in cui possiamo mostrare uno spinner come gli utenti
Il codice JavaScript deve caricare o
qualcosa di simile
finalmente il rendering lato server è tutto
su come sbarazzarsi di questo tipo di
filatori sarò solo parlare di vero e proprio
veloce come lo facciamo è buono per SEO I
ho quattro minuti così posso stare bene
bene si desidera il rendering lato server per
prestazioni percepite in modo che l’app venga caricata
e l’utente può vedere la loro pagina
anche se javascript non è completo
inizializzato ancora ed è ottimo per SEO
la tecnica che usiamo è di correre
tutto in un unico contesto virtuale
Dom va bene, c’è molto di diverso
tecniche cosa significa ciò che è singolo
contesto significa molte volte persone
beh, ne parlerò non significa a
molte volte le persone quando una nuova richiesta
entra e creeranno un headless
ciò creerà un nuovo contesto nel nodo
e che significa che ha una propria
impostare il tempo fuori è un po ‘come il tuo
finestra dotata proprio punto nuovo documento e
esegui tutto il codice JavaScript importa tutto
il codice JavaScript ed eseguilo lì
non facciamo che abbiamo sempre corsa nel
lo stesso contesto in modo così fondamentale che significa tutto
del nostro rendering tutto il nostro codice solo noi
devo caricarlo una volta e il nostro rendering
non siamo noi non stiamo creando come un nuovo
documentare ogni volta per rendere e noi siamo
usando molto ciò che Dom virtuale significa
stiamo usando un Dom molto leggero
ha davvero solo un penny e un inserto
prima e come rimuovere il bambino è come
i pochi e setattribuiscono pochissimi
metodi molto leggeri molto veloci e
allora parlerò di quando fai le cose
in questo modo ne hai il costo
tutto è collegato al rendering
ciclo di vita dove non lo sei
correre nel proprio contesto può essere
difficile sapere che tutte le richieste Ajax
hanno finito perché ci potrebbe essere in
lo stesso contesto per cui l’Ajax richiede
una diversa risposta alla pagina in corso e
devi farlo e io lo farò
spiega come lavoriamo, ma prima come
configuriamo come viene configurata questa app
il rendering lato server in generale noi
carica il nostro modulo principale che è quello stash
modulo con un plugin speciale perché
aggiunge il rendering del nodo ad esso e quindi da
riceviamo una richiesta in qualunque modo tu sappia
la tua domanda ottieni una richiesta e
risposta oggetto dal nodo lo facciamo
allora tiriamo fuori solo la parte del
percorso del URL dell’URL richiesto che
ci importa e abbiamo uno speciale
renderizza la funzione del nodo che richiede
cura di rendere quel modello con il
con il DOM virtuale e restituisce a
prometti che si risolve come puoi vedere
qui l’HTML del principale reso
modello e qualsiasi dato che era
associato a quella richiesta di pagina quindi se
stiamo aspettando che gli Stati lo caricino
includerà i dati degli Stati e noi
praticamente passato tutto questo ad un layout noi
anche tu puoi vedere qui abbiamo caricato il layout
quella scorta che è
solo un modello che ha un tag body e
Tag HTML che possiamo inserire il nostro principale
nascondici e poi rendiamo quello e
inviare il risultato al cliente il
solo l’altra cosa è ciò che volevo
per menzionare era che per collegarti sai
per impedire il rendering e inviare il file
dati insieme alla risposta della pagina per
il caching in linea lo facciamo così se noi
avere il nostro modello di vista del ristorante al
in cima a dove stavano ottenendo tutti gli stati
il componente a cui appartiene noi aspettiamo
finché non viene inserito otteniamo questa promessa
e otteniamo il nostro modello di visualizzazione più in alto e noi
dì hey, questa è la tua attesa per questa pagina
i dati passano che gli stati promettono che lo faranno
ottenere serializzato e aggiunto alla cache
questo è proprio quello che provo per il
diverse tecniche per lato server
rendendo possibile duplicare tutto il tuo
codice che è terribile per la mantenibilità
ma probabilmente potresti diventare fantastico
prestazione è un browser senza testa
in realtà davvero grandioso se puoi memorizzare nella cache
tutte le tue pagine perché senza testa
il browser quasi certamente funzionerà
il codice di front-end del tuo orologio correttamente ma
non è lento abbastanza è troppo lento
per la stessa dinamica come su richiesta
rendering lato server e penso singolo
context virtual DOM è come il perfetto
miscela di abbastanza veloce per on-demand
rendering lato server e manutenibile
abbastanza in modo che tu possa effettivamente scrivere un
applicazione con esso così quelli sono i miei 10
cose che penso che tutti abbiano bisogno di te
conoscere una moderna applicazione JavaScript
Spero che quelle 10 cose ti aiutino a girare
il tuo sviluppo fino alle 11 quindi grazie
Please follow and like us: