Zvinonzwa sei kudzidza JavaScript muna 2016

Hapana maJavaScript maitiro akagadzirwa panguva yekunyorwa kwechinyorwa ichi.

Zvinotevera zvinofemerwa nechinyorwa chinoti “Ndiro ramangwana” kubva kuCircle CI. Iwe unogona kuverenga yepakutanga pano . Ichi chidimbu ingori maonero, uye senge chero JavaScript chimiro, haifanirwe kutorwa zvakanyanya.

Hei, ndine iyi webhu purojekiti itsva, asi kutaura chokwadi handina kunyora webhu yakawanda mumakore mashoma uye ndakanzwa mamiriro achinja zvishoma. Iwe ndiwe wakanyanya kuenderana newebhu dev pano handiti?

-Iyo izwi chairo ndiFront End injiniya, asi hongu, ini ndiri murume chaiye. Ndinoita dandemutande muna 2016. Kuona, vatambi vemimhanzi, ndege dzinobhururuka dzinotamba nhabvu, unozvipa zita. Ndichangodzoka kubva kuJsConf neReactConf, saka ndinoziva matekinoroji ezvino kugadzira mawebhusaiti.

Kutonhora. Ini ndinoda kugadzira peji rinoratidza chiitiko chazvino kubva kuvashandisi, saka ini ndinongoda kuwana iyo data kubva kuREST endpoint uye ndoiratidza mune imwe mhando yetafura inosefa, uye kuigadzirisa kana chero chinhu chachinja museva. Ini ndanga ndichifunga kuti pamwe kushandisa jQuery kutora uye kuratidza iyo data?

-Ah mwari wangu kwete, hapana anoshandisa jQuery zvakare. Iwe unofanirwa kuyedza kudzidza React, i2016.

O, zvakanaka. Chii chinonzi React?

-Iri raibhurari inotonhorera yakagadzirwa nevamwe vakomana paFacebook, inonyatso kuunza kutonga uye kuita kune yako application, nekukubvumidza iwe kubata chero shanduko yekuona zviri nyore.

Zvinonzwika zvakanaka. Ndingashandisa React kuratidza data kubva kuseva?

-Ehe, asi chekutanga iwe unofanirwa kuwedzera React uye React DOM seraibhurari mune yako peji rewebhu.

Mirira, sei maraibhurari maviri?

-Saka imwe ndiyo raibhurari chaiyo uye yechipiri ndeyekushandisa iyo DOM, iyo ikozvino yaunogona kutsanangura muJSX.

JSX? Chii chinonzi JSX?

-JSX ingori JavaScript syntax yekuwedzera inotaridzika kunge XML. Imhando yeimwe nzira yekutsanangura iyo DOM, funga nezvayo seHTML iri nani.

Chii chakashata neHTML?

-Ndiyo 2016. Hapana anonyora HTML zvakananga zvakare.

Rudyi. Zvakadaro, kana ndikawedzera aya maraibhurari maviri ipapo ini ndinogona kushandisa React?

- Kwete chaizvo. Iwe unofanirwa kuwedzera Bhabheri, uye ipapo iwe unokwanisa kushandisa React.

Imwe raibhurari? Bhabheri chii?

-Oh, Babel is a transpiler iyo inokutendera kuti utarise chaiwo mavhezheni eJavaScript, iwe uchikodha mune chero shanduro yeJavaScript. HAUFANELE kusanganisira Babel kuti ushandise ReactJS, asi kunze kwekunge wadaro, wakabatikana nekushandisa ES5, uye ngativei chaizvo, ndi2016, unofanirwa kunge uchikodha muES2016+ sezvinoita vamwe vese vana vanotonhorera.

ES5? ES2016+? Ndiri kurasika kuno. Chii chinonzi ES5 uye ES2016+?

-ES5 inomirira ECMAScript 5. Ndiyo edition ine vanhu vakawanda yavakatarisisa sezvo yave kushandiswa nemabhurawuza mazhinji mazuvano.

ECMAScript?

-Hongu, iwe unoziva, iyo scripting standard JavaScript yakavakirwa muna 1999 mushure mekuburitswa kwayo kwekutanga muna 1995, kumashure panguva iyo JavaScript yakanzi Livescript uye yakangomhanya muNetscape Navigator. Izvo zvaive zvakashata kare ikako, asi nekutenda izvozvi zvinhu zvanyatsojeka uye isu tine, senge, 7 editions yekuitwa uku.

7 editions. For real. Uye ES5 uye ES2016+ vari?

-Edition yechishanu neyechinomwe zvakateerana.

Mirira, chii chakaitika nechitanhatu?

-Unoreva ES6? Ehe, ndinoreva, edition imwe neimwe imhando yepamusoro yeyakapfuura, saka kana uri kushandisa ES2016+, uri kushandisa ese maficha eshanduro dzakapfuura.

Rudyi. Uye sei kushandisa ES2016+ pamusoro ES6 ipapo?

-Zvakanaka, unogona kushandisa ES6, asi kushandisa inotonhorera maficha seasync uye wakamirira, unofanirwa kushandisa ES2016+. Zvikasadaro iwe wakanamatira ES6 majenareta ane coroutines kuvharira asynchronous mafoni ekuyerera kwakaringana.

Handizivi zvawabva kutaura, uye mazita ose aya anovhiringa. Tarisai, ndiri kungoisa dhata kubva kune sevha, ndaingokwanisa kungobatanidza jQuery kubva kuCDN uye kungowana data neAJAX mafoni, nei ini ndisingaite izvozvo?

-Iyo 2016 murume, hapana anoshandisa jQuery zvakare, inopera muboka respaghetti kodhi. Munhu wose anozviziva.

Rudyi. Saka imwe nzira yangu ndeyekurodha matatu maraibhurari kutora data uye kuratidza HTML tafura.

-Zvakanaka, iwe unosanganisira iwo matatu maraibhurari asi aunganidze iwo nemodule maneja kurodha faira rimwe chete.

Ndazviwona. Uye chii chinonzi module maneja?

-Iyo tsananguro inoenderana nenharaunda, asi muwebhu tinowanzo kureva chero chinhu chinotsigira AMD kana CommonJS module.

Riiight. Uye AMD uye CommonJS vari…?

-Definitions. Pane nzira dzekutsanangura kuti akawanda JavaScript raibhurari uye makirasi anofanira kupindirana sei. Iwe unoziva, kunze kwenyika uye zvinoda? Unogona kunyora akawanda JavaScript mafaera achitsanangura iyo AMD kana CommonJS API uye unogona kushandisa chimwe chinhu seBhurawuza kuti uzviunganidze.

OK, zvine musoro… ndinofunga. Chii chinonzi Browserify?

-Icho chishandiso chinokutendera kuti ubatanidze CommonJS yakatsanangurwa zvinoenderana nemafaira anogona kumhanyisa mubrowser. Yakagadzirwa nekuti vanhu vazhinji vanoburitsa izvo zvinotsamira mu npm registry.

npm registry?

-Iyo yakakura kwazvo yeruzhinji repository uko vanhu vakangwara vanoisa kodhi uye zvinoenderana nemamodule.

Kufanana neCDN?

-Kwete saizvozvo. Zvakafanana nedhatabhesi repakati apo chero munhu anogona kutsikisa nekudhawunirodha maraibhurari, saka iwe unogona kuashandisa munharaunda kusimudzira uye wozoaisa kuCDN kana uchida.

Ah, saBower!

-Hongu, asi i2016 ikozvino, hapana anoshandisa Bower zvakare.

Ah, ndiri kuona… saka ndinoda kudhawunirodha maraibhurari kubva npm ipapo?

-Ehe. Saka semuenzaniso, kana iwe uchida kushandisa React, unotora iyo React module uye woipinza mukodhi yako. Iwe unogona kuzviita kune inenge yega yega yakakurumbira JavaScript raibhurari.

Oo, seAngular!

-Angular saka 2015. Asi hongu. Angular yaizovepo, padivi peVueJS kana RxJS uye mamwe anotonhorera 2016 maraibhurari. Unoda kudzidza nezvazvo?

Ngatinamatei neReact, ndiri kutodzidza zvinhu zvakawandisa izvozvi. Saka, kana ndichida kushandisa React ndinoitora kubva iyi npm ndozoshandisa iyi Browserify chinhu?

-Ehe.

Izvo zvinoratidzika zvakanyanya kuomarara kungotora boka rezvitsamira uye kuzvisunga pamwechete.

-Ndizvo, ndosaka iwe uchishandisa basa maneja senge Grunt kana Gulp kana Broccoli kuita otomatiki kumhanya Browserify. Heck, unogona kushandisa Mimosa.

Grunt? Gulp? Broccoli? Mimosa? Heck tave kutaura nezvazvo manje?

-Task maneja. Asi havachisina kunaka. Takavashandisa se, 2015, ipapo takashandisa Makefiles, asi ikozvino tinoputira zvese neWebpack.

Makefiles? Ini ndaifunga kuti yainyanya kushandiswa paC kana C ++ mapurojekiti.

-Ehe, asi sezviri pachena muwebhu tinoda kuita kuti zvinhu zviome uye todzokera kune izvo zvakakosha. Isu tinoita izvozvo gore rega rega kana zvakadaro, ingozvimirira, isu tichaita musangano muwebhu mugore kana maviri.

Gomera. Wataura chimwe chinhu chinonzi Webpack?

-Ndiyo imwe moduli maneja webrowser uchiri mhando yemumhanyi webasa zvakare. Zvakafanana neshanduro iri nani yeBrowser.

Oh, Ok. Sei zviri nani?

-Zvakanaka, pamwe hazvisi nani, zvinongonyanya kufunga nezvekuti kuvimba kwako kunofanirwa kusungirirwa sei. Webpack inokutendera kuti ushandise akasiyana mamodule mamaneja, uye kwete chete maCommonJS ayo, saka semuenzaniso mamodule ES6 anotsigirwa.

Ini ndakavhiringidzika zvakanyanya neichi chese CommonJS/ES6 chinhu.

-Wese ari, asi iwe haufanirwe kuita hanya neSystemJS.

Jesu Kristu, rimwe zita-js. Zvakanaka, uye chii chinonzi SystemJS?

-Zvakanaka, kusiyana neBhurawuza uye Webpack 1.x, SystemJS isimba rekugadzirisa module rinokubvumira kuti usunge ma modules akawanda mumafaira akawanda pane kuabatanidza mune imwe huru faira.

Mirira, asi ndakafunga kuti taida kuvaka maraibhurari edu mune rimwe faira hombe uye kurodha iro!

-Hongu, asi nekuti HTTP/2 irikuuya zvino akawanda HTTP zvikumbiro zviri nani.

Mirira, saka hatingango wedzera maraibhurari matatu ekutanga eReact?

-Kwete saizvozvo. Ndinoreva kuti, unogona kuzviwedzera sezvinyorwa zvekunze kubva kuCDN, asi unenge uchiri kuda kuisa Bhabheri ipapo.

Gomera. Uye izvo zvakaipa here?

-Ehe, unenge uchisanganisira iyo babel-core yese, uye yaisazoshanda pakugadzira. Pakugadzirwa iwe unofanirwa kuita zvakatevedzana zve pre-mabasa kuti chirongwa chako chigadzirire chinoita kuti tsika yekudaidza Satani iite senge resipi yakabikwa mazai. Iwe unofanirwa kuderedza midziyo, kuisvibisa, inline css pamusoro pekupeta, defer zvinyorwa, pamwe ne-

Ndazviwana, ndazviwana. Saka kana usinga sanganise maraibhurari muCDN, ungazviita sei?

-Ini ndaizoitumira kubva kuTypescript ndichishandisa Webpack + SystemJS + Babel combo.

Typescript? Ndakafunga kuti tiri kunyora muJavaScript!

-Typescript IS JavaScript, kana kuiswa zvirinani, superset yeJavaScript, kunyanya JavaScript pane vhezheni ES6. Iwe unoziva, iyo yechitanhatu shanduro yatakambotaura nezvayo?

Ndakafunga kuti ES2016+ yanga yatove superset yeES6! NEI tichida ikozvino chinhu ichi chinonzi Typescript?

-O, nokuti inotibvumira kushandisa JavaScript semutauro wakadhindwa, uye kuderedza kukanganisa-nguva. Ndi2016, iwe unofanirwa kunge uchiwedzera mamwe marudzi kune yako JavaScript kodhi.

Uye Typescript zviri pachena anoita izvozvo.

-Flow zvakare, kunyangwe ichingotarisa kutaipa nepo Typescript iri superset yeJavaScript inoda kuunganidzwa.

Kugomera… uye Kuyerera ndiko?

-Iyo static mhando cheki yakagadzirwa nevamwe vakomana paFacebook. Vakainyora muOCaml, nekuti hurongwa hwekuita hunoshamisa.

OCaml? Kushanda purogiramu?

-Ndizvo izvo vana vanotonhorera vanoshandisa mazuva ano murume, munoziva, 2016? Kushanda hurongwa? High order mabasa? Currying? Mabasa akachena?

Handizivi zvawabva kutaura.

- Hapana anoita pakutanga. Tarisa, iwe unongoda kuziva kuti hurongwa hwekushanda huri nani pane OOP uye ndizvo zvatinofanira kunge tichishandisa muna 2016.

Mirira, ndakadzidza OOP kukoreji, ndafunga kuti zvakanaka?

-Saka Java yaive isati yatengwa naOracle. Ndinoreva kuti, OOP yaive yakanaka kare mumazuva, uye ichine mashandisiro ayo nhasi, asi iye zvino munhu wese ari kuona kuti kugadzirisa nyika kwakaenzana nekukanda vacheche, saka ikozvino munhu wese ari kuenda kuzvinhu zvisingachinji uye hurongwa hunoshanda. Haskell vakomana vanga vachiidaidza kwemakore, -uye musaite kuti nditange neElm vakomana- asi nerombo rakanaka muwebhu ikozvino tine maraibhurari akaita seRamda anotibvumira kushandisa hurongwa hwekushanda muJavaScript yakajeka.

Uri kungodonhedza mazita nekuda kwayo here? Chii chinonzi Ramnda?

-Aihwa. Ramda. SaLambda. Iwe unoziva, raibhurari yaDavid Chambers?

David ndiani?

-David Chambers. Cool mukomana. Inotamba mutambo weCoup unorevesa. Mumwe wevakapa Ramda. Iwe unofanirwawo kutarisa Erik Meijer kana iwe wakakomba nezve kudzidza inoshanda hurongwa.

Uye Erik Meijer ari…?

-Inoshanda programming mukomana zvakare. Awesome guy. Ane boka remharidzo kwaanorasa Agile paanenge achishandisa iyi inoshamisa shati yemavara. Iwe unofanirwawo kutarisa zvimwe zvezvinhu kubva kuna Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. Ndichakumisa ipapo. Zvese izvo zvakanaka uye zvakanaka, asi ini ndinofunga zvese izvo zvakangoomesesa uye zvisina basa pakungotora data nekuriratidza. Ndine chokwadi chekuti handifanire kuziva vanhu ava kana kudzidza zvese izvo zvinhu kugadzira tafura ine data rine simba. Ngatidzokerei kuReact. Ndingatora sei data kubva kuseva neReact?

-Zvakanaka, hautore data neReact, unongoratidza iyo data neReact.

O, nhamo ini. Saka chii chaunoshandisa kutora data?

-Unoshandisa Fetch kutora data kubva kune server.

Ndine hurombo? Iwe unoshandisa Fetch kutora iyo data? Ani nani ari kudoma zvinhu izvozvo anoda thesaurus.

-Ndinoziva chokwadi? Tora ndiro zita rekutanga kuita XMLHttpRequests kurwisa server.

Ah, saka AJAX.

-AJAX ingori kushandiswa kweXMLHttpRequests. Asi chokwadi. Kutora kunotendera iwe kuti uite AJAX yakavakirwa muzvipikirwa, izvo zvaunogona kugadzirisa kudzivirira iyo callback hero.

Callback kugehena?

-Hongu. Pese paunoita chikumbiro cheasynchronous uchipesana neserver, unofanirwa kumirira mhinduro yayo, iyo inozoita kuti uwedzere basa mukati mebasa, iro rinonzi callback piramidi kubva kugehena.

Oh, Ok. Uye ichi chipikirwa chinhu chinochigadzirisa?

-Zvirokwazvo. Nekugadzirisa macallbacks ako kuburikidza nevimbiso, unogona kunyora zviri nyore kunzwisisa kodhi, kunyomba uye kuiyedza, pamwe nekuita zvikumbiro panguva imwe chete kamwechete uye kumirira kusvika zvese zvarodha.

Uye izvo zvinogona kuitwa neFetch?

-Ehe, asi chete kana mushandisi wako akashandisa inogara yakasvibira browser, zvikasadaro iwe unofanirwa kusanganisira Fetch polyfill kana kushandisa Chikumbiro, Bluebird kana Axios.

Mangani maraibhurari andinoda kuziva nekuda kwamwari? Vangani vavo?

-Iyo JavaScript. Panofanira kuva nezviuru zvemaraibhurari ayo ose anoita chinhu chimwe chete. Tinoziva maraibhurari, kutaura zvazviri, tine maraibhurari akanakisa. Maraibhurari edu ari huuuge, uye dzimwe nguva tinosanganisira mifananidzo yeGuy Fieri mavari.

Wangoti Guy Fieri? Ngatipedzei izvi. Chii ichi Bluebird, Chikumbiro, Axios maraibhurari anoita?

-Ndiwo maraibhurari ekuita XMLHttpRequests anodzosera zvivimbiso.

Ko jQuery's AJAX nzira haina kutanga kudzosa zvipikirwa futi here?

-Hatichashandisa izwi rekuti "J" muna 2016 zvakare. Ingoshandisa Fetch, uye wozadza iyo poly kana isiri mubrowser kana kushandisa Bluebird, Chikumbiro kana Axios panzvimbo. Wobva wagadzirisa chivimbiso nekumirira mukati measync basa uye boom, une kwakaringana kudzora kuyerera.

Inguva yechitatu yaunotaura wakamirira asi ini handizive kuti chii.

-Kumirira inokutendera kuti uvhare asynchronous kufona, zvichikutendera iwe kuti uve nekutonga kurinani pane iyo data iri kutorwa uye yakazara kuwedzera kodhi kuverenga. Zvinoshamisa, unongoda kuve nechokwadi kuti unowedzera nhanho-3 preset muBhabheri, kana kushandisa syntax-async-functions uye shandura-async-to-jenareta plugin.

Uku kupenga.

-Kwete, kupenga ichokwadi chaunoda kufanounganidza Typescript kodhi uye wozoitumira neBabel kuti ushandise wakamirira.

Chii? Haina kubatanidzwa muTypescript?

-Inoita mune inotevera vhezheni, asi seyevhezheni 1.7 inongonanga ES6, saka kana iwe uchida kushandisa wakamirira mubrowser, chekutanga unofanirwa kuunganidza yako Typescript kodhi yakanangana neES6 uye ipapo Babel iyo shit kumusoro kunongedza ES5.

Panguva iyi handizivi kuti ndoti kudii.

-Tarisa, zviri nyore. Kodha zvese muTypescript. Ese mamodule anoshandisa Fetch anoaunganidza kuti anange ES6, aatumire neBabel pachinhanho-3 preset, woaisa neSystemJS. Kana iwe usina Fetch, polyfill iyo, kana shandisa Bluebird, Chikumbiro kana Axios, uye bata zvivimbiso zvako zvese wakamirira.

Tine tsananguro dzakasiyana kwazvo dzekureruka. Saka, netsika iyoyo ndakazotora iyo data uye ikozvino ndinogona kuiratidza neReact chaiko?

-Ko application yako ichabata chero shanduko yenyika?

Er, handifungi kudaro. Ini ndinongoda kuratidza iyo data.

-Oh, ndatenda Mwari. Zvikasadaro ndaizofanira kukutsanangurira Flux, uye kuita seFlummox, Alt, Fluxible. Kunyangwe kuve wakatendeseka iwe unofanirwa kunge uchishandisa Redux.

Ndichangobhururuka pamusoro pemazita iwayo. Zvakare, ini ndinongoda kuratidza data.

-Ah, kana iwe uchingoratidza iyo data yawanga usingade React kutanga. Iwe ungadai wakave wakanaka ne templating engine.

Uri kutamba neni here? Unofunga kuti izvi zvinosetsa here? Ndiwo mabatiro aunoita vadiwa vako here?

-Ndanga ndichitsanangura zvaunogona kushandisa.

Mira. Ingomira.

-Ndinoreva, kunyange kana iri kungoshandisa templating injini, ndingadai ndichiri kushandisa Typescript + SystemJS + Babel combo dai ndaiva iwe.

Ini ndinoda kuratidza data pane peji, kwete kuita Sub Zero yekutanga MK kufa. Ingondiudza kuti ndeipi injini yekushandisa uye ini ndichaitora kubva ipapo.

-Kune zvakawanda, ndeipi yaunoziva?

Ugh, handichayeuki zita. Yakanga iri nguva refu yapfuura.

-jTemplates? jQote? KUCHENA?

Ere, hairidza bhero. Imwe?

-Transparency? JSRender? MarkupJS? KnockoutJS? Iyoyo yakanga ine nzira mbiri.

Imwe?

-PlatesJS? jQuery-tmpl? Handlebars? Vamwe vanhu vachiri kuishandisa.

Pamwe. Pane akafanana neyokupedzisira here?

-Mustache, underscore? Ini ndinofunga ikozvino kunyange lodash ine imwe yekutendeseka, asi idzo mhando dze2014.

Err.. pamwe yanga iri itsva.

-Jade? DustJS?

Aihwa.

-DotJS? EJS?

Aihwa.

-Nunjucks? ECT?

Aihwa.

-Mah, hapana anoda Coffeescript syntax zvakadaro. Jade?

Aiwa, watotaura Jade.

-Ndaireva Pug. Ndaireva Jade. Ndinoreva, Jade ikozvino Pug.

Gomera. Kwete. Handigoni kuyeuka. Nderipi raungashandisa?

-Pamwe chete ES6 yemuno template tambo.

Rega ndifembere. Uye izvo zvinoda ES6.

-Zvakanaka.

Izvo, zvinoenderana nebrowser yandiri kushandisa inoda Babel.

-Zvakanaka.

Izvo, kana ini ndichida kusanganisa pasina kuwedzera iyo yakakosha raibhurari, ini ndinofanira kuiisa semodule kubva npm.

-Zvakanaka.

Izvo, zvinoda Browserify, kana Wepback, kana zvakanyanya zvimwe izvo zvinonzi SystemJS.

-Zvakanaka.

Izvo, kunze kwekunge iri Webpack, zvine mutsindo inofanirwa kutungamirwa nemumhanyi webasa.

-Zvakanaka.

Asi, sezvo ini ndichifanira kunge ndichishandisa mashandiro ehurongwa uye mitauro yakanyorwa ini ndinofanira kutanga ndanyora Typescript kana kuwedzera iyi Flow thingy.

-Zvakanaka.

Uye wozotumira izvozvo kuBabel kana ndichida kushandisa wakamirira.

-Zvakanaka.

Saka ini ndinogona kushandisa Fetch, zvivimbiso, uye kudzora kuyerera uye ese iwo mashiripiti.

-Usakanganwa kuita polyfill Fetch kana isina kutsigirwa, Safari haisati yakwanisa kuibata.

Unoziva chii. Ndofunga tapedza pano. Chaizvoizvo, ndinofunga ndapedza. Ndapedza newebhu, ndapedza neJavaScript zvachose.

-Zvakanaka, mumakore mashoma isu tese tichange tichikodha muElm kana WebAssembly.

Ndave kungodzokera kumashure. Ini chete handigoni kubata izvi zvakawanda kuchinja uye shanduro uye editions uye compilers uye transpilers. Nharaunda yeJavaScript inopenga kana ichifunga kuti chero munhu anogona kufambirana neizvi.

-Ndinokunzwa. Iwe unofanirwa kuedza iyo Python nharaunda ipapo.

Sei?

-Wakambonzwa nezvePython 3?

Kwidziridzo: Ndatenda nekunongedza typos uye kukanganisa, ini ndichagadzirisa chinyorwa sezvakacherechedzwa. Hurukuro muHackerNews uye Reddit .