Miksi sinun tulisi käyttää GatsbyJS: ää staattisten sivustojen rakentamiseen

Gatsby on kasvanut ajan myötä, ja olen iloinen nähdessäni sen käyttävän valtavan määrän sivustoja, kuten markkinointisivustoja, blogeja ja generoituja staattisia sivuja.

Ensinnäkin minua houkutteli sujuva kehityskokemus, uskomattomat tulokset ja lämmin yhteisö. Ekosysteemin toiminnan syventäminen ja keskusteleminen sen potentiaalista useampien kehittäjien kanssa sai minut ajattelemaan, kuinka voimakas se on - paljon enemmän kuin olin alun perin olettanut.

Tämän artikkelin tarkoituksena on saada sinut ymmärtämään, miksi se on saavuttanut suosiota. Jos käytät sitä jo, saat paremman käsityksen ominaisuuksista, joita voit käyttää vielä suuremman kehityskokemuksen saavuttamiseksi.

Huomaa, että tämä toimii minulle, ja jaan vain näkemykseni. En mitenkään kerro sinulle, että nykyinen sinulle sopiva kokoonpano on vanhentunut, mutta yritän vain kertoa, kuinka Gatsby on ollut minulle hyvä.

Mikä on Gatsby?

Se on toinen staattisten sivustojen generaattori, kuten Hugo, Jekyll ja niin edelleen. Joten mikä tekee siitä erityisen? Miksi puhumme nimenomaan siitä?

Gatsbyn avulla voidaan rakentaa staattisia sivustoja, jotka ovat progressiivisia verkkosovelluksia, noudattavat uusimpia verkkostandardeja ja jotka on optimoitu erittäin suorituskykyisiksi. Se käyttää uusinta ja suosittua tekniikkaa, mukaan lukien ReactJS, Webpack, GraphQL, moderni ES6 + JavaScript ja CSS.

Tämä tarkoittaa, että monet kehittäjät voivat hypätä sisään ilman paljon oppimiskäyrää, koska he jo tietävät tai ovat ainakin käyttäneet yhtä kappaletta tästä tekniikkapinosta, johon Gatsby on rakennettu.

Lisäksi haluaisin lisätä jotain, jonka huomasin työskentelevän kehittäjien kanssa, joilla ei ollut aavistustakaan uusimmista kehyksistä ja kirjastoista ja jotka olivat vain tottuneet perinteiseen HTML-, JavaScript- ja CSS-tiedostojen tapaan rakentaa sivustoja.

Lähestymistapa kehitykseen

Toisaalta meillä on käyttäjiä, jotka odottavat sovelluksen kaltaista sujuvaa kokemusta verkossa. Toinen puoli on kehittäjiä, jotka ovat tottuneet sivustoihin, joilla on sivuja, joista kukin on HTML-tiedostoja, tai ehkä käyttävät joitain mallipohjia - aivan pohjassa - sivuina, joilla on sisäinen linkitys .

Jos olet aloittamassa jonkin uusimmista kehyksistä, otetaan React-tapaus. Sinulla voi olla sovellus käynnissä, ja kokoonpano on minimaalinen luomisreagointisovelluksella. Mutta jos katsot projektirakennetta, se ei ehkä ole järkevää aloittelijalle tai edes joillekin kehittäjille, jotka tulevat muista tekniikkapinoista. Kuvio on melko erilainen kuin mitä olet koskaan ennen nähnyt.

Se johtuu siitä, että ilman lisäasetuksia he pyrkivät rakentamaan yhden sivun sovelluksia (SPA). Reitityksen, sivujen lisääminen tai SEO-optimointi edellyttää enemmän työkaluja ja määrityksiä.

Se ei näytä kovin kätevältä, kun haluat staattisia sivustoja, eikö niin? Joten tässä meillä on Gatsby, optimoitu tähän erityiseen käyttötapaukseen. Tämä voisi olla intuitiivisempaa kehittäjille, koska on olemassa sivuja, jotka on luotu komponenteista, jotka seuraavat pääidettä siitä, että sivustot ovat sivuja, joilla on sisäisiä linkkejä.

ominaisuudet

Komponentit

Komponentit ovat Reactin keskeinen piirre, ja nyt ne ovat yleisesti noudatettu verkkosuunnittelumalli. Käyttöliittymien nykyisellä monimutkaisuudella on melkein mahdotonta kirjoittaa ylläpidettävää koodia pitkille HTML-sivuille tai käyttää mallimoottoreita ja odottaa johdonmukaisuutta.

Joten sen sijaan rakennamme uudelleenkäytettäviä komponentteja ja käytämme niitä sitten näkymien rakentamiseen. Tällä tavalla meillä on erilliset moduulit, jotka käsittelevät erillisiä asioita, ja sitä on helpompi hallita ja ylläpitää. Komponentti sisältää vain kaikki tarvitsemansa tiedot, ja Gatsby noudattaa samaa mallia, koska se käyttää Reactia.

Atomisuunnittelu on lähestymistapa, joka on hyvä tapa käsitellä monimutkaisia ​​rajapintoja, ja voimme käyttää sitä tässä React-komponenttien kanssa. Brad Frostilla on hämmästyttävä blogiviesti, joka kuvaa mitä se on ja miten se toimii.

Webpack-paketti ja uusimmat työkalut

Webpack luo optimoidut, pienennetyt HTML-, JavaScript- ja CSS-paketit. Kun se on valmiiksi määritetty Babelille ja muille laajennuksille, sen avulla voit käyttää uusinta ES6 + JavaScriptia ja GraphQL: ää.

Jäät kakkulla: meillä on sisäänrakennettu kuuma päivitys ja koodinjako, mikä antaa paremman kehityskokemuksen ja paremman sivuston suorituskyvyn. Tämän tarkoituksena on saada kehittäjä kirjoittamaan minimaalinen työkalukokoonpano ja keskittyä enemmän varsinaiseen sivuston kehittämiseen.

Gatsby-laajennukset, käynnistimet ja React-paketit

Voit käyttää mitä tahansa paketteja, joita olet jo käyttänyt NPM: n kanssa, etenkin React-paketteja, koska se on rakennettu samaan asiaan. Mutta se ei ole kaikki: Gatsbyn yhteisö tarjoaa suuren määrän jatkuvasti kasvavia laajennuksia, käynnistimiä ja muuntajia.

Et melkein koskaan tule siihen pisteeseen, että sinun on todella rakennettava omalle työkalulle tai moduulille, yhteisö tarjoaa jo valtavan määrän jokaiseen tarpeeseen.

Näiden avulla Gatsby voidaan laajentaa lisätoiminnoilla. Esimerkiksi muutama esimerkki sisältää reagoivat kuvat, offline-toiminnot, lähdetiedot CMS: stä ja tietojen merkintämuodot, kolmansien osapuolten palveluiden (Google analytics jne.) Lisäämisen ja niin edelleen.

Muotoilu

Jälleen monimutkaiset käyttöliittymät tarkoittavat monimutkaisia ​​muotoilumalleja, ja on vain ajan kysymys, ennen kuin tyylisivut paisuvat. Saat tarkkuuteen liittyviä kysymyksiä, selaa satoja koodiriviä yrittäessäsi selvittää asioita ja !importantpääset lopulta käyttämään nähdäksesi lisäämäsi tyylin.

Gatsby tukee SCSS-, CSS-in-JavaScript-kirjastoja, joten voit hallita tyylejä paremmin ja helposti. Jopa tämän määritys on melko helppo käsitellä asentamalla laajennus tai paketti.

Reagoivat kuvat

Kuvien koon muuttaminen reagointikykyä varten eri laitteilla, laiska lataus, käyttö srcsetsja picture… Kuulostaa jo ikävältä, kun se tehdään manuaalisesti.

Vaikka se edellyttää suorituskykyä ja sovelluksen kaltaisia ​​optimoituja käyttöliittymiä nykyään, emme näe monia työkaluja, joihin voimme suoraan siirtyä ja käyttää.

Sillä välin Gatsbyssa vain pluginilla, etenkin gatsby-plugin-sharpillä, voit luoda suoraan sujuvia kuvia, lisätä suodattimia, muuttaa muotoja, hämärtää kuormituksessa ja paljon muuta. Tämä säästää paljon työtä ja aikaa manuaalisesti kuvien koon muuttamiseen ja nimenomaisen kattilakoodin kirjoittamiseen reagoiville kuville. Se antaa sinulle myös paremman suorituskyvyn ja tasaisemman käyttökokemuksen.

Sovelluksen kaltainen kokemus

Suorituskyvyn parantamisen ja ominaisuuksien avulla, jotka lisäävät käyttökokemuksen sujuvuutta, Gatsby pyrkii saamaan täyden sovelluksen kaltaisen kokemuksen lainaa täydiltä PWA-laitteilta. Sivujen välillä ei ole latauksia, kun käytetään gatsby-linkkiä hyperlinkkien sijaan, ja sovellus näyttää silti sujuvalta ja suorituskyvyltä laiskojen kuvien lataamisen ja koodin jakamisen ansiosta.

Sivustoille, jotka noudattavat standardeja, jotka haluat myös olla suorituskykyisiä, meillä on paljon tehtäviä ja noudatettavia oppaita: pienentäminen ja niputtaminen, selaimen välimuisti ja asynkroniset komentosarjat tai tiedostot jne. Kun työskentelet Reactin kaltaisen kehyksen kanssa, sinulla on enemmän asioita, joista huolestua, vaikka se ratkaisee muutaman ongelman: koodinjako, hakukoneoptimointi, tarvittaessa reititys, reagoivat kuvat ja luettelo jatkuu.

Gatsbyn tavoitteena on ratkaista kaikki nämä ongelmat viemällä vähemmän aikaa työkaluihin, kokoonpanoon ja ympäristöön sekä enemmän aikaa sivuston todelliseen suunnitteluun ja kehittämiseen.

Gatsbyn ekosysteemi

Laajennukset

Gatsby rakennettiin laajennettavaksi ja joustavaksi - laajennusten käyttö on yksi tapa tehdä siitä. Ne voidaan asentaa suoraan, ja niitä voidaan käyttää monenlaisiin toimintoihin, kuten sivuston tekemiseen offline-tilaan, Google-analytiikan lisäämiseen, sisäisten SVG-tiedostojen tuen lisäämiseen, nimi on - luettelo on melkein loputon.

Erityyppisistä Gatsby-laajennuksista erityisesti gatsby-lähdelaajennukset noutavat tietoja paikallisesta tai etälähteestä ja mahdollistavat sen käytettävyyden GraphQL: n kautta. Nämä lähteet voivat olla CMS-tiedostoja, kuten Wordpress, Drupal, Plone, paikallinen merkintä, XML tai sellaiset tiedostot, tietokannat, API: t ja tietomuodot kuten JSON, CSV.

Tämä tarkoittaa, että melkein mitä tahansa voidaan käyttää lähteenä työskennellä Gatsbyn kanssa ja luoda staattisia sivustoja.

Huomaa: GraphQL on sovellusliittymien kyselykieli, joka toimii sen periaatteen mukaisesti, että kysyt vain mitä tarvitset. Toisin kuin REST-sovellusliittymät, et etsi päätepisteitä tietojen toimittamiseksi ja käsittelemiseksi niitä varten annetusta rakenteesta, vaan kysyt mitä haluat ja käytät näitä tietoja suoraan. Lue lisää siitä, miten se toimii ja miten sitä käytetään heidän dokumenteissaan.

Asennuksen jälkeen joitain laajennuksia voidaan käyttää heti vain luetteloimalla ne gatsby-config.jsja toiset määrittämällä asetusobjektilla.

Mene katsomaan Gatsby-laajennuskirjasto, sillä on jo melko suuri määrä laajennuksia, ja aktiivinen yhteisö lisää vielä lisää.

Aloittelijat

Nämä ovat pohjimmiltaan kattolevyn Gatsby-sivustoja, jotka auttavat käynnistämään kehityksen nopeasti sen mukaan, millainen sivusto se on. Ne auttavat sinua pääsemään suoraan käsittelemään sivuston, kokoonpanon ja perusominaisuuksien kehittämistä. Tämä tarkoittaa, että vähemmän aikaa työkalujen valmistamiseen, enemmän aikaa kehitykseen.

Gatsby-laajennuksilla on usein vastaavat käynnistimet, jotka osoittavat tai tarjoavat nopean tavan aloittaa sen käyttö. Ne toimivat myös viitteenä, joka kattaa kaikki käytössä olevan laajennuksen ominaisuudet ja esittelymääritykset.

Gatsby-teemat ovat vielä kehitteillä oleva ominaisuus, jonka avulla voit pakata ja käyttää uudelleen näitä toimintoja ja malleja samankaltaisesti kuin mitä aloituksissa nähdään. Lue lisää panimosta Gatsby-blogista.

Staattiset sivustot

Ensinnäkin katsotaanpa, miten Gatsby toimii sisäisesti. Toisin kuin SPA: t, jotka tekevät API-pyyntöjä, kun suoritat sovellusta, Gatsby suorittaa kaiken tiedonhankinnan, mukaan lukien tietojen hankinta paikallisista tiedostoista, rakennusaikana. Kaikkia näitä tietoja käytetään sitten staattisten HTML-, JavaScript- ja CSS-tiedostojen luomiseen. Tämä staattinen renderöinti saa asiat toimimaan nopeammin.

Se koski paljon Gatsbystä, sen ekosysteemistä ja siitä, miten se auttaa luomaan hämmästyttäviä staattisia sivustoja. Mutta miksi haluaisimme staattisia sivustoja? Eikö se kuulosta askelta takaisin dynaamisista?

  • Ne eivät vaadi monimutkaista palvelinasetusta tietokannoilla, ylläpitoa, eikä niillä ole mitään skaalausongelmia.
  • Tiedot ovat täysin suojattuja. CMS: llä ja API: lla on yksityisiä ominaisuuksia, mutta tiedot ovat edelleen palvelimessa, joita voidaan hyödyntää. Gatsby ottaa vain tarvittavat tiedot näytettäväksi lähteestä, eikä yksityisiä tai suojattuja tietoja ole edes läsnä lopullisessa koontiversiossa. Mikä on turvallisin se voi saada.
  • Sen sijaan, että luotettaisiin palvelimiin sivujen dynaamiseen luomiseen, esirenderöi ne kaikki valmiiksi ja käytä CDN-tiedostoja, jotta käyttäjät pääsevät nopeasti ja sujuvasti kokemaan kaikkialta maailmasta.
  • Gatsby tekee staattisen hahmonnuksen. Mikä tekee sisällöstä saatavana HTML-muodossa ja hakukoneoptimoiduna, ilman pitkää alkulatausaikaa.

Kokeile!

Sen olisi pitänyt tuoda valoa siihen, mikä on kaikki hype sen ympärillä ja miksi jotkut suuret yritykset päättävät käyttää sitä sivustoillaan. Gatsbyn sivusto näyttää vain kasvavan viime aikoina monien upeiden lisäysten kanssa.

Ehkä on aika kastaa kätesi ja katsoa ympärillesi!

CodeSandboxin ansiosta voimme tehdä tämän heti selaimessa.

Jos haluat suorittaa sen paikallisesti, kannattaa tarkistaa gatsby-cli. Se on nopein ja helpoin tapa aloittaa. Heillä on myös upeita asiakirjoja ja oppaita, joiden avulla voit sukeltaa sivustojen kehittämiseen osoitteessa gatsbyjs.org.

Toivottavasti pidit tästä artikkelista ja pidit sen kannattavana. Voit tutustua kaikkiin projekteihini Githubissa tai Dribbble'ssä äläkä epäröi ottaa yhteyttä minuun Twitterissä!

Haluat ehkä myös tutustua muihin artikkeleihini:

Progressiiviset verkkosovellukset: Verkko- ja mobiilisovellusten välisen kuilun poistaminen

Ellet ole asunut kiven alla, olet todennäköisesti kuullut PWA: sta tai Progressive Web -sovelluksista. Se on kuuma aihe oikein ... medium.freecodecamp.org Hackathon-raportti: Mitä voit koodata 30 tunnissa? Melko paljon!

Mitä voit rakentaa 30 tunnissa suoraan? Toisen vuoden opiskelijoiden ryhmänä kasvava työportfolio ... medium.freecodecamp.org ACM Code Of Code 2k17: Building Moodify

Maaliskuu oli melko tuottava kuukausi, kiitos tämän suuren tapahtuman, jonka isännöi Association for Computing Machinery, NIT… hackernoon.com