Jinsi inavyojisikia kujifunza JavaScript mnamo 2016

Hakuna mifumo ya JavaScript iliyoundwa wakati wa uandishi wa nakala hii.

Yafuatayo yametiwa msukumo na makala "Ni wakati ujao" kutoka kwa Circle CI. Unaweza kusoma asili hapa . Kipande hiki ni maoni tu, na kama mfumo wowote wa JavaScript, haipaswi kuchukuliwa kwa uzito sana.

Halo, nimepata mradi huu mpya wa wavuti, lakini kusema kweli sijaandika tovuti nyingi kwa miaka michache na nimesikia mazingira yamebadilika kidogo. Je, wewe ndiwe msanidi programu aliyesasishwa zaidi hapa?

-Neno halisi ni mhandisi wa Front End, lakini ndio, mimi ndiye mtu sahihi. Ninafanya wavuti mnamo 2016. Visualizations, wachezaji wa muziki, ndege zisizo na rubani zinazocheza mpira wa miguu, unazitaja. Nimerudi kutoka JsConf na ReactConf, kwa hivyo najua teknolojia mpya zaidi za kuunda programu za wavuti.

Baridi. Ninahitaji kuunda ukurasa unaoonyesha shughuli za hivi punde kutoka kwa watumiaji, kwa hivyo ninahitaji tu kupata data kutoka kwa mwisho wa REST na kuionyesha katika aina fulani ya jedwali linaloweza kuchujwa, na kuisasisha ikiwa chochote kitabadilika kwenye seva. Nilikuwa nikifikiria labda kutumia jQuery kuchukua na kuonyesha data?

-Mungu wangu hapana, hakuna mtu anayetumia jQuery tena. Unapaswa kujaribu kujifunza React, ni 2016.

Oh, sawa. Nini React?

-Ni maktaba nzuri sana iliyotengenezwa na watu wengine kwenye Facebook, inaleta udhibiti na utendaji wa programu yako, kwa kukuruhusu kushughulikia mabadiliko yoyote ya mwonekano kwa urahisi sana.

Hiyo inasikika nadhifu. Je, ninaweza kutumia React kuonyesha data kutoka kwa seva?

-Ndio, lakini kwanza unahitaji kuongeza React na React DOM kama maktaba katika ukurasa wako wa tovuti.

Subiri, kwa nini maktaba mbili?

-Kwa hivyo moja ni maktaba halisi na ya pili ni ya kudhibiti DOM, ambayo sasa unaweza kuelezea katika JSX.

JSX? JSX ni nini?

-JSX ni kiendelezi cha syntax cha JavaScript ambacho kinaonekana kama XML. Ni aina ya njia nyingine ya kuelezea DOM, ifikirie kama HTML bora.

HTML ina makosa gani?

-Ni mwaka wa 2016. Hakuna mtu anayeweka misimbo ya HTML moja kwa moja tena.

Sawa. Kwa hivyo, ikiwa nitaongeza maktaba hizi mbili basi naweza kutumia React?

- Sio kabisa. Unahitaji kuongeza Babel, na kisha utaweza kutumia React.

Maktaba nyingine? Babeli ni nini?

-Oh, Babel ni transpiler ambayo hukuruhusu kulenga matoleo mahususi ya JavaScript, huku ukiweka msimbo katika toleo lolote la JavaScript. SI LAZIMA ujumuishe Babel ili utumie ReactJS, lakini usipofanya hivyo, umekwama kutumia ES5, na tuseme ukweli, ni 2016, unapaswa kuandika katika ES2016+ kama watoto wengine wazuri wanavyofanya.

ES5? ES2016+? Ninapotea hapa. ES5 na ES2016+ ni nini?

-ES5 inasimamia ECMAScript 5. Ni toleo ambalo linalenga watu wengi kwa vile limetekelezwa na vivinjari vingi siku hizi.

ECMAScript?

-Ndio, unajua, kiwango cha uandishi cha JavaScript kilitokana na mwaka wa 1999 baada ya kutolewa kwa mara ya kwanza mwaka wa 1995, wakati huo JavaScript ilipoitwa Livescript na iliendeshwa tu katika Netscape Navigator. Hilo lilikuwa fujo sana wakati huo, lakini tunashukuru sasa mambo yako wazi sana na tuna, kama, matoleo 7 ya utekelezaji huu.

7 matoleo. Kwa kweli. Na ES5 na ES2016+ ni?

-Toleo la tano na la saba mtawalia.

Subiri, nini kilitokea na wa sita?

- Unamaanisha ES6? Ndio, ninamaanisha, kila toleo ni seti kuu ya ile iliyotangulia, kwa hivyo ikiwa unatumia ES2016+, unatumia vipengele vyote vya matoleo ya awali.

Sawa. Na kwa nini utumie ES2016+ juu ya ES6 basi?

-Vema, UNAWEZA kutumia ES6, lakini ili kutumia vipengele baridi kama vile async na kungoja, unahitaji kutumia ES2016+. Vinginevyo umekwama na jenereta za ES6 zilizo na coroutines ili kuzuia simu zisizolingana kwa mtiririko mzuri wa udhibiti.

Sijui ulichosema hivi punde, na majina haya yote yanachanganya. Angalia, ninapakia rundo la data kutoka kwa seva, nilikuwa na uwezo wa kujumuisha tu jQuery kutoka CDN na kupata data tu na simu za AJAX, kwa nini siwezi kufanya hivyo?

-Ni 2016 jamani, hakuna anayetumia jQuery tena, inaishia kwenye rundo la msimbo wa tambi. Kila mtu anajua hilo.

Sawa. Kwa hivyo mbadala wangu ni kupakia maktaba tatu ili kuchukua data na kuonyesha jedwali la HTML.

-Sawa, unajumuisha maktaba hizo tatu lakini uziweke pamoja na kidhibiti cha moduli ili kupakia faili moja tu.

naona. Na meneja wa moduli ni nini?

-Ufafanuzi unategemea mazingira, lakini kwenye wavuti huwa tunamaanisha chochote kinachoauni moduli za AMD au CommonJS.

Riiight. Na AMD na CommonJS ni…?

-Ufafanuzi. Kuna njia za kuelezea jinsi maktaba na madarasa mengi ya JavaScript yanapaswa kuingiliana. Unajua, mauzo ya nje na inahitaji? Unaweza kuandika faili nyingi za JavaScript zinazofafanua API ya AMD au CommonJS na unaweza kutumia kitu kama Browserify kuziunganisha.

Sawa, hiyo ina mantiki... nadhani. Browserify ni nini?

-Ni zana ambayo hukuruhusu kujumuisha utegemezi ulioelezewa wa CommonJS kwa faili zinazoweza kuendeshwa kwenye kivinjari. Iliundwa kwa sababu watu wengi huchapisha tegemezi hizo kwenye sajili ya npm.

Usajili wa npm?

-Ni hazina kubwa ya umma ambapo watu werevu huweka kanuni na utegemezi kama moduli.

Kama CDN?

- Si kweli. Ni zaidi kama hifadhidata ya kati ambapo mtu yeyote anaweza kuchapisha na kupakua maktaba, kwa hivyo unaweza kuzitumia katika eneo lako kwa maendeleo na kisha kuzipakia kwenye CDN ukitaka.

Lo, kama Bower!

-Ndio, lakini ni 2016 sasa, hakuna mtu anayetumia Bower tena.

Lo, naona… kwa hivyo ninahitaji kupakua maktaba kutoka npm basi?

-Ndiyo. Kwa hivyo kwa mfano, ikiwa unataka kutumia React , unapakua moduli ya React na kuiingiza katika nambari yako. Unaweza kufanya hivyo kwa karibu kila maktaba maarufu ya JavaScript.

Lo, kama Angular!

-Angular ni hivyo 2015. Lakini ndiyo. Angular ingekuwa hapo, kando ya VueJS au RxJS na maktaba zingine nzuri za 2016. Unataka kujifunza kuhusu hizo?

Hebu tushikamane na React, tayari ninajifunza mambo mengi sana sasa. Kwa hivyo, ikiwa ninahitaji kutumia React ninaichukua kutoka npm hii kisha nitumie kitu hiki cha Kuvinjari?

-Ndiyo.

Hiyo inaonekana kuwa ngumu sana kunyakua tu rundo la utegemezi na kuwaunganisha pamoja.

-Ndiyo, ndiyo sababu unatumia kidhibiti cha kazi kama Grunt au Gulp au Brokoli kugeuza kiotomatiki kuendesha Kivinjari. Heck, unaweza hata kutumia Mimosa.

Kuguna? Gulp? Brokoli? Mimosa? Je, tunazungumza juu ya nini sasa?

- Wasimamizi wa kazi. Lakini wao si baridi tena. Tulizitumia kama, 2015, kisha tukatumia Makefiles, lakini sasa tunafunga kila kitu na Webpack.

Faili za kutengeneza? Nilidhani hiyo ilitumika sana kwenye miradi ya C au C++.

-Ndio, lakini inaonekana kwenye wavuti tunapenda kufanya mambo kuwa magumu na kisha kurudi kwenye misingi. Tunafanya hivyo kila mwaka au zaidi, subiri tu, tutafanya mkusanyiko kwenye wavuti baada ya mwaka mmoja au miwili.

Simama. Umetaja kitu kinachoitwa Webpack?

-Ni meneja mwingine wa moduli kwa kivinjari huku akiwa aina ya mkimbiaji wa kazi pia. Ni kama toleo bora la Browserify.

Oh, sawa. Kwa nini ni bora zaidi?

- Kweli, labda sio bora, ni maoni zaidi juu ya jinsi utegemezi wako unapaswa kufungwa. Webpack hukuruhusu kutumia vidhibiti tofauti vya moduli, na sio zile za CommonJS pekee, kwa mfano moduli asili zinazotumika ES6.

Nimechanganyikiwa sana na jambo hili zima la CommonJS/ES6.

-Kila mtu yuko, lakini haupaswi kujali tena na SystemJS.

Yesu kristo, nomino nyingine-js. Sawa, na SystemJS hii ni nini?

-Vema, tofauti na Browserify na Webpack 1.x, SystemJS ni kipakiaji cha moduli inayobadilika ambayo hukuruhusu kufunga moduli nyingi katika faili nyingi badala ya kuziunganisha kwenye faili moja kubwa.

Subiri, lakini nilidhani tunataka kujenga maktaba zetu katika faili moja kubwa na kupakia hiyo!

-Ndiyo, lakini kwa sababu HTTP/2 inakuja sasa maombi mengi ya HTTP ni bora zaidi.

Subiri, kwa hivyo hatuwezi kuongeza maktaba tatu asili za React?

- Si kweli. Ninamaanisha, unaweza kuziongeza kama hati za nje kutoka kwa CDN, lakini bado utahitaji kujumuisha Babeli wakati huo.

Simama. Na hiyo ni mbaya sawa?

-Ndiyo, ungekuwa unajumuisha babel-core nzima, na haitakuwa na ufanisi kwa uzalishaji. Kwenye uzalishaji unahitaji kutekeleza mfululizo wa kazi za awali ili kuandaa mradi wako unaofanya ibada ya kumwita Shetani ionekane kama kichocheo cha mayai ya kuchemsha. Unahitaji kupunguza mali, kuichafua, inline css juu ya zizi, kuahirisha hati, na vile-

Nimeipata, nimeipata. Kwa hivyo ikiwa haungejumuisha maktaba moja kwa moja kwenye CDN, ungefanyaje?

-Ningeisambaza kutoka kwa Typescript kwa kutumia Webpack + SystemJS + Babel combo.

Typescript? Nilidhani tulikuwa tunaandika katika JavaScript!

-Typescript NI JavaScript, au weka bora zaidi, seti kuu ya JavaScript, haswa JavaScript kwenye toleo la ES6. Unajua, toleo hilo la sita tulilozungumzia hapo awali?

Nilidhani ES2016+ tayari ilikuwa kundi kuu la ES6! KWA NINI tunahitaji sasa kitu hiki kinachoitwa Typescript?

-Oh, kwa sababu inaturuhusu kutumia JavaScript kama lugha iliyochapwa, na kupunguza hitilafu za muda wa kukimbia. Ni mwaka wa 2016, unapaswa kuwa unaongeza aina fulani kwenye msimbo wako wa JavaScript.

Na Typescript ni wazi hufanya hivyo.

-Flow vile vile, ingawa inakagua tu kuchapa wakati Typescript ni sehemu kuu ya JavaScript ambayo inahitaji kukusanywa.

Sigh… na Flow ni?

-Ni aina ya kusahihisha tuli iliyotengenezwa na watu wengine kwenye Facebook. Waliiweka katika OCaml, kwa sababu programu ya kufanya kazi ni nzuri.

OCaml? Upangaji programu unaofanya kazi?

-Ni nini watoto baridi kutumia siku hizi mtu, unajua, 2016? Upangaji programu unaofanya kazi? Utendaji wa mpangilio wa juu? Currying? Kazi safi?

sijui umesema nini.

- Hakuna mtu mwanzoni. Angalia, unahitaji tu kujua kuwa programu inayofanya kazi ni bora kuliko OOP na hiyo ndiyo tunapaswa kutumia mnamo 2016.

Subiri, nilijifunza OOP chuoni, nilifikiri hiyo ilikuwa nzuri?

-Hivyo ilikuwa Java kabla ya kununuliwa na Oracle. Namaanisha, OOP ilikuwa nzuri zamani, na bado ina matumizi yake leo, lakini sasa kila mtu anatambua kuwa kurekebisha hali ni sawa na kuwapiga teke watoto wachanga, kwa hivyo sasa kila mtu anahamia kwenye vitu visivyoweza kubadilika na uundaji wa programu zinazofanya kazi. Vijana wa Haskell wamekuwa wakiipigia simu kwa miaka mingi, -na msinifanye nianze na watu wa Elm- lakini kwa bahati nzuri kwenye wavuti sasa tuna maktaba kama Ramda ambayo huturuhusu kutumia programu inayofanya kazi katika JavaScript wazi.

Unaacha tu majina kwa ajili yake? Ramnda ni nini jamani?

-Hapana. Ramda. Kama Lambda. Unajua, hiyo maktaba ya David Chambers?

Daudi nani?

-David Chambers. Kijana mzuri. Inacheza mchezo wa maana wa Mapinduzi. Mmoja wa wachangiaji wa Ramda. Unapaswa pia kuangalia Erik Meijer ikiwa una nia ya kujifunza uundaji wa kazi.

Na Erik Meijer ni…?

-Kijana wa programu anayefanya kazi pia. Mwanaume wa kushangaza. Ana rundo la maonyesho ambapo yeye hutupa Agile huku akitumia shati hili la rangi isiyo ya kawaida. Unapaswa pia kuangalia baadhi ya vitu kutoka kwa Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Sawa. Nitakuzuia hapo. Yote ni nzuri na sawa, lakini nadhani yote hayo ni ngumu sana na sio lazima kwa kuchota data na kuionyesha. Nina hakika sihitaji kuwajua watu hawa au kujifunza mambo hayo yote ili kuunda jedwali lenye data thabiti. Hebu turudi kwenye React. Ninawezaje kupata data kutoka kwa seva na React?

-Kweli, hauleti data kwa React, unaonyesha tu data na React.

Oh, jamani mimi. Kwa hivyo unatumia nini kuleta data?

-Unatumia Kuchota ili kupata data kutoka kwa seva.

Samahani? Je, unatumia Leta kuleta data? Yeyote anayetaja vitu hivyo anahitaji nadharia.

- Najua sawa? Leta ni jina la utekelezaji asilia wa kutekeleza XMLHttpRequests dhidi ya seva.

Oh, hivyo AJAX.

-AJAX ni matumizi ya XMLHttpRequests tu. Lakini hakika. Kuchota hukuruhusu kufanya AJAX kulingana na ahadi, ambayo unaweza kutatua ili kuzuia kuzimu ya kurudi nyuma.

Callback kuzimu?

-Ndio. Kila wakati unapofanya ombi la asynchronous dhidi ya seva, unahitaji kusubiri jibu lake, ambalo linakufanya kuongeza kazi ndani ya kazi, ambayo inaitwa piramidi ya kurudi nyuma kutoka kuzimu.

Oh, sawa. Na jambo hili la ahadi linatatua?

- Kweli. Kwa kuchezea simu zako kupitia ahadi, unaweza kuandika kwa urahisi kuelewa msimbo, kuzikejeli na kuzijaribu, na pia kutekeleza maombi ya wakati mmoja mara moja na kusubiri hadi zote zipakiwe.

Na hiyo inaweza kufanywa na Fetch?

-Ndiyo, lakini ikiwa tu mtumiaji wako anatumia kivinjari cha kijani kibichi, vinginevyo unahitaji kujumuisha Jalada la Kuchota au utumie Ombi, Bluebird au Axios.

Ni maktaba ngapi ninahitaji kujua kwa ajili ya mungu? Ni wangapi kati yao?

-Ni JavaScript. Lazima kuwe na maelfu ya maktaba ambazo zote zinafanya kitu kimoja. Tunajua maktaba, kwa kweli, tuna maktaba bora zaidi. Maktaba zetu ni huuuge, na wakati mwingine tunajumuisha picha za Guy Fieri ndani yake.

Ulisema tu Guy Fieri? Tumalizie hili. Je! maktaba hizi za Bluebird, Ombi, Axios hufanya nini?

-Ni maktaba za kutekeleza XMLHttpRequests zinazorudisha ahadi.

Je, njia ya AJAX ya jQuery haikuanza kurudisha ahadi pia?

-Hatutumii neno "J" mwaka wa 2016 tena. Tumia tu Kuchota, na uijaze mara nyingi ikiwa haiko kwenye kivinjari au utumie Bluebird, Ombi au Axios badala yake. Kisha dhibiti ahadi kwa kungojea ndani ya kazi ya async na boom, una mtiririko mzuri wa udhibiti.

Ni mara ya tatu unataja subiri lakini sijui ni nini.

-Await hukuruhusu kuzuia simu isiyolingana, hukuruhusu kuwa na udhibiti bora wakati data inachukuliwa na kuongeza usomaji wa nambari kwa ujumla. Inapendeza, unahitaji tu kuhakikisha kuwa unaongeza uwekaji awali wa hatua ya 3 huko Babel, au utumie vitendaji vya syntax-async na programu-jalizi ya kubadilisha-async-kwa-jenereta.

Huyu ni mwendawazimu.

-Hapana, ni ukweli kwamba unahitaji kukusanya msimbo wa Typescript na kisha kuisambaza kwa Babel ili uitumie kusubiri.

Nini? Je, haijajumuishwa kwenye Typescript?

-Inafanya hivyo katika toleo linalofuata, lakini kufikia toleo la 1.7 inalenga ES6 pekee, kwa hivyo ikiwa ungependa kutumia await kwenye kivinjari, kwanza unahitaji kukusanya msimbo wako wa Typescript unaolenga ES6 na kisha Babel hiyo chafu ili kulenga ES5.

Kwa wakati huu sijui niseme nini.

- Angalia, ni rahisi. Rekodi kila kitu kwenye Typescript. Moduli zote zinazotumia Leta huzikusanya ili kulenga ES6, kuzisambaza kwa Babel kwenye uwekaji awali wa hatua ya 3, na kuzipakia kwa SystemJS. Ikiwa huna Leta, ijaze kwa wingi, au utumie Bluebird, Ombi au Axios, na ushughulikie ahadi zako zote kwa kusubiri.

Tuna ufafanuzi tofauti wa rahisi. Kwa hivyo, kwa ibada hiyo hatimaye nilichukua data na sasa ninaweza kuionyesha na React sawa?

-Je, maombi yako yatashughulikia mabadiliko yoyote ya serikali?

Kosa, sidhani. Ninahitaji tu kuonyesha data.

- Ah, asante mungu. Vinginevyo ningelazimika kukuelezea Flux, na utekelezaji kama Flummox, Alt, Fluxible. Ingawa kuwa mkweli unapaswa kutumia Redux.

Mimi naenda tu kuruka juu ya majina hayo. Tena, ninahitaji tu kuonyesha data.

-Oh, ikiwa unaonyesha tu data ambayo haukuhitaji React kuanza nayo. Ungekuwa sawa na injini ya kuiga.

Unatania? Je, unafikiri hii inachekesha? Je, hivyo ndivyo unavyowatendea wapendwa wako?

-Nilikuwa nikielezea kile unachoweza kutumia.

Acha. Acha tu.

-Namaanisha, hata ikiwa ni kutumia injini ya violezo, bado ningetumia mchanganyiko wa Typescript + SystemJS + Babeli ikiwa ningekuwa wewe.

Ninahitaji kuonyesha data kwenye ukurasa, sio kutekeleza kifo cha MK asilia cha Sub Zero. Niambie tu ni injini gani ya kuiga ya kutumia na nitaichukua kutoka hapo.

-Kuna mengi, yupi unamfahamu?

Lo, sikumbuki jina. Ilikuwa ni muda mrefu uliopita.

-jTemplates? jQuote? SAFI?

Kosa, haipigi kengele. Mwingine?

-Uwazi? JSRender? MarkupJS? KnockoutJS? Huyo alikuwa na njia mbili za kumfunga.

Mwingine?

-SahaniJS? jQuery-tmpl? Vishikizo? Watu wengine bado wanaitumia.

Labda. Je, kuna sawa na ile ya mwisho?

-Masharubu, kusisitiza? Nadhani sasa hata lodash ina moja ya kusema ukweli, lakini hizo ni aina ya 2014.

Err.. labda ilikuwa mpya zaidi.

-Jade? DustJS?

Hapana.

-DotJS? EJS?

Hapana.

- Nunjucks? ECT?

Hapana.

-Mah, hakuna mtu anayependa syntax ya Coffeescript hata hivyo. Jade?

Hapana, tayari umesema Jade.

-Nilimaanisha Pug. Nilimaanisha Jade. Ninamaanisha, Jade sasa ni Pug.

Simama. Hapana. Sikumbuki. Je, ungetumia ipi?

-Pengine tu ES6 asili masharti template.

Acha nifikirie. Na hiyo inahitaji ES6.

-Sahihi.

Ambayo, kulingana na kivinjari ninachotumia kinahitaji Babeli.

-Sahihi.

Ambayo, ikiwa ninataka kujumuisha bila kuongeza maktaba yote ya msingi, ninahitaji kuipakia kama moduli kutoka npm.

-Sahihi.

Ambayo, inahitaji Vinjari, au Wepback, au uwezekano mkubwa kuwa kitu kingine kinachoitwa SystemJS.

-Sahihi.

Ambayo, isipokuwa iwe Webpack, inapaswa kusimamiwa na mkimbiaji wa kazi.

-Sahihi.

Lakini, kwa kuwa ninapaswa kuwa nikitumia programu inayofanya kazi na lugha zilizochapwa kwanza ninahitaji kukusanya Typescript au kuongeza kitu hiki cha Flow.

-Sahihi.

Na kisha tuma hiyo kwa Babeli ikiwa ninataka kutumia await.

-Sahihi.

Kwa hivyo basi ninaweza kutumia Leta, ahadi, na mtiririko wa kudhibiti na uchawi huo wote.

-Usisahau tu kuchota polyfill ikiwa haitumiki, Safari bado haiwezi kuishughulikia.

Unajua nini. Nadhani tumemaliza hapa. Kwa kweli, nadhani nimemaliza. Nimemaliza wavuti, nimemaliza JavaScript kabisa.

-Hiyo ni sawa, katika miaka michache sisi sote tutakuwa tunaandika katika Elm au WebAssembly.

Mimi nina kwenda tu hoja nyuma ya backend. Siwezi tu kushughulikia mabadiliko haya mengi na matoleo na matoleo na wakusanyaji na wasambazaji. Jumuiya ya JavaScript ni wazimu ikiwa inadhani mtu yeyote anaweza kuendelea na hili.

-Nakusikia. Unapaswa kujaribu jamii ya Python basi.

Kwa nini?

-Umewahi kusikia kuhusu Python 3?

Sasisha: Asante kwa kuashiria makosa na makosa, nitasasisha makala kama ilivyobainishwa. Majadiliano katika HackerNews na Reddit .