Koks jausmas mokytis JavaScript 2016 m

Rašant šį straipsnį nebuvo sukurta jokių JavaScript karkasų.

Toliau pateikta informacija yra įkvėpta „Circle CI“ straipsnio „Tai ateitis“. Originalą galite perskaityti čia . Šis kūrinys yra tik nuomonė ir, kaip ir bet kuri JavaScript sistema, nereikėtų į jį žiūrėti pernelyg rimtai.

Ei, aš gavau šį naują žiniatinklio projektą, bet, tiesą pasakius, keletą metų nebuvau užkodavęs daug interneto ir girdėjau, kad kraštovaizdis šiek tiek pasikeitė. Jūs esate pats naujausias žiniatinklio kūrėjas, tiesa?

-Tikrasis terminas yra Front End inžinierius, bet taip, aš esu tinkamas vaikinas. Kuriu internetą 2016 m. Vizualizacijos, muzikos grotuvai, skraidantys dronai, žaidžiantys futbolą, kaip žinote. Ką tik grįžau iš JsConf ir ReactConf, todėl žinau naujausias žiniatinklio programėlių kūrimo technologijas.

Kietas. Turiu sukurti puslapį, kuriame būtų rodoma naujausia vartotojų veikla, todėl man tereikia gauti duomenis iš REST galinio taško ir parodyti juos tam tikroje filtruojamoje lentelėje ir atnaujinti, jei kas nors pasikeičia serveryje. Galvojau, gal naudoti jQuery duomenims gauti ir rodyti?

-O Dieve, ne, niekas nebenaudoja jQuery. Turėtumėte pabandyti išmokti React, tai 2016 m.

O, gerai. Kas yra Reaguoti?

- Tai labai šauni biblioteka, kurią sukūrė kai kurie „Facebook“ darbuotojai. Ji tikrai suteikia jūsų programos valdymą ir našumą, nes leidžia labai lengvai valdyti bet kokius rodinio pakeitimus.

Tai skamba tvarkingai. Ar galiu naudoti React rodyti duomenis iš serverio?

-Taip, bet pirmiausia turite įtraukti React ir React DOM kaip biblioteką savo tinklalapyje.

Palaukite, kodėl dvi bibliotekos?

- Taigi viena yra tikroji biblioteka, o antroji skirta manipuliuoti DOM, kurią dabar galite aprašyti JSX.

JSX? Kas yra JSX?

-JSX yra tik „JavaScript“ sintaksės plėtinys, panašus į XML. Tai dar vienas būdas apibūdinti DOM, pagalvokite apie tai kaip apie geresnį HTML.

Kas negerai su HTML?

-Tai 2016 metai. Niekas nebekoduoja HTML tiesiogiai.

Teisingai. Bet kokiu atveju, jei pridėsiu šias dvi bibliotekas, galiu naudoti „React“?

- Ne visai. Turite pridėti „Babel“, tada galėsite naudoti „React“.

Kita biblioteka? Kas yra Babelis?

– O, „Babel“ yra transpiliatorius, leidžiantis taikyti pagal konkrečias „JavaScript“ versijas, kol koduojate bet kurią „JavaScript“ versiją. Jūs PRIVALOTE įtraukti Babel, kad galėtumėte naudoti ReactJS, bet jei to nepadarysite, jums įstrigo ES5 naudojimas, ir būkime tikri, kad dabar 2016 m., turėtumėte koduoti ES2016+, kaip tai daro kiti šaunūs vaikai.

ES5? ES2016+? Aš čia pasiklystu. Kas yra ES5 ir ES2016+?

-ES5 reiškia ECMAScript 5. Tai leidimas, į kurį orientuojasi dauguma žmonių, nes šiais laikais jį įdiegė dauguma naršyklių.

ECMAScript?

– Taip, žinote, scenarijų standartas „JavaScript“ buvo pagrįstas 1999 m., po jo pirminio išleidimo 1995 m., tada, kai „JavaScript“ buvo pavadintas „Livescript“ ir veikė tik „Netscape Navigator“. Tada tai buvo labai nepatogu, bet, laimei, dabar viskas yra labai aišku ir turime, pavyzdžiui, 7 šio diegimo leidimus.

7 leidimai. Tikrai. O ES5 ir ES2016+ yra?

- Penktasis ir septintasis leidimai atitinkamai.

Palauk, kas atsitiko su šeštuoju?

-Turite omenyje ES6? Taip, turiu omenyje, kad kiekvienas leidimas yra ankstesnio leidimo rinkinys, taigi, jei naudojate ES2016+, naudojate visas ankstesnių versijų funkcijas.

Teisingai. Ir kam tada naudoti ES2016+, o ne ES6?

-Na, jūs GALĖTĖTE naudoti ES6, bet norėdami naudoti puikias funkcijas, pvz., Asinchronizavimą ir laukimą, turite naudoti ES2016+. Priešingu atveju jums įstrigo ES6 generatoriai su korutomis, kurios blokuoja asinchroninius skambučius, kad būtų užtikrintas tinkamas valdymo srautas.

Neįsivaizduoju, ką ką tik pasakėte, ir visi šie vardai yra painūs. Žiūrėkite, aš tik įkeliu krūvą duomenų iš serverio, anksčiau galėjau tiesiog įtraukti jQuery iš CDN ir gauti duomenis su AJAX skambučiais, kodėl negaliu to padaryti?

-Tai 2016 m. žmogus, niekas daugiau nenaudoja jQuery, jis patenka į spagečių kodą. Visi tai žino.

Teisingai. Taigi mano alternatyva yra įkelti tris bibliotekas, kad būtų galima gauti duomenis ir parodyti HTML lentelę.

- Na, jūs įtraukėte tas tris bibliotekas, bet sujungiate jas su modulių tvarkykle, kad įkeltumėte tik vieną failą.

matau. O kas yra modulio valdytojas?

-Apibrėžimas priklauso nuo aplinkos, tačiau žiniatinklyje paprastai turime omenyje bet ką, kas palaiko AMD arba CommonJS modulius.

Riiight. O AMD ir CommonJS yra…?

- Apibrėžimai. Yra būdų, kaip aprašyti, kaip turėtų sąveikauti kelios „JavaScript“ bibliotekos ir klasės. Žinote, eksportuoja ir reikalauja? Galite parašyti kelis JavaScript failus, apibrėžiančius AMD arba CommonJS API, ir galite naudoti kažką panašaus į Browserify, kad juos sujungtumėte.

Gerai, tai prasminga... Manau. Kas yra Browserify?

-Tai įrankis, leidžiantis susieti CommonJS aprašytas priklausomybes su failais, kuriuos galima paleisti naršyklėje. Jis buvo sukurtas, nes dauguma žmonių skelbia šias priklausomybes npm registre.

npm registras?

-Tai labai didelė vieša saugykla, kurioje protingi žmonės deda kodą ir priklausomybes kaip modulius.

Kaip CDN?

- Tikrai ne. Tai labiau panašu į centralizuotą duomenų bazę, kurioje kiekvienas gali publikuoti ir atsisiųsti bibliotekas, todėl galite jas naudoti vietoje plėtrai ir, jei norite, įkelti į CDN.

O, kaip Bower!

-Taip, bet dabar 2016-ieji, Bower niekas nebenaudoja.

O, suprantu... taigi man reikia atsisiųsti bibliotekas iš npm?

-Taip. Pavyzdžiui, jei norite naudoti „React“, atsisiųskite „React“ modulį ir importuokite jį į savo kodą. Tai galite padaryti beveik kiekvienai populiariai „JavaScript“ bibliotekai.

O, kaip Angular!

-Kampinis yra toks 2015. Bet taip. „Angular“ būtų šalia „VueJS“ ar „RxJS“ ir kitų šaunių 2016 m. bibliotekų. Norite sužinoti apie juos?

Laikykimės „React“, aš jau dabar mokausi per daug dalykų. Taigi, jei man reikia naudoti „React“, gaunu jį iš šio npm ir naudoju šį „Browserify“?

-Taip.

Tai atrodo pernelyg sudėtinga tiesiog patraukti daugybę priklausomybių ir jas susieti.

– Taip yra, todėl jūs naudojate užduočių tvarkyklę, pvz., „Grunt“, „Gulp“ ar „Broccoli“, norėdami automatizuoti „Browserify“. Po velnių, netgi galite naudoti „Mimosa“.

Grunt? Gulp? Brokoliai? Mimoza? Po velnių mes dabar kalbame?

- Užduočių vadovai. Bet jie nebėra kieti. Naudojome juos kaip 2015 m., tada naudojome Makefiles, bet dabar viską apvyniojame Webpack.

Makefailai? Maniau, kad tai dažniausiai buvo naudojama C arba C++ projektuose.

-Taip, bet, matyt, žiniatinklyje mums patinka viską sudėtingai ir tada grįžti prie pagrindų. Mes tai darome kasmet, tik palaukite, po metų ar dvejų ketiname surinkti internete.

Atodūsis. Jūs paminėjote kažką, vadinamą Webpack?

-Tai dar vienas naršyklės modulių tvarkyklė, kartu ir užduočių vykdytojas. Tai tarsi geresnė „Browserify“ versija.

O, gerai. Kodėl geriau?

-Na, gal ir ne geriau, tiesiog labiau manoma, kaip reikėtų susieti jūsų priklausomybes. Webpack leidžia naudoti skirtingus modulių tvarkykles, o ne tik CommonJS, taigi, pavyzdžiui, vietinius ES6 palaikomus modulius.

Mane labai supainiojo šis CommonJS/ES6 dalykas.

-Visi yra, bet jums nebereikėtų rūpintis SystemJS.

Jėzus Kristus, kitas daiktavardis-js. Gerai, o kas tai yra SystemJS?

- Na, skirtingai nei Browserify ir Webpack 1.x, SystemJS yra dinamiška modulių įkėlimo programa, leidžianti susieti kelis modulius į kelis failus, o ne sujungti juos į vieną didelį failą.

Palaukite, bet aš maniau, kad norime sukurti savo bibliotekas viename dideliame faile ir įkelti jį!

-Taip, bet kadangi HTTP/2 ateina dabar, kelios HTTP užklausos iš tikrųjų yra geresnės.

Palaukite, taigi ar negalime tiesiog pridėti trijų originalių „React“ bibliotekų??

- Tikrai ne. Turiu galvoje, kad galėtumėte pridėti juos kaip išorinius scenarijus iš CDN, bet tada vis tiek turėsite įtraukti „Babel“.

Atodūsis. Ir tai yra blogai, tiesa?

-Taip, jūs įtrauktumėte visą Babel-core, ir tai nebūtų efektyvu gamybai. Gamindami turite atlikti keletą išankstinių užduočių, kad paruoštumėte projektą, kad šėtono iškvietimo ritualas atrodytų kaip virtų kiaušinių receptas. Turite sumažinti išteklius, juos įbauginti, įterpti css virš matomos ribos, atidėti scenarijus ir

Supratau, supratau. Taigi, jei bibliotekų neįtrauktumėte tiesiogiai į CDN, kaip tai padarytumėte?

-Aš perkelčiau jį iš „Typescript“, naudodamas „Webpack“ + „SystemJS“ + „Babel“ derinį.

Mašinraštis? Maniau, kad koduojame JavaScript!

-Mašinraštis yra „JavaScript“ arba, geriau tariant, „JavaScript“ superrinkinys, tiksliau „JavaScript“ ES6 versijoje. Žinote, ta šeštoji versija, apie kurią kalbėjome anksčiau?

Maniau, kad ES2016+ jau yra ES6 superrinkinys! KODĖL mums dabar reikia šio daikto, vadinamo „Typescript“?

-O, nes tai leidžia mums naudoti „JavaScript“ kaip įvestą kalbą ir sumažinti vykdymo laiko klaidas. Dabar 2016 m., turėtumėte pridėti kai kurių tipų „JavaScript“ kodą.

Ir „Typescript“ akivaizdžiai tai daro.

- Taip pat srautas, nors jis tik tikrina, ar įvesta, o „Typescript“ yra „JavaScript“ superrinkinys, kurį reikia sukompiliuoti.

Atodūsis... o Flow yra?

-Tai statinis tipo tikrintuvas, kurį sukūrė kai kurie „Facebook“ vaikinai. Jie užkodavo jį OCaml, nes funkcinis programavimas yra nuostabus.

OCaml? Funkcinis programavimas?

-Tai, ką šaunūs vaikai naudoja šiais laikais, žinote, 2016 m. Funkcinis programavimas? Aukštos kokybės funkcijos? Kariavimas? Grynos funkcijos?

Neįsivaizduoju, ką tu ką tik pasakei.

- Iš pradžių niekas to nedaro. Žiūrėkite, jums tereikia žinoti, kad funkcinis programavimas yra geresnis nei OOP ir būtent tai turėtume naudoti 2016 m.

Palaukite, aš išmokau OOP koledže, maniau, kad tai gerai?

- Taip buvo ir Java, kol ją nupirko Oracle. Noriu pasakyti, kad OOP buvo geras anais laikais ir vis dar naudojamas šiandien, tačiau dabar visi supranta, kad būsenų modifikavimas yra tolygus kūdikių spardymui, todėl dabar visi pereina prie nekintamų objektų ir funkcinio programavimo. „Haskell“ vaikinai tai vadino daugelį metų, ir nesupraskite manęs nuo „Elm“ vaikinų, bet, laimei, dabar žiniatinklyje turime bibliotekas, tokias kaip „Ramda“, kurios leidžia naudoti funkcinį programavimą paprastu „JavaScript“.

Ar tik dėl to numetate vardus? Kas po velnių yra Ramnda?

-Ne. Ramda. Kaip ir lambda. Žinai, tą Davido Chamberso biblioteką?

Deividas kas?

- Davidas Chambersas. Šaunus vyrukas. Žaidžia žiaurų perversmo žaidimą. Vienas iš Ramda bendradarbių. Taip pat turėtumėte patikrinti Eriką Meijerį, jei rimtai ketinate mokytis funkcinio programavimo.

O Erikas Meijeris yra…?

- Funkcinio programavimo vaikinas taip pat. Nuostabus vyrukas. Jis turi daugybę pristatymų, kuriuose jis iškraipo Agile, naudodamas šiuos keistos spalvos marškinius. Taip pat turėtumėte patikrinti kai kuriuos dalykus iš Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Gerai. Aš tave čia sustabdysiu. Viskas gerai ir gerai, bet manau, kad visa tai yra taip sudėtinga ir nereikalinga, norint tiesiog gauti duomenis ir juos rodyti. Esu tikras, kad man nereikia pažinti šių žmonių ar mokytis visų tų dalykų, kad galėčiau sukurti lentelę su dinaminiais duomenimis. Grįžkime prie „React“. Kaip galiu gauti duomenis iš serverio naudojant „React“?

- Na, jūs iš tikrųjų negaunate duomenų naudodami „React“, tiesiog rodote duomenis naudodami „React“.

O, po velnių. Taigi, ką jūs naudojate duomenims gauti?

- Norėdami gauti duomenis iš serverio, naudojate „Fetch“.

atsiprašau? Naudojate „Fetch“ duomenims gauti? Tam, kas tuos dalykus įvardija, reikia tezauro.

- Ar aš žinau? Gaukite tai vietinio diegimo, skirto serveriui atlikti XMLHttpRequests, pavadinimas.

O, taigi AJAX.

-AJAX yra tik XMLHttpRequests naudojimas. Bet būtinai. „Fettch“ leidžia atlikti AJAX, pagrįstą pažadais, kuriuos galite išspręsti, kad išvengtumėte atgalinio pragaro.

Atšaukti pragarą?

-Taip. Kiekvieną kartą, kai atliekate asinchroninę užklausą prieš serverį, turite laukti jo atsakymo, o tai verčia įtraukti funkciją į funkciją, kuri vadinama atgalinio skambučio piramide iš pragaro.

O, gerai. Ir šis pažadas tai išsprendžia?

- Tikrai. Pažadais manipuliuodami atgaliniais skambučiais galite rašyti lengviau suprantamą kodą, tyčiotis ir išbandyti juos, taip pat vienu metu vykdyti užklausas ir palaukti, kol visos jos bus įkeltos.

Ir tai galima padaryti su „Fetch“?

– Taip, bet tik tuo atveju, jei jūsų vartotojas naudoja amžinai žaliuojančią naršyklę, kitu atveju turite įtraukti „Fetch polyfill“ arba naudoti „Request“, „Bluebird“ arba „Axios“.

Kiek bibliotekų turiu žinoti dėl Dievo meilės? Kiek jų yra?

- Tai JavaScript. Turi būti tūkstančiai bibliotekų, kurios visos daro tą patį. Mes žinome bibliotekas, iš tikrųjų turime geriausias bibliotekas. Mūsų bibliotekos yra didžiulės, ir kartais į jas įtraukiame Guy Fieri nuotraukas.

Ar ką tik pasakėte Guy Fieri? Baigkime tai. Ką veikia šios „Bluebird“, „Request“, „Axios“ bibliotekos?

-Jos yra bibliotekos, kurios atlieka XMLHttpRequests, kurios grąžina pažadus.

Ar „jQuery“ AJAX metodas taip pat nepradėjo duoti pažadų?

– 2016 m. nebenaudojame žodžio „J“. Tiesiog naudokite „Fetch“ ir užpildykite jį, kai jo nėra naršyklėje, arba naudokite „Bluebird“, „Request“ arba „Axios“. Tada valdykite pažadą naudodami asinchronizavimo funkciją ir bumą, turėsite tinkamą valdymo srautą.

Tai jau trečias kartas, kai minite laukti, bet aš neįsivaizduoju, kas tai yra.

„Await“ leidžia užblokuoti asinchroninį skambutį, kad galėtumėte geriau valdyti, kada gaunami duomenys, ir apskritai padidinamas kodo skaitomumas. Tai nuostabu, jums tereikia įsitikinti, kad „Babel“ pridėjote „Stage-3“ išankstinį nustatymą arba naudojate sintaksės-asinchronizavimo funkcijas ir transformavimo asinchronizavimą į generatorių papildinį.

Tai beprotiška.

– Ne, beprotiška tai, kad reikia iš anksto sukompiliuoti „Typescript“ kodą ir tada perkelti jį su „Babel“, kad galėtumėte naudoti laukti.

Ką? Tai neįtraukta į mašinraštį?

-Jis veikia kitoje versijoje, bet nuo 1.7 versijos jis skirtas tik ES6, todėl jei norite naudoti „wait“ naršyklėje, pirmiausia turite sukompiliuoti savo „Typescript“ kodą, skirtą ES6, o tada „Babel“, kuris yra skirtas ES5.

Šiuo metu aš nežinau, ką pasakyti.

- Žiūrėk, tai lengva. Viską užkoduokite „Typescript“. Visi moduliai, naudojantys „Fetch“, sukompiliuoja juos, kad būtų nukreipti į ES6, perkeliami naudojant „Babel“ 3 iš anksto nustatytame etape ir įkeliami naudojant SystemJS. Jei neturite „Fetch“, užpildykite jį arba naudokite „Bluebird“, „Request“ arba „Axios“ ir vykdykite visus pažadus laukdami.

Mes turime labai skirtingus lengvo apibrėžimus. Taigi, atlikęs tą ritualą, pagaliau gavau duomenis ir dabar galiu juos parodyti naudodamas „React“, tiesa?

– Ar jūsų programa apims kokius nors būsenos pokyčius?

Err, nemanau. Man tereikia parodyti duomenis.

-O, ačiū Dievui. Priešingu atveju turėčiau jums paaiškinti „Flux“ ir tokius diegimus kaip „Flummox“, „Alt“, „Fluxible“. Nors, tiesą sakant, turėtumėte naudoti Redux.

Aš tiesiog skrisiu virš tų pavadinimų. Vėlgi, man tiesiog reikia rodyti duomenis.

-O, jei tik rodote duomenis, kurių jums nereikėjo, reaguokite. Jums būtų buvę gerai su šabloniniu varikliu.

Ar tu juokauji? Ar manote, kad tai juokinga? Ar taip elgiatės su savo artimaisiais?

-Aš tik paaiškinau, ką tu gali panaudoti.

Sustok. Tiesiog sustok.

-Turiu galvoje, net jei tai tik šablonų variklis, aš vis tiek naudočiau Typescript + SystemJS + Babel derinį, jei būčiau jūs.

Turiu rodyti duomenis puslapyje, o ne atlikti Sub Zero pradinį MK mirtį. Tiesiog pasakykite man, kokį šablonų variklį naudoti, ir aš jį paimsiu iš ten.

- Yra daug, su kuria tu esi susipažinęs?

Ech, nepamenu pavadinimo. Tai buvo seniai.

-jŠablonai? jQote? GRYNAS?

Err, neskamba. Dar vienas?

- Skaidrumas? JSRender? MarkupJS? KnockoutJS? Tas buvo dvipusis įrišimas.

Dar vienas?

-PlokštėsJS? jQuery-tmpl? Vairas? Kai kurie žmonės jį vis dar naudoja.

Galbūt. Ar yra panašių į pastarąjį?

-Ūsai, pabraukimas? Manau, kad dabar net Lodash turi vieną, jei atvirai, bet tai yra 2014 m.

Err.. gal buvo naujesnis.

- Jade? DustJS?

Nr.

-DotJS? EJS?

Nr.

-Nunjucks? ECT?

Nr.

-Mah, šiaip niekam nepatinka Coffeescript sintaksė. Jade?

Ne, tu jau sakei Jade.

-Turėjau omeny Mopsą. Aš turėjau omeny Jade. Aš turiu galvoje, Jade dabar yra Mopsas.

Atodūsis. Ne. Neprisimenu. Kurią naudotumėt?

-Tikriausiai tik ES6 vietinės šablono eilutės.

Leisk man atspėti. O tam reikia ES6.

-Teisingai.

Kuriam, priklausomai nuo to, kokią naršyklę naudoju, reikia Babel.

-Teisingai.

Kurį, jei noriu įtraukti nepridėdamas visos pagrindinės bibliotekos, turiu ją įkelti kaip modulį iš npm.

-Teisingai.

Tam reikia Browserify arba Wepback arba greičiausiai to kito dalyko, vadinamo SystemJS.

-Teisingai.

Idealiu atveju, jei tai nėra Webpack, tai turėtų valdyti užduočių vykdytojas.

-Teisingai.

Tačiau kadangi turėčiau naudoti funkcinį programavimą ir spausdintas kalbas, pirmiausia turiu iš anksto sukompiliuoti „Typescript“ arba pridėti šį „Flow“ dalyką.

-Teisingai.

Ir tada nusiųskite jį į Babelį, jei noriu naudoti, laukite.

-Teisingai.

Taigi galiu naudoti „Ftch“, pažadus ir valdyti srautą bei visą tą magiją.

-Tiesiog nepamirškite užpildyti „Ftch“, jei jis nepalaikomas, „Safari“ vis tiek negali su tuo susidoroti.

Žinai ką. Manau, čia jau baigėme. Tiesą sakant, manau, kad baigiau. Aš baigiau naudotis žiniatinkliu, jau baigiau su JavaScript.

-Puiku, po kelerių metų mes visi koduosime Elm arba WebAssembly.

Aš tiesiog grįšiu į užpakalinę dalį. Aš tiesiog negaliu susidoroti su daugybe pakeitimų ir versijų, leidimų, kompiliatorių ir transpiliatorių. „JavaScript“ bendruomenė yra beprotiška, jei mano, kad kas nors gali su tuo neatsilikti.

-Aš tave girdžiu. Tada turėtumėte išbandyti Python bendruomenę.

Kodėl?

- Ar kada nors girdėjote apie Python 3?

Atnaujinimas: Dėkojame, kad nurodėte rašybos klaidas ir klaidas, atnaujinsiu straipsnį, kaip nurodyta. Diskusija HackerNews ir Reddit .