Ki jan ou santi ou aprann JavaScript nan 2016

Pa gen okenn kad JavaScript yo te kreye pandan ekri atik sa a.

Sa ki anba la a enspire pa atik "Se lavni an" ki soti nan Circle CI. Ou ka li orijinal la isit la . Pyès sa a se jis yon opinyon, e tankou nenpòt fondasyon JavaScript, li pa ta dwe pran twò oserye.

Hey, mwen te resevwa nouvo pwojè entènèt sa a, men yo dwe onèt mwen pa te kode anpil entènèt nan kèk ane epi mwen te tande jaden flè a chanje yon ti jan. Ou se dev la ki pi ajou sou entènèt isit la dwa?

-Tèm aktyèl la se enjenyè Front End, men wi, mwen se nèg la dwa. Mwen fè entènèt an 2016. Vizyalizasyon, jwè mizik, dron vole ki jwe foutbòl, ou non. Mwen jis tounen soti nan JsConf ak ReactConf, kidonk mwen konnen dènye teknoloji yo kreye aplikasyon entènèt.

Cool. Mwen bezwen kreye yon paj ki montre dènye aktivite itilizatè yo, kidonk mwen jis bezwen jwenn done ki soti nan pwen final REST la epi montre li nan kèk sòt de tab filtraj, epi mete ajou li si anyen chanje nan sèvè a. Mwen te panse petèt lè l sèvi avèk jQuery chache epi montre done yo?

-O bondye non, pèsonn pa sèvi ak jQuery ankò. Ou ta dwe eseye aprann React, se 2016.

Oh, ok. Ki sa ki Reyaji?

-Li se yon bibliyotèk super cool te fè pa kèk nèg nan Facebook, li reyèlman pote kontwòl ak pèfòmans nan aplikasyon w lan, pa pèmèt ou jere nenpòt chanjman View trè fasil.

Sa son pwòp. Èske mwen ka itilize React pou montre done ki soti nan sèvè a?

-Yeah, men anvan ou bezwen ajoute React ak React DOM kòm yon bibliyotèk nan paj wèb ou a.

Tann, poukisa de bibliyotèk?

-Se konsa, youn se bibliyotèk aktyèl la ak youn nan dezyèm se pou manipile DOM la, ki kounye a ou ka dekri nan JSX.

JSX? ki sa ki JSX?

-JSX se jis yon ekstansyon sentaks JavaScript ki sanble ak XML. Li se yon lòt fason yo dekri DOM la, panse a li kòm yon HTML pi bon.

Ki sa ki mal ak HTML?

-Se 2016. Pa gen moun ki code HTML dirèkteman ankò.

Dwa. De tout fason, si mwen ajoute de bibliyotèk sa yo Lè sa a, mwen ka itilize React?

-Pa byen. Ou bezwen ajoute Babel, ak Lè sa a, ou kapab itilize React.

Yon lòt bibliyotèk? Ki sa ki Babèl?

-O, Babel se yon transpiler ki pèmèt ou vize vèsyon espesifik nan JavaScript, pandan w ap kòd nan nenpòt vèsyon nan JavaScript. Ou pa oblije gen ladann Babel pou w itilize ReactJS, men sof si w fè sa, w ap bloke ak itilize ES5, epi ann reyèl, se 2016, ou ta dwe kode nan ES2016+ tankou rès timoun ki fre yo fè.

ES5? ES2016+? Mwen pèdi isit la. Ki sa ki ES5 ak ES2016+?

-ES5 la vle di ECMAScript 5. Se edisyon an ki gen pifò moun sib depi li te aplike pa pifò navigatè sèjousi.

ECMAScript?

-Wi, ou konnen, JavaScript estanda scripting la te baze sou an 1999 apre premye lage li an 1995, lè sa a lè JavaScript te rele Livescript epi sèlman kouri nan Netscape Navigator la. Sa te trè sal lè sa a, men Erezman kounye a bagay yo trè klè e nou gen, tankou, 7 edisyon aplikasyon sa a.

7 edisyon. Pou tout bon. Ak ES5 ak ES2016+ se?

-Edisyon an senkyèm ak setyèm respektivman.

Tann, kisa ki te pase ak sizyèm lan?

-Ou vle di ES6? Wi, mwen vle di, chak edisyon se yon superset nan yon sèl anvan an, kidonk si w ap itilize ES2016 +, w ap itilize tout karakteristik yo nan vèsyon anvan yo.

Dwa. Epi poukisa itilize ES2016+ sou ES6 lè sa a?

-Oke, ou KA itilize ES6, men pou itilize karakteristik fre tankou async ak tann, ou bezwen sèvi ak ES2016 +. Sinon ou kole ak jeneratè ES6 ak coroutines pou bloke apèl asynchrone pou koule kontwòl apwopriye.

Mwen pa gen okenn lide sa ou sot di, ak tout non sa yo konfizyon. Gade, mwen jis chaje yon pakèt done ki sòti nan yon sèvè, mwen te itilize yo dwe jis gen ladan jQuery soti nan yon CDN ak jis jwenn done yo ak apèl AJAX, poukisa mwen pa ka jis fè sa?

-Se 2016 man, pèsonn pa sèvi ak jQuery ankò, li fini nan yon pakèt espageti kòd. Tout moun konnen sa.

Dwa. Se konsa, altènatif mwen an se chaje twa bibliyotèk pou chache done epi montre yon tab HTML.

-Oke, ou enkli twa bibliyotèk sa yo men pake yo ak yon manadjè modil pou chaje yon sèl dosye.

Mwen wè. Ak sa ki se yon manadjè modil?

-Definisyon an depann de anviwònman an, men nan entènèt la anjeneral nou vle di nenpòt bagay ki sipòte modil AMD oswa CommonJS.

Riiight. Ak AMD ak CommonJS yo...?

-Definisyon. Gen fason pou dekri kijan plizyè bibliyotèk JavaScript ak klas yo ta dwe kominike. Ou konnen, ekspòtasyon ak mande? Ou ka ekri plizyè fichye JavaScript ki defini API AMD oswa CommonJS epi ou ka sèvi ak yon bagay tankou Browserify pou mete yo ansanm.

OK, sa fè sans... Mwen panse. Ki sa ki Browserify?

-Li se yon zouti ki pèmèt ou pake depandans CommonJS ki dekri nan dosye ki ka kouri nan navigatè a. Li te kreye paske pifò moun pibliye depandans sa yo nan rejis npm.

npm rejis?

-Se yon depo piblik trè gwo kote moun entelijan mete kòd ak depandans kòm modil.

Tankou yon CDN?

-Pa vrèman. Li plis tankou yon baz done santralize kote nenpòt moun ka pibliye ak telechaje bibliyotèk, kidonk, ou ka itilize yo lokalman pou devlopman ak Lè sa a, telechaje yo nan yon CDN si ou vle.

Oh, tankou Bower!

-Wi, men se 2016 kounye a, pèsonn pa sèvi ak Bower ankò.

Oh, mwen wè... Se konsa, mwen bezwen telechaje bibliyotèk yo soti nan npm lè sa a?

-Wi. Se konsa, pou egzanp, si ou vle sèvi ak React, ou telechaje modil la React epi enpòte li nan kòd ou a. Ou ka fè sa pou prèske chak bibliyotèk JavaScript popilè.

Oh, tankou Angilè!

-Angilè se konsa 2015. Men wi. Angilè ta la, ansanm ak VueJS oswa RxJS ak lòt bibliyotèk fre 2016. Vle aprann sou sa yo?

Ann rete ak React, mwen deja aprann twòp bagay kounye a. Se konsa, si mwen bezwen sèvi ak React mwen chache li nan npm sa a ak Lè sa a, sèvi ak bagay sa a Browserify?

-Wi.

Sa sanble twò konplike pou jis pwan yon pakèt depandans ak mare yo ansanm.

-Se, se poutèt sa ou itilize yon manadjè travay tankou Grunt oswa Gulp oswa Bwokoli otomatize kouri Browserify. Heck, ou ka menm itilize Mimosa.

Grunt? Gulp? Bwokoli? Mimoza? Eske nou pale kounye a?

-Manadjè travay yo. Men, yo pa fre ankò. Nou te itilize yo nan tankou, 2015, Lè sa a, nou te itilize Makefiles, men kounye a nou vlope tout bagay ak Webpack.

Makefiles? Mwen te panse ke yo te itilize sitou sou pwojè C oswa C++.

-Yeah, men aparamman nan entènèt la nou renmen fè bagay sa yo konplike ak Lè sa a, tounen nan Basics yo. Nou fè sa chak ane oswa konsa, jis tann pou li, nou pral fè asanble nan entènèt la nan yon ane oswa de.

Soupi. Ou mansyone yon bagay ki rele Webpack?

-Li se yon lòt manadjè modil pou navigatè a pandan ke yo te kalite yon kourè travay tou. Se tankou yon pi bon vèsyon Browserify.

Oh, ok. Poukisa li pi bon?

-Oke, petèt pa pi bon, li jis plis opinionated sou ki jan dépendances ou ta dwe mare. Webpack pèmèt ou sèvi ak diferan manadjè modil, epi pa sèlman sa CommonJS, kidonk pa egzanp modil natif natal ES6 sipòte.

Mwen trè konfonn pa tout bagay sa a CommonJS/ES6.

-Tout moun se, men ou pa ta dwe pran swen ankò ak SystemJS.

Jezikri, yon lòt non-js. Oke, e ki sa SystemJS sa a ye?

-Oke, kontrèman ak Browserify ak Webpack 1.x, SystemJS se yon loader modil dinamik ki pèmèt ou mare modil miltip nan plizyè dosye olye pou yo pake yo nan yon sèl gwo dosye.

Tann, men mwen te panse nou te vle bati bibliyotèk nou yo nan yon sèl gwo dosye epi chaje sa!

-Wi, men paske HTTP/2 ap vini kounye a plizyè demann HTTP yo aktyèlman pi bon.

Tann, donk nou pa ka jis ajoute twa bibliyotèk orijinal yo pou React??

-Pa vrèman. Mwen vle di, ou ta ka ajoute yo kòm script ekstèn soti nan yon CDN, men ou ta toujou bezwen enkli Babel lè sa a.

Soupi. E sa pa bon vre?

-Wi, ou ta dwe enkli tout Babel-core a, epi li pa ta efikas pou pwodiksyon an. Sou pwodiksyon ou bezwen fè yon seri de travay pre-yo pare pwojè ou a ki fè seremoni pou konvoke Satan sanble ak yon resèt ze bouyi. Ou bezwen minify byen yo, lèd yo, aliye css pi wo a pliye a, ranvwaye scripts, osi byen ke-

Mwen te resevwa li, mwen te resevwa li. Se konsa, si ou pa ta enkli bibliyotèk yo dirèkteman nan yon CDN, ki jan ou ta fè li?

-Mwen ta transpile li nan Typescript lè l sèvi avèk yon Webpack + SystemJS + Babel Combo.

Typescript? Mwen te panse nou te kode nan JavaScript!

-Typescript SE JavaScript, oswa pi byen, yon superset nan JavaScript, plis espesyalman JavaScript sou vèsyon ES6. Ou konnen, sa sizyèm vèsyon nou te pale anvan?

Mwen te panse ES2016+ te deja yon superset nan ES6! POUKISA nou bezwen kounye a bagay sa a rele Typescript?

-O, paske li pèmèt nou sèvi ak JavaScript kòm yon lang tape, epi redwi erè nan tan kouri. Li nan 2016, ou ta dwe ajoute kèk kalite nan kòd JavaScript ou.

Ak Typescript evidamman fè sa.

-Flow tou, byenke li sèlman tcheke pou sezisman pandan ke Typescript se yon superset nan JavaScript ki bezwen yo dwe konpile.

Sigh... ak Flow se?

-Se yon chèk kalite estatik ki fèt pa kèk mesye nan Facebook. Yo kode li nan OCaml, paske pwogramasyon fonksyonèl se pè.

OCaml? Pwogramasyon fonksyonèl?

-Se sa timoun yo fre itilize jodi a monchè, ou konnen, 2016? Pwogramasyon fonksyonèl? Fonksyon wo lòd? Currying? Fonksyon pi?

Mwen pa gen okenn lide sa ou sot di a.

-Pa gen moun ki fè nan kòmansman an. Gade, ou jis bezwen konnen ke pwogramasyon fonksyonèl pi bon pase OOP e se sa nou ta dwe itilize nan 2016.

Tann, mwen te aprann OOP nan kolèj, mwen te panse sa te bon?

-Se konsa, te Java anvan ke yo te achte pa Oracle. Mwen vle di, OOP te bon nan epòk yo, epi li toujou gen itilizasyon li yo jodi a, men kounye a tout moun ap reyalize modifye eta yo ekivalan a choute ti bebe, kidonk kounye a tout moun ap deplase nan objè imuiabl ak pwogram fonksyonèl. Mesye Haskell yo te rele li pou plizyè ane, -epi pa fè m 'te kòmanse ak mesye yo Elm- men erezman nan entènèt la kounye a nou gen bibliyotèk tankou Ramda ki pèmèt nou sèvi ak pwogramasyon fonksyonèl nan JavaScript plenn.

Èske ou jis jete non pou dedomajman pou li? Kisa Ramnda ye?

-Non. Ramda. Tankou Lambda. Ou konnen, bibliyotèk David Chambers la?

David kiyès?

-David Chambers. Cool nèg. Jwe yon jwèt koudeta mechan. Youn nan kontribitè yo pou Ramda. Ou ta dwe tcheke tou Erik Meijer si ou serye sou aprann pwogramasyon fonksyonèl.

Epi Erik Meijer se...?

-Nèg pwogramasyon fonksyonèl tou. Awesome nèg. Li gen yon pakèt prezantasyon kote li jete Agile pandan l ap itilize chemiz koulè etranj sa a. Ou ta dwe tcheke tou kèk nan bagay ki soti nan Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Oke. Mwen pral sispann ou la. Tout sa ki bon ak bon, men mwen panse ke tout sa ki jis tèlman konplike ak nesesè pou jis chache done ak montre li. Mwen trè sèten mwen pa bezwen konnen moun sa yo oswa aprann tout bagay sa yo pou kreye yon tab ak done dinamik. Ann tounen nan Reyaji. Kouman mwen ka chache done yo nan sèvè a ak React?

-Oke, ou aktyèlman pa chache done yo ak React, ou jis montre done yo ak React.

Oh, modi mwen. Se konsa, ki sa ou itilize pou chache done yo?

-Ou itilize Fetch pou chache done yo nan sèvè a.

mwen regrèt? Ou itilize Fetch pou w al chache done yo? Nenpòt moun ki bay non bagay sa yo bezwen yon thesaurus.

-Mwen konnen vre? Chèche se non aplikasyon natif natal pou fè XMLHttpRequests kont yon sèvè.

Oh, se konsa AJAX.

-AJAX se jis itilize XMLHttpRequests. Men, asire w. Fetch pèmèt ou fè AJAX ki baze sou pwomès, ki Lè sa a, ou ka rezoud pou fè pou evite lanfè a callback.

Rele lanfè?

-Wi. Chak fwa ou fè yon demann asynchrone kont sèvè a, ou bezwen rete tann pou repons li yo, ki Lè sa a, fè ou ajoute yon fonksyon nan yon fonksyon, ki rele piramid la callback soti nan lanfè.

Oh, ok. Ak bagay sa a pwomès rezoud li?

-Vreman. Lè w manipile apèl ou yo atravè pwomès, ou ka ekri pi fasil pou w konprann kòd, moke yo epi teste yo, epitou w ap fè demann similtane alafwa epi tann jiskaske yo tout chaje.

Epi sa ka fè ak Fetch?

-Wi, men sèlman si itilizatè ou an sèvi ak yon navigatè Evergreen, otreman ou bezwen mete yon Polyfill Fetch oswa itilize Request, Bluebird oswa Axios.

Konbyen bibliyotèk mwen bezwen konnen pou Bondye? Konbyen ladan yo?

-Se JavaScript. Gen plizyè milye bibliyotèk ki tout fè menm bagay la. Nou konnen bibliyotèk, an reyalite, nou gen pi bon bibliyotèk yo. Bibliyotèk nou yo gwo, epi pafwa nou mete foto Guy Fieri ladan yo.

Ou sot di Guy Fieri? Ann fini ak sa. Kisa bibliyotèk Bluebird, Request, Axios sa yo fè?

-Yo bibliyotèk pou fè XMLHttpRequests ki retounen pwomès.

Èske metòd AJAX jQuery a pa t kòmanse retounen pwomès tou?

-Nou pa sèvi ak mo "J" an 2016 ankò. Jis itilize Fetch, epi polyfill li lè li pa nan yon navigatè oswa itilize Bluebird, Request oswa Axios pito. Lè sa a, jere pwomès la ak tann nan yon fonksyon async ak boom, ou gen koule kontwòl apwopriye.

Se twazyèm fwa ou mansyone tann men mwen pa gen okenn lide kisa li ye.

-Atann pèmèt ou bloke yon apèl asynchrone, sa ki pèmèt ou gen pi bon kontwòl sou lè done yo ap chache epi an jeneral ogmante lizibilite kòd. Li awizom, ou jis bezwen asire w ke ou ajoute prereglaj etap-3 nan Babel, oswa itilize sentaks-async-fonksyon ak transfòme-async-a-dèlko plugin.

Sa a se fou.

-Non, fou se reyalite a ou bezwen prekonpile kòd Typescript ak Lè sa a, transpile li ak Babel yo sèvi ak tann.

Ki sa? Li pa enkli nan Typescript?

-Li fè sa nan pwochen vèsyon an, men apati vèsyon 1.7 li sèlman vize ES6, kidonk si ou vle itilize tann nan navigatè a, premye ou bezwen konpile kòd Typescript ou a vize ES6 ak Lè sa a, Babel ki kaka jiska sib ES5.

Nan pwen sa a mwen pa konnen kisa pou m di.

-Gade, li fasil. Kòd tout bagay nan Typescript. Tout modil ki itilize Fetch konpile yo pou vize ES6, transpile yo ak Babel sou yon prereglaj etap-3, epi chaje yo ak SystemJS. Si ou pa gen Fetch, polyfill li, oswa itilize Bluebird, Request oswa Axios, epi okipe tout pwomès ou yo ak tann.

Nou gen definisyon trè diferan nan fasil. Se konsa, ak seremoni sa a mwen finalman chache done yo e kounye a, mwen ka montre li ak React dwa?

-Èske aplikasyon w lan pral okipe nenpòt chanjman nan eta a?

Err, mwen pa panse sa. Mwen jis bezwen montre done yo.

-Oh, di Bondye mèsi. Sinon mwen ta dwe eksplike ou Flux, ak aplikasyon tankou Flummox, Alt, Fluxible. Malgre ke yo dwe onèt ou ta dwe itilize Redux.

Mwen pral jis vole sou non sa yo. Ankò, mwen jis bezwen montre done yo.

-O, si w ap jis montre done yo ou pa t 'bezwen React pou kòmanse. Ou ta byen ak yon motè modèl.

Èske w ap jwe m? Ou panse sa komik? Èske se konsa ou trete moun ou renmen yo?

-Mwen te jis eksplike sa ou ta ka itilize.

Sispann. Jis sispann.

-Mwen vle di, menm si li jis lè l sèvi avèk motè modèl, mwen ta toujou itilize yon Combo Typescript + SystemJS + Babel si mwen te ou.

Mwen bezwen montre done sou yon paj, pa fè fatalite MK orijinal Sub Zero a. Jis di m 'ki motè modèl yo sèvi ak epi mwen pral pran li soti nan la.

-Genyen anpil, kiyès ou abitye?

Ugh, pa ka sonje non an. Se te yon bon bout tan de sa.

-jTemplates? jQote? PI?

Erè, pa sonnen yon klòch. Yon lòt?

-Transparans? JSRender? MarkupJS? KnockoutJS? Sa a te gen de-fason obligatwa.

Yon lòt?

-PlatesJS? jQuery-tmpl? Guidon? Gen kèk moun ki toujou sèvi ak li.

Petèt. Èske gen menm jan ak dènye sa a?

- Moustach, souliye? Mwen panse ke kounye a menm lodash gen youn yo dwe onèt, men sa yo se kalite 2014.

Err.. petèt li te pi nouvo.

-Jade? DustJS?

Non.

-DotJS? EJS?

Non.

-Nunjucks? ECT?

Non.

-Mah, pèsonn pa renmen sentaks Coffeescript de tout fason. Jade?

Non, ou deja di Jade.

-Mwen te vle di Pug. Mwen te vle di Jade. Mwen vle di, Jade se kounye a Pug.

Soupi. Non. Pa ka sonje. Kiyès ou ta itilize?

-Pwobableman jis ES6 natif natal modèl fisèl.

Kite m 'devine. Epi sa mande pou ES6.

-Kòrèk.

Ki, selon ki navigatè m ap itilize bezwen Babel.

-Kòrèk.

Ki, si mwen vle enkli san yo pa ajoute bibliyotèk debaz la tout antye, mwen bezwen chaje li kòm yon modil soti nan npm.

-Kòrèk.

Ki, mande Browserify, oswa Wepback, oswa gen plis chans ke lòt bagay yo rele SystemJS.

-Kòrèk.

Ki, sof si li nan Webpack, depreferans ta dwe jere pa yon moun kap kouri travay.

-Kòrèk.

Men, depi mwen ta dwe itilize pwogramasyon fonksyonèl ak lang tape mwen premye bezwen pre-konpile Typescript oswa ajoute bagay sa a Flow.

-Kòrèk.

Apre sa, voye sa bay Babèl si mwen vle itilize tann.

-Kòrèk.

Se konsa, mwen ka Lè sa a, sèvi ak Fetch, pwomès, ak kontwòl koule ak tout sa ki majik.

-Jis pa bliye polyfill Fetch si li pa sipòte, Safari toujou pa ka okipe li.

Ou konnen ki sa. Mwen panse ke nou fini isit la. Aktyèlman, mwen panse mwen fini. Mwen fini ak entènèt la, mwen fini ak JavaScript tout ansanm.

-Sa a bon, nan kèk ane nou tout yo pral kodaj nan Elm oswa WebAssembly.

Mwen jis pral deplase tounen nan backend la. Mwen jis pa ka okipe anpil chanjman sa yo ak vèsyon ak edisyon ak konpile ak transpilers. Kominote JavaScript se fou si li panse nenpòt moun ka kenbe moute ak sa a.

-Mwen tande ou. Lè sa a, ou ta dwe eseye kominote a Python.

Poukisa?

- Janm tande pale de Python 3?

Mizajou: Mèsi paske w montre erè tipografi ak erè, mwen pral mete ajou atik la jan yo note sa. Diskisyon nan HackerNews ak Reddit .