Ndenge nini eyokaka koyekola JavaScript na 2016

Ba cadres ya JavaScript esalemaki te na tango ya bokomi ya article oyo.

Oyo elandi epemamaki na lisolo “Ezali mikolo mizali koya” uta na Cercle CI. Okoki kotanga original awa . Eteni oyo ezali kaka likanisi, mpe lokola cadre nyonso ya JavaScript, esengeli te kozwa yango na motuya mingi.

Hey, nazui projet web oyo ya sika, mais pour être honnête na coder web mingi te depuis quelques ans pe nayoki paysage e changer mua moke. Ozali web dev oyo eleki na mikolo nzinga nzinga awa non?

-Terme ya solo ezali ingénieur ya Front End, mais yeah, naza gars ya bien. Nasalaka web na 2016. Ba visualisations, ba lecteurs ya musique, ba drones volant oyo ebetaka football, opesa kombo. Nawuti kozonga na JsConf na ReactConf, yango wana nayebi ba technologies ya sika pona kosala ba apps web.

Malili. Nasengeli kosala lokasa oyo elakisaka mosala ya sika oyo euti na basaleli, yango wana nasengeli kaka kozwa ba données na esika ya nsuka ya REST mpe kolakisa yango na lolenge moko ya tableau oyo ekoki ko filtrer, mpe kosala yango na mikolo soki eloko moko ebongwanaki na serveur. Nazalaki kokanisa mbala mosusu kosalela jQuery mpo na kozwa mpe kolakisa ba données?

-Oh nzambe na ngai te, moto moko asalelaka lisusu jQuery te. Esengeli omeka koyekola React, eza 2016.

Oh, OK, ezali malamu. React Ezali Nini?

-Ezali bibliothèque super cool oyo esalemi na ba gars mosusu na Facebook, ememaka vraiment contrôle na performance na application na yo, en permettant yo o gérer ba changements nionso ya vue très facilement.

Yango eyokani na ndenge ya malamu. Nakoki kosalela React mpo na kolakisa ba données oyo euti na serveur?

-Ee, kasi liboso esengeli obakisa React na React DOM lokola bibliothèque na page web na yo.

Zelá, mpo na nini bibliotɛkɛ mibale?

-Bongo moko ezali bibliothèque ya solo mpe ya mibale ezali mpo na ko manipuler DOM, oyo sikoyo okoki kolimbola na JSX.

JSX ezali? JSX ezali nini?

-JSX ezali kaka extension ya syntaxe ya JavaScript oyo ezali lokola XML. Ezali ndenge moko ya lolenge mosusu ya kolimbola DOM, kanisa yango lokola HTML ya malamu koleka.

Nini ezali mabe na HTML?

-Ezali 2016. Moto moko te a coder HTML directement lisusu.

Malamu. De toute façon, soki nabakisi ba bibliothèques oyo mibale alors nakoki kosalela React?

-Ezali mpenza te. Esengeli obakisa Babel, mpe na sima ozali na makoki ya kosalela React.

Bibliotɛkɛ mosusu? Babele azali nini?

-Oh, Babel ezali transpiler oyo epesaka yo nzela ya ko cibler ba versions spécifiques ya JavaScript, alors que ozali ko coder na version nionso ya JavaScript. Il faut te o kotisa Babel pona kosalela ReactJS, mais soki osali yango te, okangami na kosalela ES5, pe tozala ya solo, eza 2016, esengeli ozala codage na ES2016+ lokola ba reste ya bana cool basalaka.

ES5 ezali? ES2016+ ezali? Nazali kobunga awa. ES5 na ES2016+ ezali nini?

-ES5 ezali komonisa ECMAScript 5. Ezali édition oyo ezali na batu mingi cible puisque esalemi na ba navigateurs mingi mikolo oyo.

ECMAScript ezali?

-Ee, oyebi, norme ya scripting JavaScript esalemaki na 1999 sima ya sortie na yango ya liboso na 1995, na tango wana tango JavaScript ezwaki kombo Livescript mpe ezalaki kosala kaka na Netscape Navigator. Yango ezalaki très mobulu na tango wana, kasi merci sikoyo makambo ezali très claire mpe tozali na, lokola, 7 éditions ya mise en œuvre oyo.

7 éditions. Mpo na solo. Na ES5 na ES2016+ ezali?

-Edition ya mitano mpe ya sambo respectivement.

Zelá, nini esalemaki na oyo ya motoba?

-Olingi koloba ES6? Oui, nalingi koloba, édition moko na moko ezali superensemble ya oyo ya liboso, donc soki ozali kosalela ES2016+, ozali kosalela ba fonctionnalités nionso ya ba versions ya kala.

Malamu. Et pourquoi kosalela ES2016+ likolo ya ES6 alors?

-Bon, oKOKI kosalela ES6, kasi pona kosalela ba fonctionnalités cool lokola async pe kozela, esengeli osalela ES2016+. Sinon okangami na ba générateurs ES6 na ba coroutines pona ko bloquer ba appels asynchrones pona flux ya contrôle propre.

Nazali na likanisi moko te ya makambo oyo owuti koloba, mpe bankombo oyo nyonso ezali kobulunganisa. Tala, nazo charger kaka ebele ya ba données à partir ya serveur, nazalaki na makoki ya ko inclure kaka jQuery à partir ya CDN pe kozua kaka ba données na ba appels AJAX, pourquoi nakoki kosala kaka bongo te?

-Eza 2016 mobali, mutu asalelaka jQuery lisusu te, esukaka na ebele ya code ya spaghetti. Bato nyonso bayebi yango.

Malamu. Donc alternative na ngai ezali ya ko charger ba bibliothèques misatu pona kozua ba données pe kolakisa tableau HTML.

-Bon, o kotisa ba bibliothèques misatu wana mais o bundle yango na gestionnaire ya module pona ko charger kaka fichier moko.

Namoni. Na gestionnaire ya module eza nini?

-Ndimbola etali environnement, kasi na web tolingi koloba mingi mingi eloko nionso oyo esimbaka ba modules AMD to CommonJS.

Riiight na likambo yango. Na AMD na CommonJS ezali...?

-Bandimbola. Ezali na banzela ya kolimbola ndenge nini ba bibliothèques mpe ba classes ebele ya JavaScript esengeli kosala interaction. Oyebi, exportation na esengaka? Okoki kokoma ba fichiers JavaScript ebele oyo ezali kolimbola API ya AMD to CommonJS mpe okoki kosalela eloko lokola Browserify mpo na kosangisa yango.

OK, yango ezali na sens... Nakanisi. Browserify ezali nini?

-Ezali esaleli oyo epesaka yo nzela ya kosangisa ba dépendances oyo elimbolami na CommonJS na ba fichiers oyo ekoki kosalama na navigateur. Esalemaki mpo bato mingi babimisaka ba dépendances wana na registre ya npm.

registre ya npm?

-Ezali dépôt public ya munene mingi esika batu ya mayele batiaka code na ba dépendances lokola ba modules.

Lokola CDN moko?

-Vraiment te. Ezali mingi lokola base de données centralisée esika mutu nionso akoki kobimisa pe ko télécharger ba bibliothèques, po okoka kosalela yango localement pona développement et puis ko uploader yango na CDN soki olingi.

Oh, lokola Bower!

-Ee, mais eza 2016 sikoyo, mutu asalelaka lisusu Bower te.

Oh, namoni... donc il faut na télécharger ba bibliothèques na npm alors?

-Iyo. Donc par exemple, soki olingi osalela React , o télécharger module React pe o importer yango na code na yo. Okoki kosala yango mpo na pene na bibliotɛkɛ nyonso ya JavaScript oyo eyebani mingi.

Oh, lokola Angular!

-Angulaire ezali bongo 2015. Mais oui. Angular elingaki kozala wana, pembeni ya VueJS to RxJS na ba bibliothèques misusu ya cool 2016. Olingi koyeba makambo yango?

Tokangama na React, nazo yekola déjà makambu ebele sikoyo. Donc, soki naza na besoin ya kosalela React nazuaka yango na npm oyo et puis nasalelaka eloko oyo ya Browserify?

-Iyo.

Yango emonani lokola ezali compliqué mingi mpo na kokanga kaka liboke ya ba dépendances mpe kokangisa yango esika moko.

-Ezali, yango wana osalelaka gestionnaire ya misala lokola Grunt to Gulp to Broccoli mpo na ko automatiser kosala Browserify. Heck, okoki kutu kosalela Mimosa.

Konguluma? Komela na nzoto? Brocoli na yango? Mimosa ezali? The heck tozali kolobela sikoyo?

-Bakambi ya misala. Kasi bazali lisusu malili te. Tosalelaki bango na lokola, 2015, sima tosalelaki Makefiles, kasi sikoyo to envelopper nionso na Webpack.

Makefiles ya kosala? Nakanisaki ete yango ezalaki kosalelama mingimingi na ba projets ya C to C++.

-Yeah, mais apparemment na web tolingaka kosala makambu compliqué et puis kozonga na ba bases. Tosalaka yango mbula na mbula to koleka, zela kaka yango, tokosala assemblage na web na mbula moko to mibale.

Kolela. Olobelaki eloko moko babengi Webpack?

-Ezali gestionnaire ya module mosusu mpo na navigateur tout en étant sorte ya task runner lokola. Ezali lokola version ya malamu koleka ya Browserify.

Oh, Ok, ezali malamu. Mpo na nini ezali malamu koleka?

-Bon, peut-être malamu koleka te, ezali kaka plus opinionated na ndenge ba dépendances na yo esengeli ekangama. Webpack epesaka yo nzela ya kosalela ba gestionnaires ya module ndenge na ndenge, mpe kaka oyo ya CommonJS te, yango wana ndakisa ba modules natifs oyo esungami na ES6.

Nazali très confus na likambo oyo mobimba ya CommonJS/ES6.

-Bato nionso bazali, kasi esengeli te omibanzabanza lisusu na SystemJS.

Yesu klisto, nkombo mosusu-js. Ok, pe SystemJS oyo eza nini?

-Bon, na bokeseni na Browserify na Webpack 1.x, SystemJS ezali chargeur ya module dynamique oyo epesaka yo nzela ya kokangisa ba modules ebele na ba fichiers ebele au lieu ya ko bundling yango na fichier moko ya munene.

Zela, kasi nakanisaki tolingi kotonga ba bibliothèques na biso na fichier moko ya munene mpe ko charger yango!

-Ee, kasi mpo HTTP/2 ezali koya sikoyo ba demandes HTTP ebele ezali vraiment malamu koleka.

Zela, donc tokoki kaka kobakisa ba bibliothèques originales misatu pona React te??

-Vraiment te. Nalingi koloba, okokaki kobakisa yango lokola ba scripts ya libanda uta na CDN, kasi olingaki kaka kozala na mposa ya kokotisa Babel na ntango wana.

Kolela. Et wana eza mabe non?

-Ee, olingaki ozala ko inclure babel-core mobimba, pe elingaki ezala efficace te pona production. Na production esengeli osala série ya ba pré-tâches po ozala prêt ya projet na yo oyo esala que rituel ya kobenga Satana ezala lokola recette ya makei ya lamba. Esengeli o minifier ba biens, o uglifier yango, o inline css likolo ya pli, o diferer ba scripts, ainsi que-

Nazwi yango, nazwi yango. Donc soki olingaki ko kotisa ba bibliothèques directement na CDN te, okosala yango ndenge nini?

-Nalingaki na transpiler yango depuis Typescript en utilisant combo Webpack + SystemJS + Babel.

Makomi ya masini? Nakanisaki ete tozali kosala codage na JavaScript!

-Typescript EZALI JavaScript, to malamu koleka, superensemble ya JavaScript, mingi mingi JavaScript na version ES6. Oyebi, version wana ya motoba tolobelaki liboso?

Nakanisaki ES2016+ ezalaki déjà superensemble ya ES6! PONA NINI tozali na mposa ya sikoyo eloko oyo babengi Typescript?

-Oh, po epesaka biso nzela ya kosalela JavaScript lokola monoko ya type, pe kokitisa ba erreurs ya temps d'exécution. Ezali 2016, esengeli ozala kobakisa mwa mitindo na code JavaScript na yo.

Mpe Typescript ezali polele ete esalaka bongo.

-Flow lokola, atako e vérifier kaka mpo na ko type alors que Typescript ezali superensemble ya JavaScript oyo esengeli ezala compilé.

Sigh... mpe Flow ezali?

-Ezali vérifier ya type statique oyo esalemi na ba gars misusu na Facebook. Ba coder yango na OCaml, po programmation fonctionnelle eza somo.

OCaml ezali? Programmation fonctionnelle ya kosala?

-Ezali oyo bana ya malili basalelaka mikolo oyo mobali, oyebi, 2016? Programmation fonctionnelle ya kosala? Ba fonctions ya ordre ya likolo? Kosala curry? Ba fonctions ya peto?

Nazali na likanisi moko te ya makambo oyo owuti koloba.

-Moto moko te asalaka na ebandeli. Tala, esengeli kaka oyeba que programmation fonctionnelle eleki OOP mpe yango nde esengeli tozala kosalela na 2016.

Zela, nayekolaki OOP na collège, nakanisaki yango ezalaki malamu?

-Java ezalaki bongo liboso ya kosombama na Oracle. Nalingi koloba, OOP ezalaki malamu na mikolo, mpe ezali kaka na ba usages na yango lelo, kasi sikoyo mutu nionso azali ko réaliser ko modifier ba états ekokani na ko kiper ba bébés, yango wana sikoyo mutu nionso azali kokende na ba objets immutables mpe na programmation fonctionnelle. Haskell guys bazalaki kobenga yango depuis ba mbula, -et don't get me started with the Elm guys- kasi na chance na web sikoyo tozali na ba bibliothèques lokola Ramda oyo epesaka biso nzela ya kosalela programmation fonctionnelle na JavaScript ya pamba.

Ozali kaka kobwaka ba kombo mpo na yango? Ramnda eza nini ya mabe?

-Te. Ramda. Lokola Lambda. Oyebi, bibliothèque wana ya David Chambers?

David nani?

-David Chambers, oyo azali na mbongo mingi. Mobali ya malili. Abetaka jeu ya Coup d'Etat ya mabe. Moko ya ba contributeurs mpo na Ramda. Esengeli pe o vérifier Erik Meijer soki ozali sérieux pona koyekola programmation fonctionnelle.

Na Erik Meijer azali...?

-Guy ya programmation fonctionnelle lokola. Mobali ya somo. Aza na ebele ya ba présentations esika a poubelle Agile tout en utilisant chemise oyo ya couleur bizarre. Esengeli pe o vérifier mua biloko ya Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. Nako pekisa yo kuna. Nyonso wana ezali malamu mpe malamu, kasi nakanisi nyonso wana ezali kaka bongo compliqué mpe ezali na ntina te mpo na kaka kozwa ba données mpe kolakisa yango. Nazali assez sûr que naza na besoin te ya koyeba batu oyo to koyekola makambu wana nionso po na créer tableau na ba données dynamiques. Tozonga na React. Ndenge nini nakoki kozua ba données na serveur na React?

-Bon, vraiment ozuaka ba données na React te, olakisaka kaka ba données na React.

Oh, malédiction ngai. Bongo osalelaka nini pona kozua ba données?

-Osalelaka Fetch pona kozua ba données na serveur.

Bolimbisi? Osalelaka Fetch pona kozua ba données? Oyo azali kopesa kombo ya biloko wana aza na besoin ya thsaurus.

-Nayebi malamu? Fetch ezali kombo ya implémentation native pona kosala XMLHttpRequests contre serveur.

Oh, bongo AJAX.

-AJAX ezali kaka bosaleli ya XMLHttpRequests. Kasi ya solo. Fetch e permettre yo osala AJAX basé na ba promesses, oyo alors okoki ko résoudre pona ko éviter lifelo ya callback.

Callback lifelo ya sima?

-Ee. Mbala nyonso oyo ozali kosala demande asynchrone contre serveur, esengeli ozela réponse na yango, oyo na sima esalaka que obakisa fonction moko na kati ya fonction, oyo babengaka piramide ya callback depuis lifelo.

Oh, Ok, ezali malamu. Et likambo oyo ya elaka e résoudre yango?

-Ya solo. Na ko manipuler ba callbacks na yo na nzela ya ba promesses, okoki kokoma code facile ya ko comprendre, ko mock pe ko tester yango, ainsi que kosala ba demandes simultané na mbala moko pe kozela tiii tango nionso eko charger.

Mpe yango ekoki kosalema na Fetch?

-Ee, kasi kaka soki mosaleli na yo asaleli navigateur evergreen, soki te esengeli otia polyfill ya Fetch to osalela Request, Bluebird to Axios.

Ba bibliothèques boni nasengeli koyeba pona nzambe? Bazali boni kati na bango?

-Ezali JavaScript. Esengeli kozala na bankóto ya babibliotɛkɛ oyo nyonso esalaka likambo moko. Toyebi ba bibliothèques, en fait, tozali na ba bibliothèques ya malamu koleka. Ba bibliothèques na biso ezalaka huuuge, pe tango mosusu to kotisa ba photos ya Guy Fieri na kati.

Olobaki kaka Guy Fieri? Tosilisa likambo oyo. Ba bibliothèques oyo ya Bluebird, Request, Axios esalaka nini?

-Ezali ba bibliothèques mpo na kosala ba XMLHttpRequests oyo ezongisaka bilaka.

Méthode AJAX ya jQuery ebandaki kozongisa bilaka lokola te?

-Tosalelaka lisusu liloba “J” te na 2016. Salelá kaka Fetch, mpe polyfill yango ntango ezali na navigateur te to salelá Bluebird, Request to Axios na esika na yango. Sima gérer promesse na wait na kati ya fonction async na boom, oza na flux ya contrôle propre.

Eza mbala ya misato olobeli zela mais naza na idée te soki eza nini.

-Await epesaka yo nzela ya ko bloquer appel asynchrone, ko permettre yo ozala na contrôle ya malamu na tango ba données ezali kozuama mpe en général komatisaka lesibilité ya code. Ezali somo, esengeli kaka osala que obakisi pré-réglage ya stade-3 na Babel, to osalela syntax-async-functions na plugin transform-async-to-generator.

Oyo eza fou.

-Te, fou ezali le fait il faut o précompiler code Typescript et puis o transpiler yango na Babel po osalela wait.

Wat? Ezali na kati ya Typescript te?

-Esalaka na version oyo elandi, mais comme ya version 1.7 ezo cibler kaka ES6, donc soki olingi osalela wait na navigateur, d'abord il faut o compiler code Typescript na yo ciblant ES6 et puis Babel merde wana po o cibler ES5.

Na point oyo nayebi te nini nakoloba.

-Tala, ezali pete. Code nionso na Typescript. Ba modules nionso oyo esalelaka Fetch e compiler yango pona ko cibler ES6, e transpiler yango na Babel na pré-réglage ya stade-3, pe e charger yango na SystemJS. Soki oza na Fetch te, polyfill yango, to salela Bluebird, Request to Axios, pe simba bilaka na yo nionso na wait.

Tozali na ba définitions très différentes ya facile. Donc, na rituel wana nazui finalement ba données et sikoyo nakoki kolakisa yango na React non?

-Est-ce que demande na yo eko traité ba changements ya l'Etat?

Err, nakanisi ete ezali bongo te. Nasengeli kaka kolakisa ba données.

-Oh, merci na nzambe. Sinon il fallait na expliquer yo Flux, na ba implémentations lokola Flummox, Alt, Fluxible. Malgré pour être honnête il faut ozala kosalela Redux.

Nakopumbwa kaka likolo ya ba kombo wana. Encore, nasengeli kaka kolakisa ba données.

-Oh, soki ozali kaka kolakisa ba données ozalaki na besoin ya React te pona kobanda. Olingaki kozala malamu na moteur ya modèle.

Ozali kosala ngai masɛki? Okanisi ete likambo oyo ezali kosɛkisa? Osalelaka balingami na yo makambo ndenge wana?

-Nazalaki kaka kolimbola oyo okoki kosalela.

Kosukisa. Tiká kaka.

-Nalingi koloba, ata soki ezali kaka kosalela moteur ya modèle, nalingaki kaka kosalela combo Typescript + SystemJS + Babel soki nazalaki yo.

Nasengeli kolakisa ba données na page moko, te kosala fatalité originale ya MK ya Sub Zero. Yebisa ngai kaka moteur ya modèle nini nakosalela nakozua yango kuna.

-Ezali mingi, oyo nini oyebi malamu?

Ugh, nakoki komikundola kombo te. Ezalaki kala mingi te.

-jBamodèles? jQote ezali? PETO?

Err, ezo beta ngonga te. Mosusu?

-Ezali ya polele? JSRender? MarkupJS ya kosala? KnockoutJS ya kosala? Yango ezalaki na bokangami ya nzela mibale.

Mosusu?

-Ba plaquesJS? jMotuna-tmpl? Ba guidons? Bato mosusu bazali naino kosalela yango.

Mbala mosusu. Ezali na oyo ekokani na oyo ya nsuka wana?

-Moustache, ko souligner? Nabanzi sikoyo ata lodash aza na moko pona kozala honnête, mais wana eza sorte ya 2014.

Err.. peut-être ezalaki ya sika koleka.

-Jade na? PutuluJS?

Te.

-DotJS ezali? EJS ezali?

Te.

-Ba Nunjucks? ECT ezali?

Te.

-Mah, moto moko te alingaka syntaxe ya Coffeescript ata ndenge nini. Jade na?

Te, olobaki déjà Jade.

-Nalingaki koloba Pug. Nalingaki koloba Jade. Nalingi koloba, Jade azali sikoyo Pug.

Kolela. Te. Nakoki komikundola te. Oyo wapi okosalela?

-Mbala mosusu kaka ES6 native molongo ya modèle.

Tika na deviner. Mpe yango esɛngaka ES6.

-Malamu.

Oyo, selon navigateur nini nazo salela esengeli Babel.

-Malamu.

Oyo, soki nalingi ko kotisa sans kobakisa bibliothèque ya moboko mobimba, esengeli na charger yango comme module à partir ya npm.

-Malamu.

Oyo, esengaka Browserify, to Wepback, to mingi mingi eloko mosusu wana babengi SystemJS.

-Malamu.

Oyo, longola se soki ezali Webpack, na lolenge ya malamu esengeli kokambama na mopoti mbangu ya misala.

-Malamu.

Mais, lokola nasengeli kozala kosalela programmation fonctionnelle na ba langues typed nasengeli liboso ko pré-compiler Typescript to kobakisa Flow thingy oyo.

-Malamu.

Et puis tinda yango na Babel soki nalingi na salela wait.

-Malamu.

Donc nakoki alors kosalela Fetch, promises, na contrôle flux na magie wana nionso.

-Kobosana kaka te ko polyfill Fetch soki ezali soutenu te, Safari nanu ekoki ko gérer yango te.

Oyebi nini. Nakanisi tosilisi awa. Kutu, nakanisi ete nasili. Nasili na web, nasili na JavaScript mobimba.

-Ezali malamu, na mwa bambula biso banso tokozala na codage na Elm to WebAssembly.

Nako zonga kaka na backend. Nakoki kaka te ko gérer ba changements oyo ebele na ba versions na ba éditions na ba compilateurs na ba transpilers. Communauté ya JavaScript ezali fou soki ekanisaka mutu akoki kolanda likambo oyo.

-Nayoki yo. Esengeli omeka communauté ya Python na tango wana.

Mpo na nini?

-Osilá koyoka Python 3?

Mikolo oyo: Merci pona ko pointer ba typos na ba erreurs, nako mettre à jour article ndenge e noter. Masolo na HackerNews mpe Reddit .