buon lunedì mattina oggi vado a
dai un’occhiata ai linguaggi di template come
manubrio o il linguaggio dei modelli
che è incorporato nella vista, ad esempio e
Vado a confrontare i modelli
lingue a un allenatore Jaso nativo dove
Eri JavaScript ha il ruolo di
il linguaggio dei template questo è il
approccio che reagisce usa ad esempio
quando stai sostenendo l’uso di a
il linguaggio dei modelli ne cita spesso due
principali vantaggi che le lingue dei modelli
sono espressivo e dichiarativo che sto andando
per parlare di quei benefici, ma io sono
anche andando a parlare di tre costi
che viene con l’uso di template
linguaggi di template lingue aggiungono
complessità al tuo stack aggiungono a
costo sociale e ne risultano molti
sbavando è quello che stiamo andando
parliamo di oggi sono mpj e tu sei
guardare il divertimento su una funzione se guardiamo
indietro nel tempo dice maschio 5 anni fa circa
il modo standard di rendering del settore
Dom doveva usare un linguaggio di template per
incollare la tua logica di business con
tuo Dom allora un paio di anni fa che faccio
ti ricordi quanti anni ha reagito è come tre
quattro anni in ogni caso reagisce arrivato sul
scena e lo ha eliminato con il template
le lingue invece usavano solo native
JavaScript nel ruolo
le lingue dei modelli avevano prima di me
voglio essere chiaro qui che non lo siamo
interessato a JSX o al Dom virtuale
questo video ora JSX
è uno strato sottile sopra il nativo
javascript nativo che reagisce usa e
non ci interessa davvero
siamo preoccupati del fatto che lo sia
è ancora javascript nativo
sotto quello strato molto molto sottile non lo è
consequenziale e anche sotto
reiax non genera tecnicamente reale
doumitt genera una dominante virtuale
pezzi che a noi non piacciono davvero
preoccupato di questo in questo video
quello di cui stiamo parlando qui è come
il puro linguaggio templativo personalizzato e
lo confrontiamo con il nativo Jas
l’equivalente j nativa come un professionista legami
sta guadagnando molta trazione negli ultimi tempi
anni ma lingue dei modelli che abbiamo
li ho usati per molto tempo e molto
gli sviluppatori non sono convinti che il
nativo Jas è un passo avanti in
questo video parlerò un po ‘
un po ‘per il costo e i benefici di
lingue di modelli e ti danno come a
senso di pensare dietro il nativo JX
usi e perché si sono allontanati da
lingue di template e perché molte
la gente lo fa espressivo dove il modello
le lingue sono molto espressive perché
a differenza di JavaScript che è a
linguaggio di programmazione generico
le lingue dei modelli sono progettate per fare
solo una cosa e questo è rendere
Linguaggi di template dichiarativi HTML
sono progettati per incoraggiare dichiarativo
interfacce tra l’altro se non sei sicuro
che programmazione dichiarativa sei tu
potrebbe voler controllare questo video
Ho fatto io e questo video sta per fare
abbiamo molto più senso per tutte le tecnologie
alcuni vantaggi e tutte le tecnologie ha
alcuni costano la prima causa del modello
le lingue sono complesse perché tu sei
semplicemente aggiungendo un linguaggio interamente a
la tua tecnologia impila il secondo costo
costo sociale a chiunque lavori nel tuo
codebase ora deve imparare questo poco
lingua extra oltre a JavaScript
e il terzo costo è un sacco di strumenti se
stai usando un linguaggio di template
stai buttando via tutto il potere di
JavaScript non solo il linguaggio stesso
ma anche l’ecosistema molto
librerie scritte in esso e tutto il
strumenti e limitatori, editori e ID
quelli sono i costi e i benefici che sono
parlerò di oggi e bene
immergiamoci in ognuno di essi
le lingue di templating di espressività sono
molto molto
pressivo perché sono diversi
JavaScript sono progettati per fare solo
una cosa e questo è Express the
il rendering di modelli HTML sono
essenzialmente un linguaggio specifico del dominio
e loro altre cose è come loro
nella stessa categoria di sequel o di te
conoscere le espressioni regolari sono molto
linguaggi personalizzati progettati per esprimere a
cosa molto molto specifica in uno specifico
dominio da qui in avanti sto andando a
ti mostro un sacco di esempi che sto andando
per mostrare esempi di lingue di template
rispetto ad esempi equivalenti nel
scarafaggio JSF nativo
Sono intenzionalmente non sarò
usando qualsiasi vera tecnologia live qui come
reagire o visualizzare o manubri e il
la ragione per questo è che molti dei
punti che ho intenzione di provare a fare o
legato alla familiarità e
comprensibilità e sarà solo
distorto se si ha familiarità con il
la sintassi della tecnologia già, ma è possibile
tutti pensiamo a questo esempio come
tipo di reagire senza JSX e tipo di
manubri e assumeremo
che entrambi hanno lo stesso rendering
tratti così simile a immaginare che entrambi
stanno rendendo un Dom virtuale e tutto il
le caratteristiche di rendering sono le stesse
perché quelli sei tu
dettagli di implementazione che non siamo
preoccupato di quello in questo video siamo
interessato alla forma generale di a
lingua dei modelli rispetto a un j / s nativo
approccio tutto a posto stiamo andando ora
guardare il codice del template
lingua e ricorda che siamo ora
per ora guardando questo da un
punto di vista espressivo che sto andando a
sii silenzioso per 15 secondi per permetterti di farlo
guarda questo esempio prova a capire
cosa fa
tu
va bene così andiamo attraverso di essa la
modello ha questo dim è chiamato il
i prezzi container e questo a sua volta
contiene questa lista non ordinata con alcuni
alcuni elementi qui noti che mostra solo
la lista se ha alcuni elementi nel
elenca altrimenti mostrerà un paragrafo
qui dove sono stati trovati i nuovi elementi fiscali
all’interno di ogni oggetto
mostra il prezzo e lo esegue anche
attraverso una sorta di valuta del formato
trasformazione sai che questo è probabilmente
sì per convertire questo da qualsiasi cosa
è probabilmente una bella valuta
stringa vorrei disegnare il tuo
attenzione a una cosa in questo esempio
e questo è il fatto che tu potresti
probabilmente guardando solo questa figura
fuori quello che ha fatto anche se questo è il
lingua che non esiste sei
non ne hai familiarità in anticipo
anche se non eri nemmeno a conoscenza
il concetto temporaneo delle lingue dei modelli
questo probabilmente avrebbe ancora senso
non cerca di essere uno scopo generale
linguaggio come Java Script e let consente
di buttare via un sacco di potenza e
un sacco di funzioni per ottenere questo
leggibilità ed espressività per questo
rendering HTML di casi molto specifici e
ora vedremo un altro
esempio che fa esattamente la stessa cosa
ma lo fa usando un JSA nativo e
che assomiglia a questo ho intenzione di essere
silenzioso di nuovo per 15 secondi e lasciati
su cercare di capirlo
tu
va bene, passiamo a questo
questo è il rendering dei prezzi che lo contengono
ritorna me e tu hai fatto e questo ha il
Contenitore della lista di classi CSS e questo è un
ottimo esempio di come un template
il linguaggio è estremamente espressivo perché
qui con JavaScript dobbiamo usare
nome della classe perché javascript non lo è
progettato solo per questo è un
linguaggio di programmazione generico così
ha il concetto di una clausola è quello è
un’altra cosa JavaScript quindi questo è il
parola riservata che non possiamo usare in questo
contesto quindi dobbiamo usare la proprietà
nome della classe invece di fare questo lavoro
all’interno del div e se gli oggetti
array ha una lunghezza che restituirà un ul
lista non ordinata e quella lista non ordinata
dentro di sé ha una lista di liste
articoli solo Maps nell’elenco
articoli e restituisce una voce di elenco per
tutti come si come modello
esempi che formatta la valuta prima
mettendolo nel Li e se oggetto
la lunghezza del libro è falsa e0 tornerà
questo paragrafo con testo nuova luce e
suono così tutto ciò è solo JavaScript
non ci sono lingue speciali
le aggiunte che abbiamo fatto qui sono solo
JavaScript puro questo aspetto molto meno
come HTML rispetto all’esempio di modello anche
anche se è JavaScript che siamo
familiarità con esso si sente ancora un po ‘
un po ‘alieno e contorto perché abbiamo
per fare una sorta di simulazione del rendering HTML
nelle nostre mani dobbiamo spendere un po ‘
un po ‘più di intelligenza per capire come
che cosa HTML questo si traduce qui è un
un po ‘più come abbiamo chiesto di rimuovere questi
dalle nostre teste e poi
avere l’HTML rispettiamo il
elaborazione che dobbiamo fare nel nostro
la testa è leggermente leggermente meno ora io
direi che questo non è un enorme
differenza che potresti persino chiamare
questa è una piccola differenza questo è questo
assolutamente non chirurgia a razzo ma noi
Devo ancora darlo ai template
lingue qui che sono espressive
sono destinati a esprimere questa cosa
Rendering HTML e lo fanno meglio
che JavaScript nativamente si sposta
e parla di dichiarativo Ness se noi
guarda entrambi questi esempi molto
dettare chiaramente ciò che viene reso
nessuno di questi esempi è molto
preoccupato di come più specificamente
non c’è nessuna programmazione imperativa in corso
qui non ci sono variabili in essere
assegnato non c’è stato stato mutato
sta solo dichiarando quali sono le cose
entrambi questi esempi sono dichiarativi
al contrario di imperativo e cioè a
cosa molto buona perché il codice dichiarativo
è quasi sempre più facile ragionare
loro codice imperativo e ciò vale
particolarmente vero e quando si tratta di
rendering oltre ad essere
dichiarativo c’è anche molto poco
la logica in corso in loro sono molto
facile ragionare su non c’è molto
di roba questo è vero per entrambi gli esempi
ma la differenza chiave qui tra il
linguaggio dei templating e il j’f nativo
esempio è il linguaggio dei template
deve essere in questo modo non c’è modo di fare
programmazione imperativa nel template
lingua nell’esempio di JavaScript noi
potrebbe fare tutti i tipi di cose pazze
accesso alle variabili globali start
mantenere lo stato come ma nel
linguaggio dei modelli che non puoi fare
che tu sei non puoi creare variabili
e cose del genere e nel
linguaggio dei modelli lì semplicemente
non è un sacco di costruttore di linguaggio in
generale, quindi il tuo codice tende ad essere carino
molto minimale perché c’è sì
non molti programmi che puoi fare e
questo è di design questo è l’intento di
lingua dei modelli che definisce il linguaggio
o cercando di incoraggiare anche l’applicazione forzata
davvero una visione minimale e dichiarativa
le lingue dei modelli stanno cercando di
rimuovere l’abilità dal programmatore
fare cose imperative o elaborate
il nuovo mentre compro il tutto
espressività dire I
Io davvero non compro quando le persone parlano
sulle lingue dei modelli come
incoraggiando l’ ascia dichiarativa C ma mi sento
c’è un problema con quella linea di
ragionamento pensiamo a questo per a
minuto
hai questo problema il nostro abuso
contenere troppo imperativo e
logica elaborata ci sentiamo come dovrebbe
essere nella logica di business invece così
possiamo provare a risolvere questo introducendo
un intero piccolo linguaggio nel nostro stack
dove non puoi fare un imperativo
programmazione elaborata oh possiamo fermarti
facendo imperativo ed elaborato
programmazione nelle nostre opinioni si smettere di fare
semplicemente non mettere imperativo elaborato
logica nei tuoi punti di vista si fermi che è un
soluzione molto più semplice dell’introduzione
un intero piccolo linguaggio per il tuo strumento
catena in risposta a ciò che si potrebbe dire
quello ma per quanto riguarda il junior
sviluppatori che non hanno
pienamente colto il concetto di separazione
di preoccupazioni ma pensano di avere un
linguaggio di template potrebbe essere buono come
ruote di addestramento sorta di cose da tenere
loro dal fare danni al nostro progetto
ma io in realtà non acquistare tale argomento
perché hai ancora la capacità di
fai cose stupide quando si tratta di
separazione che hai appena spostato
piccolo strato lontano dal modello se
hai un membro del team che non lo fa
capire la separazione delle preoccupazioni no
quantità di garanzie tecniche o andare
per aiutarti è quello che devi fare
aiuta ed educa quella persona o sei tu
andando ad avere un grande
problema sulle tue mani quindi templating
le lingue sono costruite per incoraggiare
Nessun voto dichiarativo ma penso a
molto meno soluzione contorta è solo
scrivere codice semplice e dichiarativo in
JavaScript piuttosto che trascinare un
tutta una piccola lingua nel tuo stack
per impedirti di commettere l’errore
e questo ascolta il primo costo del
complessità dei linguaggi dei modelli n
importa come si taglia un modello
la lingua è un linguaggio di programmazione
è una cosa abbastanza complicata da fare
inserisci nel tuo progetto il tuo progetto come
intero è ora più complesso perché a
il linguaggio dei modelli non è davvero il
tipo di componente che rimuove un sacco di
complessità in modo da sacrificare alcuni
semplicità per ottenere il
lingua dei modelli ora dovrebbe essere
ha detto che questo è un valore personale
affermazione nel senso che io sono un
persona che apprezza molto la semplicità
alto come probabilmente probabilmente superiore a
la maggior parte delle persone che ho avuto una volta o due
feedback che dovrei accettare di più
la complessità nelle soluzioni ci sono
assolutamente sviluppatori a cui non importa
questa complessità in più lo sentono
aggiungendo una lingua di template al tuo
progetto che non è un grosso problema che non lo è
un grande componente che sentono è ben utilizzato
è popolare è gratuito è mantenuto
da una terza parte regolarmente qual è il
grosso problema ma non è così che lo vedo io
vederlo come un migliaio di piccoli tagli
tipo di cosa la mia filosofia è che il
più cose che si aggiungono a cose
il tuo progetto o qualsiasi altra cosa nella vita
più cose si aggiungono che possono andare
sbagliato più cose andranno storte quando
aggiungiamo un nuovo strumento alla nostra catena di strumenti
aggiungerà complessità e potrebbe essere
okay, devo davvero sottolineare che potrebbe
va bene come dobbiamo essere in grado di assorbire
un po ‘di complessità ovviamente perché noi
hai bisogno di sapere risolvere i problemi e loro
siamo
i problemi sono complessi e molto reali
abbiamo bisogno di strumenti e di cui abbiamo bisogno
assorbire una certa complessità ma il punto
Sto cercando di farlo è questo quando aggiungi
qualcosa che deve pagare per conto suo
la complessità costa così un linguaggio di template
potrebbe non essere il più grande costo di complessità
nel mondo ma i benefici che a
il linguaggio dei templating mi fa pensare
che sono molto piccoli e penso
che la complessità altera il rendimento
di investimento qui è un cattivo affare e
la complessità è solo uno dei costi di
dei linguaggi dei modelli c’è anche a
costo sociale ho parlato prima del
il fatto che un linguaggio dei modelli sia un
linguaggio specifico del dominio a dsl altro
le lingue in quella famiglia sono il sequel che
è usato per descrivere l’accesso ai dati e
espressioni regolari a cui è abituato
descrivere la corrispondenza del modello di stringa
sono la stessa famiglia ma c’è un
importante distinzione e questo è quanto
espressioni regolari e sequel o
relativamente standardizzato ma basato su modelli
lingue non sono come che ci sono
molti diversi quindi nuovi sviluppatori
entrare nel tuo progetto non sono molto
probabile conoscere quello particolare che
si utilizza in modo che stanno per avere
di trascorrere del tempo di apprendimento e
impariamo come lavorarci, andiamo
Ritornando all’esempio modello originale
ora come abbiamo concluso prima questo è molto
espressivo quindi è facile da capire
quello che fa è molto facile da leggere
e capirlo, ma non è così
significa che abbiamo capito il
linguaggio che sappiamo come leggerlo
non significa che sappiamo come scrivere
Diciamo che hai avuto il compito
che volevamo appesantire il prezzo
con zero se è inferiore a 10 let’s
Diciamo che abbiamo già la funzione
è il prezzo del pad con zeri o o
qualcosa del genere come lo otteniamo
qui potrei probabilmente capirlo
potrebbe essere qualcosa di simile e ma
Non so davvero come agire
otteniamo la funzione nel sistema I
bisogno di capire come registrarlo
funzione nel parser dei modelli e
probabilmente hai bisogno di fare un qualche tipo di
cosa plugin o qualcosa e questo è
solo perché siamo fortunati perché abbiamo
questo esempio qui piace se immaginiamo
che questa era solo la cosa e noi
non ho mai visto questa sintassi prima
e le lingue dei modelli sono un po ‘
subdolo in questo modo perché sono facili da fare
leggere si sentono accessibili ma questo
la sensazione scompare quando si inizia a provare
per scriverli poi ti rendi conto che loro
non sono così intuitivi come loro
prima pulisci e potresti dire oh cosa c’è
il grosso problema
gli sviluppatori che hai appena trovato i documenti lo trovano
google sviluppatori IT faccio tutto il
il tempo non è la tua chirurgia missilistica
sviluppatore, qual è il grosso problema, andiamo bene
dare un’occhiata allo stesso problema in
il nativo jsy brer ii e poiché questo è
sì javascript e conosciamo javascript noi
possiamo semplicemente aggiungere la funzione fatta a noi
non è necessario imparare alcun sistema di plug-in
includiamo semplicemente il file è solo
javascript normale di cui non avevamo bisogno
impara qualcosa che potremmo semplicemente fare il
cambia subito così sì non lo è
chirurgia a razzo per cercare alcuni cani e
aggiungere un po ‘plug-in, ma è un problema che
esiste solo a causa del modello
linguaggio che fa una libreria jeaious nativa
non hai questo problema non ce l’ hai
non lo fai lavorare un modello
la lingua ha un costo sociale più elevato di a
libreria nativa jace quindi quale modello
il linguaggio ha una complessità che costa un social
costano e vogliono parlare di un terzo
clausola e quella è la perdita di strumenti
javascript è una lingua molto matura
motori molto veloci e maturi e
molte incredibili ricchezze di biblioteche
editori maturi e io e molti
strumenti di analisi del codice quando vi sviluppate
un’altra lingua che fai
accesso a tutto ciò e tu sei
limitato a qualsiasi ecosistema è per
quel linguaggio specifico per esempio, facciamo
dare un’occhiata alla bacca nativa di jsr
esempio di nuovo posso incollare questo solo in
il mio editore e io abbiamo accesso a
tutto ciò che
campane fantasiose che ho per le mie
Codice dell’ambiente di sviluppo JavaScript
evidenziando il linting contestuale
roba autocompletata come quella intendo se io
cambiare qui si capisce subito che
c’è qualcosa che non va se faccio lo stesso
la cosa qui come non ha idea perché
è una stringa che potrebbe esserci naturalmente
plugin e roba per questo modello
linguaggio che puoi installare ma che hai
ora ho aggiunto una cosa in più per la tua
sviluppatori da installare e quella strumentazione
è anche molto improbabile che sia maturo come
i loro equivalenti JavaScript anche tu
perdere l’accesso alla potenza del linguaggio
le lingue del modello stesso sono limitate in
infatti questo è di progettazione come abbiamo parlato
prima che sia per impedirti di farlo
elabora le cose nel tuo rendering ma
ci sono cose che non sono possibili
fare nel linguaggio dei template, ma lo sono
ancora abbastanza semplice e minimalista
voglio avere là dentro diciamo per
istanza che volevamo non lo so
calcola il totale degli articoli Let’s
fare
in una lingua di template lo faresti
probabilmente non è permesso fare una somma
operazione se non si ha familiarità con
ridurre questo esempio è probabile che vada
renditi ciò che è questo se c’è un
l’episodio qui a riduci è molto semplice
è usato per sommare le cose spesso ma il
punto in un linguaggio di templatura interiore
probabilmente non ti è permesso fare una somma
operazione che è qualcosa che
è la filosofia di un modello
la lingua è relegare all’esterno
il modello è un po ‘ accademico
discussione se la somma di articoli è business
logica o logica di visione, lo penso
sicuramente può qualificarsi come logica di visualizzazione
altri potrebbero non essere d’accordo Non so cosa
pensi di commento, se siete d’accordo
quella somma degli articoli è quindi logica di visualizzazione
puoi vedere come un linguaggio template
rende la tua vita un po ‘più difficile
un’altra cosa che JavaScript ti dà
gratis è composizione per esempio
diciamo che ho avuto diversi tipi di
elementi che potrebbero essere nella lista così io
voglio davvero usare la vista elenco
contenitore per così dire ma voglio essere
in grado di spingere diversi tipi di oggetti
lì con diversi tipi di
i modelli danno un’occhiata a questo e provano a
prima avvolgere la testa intorno ad esso sulla vostra
proprio prima di spiegare come funziona
tu
va bene, diamo un’occhiata al
Esempio di elenco regolare è più o meno
la stessa funzione di prima ma noi
gli ho dato un nome generico e noi abbiamo
modificato per accettare un elemento di rendering
funzione qui rendiamo anche oggetto è ora
la cosa che va in questo modo
se ricordi che l’esempio deve
sembra come prima, ma ora abbiamo
rotto in questi e questi
variabili in modo al fine di creare un
funzione che è equivalente a ciò che noi
prima che usassimo il binding a Curry render
listino prezzi e cosa significa questo
chiamiamo bind su lista di rendering e chiamiamo
legare con render elemento di prezzo come un
argomento e che restituirà un nuovo
funzione da associare per rendere i prezzi
dove è stato corretto il rendering dell’elemento di prezzo
come il primo argomento di rendering è
è una specie di permanente che sono rimasto così render
listino prezzi è ora appena chiamato con
oggetti questo ora è stato corretto come
primo argomento se currying è un nuovo
concetto per te ho un episodio su questo
qui sì auto quindi non respingere questo come
strano perché non sai cosa
portare è perché portare è molto
cosa e dovresti imparare in modo da notare come
tutto questo è semplicemente il JavaScript
div ul e @ p cose qui che sono
lo stesso da prima, ma notalo
non esiste il concetto di un essere componente
presentato qui e funziona perché
stiamo facendo tutto semplicemente
funzioni semplici funzioni sono semplici e
componibile questa componibilità che noi
ottenere completamente gratis qui deve essere
reimplementato in un linguaggio di template
spesso sotto forma di componente
componenti o grande reazione li hanno
ma quando si lavora con reagire si può anche
uscire solo con utilizzando semplici render
funzione e questo è più bello perché lo è
sì molto più semplice e quelli erano i miei
pensieri in lingue template riassuntive
sono bravi a esprimere il rendering HTML
quella
cosa sono costruiti per modello
le lingue mirano a incoraggiare il minimalismo
e programmazione dichiarativa ma puoi farlo
fallo comunque in JavaScript il
viene aggiunto il costo delle lingue di template
impilare il costo sociale della complessità e molto
strumenti che hai appena visto un episodio
della funzione fun fun vi rilasci questo ogni
Lunedì mattina sempre cento GMT se tu
non voglio aspettare fino a lunedì prossimo tu
puoi guardare questo episodio che è il cervello
in un barattolo che Google marca come macchina
l’apprendimento ha selezionato per te I am mvj
fino al lunedì mattina successivo
stai curioso
dai un’occhiata ai linguaggi di template come
manubrio o il linguaggio dei modelli
che è incorporato nella vista, ad esempio e
Vado a confrontare i modelli
lingue a un allenatore Jaso nativo dove
Eri JavaScript ha il ruolo di
il linguaggio dei template questo è il
approccio che reagisce usa ad esempio
quando stai sostenendo l’uso di a
il linguaggio dei modelli ne cita spesso due
principali vantaggi che le lingue dei modelli
sono espressivo e dichiarativo che sto andando
per parlare di quei benefici, ma io sono
anche andando a parlare di tre costi
che viene con l’uso di template
linguaggi di template lingue aggiungono
complessità al tuo stack aggiungono a
costo sociale e ne risultano molti
sbavando è quello che stiamo andando
parliamo di oggi sono mpj e tu sei
guardare il divertimento su una funzione se guardiamo
indietro nel tempo dice maschio 5 anni fa circa
il modo standard di rendering del settore
Dom doveva usare un linguaggio di template per
incollare la tua logica di business con
tuo Dom allora un paio di anni fa che faccio
ti ricordi quanti anni ha reagito è come tre
quattro anni in ogni caso reagisce arrivato sul
scena e lo ha eliminato con il template
le lingue invece usavano solo native
JavaScript nel ruolo
le lingue dei modelli avevano prima di me
voglio essere chiaro qui che non lo siamo
interessato a JSX o al Dom virtuale
questo video ora JSX
è uno strato sottile sopra il nativo
javascript nativo che reagisce usa e
non ci interessa davvero
siamo preoccupati del fatto che lo sia
è ancora javascript nativo
sotto quello strato molto molto sottile non lo è
consequenziale e anche sotto
reiax non genera tecnicamente reale
doumitt genera una dominante virtuale
pezzi che a noi non piacciono davvero
preoccupato di questo in questo video
quello di cui stiamo parlando qui è come
il puro linguaggio templativo personalizzato e
lo confrontiamo con il nativo Jas
l’equivalente j nativa come un professionista legami
sta guadagnando molta trazione negli ultimi tempi
anni ma lingue dei modelli che abbiamo
li ho usati per molto tempo e molto
gli sviluppatori non sono convinti che il
nativo Jas è un passo avanti in
questo video parlerò un po ‘
un po ‘per il costo e i benefici di
lingue di modelli e ti danno come a
senso di pensare dietro il nativo JX
usi e perché si sono allontanati da
lingue di template e perché molte
la gente lo fa espressivo dove il modello
le lingue sono molto espressive perché
a differenza di JavaScript che è a
linguaggio di programmazione generico
le lingue dei modelli sono progettate per fare
solo una cosa e questo è rendere
Linguaggi di template dichiarativi HTML
sono progettati per incoraggiare dichiarativo
interfacce tra l’altro se non sei sicuro
che programmazione dichiarativa sei tu
potrebbe voler controllare questo video
Ho fatto io e questo video sta per fare
abbiamo molto più senso per tutte le tecnologie
alcuni vantaggi e tutte le tecnologie ha
alcuni costano la prima causa del modello
le lingue sono complesse perché tu sei
semplicemente aggiungendo un linguaggio interamente a
la tua tecnologia impila il secondo costo
costo sociale a chiunque lavori nel tuo
codebase ora deve imparare questo poco
lingua extra oltre a JavaScript
e il terzo costo è un sacco di strumenti se
stai usando un linguaggio di template
stai buttando via tutto il potere di
JavaScript non solo il linguaggio stesso
ma anche l’ecosistema molto
librerie scritte in esso e tutto il
strumenti e limitatori, editori e ID
quelli sono i costi e i benefici che sono
parlerò di oggi e bene
immergiamoci in ognuno di essi
le lingue di templating di espressività sono
molto molto
pressivo perché sono diversi
JavaScript sono progettati per fare solo
una cosa e questo è Express the
il rendering di modelli HTML sono
essenzialmente un linguaggio specifico del dominio
e loro altre cose è come loro
nella stessa categoria di sequel o di te
conoscere le espressioni regolari sono molto
linguaggi personalizzati progettati per esprimere a
cosa molto molto specifica in uno specifico
dominio da qui in avanti sto andando a
ti mostro un sacco di esempi che sto andando
per mostrare esempi di lingue di template
rispetto ad esempi equivalenti nel
scarafaggio JSF nativo
Sono intenzionalmente non sarò
usando qualsiasi vera tecnologia live qui come
reagire o visualizzare o manubri e il
la ragione per questo è che molti dei
punti che ho intenzione di provare a fare o
legato alla familiarità e
comprensibilità e sarà solo
distorto se si ha familiarità con il
la sintassi della tecnologia già, ma è possibile
tutti pensiamo a questo esempio come
tipo di reagire senza JSX e tipo di
manubri e assumeremo
che entrambi hanno lo stesso rendering
tratti così simile a immaginare che entrambi
stanno rendendo un Dom virtuale e tutto il
le caratteristiche di rendering sono le stesse
perché quelli sei tu
dettagli di implementazione che non siamo
preoccupato di quello in questo video siamo
interessato alla forma generale di a
lingua dei modelli rispetto a un j / s nativo
approccio tutto a posto stiamo andando ora
guardare il codice del template
lingua e ricorda che siamo ora
per ora guardando questo da un
punto di vista espressivo che sto andando a
sii silenzioso per 15 secondi per permetterti di farlo
guarda questo esempio prova a capire
cosa fa
tu
va bene così andiamo attraverso di essa la
modello ha questo dim è chiamato il
i prezzi container e questo a sua volta
contiene questa lista non ordinata con alcuni
alcuni elementi qui noti che mostra solo
la lista se ha alcuni elementi nel
elenca altrimenti mostrerà un paragrafo
qui dove sono stati trovati i nuovi elementi fiscali
all’interno di ogni oggetto
mostra il prezzo e lo esegue anche
attraverso una sorta di valuta del formato
trasformazione sai che questo è probabilmente
sì per convertire questo da qualsiasi cosa
è probabilmente una bella valuta
stringa vorrei disegnare il tuo
attenzione a una cosa in questo esempio
e questo è il fatto che tu potresti
probabilmente guardando solo questa figura
fuori quello che ha fatto anche se questo è il
lingua che non esiste sei
non ne hai familiarità in anticipo
anche se non eri nemmeno a conoscenza
il concetto temporaneo delle lingue dei modelli
questo probabilmente avrebbe ancora senso
non cerca di essere uno scopo generale
linguaggio come Java Script e let consente
di buttare via un sacco di potenza e
un sacco di funzioni per ottenere questo
leggibilità ed espressività per questo
rendering HTML di casi molto specifici e
ora vedremo un altro
esempio che fa esattamente la stessa cosa
ma lo fa usando un JSA nativo e
che assomiglia a questo ho intenzione di essere
silenzioso di nuovo per 15 secondi e lasciati
su cercare di capirlo
tu
va bene, passiamo a questo
questo è il rendering dei prezzi che lo contengono
ritorna me e tu hai fatto e questo ha il
Contenitore della lista di classi CSS e questo è un
ottimo esempio di come un template
il linguaggio è estremamente espressivo perché
qui con JavaScript dobbiamo usare
nome della classe perché javascript non lo è
progettato solo per questo è un
linguaggio di programmazione generico così
ha il concetto di una clausola è quello è
un’altra cosa JavaScript quindi questo è il
parola riservata che non possiamo usare in questo
contesto quindi dobbiamo usare la proprietà
nome della classe invece di fare questo lavoro
all’interno del div e se gli oggetti
array ha una lunghezza che restituirà un ul
lista non ordinata e quella lista non ordinata
dentro di sé ha una lista di liste
articoli solo Maps nell’elenco
articoli e restituisce una voce di elenco per
tutti come si come modello
esempi che formatta la valuta prima
mettendolo nel Li e se oggetto
la lunghezza del libro è falsa e0 tornerà
questo paragrafo con testo nuova luce e
suono così tutto ciò è solo JavaScript
non ci sono lingue speciali
le aggiunte che abbiamo fatto qui sono solo
JavaScript puro questo aspetto molto meno
come HTML rispetto all’esempio di modello anche
anche se è JavaScript che siamo
familiarità con esso si sente ancora un po ‘
un po ‘alieno e contorto perché abbiamo
per fare una sorta di simulazione del rendering HTML
nelle nostre mani dobbiamo spendere un po ‘
un po ‘più di intelligenza per capire come
che cosa HTML questo si traduce qui è un
un po ‘più come abbiamo chiesto di rimuovere questi
dalle nostre teste e poi
avere l’HTML rispettiamo il
elaborazione che dobbiamo fare nel nostro
la testa è leggermente leggermente meno ora io
direi che questo non è un enorme
differenza che potresti persino chiamare
questa è una piccola differenza questo è questo
assolutamente non chirurgia a razzo ma noi
Devo ancora darlo ai template
lingue qui che sono espressive
sono destinati a esprimere questa cosa
Rendering HTML e lo fanno meglio
che JavaScript nativamente si sposta
e parla di dichiarativo Ness se noi
guarda entrambi questi esempi molto
dettare chiaramente ciò che viene reso
nessuno di questi esempi è molto
preoccupato di come più specificamente
non c’è nessuna programmazione imperativa in corso
qui non ci sono variabili in essere
assegnato non c’è stato stato mutato
sta solo dichiarando quali sono le cose
entrambi questi esempi sono dichiarativi
al contrario di imperativo e cioè a
cosa molto buona perché il codice dichiarativo
è quasi sempre più facile ragionare
loro codice imperativo e ciò vale
particolarmente vero e quando si tratta di
rendering oltre ad essere
dichiarativo c’è anche molto poco
la logica in corso in loro sono molto
facile ragionare su non c’è molto
di roba questo è vero per entrambi gli esempi
ma la differenza chiave qui tra il
linguaggio dei templating e il j’f nativo
esempio è il linguaggio dei template
deve essere in questo modo non c’è modo di fare
programmazione imperativa nel template
lingua nell’esempio di JavaScript noi
potrebbe fare tutti i tipi di cose pazze
accesso alle variabili globali start
mantenere lo stato come ma nel
linguaggio dei modelli che non puoi fare
che tu sei non puoi creare variabili
e cose del genere e nel
linguaggio dei modelli lì semplicemente
non è un sacco di costruttore di linguaggio in
generale, quindi il tuo codice tende ad essere carino
molto minimale perché c’è sì
non molti programmi che puoi fare e
questo è di design questo è l’intento di
lingua dei modelli che definisce il linguaggio
o cercando di incoraggiare anche l’applicazione forzata
davvero una visione minimale e dichiarativa
le lingue dei modelli stanno cercando di
rimuovere l’abilità dal programmatore
fare cose imperative o elaborate
il nuovo mentre compro il tutto
espressività dire I
Io davvero non compro quando le persone parlano
sulle lingue dei modelli come
incoraggiando l’ ascia dichiarativa C ma mi sento
c’è un problema con quella linea di
ragionamento pensiamo a questo per a
minuto
hai questo problema il nostro abuso
contenere troppo imperativo e
logica elaborata ci sentiamo come dovrebbe
essere nella logica di business invece così
possiamo provare a risolvere questo introducendo
un intero piccolo linguaggio nel nostro stack
dove non puoi fare un imperativo
programmazione elaborata oh possiamo fermarti
facendo imperativo ed elaborato
programmazione nelle nostre opinioni si smettere di fare
semplicemente non mettere imperativo elaborato
logica nei tuoi punti di vista si fermi che è un
soluzione molto più semplice dell’introduzione
un intero piccolo linguaggio per il tuo strumento
catena in risposta a ciò che si potrebbe dire
quello ma per quanto riguarda il junior
sviluppatori che non hanno
pienamente colto il concetto di separazione
di preoccupazioni ma pensano di avere un
linguaggio di template potrebbe essere buono come
ruote di addestramento sorta di cose da tenere
loro dal fare danni al nostro progetto
ma io in realtà non acquistare tale argomento
perché hai ancora la capacità di
fai cose stupide quando si tratta di
separazione che hai appena spostato
piccolo strato lontano dal modello se
hai un membro del team che non lo fa
capire la separazione delle preoccupazioni no
quantità di garanzie tecniche o andare
per aiutarti è quello che devi fare
aiuta ed educa quella persona o sei tu
andando ad avere un grande
problema sulle tue mani quindi templating
le lingue sono costruite per incoraggiare
Nessun voto dichiarativo ma penso a
molto meno soluzione contorta è solo
scrivere codice semplice e dichiarativo in
JavaScript piuttosto che trascinare un
tutta una piccola lingua nel tuo stack
per impedirti di commettere l’errore
e questo ascolta il primo costo del
complessità dei linguaggi dei modelli n
importa come si taglia un modello
la lingua è un linguaggio di programmazione
è una cosa abbastanza complicata da fare
inserisci nel tuo progetto il tuo progetto come
intero è ora più complesso perché a
il linguaggio dei modelli non è davvero il
tipo di componente che rimuove un sacco di
complessità in modo da sacrificare alcuni
semplicità per ottenere il
lingua dei modelli ora dovrebbe essere
ha detto che questo è un valore personale
affermazione nel senso che io sono un
persona che apprezza molto la semplicità
alto come probabilmente probabilmente superiore a
la maggior parte delle persone che ho avuto una volta o due
feedback che dovrei accettare di più
la complessità nelle soluzioni ci sono
assolutamente sviluppatori a cui non importa
questa complessità in più lo sentono
aggiungendo una lingua di template al tuo
progetto che non è un grosso problema che non lo è
un grande componente che sentono è ben utilizzato
è popolare è gratuito è mantenuto
da una terza parte regolarmente qual è il
grosso problema ma non è così che lo vedo io
vederlo come un migliaio di piccoli tagli
tipo di cosa la mia filosofia è che il
più cose che si aggiungono a cose
il tuo progetto o qualsiasi altra cosa nella vita
più cose si aggiungono che possono andare
sbagliato più cose andranno storte quando
aggiungiamo un nuovo strumento alla nostra catena di strumenti
aggiungerà complessità e potrebbe essere
okay, devo davvero sottolineare che potrebbe
va bene come dobbiamo essere in grado di assorbire
un po ‘di complessità ovviamente perché noi
hai bisogno di sapere risolvere i problemi e loro
siamo
i problemi sono complessi e molto reali
abbiamo bisogno di strumenti e di cui abbiamo bisogno
assorbire una certa complessità ma il punto
Sto cercando di farlo è questo quando aggiungi
qualcosa che deve pagare per conto suo
la complessità costa così un linguaggio di template
potrebbe non essere il più grande costo di complessità
nel mondo ma i benefici che a
il linguaggio dei templating mi fa pensare
che sono molto piccoli e penso
che la complessità altera il rendimento
di investimento qui è un cattivo affare e
la complessità è solo uno dei costi di
dei linguaggi dei modelli c’è anche a
costo sociale ho parlato prima del
il fatto che un linguaggio dei modelli sia un
linguaggio specifico del dominio a dsl altro
le lingue in quella famiglia sono il sequel che
è usato per descrivere l’accesso ai dati e
espressioni regolari a cui è abituato
descrivere la corrispondenza del modello di stringa
sono la stessa famiglia ma c’è un
importante distinzione e questo è quanto
espressioni regolari e sequel o
relativamente standardizzato ma basato su modelli
lingue non sono come che ci sono
molti diversi quindi nuovi sviluppatori
entrare nel tuo progetto non sono molto
probabile conoscere quello particolare che
si utilizza in modo che stanno per avere
di trascorrere del tempo di apprendimento e
impariamo come lavorarci, andiamo
Ritornando all’esempio modello originale
ora come abbiamo concluso prima questo è molto
espressivo quindi è facile da capire
quello che fa è molto facile da leggere
e capirlo, ma non è così
significa che abbiamo capito il
linguaggio che sappiamo come leggerlo
non significa che sappiamo come scrivere
Diciamo che hai avuto il compito
che volevamo appesantire il prezzo
con zero se è inferiore a 10 let’s
Diciamo che abbiamo già la funzione
è il prezzo del pad con zeri o o
qualcosa del genere come lo otteniamo
qui potrei probabilmente capirlo
potrebbe essere qualcosa di simile e ma
Non so davvero come agire
otteniamo la funzione nel sistema I
bisogno di capire come registrarlo
funzione nel parser dei modelli e
probabilmente hai bisogno di fare un qualche tipo di
cosa plugin o qualcosa e questo è
solo perché siamo fortunati perché abbiamo
questo esempio qui piace se immaginiamo
che questa era solo la cosa e noi
non ho mai visto questa sintassi prima
e le lingue dei modelli sono un po ‘
subdolo in questo modo perché sono facili da fare
leggere si sentono accessibili ma questo
la sensazione scompare quando si inizia a provare
per scriverli poi ti rendi conto che loro
non sono così intuitivi come loro
prima pulisci e potresti dire oh cosa c’è
il grosso problema
gli sviluppatori che hai appena trovato i documenti lo trovano
google sviluppatori IT faccio tutto il
il tempo non è la tua chirurgia missilistica
sviluppatore, qual è il grosso problema, andiamo bene
dare un’occhiata allo stesso problema in
il nativo jsy brer ii e poiché questo è
sì javascript e conosciamo javascript noi
possiamo semplicemente aggiungere la funzione fatta a noi
non è necessario imparare alcun sistema di plug-in
includiamo semplicemente il file è solo
javascript normale di cui non avevamo bisogno
impara qualcosa che potremmo semplicemente fare il
cambia subito così sì non lo è
chirurgia a razzo per cercare alcuni cani e
aggiungere un po ‘plug-in, ma è un problema che
esiste solo a causa del modello
linguaggio che fa una libreria jeaious nativa
non hai questo problema non ce l’ hai
non lo fai lavorare un modello
la lingua ha un costo sociale più elevato di a
libreria nativa jace quindi quale modello
il linguaggio ha una complessità che costa un social
costano e vogliono parlare di un terzo
clausola e quella è la perdita di strumenti
javascript è una lingua molto matura
motori molto veloci e maturi e
molte incredibili ricchezze di biblioteche
editori maturi e io e molti
strumenti di analisi del codice quando vi sviluppate
un’altra lingua che fai
accesso a tutto ciò e tu sei
limitato a qualsiasi ecosistema è per
quel linguaggio specifico per esempio, facciamo
dare un’occhiata alla bacca nativa di jsr
esempio di nuovo posso incollare questo solo in
il mio editore e io abbiamo accesso a
tutto ciò che
campane fantasiose che ho per le mie
Codice dell’ambiente di sviluppo JavaScript
evidenziando il linting contestuale
roba autocompletata come quella intendo se io
cambiare qui si capisce subito che
c’è qualcosa che non va se faccio lo stesso
la cosa qui come non ha idea perché
è una stringa che potrebbe esserci naturalmente
plugin e roba per questo modello
linguaggio che puoi installare ma che hai
ora ho aggiunto una cosa in più per la tua
sviluppatori da installare e quella strumentazione
è anche molto improbabile che sia maturo come
i loro equivalenti JavaScript anche tu
perdere l’accesso alla potenza del linguaggio
le lingue del modello stesso sono limitate in
infatti questo è di progettazione come abbiamo parlato
prima che sia per impedirti di farlo
elabora le cose nel tuo rendering ma
ci sono cose che non sono possibili
fare nel linguaggio dei template, ma lo sono
ancora abbastanza semplice e minimalista
voglio avere là dentro diciamo per
istanza che volevamo non lo so
calcola il totale degli articoli Let’s
fare
in una lingua di template lo faresti
probabilmente non è permesso fare una somma
operazione se non si ha familiarità con
ridurre questo esempio è probabile che vada
renditi ciò che è questo se c’è un
l’episodio qui a riduci è molto semplice
è usato per sommare le cose spesso ma il
punto in un linguaggio di templatura interiore
probabilmente non ti è permesso fare una somma
operazione che è qualcosa che
è la filosofia di un modello
la lingua è relegare all’esterno
il modello è un po ‘ accademico
discussione se la somma di articoli è business
logica o logica di visione, lo penso
sicuramente può qualificarsi come logica di visualizzazione
altri potrebbero non essere d’accordo Non so cosa
pensi di commento, se siete d’accordo
quella somma degli articoli è quindi logica di visualizzazione
puoi vedere come un linguaggio template
rende la tua vita un po ‘più difficile
un’altra cosa che JavaScript ti dà
gratis è composizione per esempio
diciamo che ho avuto diversi tipi di
elementi che potrebbero essere nella lista così io
voglio davvero usare la vista elenco
contenitore per così dire ma voglio essere
in grado di spingere diversi tipi di oggetti
lì con diversi tipi di
i modelli danno un’occhiata a questo e provano a
prima avvolgere la testa intorno ad esso sulla vostra
proprio prima di spiegare come funziona
tu
va bene, diamo un’occhiata al
Esempio di elenco regolare è più o meno
la stessa funzione di prima ma noi
gli ho dato un nome generico e noi abbiamo
modificato per accettare un elemento di rendering
funzione qui rendiamo anche oggetto è ora
la cosa che va in questo modo
se ricordi che l’esempio deve
sembra come prima, ma ora abbiamo
rotto in questi e questi
variabili in modo al fine di creare un
funzione che è equivalente a ciò che noi
prima che usassimo il binding a Curry render
listino prezzi e cosa significa questo
chiamiamo bind su lista di rendering e chiamiamo
legare con render elemento di prezzo come un
argomento e che restituirà un nuovo
funzione da associare per rendere i prezzi
dove è stato corretto il rendering dell’elemento di prezzo
come il primo argomento di rendering è
è una specie di permanente che sono rimasto così render
listino prezzi è ora appena chiamato con
oggetti questo ora è stato corretto come
primo argomento se currying è un nuovo
concetto per te ho un episodio su questo
qui sì auto quindi non respingere questo come
strano perché non sai cosa
portare è perché portare è molto
cosa e dovresti imparare in modo da notare come
tutto questo è semplicemente il JavaScript
div ul e @ p cose qui che sono
lo stesso da prima, ma notalo
non esiste il concetto di un essere componente
presentato qui e funziona perché
stiamo facendo tutto semplicemente
funzioni semplici funzioni sono semplici e
componibile questa componibilità che noi
ottenere completamente gratis qui deve essere
reimplementato in un linguaggio di template
spesso sotto forma di componente
componenti o grande reazione li hanno
ma quando si lavora con reagire si può anche
uscire solo con utilizzando semplici render
funzione e questo è più bello perché lo è
sì molto più semplice e quelli erano i miei
pensieri in lingue template riassuntive
sono bravi a esprimere il rendering HTML
quella
cosa sono costruiti per modello
le lingue mirano a incoraggiare il minimalismo
e programmazione dichiarativa ma puoi farlo
fallo comunque in JavaScript il
viene aggiunto il costo delle lingue di template
impilare il costo sociale della complessità e molto
strumenti che hai appena visto un episodio
della funzione fun fun vi rilasci questo ogni
Lunedì mattina sempre cento GMT se tu
non voglio aspettare fino a lunedì prossimo tu
puoi guardare questo episodio che è il cervello
in un barattolo che Google marca come macchina
l’apprendimento ha selezionato per te I am mvj
fino al lunedì mattina successivo
stai curioso
Please follow and like us: