Suositut käyttöliittymän kehitystyökalut, jotka sinun tulisi tietää

Jos olet vasta aloittamassa JavaScriptin käyttöä, kuulemiesi työkalujen ja tekniikoiden määrä voi olla ylivoimainen. Ja sinulla voi olla vaikea päättää mitä työkaluja todella tarvitset.

Tai ehkä tunnet työkalut, mutta et ole juurikaan miettinyt, mitä ongelmia ne ratkaisevat ja kuinka kurja elämäsi olisi ilman heidän apuaan.

Mielestäni ohjelmistosuunnittelijoille ja kehittäjille on tärkeää ymmärtää päivittäin käyttämiemme työkalujen tarkoitus.

Siksi tarkastelen tässä artikkelissa NPM: ää, Babelia, Webpackia, ESLintiä ja CircleCI: tä ja yritän selventää heidän ratkaisemiaan ongelmia ja niiden ratkaisemista.

NPM

NPM on JavaScript-kehityksen oletuspaketinhallinta. Se auttaa sinua löytämään ja asentamaan paketteja (ohjelmia), joita voit käyttää ohjelmissasi.

Voit lisätä npm projektiin yksinkertaisesti käyttämällä " npm init " -komentoa. Kun suoritat tämän komennon, se luo " package.json " -tiedoston nykyiseen hakemistoon. Tämä on tiedosto, jossa riippuvuutesi on lueteltu, ja npm näyttää sen projektin henkilökorttina.

Voit lisätä riippuvuuden komennolla " npm install (package_name) ".

Kun suoritat tämän komennon, npm siirtyy etärekisteriin ja tarkistaa, onko tällä paketin nimellä tunnistettu paketti. Jos se löytää sen, paketti.json lisätään uusi riippuvuustietue ja paketti, sen sisäisillä riippuvuuksilla, ladataan rekisteristä.

Löydät ladatut paketit tai riippuvuudet kansiosta "solmu_moduulit" . Pidä vain mielessä, että se yleensä tulee melko suureksi - joten muista lisätä se .gitignoreen .

Kuinka pitää JavaScript-kirjastosi ajan tasalla - LogRocket Blogi

NPM ei vain helpota pakettien löytämistä ja lataamista, vaan myös helpottaa yhteistyötä projektissa.

Ilman NPM: ää olisi vaikea hallita ulkoisia riippuvuuksia. Sinun on ladattava jokaisen riippuvuuden oikeat versiot käsin, kun liityt olemassa olevaan projektiin. Ja se olisi todellista vaivaa.

Npm: n avulla voit suorittaa vain "npm install" -toiminnon ja se asentaa kaikki ulkoiset riippuvuudet puolestasi. Sitten voit käyttää sitä uudelleen milloin tahansa, jos joku tiimistäsi lisää uuden.

Babel

Babel on JavaScript-kääntäjä tai kääntäjä, joka kääntää ECMAScript 2015+ -koodin koodiksi, jonka vanhemmat JavaScript-moottorit ymmärtävät.

Babel on suosituin Javascript-kääntäjä, ja kehykset, kuten Vue ja React, käyttävät sitä oletuksena. Siitä huolimatta käsitteet, joista puhumme täällä, eivät liity pelkästään Babeliin, ja ne koskevat kaikkia JavaScript-kääntäjiä.

Miksi tarvitset kääntäjää?

"Miksi tarvitsemme kääntäjän, eikö JavaScript ole tulkittu kieli?" voit kysyä, tunnetko käännettyjen ja tulkittujen kielten käsitteet.

On totta, että kutsumme jotakin yleensä "kääntäjäksi", jos se kääntää ihmisen luettavissa olevan koodin suoritettavaksi binaariksi, jonka CPU voi ymmärtää. Mutta näin ei ole tässä tapauksessa.

Termi transpiler voi olla sopivampi, koska se on kääntäjän osajoukko: Transpilers ovat kääntäjiä, jotka kääntävät koodin ohjelmointikieleltä toiselle kielelle (tässä esimerkissä modernista JS: stä vanhempaan versioon).

JavaScript on selainten kieli. Mutta selaimissa on ongelma: Yhteensopivuus. JavaScript-työkalut ja itse kieli kehittyvät nopeasti, ja monet selaimet eivät pysty vastaamaan tähän tahtiin. Tämä johtaa yhteensopivuusongelmiin.

Haluat todennäköisesti kirjoittaa koodin viimeisimpiin JavaScript-versioihin, jotta voit käyttää sen uusia ominaisuuksia. Mutta jos selaimesi, jota koodisi käyttää, ei ole ottanut käyttöön joitain uusia ominaisuuksia JavaScript-moottorissaan, koodi ei toimi oikein kyseisessä selaimessa.

Tämä on monimutkainen ongelma, koska jokainen selain toteuttaa ominaisuudet eri nopeudella. Ja vaikka he ottavat käyttöön nämä uudet ominaisuudet, on aina ihmisiä, jotka käyttävät selaimen vanhempaa versiota.

Entä jos haluat käyttää viimeisimpiä ominaisuuksia, mutta haluat myös, että käyttäjät tarkastelevat näitä sivuja ilman ongelmia?

Ennen Babelia käytimme polyfill-tiedostoja tietyn koodin vanhempien versioiden suorittamiseen, jos selain ei tue moderneja ominaisuuksia. Ja kun käytät Babelia, se käyttää polyfilejä kulissien takana eikä vaadi sinua tekemään mitään.

Kuinka kääntäjät / kääntäjät toimivat?

Babel toimii samalla tavalla kuin muut kääntäjät. Siinä on jäsennys-, muunnos- ja koodinmuodostusvaiheet.

Emme perehdy tässä perusteellisesti siihen, miten se toimii, koska kääntäjät ovat monimutkaisia ​​asioita. Mutta ymmärtääksesi kääntäjien toiminnan perusteet, voit tarkistaa super-tiny-compiler-projektin. Se mainitaan myös Babelin virallisissa asiakirjoissa auttavanaan ymmärtämään Babelin toimintaa.

Voimme yleensä päästä eroon tietäen Babelin laajennuksista ja esiasetuksista. Laajennukset ovat katkelmia, joita Babel käyttää kulissien takana kääntääksesi koodisi vanhempiin JavaScript-versioihin. Voit ajatella jokaista modernia ominaisuutta laajennukseksi. Voit siirtyä tähän linkkiin tarkistaaksesi täydellisen luettelon laajennuksista.

Esiasetukset ovat laajennusten kokoelmia. Jos haluat käyttää Babelia React-projektissa, voit käyttää valmiita @ babel / preset-react -toimintoja, jotka sisältävät tarvittavat laajennukset.

Voit lisätä laajennuksia muokkaamalla Babelin määritystiedostoa.

Tarvitsetko Babelin React-sovelluksellesi?

Reactia varten tarvitset kääntäjän, koska React-koodi käyttää yleensä JSX: tä ja JSX on käännettävä. Myös kirjasto on rakennettu ES6-syntaksin käyttökonseptiin.

Onneksi, kun luot projektin create-reagoi-sovelluksella , sen mukana on jo määritetty Babel, eikä sinun tarvitse yleensä muuttaa määritystä.

Esimerkkejä kääntäjistä toiminnassa

Babelin verkkosivustolla on online-kääntäjä, ja on todella hyödyllistä ymmärtää, miten se toimii. Liitä vain koodi ja analysoi lähtö.

Webpack

Webpack on staattinen moduulipaketti. Kun luot uuden projektin, useimmat JavaScript-kehykset / kirjastot käyttävät sitä nykyään heti laatikosta.

Jos lause "staattinen moduulipaketti" kuulostaa hämmentävältä, jatka lukemista, koska minulla on hyviä esimerkkejä, jotka auttavat sinua ymmärtämään.

Miksi tarvitset niputtajaa?

Verkkosovelluksissa sinulla on paljon tiedostoja. Tämä pätee erityisesti yhden sivun sovelluksiin (React, Vue, Angular), joista jokaisella on omat riippuvuutensa.

Tarkoitan riippuvuudella tuontilausetta - jos tiedoston A on tuotava tiedosto B toimiakseen oikein, sanomme A riippuvan B: stä.

Pienissä projekteissa voit hallita moduuliriippuvuudet tunnisteilla. Mutta kun projekti kasvaa, riippuvuuksista tulee nopeasti vaikea hallita.

Ehkä mikä tärkeintä, koodin jakaminen useisiin tiedostoihin tekee verkkosivustostasi latautuvan hitaammin. Tämä johtuu siitä, että selaimen on lähetettävä enemmän pyyntöjä kuin yksi iso tiedosto, ja verkkosivustosi alkaa kuluttaa tonnia kaistanleveyttä HTTP-otsikoiden takia.

Me kehittäjinä haluamme, että koodimme on modulaarinen. Jaamme sen useisiin tiedostoihin, koska emme halua työskennellä yhden tiedoston kanssa, jossa on tuhansia rivejä. Silti haluamme myös, että verkkosivustomme ovat suorituskykyisiä, käyttävät vähemmän kaistanleveyttä ja latautuvat nopeasti.

Joten nyt näemme, kuinka Webpack ratkaisee tämän ongelman.

Kuinka Webpack toimii

Kun puhuimme Babelista, mainitsimme, että JavaScript-koodi on siirrettävä ennen käyttöönottoa.

Mutta kääntäminen Babelin kanssa ei ole ainoa toiminto, jota tarvitset ennen projektisi käyttöönottoa.

Sinun on yleensä hehkuttava se, siirrettävä se, käännettävä SASS tai SCSS CSS: ään, jos käytät mitään esiprosessoreita, käännettävä TypeScript, jos käytät sitä ... ja kuten näette, tämä luettelo voi pitkittyä helposti.

Et halua käsitellä kaikkia näitä komentoja ja toimintoja ennen jokaista käyttöönottoa. Olisi hienoa, jos olisi työkalu, joka tekisi kaiken puolestasi oikeassa järjestyksessä ja oikealla tavalla.

Hyvä uutinen - Webpack on olemassa.

Webpack tarjoaa myös ominaisuuksia, kuten paikallisen palvelimen, jolla on kuuma päivitys (he kutsuvat sitä kuumien moduulien korvaamiseksi), jotta kehityskokemuksesi olisi parempi.

Joten mikä on kuuma uudelleenlataus? Se tarkoittaa, että aina kun tallennat koodisi, se kootaan ja otetaan käyttöön koneellasi toimivassa paikallisessa HTTP-palvelimessa. Ja aina kun tiedosto muuttuu, se lähettää viestin selaimeesi, joten sinun ei tarvitse edes päivittää sivua.

Jos olet joskus käyttänyt "npm run serve", "npm start" tai "npm run dev", nämä komennot käynnistävät myös Webpackin dev-palvelimen kulissien takana.

Webpack alkaa projektisi (hakemiston) alkupisteestä ja luo tiedoston abstraktin syntaksipuun. Voit ajatella sitä koodin jäsentämiseksi. Tämä operaatio suoritetaan myös kääntäjissä, jotka etsivät sitten tuontilausekkeita rekursiivisesti riippuvuuksien kuvaajaa varten.

Sitten se muuntaa tiedostot IIFE-tiedostoiksi modularisoimaan ne (muista, että koodin asettaminen funktion sisään rajoittaa sen soveltamisalaa). Näin he moduloivat tiedostot ja varmistavat, että muut tiedostot eivät ole muuttujien ja toimintojen käytettävissä.

Ilman tätä toimintoa se olisi kuin kopioida ja liittää tuodun tiedoston koodi, ja tällä tiedostolla olisi sama laajuus.

Webpack tekee monia muita kehittyneitä asioita kulissien takana, mutta se riittää ymmärtämään perusasiat.

Bonus - ESLint

Koodin laatu on tärkeä ja auttaa pitämään projektisi ylläpidettävissä ja helposti laajennettavissa. Vaikka useimmat meistä kehittäjät tunnustavat puhtaan koodauksen merkityksen, meillä on joskus tapana sivuuttaa pitkän aikavälin seuraukset määräaikojen paineessa.

Monet yritykset päättävät koodausstandardeista ja kannustavat kehittäjiä noudattamaan näitä standardeja. Mutta miten voit varmistaa, että koodisi täyttää standardit?

No, voit käyttää koodin sääntöjen noudattamista ESLintin kaltaisen työkalun avulla. Voit esimerkiksi luoda säännön, jolla pakotetaan tai estetään puolipisteiden käyttö JavaScript-koodissasi. Jos rikkot sääntöä, ESLint näyttää virheen eikä koodia edes käännetä - joten sitä ei voida sivuuttaa, ellet poista sääntöä käytöstä.

Lintereita voidaan käyttää standardien noudattamiseen kirjoittamalla mukautettuja sääntöjä. Mutta voit myös käyttää suurten teknologiayritysten luomia valmiita ESLint-kokoonpanoja auttaaksesi kehittäjiä saamaan tapana kirjoittaa puhdasta koodia.

Voit katsoa Googlen ESLint-määrityksiä täältä - se on mieluummin.

ESLint auttaa sinua totuttamaan parhaisiin käytäntöihin, mutta se ei ole sen ainoa etu. ESLint varoittaa myös mahdollisista virheistä / virheistä koodissasi, jotta voit välttää yleiset virheet.

Bonus - CI / CD (CircleCI)

Jatkuva integraatio / kehitys on saanut paljon suosiota viime vuosina, kun monet yritykset ovat ottaneet käyttöön ketterät periaatteet.

Jenkinsin ja CircleCI: n kaltaisten työkalujen avulla voit automatisoida ohjelmiston käyttöönoton ja testauksen, jotta voit ottaa käyttöön useammin ja luotettavammin käymättä itse läpi vaikeita ja virheille alttiita rakennusprosesseja.

Mainitsen tässä tuotteena CircleCI: n, koska se on ilmainen ja sitä käytetään usein JavaScript-projekteissa. Se on myös melko helppo käyttää.

Mennään esimerkki: Oletetaan, että sinulla on käyttöönotto / laadunvarmistuspalvelin ja Git-arkisto. Haluat ottaa muutokset käyttöön asennus- / laadunvarmistuspalvelimellesi, joten tässä on esimerkki prosessista:

  1. Työnnä muutokset Gitiin
  2. Muodosta yhteys palvelimeen
  3. Luo Docker-säilö ja suorita se
  4. Vedä muutokset palvelimeen, lataa kaikki riippuvuudet (npm install)
  5. Suorita testit varmistaaksesi, ettei mikään ole rikki
  6. Varmista koodin laatu käyttämällä ESLint / Sonar-tyyppistä työkalua
  7. Yhdistä koodi, jos kaikki on kunnossa

CircleCI: n avulla voit tehdä kaikki nämä toiminnot automaattisesti. Voit asettaa sen ja määrittää suorittamaan kaikki yllä olevat toiminnot aina, kun painat muutosta Gitiin. Se hylkää työnnön, jos jotain menee pieleen, esimerkiksi epäonnistunut testi.

En käsittele CircleCI: n määrittämisen yksityiskohtia, koska tämä artikkeli koskee enemmän "Miksi?" jokaisesta työkalusta. Mutta jos olet kiinnostunut oppimaan lisää ja näkemään sen toiminnassa, voit tutustua tähän opetusohjelmaan.

Johtopäätös

JavaScript-maailma kehittyy nopeasti ja uudet työkalut ovat saamassa suosiota joka vuosi.

Tähän muutokseen on helppo reagoida vain oppimalla työkalun käyttö - olemme usein liian kiireisiä ottamaan aikaa ja miettimään, miksi työkalu tuli suosituksi tai minkä ongelman se ratkaisee.

Tässä artikkelissa valitsin mielestäni suosituimmat työkalut ja jaoin ajatukseni niiden merkityksestä. Halusin myös saada sinut miettimään niiden ratkaisemia ongelmia eikä vain yksityiskohtia niiden käytöstä.

Jos pidit artikkelista, voit tarkistaa ja tilata blogini, jossa yritän kirjoittaa usein. Kerro minulle myös mielipiteesi kommentoimalla, jotta voimme ajatella tai voit kertoa minulle, mitä muita työkaluja rakastat käyttää :)