Ano ang pakiramdam na matuto ng JavaScript sa 2016

Walang ginawang JavaScript frameworks habang isinusulat ang artikulong ito.

Ang sumusunod ay inspirasyon ng artikulong "Ito ang hinaharap" mula sa Circle CI. Maaari mong basahin ang orihinal dito . Ang bahaging ito ay isang opinyon lamang, at tulad ng anumang balangkas ng JavaScript, hindi ito dapat masyadong seryosohin.

Uy, nakuha ko ang bagong web project na ito, ngunit sa totoo lang hindi ako nakakapag-code ng web sa loob ng ilang taon at narinig kong medyo nagbago ang landscape. Ikaw ang pinaka-up-to-date na web dev sa paligid di ba?

-Ang aktwal na termino ay Front End engineer, ngunit oo, ako ang tamang tao. Gumagawa ako ng web noong 2016. Mga visualization, music player, lumilipad na drone na naglalaro ng football, pangalanan mo ito. Kakabalik ko lang mula sa JsConf at ReactConf, kaya alam ko ang mga pinakabagong teknolohiya para gumawa ng mga web app.

Astig. Kailangan kong gumawa ng page na nagpapakita ng pinakabagong aktibidad mula sa mga user, kaya kailangan ko lang kunin ang data mula sa REST endpoint at ipakita ito sa isang uri ng filter na talahanayan, at i-update ito kung may magbabago sa server. Iniisip ko na baka gumagamit ng jQuery upang kunin at ipakita ang data?

-Oh aking diyos hindi, wala nang gumagamit ng jQuery. Dapat mong subukang mag-aral ng React, 2016 na.

Oh, OK. Ano ang React?

-Ito ay isang napaka-cool na library na ginawa ng ilang mga lalaki sa Facebook, talagang nagdudulot ito ng kontrol at pagganap sa iyong application, sa pamamagitan ng pagpapahintulot sa iyong pangasiwaan ang anumang mga pagbabago sa view nang napakadali.

Mukhang maayos iyon. Maaari ko bang gamitin ang React upang magpakita ng data mula sa server?

-Oo, ngunit kailangan mo munang idagdag ang React at React DOM bilang isang library sa iyong webpage.

Teka, bakit dalawang library?

-Kaya ang isa ay ang aktwal na aklatan at ang pangalawa ay para sa pagmamanipula ng DOM, na maaari mo nang ilarawan sa JSX.

JSX? Ano ang JSX?

Ang -JSX ay isang JavaScript syntax extension lamang na halos kamukha ng XML. Ito ay uri ng isa pang paraan upang ilarawan ang DOM, isipin ito bilang isang mas mahusay na HTML.

Ano ang mali sa HTML?

-Taong 2016 na. Wala nang direktang nagko-code ng HTML.

Tama. Gayon pa man, kung idaragdag ko ang dalawang aklatan na ito, magagamit ko ang React?

-Hindi naman. Kailangan mong idagdag ang Babel, at pagkatapos ay magagamit mo ang React.

Isa pang library? Ano ang Babel?

-Oh, ang Babel ay isang transpiler na nagbibigay-daan sa iyong mag-target ng mga partikular na bersyon ng JavaScript, habang nagko-code ka sa anumang bersyon ng JavaScript. Hindi mo KAILANGAN na isama si Babel para gumamit ng ReactJS, ngunit maliban kung gagawin mo, natigil ka sa paggamit ng ES5, at maging totoo tayo, ito ay 2016, dapat kang mag-coding sa ES2016+ tulad ng ginagawa ng iba pang mga cool na bata.

ES5? ES2016+? Naliligaw na ako dito. Ano ang ES5 at ES2016+?

-ES5 ay kumakatawan sa ECMAScript 5. Ito ang edisyon na tina-target ng karamihan ng mga tao dahil ipinatupad ito ng karamihan sa mga browser sa kasalukuyan.

ECMAScript?

-Oo, alam mo, ang scripting standard na JavaScript ay ibinase noong 1999 pagkatapos ng unang paglabas nito noong 1995, noon nang ang JavaScript ay pinangalanang Livescript at tumakbo lamang sa Netscape Navigator. Napakagulo noon, ngunit sa kabutihang palad ngayon ay napakalinaw ng mga bagay at mayroon kaming, tulad ng, 7 edisyon ng pagpapatupad na ito.

7 edisyon. Sa totoo lang. At ang ES5 at ES2016+ ay?

-Ang ikalimang at ikapitong edisyon ayon sa pagkakabanggit.

Teka, anong nangyari sa pang-anim?

-Ibig mong sabihin ES6? Oo, ang ibig kong sabihin, ang bawat edisyon ay isang superset ng nauna, kaya kung gumagamit ka ng ES2016+, ginagamit mo ang lahat ng mga tampok ng mga nakaraang bersyon.

Tama. At bakit gumamit ng ES2016+ sa ES6 noon?

-Well, MAAARI mong gamitin ang ES6, ngunit para gumamit ng mga cool na feature tulad ng async at paghihintay, kailangan mong gumamit ng ES2016+. Kung hindi, natigil ka sa mga generator ng ES6 na may mga coroutine upang harangan ang mga asynchronous na tawag para sa tamang daloy ng kontrol.

Wala akong ideya kung ano ang sinabi mo, at ang lahat ng mga pangalan na ito ay nakalilito. Tingnan mo, naglo-load lang ako ng isang bungkos ng data mula sa isang server, dati ko lang naisama ang jQuery mula sa isang CDN at makuha lang ang data gamit ang mga AJAX na tawag, bakit hindi ko magawa iyon?

-Ito ay 2016 man, wala nang gumagamit ng jQuery, ito ay nagtatapos sa isang bungkos ng spaghetti code. Alam ng lahat yan.

Tama. Kaya ang aking alternatibo ay mag-load ng tatlong aklatan para kumuha ng data at magpakita ng HTML table.

-Well, isinama mo ang tatlong library na iyon ngunit i-bundle ang mga ito sa isang module manager upang mag-load lamang ng isang file.

nakikita ko. At ano ang isang module manager?

-Ang kahulugan ay nakadepende sa kapaligiran, ngunit sa web karaniwan naming ibig sabihin ang anumang bagay na sumusuporta sa AMD o CommonJS modules.

Riiight. At ang AMD at CommonJS ay…?

-Mga kahulugan. May mga paraan upang ilarawan kung paano dapat makipag-ugnayan ang maramihang mga library at klase ng JavaScript. Alam mo, exports at nangangailangan? Maaari kang magsulat ng maramihang mga JavaScript file na tumutukoy sa AMD o CommonJS API at maaari kang gumamit ng isang bagay tulad ng Browserify upang i-bundle ang mga ito.

OK, may katuturan iyon... Sa tingin ko. Ano ang Browserify?

-Ito ay isang tool na nagpapahintulot sa iyo na i-bundle ang CommonJS na inilarawan na mga dependencies sa mga file na maaaring patakbuhin sa browser. Ito ay nilikha dahil karamihan sa mga tao ay naglalathala ng mga dependency na iyon sa npm registry.

npm registry?

-Ito ay isang napakalaking pampublikong imbakan kung saan ang mga matatalinong tao ay naglalagay ng code at mga dependency bilang mga module.

Parang CDN?

-Hindi naman. Ito ay mas katulad ng isang sentralisadong database kung saan ang sinuman ay maaaring mag-publish at mag-download ng mga aklatan, kaya maaari mong gamitin ang mga ito nang lokal para sa pag-unlad at pagkatapos ay i-upload ang mga ito sa isang CDN kung gusto mo.

Oh, parang Bower!

-Oo, pero 2016 na ngayon, wala nang gumagamit ng Bower.

Oh, nakikita ko... kaya kailangan kong i-download ang mga aklatan mula sa npm?

-Oo. Kaya halimbawa, kung gusto mong gamitin ang React , ida-download mo ang React module at i-import ito sa iyong code. Magagawa mo iyon para sa halos bawat sikat na JavaScript library.

Oh, parang Angular!

-Angular ay kaya 2015. Ngunit oo. Angular ay naroroon, sa tabi ng VueJS o RxJS at iba pang mga cool na 2016 na aklatan. Gusto mong malaman ang tungkol sa mga iyon?

Manatili tayo sa React, marami na akong natututunan ngayon. Kaya, kung kailangan kong gumamit ng React kukunin ko ito mula sa npm na ito at pagkatapos ay gamitin ang bagay na ito sa Browserify?

-Oo.

Iyon ay tila sobrang kumplikado upang kunin lamang ang isang grupo ng mga dependency at itali ang mga ito nang sama-sama.

-Ito ay, kaya naman gumamit ka ng task manager tulad ng Grunt o Gulp o Broccoli para i-automate ang pagpapatakbo ng Browserify. Ano ba, maaari mo ring gamitin ang Mimosa.

Ungol? Gulp? Brokuli? Mimosa? Ano ba ang pinag-uusapan natin ngayon?

-Task manager. Pero hindi na sila cool. Ginamit namin ang mga ito noong tulad ng, 2015, pagkatapos ay ginamit namin ang Makefiles, ngunit ngayon binabalot namin ang lahat gamit ang Webpack.

Makefiles? Akala ko iyon ay kadalasang ginagamit sa mga proyektong C o C++.

-Oo, ngunit tila sa web gustung-gusto naming gawing kumplikado ang mga bagay at pagkatapos ay bumalik sa mga pangunahing kaalaman. Ginagawa namin iyon bawat taon o higit pa, hintayin mo lang ito, magpupulong kami sa web sa isang taon o dalawa.

Sigh. Nabanggit mo ang isang bagay na tinatawag na Webpack?

-Ito ay isa pang module manager para sa browser habang ito ay isang uri ng task runner din. Ito ay tulad ng isang mas mahusay na bersyon ng Browserify.

Oh, Ok. Bakit mas maganda?

-Buweno, marahil hindi mas mahusay, ito ay mas may opinyon sa kung paano dapat itali ang iyong mga dependencies. Binibigyang-daan ka ng Webpack na gumamit ng iba't ibang module manager, at hindi lamang sa CommonJS, kaya halimbawa native ES6 supported modules.

Lubos akong nalilito sa buong CommonJS/ES6 bagay na ito.

-Lahat ay, ngunit hindi mo na dapat pakialam sa SystemJS.

Hesukristo, isa pang pangngalan-js. Ok, at ano ito SystemJS?

-Buweno, hindi tulad ng Browserify at Webpack 1.x, ang SystemJS ay isang dynamic na module loader na nagbibigay-daan sa iyong itali ang maramihang mga module sa maraming file sa halip na i-bundle ang mga ito sa isang malaking file.

Maghintay, ngunit naisip ko na gusto naming buuin ang aming mga aklatan sa isang malaking file at i-load iyon!

-Oo, ngunit dahil paparating na ang HTTP/2, mas maganda ang maramihang kahilingan sa HTTP.

Teka, hindi ba pwedeng idagdag na lang natin ang tatlong orihinal na library para sa React??

-Hindi naman. Ibig kong sabihin, maaari mong idagdag ang mga ito bilang mga panlabas na script mula sa isang CDN, ngunit kakailanganin mo pa ring isama ang Babel.

Sigh. At masama yun diba?

-Oo, isasama mo ang buong babel-core, at hindi ito magiging mahusay para sa produksyon. Sa produksyon kailangan mong magsagawa ng isang serye ng mga paunang gawain upang maihanda ang iyong proyekto na magmukhang isang recipe ng nilagang itlog ang ritwal na ipatawag si Satanas. Kailangan mong maliitin ang mga asset, pangitin ang mga ito, inline na css sa itaas ng fold, ipagpaliban ang mga script, pati na rin-

Nakuha ko, nakuha ko. Kaya kung hindi mo direktang isasama ang mga aklatan sa isang CDN, paano mo ito gagawin?

-I-transpile ko ito mula sa Typescript gamit ang isang Webpack + SystemJS + Babel combo.

Typescript? Akala ko nagco-coding kami sa JavaScript!

-Typescript IS JavaScript, o mas mahusay na ilagay, isang superset ng JavaScript, mas partikular na JavaScript sa bersyon ES6. Alam mo, iyong pang-anim na bersyon na pinag-usapan natin noon?

Akala ko ang ES2016+ ay isa nang superset ng ES6! BAKIT kailangan natin ngayon ang bagay na ito na tinatawag na Typescript?

-Oh, dahil pinapayagan kaming gumamit ng JavaScript bilang isang na-type na wika, at bawasan ang mga error sa run-time. 2016 na, dapat ay nagdaragdag ka ng ilang uri sa iyong JavaScript code.

At maliwanag na ginagawa iyon ng Typescript.

-Flow din, bagama't sinusuri lamang nito ang pag-type habang ang Typescript ay isang superset ng JavaScript na kailangang i-compile.

Sigh... and Flow is?

-Ito ay isang static na uri ng checker na ginawa ng ilang mga lalaki sa Facebook. Na-code nila ito sa OCaml, dahil kahanga-hanga ang functional programming .

OCaml? Functional na programming?

-Ito ang ginagamit ng mga cool na bata sa panahon ngayon, alam mo ba, 2016? Functional na programming? High order functions? Currying? Puro functions?

Wala akong ideya sa sinabi mo.

-Walang gumagawa sa simula. Tingnan mo, kailangan mo lang malaman na ang functional programming ay mas mahusay kaysa sa OOP at iyon ang dapat nating gamitin sa 2016.

Teka, natuto ako ng OOP nung college, akala ko ba maganda yun?

-Gayundin ang Java bago binili ng Oracle. Ibig kong sabihin, maganda ang OOP noong mga araw, at mayroon pa rin itong mga gamit ngayon, ngunit ngayon ay napagtanto ng lahat na ang pagbabago ng mga estado ay katumbas ng pagsipa sa mga sanggol, kaya ngayon ang lahat ay lumilipat sa mga hindi nababagong bagay at functional programming. Ilang taon na itong tinatawag ng mga Haskell, -at huwag mo akong simulan sa mga Elm guys- ngunit sa kabutihang-palad sa web ngayon ay mayroon kaming mga aklatan tulad ng Ramda na nagpapahintulot sa amin na gumamit ng functional programming sa simpleng JavaScript.

Nagbibitawan ka lang ba ng mga pangalan alang-alang dito? Ano ba Ramnda?

-Hindi. Ramda. Tulad ng Lambda. Alam mo, ang library ni David Chambers?

David sino?

-David Chambers. Cool na lalaki. Naglalaro ng masamang laro ng Kudeta. Isa sa mga nag-ambag para kay Ramda. Dapat mo ring suriin si Erik Meijer kung seryoso ka sa pag-aaral ng functional programming.

At si Erik Meijer ay...?

-Functional programming guy pati na rin. Galing na lalaki. Mayroon siyang isang grupo ng mga presentasyon kung saan itinatapon niya ang Agile habang ginagamit ang kakaibang kulay na kamiseta. Dapat mo ring suriin ang ilan sa mga bagay mula kay Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. titigilan na kita dyan. Lahat ng iyon ay mabuti at maayos, ngunit sa palagay ko ang lahat ng iyon ay napakakumplikado at hindi kailangan para lamang sa pagkuha ng data at pagpapakita nito. Sigurado akong hindi ko kailangang kilalanin ang mga taong ito o matutunan ang lahat ng bagay na iyon upang lumikha ng isang talahanayan na may dynamic na data. Balik tayo sa React. Paano ko makukuha ang data mula sa server gamit ang React?

-Well, hindi mo talaga kinukuha ang data gamit ang React, ipinapakita mo lang ang data gamit ang React.

Oh, sumpain ako. Kaya ano ang iyong ginagamit upang makuha ang data?

-Gumagamit ka ng Fetch para kunin ang data mula sa server.

pasensya na ha? Ginagamit mo ang Fetch para kunin ang data? Ang sinumang nagpapangalan sa mga bagay na iyon ay nangangailangan ng isang thesaurus.

-Alam ko diba? Kunin ito ang pangalan ng katutubong pagpapatupad para sa pagsasagawa ng XMLHttpRequests laban sa isang server.

Oh, kaya AJAX.

-AJAX ay ang paggamit lamang ng XMLHttpRequests. Pero sigurado. Pinapayagan ka ng Fetch na gawin ang AJAX batay sa mga pangako, na maaari mong lutasin upang maiwasan ang callback na impiyerno.

Callback hell?

-Oo. Sa bawat oras na magsasagawa ka ng isang asynchronous na kahilingan laban sa server, kailangan mong maghintay para sa tugon nito, na pagkatapos ay magdadagdag sa iyo ng isang function sa loob ng isang function, na tinatawag na callback pyramid mula sa impiyerno.

Oh, Ok. At ang pangakong bagay na ito ay malulutas ito?

-Talaga. Sa pamamagitan ng pagmamanipula sa iyong mga callback sa pamamagitan ng mga pangako, maaari kang sumulat ng mas madaling maunawaan ang code, kutyain at subukan ang mga ito, pati na rin magsagawa ng sabay-sabay na mga kahilingan at maghintay hanggang ma-load ang lahat ng ito.

At magagawa iyon sa Fetch?

-Oo, ngunit kung gumagamit lang ng evergreen na browser ang iyong user, kung hindi, kailangan mong magsama ng Fetch polyfill o gumamit ng Request, Bluebird o Axios.

Ilang aklatan ang kailangan kong malaman para sa diyos? Ilan sila?

-Ito ay JavaScript. Kailangang mayroong libu-libong aklatan na lahat ay gumagawa ng parehong bagay. Alam namin ang mga aklatan, sa katunayan, mayroon kaming pinakamahusay na mga aklatan. Ang aming mga aklatan ay huuuge, at kung minsan ay kasama namin ang mga larawan ni Guy Fieri sa kanila.

Kakasabi mo lang Guy Fieri? Tapusin na natin ito. Ano ang ginagawa ng mga library ng Bluebird, Request, Axios na ito?

-Ang mga ito ay mga aklatan upang magsagawa ng XMLHttpRequest na nagbabalik ng mga pangako.

Hindi ba ang paraan ng AJAX ng jQuery ay nagsimula ring magbalik ng mga pangako?

-Hindi na namin ginagamit ang salitang "J" sa 2016. Gamitin lang ang Fetch, at i-polyfill ito kapag wala ito sa isang browser o gumamit na lang ng Bluebird, Request o Axios. Pagkatapos ay pamahalaan ang pangako nang may paghihintay sa loob ng isang async function at boom, mayroon kang tamang daloy ng kontrol.

Pangatlong beses mo nang banggitin ang naghihintay ngunit wala akong ideya kung ano ito.

Binibigyang-daan ka ng -Await na harangan ang isang asynchronous na tawag, na nagbibigay-daan sa iyong magkaroon ng mas mahusay na kontrol sa kung kailan kinukuha ang data at sa pangkalahatang pagtaas ng pagiging madaling mabasa ng code. Ito ay kahanga-hanga, kailangan mo lang tiyakin na idaragdag mo ang stage-3 na preset sa Babel, o gumamit ng syntax-async-function at transform-async-to-generator na plugin.

Nakakabaliw ito.

-Hindi, nakakabaliw ang katotohanang kailangan mong i-precompile ang Typescript code at pagkatapos ay i-transpile ito sa Babel upang magamit ang naghihintay.

Ano? Hindi ito kasama sa Typescript?

-Ginagawa nito sa susunod na bersyon, ngunit sa bersyon 1.7 ay tina-target lamang nito ang ES6, kaya kung gusto mong gumamit ng await sa browser, kailangan mo munang i-compile ang iyong Typescript code na nagta-target sa ES6 at pagkatapos ay Babel na shit up upang i-target ang ES5.

Sa puntong ito hindi ko alam kung ano ang sasabihin ko.

-Tingnan mo, madali lang. I-code ang lahat sa Typescript. Ang lahat ng mga module na gumagamit ng Fetch ay kino-compile ang mga ito upang i-target ang ES6, i-transpile ang mga ito gamit ang Babel sa isang stage-3 na preset, at i-load ang mga ito gamit ang SystemJS. Kung wala kang Fetch, polyfill ito, o gamitin ang Bluebird, Request o Axios, at pangasiwaan ang lahat ng iyong mga pangako nang may paghihintay.

Mayroon kaming ibang mga kahulugan ng madali. Kaya, sa ritwal na iyon sa wakas ay nakuha ko ang data at ngayon ay maipapakita ko ito sa React tama?

-Hahawakan ba ng iyong aplikasyon ang anumang mga pagbabago sa estado?

Err, parang hindi. Kailangan ko lang ipakita ang data.

-Oh, salamat sa diyos. Kung hindi, kailangan kong ipaliwanag sa iyo ang Flux, at mga pagpapatupad tulad ng Flummox, Alt, Fluxible. Bagaman upang maging matapat dapat mong gamitin ang Redux.

Lilipad na lang ako sa mga pangalang iyon. Muli, kailangan ko lang magpakita ng data.

-Oh, kung ipinapakita mo lang ang data na hindi mo kailangan ng React para magsimula. Magaling ka sana sa isang templating engine.

Niloloko mo ba ako? Sa tingin mo ba ito ay nakakatawa? Ganyan ba ang pakikitungo mo sa iyong mga mahal sa buhay?

-Nagpapaliwanag lang ako kung ano ang maaari mong gamitin.

Tumigil ka. Tumigil ka na lang.

-Ibig kong sabihin, kahit na ito ay gumagamit lamang ng templating engine, gagamit pa rin ako ng Typescript + SystemJS + Babel combo kung ako sa iyo.

Kailangan kong magpakita ng data sa isang page, hindi gawin ang orihinal na MK fatality ng Sub Zero. Sabihin lang sa akin kung anong templating engine ang gagamitin at kukunin ko ito mula doon.

-Marami, alin ang pamilyar sa iyo?

Ugh, hindi ko maalala ang pangalan. Matagal na ang nakalipas.

-jMga Template? jQote? PURO?

Err, hindi tumunog. Isa pa?

-Transparency? JSRender? MarkupJS? KnockoutJS? May two-way binding ang isang iyon.

Isa pa?

-PlatesJS? jQuery-tmpl? Handlebars? May mga gumagamit pa rin nito.

Siguro. Mayroon bang katulad sa huli?

-Mustache, underscore? Sa tingin ko ngayon kahit si lodash ay may isa na, ngunit ang mga iyon ay uri ng 2014.

Err.. baka mas bago.

-Jade? DustJS?

Hindi.

-DotJS? EJS?

Hindi.

-Nunjucks? ECT?

Hindi.

-Mah, wala namang may gusto sa Coffeescript syntax. Jade?

Hindi, sinabi mo na Jade.

-Ang ibig kong sabihin ay si Pug. Si Jade ang ibig kong sabihin. Ibig sabihin, Pug na si Jade.

Sigh. Hindi. Hindi maalala. Alin ang gagamitin mo?

-Marahil ES6 native template string lang.

Hayaan akong hulaan. At nangangailangan iyon ng ES6.

-Tama.

Alin, depende sa kung anong browser ang ginagamit ko ay nangangailangan ng Babel.

-Tama.

Alin, kung gusto kong isama nang hindi idinaragdag ang buong pangunahing aklatan, kailangan kong i-load ito bilang isang module mula sa npm.

-Tama.

Alin, nangangailangan ng Browserify, o Wepback, o malamang na ang iba pang bagay na tinatawag na SystemJS.

-Tama.

Alin, maliban kung ito ay Webpack, sa isip ay dapat na pinamamahalaan ng isang task runner.

-Tama.

Ngunit, dahil dapat ay gumagamit ako ng functional programming at nai-type na mga wika kailangan ko munang i-pre-compile ang Typescript o idagdag ang Flow thingy na ito.

-Tama.

At pagkatapos ay ipadala iyon sa Babel kung gusto kong gamitin ang naghihintay.

-Tama.

Kaya't magagamit ko ang Fetch, mga pangako, at kontrolin ang daloy at lahat ng mahikang iyon.

-Basta huwag kalimutang mag-polyfill ng Fetch kung hindi ito suportado, hindi pa rin ito kakayanin ng Safari.

Alam mo kung ano. I think tapos na tayo dito. Actually, I think tapos na ako. Tapos na ako sa web, tapos na ako sa JavaScript.

-Mabuti naman, sa loob ng ilang taon lahat tayo ay magiging coding sa Elm o WebAssembly.

Babalik na lang ako sa backend. Hindi ko lang kayang hawakan ang maraming pagbabago at bersyon at edisyon at compiler at transpiler na ito. Nakakabaliw ang komunidad ng JavaScript kung sa tingin nito ay makakasabay nito ang sinuman.

-Naririnig kita. Dapat mong subukan ang komunidad ng Python pagkatapos.

Bakit?

-Narinig mo na ba ang Python 3?

Update: Salamat sa pagturo ng mga typo at pagkakamali, ia-update ko ang artikulo tulad ng nabanggit. Talakayan sa HackerNews at Reddit .