Si ndihet të mësosh JavaScript në 2016

Asnjë kornizë JavaScript nuk u krijua gjatë shkrimit të këtij artikulli.

Më poshtë është frymëzuar nga artikulli "Është e ardhmja" nga Circle CI. Mund ta lexoni origjinalin këtu . Kjo pjesë është vetëm një opinion, dhe si çdo kornizë JavaScript, nuk duhet marrë shumë seriozisht.

Hej, e mora këtë projekt të ri në internet, por të jem i sinqertë, nuk kam koduar shumë ueb prej disa vitesh dhe kam dëgjuar që peizazhi ka ndryshuar pak. Ju jeni zhvilluesi më i përditësuar i uebit këtu, apo jo?

-Termi aktual është inxhinier Front End, por po, unë jam djali i duhur. Unë bëj ueb në vitin 2016. Vizualizime, lojtarë muzikorë, drone fluturues që luajnë futboll, si të thuash. Sapo u ktheva nga JsConf dhe ReactConf, kështu që njoh teknologjitë më të fundit për të krijuar aplikacione ueb.

I ftohtë. Më duhet të krijoj një faqe që shfaq aktivitetin më të fundit nga përdoruesit, kështu që më duhet vetëm të marr të dhënat nga pika përfundimtare REST dhe t'i shfaq ato në një lloj tabele të filtrueshme dhe ta përditësoj nëse diçka ndryshon në server. Po mendoja ndoshta duke përdorur jQuery për të marrë dhe shfaqur të dhënat?

-O zot jo, askush nuk përdor më jQuery. Duhet të provoni të mësoni React, është viti 2016.

Oh, në rregull. Çfarë është Reagimi?

-Është një bibliotekë super e lezetshme e krijuar nga disa djem në Facebook, ajo vërtet sjell kontroll dhe performancë në aplikacionin tuaj, duke ju lejuar të trajtoni çdo ndryshim të pamjes shumë lehtë.

Kjo tingëllon bukur. A mund të përdor React për të shfaqur të dhëna nga serveri?

-Po, por së pari duhet të shtoni React dhe React DOM si një bibliotekë në faqen tuaj të internetit.

Prit, pse dy biblioteka?

-Pra, njëra është biblioteka aktuale dhe e dyta është për manipulimin e DOM, të cilën tani mund ta përshkruani në JSX.

JSX? Çfarë është JSX?

-JSX është vetëm një zgjerim sintaksor JavaScript që duket shumë si XML. Është një mënyrë tjetër për të përshkruar DOM-in, mendoni për atë si një HTML më të mirë.

Çfarë nuk shkon me HTML?

-Është viti 2016. Askush nuk e kodon më drejtpërdrejt HTML.

E drejta. Gjithsesi, nëse shtoj këto dy biblioteka atëherë mund të përdor React?

-Jo mjaft. Ju duhet të shtoni Babel, dhe më pas mund të përdorni React.

Një bibliotekë tjetër? Çfarë është Babel?

-Oh, Babel është një transpilues që ju lejon të synoni versione specifike të JavaScript, ndërsa kodoni në çdo version të JavaScript. Nuk DUHET të përfshini Babel për të përdorur ReactJS, por nëse nuk e bëni, ju keni ngecur me përdorimin e ES5, dhe le të jemi realë, është viti 2016, duhet të kodoni në ES2016+ siç bëjnë fëmijët e tjerë të lezetshëm.

ES5? ES2016+? Unë jam duke humbur këtu. Çfarë është ES5 dhe ES2016+?

-ES5 do të thotë ECMAScript 5. Është botimi që synon shumicën e njerëzve pasi është zbatuar nga shumica e shfletuesve në ditët e sotme.

ECMAScript?

-Po, e dini, standardi i skriptimit JavaScript u bazua në 1999 pas lëshimit fillestar në 1995, atëherë kur JavaScript u emërua Livescript dhe funksiononte vetëm në Netscape Navigator. Ishte shumë e çrregullt atëherë, por fatmirësisht tani gjërat janë shumë të qarta dhe ne kemi, si, 7 botime të këtij zbatimi.

7 botime. Për të vërtetë. Dhe ES5 dhe ES2016+ janë?

-Edicioni i pestë dhe i shtatë përkatësisht.

Prit, çfarë ndodhi me të gjashtin?

-E ke fjalën për ES6? Po, dua të them, çdo edicion është një superset i atij të mëparshmi, kështu që nëse po përdorni ES2016+, po përdorni të gjitha veçoritë e versioneve të mëparshme.

E drejta. Dhe pse të përdorni ES2016+ mbi ES6 atëherë?

-Epo, MUND të përdorni ES6, por për të përdorur veçori të lezetshme si asinkronizimi dhe pritshmëria, duhet të përdorni ES2016+. Përndryshe ju jeni të mbërthyer me gjeneratorët ES6 me korutina për të bllokuar thirrjet asinkrone për rrjedhën e duhur të kontrollit.

Nuk e kam idenë se çfarë sapo thatë, dhe të gjithë këta emra janë konfuzë. Shiko, unë thjesht po ngarkoj një grup të dhënash nga një server, dikur mund të përfshija vetëm jQuery nga një CDN dhe thjesht të merrja të dhënat me thirrjet AJAX, pse nuk mund ta bëj këtë?

-Është 2016 burrë, askush nuk përdor më jQuery, përfundon në një tufë kodesh spageti. Të gjithë e dinë këtë.

E drejta. Pra, alternativa ime është të ngarkoj tre biblioteka për të marrë të dhëna dhe për të shfaqur një tabelë HTML.

-Epo, ju përfshini ato tre biblioteka, por i bashkoni ato me një menaxher moduli për të ngarkuar vetëm një skedar.

Unë shoh. Dhe çfarë është një menaxher i modulit?

-Përkufizimi varet nga mjedisi, por në ueb zakonisht nënkuptojmë çdo gjë që mbështet modulet AMD ose CommonJS.

Riiight. Dhe AMD dhe CommonJS janë…?

-Përkufizimet. Ka mënyra për të përshkruar se si duhet të ndërveprojnë bibliotekat dhe klasa të shumta JavaScript. E dini, eksporton dhe kërkon? Ju mund të shkruani skedarë të shumtë JavaScript që përcaktojnë AMD ose CommonJS API dhe mund të përdorni diçka si Browserify për t'i bashkuar ato.

OK, kjo ka kuptim… Mendoj. Çfarë është Browserify?

-Është një mjet që ju lejon të bashkoni varësitë e përshkruara në CommonJS me skedarët që mund të ekzekutohen në shfletues. Ajo u krijua sepse shumica e njerëzve i publikojnë ato varësi në regjistrin npm.

regjistri npm?

-Është një depo shumë e madhe publike ku njerëzit e zgjuar vendosin kodin dhe varësitë si module.

Si një CDN?

- Jo me të vërtetë. Është më shumë si një bazë të dhënash e centralizuar ku çdokush mund të publikojë dhe shkarkojë biblioteka, kështu që ju mund t'i përdorni ato në nivel lokal për zhvillim dhe më pas t'i ngarkoni ato në një CDN nëse dëshironi.

Oh, si Bower!

-Po, por tani është 2016, askush nuk e përdor më Bower.

Oh, e kuptoj… kështu që më duhet të shkarkoj bibliotekat nga npm atëherë?

-Po. Pra, për shembull, nëse doni të përdorni React, shkarkoni modulin React dhe importoni atë në kodin tuaj. Ju mund ta bëni këtë për pothuajse çdo bibliotekë të njohur JavaScript.

Oh, si Angular!

-Angular është kaq 2015. Por po. Angular do të ishte atje, së bashku me VueJS ose RxJS dhe biblioteka të tjera interesante të 2016-ës. Dëshironi të mësoni rreth tyre?

Le të qëndrojmë me React, tashmë po mësoj shumë gjëra tani. Pra, nëse më duhet të përdor React, e marr nga kjo npm dhe më pas përdor këtë gjë të Browserify?

-Po.

Duket tepër e ndërlikuar për të kapur një mori varësish dhe për t'i lidhur ato së bashku.

- Kjo është arsyeja pse ju përdorni një menaxher detyrash si Grunt ose Gulp ose Broccoli për të automatizuar ekzekutimin e Browserify. Dreq, mund të përdorni edhe Mimozën.

Gërmim? Gulp? Brokoli? Mimoza? Për dreqin po flasim tani?

- Menaxherët e detyrave. Por ata nuk janë më të ftohtë. Ne i përdorëm ato në vitin 2015, më pas përdorëm Makefiles, por tani mbështjellim gjithçka me Webpack.

Skedarët e krijuar? Mendova se përdorej më së shumti në projektet C ose C++.

-Po, por me sa duket në ueb na pëlqen t'i komplikojmë gjërat dhe më pas të kthehemi te bazat. Ne e bëjmë këtë çdo vit apo më shumë, thjesht prisni për të, ne do të bëjmë montimin në ueb pas një ose dy viti.

Psherëtimë. Ju përmendët diçka të quajtur Webpack?

-Është një tjetër menaxher i modulit për shfletuesin, ndërsa është gjithashtu një lloj ekzekutuesi i detyrave. Është si një version më i mirë i Browserify.

Oh, në rregull. Pse është më mirë?

-Epo, mbase jo më mirë, thjesht është më shumë opinion se si duhet të lidhen varësitë tuaja. Webpack ju lejon të përdorni menaxherë të ndryshëm të moduleve, dhe jo vetëm CommonJS, kështu për shembull modulet e mbështetura nga ES6.

Jam jashtëzakonisht i hutuar nga e gjithë kjo gjë CommonJS/ES6.

-Të gjithë janë, por nuk duhet të kujdeseni më për SystemJS.

Jezus Krishti, një emër tjetër-js. Ok, dhe çfarë është ky SystemJS?

-Epo, ndryshe nga Browserify dhe Webpack 1.x, SystemJS është një ngarkues dinamik i moduleve që ju lejon të lidhni module të shumta në skedarë të shumtë në vend që t'i bashkoni ato në një skedar të madh.

Prisni, por mendova se donim të ndërtonim bibliotekat tona në një skedar të madh dhe ta ngarkonim atë!

-Po, por për shkak se HTTP/2 po vjen tani kërkesat e shumta HTTP janë në fakt më të mira.

Prisni, kështu që nuk mund të shtojmë tre bibliotekat origjinale për React??

- Jo me të vërtetë. Dua të them, ju mund t'i shtoni ato si skripta të jashtëm nga një CDN, por prapë do t'ju duhet të përfshini Babel atëherë.

Psherëtimë. Dhe kjo është e keqe apo jo?

-Po, ju do të përfshinit të gjithë bërthamën e babelit dhe nuk do të ishte efikas për prodhim. Gjatë prodhimit, ju duhet të kryeni një sërë detyrash paraprake për të përgatitur projektin tuaj që e bëjnë ritualin e thirrjes së Satanit të duket si një recetë vezësh të ziera. Ju duhet të minimizoni asetet, t'i shëmtoni ato, të futni css sipër, të shtyni skriptet, si dhe-

E kuptova, e mora. Pra, nëse nuk do t'i përfshinit bibliotekat drejtpërdrejt në një CDN, si do ta bënit atë?

-Unë do ta transpiloja atë nga Typescript duke përdorur një kombinim Webpack + SystemJS + Babel.

Shkrimi i shkrimit? Mendova se po kodonim në JavaScript!

-Typescript IS JavaScript, ose thënë më mirë, një superbashkësi e JavaScript, më konkretisht JavaScript në versionin ES6. E dini, versionin e gjashtë për të cilin folëm më parë?

Mendova se ES2016+ ishte tashmë një superset i ES6! PSE na duhet tani kjo gjë e quajtur Shkrimi i Shkrimit?

-Oh, sepse na lejon të përdorim JavaScript si gjuhë të shtypur dhe të reduktojmë gabimet në kohën e ekzekutimit. Është viti 2016, ju duhet të shtoni disa lloje në kodin tuaj JavaScript.

Dhe Typescript padyshim e bën këtë.

-Flow po ashtu, megjithëse kontrollon vetëm për shtypjen ndërsa Typescript është një superbashkësi e JavaScript që duhet të përpilohet.

Psherëtimë… dhe Flow është?

-Është një kontrollues i tipit statik i bërë nga disa djem në Facebook. Ata e koduan atë në OCaml, sepse programimi funksional është i mrekullueshëm.

Ocaml? Programim funksional?

-Kjo është ajo që përdorin fëmijët e lezetshëm në ditët e sotme burrë, e dini, 2016? Programim funksional? Funksionet e rendit të lartë? Currying? Funksione të pastra?

Nuk e kam idenë se çfarë sapo thatë.

-Askush nuk e bën në fillim. Shikoni, ju vetëm duhet të dini se programimi funksional është më i mirë se OOP dhe kjo është ajo që ne duhet të përdorim në 2016.

Prit, kam mësuar OOP në kolegj, mendova se ishte mirë?

-Kështu ishte Java përpara se të blihej nga Oracle. Dua të them, OOP ishte i mirë në kohët, dhe ka ende përdorimet e tij sot, por tani të gjithë po kuptojnë se modifikimi i gjendjeve është i barabartë me goditjen e foshnjave me shkelm, kështu që tani të gjithë po kalojnë në objekte të pandryshueshme dhe programim funksional. Djemtë e Haskell e kishin thirrur për vite me radhë, -dhe mos më bëni të filloj me djemtë Elm- por për fat në ueb tani kemi biblioteka si Ramda që na lejojnë të përdorim programim funksional në JavaScript të thjeshtë.

Jeni vetëm me emra për hir të saj? Çfarë dreqin është Ramnda?

-Jo. Ramda. Ashtu si Lambda. E dini, bibliotekën e David Chambers?

David kush?

-David Chambers. Djalë i lezetshëm. Luan një lojë me grusht shteti. Një nga kontribuesit për Ramdën. Ju gjithashtu duhet të kontrolloni Erik Meijer nëse jeni serioz në lidhje me mësimin e programimit funksional.

Dhe Erik Meijer është…?

-Djalë programues funksional gjithashtu. Djalë i mrekullueshëm. Ai ka një sërë prezantimesh ku fshin Agile ndërsa përdor këtë këmishë me ngjyra të çuditshme. Ju gjithashtu duhet të kontrolloni disa nga gjërat nga Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. Unë do t'ju ndaloj atje. Gjithçka është e mirë dhe e mirë, por unë mendoj se gjithçka është kaq e ndërlikuar dhe e panevojshme për marrjen e të dhënave dhe shfaqjen e tyre. Jam shumë i sigurt se nuk kam nevojë t'i njoh këta njerëz apo të mësoj të gjitha ato gjëra për të krijuar një tabelë me të dhëna dinamike. Le të kthehemi te React. Si mund t'i marr të dhënat nga serveri me React?

-Epo, ju në fakt nuk i merrni të dhënat me React, ju thjesht i shfaqni të dhënat me React.

Oh, mallko mua. Pra, çfarë përdorni për të marrë të dhënat?

-Ju përdorni Fetch për të marrë të dhënat nga serveri.

me vjen keq? Ju përdorni Fetch për të marrë të dhënat? Kushdo që po i emërton ato gjëra ka nevojë për një thesaurus.

-E di apo jo? Merr atë është emri i zbatimit vendas për kryerjen e Kërkesave XMLHttp kundër një serveri.

Oh, pra AJAX.

-AJAX është vetëm përdorimi i XMLHttpRequests. Por sigurisht. Fetch ju lejon të bëni AJAX bazuar në premtime, të cilat më pas mund t'i zgjidhni për të shmangur ferrin e kthimit të telefonatave.

Ferr kthimi i thirrjes?

-Po. Sa herë që kryeni një kërkesë asinkron ndaj serverit, duhet të prisni përgjigjen e tij, e cila më pas ju bën të shtoni një funksion brenda një funksioni, i cili quhet piramida e kthimit të thirrjes nga ferri.

Oh, në rregull. Dhe kjo gjë e premtimit e zgjidh atë?

-Me të vërtetë. Duke manipuluar telefonatat tuaja përmes premtimeve, mund të shkruani kode më të lehta për t'u kuptuar, të talleni dhe t'i testoni ato, si dhe të kryeni kërkesa të njëkohshme menjëherë dhe të prisni derisa të ngarkohen të gjitha.

Dhe kjo mund të bëhet me Fetch?

-Po, por vetëm nëse përdoruesi juaj përdor një shfletues me gjelbërim të përhershëm, përndryshe ju duhet të përfshini një polyfill Fetch ose të përdorni Request, Bluebird ose Axios.

Sa biblioteka duhet të di për hir të Zotit? Sa janë prej tyre?

-Është JavaScript. Duhet të ketë mijëra biblioteka që të gjitha bëjnë të njëjtën gjë. Ne i njohim bibliotekat, në fakt, ne kemi bibliotekat më të mira. Bibliotekat tona janë të mëdha, dhe nganjëherë ne përfshijmë foto të Guy Fierit në to.

Sapo thatë Guy Fieri? Le ta mbarojmë këtë. Çfarë bëjnë këto biblioteka Bluebird, Request, Axios?

-Ato janë biblioteka për të kryer Kërkesa XMLHttp që kthejnë premtime.

A nuk filloi të kthejë edhe premtimet metoda AJAX e jQuery?

-Nuk e përdorim më fjalën “J” në vitin 2016. Thjesht përdorni Fetch dhe plotësoni atë kur nuk është në një shfletues ose përdorni Bluebird, Request ose Axios në vend të tyre. Pastaj menaxhoni premtimin me prit brenda një funksioni asinkronik dhe bum, ju keni rrjedhën e duhur të kontrollit.

Është hera e tretë që përmend prit por nuk e kam idenë se çfarë është.

-Await ju lejon të bllokoni një telefonatë asinkrone, duke ju lejuar të keni kontroll më të mirë se kur të dhënat po merren dhe në përgjithësi të rrisni lexueshmërinë e kodit. Është fantastike, thjesht duhet të siguroheni që të shtoni paracaktimin e fazës 3 në Babel, ose të përdorni funksionet sintaksë-async dhe shtojcën transformimi-async-to-gjenerues.

Kjo është e çmendur.

-Jo, i çmendur është fakti që ju duhet të parapërpiloni kodin Typescript dhe më pas ta transpiloni atë me Babel për ta përdorur në pritje.

Çfarë? Nuk përfshihet në Typescript?

-Kjo në versionin e ardhshëm, por që nga versioni 1.7 synon vetëm ES6, kështu që nëse doni të përdorni await në shfletues, fillimisht duhet të përpiloni kodin tuaj Typescript që synon ES6 dhe më pas Babel që shkon deri në objektivin ES5.

Në këtë pikë nuk di çfarë të them.

-Shiko, është e lehtë. Kodoni gjithçka në Typescript. Të gjitha modulet që përdorin Fetch i përpilojnë ato për të synuar ES6, i transpilojnë me Babel në një paravendosje të fazës 3 dhe i ngarkojnë me SystemJS. Nëse nuk keni Fetch, plotësoni atë ose përdorni Bluebird, Request ose Axios dhe trajtojini të gjitha premtimet tuaja në pritje.

Ne kemi përkufizime shumë të ndryshme të lehtë. Pra, me atë ritual më në fund mora të dhënat dhe tani mund t'i shfaq me React apo jo?

-A do të trajtojë aplikacioni juaj ndonjë ndryshim shtetëror?

Err, nuk mendoj kështu. Më duhet vetëm të shfaq të dhënat.

-Oh, faleminderit zotit. Përndryshe do të më duhej t'ju shpjegoja Flux, dhe zbatime si Flummox, Alt, Fluxible. Edhe pse për të qenë i sinqertë duhet të përdorni Redux.

Unë thjesht do të fluturoj mbi ata emra. Përsëri, më duhet vetëm të shfaq të dhënat.

-Oh, nëse thjesht po shfaqni të dhënat, nuk ju duheshin React për të filluar. Do të kishit qenë mirë me një motor shabllon.

po tallesh me mua? A mendoni se kjo është qesharake? Kështu silleni me të dashurit tuaj?

- Unë thjesht po shpjegoja se çfarë mund të përdorni.

Ndalo. Vetëm ndalo.

-Dmth, edhe nëse është thjesht duke përdorur motorin e shabllonit, unë do të përdorja përsëri një kombinim Typescript + SystemJS + Babel nëse do të isha në vendin tuaj.

Më duhet të shfaq të dhënat në një faqe, jo të kryej fatalitetin origjinal MK të Sub Zero. Thjesht më thuaj se çfarë motori shabllon të përdor dhe do ta marr prej andej.

-Ka shumë, me cilën jeni njohur?

Epo, nuk e mbaj mend emrin. Ishte shumë kohë më parë.

-jTabela? jQote? E PASTER?

Err, nuk i bie ziles. Një tjetër?

-Transparencë? JSRender? MarkupJS? KnockoutJS? Ai kishte lidhje të dyanshme.

Një tjetër?

-Pllaka JS? jQuery-tmpl? timonë? Disa njerëz ende e përdorin atë.

Ndoshta. A ka të ngjashme me atë të fundit?

-Mustaqe, nënvizim? Unë mendoj se tani edhe Lodash ka një të tillë për të qenë i sinqertë, por ato janë të vitit 2014.

Err.. ndoshta ishte me i ri.

- Jade? DustJS?

Nr.

-DotJS? EJS?

Nr.

-Nunjucks? TKE?

Nr.

-Mah, askujt nuk i pëlqen sintaksa e Coffeescript sidoqoftë. Jade?

Jo, ju tashmë keni thënë Jade.

-E kisha fjalën për Pug. E kisha fjalën Jade. Dua të them, Jade tani është Pug.

Psherëtimë. Jo. Nuk më kujtohet. Cilin do të përdornit?

-Ndoshta vetëm vargjet amtare të shabllonit ES6.

Më lejoni të marr me mend. Dhe kjo kërkon ES6.

-E sakte.

I cili, në varësi të shfletuesit që përdor, ka nevojë për Babel.

-E sakte.

Të cilën, nëse dua ta përfshij pa shtuar të gjithë bibliotekën bazë, duhet ta ngarkoj si modul nga npm.

-E sakte.

E cila, kërkon Browserify, ose Wepback, ose ka shumë të ngjarë atë gjë tjetër të quajtur SystemJS.

-E sakte.

E cila, nëse nuk është Webpack, në mënyrë ideale duhet të menaxhohet nga një ekzekutues i detyrave.

-E sakte.

Por, meqenëse duhet të përdor programim funksional dhe gjuhë të shtypura, së pari duhet të para-përpiloj Typescript ose të shtoj këtë gjë Flow.

-E sakte.

Dhe pastaj dërgojeni atë në Babel nëse dua ta përdor prit.

-E sakte.

Kështu që unë mund të përdor Fetch, premtimet dhe kontrollin e rrjedhës dhe gjithë atë magji.

-Vetëm mos harroni të polifilloni Fetch nëse nuk mbështetet, Safari ende nuk mund ta trajtojë atë.

E dini çfarë. Mendoj se këtu kemi mbaruar. Në fakt, mendoj se kam mbaruar. Unë kam mbaruar me ueb-in, kam mbaruar me JavaScript fare.

-Kjo është mirë, pas disa vitesh të gjithë do të kodojmë në Elm ose WebAssembly.

Thjesht do të kthehem te pjesa e pasme. Unë thjesht nuk mund t'i përballoj këto shumë ndryshime, versione dhe botime, përpilues dhe transpilues. Komuniteti JavaScript është i çmendur nëse mendon se dikush mund të vazhdojë me këtë.

-Të dëgjoj. Atëherë duhet të provoni komunitetin Python.

Pse?

-A keni dëgjuar ndonjëherë për Python 3?

Përditësim: Faleminderit për gabimet dhe gabimet e shkruara, do ta përditësoj artikullin siç u përmend. Diskutim në HackerNews dhe Reddit .