Hoe dit voel om JavaScript in 2016 te leer

Geen JavaScript- raamwerke is tydens die skryf van hierdie artikel geskep nie.

Die volgende is geïnspireer deur die artikel “Dis die toekoms” van Circle CI. Jy kan die oorspronklike hier lees . Hierdie stuk is net 'n mening, en soos enige JavaScript-raamwerk, moet dit nie te ernstig opgeneem word nie.

Haai, ek het hierdie nuwe webprojek gekry, maar om eerlik te wees, het ek in 'n paar jaar nie veel web gekodeer nie en ek het gehoor die landskap het 'n bietjie verander. Jy is die mees onlangse webontwikkelaar hier, reg?

-Die werklike term is Front End-ingenieur, maar ja, ek is die regte ou. Ek doen web in 2016. Visualisasies, musiekspelers, vlieënde hommeltuie wat sokker speel, noem maar op. Ek het pas teruggekom van JsConf en ReactConf, so ek ken die nuutste tegnologieë om webtoepassings te skep.

Koel. Ek moet 'n bladsy skep wat die nuutste aktiwiteit van die gebruikers vertoon, so ek hoef net die data van die REST-eindpunt te kry en dit in 'n soort filterbare tabel te vertoon, en dit op te dateer as iets in die bediener verander. Ek het gedink om dalk jQuery te gebruik om die data te gaan haal en te vertoon?

-O my god nee, niemand gebruik jQuery meer nie. Jy moet probeer om React te leer, dit is 2016.

O, okay. Wat is React?

-Dit is 'n super cool biblioteek wat deur sommige ouens by Facebook gemaak is, dit bring regtig beheer en werkverrigting na jou toepassing, deurdat jy enige aansigveranderinge baie maklik kan hanteer.

Dit klink netjies. Kan ek React gebruik om data vanaf die bediener te vertoon?

-Ja, maar eers moet jy React en React DOM as 'n biblioteek by jou webblad byvoeg.

Wag, hoekom twee biblioteke?

-So een is die werklike biblioteek en die tweede een is vir die manipulering van die DOM, wat jy nou in JSX kan beskryf.

JSX? Wat is JSX?

-JSX is net 'n JavaScript-sintaksisuitbreiding wat amper soos XML lyk. Dit is soort van 'n ander manier om die DOM te beskryf, dink daaraan as 'n beter HTML.

Wat is fout met HTML?

-Dit is 2016. Niemand kodeer HTML meer direk nie.

Reg. In elk geval, as ek hierdie twee biblioteke byvoeg, kan ek React gebruik?

- Nie heeltemal nie. Jy moet Babel byvoeg, en dan kan jy React gebruik.

Nog 'n biblioteek? Wat is Babel?

-O, Babel is 'n transpiler wat jou toelaat om spesifieke weergawes van JavaScript te teiken, terwyl jy enige weergawe van JavaScript inkodeer. Jy hoef nie Babel in te sluit om ReactJS te gebruik nie, maar tensy jy dit doen, is jy vas met die gebruik van ES5, en laat ons werklik wees, dit is 2016, jy moet in ES2016+ kodeer soos die res van die cool kinders doen.

ES5? ES2016+? Ek verdwaal hier. Wat is ES5 en ES2016+?

-ES5 staan vir ECMAScript 5. Dit is die uitgawe wat die meeste mense teiken sedert dit deesdae deur die meeste blaaiers geïmplementeer is.

ECMAScript?

-Ja, jy weet, die scripting-standaard JavaScript is in 1999 gegrond na sy aanvanklike vrystelling in 1995, destyds toe JavaScript Livescript genoem is en net in die Netscape Navigator gehardloop het. Dit was destyds baie morsig, maar gelukkig is dinge nou baie duidelik en ons het, soos, 7 uitgawes van hierdie implementering.

7 uitgawes. Vir die regte. En ES5 en ES2016+ is?

-Die vyfde en sewende uitgawe onderskeidelik.

Wag, wat het met die sesde gebeur?

-Jy bedoel ES6? Ja, ek bedoel, elke uitgawe is 'n superset van die vorige een, so as jy ES2016+ gebruik, gebruik jy al die kenmerke van die vorige weergawes.

Reg. En hoekom dan ES2016+ bo ES6 gebruik?

-Wel, jy KAN ES6 gebruik, maar om koel kenmerke soos async en wag te gebruik, moet jy ES2016+ gebruik. Andersins sit jy vas met ES6 kragopwekkers met koroutines om asynchrone oproepe vir behoorlike beheervloei te blokkeer.

Ek het geen idee wat jy sopas gesê het nie, en al hierdie name is verwarrend. Kyk, ek laai net 'n klomp data van 'n bediener af, ek kon vroeër net jQuery van 'n CDN insluit en net die data met AJAX-oproepe kry, hoekom kan ek dit nie net doen nie?

-Dis 2016 man, niemand gebruik meer jQuery nie, dit beland in 'n klomp spaghetti-kodes. Almal weet dit.

Reg. So my alternatief is om drie biblioteke te laai om data te gaan haal en 'n HTML-tabel te vertoon.

-Wel, jy sluit daardie drie biblioteke in, maar bundel hulle saam met 'n modulebestuurder om net een lêer te laai.

Ek sien. En wat is 'n modulebestuurder?

-Die definisie hang af van die omgewing, maar in die web bedoel ons gewoonlik enigiets wat AMD- of CommonJS-modules ondersteun.

Riiight. En AMD en CommonJS is ...?

- Definisies. Daar is maniere om te beskryf hoe verskeie JavaScript-biblioteke en -klasse met mekaar moet saamwerk. Jy weet, uitvoer en vereis? U kan veelvuldige JavaScript-lêers skryf wat die AMD- of CommonJS API definieer en u kan iets soos Browserify gebruik om dit saam te voeg.

OK, dit maak sin... Ek dink. Wat is Browserify?

-Dit is 'n instrument waarmee jy CommonJS-beskryfde afhanklikhede kan bundel met lêers wat in die blaaier uitgevoer kan word. Dit is geskep omdat die meeste mense daardie afhanklikhede in die npm-register publiseer.

npm-register?

-Dit is 'n baie groot openbare bewaarplek waar slim mense kode en afhanklikhede as modules plaas.

Soos 'n CDN?

- Nie regtig nie. Dit is meer soos 'n gesentraliseerde databasis waar enigiemand biblioteke kan publiseer en aflaai, sodat jy dit plaaslik vir ontwikkeling kan gebruik en dit dan na 'n CDN kan oplaai as jy wil.

O, soos Bower!

-Ja, maar dit is nou 2016, niemand gebruik meer Bower nie.

O, ek sien … so ek moet die biblioteke dan van npm aflaai?

- Ja. So byvoorbeeld, as jy React wil gebruik, laai jy die React-module af en voer dit in jou kode in. U kan dit vir byna elke gewilde JavaScript-biblioteek doen.

O, soos Angular!

-Angular is so 2015. Maar ja. Angular sal daar wees, saam met VueJS of RxJS en ander cool 2016-biblioteke. Wil jy daaroor leer?

Kom ons hou by React, ek leer nou al te veel dinge. Dus, as ek React moet gebruik, haal ek dit van hierdie npm af en gebruik dan hierdie Browserify-ding?

- Ja.

Dit lyk te ingewikkeld om net 'n klomp afhanklikhede te gryp en dit saam te bind.

Dit is hoekom jy 'n taakbestuurder soos Grunt of Gulp of Broccoli gebruik om Browserify te outomatiseer. Heck, jy kan selfs Mimosa gebruik.

Grotter? Sluk? Broccoli? Mimosa? Die fok praat ons nou van?

-Taakbestuurders. Maar hulle is nie meer cool nie. Ons het dit in 2015 gebruik, toe het ons Makefiles gebruik, maar nou draai ons alles met Webpack toe.

Maak lêers? Ek het gedink dit word meestal op C- of C++-projekte gebruik.

-Ja, maar blykbaar in die web hou ons daarvan om dinge ingewikkeld te maak en dan terug te gaan na die basiese beginsels. Ons doen dit elke jaar of wat, wag net daarvoor, ons gaan oor 'n jaar of twee monteer in die web doen.

Sug. Het jy iets genoem wat Webpack genoem word?

Dit is 'n ander modulebestuurder vir die blaaier terwyl dit ook 'n soort taakloper is. Dit is soos 'n beter weergawe van Browserify.

O, ok. Hoekom is dit beter?

-Wel, miskien nie beter nie, dit is net meer eiesinnig oor hoe jou afhanklikhede gekoppel moet word. Webpack laat jou toe om verskillende modulebestuurders te gebruik, en nie net CommonJS nie, so byvoorbeeld inheemse ES6-ondersteunde modules.

Ek is uiters verward oor hierdie hele CommonJS/ES6-ding.

-Almal is, maar jy moet nie meer omgee met SystemJS nie.

Jesus christus, nog 'n naamwoord-js. Ok, en wat is hierdie SystemJS?

-Wel, anders as Browserify en Webpack 1.x, is SystemJS 'n dinamiese module-laaier wat jou toelaat om veelvuldige modules in veelvuldige lêers te bind in plaas daarvan om dit in een groot lêer te bundel.

Wag, maar ek het gedink ons wil ons biblioteke in een groot lêer bou en dit laai!

-Ja, maar omdat HTTP/2 nou kom, is verskeie HTTP-versoeke eintlik beter.

Wag, so kan ons nie maar die drie oorspronklike biblioteke vir React byvoeg nie??

- Nie regtig nie. Ek bedoel, jy kan hulle as eksterne skrifte vanaf 'n CDN byvoeg, maar dan sal jy steeds Babel moet insluit.

Sug. En dit is sleg reg?

-Ja, jy sal die hele babel-kern insluit, en dit sal nie doeltreffend wees vir produksie nie. By produksie moet jy 'n reeks vooraftake uitvoer om jou projek gereed te kry wat die ritueel om Satan te ontbied soos 'n gekookte eierresep laat lyk. Jy moet bates verkleineer, dit lelik maak, css bo die vou inlyn, skrifte uitstel, asook-

Ek het dit, ek het dit. So as jy nie die biblioteke direk in 'n CDN sou insluit nie, hoe sou jy dit doen?

-Ek sal dit transpileer vanaf Typescript met 'n Webpack + SystemJS + Babel-kombinasie.

Tikskrif? Ek het gedink ons kodeer in JavaScript!

-Typskrif IS JavaScript, of beter gestel, 'n superset van JavaScript, meer spesifiek JavaScript op weergawe ES6. Weet jy, daardie sesde weergawe waarvan ons voorheen gepraat het?

Ek het gedink ES2016+ is reeds 'n superstel van ES6! WAAROM het ons nou hierdie ding genaamd Typescript nodig?

-O, want dit stel ons in staat om JavaScript as 'n getikte taal te gebruik en looptydfoute te verminder. Dit is 2016, jy behoort 'n paar tipes by jou JavaScript-kode te voeg.

En Typescript doen dit natuurlik.

-Vloei ook, alhoewel dit net kyk vir tik terwyl Typescript 'n superset van JavaScript is wat saamgestel moet word.

Sug ... en Flow is?

-Dit is 'n statiese tipe kontroleerder wat deur sommige ouens by Facebook gemaak is. Hulle het dit in OKaml gekodeer, want funksionele programmering is wonderlik.

OKaml? Funksionele programmering?

-Dis wat die cool kinders deesdae gebruik man, jy weet, 2016? Funksionele programmering? Hoë orde funksies? Kerrie? Suiwer funksies?

Ek het geen idee wat jy sopas gesê het nie.

- Niemand doen dit aan die begin nie. Kyk, jy moet net weet dat funksionele programmering beter is as OOP en dit is wat ons in 2016 behoort te gebruik.

Wag, ek het OOP op universiteit geleer, ek het gedink dit is goed?

So was Java voordat dit deur Oracle gekoop is. Ek bedoel, OOP was goed in die dae, en dit het vandag nog sy gebruike, maar nou besef almal dat die verandering van toestande gelykstaande is aan die skop van babas, so nou beweeg almal na onveranderlike voorwerpe en funksionele programmering. Haskell-ouens het dit al jare genoem, -en moenie my met die Elm-ouens begin nie, maar gelukkig het ons nou biblioteke soos Ramda op die web wat ons in staat stel om funksionele programmering in gewone JavaScript te gebruik.

Los jy net name ter wille daarvan? Wat de hel is Ramnda?

-Nee. Ramda. Soos Lambda. Weet jy, daardie David Chambers se biblioteek?

Dawid wie?

-David Chambers. Cool ou. Speel 'n gemene staatsgreep-speletjie. Een van die bydraers vir Ramda. Jy moet ook vir Erik Meijer nagaan as jy ernstig is om funksionele programmering te leer.

En Erik Meijer is...?

-Funksionele programmeerman ook. Awesome ou. Hy het 'n klomp aanbiedings waar hy Agile rommel terwyl hy hierdie vreemde gekleurde hemp gebruik. Jy moet ook van die goed nagaan van Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Goed. Ek gaan jou daar stop. Alles wat goed en goed is, maar ek dink alles is net so ingewikkeld en onnodig om net data te gaan haal en te vertoon. Ek is redelik seker ek hoef nie hierdie mense te ken of al daardie dinge te leer om 'n tabel met dinamiese data te skep nie. Kom ons keer terug na React. Hoe kan ek die data van die bediener af haal met React?

-Wel, jy haal eintlik nie die data met React nie, jy vertoon net die data met React.

O, verdomp my. So wat gebruik jy om die data te gaan haal?

-Jy gebruik Fetch om die data van die bediener af te haal.

Ek is jammer? Gebruik jy Fetch om die data te gaan haal? Wie daardie dinge noem, het 'n tesourus nodig.

- Ek weet reg? Haal dit is die naam van die inheemse implementering vir die uitvoering van XMLHttpRequests teen 'n bediener.

O, so AJAX.

-AJAX is net die gebruik van XMLHttpRequests. Maar seker. Met Fetch kan jy AJAX doen op grond van beloftes, wat jy dan kan oplos om die terugbelhel te vermy.

Terugbel hel?

- Ja. Elke keer as jy 'n asynchrone versoek teen die bediener uitvoer, moet jy wag vir die reaksie daarvan, wat jou dan 'n funksie in 'n funksie laat byvoeg, wat die terugbelpiramide van die hel genoem word.

O, ok. En hierdie belofte ding los dit op?

- Inderdaad. Deur jou terugbelopings deur beloftes te manipuleer, kan jy makliker kode skryf, bespot en toets, asook gelyktydige versoeke op een slag uitvoer en wag totdat almal gelaai is.

En dit kan gedoen word met Fetch?

-Ja, maar net as jou gebruiker 'n immergroen blaaier gebruik, anders moet jy 'n Fetch polyfill insluit of Request, Bluebird of Axios gebruik.

Hoeveel biblioteke moet ek ter wille van God ken? Hoeveel is van hulle?

- Dit is JavaScript. Daar moet duisende biblioteke wees wat almal dieselfde ding doen. Ons weet biblioteke, om die waarheid te sê, ons het die beste biblioteke. Ons biblioteke is groot, en soms sluit ons foto's van Guy Fieri in.

Het jy nou net Guy Fieri gesê? Kom ons kry dit klaar. Wat doen hierdie Bluebird, Request, Axios-biblioteke?

-Hulle is biblioteke om XMLHttpRequests uit te voer wat beloftes gee.

Het jQuery se AJAX-metode nie ook begin om beloftes terug te gee nie?

-Ons gebruik nie meer die “J”-woord in 2016 nie. Gebruik net Fetch, en polyfill dit wanneer dit nie in 'n blaaier is nie of gebruik eerder Bluebird, Request of Axios. Bestuur dan die belofte met wag binne 'n async-funksie en boom, jy het behoorlike beheervloei.

Dit is die derde keer dat jy wag, maar ek het geen idee wat dit is nie.

-Wag laat jou toe om 'n asynchrone oproep te blokkeer, sodat jy beter beheer kan hê oor wanneer die data gaan haal word en die algehele kodeleesbaarheid verhoog. Dit is wonderlik, jy moet net seker maak dat jy die stadium-3-voorinstelling in Babel byvoeg, of sintaksis-async-funksies en transform-async-to-generator-inprop gebruik.

Dit is kranksinnig.

-Nee, kranksinnig is die feit dat jy Typescript-kode vooraf moet saamstel en dit dan met Babel moet transpileer om te gebruik.

Wat? Is dit nie by Typescript ingesluit nie?

-Dit doen dit in die volgende weergawe, maar vanaf weergawe 1.7 teiken dit net ES6, so as jy wag in die blaaier wil gebruik, moet jy eers jou Typescript-kode saamstel wat ES6 teiken en dan Babel wat kak tot teiken ES5.

Op hierdie stadium weet ek nie wat om te sê nie.

-Kyk, dit is maklik. Kodeer alles in Typescript. Alle modules wat Fetch gebruik, stel hulle saam om ES6 te teiken, transpileer hulle met Babel op 'n stadium-3 voorafinstelling, en laai hulle met SystemJS. As jy nie Fetch het nie, vul dit vol, of gebruik Bluebird, Request of Axios, en hanteer al jou beloftes met wag.

Ons het baie verskillende definisies van maklik. So, met daardie ritueel het ek uiteindelik die data gaan haal en nou kan ek dit met React vertoon, reg?

-Gaan jou aansoek enige staatsveranderinge hanteer?

Eer, ek dink nie so nie. Ek moet net die data vertoon.

- O, dank die Here. Anders sou ek jou Flux moes verduidelik, en implementerings soos Flummox, Alt, Fluxible. Alhoewel om eerlik te wees, moet jy Redux gebruik.

Ek gaan maar oor daai name vlieg. Weereens, ek moet net data vertoon.

-O, as jy net die data vertoon wat jy nie nodig gehad het nie, Reageer om mee te begin. Jy sou goed gewees het met 'n sjabloonenjin.

Maak jy 'n grap? Dink jy dit is snaaks? Is dit hoe jy jou geliefdes behandel?

-Ek het net verduidelik wat jy kan gebruik.

Stop. Hou net op.

-Ek bedoel, selfs al gebruik dit net sjabloonenjin, sou ek steeds 'n Typescript + SystemJS + Babel-kombinasie gebruik as ek jy was.

Ek moet data op 'n bladsy vertoon, nie Sub Zero se oorspronklike MK fatality uitvoer nie. Sê net vir my watter sjabloonenjin om te gebruik en ek sal dit van daar af neem.

-Daar is baie, met watter een is jy bekend?

Ag, kan nie die naam onthou nie. Dit was lank gelede.

-jSjablone? jQote? PURE?

Eer, lui nie 'n klokkie nie. Nog een?

- Deursigtigheid? JSRender? MarkupJS? KnockoutJS? Daardie een het tweerigtingbinding gehad.

Nog een?

-PlateJS? jQuery-tmpl? Handvatsels? Sommige mense gebruik dit steeds.

Miskien. Is daar soortgelyke aan die laaste een?

-Snor, onderstreep? Ek dink nou selfs lodash het een om eerlik te wees, maar dit is soort van 2014.

Eer.. miskien was dit nuwer.

- Jade? DustJS?

Nee.

-DotJS? EJS?

Nee.

-Nunjucks? ECT?

Nee.

-Mah, niemand hou in elk geval van Coffeescript-sintaksis nie. Jade?

Nee, jy het reeds gesê Jade.

-Ek het Pug bedoel. Ek het Jade bedoel. Ek bedoel, Jade is nou Pug.

Sug. Nee. Kan nie onthou nie. Watter een sal jy gebruik?

- Waarskynlik net ES6-inheemse sjabloonstringe.

Laat ek raai. En dit vereis ES6.

-Korrek.

Wat, afhangende van watter blaaier ek gebruik, Babel benodig.

-Korrek.

Wat, as ek wil insluit sonder om die hele kernbiblioteek by te voeg, ek dit as 'n module vanaf npm moet laai.

-Korrek.

Wat Browserify, of Wepback vereis, of heel waarskynlik daardie ander ding genaamd SystemJS.

-Korrek.

Wat, tensy dit Webpack is, ideaal deur 'n taakloper bestuur moet word.

-Korrek.

Maar aangesien ek funksionele programmering en getikte tale behoort te gebruik, moet ek eers Typescript vooraf saamstel of hierdie Flow-ding byvoeg.

-Korrek.

En stuur dit dan na Babel as ek wag wil gebruik.

-Korrek.

So ek kan dan haal, beloftes en beheer vloei en al daardie magie gebruik.

-Moet net nie vergeet om haal te polyfill as dit nie ondersteun word nie, Safari kan dit steeds nie hanteer nie.

Weet jy wat. Ek dink ons is klaar hier. Eintlik dink ek ek is klaar. Ek is klaar met die web, ek is heeltemal klaar met JavaScript.

-Dit is goed, oor 'n paar jaar gaan ons almal in Elm of WebAssembly kodeer.

Ek gaan net terugbeweeg na die agterkant. Ek kan net nie hierdie baie veranderinge en weergawes en uitgawes en samestellers en transpilers hanteer nie. Die JavaScript-gemeenskap is kranksinnig as dit dink iemand kan hiermee tred hou.

- Ek hoor jou. Jy moet dan die Python-gemeenskap probeer.

Hoekom?

Al ooit gehoor van Python 3?

Opdatering: Dankie vir die wys van tikfoute en foute, ek sal die artikel opdateer soos aangedui. Bespreking in HackerNews en Reddit .