Kādas ir sajūtas apgūt JavaScript 2016. gadā

Šī raksta rakstīšanas laikā netika izveidots neviens JavaScript ietvars.

Tālākais ir iedvesmots no Circle CI raksta “Tā ir nākotne”. Oriģinālu varat izlasīt šeit . Šis gabals ir tikai viedoklis, un tāpat kā jebkuru JavaScript ietvaru, to nevajadzētu uztvert pārāk nopietni.

Sveiki, es saņēmu šo jauno tīmekļa projektu, bet, godīgi sakot, dažus gadus neesmu daudz kodējis tīmeklī, un esmu dzirdējis, ka ainava ir nedaudz mainījusies. Jūs esat visjaunākais tīmekļa izstrādātājs šeit, vai ne?

-Patiesais termins ir Front End inženieris, bet jā, es esmu īstais puisis. Es nodarbojos ar tīmekli 2016. gadā. Vizualizācijas, mūzikas atskaņotāji, lidojoši droni, kas spēlē futbolu. Es tikko atgriezos no JsConf un ReactConf, tāpēc pārzinu jaunākās tehnoloģijas tīmekļa lietotņu izveidei.

Forši. Man ir jāizveido lapa, kurā tiek parādītas jaunākās lietotāju darbības, tāpēc man vienkārši jāiegūst dati no REST galapunkta un jāparāda tie kaut kādā filtrējamā tabulā un jāatjaunina, ja serverī kaut kas mainās. Es domāju, varbūt izmantot jQuery, lai iegūtu un parādītu datus?

-Ak dievs, nē, neviens vairs neizmanto jQuery. Jums vajadzētu mēģināt iemācīties React, tas ir 2016. gads.

Ak, labi. Kas ir Reaģēt?

-Tā ir lieliska bibliotēka, ko izveidojuši daži Facebook darbinieki. Tā patiešām nodrošina jūsu lietojumprogrammas kontroli un veiktspēju, ļaujot jums ļoti viegli apstrādāt visas skata izmaiņas.

Tas izklausās glīti. Vai varu izmantot React, lai parādītu datus no servera?

-Jā, bet vispirms jums savā tīmekļa lapā jāpievieno React un React DOM kā bibliotēka.

Pagaidiet, kāpēc divas bibliotēkas?

- Tātad viena ir faktiskā bibliotēka, bet otrā ir paredzēta manipulēšanai ar DOM, ko tagad varat aprakstīt JSX.

JSX? Kas ir JSX?

-JSX ir tikai JavaScript sintakses paplašinājums, kas izskatās gandrīz kā XML. Tas ir vēl viens veids, kā aprakstīt DOM, domājiet par to kā labāku HTML.

Kas vainas HTML?

-Ir 2016. gads. Neviens vairs nekodē HTML tieši.

Pareizi. Jebkurā gadījumā, ja es pievienoju šīs divas bibliotēkas, es varu izmantot React?

-Ne gluži. Jums jāpievieno Babel, un pēc tam varat izmantot React.

Vēl viena bibliotēka? Kas ir Bābele?

-Ak, Babel ir transpilators, kas ļauj atlasīt mērķauditoriju noteiktās JavaScript versijās, kamēr kodējat jebkurā JavaScript versijā. Lai izmantotu ReactJS, jums nav OBLIGĀTI jāiekļauj Babel, taču, ja vien jūs to nedarāt, jūs esat iestrēdzis ar ES5 izmantošanu, un būsim reāli, tas ir 2016. gads, jums vajadzētu kodēt ES2016+, tāpat kā to dara pārējie foršie bērni.

ES5? ES2016+? Es te apmaldos. Kas ir ES5 un ES2016+?

-ES5 apzīmē ECMAScript 5. Tas ir izdevums, kuru mērķauditorija ir lielākā daļa cilvēku, jo mūsdienās to ir ieviesusi lielākā daļa pārlūkprogrammu.

ECMAScript?

-Jā, jūs zināt, skriptu standarta JavaScript pamatā bija 1999. gadā pēc tā sākotnējās izlaišanas 1995. gadā, toreiz, kad JavaScript tika nosaukts par Livescript un darbojās tikai Netscape Navigator. Toreiz tas bija ļoti netīrs, taču, par laimi, tagad viss ir ļoti skaidrs, un mums ir, piemēram, 7 šīs ieviešanas izdevumi.

7 izdevumi. Pa īstam. Un ES5 un ES2016+ ir?

-Attiecīgi piektais un septītais izdevums.

Pagaidiet, kas notika ar sesto?

-Tu domā ES6? Jā, es domāju, katrs izdevums ir iepriekšējā izdevuma superkopa, tāpēc, ja izmantojat ES2016+, jūs izmantojat visas iepriekšējo versiju funkcijas.

Pareizi. Un kāpēc tad izmantot ES2016+, nevis ES6?

-Nu, jūs VARĒTU izmantot ES6, taču, lai izmantotu tādas lieliskas funkcijas kā asinhronizācija un gaidīšana, jums ir jāizmanto ES2016+. Pretējā gadījumā jūs esat iestrēdzis ar ES6 ģeneratoriem ar korutīnām, lai bloķētu asinhronos zvanus pareizai vadības plūsmai.

Man nav ne jausmas, ko jūs tikko teicāt, un visi šie nosaukumi ir mulsinoši. Paskatieties, es tikai ielādēju daudz datu no servera, agrāk varēju vienkārši iekļaut jQuery no CDN un vienkārši iegūt datus ar AJAX zvaniem. Kāpēc es nevaru to izdarīt?

-Ir 2016. gads, neviens vairs neizmanto jQuery, tas nonāk spageti koda gūzmā. Visi to zina.

Pareizi. Tāpēc mana alternatīva ir ielādēt trīs bibliotēkas, lai iegūtu datus un parādītu HTML tabulu.

- Jūs iekļaujat šīs trīs bibliotēkas, bet apvienojat tās ar moduļu pārvaldnieku, lai ielādētu tikai vienu failu.

es redzu. Un kas ir moduļu pārvaldnieks?

-Definīcija ir atkarīga no vides, taču tīmeklī mēs parasti domājam jebko, kas atbalsta AMD vai CommonJS moduļus.

Riiight. Un AMD un CommonJS ir…?

- Definīcijas. Ir veidi, kā aprakstīt vairāku JavaScript bibliotēku un klašu mijiedarbību. Ziniet, eksportē un pieprasa? Varat rakstīt vairākus JavaScript failus, kas definē AMD vai CommonJS API, un varat izmantot kaut ko līdzīgu Browserify, lai tos apvienotu.

Labi, tam ir jēga... Es domāju. Kas ir Browserify?

-Tas ir rīks, kas ļauj apvienot CommonJS aprakstītās atkarības failiem, kurus var palaist pārlūkprogrammā. Tas tika izveidots, jo lielākā daļa cilvēku publicē šīs atkarības npm reģistrā.

npm reģistrs?

-Tā ir ļoti liela publiska repozitorija, kurā gudri cilvēki ievieto kodu un atkarības kā moduļus.

Tāpat kā CDN?

-Ne īsti. Tā vairāk atgādina centralizētu datu bāzi, kurā ikviens var publicēt un lejupielādēt bibliotēkas, lai jūs varētu tās izmantot lokāli izstrādei un pēc tam augšupielādēt CDN, ja vēlaties.

Ak, kā Bower!

-Jā, bet tagad ir 2016. gads, Bower vairs neviens nelieto.

Ak, es saprotu... vai tad man ir jālejupielādē bibliotēkas no npm?

-Jā. Piemēram, ja vēlaties izmantot React, lejupielādējiet moduli React un importējiet to savā kodā. To var izdarīt gandrīz katrā populārajā JavaScript bibliotēkā.

Ak, kā Angular!

-Angular ir tik 2015. Bet jā. Angular būtu tur līdzās VueJS vai RxJS un citām foršām 2016. gada bibliotēkām. Vai vēlaties uzzināt par tiem?

Paliksim pie React, es jau tagad mācos pārāk daudz lietu. Tātad, ja man ir nepieciešams izmantot React, es to ienesu no šī npm un pēc tam izmantoju šo pārlūkprogrammas failu?

-Jā.

Šķiet pārāk sarežģīti, lai vienkārši satvertu virkni atkarību un sasaistītu tās kopā.

-Tā ir, tāpēc jūs izmantojat uzdevumu pārvaldnieku, piemēram, Grunt vai Gulp vai Broccoli, lai automatizētu Browserify palaišanu. Heck, jūs pat varat izmantot Mimosa.

Grunt? Gulp? Brokoļi? Mimoza? Par velnu mēs tagad runājam?

-Uzdevumu vadītāji. Bet viņi vairs nav forši. Mēs tos izmantojām, piemēram, 2015. gadā, tad izmantojām Makefiles, bet tagad visu aptinam ar Webpack.

Makefaili? Es domāju, ka tas galvenokārt tika izmantots C vai C++ projektos.

-Jā, bet acīmredzot tīmeklī mums patīk sarežģīt lietas un pēc tam atgriezties pie pamatiem. Mēs to darām katru gadu, vienkārši pagaidiet, mēs veiksim montāžu tīmeklī pēc gada vai diviem.

Nopūta. Vai pieminējāt kaut ko, ko sauc par Webpack?

-Tas ir vēl viens pārlūkprogrammas moduļu pārvaldnieks, vienlaikus arī sava veida uzdevumu izpildītājs. Tā ir kā labāka Browserify versija.

Ak, labi. Kāpēc tas ir labāk?

-Nu, varbūt ne labāk, tas tikai vairāk domā par to, kā jūsu atkarības jāsaista. Webpack ļauj izmantot dažādus moduļu pārvaldniekus, nevis tikai CommonJS, tā, piemēram, vietējos ES6 atbalstītos moduļus.

Mani ļoti mulsina šī CommonJS/ES6 lieta.

-Ikviens ir, bet jums vairs nevajadzētu rūpēties par SystemJS.

Jēzus krist, cits lietvārds-js. Labi, un kas ir šī SystemJS?

-Atšķirībā no pārlūkprogrammas Browserify un Webpack 1.x, SystemJS ir dinamisks moduļu ielādētājs, kas ļauj saistīt vairākus moduļus vairākos failos, nevis apvienot tos vienā lielā failā.

Pagaidiet, bet es domāju, ka mēs vēlamies izveidot savas bibliotēkas vienā lielā failā un ielādēt to!

-Jā, bet tāpēc, ka tagad ir pieejams HTTP/2, vairāki HTTP pieprasījumi patiesībā ir labāki.

Pagaidiet, vai mēs nevaram vienkārši pievienot trīs sākotnējās bibliotēkas React?

-Ne īsti. Es domāju, ka jūs varētu pievienot tos kā ārējos skriptus no CDN, taču tad jums joprojām būs jāiekļauj Babel.

Nopūta. Un tas ir slikti, vai ne?

-Jā, jūs iekļautu visu Babel-core, un tas nebūtu efektīvs ražošanai. Ražošanas laikā jums ir jāveic virkne iepriekšēju uzdevumu, lai sagatavotu projektu, kas liek sātana izsaukšanas rituālam izskatīties kā vārītu olu receptei. Jums ir jāsamazina līdzekļi, jāpadara tie neglīti, jāiekļauj css pirmajā ekrānā, jāatliek skripti, kā arī

Es sapratu, es sapratu. Tātad, ja jūs neiekļautu bibliotēkas tieši CDN, kā jūs to darītu?

-Es to pārveidu no Typescript, izmantojot kombināciju Webpack + SystemJS + Babel.

Mašīnraksts? Es domāju, ka mēs kodējam JavaScript!

-Mašīnraksts IR JavaScript vai, labāk sakot, JavaScript superkopa, precīzāk JavaScript versijā ES6. Vai zināt, tā sestā versija, par kuru mēs runājām iepriekš?

Es domāju, ka ES2016+ jau bija ES6 supersets! KĀPĒC mums tagad ir vajadzīga šī lieta, ko sauc par mašīnrakstu?

-Ak, jo tas ļauj mums izmantot JavaScript kā drukātu valodu un samazināt izpildlaika kļūdas. Ir 2016. gads, jums vajadzētu savam JavaScript kodam pievienot dažus veidus.

Un Typescript acīmredzot to dara.

-Arī Flow, lai gan tā pārbauda tikai rakstīšanu, kamēr Typescript ir JavaScript superkopa, kas ir jākompilē.

Nopūta… un Flow ir?

-Tā ir statiska tipa pārbaudītājs, ko izveidojuši daži Facebook puiši. Viņi to kodēja OCaml, jo funkcionālā programmēšana ir lieliska.

OCaml? Funkcionālā programmēšana?

-Tas ir tas, ko mūsdienu bērni izmanto, zini, 2016. gads? Funkcionālā programmēšana? Augstas kvalitātes funkcijas? Karijs? Tīras funkcijas?

Man nav ne jausmas, ko tu tikko teici.

-Sākumā neviens to nedara. Paskatieties, jums vienkārši jāzina, ka funkcionālā programmēšana ir labāka par OOP, un tieši to mums vajadzētu izmantot 2016. gadā.

Pagaidiet, es iemācījos OOP koledžā, man likās, ka tas ir labi?

-Tāpat Java bija, pirms to iegādājās Oracle. Es domāju, ka OOP bija labs savulaik, un to izmanto arī šodien, taču tagad visi saprot, ka stāvokļu modificēšana ir līdzvērtīga mazuļu spārdīšanai, tāpēc tagad visi pāriet uz nemainīgiem objektiem un funkcionālu programmēšanu. Haskell puiši to sauca jau gadiem ilgi, un neļaujiet man sākt ar Elm puišiem, bet par laimi tīmeklī tagad ir tādas bibliotēkas kā Ramda, kas ļauj izmantot funkcionālu programmēšanu vienkāršā JavaScript.

Vai jūs vienkārši nometat vārdus tā labad? Kas pie velna ir Ramnda?

-Nē. Ramda. Tāpat kā Lambda. Vai zināt, Deivida Čembersa bibliotēka?

Deivids kurš?

- Deivids Čemberss. Foršs puisis. Spēlē zemisku apvērsuma spēli. Viens no Ramda līdzstrādniekiem. Ja nopietni domājat apgūt funkcionālo programmēšanu, pārbaudiet arī Eriku Meijeru.

Un Ēriks Meijers ir...?

-Arī funkcionāls programmētājs. Lielisks puisis. Viņam ir vairākas prezentācijas, kurās viņš izmet Agile, izmantojot šo dīvaino krāsu kreklu. Jums vajadzētu arī pārbaudīt dažas lietas no Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Labi. Es tevi tur apturēšu. Tas viss ir labi un labi, bet, manuprāt, tas viss ir tik sarežģīti un nevajadzīgi, lai tikai iegūtu datus un tos parādītu. Esmu diezgan pārliecināts, ka man nav jāzina šie cilvēki vai jāapgūst visas šīs lietas, lai izveidotu tabulu ar dinamiskiem datiem. Atgriezīsimies pie React. Kā es varu iegūt datus no servera, izmantojot React?

- Jūs faktiski neiegūstat datus, izmantojot React, bet tikai parādat datus ar React.

Ak, sasodīts. Tātad, ko jūs izmantojat datu iegūšanai?

-Jūs izmantojat Fetch, lai ielādētu datus no servera.

Es atvainojos? Vai izmantojat funkciju Fetch, lai iegūtu datus? Ikvienam, kurš šīs lietas nosauc, ir nepieciešams tēzaurs.

-Es zinu pareizi? Ienesiet, ka tas ir vietējās implementācijas nosaukums, lai veiktu XMLHttpRequests pret serveri.

Ak, tātad AJAX.

-AJAX ir tikai XMLHttpRequests izmantošana. Bet noteikti. Fetch ļauj veikt AJAX, pamatojoties uz solījumiem, ko pēc tam varat atrisināt, lai izvairītos no atzvanīšanas elles.

Atzvanīšanas elle?

-Jā. Katru reizi, kad veicat asinhronu pieprasījumu pret serveri, jums jāgaida tā atbilde, kas pēc tam liek jums pievienot funkciju funkcijai, ko sauc par atzvanīšanas piramīdu no elles.

Ak, labi. Un šī solījuma lieta to atrisina?

- Patiešām. Manipulējot ar atzvaniem, izmantojot solījumus, varat rakstīt vieglāk saprotamu kodu, izsmiet un pārbaudīt tos, kā arī veikt vienlaikus pieprasījumus un gaidīt, līdz tie visi tiks ielādēti.

Un to var izdarīt ar Fetch?

-Jā, bet tikai tad, ja jūsu lietotājs izmanto mūžzaļo pārlūkprogrammu, pretējā gadījumā jums ir jāiekļauj Fetch polyfill vai jāizmanto Request, Bluebird vai Axios.

Cik bibliotēku man ir jāzina, dieva dēļ? Cik viņu ir?

-Tas ir JavaScript. Ir jābūt tūkstošiem bibliotēku, kas visas dara vienu un to pašu. Mēs zinām bibliotēkas, patiesībā mums ir labākās bibliotēkas. Mūsu bibliotēkas ir milzīgas, un dažreiz mēs tajās iekļaujam Gaja Fieri attēlus.

Vai jūs tikko teicāt Gaju Fieri? Beigsim ar to. Ko dara šīs Bluebird, Request, Axios bibliotēkas?

-Tās ir bibliotēkas, lai veiktu XMLHttpRequests, kas atgriež solījumus.

Vai jQuery AJAX metode arī nesāka dot solījumus?

-2016. gadā mēs vairs neizmantojam vārdu “J”. Vienkārši izmantojiet Fetch un aizpildiet to, ja tas nav pārlūkprogrammā, vai izmantojiet Bluebird, Request vai Axios. Pēc tam pārvaldiet solījumu, izmantojot asinhrono funkciju un uzplaukumu, jums ir pareiza kontroles plūsma.

Tā ir trešā reize, kad jūs pieminējat, gaidiet, bet man nav ne jausmas, kas tas ir.

-Await ļauj bloķēt asinhronu zvanu, ļaujot jums labāk kontrolēt, kad tiek iegūti dati, un kopumā palielinot koda lasāmību. Tas ir lieliski, jums vienkārši jāpārliecinās, ka pakalpojumā Babel pievienojat 3. stadijas sākotnējo iestatījumu vai izmantojiet sintakses-async-funkcijas un spraudni pārveidot-async-to-generator.

Tas ir ārprāts.

-Nē, ārprātīgs ir fakts, ka jums ir nepieciešams iepriekš kompilēt Typescript kodu un pēc tam pārsūtīt to ar Babel, lai izmantotu gaidīšanu.

Ko? Vai tas nav iekļauts mašīnrakstā?

-Tā darbojas nākamajā versijā, bet no versijas 1.7 tā ir paredzēta tikai ES6, tādēļ, ja vēlaties pārlūkprogrammā izmantot await, vispirms ir jākompilē Typescript kods, kas mērķēts uz ES6 un pēc tam uz Babel, kas ir paredzēts ES5.

Šobrīd es nezinu, ko teikt.

- Paskaties, tas ir viegli. Kodējiet visu mašīnrakstā. Visi moduļi, kas izmanto programmu Fetch, tos kompilē, lai mērķētu uz ES6, pārveido tos ar Babel 3. stadijas iepriekš iestatītā veidā un ielādē tos ar SystemJS. Ja jums nav Fetch, aizpildiet to vai izmantojiet Bluebird, Request vai Axios un izpildiet visus savus solījumus ar gaidīšanu.

Mums ir ļoti dažādas vieglas definīcijas. Tātad, izmantojot šo rituālu, es beidzot ieguvu datus un tagad varu tos parādīt, izmantojot React, vai ne?

-Vai jūsu lietojumprogramma apstrādās kādas stāvokļa izmaiņas?

Err, es tā nedomāju. Man tikai jāparāda dati.

-Ak, paldies dievam. Pretējā gadījumā man būtu jums jāpaskaidro Flux un tādas ieviešanas kā Flummox, Alt, Fluxible. Lai gan, godīgi sakot, jums vajadzētu izmantot Redux.

Es vienkārši lidošu pāri šiem vārdiem. Atkal man vienkārši jāparāda dati.

-Ak, ja jūs vienkārši rādāt datus, kas jums nebija nepieciešami, vispirms reaģējiet. Jums būtu labi ar šablonu dzinēju.

tu joko? Vai jūs domājat, ka tas ir smieklīgi? Vai tā tu izturies pret saviem mīļajiem?

-Es tikai paskaidroju, ko tu varētu izmantot.

Stop. Vienkārši apstājieties.

-Es domāju, pat ja tas ir tikai veidņu dzinēja izmantošana, es joprojām izmantotu kombināciju Typescript + SystemJS + Babel jūsu vietā.

Man ir jāparāda dati lapā, nevis jāveic Sub Zero sākotnējā MK nāve. Vienkārši pasakiet man, kādu šablonu dzinēju izmantot, un es to paņemšu no turienes.

-Ir daudz, kuru tu pazīsti?

Uh, neatceros nosaukumu. Tas bija sen.

-jVeidnes? jQote? TĪRS?

Err, nezvana. Vēl viens?

- Caurspīdība? JSRender? MarkupJS? KnockoutJS? Tam bija divvirzienu iesiešana.

Vēl viens?

-PlatesJS? jQuery-tmpl? Stūres? Daži cilvēki to joprojām izmanto.

Varbūt. Vai ir līdzīgas pēdējai?

-Ūsas, pasvītrojums? Es domāju, ka tagad, godīgi sakot, pat lodash ir viens, bet tie ir sava veida 2014. gads.

Err.. varbūt tas bija jaunāks.

-Jade? DustJS?

Nē.

-DotJS? EJS?

Nē.

-Nunjuks? ECT?

Nē.

-Mah, vienalga nevienam nepatīk Coffeescript sintakse. Jade?

Nē, tu jau teici Džeida.

-Es domāju Mopsi. Es domāju Džeidu. Es domāju, ka Džeida tagad ir Mopsis.

Nopūta. Nē. Neatceros. Kuru jūs izmantotu?

-Iespējams, tikai ES6 vietējās veidņu virknes.

Ļaujiet man uzminēt. Un tas prasa ES6.

- Pareizi.

Kurai, atkarībā no tā, kādu pārlūkprogrammu izmantoju, ir nepieciešama Babel.

- Pareizi.

Kuru, ja es vēlos iekļaut, nepievienojot visu galveno bibliotēku, man tas ir jāielādē kā modulis no npm.

- Pareizi.

Tam ir nepieciešams Browserify vai Wepback, vai, visticamāk, cita lieta, ko sauc par SystemJS.

- Pareizi.

Ideālā gadījumā tas būtu jāpārvalda uzdevumu izpildītājam, ja vien tas nav Webpack.

- Pareizi.

Bet, tā kā man vajadzētu izmantot funkcionālo programmēšanu un drukātās valodas, vispirms ir nepieciešams iepriekš kompilēt Typescript vai pievienot šo Flow lietu.

- Pareizi.

Un pēc tam nosūtiet to uz Babel, ja vēlos izmantot, gaidiet.

- Pareizi.

Tāpēc es varu izmantot funkciju Ienese, solījumus un kontrolēt plūsmu un visu to burvību.

-Neaizmirstiet atkārtoti aizpildīt Fetch, ja tas netiek atbalstīts, jo Safari joprojām nevar ar to rīkoties.

Zini ko. Es domāju, ka mēs šeit esam beiguši. Patiesībā es domāju, ka esmu pabeidzis. Esmu pabeidzis ar tīmekli, ar JavaScript esmu pabeidzis.

-Tas ir labi, pēc dažiem gadiem mēs visi kodēsim Elm vai WebAssembly.

Es vienkārši atgriezīšos atpakaļ uz aizmuguri. Es vienkārši nevaru tikt galā ar šīm daudzajām izmaiņām un versijām un izdevumiem, un kompilatoriem un pārsūtītājiem. JavaScript kopiena ir neprātīga, ja domā, ka ikviens var tam sekot.

-Es tevi dzirdu. Tad jums vajadzētu izmēģināt Python kopienu.

Kāpēc?

- Vai esat kādreiz dzirdējuši par Python 3?

Atjauninājums: Paldies, ka norādījāt drukas un kļūdas, es atjaunināšu rakstu, kā norādīts. Diskusija HackerNews un Reddit .