[Musica]
quindi ciao benvenuto a questa presentazione
durante questo discorso parleremo di come
puoi sviluppare applicazioni web con
quadro di primavera e soprattutto qui
con un paio di stivali primaverili quindi parleremo
su varie cose che il tipo di
esperienza che puoi ottenere ma anche il tipo
di funzionalità che puoi sfruttare con
con le ultime versioni eccoci qui
concentrandosi su Springwood 13 e e e
molla avanti quadro 42 ma lasciamo
per prima cosa parliamo di una cosa se
sei stato alla presentazione data da
Stefan sei stato alla presentazione
dato da annusando tra l’altro sì sì
Parlerò di così tanto in primavera
che c’è una funzione che viene chiamata
configurazione esternalizzata e in un modo
questo ti sta fornendo
un modo per configurare l’applicazione
proprietà del punto dell’applicazione interna o
applicazione i file generali senza
fare le cose manualmente o programmare
a livello di codice e la cosa è il
la squadra di avvio primaverile ha definito molto
chiavi per la configurazione, ad esempio
la porta su cui è in esecuzione il tuo server
o la tua fonte di dati ecc ecc
ci sono molte chiavi che puoi semplicemente usare
e impostare i valori che si desidera configurare
cose facilmente invece di fare cose
te stesso ma la cosa è che ci sono così
molte chiavi hanno definito una cosa sola quando
stai usando quei tasti che ottieni Auto
completamento nel tuo ID perché la primavera
il team di avvio fornisce tutti questi dati come
file di metadati che qualsiasi strumento può consumare
essere un ID come IntelliJ o netbeans o
eclissi STS o qualsiasi altra cosa così
il tipo di esperienza che puoi avere
il tuo ID ma al prodotto per fornire tutto
come se ti dicessi la primavera blu
il team deve fornire tutti quei metadati
da qualche parte e come qualsiasi cosa tu abbia bisogno di
gestiscilo perché ogni volta che cambi
il nome della chiave o sei deprecato
qualcosa o c’è qualcosa di nuovo te
bisogno di gestire in qualche modo il ciclo di vita di
tutte quelle proprietà altrimenti è solo
confondendo così in precedenza ciò che la primavera
il team di avvio stava facendo e sta ancora facendo
fornendo e changelog
per ogni versione in modo che la chiave che
per esempio confuso il timeout della sessione
è stato sostituito da qualcos’altro
è stato modificato o è stato eliminato perché ecc
ottieni una visione completa di ciò che sta accadendo
tra le versioni ma per fornire quello
era una specie di lavoro noioso da fare
manualmente, ecco perché Springwood
team ha creato una libreria interna per
loro per gestire tutto questo e tra
due versioni di stivali che puoi gestire
ottenere il diff di tutto ciò che è cambiato
probabilmente saggio con gli stivali in modo che una specie di
meta ma la biblioteca morta che cosa è
facendo il suo caricamento degli artefatti Maven
per esempio per gli stivali a molla 125 e 130
caricando quei vasi che stanno esaminando
raccogliere in quei barattoli guardando il
metadati che generano un diff e da qui
prendiamo quella libreria da qui e
quello che faremo durante quella conversazione è lavoro
su una sorta di interfaccia utente web per visualizzarlo
informazioni abbastanza bene quindi tutto
che ci saranno le diapositive sotto
il sito della conferenza tutto qui
è in realtà una versione più lunga e più breve
di una lunga università dove c’è molto
Caratteristiche di un demoed quindi se si vuole
guarda il codice è su github e c’è
anche la versione più lunga delle diapositive così
la parte interessante del circa il
codice è un c’è un commit da commit
storia di quello che stiamo facendo con quello
progetto così qualunque cosa stia facendo adesso
lo vedrai impegnato da commit e
ha spiegato quindi è abbastanza chiaro
quindi questa è la fine della diapositiva dove e
in questo momento si concentrerà sull’applicazione
quindi quello che possiamo mostrare adesso è per
esempio di tipo di output del tipo di
output che puoi ottenere da
quella libreria quindi questo è un campione
classificare un’applicazione di esempio che ho
in un progetto solo per mostrarti che è
caricando il suo caricamento in questo momento
i vasi e sta mostrando una specie di
chiedere una versione testuale del doc di ciò che noi
aspettarsi così in un gruppo
ad esempio la catena di risorse primaverili
ci sei entrato nella primavera del gruppo
le risorse cambiano hai quella chiave
abilitato che è stato diretto e quello
la chiave sta facendo in modo che sia così
Ho una specie di dati che stiamo facendo
trattare durante quella presentazione così
in questo momento ciò che abbiamo è reale
applicazione sì andiamo così se lancio
questa applicazione è una buona app di primavera
e va bene questa è l’applicazione di base
è già stato fatto quindi ti mostrerò
cosa fa se scrivi che voglio vedere
le differenze tra 125 e 1 e N 1
30 sta caricando e poi è it’s
rendere una pagina di tutto il
differenze tra le chiavi di quelli
due versioni quindi ovviamente sta caricando
le cose da Maven centrale bene così hai
ottenuto qui così abbiamo le differenze
in mostra in tabella con tutto in
il rosso che è stato cancellato verde
creato ecc ecc. abbiamo tutti questi elementi
quei tasti chiavi sono mostrati il più possibile
vedi ci sono alcuni gruppi dove nulla
cambiato di recente ma sono ancora
visualizzato e faremo qualcosa su
più tardi, ma quello che voglio mostrarti è
anche il layout di tale applicazione così
Se si dà un’occhiata alla destra di layout
ora quindi c’è un modulo div config
che è la libreria che stiamo usando
generare quei dati ma il web
applicazione che stiamo guardando in questo momento
è una semplice applicazione blu con il
classe di applicazione che sta lanciando il
tutta la cosa che abbiamo controller web am
controllori occupati abbiamo servizi e
abbiamo anche dei poemi con cui confrontarci
con i nostri dati perché è un bene
applicazione abbiamo anche cose in
la nostra cartella delle risorse è statica
risorse o applicazioni o proprietà
Ne parlerò e anche i modelli
perché qui stiamo usando un modello
motore quindi questo è il tipo di layout
e l’esperienza che abbiamo finora e ciò che io
vuole visualizzare in questo momento non è
in precedenza quando spesso quando sei
lavorando con un’applicazione Web
quello che devi fare è che devi
cambia qualcosa di essere in CSS o
modelli o in un controller classico o
da qualche parte stai cambiando devi
ricompilare riavvia ridistribuire tutto ciò e
può essere davvero noioso quando sei
facendo ciò ripetutamente specialmente quando
stai scrivendo un’applicazione web così
è per questo che con l’ultimamente con
con il boot a molla ha il team di avvio
sviluppato i devtools primavera buona
libreria devtools in cui si aggancia
nel tuo ciclo di vita quando sei
sviluppando la tua applicazione e tu puoi
ho una bella esperienza quindi lo farò
mostrarti cosa puoi usare come puoi
quindi sto arrestando il server in questo momento
mostraci e qui è qui quello che puoi
puoi puoi aggiungere una dipendenza e
quella dipendenza è un buon strumento di sviluppo
e ogni volta che lo fai stai portando
in una biblioteca costruita dal blu di primavera
team e quella libreria ricaricheranno il tuo
applicazione senza riavviare il
parte giusta dell’applicazione senza
riavviare il tutto senza
riavvio del server o della JVM
vedrai come funziona così aggiungendo
quella dipendenza se mai riavvio il mio
server ho ancora la stessa applicazione
nulla cambia ancora, ancora qui
la cosa nuova è che posso fare qualcosa qui
quindi ho un ho uno sviluppatore che ho
ha un plug-in del browser un’estensione che
è pubblico è là fuori è chiamato
reload dal vivo in modo ricarica dal vivo è la sua in
di per sé è una specie di protocollo
definito da terzi da terze parti
non da noi e vivere davvero è fondamentalmente
sei un cliente che ti connette il tuo browser
al tuo
e con una WebSocket e ogni volta che
il server vuole solo i tuoi clienti
aggiorna inviando un segnale che dice
basta aggiornare la pagina e questo è il terzo
festa che è regolare e se si installa
dati quell’estensione e fai clic
su di esso poi puoi vedere che sono connesso
perché quando sto usando gli strumenti di sviluppo nel mio
gli strumenti di sviluppo dell’applicazione stanno creando questo
live reload server così ogni volta che sono
fare un cambiamento adeguato nella mia domanda
l’ applicazione buddhista dirà il mio
il client per ricaricarlo basta tagliare il tutto
ciclo di vita fino a semplici azioni
invece di riavviare l’arresto ecc
rinfrescando il mio browser è solo tu lo farai
vediamo quindi proviamolo con alcuni
cambia ciò che possiamo fare per ora è un per
esempio in questo momento ho una chiave che io
so è stato duplicato di recente così
questa primavera hai il suffisso che è stato
duplicato e nel mio HTML se guardo dentro
l’HTML ho già una classe
da qualche parte dire deprecato ma non l’ho fatto
aggiungi uno stile quindi quello che mi piace è quello che posso fare
è chiamata modifica modifica il mio file CSS e aggiungi
qualcosa così posso aggiungere una regola che dice
deprecato e decorerò il testo di
aggiungendo una linea attraverso di esso così ogni volta che io
ricostruisci il mio progetto ecco cosa è successo
quello che succede non sto facendo niente è
essere rinfrescato il progetto il progetto
è stato aggiornato sul lato server
e inviare un segnale al cliente e io
non ha fatto nulla sul mio browser è
mostrando che il cambiamento che è il
linea qui in modo che tu possa pensare okay questo
è un file statico facile da noi
può fare qualcosa qualcosa
più complesso quindi il prossimo passo sarebbe
possiamo aggiungere diciamo un banner perché
qualcuno in camera ha chiesto questo e allora
Lo farò con lo spring boot che puoi aggiungere
file che sono migliori e se lo aggiungo
banner qui puoi scrivere qualsiasi testo
vuoi che ci siano segnaposti per il tuo
versione dell’applicazione ecc. ed è pari
trattare con i colori NC che
significa che se aggiorni il tuo progetto
sta mostrando un bel banner all’interno
la tua console per darti di più
spiegazione o sul perché stiamo vedendo questo
adesso è perché ogni volta che sei
ricostruire il tuo progetto gli sviluppatori
la libreria sta guardando i file che sei
del tuo progetto e ogni volta che sei
ricostruire sta facendo la cosa giusta così
se è un file statico è solo strisciare
la cosa giusta e l’invio del segnale
al tuo browser se è più complesso
che per esempio un modello è un
ricompilando se ne ha bisogno quindi andiamo
per esempio, otterremo un risultato
un modello così per esempio nel nostro qui in
applicazione vogliamo prevenire tutti quelli
le chiavi per essere visualizzate come quelle
gruppi che non erano nulla di cambiato noi
non vogliono vedere quelli così facciamolo
per farlo dobbiamo andare all’indice per
il nostro modello di immersione e qui abbiamo a
il nostro forum in cui abbiamo il
versioni e il nostro pulsante di confronto quindi qui
ci piacerebbe aggiungere un po ‘di HTML così ho
qualcosa per questa casella di controllo in modo sostanziale
una casella di controllo che dice se voglio o no
per vedere l’ intera cosa così stiamo costruendo
rinfrescante tutto bene quindi ho capito
nuova casella di controllo per cui non sta facendo nulla
ora quindi mi piacerebbe avere quel segnale
dal mio modulo al mio controller, quindi è così
il prossimo passo se vado al mio controller
trattare con quel modulo così dalla versione
alla versione e al modello in modo da ottenere questo
fuori solo un po ‘avanti veloce nel
presentazione
[Musica]
tutto apposto
quindi adesso ho un ho il mio
controller con il mio modulo quindi ho a
forma oggetto che sostiene l’intera forma nella mia
applicazione web e qui voglio aggiungere
la bandiera completa la bandiera appena aggiunta
nel mio un mio modello HTML così per questo I
posso fare qualcosa di diverso qui
quindi posso aggiungere un modello aggiungere attributi così
qui mi piacerebbe sapere se è pieno o
non così non ce l’ho adesso adesso
aggiungiamolo così abbiamo il pieno
versione dei dati o non è quella
perché vogliamo avere qui così è così che cosa
no, non è quella richiesta TIFF
meglio così è pieno o non va bene e ora
invece di dare l’intero diff e
tutti i gruppi alla nostra pagina da rendere
vogliamo solo selezionare quelli
indossare nulla indossando qualcosa cambiato
giusto così qui prenderemo i gruppi
invece e filtrerà quelli così
questa lista di voi controlla questo, così abbiamo
i gruppi qui che il nostro gruppo diff
otteniamo l’elenco dei gruppi qui e noi
voglio filtrare quelli con un predicato così
il predicato è così è che lo raggruppano
ha fatto qualcosa cambiare in quel gruppo, quindi se
scrivi è un tipo in conflitto quindi se
qualcosa è cambiato quindi non vogliamo
vederlo vogliamo vederlo o o noi o se
sappiamo che abbiamo chiesto il tutto
cosa va bene così facendo questo ora otteniamo
la lista filtrata dei nostri gruppi che vogliamo
per raccoglierlo per elencarlo, lo facciamo
facendo ciò dovremmo vedere molte cose
scomparire qui ok, quindi ne abbiamo di meno
le cose giuste abbiamo solo gruppi dove
qualcosa è cambiato e abbiamo fatto un cambiamento
a un vero controllore quindi quando lo abbiamo fatto
che abbiamo ricostruito il progetto e cosa
è successo è strumenti dev per prendersene cura
riavviato il contesto primaverile il
contesto applicativo di primavera con il
fagioli senza riavviare la vecchia JVM né
il contenitore in modo che inizi effettivamente
ripristino abbastanza rapidamente se si guarda a
questa nella domanda di corsa qui penso
abbiamo il dovrebbe avere da qualche parte il
tempo alla fine qui qui è iniziato
in meno di un secondo e la JVM ha
è in corso da un po ‘ora, perché noi
iniziato la presentazione in precedenza
così va bene che è il tipo di esperienza
puoi avere quando hai a che fare con a
con gli strumenti di sviluppo di
risorse statiche ai modelli effettivi
classi e puoi fare molte cose qui
quindi un’altra cosa che può farlo
ti infastidisce quando hai a che fare
con una web application si sta occupando
le risorse statiche in molti modi così
qui ti mostreremo che sto andando
per mostrarti come affrontare questo
in un modo specifico così per esempio in questo
applicazione tutte le risorse statiche
sono costruiti li li otteniamo come web
vasi in modo da non copiare e incollare
quelle risorse come solo file statici
nelle risorse abbiamo quelle specifiche
percorso e se guardi il palmo se tu
guarda il palmo poi lo vedrai
stiamo ottenendo jquery e bootstrap come
dipendenze di esperti, quindi stiamo ricevendo
quelli che sono vasi e quei vasi sono
sul classpath del nostro web di applicazione
applicazione e avvio fatti quelli
disponibile in o e servire possiamo servire
quelli come risorse statiche direttamente così
questo è ciò che siamo questo è quello che siamo
facendo ma la cosa è se tu se tu
guarda la pagina attuale quando sei
In questo modo hai avuto modo di avere la
versione e devi affrontare
questo significa che ogni volta che sei
aggiornando la versione di alcuni statici
libreria devi affrontare anche questo
modello di intervista così sia nel tuo
palmo e il tuo modello che non è davvero
non andiamo molto bene, quindi cosa possiamo fare
è un palmo nel nostro palmo possiamo aggiungerne un altro
dipendenza che è un cuneo del nostro localizzatore
quindi questa è una libreria di terze parti
supporti per avvio a molla e questa libreria
ti aiuta a individuare quei barattoli di web
librerie senza specificare uno specifico
versione e sta facendo la cosa giusta
ma questo è un modo per mostrarti una cosa
se lo faccio, sto cambiando il
dipendenze del mio progetto di avvio e
ogni volta che lo faccio, in qualche modo devo farlo
riavvio e ho intenzione di spiegare perché io
precedentemente spiegato che quando lo fai
qualcosa che l’ha costruito quando tu
ricostruire i tuoi strumenti di sviluppo del progetto è
riavvio dell’applique
nel contesto ecc, ma così facendo non lo è
riavviare il tutto perché è
creando due diversi caricatori di classe a
l’inizio della tua applicazione
per la tua app tutto ciò che riguarda il
app e uno per il contenitore reale e
tutte le librerie che vuoi dire no
tutto ciò che non è il tuo codice
fondamentalmente tutte le dipendenze
tutto ciò che hai nel palmo della mano
è proprio lì in quell’ordine di classe
che il primo e il secondo
ovunque tu stia cambiando qualcosa
il tuo codice è il caricatore di ordini di classe
questo è stato buttato fuori e abbiamo iniziato
quando sai quando stai facendo
qualcosa per ritirare il tuo progetto così
è per questo che quando aggiungi qualcosa
o eliminando qualcosa dal tuo
dipendenze in cui devi farlo
riavvia il tuo progetto che è l’unico
limitazione ma è lo stesso
limitazione un modo molto efficace per
riavviare a destra molto rapidamente senza
buttare tutto in modo che va bene che abbiamo
ottenuto quello che trova la biblioteca di posti di lavoro e
quella biblioteca ci permetterà di fare
qualcosa di interessante con quelli con
quelle risorse così invece di avere
quelli che vogliamo assolutamente ottenere
risorse senza specifica specifica
la versione così qui quello che faremo è
creare un customizer specifico perché
siamo qui stava usando stiamo usando
baffi come motore di template che dovresti
sappi che con altri tempi di gioco
lamentarsi dei motori che è quella caratteristica
gestito direttamente senza necessità di
qualsiasi cosa specifica che ti mostrerò
che puoi ancora agganciarlo così qui
Creerò un customizer dei baffi così
qualcosa che qualcosa che si agganci
in ganci nei baffi
il motore dei modelli e dà il
possibilità all’interno del motore di aggiungere a
nuovo URL una parola chiave che mondo chiave URL
riscriverà gli URL per il
risorse così perché lo abbiamo fatto
ha ottenuto la nuova parola chiave nel nostro template
motore e così allora e solo allora possiamo
abbi cura di questo così invece di scrivere
tutto questo
potremmo riscrivere tutti i link e
avere questo così come si confronta, invece di
avendo prelevato bootstrap la versione
ecc Sto cancellando la versione e lo sono
solo chiamando il mio url QR che ho appena
creato e facendo così e ricostruendo
vedremo che sta ancora ricaricando o
non perché ho riavviato il server i
non so se è ancora agganciato
inizia a fare la cosa giusta
quindi la cosa non sta caricando il loro
risorse nella nostra applicazione perché io
non so perché cacchio
qualche idea
sì forse non ho riavviato correttamente
quando ho aggiunto la dipendenza correttamente
così va bene se lo guardi ora se
si guarda il il codice sorgente allora
vedi che le versioni sono qui ma
nel mio modello imparano il loro non così
questo è un modo di affrontare
risorse statiche e in modo va bene che di
a che quelli sono i primi passi per a
applicazione web regolare con la statica
risorse con quali vasi, per esempio
abbiamo visto come gestire con il modo di
gestire le cose con devtools come farlo
cambia il modo in cui sviluppiamo il tuo
applicazione la nostra applicazione web e ma
possiamo fare molte molte altre cose in realtà
qui ho intenzione di passare ad un altro tipo
di applicazione quindi la stessa applicazione ma
invece questa applicazione sarà basata
su angularjs e vedrai reset
okay ho resettato tutto ciò che ho
cambiato le dipendenze di conseguenza
ecco un esempio di un diverso tipo di
per prima cosa lascia che te lo mostri
funziona ancora così con 125 release 130
rilascia lo stesso qui, quindi qui cambi vedi
il browser non sta ricaricando il
pagina stiamo andando a prendere qualcosa con aa
un’API con una API REST e lo siamo
rendendo il tutto con il
motore angolare di templating così il
la differenza che voglio mostrare qui è quella
ok è diverso è un it’s a
applicazione a singola pagina ma c’è anche
un modo diverso di strutturare il
applicazione che possiamo vedere qui abbiamo ancora
avere il nostro modulo web con la stessa cosa
controller ecc. ma questa volta quelli
controller invece di restituire visualizzazioni
stanno tornando inseguendo qui e noi
non abbiamo un solo modello
qui e quel modello è e vedremo
in quel modello abbiamo un abbiamo
vediamo che abbiamo ottenuto il nostro
viste angolari e stiamo ricevendo un sacco di
risorse con jquery angolare ecc
tutte quelle tutte quelle risorse e tutto
quelle tutte quelle cose che sono in realtà
situato in un modulo separato in un client
modulo così in precedenza quello che avevamo eravamo
ottenere quelle dipendenze era quella rete
dipendenze di jar che come jQuery e
bootstrap li stiamo prendendo da parte di Maven
e qui quello è in realtà ciò che siamo
andando a fare, ma per il nostro codice invece
di mettere tutto in SRC molti
risorse nel nostro modulo web che avremo
un modulo separato per questo motivo, quindi
che se hai costruito una singola pagina
applicazioni che ti urlano spesso notato
che hai anche il tuo codice ok
librerie di terze parti come il modulo che sei
importazione e forse test e forse il tuo
proprio sistema di moduli o la propria build
usando grugnito o sorso o altro
quindi se aggiungi tutto questo al tuo web
applicazione che è molto artigianale
non vuoi che tu voglia solo il reale
uscita della build e tu vuoi
Fallo come parte della tua rete
applicazione quindi è quello che stiamo facendo
in realtà abbiamo un modulo client con
qui puoi vedere la fiducia di Bauer così
le librerie di terze parti che stiamo usando ci sono
usando Bower e stiamo usando NPM per
effettivamente costruito sul nostro progetto che abbiamo
a package.json stiamo dicendo che abbiamo noi
ho bisogno di Bauer ecc. e qui in SRC ce l’abbiamo
le nostre fonti quindi abbiamo il nostro
JavaScript e il nostro CSS così è dove
la nostra applicazione client vive e
ogni volta che lo costruiamo ogni volta che costruiamo
questo in realtà siamo in realtà
chiamare ovunque lo stiamo costruendo
modulo stiamo chiamando nota in npm siamo
installando quelli come parte di un esperto
plugin e lo chiameremo come parte di
la nostra costruzione di esperti stiamo costruendo il nostro
intero o proprio cliente e poi siamo
creando un barattolo come un barattolo di vetro e
quel barattolo sarà preso come a
dipendenza dal nostro modulo web quindi qui
dove possiamo vedere stiamo chiamando nodo e
NPM e stiamo raggruppando tutto
in un vaso su quelle risorse e e se
guardiamo nell’altro modulo il web
modulo vedrai che qui sarà
ottenendo il primaverile
Spring Boot Client Module quindi il client
modulo è stiamo ottenendo che come un
dipendenza ma quando la guardi così
due moduli separati è buono
perché abbiamo i nostri test e tutto il resto
abbiamo bisogno del nostro cliente in separato
modulo non stiamo mescolando le cose ma è
un po ‘diverso dal solito layout
layout del progetto e che rompe molto
le solite cose che potresti dire ma è così
in realtà è abbastanza facile farlo funzionare così
una volta che hai preparato il barattolo in questo modo
potresti pensare che il tutto
l’esperienza dei devtools che ti ho mostrato
fino ad ora è completamente rotto, ma tu
può effettivamente aggirare questo e quello è
uno dei grandi punti di forza di devtools
quindi se andiamo all’applicazione
proprietà in questo momento abbiamo visto solo a
un paio di cose che abbiamo aggiunto in te
nei passaggi precedenti ma in questo momento lo faremo
aggiungi un’applicazione specifica ma la proprietà
per l’ambiente dev così ogni volta che tu
suffix i file delle proprietà dell’applicazione
con con un qualcosa che è una chiave
che ci sarà l’ambiente così
ogni volta che eseguiamo la nostra applicazione in dev
modalità con un profilo di def in realtà siamo
applicando quel file di proprietà e con
strumenti di sviluppo possiamo collegarci e possiamo farlo
aggiungi alcune proprietà come questa, così possiamo
Diciamo prima di voler servire in modo specifico
posizioni quindi tutto ciò che è acceso
tag classpath ma anche file che sono
situato direttamente negli altri moduli
sul disco così ci riferiamo alla la
modulo accanto a noi, quindi è solo in
durante la fase di sviluppo che stiamo servendo
direttamente le risorse dal modulo
dalla cartella successiva invece di un vaso noi
non è necessario ricostruire l’intero barattolo
ogni volta quindi primo passo e poi per
strumenti di sviluppo per capire cosa sta succedendo
stiamo dicendo agli strumenti di sviluppo che dovrebbe
prenditi cura di questi percorsi aggiuntivi così
gli strumenti dev dovrebbero guardare quei percorsi
con un osservatore di file e ogni volta
qualcosa cambia dovrebbe esserci collegato
e con la ricarica live aggiorna il tuo
browser ecc in modo tale che quelli siano il
proprietà che abbiamo impostato quindi non è molto
e con un qualche tipo di layout esotico
lo stiamo inventando può ancora funzionare così
diamo un’occhiata a questo così è già
ho iniziato a farmi rinfrescare facendo progetto così
okay abbiamo ancora quell’applicazione
ho ancora quel setup che ho ancora con
tutto e ciò che possiamo vedere adesso
ogni volta che lo chiamo c’è un
c’è un ritardo giusto perché noi
stavano facendo una chiamata di riposo al nostro server
e arrendersi sui clienti
quindi possiamo
e vedere se abbiamo ancora lo stesso
esperienza con i devtools così per
questo andiamo al nostro nuovo modello così
all’interno del nostro nuovo modello abbiamo ancora
il nostro modulo con la versione da a
versione e ora abbiamo il nostro o pulsante
abbiamo il pulsante di confronto quindi ora cosa
possiamo fare è possiamo ad esempio cambiare
il pulsante possiamo cambiare il pulsante e
aggiungi un po ‘di logo in esso, ecco cosa
lo faremo ogni volta che lo faremo
chiamando questo ora abbiamo mostrato quel logo
e perché non è super divertente allora
possiamo aggiungere possiamo modellarlo in modo che possiamo ancora
in modo che il passaggio precedente fosse in a
modello nella nostra applicazione Web e ora
ciò significa che il file CSS è nel nostro
modulo client così diverso modulo così
qui vedremo se tutto funziona ancora
quindi qui aggiungo alcune regole CSS
per cambiare lo stile così ogni volta che sono
Sto facendo clic su di esso ora che il CSS
si applica quindi sto modificando il file
direttamente su disco ho ancora il resto
istantaneamente nella mia domanda nel
altro modulo o nei miei uomini quando il web principale
modulo va bene così ora abbiamo visto che
con un diverso tipo di applicazione
layout diverso qualcosa che penso
è più adatto per una singola pagina
applicazioni con un cliente separato
modulo con con un edificio stesso noi
può ancora avere lo stesso tipo di vita
Ciclo e esperienza nello sviluppo di una rete
applicazione così come hai visto stare con
quadro boudoir ci sono molte novità
caratteristiche che ti aiutano a scrivere quelle
trono rispetto alle applicazioni pesanti come
gestisci quelle risorse statiche nel tuo
modelli come servire le risorse statiche
per da varie posizioni ecc. e non
solo questo ma anche il ciclo di vita principale
l’esperienza di sviluppo che abbiamo e
quello che possiamo anche fare è mostrarlo
le cose quindi qualunque sia la tua
applicazione su cui stai lavorando
applicazione che spesso si desidera anche a
ottimizzare l’esperienza e il web
le prestazioni che i tuoi utenti avranno così se
si guarda la scheda di rete qui per
esempio quindi ecco una cosa qui è se
guardi in questo che stiamo chiamando
la nostra API è l’API dove siamo
chiamando e stiamo ottenendo i dati
per rappresentare l’intera tabella delle cose
quindi il diff tra quei due boot
versioni per tutte le chiavi di Kiara quindi se tu
guarda che in realtà è abbastanza grande
a sono quasi quattrocento kilobyte
solo per una chiamata, quindi possiamo
potrebbe sicuramente cambiarlo e possiamo
migliorare quello per migliorare che possiamo
sfruttare molte diverse funzionalità di
Buddha e quadro e ti mostrerò
quindi la prima cosa che possiamo fare è in questo
il documento inviava molte cose
comprese le cose di cui non abbiamo davvero bisogno
rendering sul front-end in modo che era quando
era quando il templating era finito
server non ci importava davvero di poterlo fare
invia l’intera cosa al template
motore e stiamo rendendo quello che siamo
bisogno ma per il cliente se lo siamo
sterilizzare il tutto al
cliente allora è un grosso carico utile e
questo è un problema, quindi se lo vogliamo
cambia che possiamo selezionare il giusto
parti del carico utile che vogliamo vogliamo
per vedere e per questo stiamo inviando questo
al cliente ogni volta che dal nostro
controller guardiamo il nostro controller
quindi ogni volta che chiami l’API dei dati
stai ricevendo questo oggetto
configurazione div e quella configurazione
diff è quella classe e quella classe ha
un sacco di cose in esso così ci sono
c’è una versione in, ma poi la
elenco delle differenze se si guardano a quelle
quindi scarica le nostre didascalie e proprietà
tipi di proprietà e se li guardi
ci sono molte altre cose ecc. ecc
un sacco di metadati là fuori così
questo è un aspetto che lo trasforma in un grande documento
e hai visto spruzzato qui dentro
sono dentro a quel modello con l’aggiunta
jason visualizza annotazioni e viste di Jason
annotazioni hai familiarità con Jason
viste viste di Jason è una funzionalità in
Jackson, la libreria JSON, così puoi
annota il tuo modello di Jackson tuo
modello con quelli e questo è un modo per
personalizzare il tipo di output che otterrai
dalla serializzazione a seconda del
contesto così qui che abbiamo detto che vogliamo
questo per essere serializzato solo quando sono
usando quella particolare visione e lo faremo
vedere come funziona così nel controller se
Se sono ancora sul controller, posso farlo
Dite bene, in quel caso non voglio il
tutta la cosa voglio solo selezionare cosa
Ho contrassegnato come campo una vista quindi se
Sto aggiungendo l’annotazione della vista chasm e
e poi ho bisogno di usarlo
vista particolare di abbiamo visto così qui
con la classe di riepilogo vista D quindi qui se
Sto dicendo che voglio solo usare quella vista
e poi mi sto rinfrescando ogni volta che sono
chiamandolo con quell’API qui
siamo passati da 400 a 246 perché abbiamo
cancellato un sacco di cose così qui sul
vola quando serializzi l’oggetto che siamo
applicando tale visione specifica a ciò
oggetto e siamo così io serializzare solo
quello di cui abbiamo bisogno solo un passaggio da 400 a
22 5246 quindi il prossimo passo sarebbe per
esempio quando guardi questo puoi
guarda le intestazioni di risposta e non lo è
anche compresso come abbiamo completamente dimenticato
abilitare la compressione e solitamente quando
fai così devi armeggiare con il tuo
con il tuo contenitore devi cambiare
la configurazione del tuo contenitore è stata impostata molto
di cose ecc. ma qui stiamo usando un
contenitore incorporato e possiamo anche fare
più facilmente usando le cose
abbiamo descritto fino ad ora così
se andiamo alle nostre proprietà dell’applicazione
qui possiamo usare la compressione e lì
sono alcune chiavi quindi se si digita
compressione puoi vedere che c’è un
la compressione del server ha abilitato i tipi di mine
è una dimensione di risposta mini che sono quelli
tutte le cose che possiamo cambiare qui così io
preparato qualcosa così qui siamo abilitati
abbiamo abilitato la compressione e lo siamo
vogliamo comprimere tutto Jason
testo CSS e JavaScript e noi vogliamo noi
non voglio comprimere tutto ciò che è
sotto 2k perché non è davvero pensare
che in questo caso non è davvero utile
così stessa cosa rinfrescante rinfrescante
tutto e ora abbiamo il
content encoding gzip quindi siamo davvero G
zippando quella risposta e ora siamo giù
a 20k sostanzialmente da 400 al
all’inizio è fantastico , ora siamo
ora stiamo mettendo meno di quello che siamo adesso
comprimendo al volo e ora ci sono
ancora più cose che possiamo fare usando
le ultime caratteristiche del framework per
esempio qual è la cosa migliore in aggiunta
inviando di più al tuo cliente che sta inviando
niente e quando vuoi inviare
nulla riguarda il caching HTTP così uguale
cosa caching HTTP puoi fare a
sacco di cose in primavera tarda primavera
versioni più recenti ci sono molti modi per
affrontare questo ci sono trasversali
modi per la tua intera applicazione per tutti
risorse statiche per esempio ma nel nostro
caso vogliamo dirti qualcosa
davvero per la nostra API qui così per
esempio quando stai chiedendo il
differenza tra la versione 1 2 5 e 1
30 sappiamo che una volta sono quelli
le versioni sono fuori non stiamo cambiando
qualunque cosa una volta che la diversione viene rilasciata
non stiamo andando su Maven Central e
modificando gli swiping di artefatti a scorrimento a destra
così quando lo fai, il diff è bello
molto incastonato nella pietra quindi potremmo sicuramente
usa quella leva e dicci ok
diff è lo stesso una volta per tutte e
tutti i nuovi client htp dei clienti che puoi incassare
e per farlo lo faremo sicuramente
sfruttare il
l’ intestazione HTTP e-tag così l’ e-tag
st-pierre è un modo per mettere un tag su un
risposta e dicendo questo per quello
richiedere la risposta è questo e il
e-tag izzy è l’identificativo e
ogni volta che il cliente ha quella risposta in
in contanti si può chiedere se la risposta
va ancora bene con quell’attacco, così noi
bisogno di venire con alcuni identificatori
qualcosa che rappresenta la risposta
qualunque cosa accada, quello che potremmo fare è usare
le due versioni le due chiavi a destra
il da e due versioni concatenate
quelli e quello che potrebbe funzionare come una chiave
questo è ciò che faremo che siamo
creando un verrà creato un nuovo tag con
quelle chiavi quindi creeremo un e-tag
usando le due delle due versioni così
otterremo la stringa dalla versione e
stringa alla versione o lascia solo ottenere
lascia che facciano la richiesta a tutti
insieme in un colpo e poi possiamo
crea un nuovo tag con questo si unirà
poi con un hash e poi otterremo il
da e poi le due versioni e
concatenare il concatenato
concatenando entrambi dovrebbe creare un
in qualche modo un etag decente ora abbiamo bisogno di
sfruttare anche quello nella nostra risposta
e per farlo puoi invece di
rimandare una configurazione regalo che
l’oggetto che desideri direttamente
serializzare è possibile inviare una risposta
entità di quell’oggetto e in quel modo voi
può inviare quell’oggetto che ancora
personalizzare la risposta in qualsiasi modo
voglio così qui quello che possiamo fare è restituire a
entità di risposta e vogliamo impostare un noi
voglio dire che va bene lo vogliamo
aggiungi un nuovo tag e possiamo creare
papà taggato con le richieste di diff allora
possiamo anche aggiungere denaro
controllo su di esso, quindi voglio voglio
Dì ai miei clienti che dovrebbero incassare
controllare questo che dovrebbe prenderlo
risposta per un giorno, ad esempio o
potremmo anche andare con un anno
una volta che ho finito sto andando bene e capito
corpo qui e cambiando questo dovrebbe
sicuramente aggiungere qualcosa di nuovo tour ok
qui così alla nostra risposta ora abbiamo un
e-tag dicendo che questo è l’e-tag e noi
anche avere la direttiva sul controllo di cassa a
la nostra risposta così qui ho disabilitato il mio
in contanti ma se non lo faccio e irie
Confrontiamo qui stiamo andando a vedere che
sta ottenendo ora la risposta dal denaro
quindi non sta richiedendo il server
più perché abbiamo l’e-tag noi
avere il controllo del contante, quindi non lo siamo
anche chiedere al server di farlo
più così tutto bene così ora abbiamo
abbiamo fatto un sacco di cose con il caching
e compressione in cima penso che siamo ancora
avere pochi minuti non 5-10 minuti
forse cinque così hai te?
domande in questo momento o posso andare un po ‘
ulteriormente modificando la build del client
domande o no
okay, questa è una domanda di solito
avere come ottenere devtools ma ancora
escludere gli strumenti di sviluppo dalla build
e non ce l’ha in produzione, quindi è così
fatto automaticamente per te intendo se tu
quello che potrei non aver fatto correttamente
la mia app è quando ne hai bisogno ogni volta
importate gli strumenti di sviluppo che dovreste usare
opzionale prima e anche quando lo fai
nella tua applicazione gli strumenti di sviluppo no
in realtà è abilitato solo se
la tua applicazione è stata lanciata in tale
in tal modo con direttamente con Maven
o nel tuo ID ma ogni volta che lo è
lanciato come un vaso eseguibile non lo è
attivato in modo che tu possa ancora spedirlo se
vuoi ma non sarà attivato da
predefinito o ci sono anche altri modi
nella tua build per escludere gli strumenti di sviluppo
ogni volta che crei l’applicazione
con il plug-in maven di avvio primavera così
puoi dire che non vuoi aggiungere
tutto ciò che dipendenza per la produzione
bene quindi un’ultima cosa che posso mostrare
allora è un andare anche oltre con il
costruisci così con il cliente ciò che posso fare
in realtà ora abbiamo le nostre risorse
nel nostro modulo client, ma potremmo
sicuramente totalmente costruito un ottimizzato
versione del nostro di quella applicazione a
anche andare oltre, come ottimizzare il CSS
e JavaScript e ancora venire con a
qualcosa con il barattolo qualcosa
può essere consumato ma ottimizzato per
produzione e invece di farlo
il lato server e giocoleria con le cose
nella tua applicazione web e mixaggio
preoccupazioni che puoi sicuramente sfruttare
quel client del modulo separato separato
modulo e fai quello che vuoi in esso
e questo è quello che faremo
anche andando ad usare strumenti nativi che
non sono realmente correlati a Java e in questo modo
puoi fare qualsiasi cosa tu voglia fare
per prima cosa possiamo aggiungere più dipendenze
qui così di default abbiamo il potere
grande ma malvagio, ma potremmo usare il gulp così
stiamo scegliendo gulp come un conto alla gola
un po ‘come Gradle in JavaScript
mondo se tu se lo conosci e qui
stiamo aggiungendo il doppio strumento e lo siamo
aggiungere cose qui per ottimizzare il CSS
e ottimizzare il JavaScript una volta che abbiamo
abbiamo aggiunto quelle dipendenze che possiamo
usa quelli e crea una build reale
file per la nostra applicazione client così sono
creando un file di fatturazione che per inghiottire quale
si chiama gulp file che Jas e qui
puoi scrivere quel file gulp così siamo
fondamentalmente ottenendo le dipendenze
abbiamo aggiunto in precedenza che stiamo descrivendo
il progetto 22 alla costruzione e siamo
aggiungendo compiti così come noi siamo
dicendo va bene, qui devi prendere tutto
File CSS e ottimizzarli al volo
e scrivi quelli in un particolare percorso in
nostro nella nostra directory dist target e
stessa cosa per ottimizzare javascript
tutto al volo e scrivere che
nei dischi di destinazione così ogni volta che siamo
costruendo l’applicazione che stiamo lanciando
tutti questi compiti e stiamo ottimizzando
le nostre risorse ma per unire il
tutta la cosa per legare tutto ciò che noi
può usare il nostro pedone nel nostro cliente e
cambia alcune cose così adesso
ogni volta che stiamo lanciando il conto siamo
installando in pm se non lo è già
lì installando risorse di terze parti
con il potere e ora abbiamo bisogno di aggiungere un
un’altra esecuzione che non conosco
se ho tutto pronto o no no
non pensarlo quindi ne aggiungo un altro
esecuzione qui che è gulp build e
Sto aggiungendo i loro obiettivi e l’obiettivo qui
è un gulp
quindi stiamo lanciando gulp ogni volta che siamo
costruendo la nostra applicazione come parte di
mavin dove abbiamo un terzo terzo
obiettivo di esecuzione qui così ora quando lo facciamo
che costruiremo tutti quelli ottimizzati
risorse nella nostra directory dist così ora
abbiamo bisogno di ottenere quelle risorse, invece
di prendere tutto ciò che abbiamo in noi
bisogno di avere bisogno di andare a bersaglio e
dist e prendere tutto da esso e ottenere
quelle risorse e impacchettale quindi andiamo
dai un’occhiata a questo se vado nel nostro
client se io è un’applicazione di packager
quindi ogni volta che lo facciamo possiamo vederlo
sta lanciando un nodo e PM il tutto
cosa un sorso quindi c’è il nostro obiettivo costruire
il suo essere è stato il mini volo o j
File SN e javascript ecc. Significato
se torniamo alla nostra per la nostra applicazione
e questa volta stiamo lanciando il
l’applicazione farà in modo che il
applicazione è fatto come questo diritto
quindi non sono sicuro di aver fatto il tutto
giusto sì bene così qui invece di
avendo il nostro file CSS dot principale che è
grande non ottimizzato ecc. Ho qualcosa
che è ottimizzato per la mia domanda di
produzione e se mai tornare indietro il mio
profilo per def profilo quindi posso ancora
servire le risorse derivate lì
direttamente nel mio modulo client per il
esperienza di sviluppo con il
tutto ciò di cui hai bisogno per il tempo di sviluppo
quindi è un modo per avere entrambe le esperienze
e ho ancora un buon sviluppo
ciclo con un’applicazione reale tutto bene
Penso di aver finito, non dico di chiederlo
domande su tutto
funzionalità web Penso che abbiamo visto devtools
se stesso ecc. come vogliamo
come gestiamo i tag per statico
risorse sì sì forse abbiamo come a
minuto ci sono molte altre cose come
bene che puoi fare e ce ne sono molte
di cose che non ho avuto il tempo di mostrarti
ma c’è anche la catena delle risorse
fa parte del framework e questo è
sfruttare in primavera lo stivale e in quel modo voi
posso anche fare questo, per esempio
per abilitarlo e puoi ad esempio a
il giorno potrebbe mostrarti vero, penso che lo farò
lavorare direttamente
o no
no, non è signore da qui, mmm si
non sono sicuro che sia giusto per soldi
abilitato oh intendevi signore, va bene così
l’ altro così ogni volta che vuoi
portare denaro in una catena di risorse no
un’altra risorsa per il periodo in contanti
periodo di cassa che uno così per esempio se
vuoi farlo per esempio denaro contante
risorse per un’ora per le tue risorse
puoi ancora avere questo per esempio a
BJS e se guardi le intestazioni è
in nessun negozio in questo momento perché sono in sviluppo
modalità, ma se sto passando alla produzione
quindi mostrerà il controllo di cassa della cache
controllo che ho inserito in loro
va bene
come fai a cambiare questi profili così con
gli stivali sussurranti in dentro qui dentro
Il mio profilo di commutazione ID è circa
aggiungendo la modifica della mia configurazione di esecuzione e
aggiungere o eliminare un profilo qui / dev
o produzione o qualcosa di simile così
è qui e fa scattare un profilo
sta attivando tutto il profilo di aggiunta
fagioli nella tua applicazione regolarmente
giusto ma sta anche sfruttando il
applicazione che proprietà o
profilo del trattino dell’applicazione Proprietà Doug
quindi è possibile perché ho un
soprattutto le proprietà di applicazione
per lo sviluppo e in piena produzione è possibile
puoi avviare la tua applicazione con
con le bandiere e definendo ciò che sanno
quale profilo deve essere attivato in
produzione quando stai correndo
Interazione scusa come te
sì, ci sono molte cose in realtà
con le proprietà in boot c’è come a
elenco di 10 modi ish per risolvere a
proprietà va da un valore reale
nel tuo file di proprietà dal
ambiente dall’ambiente o estraneo
variabile d’ ambiente quando sei
lanciando il tuo o anche una linea comune
variabile quindi ci sono molti modi per impostare a
proprietà e quando stai lanciando il tuo
applicazione per esempio con un
barattolo eseguibile puoi dirlo
dovrebbe caricare quel file di proprietà da
quel posto dal file system e
ha funzionato tutte le parole anche sì, era tutto
il tempo che ci rimane per le domande
adesso se ne hai ancora
domande non esitate a venire a
il palco e discuto alcune cose
Inoltre, non dimenticare di votare e per favore
unisciti a noi in 20 minuti per il discorso di Josh
la nuvola di primavera
[Applausi]
quindi ciao benvenuto a questa presentazione
durante questo discorso parleremo di come
puoi sviluppare applicazioni web con
quadro di primavera e soprattutto qui
con un paio di stivali primaverili quindi parleremo
su varie cose che il tipo di
esperienza che puoi ottenere ma anche il tipo
di funzionalità che puoi sfruttare con
con le ultime versioni eccoci qui
concentrandosi su Springwood 13 e e e
molla avanti quadro 42 ma lasciamo
per prima cosa parliamo di una cosa se
sei stato alla presentazione data da
Stefan sei stato alla presentazione
dato da annusando tra l’altro sì sì
Parlerò di così tanto in primavera
che c’è una funzione che viene chiamata
configurazione esternalizzata e in un modo
questo ti sta fornendo
un modo per configurare l’applicazione
proprietà del punto dell’applicazione interna o
applicazione i file generali senza
fare le cose manualmente o programmare
a livello di codice e la cosa è il
la squadra di avvio primaverile ha definito molto
chiavi per la configurazione, ad esempio
la porta su cui è in esecuzione il tuo server
o la tua fonte di dati ecc ecc
ci sono molte chiavi che puoi semplicemente usare
e impostare i valori che si desidera configurare
cose facilmente invece di fare cose
te stesso ma la cosa è che ci sono così
molte chiavi hanno definito una cosa sola quando
stai usando quei tasti che ottieni Auto
completamento nel tuo ID perché la primavera
il team di avvio fornisce tutti questi dati come
file di metadati che qualsiasi strumento può consumare
essere un ID come IntelliJ o netbeans o
eclissi STS o qualsiasi altra cosa così
il tipo di esperienza che puoi avere
il tuo ID ma al prodotto per fornire tutto
come se ti dicessi la primavera blu
il team deve fornire tutti quei metadati
da qualche parte e come qualsiasi cosa tu abbia bisogno di
gestiscilo perché ogni volta che cambi
il nome della chiave o sei deprecato
qualcosa o c’è qualcosa di nuovo te
bisogno di gestire in qualche modo il ciclo di vita di
tutte quelle proprietà altrimenti è solo
confondendo così in precedenza ciò che la primavera
il team di avvio stava facendo e sta ancora facendo
fornendo e changelog
per ogni versione in modo che la chiave che
per esempio confuso il timeout della sessione
è stato sostituito da qualcos’altro
è stato modificato o è stato eliminato perché ecc
ottieni una visione completa di ciò che sta accadendo
tra le versioni ma per fornire quello
era una specie di lavoro noioso da fare
manualmente, ecco perché Springwood
team ha creato una libreria interna per
loro per gestire tutto questo e tra
due versioni di stivali che puoi gestire
ottenere il diff di tutto ciò che è cambiato
probabilmente saggio con gli stivali in modo che una specie di
meta ma la biblioteca morta che cosa è
facendo il suo caricamento degli artefatti Maven
per esempio per gli stivali a molla 125 e 130
caricando quei vasi che stanno esaminando
raccogliere in quei barattoli guardando il
metadati che generano un diff e da qui
prendiamo quella libreria da qui e
quello che faremo durante quella conversazione è lavoro
su una sorta di interfaccia utente web per visualizzarlo
informazioni abbastanza bene quindi tutto
che ci saranno le diapositive sotto
il sito della conferenza tutto qui
è in realtà una versione più lunga e più breve
di una lunga università dove c’è molto
Caratteristiche di un demoed quindi se si vuole
guarda il codice è su github e c’è
anche la versione più lunga delle diapositive così
la parte interessante del circa il
codice è un c’è un commit da commit
storia di quello che stiamo facendo con quello
progetto così qualunque cosa stia facendo adesso
lo vedrai impegnato da commit e
ha spiegato quindi è abbastanza chiaro
quindi questa è la fine della diapositiva dove e
in questo momento si concentrerà sull’applicazione
quindi quello che possiamo mostrare adesso è per
esempio di tipo di output del tipo di
output che puoi ottenere da
quella libreria quindi questo è un campione
classificare un’applicazione di esempio che ho
in un progetto solo per mostrarti che è
caricando il suo caricamento in questo momento
i vasi e sta mostrando una specie di
chiedere una versione testuale del doc di ciò che noi
aspettarsi così in un gruppo
ad esempio la catena di risorse primaverili
ci sei entrato nella primavera del gruppo
le risorse cambiano hai quella chiave
abilitato che è stato diretto e quello
la chiave sta facendo in modo che sia così
Ho una specie di dati che stiamo facendo
trattare durante quella presentazione così
in questo momento ciò che abbiamo è reale
applicazione sì andiamo così se lancio
questa applicazione è una buona app di primavera
e va bene questa è l’applicazione di base
è già stato fatto quindi ti mostrerò
cosa fa se scrivi che voglio vedere
le differenze tra 125 e 1 e N 1
30 sta caricando e poi è it’s
rendere una pagina di tutto il
differenze tra le chiavi di quelli
due versioni quindi ovviamente sta caricando
le cose da Maven centrale bene così hai
ottenuto qui così abbiamo le differenze
in mostra in tabella con tutto in
il rosso che è stato cancellato verde
creato ecc ecc. abbiamo tutti questi elementi
quei tasti chiavi sono mostrati il più possibile
vedi ci sono alcuni gruppi dove nulla
cambiato di recente ma sono ancora
visualizzato e faremo qualcosa su
più tardi, ma quello che voglio mostrarti è
anche il layout di tale applicazione così
Se si dà un’occhiata alla destra di layout
ora quindi c’è un modulo div config
che è la libreria che stiamo usando
generare quei dati ma il web
applicazione che stiamo guardando in questo momento
è una semplice applicazione blu con il
classe di applicazione che sta lanciando il
tutta la cosa che abbiamo controller web am
controllori occupati abbiamo servizi e
abbiamo anche dei poemi con cui confrontarci
con i nostri dati perché è un bene
applicazione abbiamo anche cose in
la nostra cartella delle risorse è statica
risorse o applicazioni o proprietà
Ne parlerò e anche i modelli
perché qui stiamo usando un modello
motore quindi questo è il tipo di layout
e l’esperienza che abbiamo finora e ciò che io
vuole visualizzare in questo momento non è
in precedenza quando spesso quando sei
lavorando con un’applicazione Web
quello che devi fare è che devi
cambia qualcosa di essere in CSS o
modelli o in un controller classico o
da qualche parte stai cambiando devi
ricompilare riavvia ridistribuire tutto ciò e
può essere davvero noioso quando sei
facendo ciò ripetutamente specialmente quando
stai scrivendo un’applicazione web così
è per questo che con l’ultimamente con
con il boot a molla ha il team di avvio
sviluppato i devtools primavera buona
libreria devtools in cui si aggancia
nel tuo ciclo di vita quando sei
sviluppando la tua applicazione e tu puoi
ho una bella esperienza quindi lo farò
mostrarti cosa puoi usare come puoi
quindi sto arrestando il server in questo momento
mostraci e qui è qui quello che puoi
puoi puoi aggiungere una dipendenza e
quella dipendenza è un buon strumento di sviluppo
e ogni volta che lo fai stai portando
in una biblioteca costruita dal blu di primavera
team e quella libreria ricaricheranno il tuo
applicazione senza riavviare il
parte giusta dell’applicazione senza
riavviare il tutto senza
riavvio del server o della JVM
vedrai come funziona così aggiungendo
quella dipendenza se mai riavvio il mio
server ho ancora la stessa applicazione
nulla cambia ancora, ancora qui
la cosa nuova è che posso fare qualcosa qui
quindi ho un ho uno sviluppatore che ho
ha un plug-in del browser un’estensione che
è pubblico è là fuori è chiamato
reload dal vivo in modo ricarica dal vivo è la sua in
di per sé è una specie di protocollo
definito da terzi da terze parti
non da noi e vivere davvero è fondamentalmente
sei un cliente che ti connette il tuo browser
al tuo
e con una WebSocket e ogni volta che
il server vuole solo i tuoi clienti
aggiorna inviando un segnale che dice
basta aggiornare la pagina e questo è il terzo
festa che è regolare e se si installa
dati quell’estensione e fai clic
su di esso poi puoi vedere che sono connesso
perché quando sto usando gli strumenti di sviluppo nel mio
gli strumenti di sviluppo dell’applicazione stanno creando questo
live reload server così ogni volta che sono
fare un cambiamento adeguato nella mia domanda
l’ applicazione buddhista dirà il mio
il client per ricaricarlo basta tagliare il tutto
ciclo di vita fino a semplici azioni
invece di riavviare l’arresto ecc
rinfrescando il mio browser è solo tu lo farai
vediamo quindi proviamolo con alcuni
cambia ciò che possiamo fare per ora è un per
esempio in questo momento ho una chiave che io
so è stato duplicato di recente così
questa primavera hai il suffisso che è stato
duplicato e nel mio HTML se guardo dentro
l’HTML ho già una classe
da qualche parte dire deprecato ma non l’ho fatto
aggiungi uno stile quindi quello che mi piace è quello che posso fare
è chiamata modifica modifica il mio file CSS e aggiungi
qualcosa così posso aggiungere una regola che dice
deprecato e decorerò il testo di
aggiungendo una linea attraverso di esso così ogni volta che io
ricostruisci il mio progetto ecco cosa è successo
quello che succede non sto facendo niente è
essere rinfrescato il progetto il progetto
è stato aggiornato sul lato server
e inviare un segnale al cliente e io
non ha fatto nulla sul mio browser è
mostrando che il cambiamento che è il
linea qui in modo che tu possa pensare okay questo
è un file statico facile da noi
può fare qualcosa qualcosa
più complesso quindi il prossimo passo sarebbe
possiamo aggiungere diciamo un banner perché
qualcuno in camera ha chiesto questo e allora
Lo farò con lo spring boot che puoi aggiungere
file che sono migliori e se lo aggiungo
banner qui puoi scrivere qualsiasi testo
vuoi che ci siano segnaposti per il tuo
versione dell’applicazione ecc. ed è pari
trattare con i colori NC che
significa che se aggiorni il tuo progetto
sta mostrando un bel banner all’interno
la tua console per darti di più
spiegazione o sul perché stiamo vedendo questo
adesso è perché ogni volta che sei
ricostruire il tuo progetto gli sviluppatori
la libreria sta guardando i file che sei
del tuo progetto e ogni volta che sei
ricostruire sta facendo la cosa giusta così
se è un file statico è solo strisciare
la cosa giusta e l’invio del segnale
al tuo browser se è più complesso
che per esempio un modello è un
ricompilando se ne ha bisogno quindi andiamo
per esempio, otterremo un risultato
un modello così per esempio nel nostro qui in
applicazione vogliamo prevenire tutti quelli
le chiavi per essere visualizzate come quelle
gruppi che non erano nulla di cambiato noi
non vogliono vedere quelli così facciamolo
per farlo dobbiamo andare all’indice per
il nostro modello di immersione e qui abbiamo a
il nostro forum in cui abbiamo il
versioni e il nostro pulsante di confronto quindi qui
ci piacerebbe aggiungere un po ‘di HTML così ho
qualcosa per questa casella di controllo in modo sostanziale
una casella di controllo che dice se voglio o no
per vedere l’ intera cosa così stiamo costruendo
rinfrescante tutto bene quindi ho capito
nuova casella di controllo per cui non sta facendo nulla
ora quindi mi piacerebbe avere quel segnale
dal mio modulo al mio controller, quindi è così
il prossimo passo se vado al mio controller
trattare con quel modulo così dalla versione
alla versione e al modello in modo da ottenere questo
fuori solo un po ‘avanti veloce nel
presentazione
[Musica]
tutto apposto
quindi adesso ho un ho il mio
controller con il mio modulo quindi ho a
forma oggetto che sostiene l’intera forma nella mia
applicazione web e qui voglio aggiungere
la bandiera completa la bandiera appena aggiunta
nel mio un mio modello HTML così per questo I
posso fare qualcosa di diverso qui
quindi posso aggiungere un modello aggiungere attributi così
qui mi piacerebbe sapere se è pieno o
non così non ce l’ho adesso adesso
aggiungiamolo così abbiamo il pieno
versione dei dati o non è quella
perché vogliamo avere qui così è così che cosa
no, non è quella richiesta TIFF
meglio così è pieno o non va bene e ora
invece di dare l’intero diff e
tutti i gruppi alla nostra pagina da rendere
vogliamo solo selezionare quelli
indossare nulla indossando qualcosa cambiato
giusto così qui prenderemo i gruppi
invece e filtrerà quelli così
questa lista di voi controlla questo, così abbiamo
i gruppi qui che il nostro gruppo diff
otteniamo l’elenco dei gruppi qui e noi
voglio filtrare quelli con un predicato così
il predicato è così è che lo raggruppano
ha fatto qualcosa cambiare in quel gruppo, quindi se
scrivi è un tipo in conflitto quindi se
qualcosa è cambiato quindi non vogliamo
vederlo vogliamo vederlo o o noi o se
sappiamo che abbiamo chiesto il tutto
cosa va bene così facendo questo ora otteniamo
la lista filtrata dei nostri gruppi che vogliamo
per raccoglierlo per elencarlo, lo facciamo
facendo ciò dovremmo vedere molte cose
scomparire qui ok, quindi ne abbiamo di meno
le cose giuste abbiamo solo gruppi dove
qualcosa è cambiato e abbiamo fatto un cambiamento
a un vero controllore quindi quando lo abbiamo fatto
che abbiamo ricostruito il progetto e cosa
è successo è strumenti dev per prendersene cura
riavviato il contesto primaverile il
contesto applicativo di primavera con il
fagioli senza riavviare la vecchia JVM né
il contenitore in modo che inizi effettivamente
ripristino abbastanza rapidamente se si guarda a
questa nella domanda di corsa qui penso
abbiamo il dovrebbe avere da qualche parte il
tempo alla fine qui qui è iniziato
in meno di un secondo e la JVM ha
è in corso da un po ‘ora, perché noi
iniziato la presentazione in precedenza
così va bene che è il tipo di esperienza
puoi avere quando hai a che fare con a
con gli strumenti di sviluppo di
risorse statiche ai modelli effettivi
classi e puoi fare molte cose qui
quindi un’altra cosa che può farlo
ti infastidisce quando hai a che fare
con una web application si sta occupando
le risorse statiche in molti modi così
qui ti mostreremo che sto andando
per mostrarti come affrontare questo
in un modo specifico così per esempio in questo
applicazione tutte le risorse statiche
sono costruiti li li otteniamo come web
vasi in modo da non copiare e incollare
quelle risorse come solo file statici
nelle risorse abbiamo quelle specifiche
percorso e se guardi il palmo se tu
guarda il palmo poi lo vedrai
stiamo ottenendo jquery e bootstrap come
dipendenze di esperti, quindi stiamo ricevendo
quelli che sono vasi e quei vasi sono
sul classpath del nostro web di applicazione
applicazione e avvio fatti quelli
disponibile in o e servire possiamo servire
quelli come risorse statiche direttamente così
questo è ciò che siamo questo è quello che siamo
facendo ma la cosa è se tu se tu
guarda la pagina attuale quando sei
In questo modo hai avuto modo di avere la
versione e devi affrontare
questo significa che ogni volta che sei
aggiornando la versione di alcuni statici
libreria devi affrontare anche questo
modello di intervista così sia nel tuo
palmo e il tuo modello che non è davvero
non andiamo molto bene, quindi cosa possiamo fare
è un palmo nel nostro palmo possiamo aggiungerne un altro
dipendenza che è un cuneo del nostro localizzatore
quindi questa è una libreria di terze parti
supporti per avvio a molla e questa libreria
ti aiuta a individuare quei barattoli di web
librerie senza specificare uno specifico
versione e sta facendo la cosa giusta
ma questo è un modo per mostrarti una cosa
se lo faccio, sto cambiando il
dipendenze del mio progetto di avvio e
ogni volta che lo faccio, in qualche modo devo farlo
riavvio e ho intenzione di spiegare perché io
precedentemente spiegato che quando lo fai
qualcosa che l’ha costruito quando tu
ricostruire i tuoi strumenti di sviluppo del progetto è
riavvio dell’applique
nel contesto ecc, ma così facendo non lo è
riavviare il tutto perché è
creando due diversi caricatori di classe a
l’inizio della tua applicazione
per la tua app tutto ciò che riguarda il
app e uno per il contenitore reale e
tutte le librerie che vuoi dire no
tutto ciò che non è il tuo codice
fondamentalmente tutte le dipendenze
tutto ciò che hai nel palmo della mano
è proprio lì in quell’ordine di classe
che il primo e il secondo
ovunque tu stia cambiando qualcosa
il tuo codice è il caricatore di ordini di classe
questo è stato buttato fuori e abbiamo iniziato
quando sai quando stai facendo
qualcosa per ritirare il tuo progetto così
è per questo che quando aggiungi qualcosa
o eliminando qualcosa dal tuo
dipendenze in cui devi farlo
riavvia il tuo progetto che è l’unico
limitazione ma è lo stesso
limitazione un modo molto efficace per
riavviare a destra molto rapidamente senza
buttare tutto in modo che va bene che abbiamo
ottenuto quello che trova la biblioteca di posti di lavoro e
quella biblioteca ci permetterà di fare
qualcosa di interessante con quelli con
quelle risorse così invece di avere
quelli che vogliamo assolutamente ottenere
risorse senza specifica specifica
la versione così qui quello che faremo è
creare un customizer specifico perché
siamo qui stava usando stiamo usando
baffi come motore di template che dovresti
sappi che con altri tempi di gioco
lamentarsi dei motori che è quella caratteristica
gestito direttamente senza necessità di
qualsiasi cosa specifica che ti mostrerò
che puoi ancora agganciarlo così qui
Creerò un customizer dei baffi così
qualcosa che qualcosa che si agganci
in ganci nei baffi
il motore dei modelli e dà il
possibilità all’interno del motore di aggiungere a
nuovo URL una parola chiave che mondo chiave URL
riscriverà gli URL per il
risorse così perché lo abbiamo fatto
ha ottenuto la nuova parola chiave nel nostro template
motore e così allora e solo allora possiamo
abbi cura di questo così invece di scrivere
tutto questo
potremmo riscrivere tutti i link e
avere questo così come si confronta, invece di
avendo prelevato bootstrap la versione
ecc Sto cancellando la versione e lo sono
solo chiamando il mio url QR che ho appena
creato e facendo così e ricostruendo
vedremo che sta ancora ricaricando o
non perché ho riavviato il server i
non so se è ancora agganciato
inizia a fare la cosa giusta
quindi la cosa non sta caricando il loro
risorse nella nostra applicazione perché io
non so perché cacchio
qualche idea
sì forse non ho riavviato correttamente
quando ho aggiunto la dipendenza correttamente
così va bene se lo guardi ora se
si guarda il il codice sorgente allora
vedi che le versioni sono qui ma
nel mio modello imparano il loro non così
questo è un modo di affrontare
risorse statiche e in modo va bene che di
a che quelli sono i primi passi per a
applicazione web regolare con la statica
risorse con quali vasi, per esempio
abbiamo visto come gestire con il modo di
gestire le cose con devtools come farlo
cambia il modo in cui sviluppiamo il tuo
applicazione la nostra applicazione web e ma
possiamo fare molte molte altre cose in realtà
qui ho intenzione di passare ad un altro tipo
di applicazione quindi la stessa applicazione ma
invece questa applicazione sarà basata
su angularjs e vedrai reset
okay ho resettato tutto ciò che ho
cambiato le dipendenze di conseguenza
ecco un esempio di un diverso tipo di
per prima cosa lascia che te lo mostri
funziona ancora così con 125 release 130
rilascia lo stesso qui, quindi qui cambi vedi
il browser non sta ricaricando il
pagina stiamo andando a prendere qualcosa con aa
un’API con una API REST e lo siamo
rendendo il tutto con il
motore angolare di templating così il
la differenza che voglio mostrare qui è quella
ok è diverso è un it’s a
applicazione a singola pagina ma c’è anche
un modo diverso di strutturare il
applicazione che possiamo vedere qui abbiamo ancora
avere il nostro modulo web con la stessa cosa
controller ecc. ma questa volta quelli
controller invece di restituire visualizzazioni
stanno tornando inseguendo qui e noi
non abbiamo un solo modello
qui e quel modello è e vedremo
in quel modello abbiamo un abbiamo
vediamo che abbiamo ottenuto il nostro
viste angolari e stiamo ricevendo un sacco di
risorse con jquery angolare ecc
tutte quelle tutte quelle risorse e tutto
quelle tutte quelle cose che sono in realtà
situato in un modulo separato in un client
modulo così in precedenza quello che avevamo eravamo
ottenere quelle dipendenze era quella rete
dipendenze di jar che come jQuery e
bootstrap li stiamo prendendo da parte di Maven
e qui quello è in realtà ciò che siamo
andando a fare, ma per il nostro codice invece
di mettere tutto in SRC molti
risorse nel nostro modulo web che avremo
un modulo separato per questo motivo, quindi
che se hai costruito una singola pagina
applicazioni che ti urlano spesso notato
che hai anche il tuo codice ok
librerie di terze parti come il modulo che sei
importazione e forse test e forse il tuo
proprio sistema di moduli o la propria build
usando grugnito o sorso o altro
quindi se aggiungi tutto questo al tuo web
applicazione che è molto artigianale
non vuoi che tu voglia solo il reale
uscita della build e tu vuoi
Fallo come parte della tua rete
applicazione quindi è quello che stiamo facendo
in realtà abbiamo un modulo client con
qui puoi vedere la fiducia di Bauer così
le librerie di terze parti che stiamo usando ci sono
usando Bower e stiamo usando NPM per
effettivamente costruito sul nostro progetto che abbiamo
a package.json stiamo dicendo che abbiamo noi
ho bisogno di Bauer ecc. e qui in SRC ce l’abbiamo
le nostre fonti quindi abbiamo il nostro
JavaScript e il nostro CSS così è dove
la nostra applicazione client vive e
ogni volta che lo costruiamo ogni volta che costruiamo
questo in realtà siamo in realtà
chiamare ovunque lo stiamo costruendo
modulo stiamo chiamando nota in npm siamo
installando quelli come parte di un esperto
plugin e lo chiameremo come parte di
la nostra costruzione di esperti stiamo costruendo il nostro
intero o proprio cliente e poi siamo
creando un barattolo come un barattolo di vetro e
quel barattolo sarà preso come a
dipendenza dal nostro modulo web quindi qui
dove possiamo vedere stiamo chiamando nodo e
NPM e stiamo raggruppando tutto
in un vaso su quelle risorse e e se
guardiamo nell’altro modulo il web
modulo vedrai che qui sarà
ottenendo il primaverile
Spring Boot Client Module quindi il client
modulo è stiamo ottenendo che come un
dipendenza ma quando la guardi così
due moduli separati è buono
perché abbiamo i nostri test e tutto il resto
abbiamo bisogno del nostro cliente in separato
modulo non stiamo mescolando le cose ma è
un po ‘diverso dal solito layout
layout del progetto e che rompe molto
le solite cose che potresti dire ma è così
in realtà è abbastanza facile farlo funzionare così
una volta che hai preparato il barattolo in questo modo
potresti pensare che il tutto
l’esperienza dei devtools che ti ho mostrato
fino ad ora è completamente rotto, ma tu
può effettivamente aggirare questo e quello è
uno dei grandi punti di forza di devtools
quindi se andiamo all’applicazione
proprietà in questo momento abbiamo visto solo a
un paio di cose che abbiamo aggiunto in te
nei passaggi precedenti ma in questo momento lo faremo
aggiungi un’applicazione specifica ma la proprietà
per l’ambiente dev così ogni volta che tu
suffix i file delle proprietà dell’applicazione
con con un qualcosa che è una chiave
che ci sarà l’ambiente così
ogni volta che eseguiamo la nostra applicazione in dev
modalità con un profilo di def in realtà siamo
applicando quel file di proprietà e con
strumenti di sviluppo possiamo collegarci e possiamo farlo
aggiungi alcune proprietà come questa, così possiamo
Diciamo prima di voler servire in modo specifico
posizioni quindi tutto ciò che è acceso
tag classpath ma anche file che sono
situato direttamente negli altri moduli
sul disco così ci riferiamo alla la
modulo accanto a noi, quindi è solo in
durante la fase di sviluppo che stiamo servendo
direttamente le risorse dal modulo
dalla cartella successiva invece di un vaso noi
non è necessario ricostruire l’intero barattolo
ogni volta quindi primo passo e poi per
strumenti di sviluppo per capire cosa sta succedendo
stiamo dicendo agli strumenti di sviluppo che dovrebbe
prenditi cura di questi percorsi aggiuntivi così
gli strumenti dev dovrebbero guardare quei percorsi
con un osservatore di file e ogni volta
qualcosa cambia dovrebbe esserci collegato
e con la ricarica live aggiorna il tuo
browser ecc in modo tale che quelli siano il
proprietà che abbiamo impostato quindi non è molto
e con un qualche tipo di layout esotico
lo stiamo inventando può ancora funzionare così
diamo un’occhiata a questo così è già
ho iniziato a farmi rinfrescare facendo progetto così
okay abbiamo ancora quell’applicazione
ho ancora quel setup che ho ancora con
tutto e ciò che possiamo vedere adesso
ogni volta che lo chiamo c’è un
c’è un ritardo giusto perché noi
stavano facendo una chiamata di riposo al nostro server
e arrendersi sui clienti
quindi possiamo
e vedere se abbiamo ancora lo stesso
esperienza con i devtools così per
questo andiamo al nostro nuovo modello così
all’interno del nostro nuovo modello abbiamo ancora
il nostro modulo con la versione da a
versione e ora abbiamo il nostro o pulsante
abbiamo il pulsante di confronto quindi ora cosa
possiamo fare è possiamo ad esempio cambiare
il pulsante possiamo cambiare il pulsante e
aggiungi un po ‘di logo in esso, ecco cosa
lo faremo ogni volta che lo faremo
chiamando questo ora abbiamo mostrato quel logo
e perché non è super divertente allora
possiamo aggiungere possiamo modellarlo in modo che possiamo ancora
in modo che il passaggio precedente fosse in a
modello nella nostra applicazione Web e ora
ciò significa che il file CSS è nel nostro
modulo client così diverso modulo così
qui vedremo se tutto funziona ancora
quindi qui aggiungo alcune regole CSS
per cambiare lo stile così ogni volta che sono
Sto facendo clic su di esso ora che il CSS
si applica quindi sto modificando il file
direttamente su disco ho ancora il resto
istantaneamente nella mia domanda nel
altro modulo o nei miei uomini quando il web principale
modulo va bene così ora abbiamo visto che
con un diverso tipo di applicazione
layout diverso qualcosa che penso
è più adatto per una singola pagina
applicazioni con un cliente separato
modulo con con un edificio stesso noi
può ancora avere lo stesso tipo di vita
Ciclo e esperienza nello sviluppo di una rete
applicazione così come hai visto stare con
quadro boudoir ci sono molte novità
caratteristiche che ti aiutano a scrivere quelle
trono rispetto alle applicazioni pesanti come
gestisci quelle risorse statiche nel tuo
modelli come servire le risorse statiche
per da varie posizioni ecc. e non
solo questo ma anche il ciclo di vita principale
l’esperienza di sviluppo che abbiamo e
quello che possiamo anche fare è mostrarlo
le cose quindi qualunque sia la tua
applicazione su cui stai lavorando
applicazione che spesso si desidera anche a
ottimizzare l’esperienza e il web
le prestazioni che i tuoi utenti avranno così se
si guarda la scheda di rete qui per
esempio quindi ecco una cosa qui è se
guardi in questo che stiamo chiamando
la nostra API è l’API dove siamo
chiamando e stiamo ottenendo i dati
per rappresentare l’intera tabella delle cose
quindi il diff tra quei due boot
versioni per tutte le chiavi di Kiara quindi se tu
guarda che in realtà è abbastanza grande
a sono quasi quattrocento kilobyte
solo per una chiamata, quindi possiamo
potrebbe sicuramente cambiarlo e possiamo
migliorare quello per migliorare che possiamo
sfruttare molte diverse funzionalità di
Buddha e quadro e ti mostrerò
quindi la prima cosa che possiamo fare è in questo
il documento inviava molte cose
comprese le cose di cui non abbiamo davvero bisogno
rendering sul front-end in modo che era quando
era quando il templating era finito
server non ci importava davvero di poterlo fare
invia l’intera cosa al template
motore e stiamo rendendo quello che siamo
bisogno ma per il cliente se lo siamo
sterilizzare il tutto al
cliente allora è un grosso carico utile e
questo è un problema, quindi se lo vogliamo
cambia che possiamo selezionare il giusto
parti del carico utile che vogliamo vogliamo
per vedere e per questo stiamo inviando questo
al cliente ogni volta che dal nostro
controller guardiamo il nostro controller
quindi ogni volta che chiami l’API dei dati
stai ricevendo questo oggetto
configurazione div e quella configurazione
diff è quella classe e quella classe ha
un sacco di cose in esso così ci sono
c’è una versione in, ma poi la
elenco delle differenze se si guardano a quelle
quindi scarica le nostre didascalie e proprietà
tipi di proprietà e se li guardi
ci sono molte altre cose ecc. ecc
un sacco di metadati là fuori così
questo è un aspetto che lo trasforma in un grande documento
e hai visto spruzzato qui dentro
sono dentro a quel modello con l’aggiunta
jason visualizza annotazioni e viste di Jason
annotazioni hai familiarità con Jason
viste viste di Jason è una funzionalità in
Jackson, la libreria JSON, così puoi
annota il tuo modello di Jackson tuo
modello con quelli e questo è un modo per
personalizzare il tipo di output che otterrai
dalla serializzazione a seconda del
contesto così qui che abbiamo detto che vogliamo
questo per essere serializzato solo quando sono
usando quella particolare visione e lo faremo
vedere come funziona così nel controller se
Se sono ancora sul controller, posso farlo
Dite bene, in quel caso non voglio il
tutta la cosa voglio solo selezionare cosa
Ho contrassegnato come campo una vista quindi se
Sto aggiungendo l’annotazione della vista chasm e
e poi ho bisogno di usarlo
vista particolare di abbiamo visto così qui
con la classe di riepilogo vista D quindi qui se
Sto dicendo che voglio solo usare quella vista
e poi mi sto rinfrescando ogni volta che sono
chiamandolo con quell’API qui
siamo passati da 400 a 246 perché abbiamo
cancellato un sacco di cose così qui sul
vola quando serializzi l’oggetto che siamo
applicando tale visione specifica a ciò
oggetto e siamo così io serializzare solo
quello di cui abbiamo bisogno solo un passaggio da 400 a
22 5246 quindi il prossimo passo sarebbe per
esempio quando guardi questo puoi
guarda le intestazioni di risposta e non lo è
anche compresso come abbiamo completamente dimenticato
abilitare la compressione e solitamente quando
fai così devi armeggiare con il tuo
con il tuo contenitore devi cambiare
la configurazione del tuo contenitore è stata impostata molto
di cose ecc. ma qui stiamo usando un
contenitore incorporato e possiamo anche fare
più facilmente usando le cose
abbiamo descritto fino ad ora così
se andiamo alle nostre proprietà dell’applicazione
qui possiamo usare la compressione e lì
sono alcune chiavi quindi se si digita
compressione puoi vedere che c’è un
la compressione del server ha abilitato i tipi di mine
è una dimensione di risposta mini che sono quelli
tutte le cose che possiamo cambiare qui così io
preparato qualcosa così qui siamo abilitati
abbiamo abilitato la compressione e lo siamo
vogliamo comprimere tutto Jason
testo CSS e JavaScript e noi vogliamo noi
non voglio comprimere tutto ciò che è
sotto 2k perché non è davvero pensare
che in questo caso non è davvero utile
così stessa cosa rinfrescante rinfrescante
tutto e ora abbiamo il
content encoding gzip quindi siamo davvero G
zippando quella risposta e ora siamo giù
a 20k sostanzialmente da 400 al
all’inizio è fantastico , ora siamo
ora stiamo mettendo meno di quello che siamo adesso
comprimendo al volo e ora ci sono
ancora più cose che possiamo fare usando
le ultime caratteristiche del framework per
esempio qual è la cosa migliore in aggiunta
inviando di più al tuo cliente che sta inviando
niente e quando vuoi inviare
nulla riguarda il caching HTTP così uguale
cosa caching HTTP puoi fare a
sacco di cose in primavera tarda primavera
versioni più recenti ci sono molti modi per
affrontare questo ci sono trasversali
modi per la tua intera applicazione per tutti
risorse statiche per esempio ma nel nostro
caso vogliamo dirti qualcosa
davvero per la nostra API qui così per
esempio quando stai chiedendo il
differenza tra la versione 1 2 5 e 1
30 sappiamo che una volta sono quelli
le versioni sono fuori non stiamo cambiando
qualunque cosa una volta che la diversione viene rilasciata
non stiamo andando su Maven Central e
modificando gli swiping di artefatti a scorrimento a destra
così quando lo fai, il diff è bello
molto incastonato nella pietra quindi potremmo sicuramente
usa quella leva e dicci ok
diff è lo stesso una volta per tutte e
tutti i nuovi client htp dei clienti che puoi incassare
e per farlo lo faremo sicuramente
sfruttare il
l’ intestazione HTTP e-tag così l’ e-tag
st-pierre è un modo per mettere un tag su un
risposta e dicendo questo per quello
richiedere la risposta è questo e il
e-tag izzy è l’identificativo e
ogni volta che il cliente ha quella risposta in
in contanti si può chiedere se la risposta
va ancora bene con quell’attacco, così noi
bisogno di venire con alcuni identificatori
qualcosa che rappresenta la risposta
qualunque cosa accada, quello che potremmo fare è usare
le due versioni le due chiavi a destra
il da e due versioni concatenate
quelli e quello che potrebbe funzionare come una chiave
questo è ciò che faremo che siamo
creando un verrà creato un nuovo tag con
quelle chiavi quindi creeremo un e-tag
usando le due delle due versioni così
otterremo la stringa dalla versione e
stringa alla versione o lascia solo ottenere
lascia che facciano la richiesta a tutti
insieme in un colpo e poi possiamo
crea un nuovo tag con questo si unirà
poi con un hash e poi otterremo il
da e poi le due versioni e
concatenare il concatenato
concatenando entrambi dovrebbe creare un
in qualche modo un etag decente ora abbiamo bisogno di
sfruttare anche quello nella nostra risposta
e per farlo puoi invece di
rimandare una configurazione regalo che
l’oggetto che desideri direttamente
serializzare è possibile inviare una risposta
entità di quell’oggetto e in quel modo voi
può inviare quell’oggetto che ancora
personalizzare la risposta in qualsiasi modo
voglio così qui quello che possiamo fare è restituire a
entità di risposta e vogliamo impostare un noi
voglio dire che va bene lo vogliamo
aggiungi un nuovo tag e possiamo creare
papà taggato con le richieste di diff allora
possiamo anche aggiungere denaro
controllo su di esso, quindi voglio voglio
Dì ai miei clienti che dovrebbero incassare
controllare questo che dovrebbe prenderlo
risposta per un giorno, ad esempio o
potremmo anche andare con un anno
una volta che ho finito sto andando bene e capito
corpo qui e cambiando questo dovrebbe
sicuramente aggiungere qualcosa di nuovo tour ok
qui così alla nostra risposta ora abbiamo un
e-tag dicendo che questo è l’e-tag e noi
anche avere la direttiva sul controllo di cassa a
la nostra risposta così qui ho disabilitato il mio
in contanti ma se non lo faccio e irie
Confrontiamo qui stiamo andando a vedere che
sta ottenendo ora la risposta dal denaro
quindi non sta richiedendo il server
più perché abbiamo l’e-tag noi
avere il controllo del contante, quindi non lo siamo
anche chiedere al server di farlo
più così tutto bene così ora abbiamo
abbiamo fatto un sacco di cose con il caching
e compressione in cima penso che siamo ancora
avere pochi minuti non 5-10 minuti
forse cinque così hai te?
domande in questo momento o posso andare un po ‘
ulteriormente modificando la build del client
domande o no
okay, questa è una domanda di solito
avere come ottenere devtools ma ancora
escludere gli strumenti di sviluppo dalla build
e non ce l’ha in produzione, quindi è così
fatto automaticamente per te intendo se tu
quello che potrei non aver fatto correttamente
la mia app è quando ne hai bisogno ogni volta
importate gli strumenti di sviluppo che dovreste usare
opzionale prima e anche quando lo fai
nella tua applicazione gli strumenti di sviluppo no
in realtà è abilitato solo se
la tua applicazione è stata lanciata in tale
in tal modo con direttamente con Maven
o nel tuo ID ma ogni volta che lo è
lanciato come un vaso eseguibile non lo è
attivato in modo che tu possa ancora spedirlo se
vuoi ma non sarà attivato da
predefinito o ci sono anche altri modi
nella tua build per escludere gli strumenti di sviluppo
ogni volta che crei l’applicazione
con il plug-in maven di avvio primavera così
puoi dire che non vuoi aggiungere
tutto ciò che dipendenza per la produzione
bene quindi un’ultima cosa che posso mostrare
allora è un andare anche oltre con il
costruisci così con il cliente ciò che posso fare
in realtà ora abbiamo le nostre risorse
nel nostro modulo client, ma potremmo
sicuramente totalmente costruito un ottimizzato
versione del nostro di quella applicazione a
anche andare oltre, come ottimizzare il CSS
e JavaScript e ancora venire con a
qualcosa con il barattolo qualcosa
può essere consumato ma ottimizzato per
produzione e invece di farlo
il lato server e giocoleria con le cose
nella tua applicazione web e mixaggio
preoccupazioni che puoi sicuramente sfruttare
quel client del modulo separato separato
modulo e fai quello che vuoi in esso
e questo è quello che faremo
anche andando ad usare strumenti nativi che
non sono realmente correlati a Java e in questo modo
puoi fare qualsiasi cosa tu voglia fare
per prima cosa possiamo aggiungere più dipendenze
qui così di default abbiamo il potere
grande ma malvagio, ma potremmo usare il gulp così
stiamo scegliendo gulp come un conto alla gola
un po ‘come Gradle in JavaScript
mondo se tu se lo conosci e qui
stiamo aggiungendo il doppio strumento e lo siamo
aggiungere cose qui per ottimizzare il CSS
e ottimizzare il JavaScript una volta che abbiamo
abbiamo aggiunto quelle dipendenze che possiamo
usa quelli e crea una build reale
file per la nostra applicazione client così sono
creando un file di fatturazione che per inghiottire quale
si chiama gulp file che Jas e qui
puoi scrivere quel file gulp così siamo
fondamentalmente ottenendo le dipendenze
abbiamo aggiunto in precedenza che stiamo descrivendo
il progetto 22 alla costruzione e siamo
aggiungendo compiti così come noi siamo
dicendo va bene, qui devi prendere tutto
File CSS e ottimizzarli al volo
e scrivi quelli in un particolare percorso in
nostro nella nostra directory dist target e
stessa cosa per ottimizzare javascript
tutto al volo e scrivere che
nei dischi di destinazione così ogni volta che siamo
costruendo l’applicazione che stiamo lanciando
tutti questi compiti e stiamo ottimizzando
le nostre risorse ma per unire il
tutta la cosa per legare tutto ciò che noi
può usare il nostro pedone nel nostro cliente e
cambia alcune cose così adesso
ogni volta che stiamo lanciando il conto siamo
installando in pm se non lo è già
lì installando risorse di terze parti
con il potere e ora abbiamo bisogno di aggiungere un
un’altra esecuzione che non conosco
se ho tutto pronto o no no
non pensarlo quindi ne aggiungo un altro
esecuzione qui che è gulp build e
Sto aggiungendo i loro obiettivi e l’obiettivo qui
è un gulp
quindi stiamo lanciando gulp ogni volta che siamo
costruendo la nostra applicazione come parte di
mavin dove abbiamo un terzo terzo
obiettivo di esecuzione qui così ora quando lo facciamo
che costruiremo tutti quelli ottimizzati
risorse nella nostra directory dist così ora
abbiamo bisogno di ottenere quelle risorse, invece
di prendere tutto ciò che abbiamo in noi
bisogno di avere bisogno di andare a bersaglio e
dist e prendere tutto da esso e ottenere
quelle risorse e impacchettale quindi andiamo
dai un’occhiata a questo se vado nel nostro
client se io è un’applicazione di packager
quindi ogni volta che lo facciamo possiamo vederlo
sta lanciando un nodo e PM il tutto
cosa un sorso quindi c’è il nostro obiettivo costruire
il suo essere è stato il mini volo o j
File SN e javascript ecc. Significato
se torniamo alla nostra per la nostra applicazione
e questa volta stiamo lanciando il
l’applicazione farà in modo che il
applicazione è fatto come questo diritto
quindi non sono sicuro di aver fatto il tutto
giusto sì bene così qui invece di
avendo il nostro file CSS dot principale che è
grande non ottimizzato ecc. Ho qualcosa
che è ottimizzato per la mia domanda di
produzione e se mai tornare indietro il mio
profilo per def profilo quindi posso ancora
servire le risorse derivate lì
direttamente nel mio modulo client per il
esperienza di sviluppo con il
tutto ciò di cui hai bisogno per il tempo di sviluppo
quindi è un modo per avere entrambe le esperienze
e ho ancora un buon sviluppo
ciclo con un’applicazione reale tutto bene
Penso di aver finito, non dico di chiederlo
domande su tutto
funzionalità web Penso che abbiamo visto devtools
se stesso ecc. come vogliamo
come gestiamo i tag per statico
risorse sì sì forse abbiamo come a
minuto ci sono molte altre cose come
bene che puoi fare e ce ne sono molte
di cose che non ho avuto il tempo di mostrarti
ma c’è anche la catena delle risorse
fa parte del framework e questo è
sfruttare in primavera lo stivale e in quel modo voi
posso anche fare questo, per esempio
per abilitarlo e puoi ad esempio a
il giorno potrebbe mostrarti vero, penso che lo farò
lavorare direttamente
o no
no, non è signore da qui, mmm si
non sono sicuro che sia giusto per soldi
abilitato oh intendevi signore, va bene così
l’ altro così ogni volta che vuoi
portare denaro in una catena di risorse no
un’altra risorsa per il periodo in contanti
periodo di cassa che uno così per esempio se
vuoi farlo per esempio denaro contante
risorse per un’ora per le tue risorse
puoi ancora avere questo per esempio a
BJS e se guardi le intestazioni è
in nessun negozio in questo momento perché sono in sviluppo
modalità, ma se sto passando alla produzione
quindi mostrerà il controllo di cassa della cache
controllo che ho inserito in loro
va bene
come fai a cambiare questi profili così con
gli stivali sussurranti in dentro qui dentro
Il mio profilo di commutazione ID è circa
aggiungendo la modifica della mia configurazione di esecuzione e
aggiungere o eliminare un profilo qui / dev
o produzione o qualcosa di simile così
è qui e fa scattare un profilo
sta attivando tutto il profilo di aggiunta
fagioli nella tua applicazione regolarmente
giusto ma sta anche sfruttando il
applicazione che proprietà o
profilo del trattino dell’applicazione Proprietà Doug
quindi è possibile perché ho un
soprattutto le proprietà di applicazione
per lo sviluppo e in piena produzione è possibile
puoi avviare la tua applicazione con
con le bandiere e definendo ciò che sanno
quale profilo deve essere attivato in
produzione quando stai correndo
Interazione scusa come te
sì, ci sono molte cose in realtà
con le proprietà in boot c’è come a
elenco di 10 modi ish per risolvere a
proprietà va da un valore reale
nel tuo file di proprietà dal
ambiente dall’ambiente o estraneo
variabile d’ ambiente quando sei
lanciando il tuo o anche una linea comune
variabile quindi ci sono molti modi per impostare a
proprietà e quando stai lanciando il tuo
applicazione per esempio con un
barattolo eseguibile puoi dirlo
dovrebbe caricare quel file di proprietà da
quel posto dal file system e
ha funzionato tutte le parole anche sì, era tutto
il tempo che ci rimane per le domande
adesso se ne hai ancora
domande non esitate a venire a
il palco e discuto alcune cose
Inoltre, non dimenticare di votare e per favore
unisciti a noi in 20 minuti per il discorso di Josh
la nuvola di primavera
[Applausi]
Please follow and like us: