Nola sentitzen den JavaScript ikastea 2016an

Artikulu hau idaztean ez da JavaScript esparrurik sortu.

Circle CI-ren “Etorkizuna da” artikuluan inspiratuta dago honako hau. Jatorrizkoa hemen irakur dezakezue . Pieza hau iritzi bat besterik ez da, eta edozein JavaScript esparru bezala, ez litzateke serioegi hartu behar.

Aizu, lortu dut web-proiektu berri hau, baina egia esateko, ez dut web asko kodetu urte gutxitan eta panorama pixka bat aldatu dela entzun dut. Hemengo web garatzailerik eguneratuena zara ezta?

-Benetako terminoa Front End ingeniaria da, baina bai, tipo egokia naiz. 2016an weba egiten dut. Ikuspegiak, musika-erreproduzitzaileak, futbolean jokatzen duten drone hegalariak, dena den. JsConf eta ReactConf-etik itzuli berri naiz, beraz, web aplikazioak sortzeko azken teknologiak ezagutzen ditut.

Cool. Erabiltzaileen azken jarduera bistaratzen duen orrialde bat sortu behar dut, beraz, REST amaierako datuak lortu eta iragazkizko taula batean bistaratu eta zerbitzarian zerbait aldatzen bada eguneratu behar dut. Pentsatzen ari nintzen agian jQuery erabiltzea datuak lortzeko eta bistaratzeko?

-Ene jainkoa ez, jada inork ez du jQuery erabiltzen. Saiatu beharko zenuke React ikasten, 2016a da.

Oh, ados. Zer da React?

-Facebookeko mutil batzuek egindako liburutegi oso polita da, benetan kontrola eta errendimendua ekartzen dio zure aplikazioari, edozein ikuspegi aldaketak oso erraz kudeatzeko aukera emanez.

Horrek txukuna dirudi. Erabili al dezaket React zerbitzariko datuak bistaratzeko?

-Bai, baina lehenik eta behin React eta React DOM liburutegi gisa gehitu behar dituzu zure web orrian.

Itxaron, zergatik bi liburutegi?

-Beraz, bat benetako liburutegia da eta bigarrena DOM manipulatzeko da, orain JSX-n deskriba dezakezuna.

JSX? Zer da JSX?

-JSX JavaScript sintaxiaren luzapen bat besterik ez da, XML itxura nahiko duena. DOM deskribatzeko beste modu bat da, pentsa HTML hobea dela.

Zer gertatzen da HTMLarekin?

-2016 da. Jada inork ez du HTML zuzenean kodetzen.

Eskuin. Dena den, bi liburutegi hauek gehitzen baditut, React erabil dezaket?

-Ez guztiz. Babel gehitu behar duzu, eta gero React erabiltzeko gai zara.

Beste liburutegi bat? Zer da Babel?

-Oh, Babel JavaScript-en bertsio zehatzak bideratzeko aukera ematen duen transpiler bat da, JavaScript-en edozein bertsiotan kodetzen duzun bitartean. Ez duzu Babel sartu BEHAR ReactJS erabiltzeko, baina egin ezean, ES5 erabiltzearekin trabatuta zaude, eta izan gaitezen benetakoak, 2016a da, ES2016+-n kodetu beharko zenuke gainerako haurrek egiten duten bezala.

ES5? ES2016+? Hemen galtzen ari naiz. Zer da ES5 eta ES2016+?

-ES5-ek ECMAScript 5 esan nahi du. Jende gehien helburu duen edizioa da, gaur egun nabigatzaile gehienek inplementatu baitute.

ECMAScript?

-Bai, badakizu, JavaScript scripting estandarra 1999an oinarritu zen 1995ean hasierako kaleratu ondoren, orduan JavaScript Livescript izena hartu eta Netscape Navigator-en bakarrik exekutatzen zenean. Hori oso nahasia zen orduan, baina, zorionez, orain gauzak oso argi daude eta inplementazio honen 7 edizio ditugu.

7 edizio. Benetan. Eta ES5 eta ES2016+ dira?

-Bosgarren eta zazpigarren edizioa hurrenez hurren.

Itxaron, zer gertatu da seigarrenarekin?

-ES6 esan nahi duzu? Bai, esan nahi dut, edizio bakoitza aurrekoaren supermultzo bat dela, beraz, ES2016+ erabiltzen ari bazara, aurreko bertsioen funtzio guztiak erabiltzen ari zara.

Eskuin. Eta zergatik erabili ES2016+ ES6 baino gehiago orduan?

-Beno, ES6 erabili Liteke, baina async eta itxaron bezalako funtzio bikainak erabiltzeko, ES2016+ erabili behar duzu. Bestela, ES6 sorgailuekin itsatsita zaude koroutinekin dei asinkronoak blokeatzeko kontrol-fluxu egokirako.

Ez dakit zer esan berri duzun, eta izen horiek guztiak nahasgarriak dira. Begira, zerbitzari batetik datu mordoa kargatzen ari naiz, lehen CDN batetik jQuery sartzeko eta datuak AJAX deiekin lortu ahal izan nituen, zergatik ezin dut hori besterik egin?

-2016koa da gizona, jada inork ez du jQuery erabiltzen, spaghetti kode mordo batean amaitzen da. Denek dakite hori.

Eskuin. Beraz, nire alternatiba hiru liburutegi kargatzea da datuak lortzeko eta HTML taula bistaratzeko.

-Beno, hiru liburutegi horiek sartzen dituzu baina modulu-kudeatzaile batekin lotu fitxategi bakarra kargatzeko.

ikusten dut. Eta zer da modulu kudeatzailea?

-Definizioa ingurunearen araberakoa da, baina sarean normalean AMD edo CommonJS moduluak onartzen dituen edozer esan nahi dugu.

Riiight. Eta AMD eta CommonJS dira...?

-Definizioak. JavaScript liburutegi eta klase anitz nola elkarrekintzan egon behar duten deskribatzeko moduak daude. Badakizu, esportatzen eta eskatzen? Hainbat JavaScript fitxategi idatzi ditzakezu AMD edo CommonJS APIa definitzen dutenak eta Browserify bezalako zerbait erabil dezakezu horiek biltzeko.

Ados, horrek zentzua du... uste dut. Zer da Browserify?

-CommonJS deskribatutako mendekotasunak arakatzailean exekutatu daitezkeen fitxategiekin lotzeko aukera ematen duen tresna da. Jende gehienak npm erregistroan mendekotasun horiek argitaratzen dituelako sortu zen.

npm erregistroa?

-Biltegi publiko oso handia da, non jende adimendunek kodea eta menpekotasunak jartzen dituzte modulu gisa.

CDN bat bezala?

-Ez benetan. Datu-base zentralizatu baten antzekoa da, non edonork liburutegiak argitaratu eta deskargatu ditzake, beraz, lokalean erabil ditzakezu garapenerako eta gero CDN batera igo nahi izanez gero.

Ai, Bower bezala!

-Bai, baina 2016a da orain, jada inork ez du Bower erabiltzen.

Oh, ikusten dut... beraz, liburutegiak deskargatu behar ditut npm-tik?

-Bai. Beraz, adibidez, React erabili nahi baduzu, React modulua deskargatu eta zure kodean inportatu. Hori egin dezakezu JavaScript liburutegi ezagun ia guztietan.

Ai, Angular bezala!

-Angular beraz 2015. Baina bai. Angular hor egongo litzateke, VueJS edo RxJS eta 2016ko beste liburutegi polit batzuekin batera. Horiei buruz ikasi nahi?

Jarrai gaitezen React-ekin, dagoeneko gauza gehiegi ikasten ari naiz. Beraz, React erabili behar badut npm honetatik eskuratzen dut eta ondoren Browserify gauza hau erabiltzen dut?

-Bai.

Hori konplikatuegia dirudi mendekotasun mordo bat hartu eta elkarrekin lotzeko.

-Hori dela eta, Grunt edo Gulp edo Broccoli bezalako ataza-kudeatzailea erabiltzen duzu Browserify exekutatzen automatizatzeko. Arraioa, Mimosa ere erabil dezakezu.

Grunt? Gulp? Brokolia? Mimosa? Arraioaz ari gara orain?

-Zereginen arduradunak. Baina jada ez dira cool. 2015ean erabili genituen, gero Makefiles erabili genuen, baina orain dena Webpack-ekin biltzen dugu.

Makefiles? Uste nuen gehienbat C edo C++ proiektuetan erabiltzen zela.

-Bai, baina itxuraz sarean gauzak konplikatu eta gero oinarrietara itzultzea gustatzen zaigu. Urtero edo urtero egiten dugu, itxaron besterik ez dugu, urte batean edo bi barru muntaia egingo dugu sarean.

Hasperen. Webpack izeneko zerbait aipatu duzu?

-Nabigatzailearen beste modulu-kudeatzaile bat da, zereginen exekutari modukoa den bitartean. Browserify-ren bertsio hobe bat bezalakoa da.

Oh, ados. Zergatik da hobea?

-Beno, agian ez hobeto, zure menpekotasunak nola lotu behar diren iritzi gehiago dago. Webpack-ek modulu-kudeatzaile desberdinak erabiltzeko aukera ematen du, eta ez CommonJS-ak bakarrik, adibidez, ES6-ren jatorrizko moduluak onartzen dituena.

Oso nahastuta nago CommonJS/ES6 gauza honekin.

-Denak dira, baina SystemJS-ekin ez zaizu gehiago axola behar.

Jesukristo, beste izen-js. Ados, eta zer da SystemJS hau?

-Beno, Browserify eta Webpack 1.x ez bezala, SystemJS modulu kargatzaile dinamikoa da, fitxategi handi batean bildu beharrean, hainbat modulu lotzeko aukera ematen duena.

Itxaron, baina gure liburutegiak fitxategi handi batean eraiki eta hori kargatu nahi genuela pentsatu nuen!

-Bai, baina HTTP/2 datorrelako orain HTTP eskaera anitz hobeak dira.

Itxaron, beraz, ezin al ditugu gehitu React-erako hiru liburutegi originalak?

-Ez benetan. Esan nahi dut, CDN batetik kanpoko script gisa gehi ditzakezula, baina hala ere Babel sartu beharko zenuke orduan.

Hasperen. Eta hori txarra da ezta?

-Bai, babel-core osoa sartuko zenuke, eta ez litzateke eraginkorra ekoizpenerako. Ekoizpenean, aurretiazko zeregin batzuk egin behar dituzu zure proiektua prest izateko, Satan deitzeko erritualak arrautza egosien errezeta itxura izan dezaten. Aktiboak txikitu behar dituzu, itsusitu, lerroan css tolesduraren gainean, scriptak atzeratu, baita ere-

Lortu dut, lortu dut. Beraz, liburutegiak zuzenean CDN batean sartuko ez bazenitu, nola egingo zenuke?

-Typescript-etik transpilatuko nuke Webpack + SystemJS + Babel konbinazioa erabiliz.

Mekanografia? JavaScript-en kodetzen ari ginela uste nuen!

-Typescript IS JavaScript, edo hobeto esanda, JavaScript-en gain-multzo bat, zehazkiago JavaScript ES6 bertsioan. Badakizu, aurretik hitz egin dugun seigarren bertsio hori?

ES2016+ jada ES6-ren supermultzoa zela uste nuen! ZERGATIK behar dugu orain Typescript izeneko gauza hau?

-Oh, JavaScript idazteko hizkuntza gisa erabiltzeko aukera ematen digulako, eta exekuzio-denboran akatsak murrizteko. 2016a da, mota batzuk gehitu beharko zenuke zure JavaScript kodean.

Eta Typescript, jakina, hori egiten du.

-Flow ere bai, idazketa soilik egiaztatzen duen arren Typescript konpilatu behar den JavaScript-en gain-multzoa den bitartean.

Hasperen... eta Flow da?

-Facebookeko tipo batzuek egindako egiaztatzaile estatiko bat da. OCaml-en kodetu dute, programazio funtzionala ikaragarria delako.

OCaml? Programazio funtzionala?

-Hori da gaur egungo umeek erabiltzen dutena gizona, badakizu, 2016? Programazio funtzionala? Ordena handiko funtzioak? Currya? Funtzio hutsak?

Ez dakit zer esan berri duzun.

-Inork ez du hasieran. Begira, jakin behar duzu programazio funtzionala OOP baino hobea dela eta horixe da 2016an erabili beharko genukeena.

Itxaron, OOP ikasi nuen unibertsitatean, ona zela uste nuen?

-Java ere bai Oracle-k erosi aurretik. Esan nahi dut, OOP ona zen garai batean, eta gaur egun ere bere erabilerak ditu, baina orain denak konturatzen ari dira egoerak aldatzea haurtxoak jaurtitzearen parekoa dela, beraz, orain denak objektu aldaezinetara eta programazio funtzionaletara mugitzen ari dira. Haskell mutilek urteak zeramatzaten deitzen, -eta ez nazazu Elm-ekin hasi- baina zorionez sarean orain Ramda bezalako liburutegiak ditugu, programazio funtzionala JavaScript arruntean erabiltzeko aukera ematen digutenak.

Izenak botatzen ari al zara horregatik? Zer demontre da Ramnda?

-Ez. Ramda. Lambda bezala. Badakizu, David Chambersen liburutegi hori?

David nor?

-David Chambers. Tipo polita. Golpe-joko bat jokatzen du. Ramda-ren kolaboratzaileetako bat. Erik Meijer ere egiaztatu beharko zenuke programazio funtzionala ikasteko serio bazara.

Eta Erik Meijer da...?

-Programazio funtzionala ere bai. Tipo ikaragarria. Aurkezpen mordoa ditu non Agile-ren zaborra botatzen duen kolore bitxiko alkandora hau erabiltzen duen bitartean. Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-ren zenbait gauza ere egiaztatu beharko zenuke.

Ados. Han geldituko zaitut. Hori guztia ona eta ondo dago, baina uste dut hori guztia hain konplikatua eta alferrikakoa dela datuak eskuratzeko eta bistaratzeko. Ziur nago ez ditudala pertsona hauek ezagutu edo gauza horiek guztiak ikasi behar datu dinamikoekin taula bat sortzeko. Itzuli gaitezen React-era. Nola lor ditzaket datuak zerbitzaritik React-ekin?

-Beno, egia esan, ez dituzu React-ekin datuak eskuratzen, datuak React-ekin bistaratzen dituzu.

Ai, madarikatua. Beraz, zer erabiltzen duzu datuak eskuratzeko?

-Fetch erabiltzen duzu zerbitzaritik datuak lortzeko.

Sentitzen dut? Eskuratu datuak lortzeko erabiltzen al duzu? Gauza horiek izendatzen dituenak thesaurus bat behar du.

-Badakit ezta? Eskuratu zerbitzari baten aurka XMLHttpRequests egiteko jatorrizko inplementazioaren izena da.

Oh, beraz, AJAX.

-AJAX XMLHttpRequests erabilera besterik ez da. Baina ziur. Fetch-ek promesetan oinarritutako AJAX egiteko aukera ematen dizu, gero ebatzi dezakezun itzulera infernua saihesteko.

Deia infernua?

-Bai. Zerbitzariaren aurkako eskaera asinkrono bat egiten duzun bakoitzean, haren erantzunaren zain egon behar duzu, eta horrek funtzio bat gehitzen dizu funtzio baten barruan, infernutik dei-itzulera piramidea deitzen dena.

Oh, ados. Eta promesa gauza honek konpontzen du?

-Baina. Zure deiak promesen bidez manipulatuz, errazago ulertzeko kodea idatzi dezakezu, iseka egin eta probatu, baita aldi berean eskaerak egin eta guztiak kargatu arte itxaron.

Eta hori Fetch-ekin egin daiteke?

-Bai, baina zure erabiltzaileak betiko nabigatzaile bat erabiltzen badu, bestela Fetch polyfill bat sartu edo Request, Bluebird edo Axios erabili behar duzu.

Zenbat liburutegi jakin behar ditut Jainkoagatik? Zenbat dira?

-JavaScript da. Milaka liburutegi egon behar dira denak gauza bera egiten dutenak. Liburutegiak ezagutzen ditugu, izan ere, liburutegi onenak ditugu. Gure liburutegiak izugarriak dira, eta batzuetan Guy Fieriren argazkiak sartzen ditugu horietan.

Guy Fieri esan berri duzu? Buka dezagun hau. Zer egiten dute Bluebird, Request, Axios liburutegi hauek?

-Promesak itzultzen dituzten XMLHttpRequests egiteko liburutegiak dira.

Ez al zen jQuery-ren AJAX metodoa ere hasi promesak itzultzen?

-2016an jada ez dugu “J” hitza erabiltzen. Erabili Fetch, eta bete ezazu polit arakatzaile batean ez dagoenean edo erabili Bluebird, Request edo Axios ordez. Ondoren, kudeatu promesa itxaronarekin funtzio asinkronizatu eta boom baten barruan, kontrol-fluxu egokia duzu.

Zain aipatzen duzun hirugarren aldia da baina ez dakit zer den.

-Await-ek dei asinkrono bat blokeatzeko aukera ematen dizu, datuak eskuratzen direnean kontrol hobea izateko eta, oro har, kodearen irakurgarritasuna areagotuz. Ikaragarria da, ziurtatu behar duzu etapa-3 aurresezarpena gehitzen duzula Babel-en, edo syntax-async-functions eta transform-async-to-generator plugina erabili.

Hau erokeria da.

-Ez, eroa da Typescript kodea aldez aurretik konpilatu behar duzula eta gero Babelekin transpilatu itxaron erabiltzeko.

Zer? Ez dago Typescript-en sartuta?

-Hurrengo bertsioan egiten du, baina 1.7 bertsiotik aurrera ES6 helburu baino ez du helburu, beraz arakatzailean await erabili nahi baduzu, lehenik eta behin zure Typescript kodea ES6 helburura konpilatu behar duzu eta gero babel hori ES5 helburura.

Momentu honetan ez dakit zer esan.

-Begira, erraza da. Kodetu guztia Typescript-en. Fetch erabiltzen duten modulu guztiek ES6 helbururako konpilatzen dituzte, Babel-ekin transpilatzen dituzte etapa 3-ko aurrezarpen batean eta SystemJS-ekin kargatzen dituzte. Fetch ez baduzu, bete ezazu edo erabili Bluebird, Request edo Axios, eta kudeatu zure promesa guztiak itxaronarekin.

Erraza-ren definizio oso desberdinak ditugu. Beraz, erritual horrekin azkenean datuak eskuratu nituen eta orain React-ekin bistaratu ditzaket ezta?

-Zure aplikazioak egoera aldaketarik kudeatuko al du?

Err, ez dut uste. Datuak bistaratu besterik ez dut behar.

-Ai, eskerrak Jainkoari. Bestela Flux, eta Flummox, Alt, Fluxible bezalako inplementazioak azaldu beharko nizuke. Egia esateko Redux erabili beharko zenukeen arren.

Izen horien gainetik hegan egingo dut. Berriz ere, datuak bistaratu besterik ez ditut behar.

-Oh, hasteko React behar ez zenuen datuak bistaratzen ari bazara. Ondo ibiliko zinen txantiloi motor batekin.

Txantxetan ari al zara? Hau dibertigarria dela uste duzu? Horrela tratatzen dituzu zure maiteak?

-Zer erabil dezakezun azaltzen ari nintzen.

Gelditu. Gelditu besterik ez.

-Esan nahi dut, txantiloi-motorra besterik ez bada ere erabiltzen, oraindik Typescript + SystemJS + Babel konbinazioa erabiliko nuke zu banintz.

Datuak orri batean bistaratu behar ditut, ez Sub Zero-ren jatorrizko MK heriotza-tasa egin. Esadazu zer txantiloi-motorra erabili eta hortik hartuko dut.

-Asko dago, zein ezagutzen duzu?

Uf, ezin dut izena gogoratzen. Aspaldi zen.

-jTxantiloiak? jQote? PUROA?

Ea, ez du txirrina jotzen. Beste bat?

-Gardentasuna? JSRender? MarkupJS? KnockoutJS? Hark bi norabideko lotura zuen.

Beste bat?

-PlakJS? jQuery-tmpl? Eskulekuak? Batzuek oraindik erabiltzen dute.

Agian. Ba al dago azken horren antzekorik?

-Bibotea, azpimarra? Uste dut orain lodashek ere baduela egia esan, baina horiek 2014koak dira.

Err.. agian berriagoa zen.

-Jade? DustJS?

Ez.

-DotJS? EJS?

Ez.

-Mojak? ECT?

Ez.

-Mah, inori ez zaio gustatzen Coffeescript sintaxia hala ere. Jade?

Ez, dagoeneko esan duzu Jade.

-Pug esan nahi nuen. Jade esan nahi nuen. Esan nahi dut, Jade orain Pug da.

Hasperen. Ez. Ez naiz gogoratzen. Zein erabiliko zenuke?

-Ziurrenik ES6 jatorrizko txantiloi-kateak besterik ez.

Utzidazu asmatzen. Eta horrek ES6 eskatzen du.

-Zuzenda.

Zein nabigatzaile erabiltzen ari naizen arabera Babel behar du.

-Zuzenda.

Hori, oinarrizko liburutegi osoa gehitu gabe sartu nahi badut, npm-tik modulu gisa kargatu behar dut.

-Zuzenda.

Horrek, Browserify edo Wepback eskatzen du, edo ziurrenik SystemJS izeneko beste gauza hori.

-Zuzenda.

Webpack ez bada behintzat, zereginen exekutari batek kudeatu beharko luke.

-Zuzenda.

Baina, programazio funtzionala eta idatzizko lengoaiak erabili behar ditudanez, lehenik eta behin Typescript aurrez konpilatu edo Flow gauza hau gehitu behar dut.

-Zuzenda.

Eta gero bidali hori Babelera itxaron nahi badut.

-Zuzenda.

Beraz, Eskuratu, promesak eta fluxua kontrolatu eta magia hori erabil ditzaket.

-Ez ahaztu Fetch polyfill egitea onartzen ez bada, Safari-k oraindik ezin du kudeatu.

Badakizu zer. Uste dut hemen amaitu dugula. Egia esan, uste dut amaitu dudala. Amaitu dut webarekin, amaitu dut JavaScriptekin.

-Hori ondo, urte gutxi barru denok kodetuko dugu Elm edo WebAssembly-n.

Bakarrik atzealdera itzuliko naiz. Ezin ditut aldaketa eta bertsio eta edizio eta konpilatzaile eta transpilatzaile ugari horiek kudeatu. JavaScript komunitatea ero dago edonork honekin jarraitu dezakeela uste badu.

-Entzuten zaitut. Orduan, Python komunitatea probatu beharko zenuke.

Zergatik?

-Entzun al duzu inoiz Python 3-ren berri?

Eguneratzea: Eskerrik asko akatsak eta akatsak seinalatzeagatik, artikulua adierazi bezala eguneratuko dut. Eztabaida HackerNews eta Reddit- en .