Press "Enter" to skip to content

GOTO 2015 • ECMAScript 6 & Web Components • Brian LeRoux


quindi ti parlerò di web
componenti e un po ‘di es6
la prossima versione di JavaScript e da fare
che andrò un po ‘indietro
in tempo per iniziare e passare attraverso come noi
arrivati a componenti Web, allora sarò
parlare dei componenti Web stessi e
poi ne parlerò un po ‘
della bontà es6 che stiamo iniziando
per vedere pop-up in discorsi javascript che lei è
ragazzi da quando voi ragazzi costruite applicazioni di
javascript oggi e quante persone
qui si usa come Babel o tracer per
traspare da es6 ok come tre
le persone e io sono uno di loro che è bello
Sì, sei divertente , vedremo che lo sono
passerò attraverso il tipo di
inizio del tempo qui e vedremo
alcuni dei primi framework JavaScript
e andando a mettere in giro le virgolette
che perché io non credo questi
le cose contano come quadri sono più simile
biblioteche e la grande ragione per cui queste
le cose di cui è venuto fuori è perché il
il browser era davvero pessimo il
vari browser avevano un sacco di
incoerenze soprattutto nel Dom
questo è uno dei predicati per html5
dove hanno standardizzato tutti i bug in
il Dom in modo che tutti avessero lo stesso
bug e non sto scherzando esattamente
cosa è successo così intorno al 2006 questo
la libreria chiamata prototype è uscita e
non aveva alcun Doc e tutti
tipo di appena alzato per accelerare con esso
leggendo il codice sorgente per lo più dipinto
su quelle differenze in Dom
implementazioni attraverso i browser che
anche tipo di vita resa un po ‘
più facile per lavorare con il servizio remoto e il
il termine Ajax è stato coniato per essere tutto
tappi Ajax, ma che è diventato uncool da fare
quindi non sto facendo più se guardiamo
API di prototipi puoi vedere che è
è roba abbastanza semplice noi
afferrato un elemento div della dom o noi
creato un elemento div in dom e
poi lo estendiamo e questo piccolo atto di
estendendo lo sviluppo effettivamente realizzato
prototipo davvero impopolare eri tu
stavano scherzando con oggetti built-in e
potresti cambiare il comportamento o il
comportamento previsto di un built-in questo è
il venerabile Ajax che ha dato il via al
del browser diventando una cosa di applicazione
puoi vedere che è piuttosto prolisso
è interessante che abbiamo una specie di
allontanati da questa, ma la
natura asincrona dove passiamo la
successo e un callback di fallimento è è
il prototipo oggi abbastanza comune è stato visto
davvero bravo a lavorare con il dong
che dipinse le differenze in
aggiungendo e rimuovendo gli elementi che dipinge
oltre le differenze in eventing ma esso
non ha fatto nulla per effetti e
Thomas Fuchs è uno dei miei preferiti
Sviluppatori JavaScript nel mondo che
cavalca un codice fantastico, ne vale assolutamente la pena
leggere anche oggi ha creato un estremamente
difficile da scrivere e trovare la libreria chiamata
script oculus ed era di nuovo quando
è stato come popolare per farti punteggiare
quindi era come lo script punto C ul o I
non riesco a ricordarlo non importa
perché non ne hai bisogno oggi
efficacemente userebbe i timeout e
posizionamento assoluto per spostare elementi
e avresti un bel codice come questo
dove verremmo in linea con i gestori di clic
per spostare le cose attorno a cui interessante
reagire sta riportando poi il ragazzone
è arrivato lungo jQuery e questo tipo di
ha cambiato il mondo intero
jQuery è una grande vittoria Penso che sia stato davvero così
ha dato agli sviluppatori una soluzione davvero intuitiva
L’API con cui lavorare è stata molto semplice
qualcuno a prenderlo e iniziare a correre
con esso e costruendo applicazioni nel
browser che sembrava essere abbastanza
reattivo ha decisamente dominato I
penso che sia ancora in oltre il 90% dei migliori
100 siti web qualcosa del genere e
è in giro anche oggi ce ne sono alcuni
tempi che vedrai su internet
circa una volta all’anno la gente dice di no
ho bisogno di jQuery e penso che lo siano
probabilmente giusto ma jQuery dipinge
su molte differenze tra browser
soprattutto se devi rientrare
tempo per i browser come IE 8 quindi è ancora
un grosso problema uno dei più interessanti
le cose su jQuery è molto presto
su un costruito in un modello di estensione dove
avrebbe mappato il prototipo di jQuery
oggetto di una funzione di nome e così invece
di camminare sopra il prototipo di eri
camminando sopra questa sorta di cosa built-in
chiamato funzione questo enorme ecosistema di
i plugin sono scoppiati e anche oggi e io
pensa che ci sia una lezione lì dentro
sviluppatori sulla costruzione di innesti
librerie e quindi probabilmente hai tutto
visto il codice come questo tu sai che questo è
jQuery classico tranne che di solito
si trasforma in questa enorme piramide di codice
nel corso del tempo e jQuery posso preso un sacco di
le idee che abbiamo visto nelle librerie come
prototipo per fare cose come Ajax ma
ha reso le cose un po ‘più belle un po’
sintassi più pulita jQuery anche in forno
animazione quindi non hai bisogno di caricare un
libreria separata per fare quello e quello era
sai probabilmente qualcosa di gente
voluto e poi intorno allo stesso tempo
un’altra libreria venne chiamata
MooTools
nessuno qui costruisce qualcosa di mootools
alcune persone fantastiche
sì MooTools era abbastanza dolce realtà
mi è piaciuto molto
API molto simile agli altri ragazzi molto
simile tipo di semantica dove sei
passare i callback in questi come
oggetti costruttore è stato il mootools
primo che tipo di introdotto un
sistema di classe e una gerarchia basata su classi
il codice per questo era mi sentivo davvero
bello e creato un po ‘bello
componenti ma Internet votato ed
ho deciso che è come se fossi meglio
citerò Yui perché Yui in realtà
era davvero popolare per un flash in
pan e la gente stavano costruendo molto
roba con esso
Yui un paio di anni fa era completamente
deprecato e si allontanò dal codice
il codice è ancora lì, non è solo essere
mantenuto in alcun modo e penso questo
è una cosa interessante da notare
te stesso da un profilo di rischio quando sei
valutare le tecnologie se c’è un
unico fornitore dietro quella tecnologia
potrebbe avere qualche rischio in futuro quando
la società decide che non vuole
per finanziarlo più
Yui era anche piuttosto prolisso e Java
come e così in seguito hanno cambiato le cose
assomiglia un po ‘ più a jQuery Douglas
Crockford era una grande parte di come questo
tipo di biblioteca è diventato quello che era così
era un altro JavaScript idiomatico
biblioteca e sta ancora scalciando oggi e
si chiama dojo e fa tutto questo
roba – in effetti a Dojo piace vantarsi come
lo ha già fatto prima di tutti gli altri
e davvero davvero letteralmente
dojo ha una grande comunità dietro ha un
molte persone che ci lavorano e
ci sono un sacco di applicazioni aziendali
che sono costruiti con esso ancora fino ad oggi
quindi rimane ancora piuttosto importante a
molti dei concetti che siamo ora
vedendo un po ‘di rotolare nel più ampio
il mainstream er era probabilmente il primo
prototipo di stagno dojo incluse cose come
design del modulo asincrono come vediamo
con questo è necessario il problema della funzione
tutte queste cose hanno fatto lo stesso
cosa e aveva anche tutto questo
problemi loro-loro-loro hanno costruito
in cima al fatto che il tipo di browser
di succhiato
ora i browser non fanno davvero schifo così
forse non abbiamo bisogno di animazione con
I CSS e l’ essere dichiarativi sono una specie di
come una cosa che vuoi fare ora tu
non voglio che tu imposti questo timeout
sembra che la cosa mobile stia accadendo e
quindi vogliamo avere il più piccolo
l’impronta del codice possibile in modo che tu
ottenere il miglior tempo di esecuzione di tutti questi
le cose avevano un concetto di modulo o
chiusura o un modello di modulo ma nessuno di
loro fuori chi lo ha fatto allo stesso modo e così
avevano tutti i loro ecosistemi insulari
se non si potesse interoperare
tutti stavano ricreando la griglia di dati
come un milione di volte
e questo in realtà persiste ancora a questo
molto probabilmente immagino una delle altre cose
quel tipo di duro diventava iterativo
applica e concatena come vediamo in jQuery
può essere davvero difficile da testare il grande
il problema è che queste cose erano davvero
davvero piuttosto gonfio a seconda di cosa
lo stavi facendo e ne avevi un sacco
codice accoppiato sarebbe almeno due
trecento kilobyte prima che si possa
ottenere Ciao mondo sullo schermo e questo è
questo è un sacco di questo è un sacco di codice per
non molto
un altro problema è la maggior parte di queste cose
colpisci il Dom e ogni volta che lo fai
interagire con il Dom che costringi a
ridipingere e può essere piuttosto lento
da qualche parte intorno all’iPhone
liberato ci siamo resi conto che lo avremmo fatto
probabilmente devono essere costruite di più
applicazioni performanti ora che le persone
stavano accedendo a queste app con un livello basso
telefoni alimentati e quindi micro librerie
tipo di è venuto in giro molto brevemente
ha lavorato su uno chiamato xgy nel 2008 I
Mi piace pensare che forse abbiamo seminato il
termine micro biblioteca ma dubito che abbiamo fatto noi
appena detto micro piccolo e in realtà perché io
aveva una sintassi molto simile a jQuery
tranne che per il targeting solo per dispositivi mobili
browser e penso che siamo riusciti a farlo
qualcosa di ridicolo come quattro o cinque K
era davvero una piccola sdraio era un’altra
progetto su cui lavoro ho avuto il concetto di
modelli in realtà è ancora un po ‘
oggi le persone lo usano molto
semplice idea di dove vorresti averti
conosci i dati e lo imposteresti usando
memorizzazione locale o SQL Web o altro
cose che possono immagazzinare cose dentro
il browser come finestra nome punto Thomas
Fuchs, quel ragazzo della sceneggiatura Acula, ha visto xui
e pensava che fosse molto dolce
lo farò
la stessa identica cosa, ma sto per clonare
l’interfaccia utente o API di jQuery e così ha preso il
lo spirito di xui ma lo ha applicato
direttamente all’api di jquery creando un tipo
di un lavoro simile, Zepto è davvero bello e
in realtà è ancora molto popolare in a
molte applicazioni mobili e io totalmente
consiglio di leggere il codice sorgente se
stai facendo quel genere di cose
questo codice sembrerebbe lo stesso di
jQuery ma ci sarebbe molto meno codice per
vale anche la pena notare jQuery oggi
è davvero ben tenuto è davvero
testati in battaglia e loro l’hanno snellito
giù in modo sostanziale forse non lo fai
bisogno Forse chissà sia
in questo modo si sta solo rifacendo la stessa cosa
più e più volte e noi forse come
la coscienza collettiva si rende conto che se
continuiamo a fare la stessa cosa finita e
di nuovo probabilmente lo terremo
avere gli stessi problemi ancora e ancora
ancora e poi la prossima generazione di
quadri sono arrivati ​​e così andando
correre rapidamente attraverso questi dorsali di ragazzi
era facilmente il primo del suo genere e io
pensa che abbia distrutto cose che la gente realizza
hey forse dovremmo separare il nostro
preoccupazioni e iniziare a trattare i nostri clienti
molto più come avremmo architettato il nostro
server separeremmo le nostre preoccupazioni
attorno a visualizzazioni e modelli e persino al routing
backbone è un codice veramente ben scritto e
è veramente piccolo e JavaScript
ingegnere è una gioia da leggere così anche io
so che consiglio di farlo sempre
ma hai imparato tanto leggendo altro
codice della gente e non so se Jeremy
oshkosh stava facendo metam o cosa fosse
ma ha scritto molto codice ed è molto di più
piccolo periodo di tempo e spina dorsale era
una di quelle cose anche CoffeeScript
sì, ho fatto solo uno scherzo su di lui
facendo matematica così la spina dorsale è cresciuta abbastanza grande
Penso che oggi molte persone siano in qualche modo
di passare a questa cosa chiamata
e dovrei dire j / s qualunque cosa e
questa è la cosa che voglio che ti piaccia
interiorizza o controlla in modo che tu lo faccia
avviso qui abbiamo una vista e una vista
in definitiva è solo un tag
e quel tag che sai che daremo
alcuni nomi di classe e ci legheremo
alcuni eventi ad esso se avessi un open
metodo su questa cosa quando ho cliccato su
la cosa icona che avrebbe sparato quell’evento
hai l’idea che questo è molto simile
da come appaiono i componenti web oggi
100 piedi
Google si avvicinò con questa cosa chiamata
angolare è chiunque costruisca applicazioni angolari
Qui sì che non mi sorprende abbastanza
alcuni di voi sono qualcuno qui anche lei
ionico yeah onice totalmente dolce potrei
essere prevenuto in modo angolare ha preso un sacco di
nomenclatura di Enterprise lato server
sviluppo e poi riassegnato in
il cliente in diversi modi è sorta
di strano ha queste cose così
chiama come controller o modelli o
qualunque cosa e non proprio quello che tu
penso che lo farà
non puoi costruire un’app angolare senza
comprare in questo insieme di
nomenclatura e modi di lavorare sei tu
non ti piace solo prendere parte del tuo
app e renderlo angolare se stai andando
angolare stai andando fino in fondo
angolare un bel pezzo di angolare o
uno dei miei pezzi preferiti è Karma’s
prova il software fantastico Runner davvero
è buono per lo sviluppo
questa cosa live reload che può provare
più browser contemporaneamente ionico I
accennato è rad è una biblioteca mobile
per la creazione di app native utilizzando HTML CSS
e JavaScript basa su Cordova hanno
Prendiamo fondamentalmente Cordova e poi loro
plop l’interfaccia utente in alto con con angolare e
è abbastanza buono il grosso problema
angolare per me è angolare
direttive e se non si conosce angolare
una direttiva è un tag personalizzato, naturalmente
perché questo ha un senso
non proprio ma qualunque cosa così questo ciao
tag persona è definito in questa direttiva
proprio qui per creare un
direttiva però devo avere un modulo
e al fine di renderlo effettivamente vincolante
alcuni dati devo avere un controller così
questo è l’ accoppiamento di cui stavo parlando
dove ottieni questo tipo di nidificazione
situazione delle bambole in corso o sei
separare le tue preoccupazioni forse un po ‘
troppo ma a prescindere dai tag personalizzati
la brace interessante è un’altra
nessuno qui sta costruendo app membro okay
tu sei bello è sta facendo
l’ember del centro è fortemente ispirato da
Rotaie se questo è buono o cattivo mi
non lo so ma se sei abituato a usare
rotaie allora sarai molto
confortevole nell’ecosistema Ember
Documenti super -ben scritti super grandi
governance e onboarding per il
comunità Ho veramente stimo come
gestiscono che è anche un po ‘grande
ed è un po ‘lento viene da un
cosa chiamata nucleo del germoglio e c’è un
un sacco di codice legacy in esso non è davvero
appropriato per la parte mobile del mio lavoro
per testare queste cose su telefoni e
Amber non è ancora lì, ma è così
migliorando tutto il tempo che ha a
nuovo motore di rendering chiamato glimmer e
stanno facendo una cosa chiamata fastboot
dove puoi pre rendere la tua app
a una stringa e caricarlo caricarlo più velocemente
interessante ha anche componenti e
quindi stai iniziando a vedere un tema qui
e i componenti ember sono in realtà script
i tag incorporati nella tua applicazione sono io
non proprio sicuro di come quell’arma forse
imballando i loro moli ai componenti web
ma questo è ciò che un tizzone
componente sarebbe molto simile
angoloso lo fai finire così questo è il mio mio
componente immagino o questo sto invocando
il mio componente questo è il mio componente
definizione e questo sono io che creo un
app che lo carica e quindi è un po ‘
come angolare dove si ottiene questo un po ‘
un po ‘di accoppiamento tra i diversi
strati ma piuttosto bello funziona bene
chiunque qui costruisca reagisca alle domande
oh come due di noi tre , va bene così
reagire sta facendo un sacco di
attenzione perché invece di copiare
paradigmi di sviluppo lato server e
proprio come se li portassero sul mercato all’ingrosso
il cliente che il team di Facebook ha deciso di fare
come effettivamente affrontare i problemi reali
stavano avendo e il grande reale
problema che stavano avendo è che il Dom
è stato super lento è venuto fuori con un intero
un mucchio di nuovi concetti che l’altro
i quadri stanno rapidamente copiando ora la chiave
uno è il Dom virtuale e così invece di
toccando il DOM e giocando con esso e
modificandolo tutto il tempo che sarà batch
richiede l’uso di requestanimationframe e
lo farò in modo dinamico per te così
aggiorni solo ciò di cui hai bisogno quando tu
vuole farlo non c’è due promettenti
prime librerie mobili touchstone
App andrea jeaious e quindi se lo sei
cercando come un equivalente di ionico
nel mondo del reagire quelli valgono
verificando che ho visto le app create con
che tu seriamente non puoi dire niente
la differenza tra un nativo
applicazione davvero ben fatto uno dei
le cose fondamentali su cui reagire è che è a
stile di programmazione funzionale e così via
evita esplicitamente di mutare
che lo rende più veloce ma lo rende anche
è molto più facile ragionare su e
ancora elementi personalizzati così una cosa che
la gente odia odiare l’odio è quella che reagisce
tu definisci i file JSX che ti permettono
per incorporare HTML e non molte persone
così è molto simile all’inizio
proposta in JavaScript chiamato a noi 4x
sarebbe in grado di incorporare XML e il tuo
JavaScript non è una cosa molto popolare ma
finisci con questi componenti ordinati
e questo ciclo di vita del componente pulito che
puoi semplicemente renderizzare in una pagina qualsiasi
elemento che si desidera probabilmente il
il più semplice di tutti, ma non è così
includere un sacco di impianti idraulici e quindi se
hai bisogno di comporre il tuo
applicazione ha cose come percorsi e
i modelli e il resto che è per quello
a risolvere il team di Facebook ha un
concetto attorno a questo chiamato flusso e se
vuoi parlare di più tardi che posso avere
ho ottenuto polimeri pareri da Google
questa grande citazione di Eric Schmidt da a
molto tempo fa, dove erano come aspettare
un secondo hai Chrome OS e hai ottenuto
Android cosa sta succedendo perché voi ragazzi
avere due sistemi operativi e Eric
Schmidt ha detto molte aziende
vorrebbe avere una bella operativo
sistema molto umile Eric Schmidt comunque
Immagino che si sentano allo stesso modo
JavaScript quindi hanno due framework
il polimero è una struttura lungimirante
sono le idee per combattere i test in genere
come le specifiche di progresso sul web
componenti che non sono veramente sono
dicendo ora puoi usare questo e le persone
usarlo nella rabbia per la produzione
applicazioni l’attuale app di Google i / o
è in realtà un’applicazione polimero è
tipo di grande ed è un po ‘lento legittimo
una volta caricato è buono
il polimero ha davvero preso questi tag personalizzati
cosa fino a loro è consuetudine
etichetta fino in fondo così come tutto
lo fai è un tag personalizzato forse questo è
bene forse è male non lo so e così
questo è un elemento personalizzato qui chiamato
ciao elemento del mondo e lo sto definendo
letteralmente quasi del tutto dichiarativamente
che è una specie di figo tipo di
interessante quindi questa è una sorta di stato
dell’arte questi sono i vari
Strutture JavaScript che sono probabilmente
il più popolare o il massimo
Attenzione
e ci sono ancora problemi quindi il modulo
i sistemi generalmente sono incompatibili
non ci sono totalmente transpilers
aiutaci a superare questo, ma è così
sia comune j / s o AMD o buona fortuna
con quello e tutti hanno un po ‘ di
diversi concetti intorno a cosa
il networking sembrerà o come
il routing è fatto o come fa i dati
sincronizzazione, ma una cosa questi ragazzi
tutti hanno in comune elementi personalizzati
implementazione quindi questa è la parte dove
Vado attraverso i componenti web
loro stessi, Douglas Crockford è davvero
famoso per avere un libro chiamato
JavaScript le parti buone e tutti
ama scherzare e metterlo accanto al
Guida definitiva JavaScript javascript
guide definitive come questa grande e web
cam sai javascript le parti buone
è così grande e puoi leggerlo
come 10 minuti
componenti web penso sia un po ‘
simili componenti web è questo
serie specifica coperta di specifiche
per quattro cose diverse circa la
template tag HTML che importa l’ombra
Dom che sembra molto più bello di quello che è
elementi personalizzati quindi passiamo attraverso
questi si nota il numero e questo è
molto comune in molti JavaScript
applicazioni per simulare il browser
e inserire modelli inerti all’interno di a
tag script e lo chiameremo qualcosa
altro
il problema è il blocco dei tag di script
esecuzione e quindi se hai un intero
un sacco di cose che la tua pagina può ottenere
piuttosto janky soprattutto se sei come
facendo il tempo qualsiasi tipo di scorrimento e
inserendo dinamicamente queste cose
notoriamente usato da Facebook per farlo
è come un bottone e così per ogni cosa simile
pulsante sulla pagina mentre lo si scorre
otterrebbe questo come effetto balbuzie
la cosa ha scrollato il tag del template
risolvi questo problema ti darà un inerte
posto per mettere le corde un po ‘carino
puoi mettere tutto quello che vuoi lì dentro
e puoi chiamarlo come un normale Dom
elemento e fare le cose con esso non lo faccio
davvero cura che io non io non incorporo script
tag vorrei compilare queste cose
a un singolo file sorgente JavaScript tu
non dovrebbero essere incorporati tag di script così
è come se tu fossi quasi incorso
a mio avviso incoraggiando il peggior comportamento
ma va bene
quindi tag modello di componenti web potrebbe
aiuto a chi importa che le importazioni HTML siano un
idea interessante questo è l’ HTML che può
caricare HTML
forse è una buona idea, forse non è un
buona idea ha un sacco di problemi prima
di tutto ciò che è lento puoi immaginare se
hai avuto una complessa gerarchia di
componenti potrebbe chiamare tutto il taglio
facendo tutti i tipi di chiamate di rete
stanno bloccando a vicenda la risoluzione di
quelle chiamate di rete potrebbero fallire e
quindi causare il resto dell’applicazione
e tutto ciò che carica HTTP due dovrebbe risolvere a
molte di queste preoccupazioni ma tu sai che è
non completamente implementato ancora Mozilla ha messo
una dichiarazione che non vogliono
aggiungi le importazioni HTML Google dice che vogliono
a Apple dice che pensano che sia un bene
idea ma vogliono farlo in modo diverso
e Microsoft sta semplicemente fissando tutti
cercando di non scuotere troppo la barca o
di nuovo bello quindi non so come HTML
le importazioni potrebbero succedere che potrebbe non essere così
attualmente non è chiaro da a
punto di vista delle specificazioni l’ombra Dom
che suona bene è l’idea
che nasconde l’implementazione e così
come base di base qualsiasi tipo di built-in
componente in questo momento non devi
come scavare e vedere cosa sta succedendo
e un buon esempio di questo sarebbe come
il video player nel tuo browser tu
non vedere come singoli elementi
a meno che tu non voglia l’ombra che Dom lo farebbe
dacci questa capacità possibilmente nel
del browser
è in uno stato strano sembrava
come nessuno avrebbe intenzione di implementarlo
e poi improvvisamente nell’ultima coppia
settimane
molti implementatori di browser hanno
vieni alla conclusione che forse hai
totalmente globale CSS è una cosa negativa dopo
tutto e che potremmo ottenere un certo livello di
incapsulamento per lo styling ma non lo faccio
sapere quando sta per atterrare o come
sta per atterrare, ce ne sono molti
la complessità associata ad esso, così è
una specie di delusione ma poi ci arriviamo
elementi personalizzati e questa è una buona parte
questa è la parte interessante e noi
penso che abbiamo una buona convalida a questo
indica che questa è probabilmente una buona idea
sappiamo che tutti i principali quadri
implementare il concetto in qualche modo
uno dei problemi con l’abitudine
la specifica degli elementi è che è un singolo
bloccando la chiamata e quindi se hai un intero
un mucchio di queste cose in teoria potrebbe essere
un po ‘lento supporta l’idea
di estendere built-in e quindi è possibile
estendi elementi HTML già esistenti
e vinci tutto
sono come le caratteristiche di accessibilità
dovresti volere quelli e poi?
altrimenti è solo un normale Dom
elemento quindi è piuttosto eccitante
ecco la sintassi più semplice possibile
che potrei cucinare questo è il
chiamata di blocco che registra l’elemento
alla pagina e quindi stiamo dicendo bene
Sto andando a creare una cosa chiamata un ciao
elemento del mondo un’altra cosa da notare e
Non so se è nelle specifiche o fuori
specifica ma gli elementi personalizzati sono definiti in
il parser Dom avendo dei trattini in loro
solo una specie di pazzo , non so perché
inizialmente stavano parlando di fare
un importante X Dash ma poi le persone si sono sentite
che puzzava davvero male
quindi ci sono solo tratteggi in loro e poi qui io
basta aggiungerlo al Dom e basta
crea ciò che conosci tag chiamato ciao –
mondo, se vogliamo prendere questa idea di un
poco oltre e penso che sia così
probabilmente il modo più popolare in
il pensiero web più purista è quello di estendere
elementi incorporati e il motivo per cui lo faresti
voglio estendere un elemento built-in è
che avresti ottenuto tutta l’accessibilità
caratteristiche degli elementi e quindi se io
volevo creare un pulsante invece di
creando ancora un altro elemento di span
sembra un pulsante forse estendo
Pulsante e questo è come si fa che il
sintassi è abbastanza ottusa c’è un sacco di
roba che succede qui potrebbe
sicuramente da ripulire molto io
in particolare non mi piace il fatto che
Sto definendo il nome del tag e poi lo sono
dicendo che sto estendendo qualcosa e lo sono
estendendolo qui è come se non lo sapessi
Mi sento su questo e poi questa parte è
molto controverso ora con gente a
il w3c in particolare Apple davvero
non mi piace e non mi piace
biasimarli perché puoi immaginare a
mondo in cui avremmo qualcosa come te
conoscere il tipo di input equivale a sapere inviare
è il ruolo di cosa di presentazione è uguale a pulsante è
come se avessi un ruolo, sai che sono io
ho tipo voglio dire che non è molto
facile seguire la mia argomentazione contro questo
il tipo di pensiero però è questo se tu
pensa che il web abbia una bella simmetria e
bella API non sei stato
dipinto
comunque, quindi, cazzo, dovremmo
fallo così se avremo abitudine
elementi e dovremo avere un
ciclo di vita per queste cose e questo è
dove le cose cominciano a diventare belle
interessante penso e molto simile
infatti a come vediamo tutti gli utenti
quadri di terra che si avvicinano a cose che abbiamo
ottenuto questi callback del ciclo di vita e così via
quando creo un nuovo elemento che posso impostare
il innerhtml questo è anche controverso
Apple pensa che sia ridondante aggiungere
callback alla fine di tutto e io
tipo d’accordo è brutto una volta noi
attaccare qualcosa al Dom che sparerà
questa richiamata togliamo qualcosa da
il Dom e vogliamo fare un po ‘di pulizia
forse ti abbiamo visto un evento sospeso
gestori altrove nel
applicazione possiamo possiamo collegare a questo
staccare la richiamata e quindi questo ci consente
per creare tutti i tipi di problemi nel nostro
codice se vogliamo dove possiamo guardare
attributo modifiche e possiamo
programmaticamente li intercetta e aggiunge
di nuovo diversi comportamenti abbiamo a
blocco chiamata qui per questo supe
ciao piuttosto prolisso codice piuttosto puzzolente
ma molto potente, quindi possiamo farlo ora
lo sai che non conosci una finzione?
questa è roba che possiamo fare oggi entrambi
Mozilla e Google hanno concordato che lo farebbe
probabilmente sarebbe meglio se ce ne fosse solo uno
polyfill è le specifiche che stiamo avanzando
e quindi c’è un polyfill là fuori
chiamato componenti web Jas ha tutto
queste cose ci hanno infuso dentro davvero
interessa solo il registro dei documenti
elemento e c’è in realtà c’è un
tizio che lavora su Twitter il suo Twitter
gestire è riflessioni web che ha un
biblioteca fantastica che solo polyfills
registrati elemento se ti senti come
anche l’intero componente web JSP si sente
grande è solo un paio di centinaia di K quindi è così
non troppo male e idealmente ad un certo punto
questa cosa è cotta in una qualche forma di
sistema di moduli quindi siamo dove siamo
oggi in questo momento è fondamentalmente solo il
Chrome supporta in modo nativo Firefox
è estremamente probabile cioè come ho detto
sono un po ‘come guardare l’intero
cosa e WebKit Safari Apple
efficacemente vuole farlo ma
voglio solo farlo in modo diverso, quindi facciamolo
parlare di es6 veramente veloce è sì
Ho chiesto ragazzi, ce ne sono alcuni di noi
sto programmando in es6 oh ci proverò e
spiega questa roba così tutti sempre
dice che sai qual è la prossima grande cosa
sai che il nodo è arrivato e JavaScript
è stato un grosso problema tutto ad un tratto e
deve esserci un’altra cosa da fare
soddisfare il mio annuncio / hd
Non penso che sarà come se fossi
ruggine personalmente penso che sia in realtà
sarà JavaScript c’è abbastanza nuovo
giocattoli che è un linguaggio eccitante per
imparare e usare di nuovo ed è molto
più grazioso di quanto lo fosse in passato
la più grande caratteristica per me è che noi
effettivamente ottenere la sintassi per la definizione dei moduli
finalmente una specie di pythonic in un certo senso e così
in questo caso sto definendo il default
le esportazioni per la mia funzione personale qui
e possiamo consumare anche i moduli
un po ‘ Python dove posso dire
va bene dammi la funzione hi da
questo ciao modulo e ci sei tu
abbastanza carino questo è bello se lo hai
mai lavorato con oggetti letterali ora tu
non devo aggiungere
una funzione dentro di te puoi solo
Dagli un nome e vai al
corre così tanto pulito questo rimuove il
il codice tonico sembra migliore di quello che abbiamo
classi come Java ottiene lambda
JavaScript ottiene le classi così è carino
fresco questo funziona il modo in cui si potrebbe pensare
funzionerebbe hai un costruttore
funzione hai ereditarietà
puoi aggiungere membri statici abbastanza puliti
infine JavaScript mi ​​dispiace
puoi sapere che non puoi fare bene è
JavaScript è possibile è possibile creare un
incubo di eredità multipla se tu
voglio che ci siano modi in cui puoi
o c’è una cosa chiamata oggetto
assegnare che ti consentirebbe di aggiungere come
molti mix-in come vuoi ottenere quello
tipo di comportamento questo è un altro
la mia preferita è la mia preferita
funzione se vieni da CoffeeScript
prestami probabilmente hai visto il singolo
freccia quindi questo è finalmente arrivato
JavaScript stesso ci consente di fare a
abbreviazione di una funzione chiamata così tanto
più pulito di
scrivendo un’intera funzione in questo
caso sto passando e tu conosci ogni frutto
uno alla volta che sto chiamando un
maiuscola non proprio così grande di a
affare ricordare prima come sta odiando
il tag del modello è questo il motivo per cui
es6 otteniamo un concetto chiamato template
stringhe che ci permettono di avere
stringhe multi-linea e stringa
interpolazione come qui è così
bello se sei se hai i modelli
non so perché non lo useresti
personalmente ha molto più senso
io per incorporare questo tipo di cose nella tua
programma c’è un sacco di altre sottigliezze
solo un sacco di zucchero ci sono davvero
niente di super nuovo nella funzionalità
di JavaScript devi solo scrivere a
molto meno di ciò che di solito si traduce in
programmi migliori non possiamo farlo
nativamente oggi puoi fare un po ‘di questo
roba in modo nativo oggi e io trovo il nodo
forcella ma per la maggior parte se lo siamo
andando tornare in lam del browser che abbiamo
traspare o compilare ma il bene
la notizia è che ci sono grandi strumenti per questo
la babele magica è probabilmente la più
popolare in questo momento ma da cui tracciante
Google funziona anche bene mi piace fare
balbettare con browserify e una cosa
chiamato chiacchiere che sai che mi piace
come abbiamo finito i nomi per le cose così
ora solo il discorso del programmatore è come totale
sciocchezze mi balbetta se mi piacerebbe avere il mio codice e
che in realtà significava qualcosa così
personalmente mi piace pubblicare i moduli in
NPM ognuno ha il suo tipo di
cosa che va bene
Ho trovato MPM un pochino meglio
non voglio più sistemi di pacchetti e
la mia base di codice di produzione ma tu sai
il tuo chilometraggio può variare una delle cose
che facciamo molto esplicitamente quando noi
pubblicare un modulo è che lo compiliamo
torna a ES5 non pubblichiamo i moduli come
es6 source o CoffeeScript o dattiloscritto
o niente
se qualcuno sta consumando il tuo modulo
non vuoi nemmeno mettere il
carico su di loro per capire come
compilare questa cosa per es5 loro
la loro catena di costruzione si trasformerebbe in a
incubo quindi se li tiriamo tutti
concetti insieme possiamo ottenere una bella
buona idea di come il codice potrebbe essere scritto
in pochi anni qui per il web così tu
crea il tuo codice sorgente in es6
si compila giù in ES5 e si
distribuirlo in questo modo che possiamo usare
package.json per puntare alla cartella dist
possiamo distribuire questa cosa per ottenere hub
pagine e possiamo persino usare le mappe di origine
avere il debugging passo se vogliamo camminare
attraverso questi componenti ho creato un
data molto stupida data element I
in realtà ha rubato l’idea a Github che
usa elementi personalizzati stessi per il
data / ora helper nella loro interfaccia utente e per
divertente l’ho fatto usando la sintassi es6 e così via
qui stiamo semplicemente estendendo il built-in
span element e quando creo come
Appena questa cosa è creata, lo siamo
inserirò questo nodo di testo all’interno
di esso dove prenderemo la data
che ho il codice sorgente per questo
correndo ti darò i link per questo
così si può controllarlo fuori
quindi ovviamente restano problemi
questo non è come essere il massimo
soluzione ma la componente è lo è
sicuramente una tendenza che stiamo vedendo in
tutti i vari framework JavaScript
e così sembra che sia giusto
direzione il collettivo ha tipo di
d’accordo sul fatto che potrebbe forse incapsulare il mio
il codice potrebbe essere una buona idea per i componenti web
j / s è un po ‘grande è un po’
strano deve andare indietro nel tempo
e supporta i browser che sono un po ‘
più ostile quindi il codice sorgente per questo è
un po ‘strano vale la pena dare un’occhiata
niente di tutto questo risolve i CSS, quindi conosci te
arrivare a mantenere quel problema che è gentile
di sfortunato penso che sia DOM ombra
ci aiuterà molto, ma siamo solo
non c’è ancora
se stai facendo un sacco di questi registri
elementi è pensabile che la tua app
potrebbe diventare piuttosto lento perché lo sei
bloccare quando lo fai è un
chiamata sincrona non c’è altro modo di
davvero farlo nessuno ha capito un modo
per farlo comunque comunque se stai rendendo
la pagina e tu hai questi questi
gli elementi personalizzati in esso sono
efficacemente andando a essere trattati solo
come una spanna a meno che non possiamo fermare l’esecuzione
registra questa cosa con il parser e
poi fai la cosa giusta quando colpiamo
è un’altra cosa degna di nota nel reagire
davvero ti costringe dal codice di scrittura che
potrebbe mutare lo stato e avere effetti collaterali
che mi piace molto e penso che potremmo
impara molto dal web component
e sai che hai tutta la corda per
impiccati quindi se muti lo dichiari
sai che è il tuo problema da risolvere
Henrick Joburg Joburg Dio non posso
ricorda il suo cognome adesso, penso
è Joe Burke Joe tagga comunque il ragazzo
dietro l’e commerciale J s dice che il
il futuro probabilmente non sarà il
come oggi e quindi la cosa migliore è farlo
ottimizzare per il futuro e io davvero
come quella Penso che sia un bel modo di
guardando le cose Andy Hunt dal
i programmatori pragmatici ti hanno recentemente detto
sappiamo che dovremmo pensare di più
unità di codice usa e getta invece di
unità riutilizzabili di codice ed è di più
probabilmente questo se sei come la tua base di codice
va avanti si sta andando ad essere riscrittura
parti e incapsulare questi bit così
che possiamo estrarre pezzi e cambiarli
li fa solo un sacco di bene
il senso che i CSS sono ancora un casino ce n’è davvero
nulla da dire a riguardo è che non è un
buona idea stiamo combinando così tanti
concetti diversi allo stesso tempo da
layout estetico da resettare ad alcuni
punto questo sta per avere da fissare
e incapsulando questi bit lo farebbe
davvero aiutare un sacco non fa
Sento che se avessi un tableau
implementazione che potrebbe scavalcare I
non so il mio menu laterale
implementazione penso che reagire sia davvero
provato che uno stato mutabile è un bene
cosa e il veto e il batching
concetti che dovrei probabilmente essere portato
nella tua metodologia di sviluppo
qualunque cosa possa essere e penso che se noi
potrebbe vederlo accadere in una rete
i componenti atterrano ad un certo punto se tu
vuoi controllare il codice sorgente per
questa roba e in realtà salterò
lì adesso così puoi oh dio cosa
l’ho fatto
quindi qui ecco la mia componente web e se io
ispeziona questo elemento puoi vedere la data
oggi è abbastanza bello
e se do un’occhiata
Oh Firefox mi hai fallito ero solo
a proposito di edizioni per sviluppatori di Firefox
fantastico ed è possibile controllare il
codice sorgente comunque sul mio github a
github.com taglia Brian l’ ultimo trucco
data oggi alla fine quando arriva il carico
laggiù andiamo e così se vediamo il
codice sorgente è come quasi letteralmente
letteralmente quello che avevo in quella slide dove
Sto definendo una classe e mi sto registrando
l’elemento e lo sto esportando e io sono
usando Babel se lo compilo a
codice es5 è abbastanza pulito, penso che questo
è un bel modo di lavorare e lo penso
stiamo iniziando a tracciare su come
costruire app migliori facendo questo tipo
di cosa e questo è tutto ciò che ho
per voi ragazzi, ma penso di avere un po ‘
domande forse

Please follow and like us: