Mikä on Gatsby ja miksi on aika päästä hype-junaan

Kehykset tulevat ja menevät, ja vaikka Gatsby saattaa lopulta ajautua tekniikan tavoin, suorituskyky ja tuottavuuden lisäykset ovat vahvoja argumentteja sukellukseen heti.

Odota, mikä on Gatsby?

Gatsby on React-pohjainen ilmainen ja avoimen lähdekoodin kehys, joka auttaa kehittäjiä rakentamaan nopeaa verkkosivustoa ja sovellusta

Heidän painotuksensa (selitän myöhemmin). Haluan kuvata sitä nimellä Create React -sovellus steroideilla, jossa se on helppo tapa käynnistää React-sovellus ja keskittyä tuottavuuteen sovelluksesi todella eri osien kanssa. Ytimessä se on ylistetty Webpack-sovellus, jossa kaikki rakentuu samalle Webpack-putkelle, jonka kirjoittamista ja ymmärtämistä on tänä päivänä ollut vaikea yrittää (tai ehkä se on vain minä).

Kauneus on kuitenkin se, että se tuottaa staattisen verkkosivuston (yksinkertainen HTML-tiedosto), jonka sovelluksesi on esilähetetty optimaaliseen toimitukseen. Tämä tarkoittaa, että se voi toimia lähinnä missä tahansa, kuten yksinkertaisesti sijoittaa se S3: een ja palvella sitä staattisena verkkosivuna tai jopa helpompaa.

Kaikki on käsikirjoituksissa

Gatsby on yksi monista käytettävissä olevista työkaluista, joka tukee JAMstack-arkkitehtuuria. Tuntemattomille JAM tarkoittaa Javascript-sovellusliittymiä ja merkintöjä tai melko staattista HTML-verkkosivustoa, joka käyttää javascriptiä taikuuden toteuttamiseksi.

JAMstack-sovelluksilla on heti alusta alkaen paljon etuja, kuten:

  • Helppo isännöidä
  • Halpa isännöidä
  • Se latautuu erittäin nopeasti (suurimman osan ajasta)

Tämä tarkoittaa yleensä useammin kuin ei, sinulla on nopea sivusto, joka ei maksa sinulle paljon rahaa sekä isännöimiseen että ylläpitoon.

Kuulosta vähän tutulta?

Tätä on helppo verrata Railsiin, kuten kuulen usein muilta joukkueestani, ja aivan oikein. Gatsbyn kulissien takana on paljon taikaa!

Mutta ellet ole puhtaasti nojautunut laajennuksiin ja teemoihin (mikä on hieno), päivän lopussa rakennat edelleen React-sovellusta kuten missä tahansa muuallakin. Sovelluksesi voidaan melko paljon siirtää mihin tahansa muuhun kehykseen (lukuun ottamatta tietojen hankintaa ja sivunmuodostusta). Komponentit ovat komponentteja, tyylit ovat tyylejä.

const Nav = () => { return ( A normal nav component in a normal Gatsby app. ) }

Gatsbyn mielipiteitä on monista näkökohdista, mutta nämä mielipiteet jäävät enimmäkseen ajatuksen ulkopuolelle, että rakennat edelleen webpack-sovellusta, ja nämä sopimukset ovat webpackia ja sen takana olevaa kokoonpanoa, ei välttämättä Gatsbyä.

Joten mikä tekee siitä todella suurenmoisen?

Kirjaimellisesti bootstrap alle minuutissa

Vakavasti. Uuden Gatsby-sivuston kehittäminen on kirjaimellinen määritelmä kaikille napsautussyöttöartikkeleille, joissa sanotaan, että voit tehdä jotain 5 minuutissa. Asenna CLI ja olet kolmen komennon päässä sovelluksestasi, joka on kehitetty paikallisesti tai staattisesti.

Esimerkiksi, jos haluat luoda uuden barebones-projektin Sassin kanssa:

$ gatsby new my-cool-gatsby-project //github.com/colbyfayock/gatsby-starter-sass $ cd my-cool-gatsby-project $ yarn develop

Aloittelijoiden yhteisö tarjoaa helpon pääsyn uuteen sovellukseesi (tai koko haluamaasi asiaan).

Huomaa: Koko ”alle minuutti” riippuu siitä, millaista yhteyttä sinulla on, koska joudut odottamaan riippuvuuksien lataamista ja asentamista.

Yhdistä se kaikki sisältöverkkoon

Yksi Gatsbyn takana olevista käsitteistä on ajatus "sisältöverkosta" ja Gatsby on ratkaisu kaiken yhdistämiseksi. Monet ja yhä kasvavat sovellukset rakennetaan JAMstack-arkkitehtuurilla, mikä auttaa ajatuksessa, että voimme hankkia niin paljon sisältöämme niin monesta paikasta kuin haluamme ja tuoda se yhteen sovellukseen suorituskykyisellä tavalla.

Kun kaikki on sanottu ja valmis, voit kerätä tietoja monista lähteistä yhteen staattisesti koottuun sovellukseen. Se todellakin räjähtää nopeasti. ?

Ilmainen suorituskyvyn lisäys!

Pakkauksesta saat ahditetun verkkopaketin kokoonpanosi, mukaan lukien koodin jakaminen, esihaku, upotetut tyylit, omaisuuden pienentäminen ja paljon muuta suuruutta. Päivitä helposti helposti monilla helposti määritettävillä laajennuksilla, kuten asettamalla sovelluksesi PWA: ksi (progressiivinen verkkosovellus) ja tarjoamalla mahdollisuus offline-tilaan

Paljon muotisanoja siellä, mutta päivän päätteeksi se tarkoittaa, että verkkosivustosi tulisi olla nopea, perustuen enimmäkseen parhaisiin käytäntöihin, jotka optimoivat kaikki sivustosi resurssit nopeutta ja toimitusta varten, samalla kun ne tekevät siitä mahdollisimman helposti saataville muuntamalla vanhemmat selaimet ja varmistamalla, että hitaat yhteydet eivät tuhlaa arvokkaita resursseja. On vaikea vahvistaa kovana tilastona, mutta Kyle Mathews (Gatsbyn perustaja) väittää, että Gatsby-sivustot ovat 2-3x nopeammat kuin vastaavan tyyppiset sivustot.

Lisääntynyt tuottavuus!

Sinun ei enää tarvitse huolehtia monimutkaisuudesta varmistaa, että sovelluksesi on suorituskykyinen, kirjoittamalla ja säätämällä verkkopakettisi määrityksiä uusien parhaiden käytäntöjen mukaisiksi jokaiselle uudelle käynnistysohjelmasi sovellukselle. Gatsby tekee kaiken puolestasi. Sen avulla voit keskittyä tuontibitteihin, jotka tekevät sovelluksestasi erikoisen, ei rakennustelineille.

Tämä viedään askeleen pidemmälle Gatsbyn laajennusten ja teemojen lisäämisen avulla. Teemat eivät ole mitä voit odottaa perinteisessä mielessä tai mitä odotat Wordpressiltä, ​​mutta ne tarjoavat tavan abstraktoida kaikki Gatsby-sovelluksesi osat, jotta voit käyttää sitä uudelleen sovelluksessa.

Onko sinulla ydinkomponenttikirjasto, jota käytät joka kerta? Tee siitä teema. Onko sinulla tietty määritys tiedonhankinnalle, jota et halua kirjoittaa uudelleen joka kerta? Tee siitä laajennus. Mahdollisuus abstraktiota nämä avainkappaleet sovellukseesi säästää aikaa ja stressiä jokaisessa uudessa projektissasi, puhumattakaan kyvystä pitää nämä kappaleet yhdessä paikassa, korjaamalla virheet ja parannukset yksinkertaisella pakettipäivityksellä.

Suuri yhteisö

Gatsbyllä itsessään on jo kunnollisesti suuri yhteisö, mutta sen lisäksi sinulla on Webpack ja React, jotka ovat olleet jo jonkin aikaa. React on tällä hetkellä suosituin käyttöliittymäkehys, joka helpottaa virheenkorjausta yksinkertaisen Google-haun kautta. On vaikea löytää ongelmaa, johon olet ensimmäinen ja ainoa törmännyt.

Jos sinulla on erityisesti Gatsby-kysymys, heidän Github-ongelmansa ovat täynnä ihmisiä, jotka haluavat auttaa sinua virheenkorjauksessa tai korjaamaan seuraavan virheen. He vain pyytävät, että tarjoat heille kohteliaasti keinon lisääntyä, mikä vain helpottaa heidän auttamista ensinnäkin!

Hackermanin ystävä

Haluatko rullata hihasi ja nipistää putkea itse? Gatsby tarjoaa helpon tavan korjata prosessointi riippumatta siitä, liittyykö se koontiversion elinkaareen vai säätäkää webpack-määritystä. Tämä antaa sovelluksesi ytimen olla yhtä helppoa tai edistynyttä kuin haluat, vaikka jos olet niin edistynyt, auta ehkä kirjoittamaan laajennus tai kaksi!

Ehkä ei niin suuri ...

Nopea rakentaminen tuottaa enemmän vikoja

Sinun pitäisi odottaa törmäävän sieppauksiin täällä ja siellä pysymällä uusimmissa ja parhaissa, loppujen lopuksi se on avoimen lähdekoodin ohjelmisto, joka kehittyy enemmän kuin vain yksittäiselle sivustollesi.

Gatsby-tiimi on rakentanut erittäin nopeasti, mikä on mahtavaa, mutta nopea liikkuminen on altis unohtamaan asioita rakennettaessa. Onneksi he alkavat työntää automaattista testausta kaikkialle koodin kovettamisen helpottamiseksi ja yrittävät tarkoituksellisesti välttää työn kiirehtimistä tämän tyyppisten ongelmien ratkaisemiseksi.

Varmista vain, että testaat pakettipäivityksiä perusteellisesti, älä pelkää päivittää ja lukita pakettiversiota, jos sinulla on ongelmia.

Staattiset sivustot ovat ensiluokkaisia, eivät verkkosovelluksia

Gatsby kynät itseään kaiken kattavana ratkaisuna sekä staattisille että ei-staattisille sovelluksille, mutta onko se? Pelkästään asiakasreittien tuki vaatii laajennuksen tai sivunmuokkauksen, mikä on hienoa, mutta heidän äänensä sävyissä viittaa siihen, että ne eivät aina keskity kahteen.

Todellakin ainoa argumentti tässä on, miksi käyttäisit Gatsbyä Create React -sovelluksen avulla kyseiseen käyttötapaukseen? Vaikka se ei välttämättä ole ensiluokkainen, se on silti melko toimiva, ja siinä on tavallisten Gatsby-etujen bonus, mutta selvästi vikoja ja ominaisuuksia ei aiota priorisoida tähän tavoitteeseen.

Anna vain laukaus jo!

Minun tai muiden mielipiteillä ei ole väliä ennen kuin kokeilet sitä. Pahimmassa tapauksessa tuhlattiin kirjaimellisesti 5 minuuttia riippuvuuksien asennuksen ja kansion poistamisen välillä, jossa projekti oli, mikä on positiivinen sana oppimiskokemuksesta. Paras tapaus löysit juuri mahtavan työkalun, joka auttaa sinua tekemään suuria asioita.

Mene rakentamaan, kokeile ja jaa mitä hienoja asioita teet!

Muokkaa: Muutettu "hidastumista" "välttämään kiirehtimistä" selventämään lausuntotarkoitusta, koska ne eivät hidasta varsinaisen työn määrää, vaan yrittävät olla varovaisempia siinä.

Seuraa minua saadaksesi lisää Javascriptiä, UX: ää ja muita mielenkiintoisia asioita!

  • ? Seuraa minua Twitterissä
  • ? ️ Tilaa Youtube
  • ✉️ Rekisteröidy uutiskirjeeseen

Alun perin julkaistu osoitteessa //www.colbyfayock.com/2019/09/what-is-gatsby-and-why-its-time-to-get-on-the-hype-train