Hvorfor skal du bruge GatsbyJS til at oprette statiske websteder

Gatsby er vokset over tid, og jeg er glad for at se det bruges af et stort antal websteder som marketingwebsteder, blogs og genererede statiske sider.

Hvad der tiltrak mig i første omgang var den glatte udviklingsoplevelse, utrolige resultater og det varme samfund. At gå lidt i dybden med dets arbejde, økosystemet og også diskutere dets potentiale med flere udviklere fik mig til at tænke over, hvor kraftig det er - meget mere end jeg oprindeligt havde antaget.

Denne artikel søger at få dig til at se, hvorfor den er blevet populær. Hvis du allerede bruger det, får du en bedre idé om de funktioner, du kan bruge til en endnu større udviklingsoplevelse.

Vær opmærksom på, at det er dette, der fungerer for mig, og jeg deler kun mine synspunkter. Jeg fortæller dig på ingen måde, at din nuværende opsætning, der fungerer for dig, er forældet, men bare forsøger at dele, hvordan Gatsby har været fantastisk for mig.

Hvad er Gatsby?

Det er en anden statisk generator som Hugo, Jekyll og så videre. Så hvad gør det specielt? Hvorfor taler vi specifikt om det?

Gatsby kan bruges til at opbygge statiske websteder, der er Progressive Web Apps, følge de nyeste webstandarder og er optimeret til at være meget performante. Det gør brug af de nyeste og mest populære teknologier, herunder ReactJS, Webpack, GraphQL, moderne ES6 + JavaScript og CSS.

Dette betyder, at mange udviklere kan hoppe ind uden meget af en indlæringskurve, da de allerede kender eller i det mindste har brugt et stykke af denne tech stack, Gatsby er bygget på.

Desuden vil jeg tilføje noget, som jeg bemærkede at arbejde med udviklere, der ikke havde nogen idé om de nyeste rammer og biblioteker og bare var vant til den traditionelle HTML-, JavaScript-, CSS-filform til at bygge websteder.

Tilgang til udvikling

På den ene side har vi brugere, der forventer en app-lignende glat oplevelse på nettet. Den anden side er udviklere, der er vant til websteder, der har sider, hvor hver er HTML-filer, eller måske bruger nogle skabeloner - i bunden - websteder som sider med intern sammenkædning .

Hvis du kommer i gang med nogen af ​​de nyeste rammer, lad os tage sagen om React. Du kan have en app i gang med minimal konfiguration med create-react-app. Men hvis du ser på projektstrukturen, giver det måske ikke meget mening for en nybegynder eller endda nogle udviklere, der kommer ind fra andre tekniske stakke. Mønsteret er ret forskelligt fra det, du nogensinde har set før.

Det er fordi uden yderligere opsætning sigter de mod at opbygge applikationer med enkelt side, SPA'er. For at tilføje routing, sider eller optimering til SEO kræver det flere værktøjer og konfiguration.

Det virker ikke særlig praktisk, når du vil have statiske websteder, gør det? Så her har vi Gatsby, optimeret til denne specifikke brugssag. Dette kunne være mere intuitivt for udviklere, da der er sider oprettet fra komponenter, der følger rodideen om, at websteder er sider med intern sammenkædning.

Funktioner

Komponenter

Komponenter er et nøglefunktion i React, og nu er de et ofte anvendt webdesignmønster. Med det nuværende kompleksitet af brugergrænseflader er det næsten umuligt at skrive vedligeholdelig kode på lange HTML-sider eller bruge skabelonmotorer og forvente konsistens.

Så i stedet bygger vi genanvendelige komponenter og bruger dem derefter til at konstruere visninger. På denne måde har vi separate moduler, der håndterer separate ting, og det er lettere at administrere og vedligeholde. Komponenten indeholder bare alle de oplysninger, den kræver, og Gatsby, da den bruger React, følger det samme mønster.

Atomic design er en tilgang, der er en god måde at håndtere komplekse grænseflader på, og vi kunne bruge det her med React-komponenter. Brad Frost har et fantastisk blogindlæg, der beskriver, hvad det er, og hvordan det fungerer.

Webpack-bundling og nyeste værktøj

Webpack opretter optimerede, minimerede bundter af HTML, JavaScript og CSS. Når det er forudkonfigureret med Babel og flere plugins, giver det dig mulighed for at bruge den nyeste ES6 + JavaScript og GraphQL.

Ising på kagen: Vi har indbygget hot genindlæsning og kodedeling, hvilket giver en bedre udviklingsoplevelse og bedre webstedsydelse. Dette er rettet mod at få udvikleren til at skrive minimal værktøjskonfiguration og fokusere mere på den aktuelle webstedsudvikling.

Gatsby-plugins, startere og React-pakker

Du kan bruge en hvilken som helst af de pakker, du allerede har brugt med NPM, især de React-pakker, da den er bygget på den samme ting. Men det er ikke alt: der er et stort antal stadigt voksende plugins, startere og transformere fra Gatsby-samfundet.

Du kommer næsten aldrig til det punkt, hvor du faktisk skal bygge på dit eget værktøj eller modul, samfundet tilbyder allerede et stort antal, der passer til ethvert behov.

Ved hjælp af disse kan Gatsby udvides med yderligere funktionalitet. For eksempel inkluderer et par eksempler responsive billeder, offline-funktionalitet, kildedata fra CMS og data-markup-formater, tilføjelse af tredjeparts-tjenester (Google analytics osv.) Osv.

Styling

Igen betyder komplekse brugergrænseflader komplekse stylingmønstre, og det er kun et spørgsmål om tid, før stilark bliver oppustet. Du får specificitetsproblemer, ruller gennem hundreder af linjer med kode, der prøver at finde ud af ting, og ender med at bruge !importanttil faktisk at se den styling, du tilføjede.

Gatsby har understøttelse af SCSS-, CSS-in-JavaScript-biblioteker, så du kan administrere stilarter bedre og med lethed. Selv opsætningen til dette er ret let at håndtere med installationen af ​​et plugin eller en pakke.

Responsive billeder

Ændring af størrelsen på billeder for lydhørhed på forskellige enheder, doven indlæses, bruger srcsetsog picture... Lyder allerede kedeligt, når det skal gøres manuelt.

Selvom det er et krav til ydeevne og app-lignende optimerede grænseflader i disse dage, ser vi ikke mange værktøjer, som vi direkte kan springe ind i og bruge.

I mellemtiden kan du i Gatsby med bare et plugin, især gatsby-plugin-skarpt, direkte generere flydende billeder, tilføje filtre, ændre formater, sløre ved belastning og meget mere. Dette sparer meget arbejde og tid manuelt til at ændre størrelse på billeder og skrive eksplicit kedelpladekode til responsive billeder. Det giver dig også bedre ydelse sammen med en jævnere brugeroplevelse.

App-lignende oplevelse

Med ydeevneforøgelsen og funktionerne, der øger brugerens oplevelse glat, sigter Gatsby på en fuld app-lignende oplevelse, der låner fra fulde PWA'er. Der er ingen genindlæsninger mellem sider, når du bruger gatsby-link i stedet for hyperlinks, og appen ser stadig ud til at være glat og effektiv takket være dovne billeder og kodedeling.

For websteder, der følger standarder, som du også vil være performant, har vi masser af ting at gøre og vejledninger, der skal følges: minificering og bundtning, browsercaching og asynkronisering af scripts eller filer osv. Når du arbejder med en ramme som React, har du flere ting at bekymre dig om, selvom det løser et par problemer: kodedeling, SEO, routing om nødvendigt, lydhøre billeder, og listen fortsætter.

Gatsby sigter mod at løse alle disse problemer med mindre tid brugt på værktøj, konfiguration og miljø og mere tid til faktisk at designe og udvikle webstedet.

Gatsby-økosystemet

Plugins

Gatsby blev bygget til at være udvidelig og fleksibel - brug af plugins er en måde at gøre det på. De kan installeres direkte og bruges til en række funktioner, herunder at gøre webstedet offline, tilføje Google analytics, tilføje support til inline SVG'er, du hedder det - listen er næsten uendelig.

Af de forskellige typer Gatsby-plugins henter især gatsby-source-plugins data fra en lokal eller ekstern kilde og gør det muligt at bruge dem via GraphQL. Disse kilder kan være CMS'er som Wordpress, Drupal, Plone, lokal markdown, XML eller sådanne filer, databaser, API'er og dataformater som JSON, CSV.

Dette indebærer, at næsten alt overhovedet kan bruges som kilde til at arbejde med Gatsby og generere statiske websteder.

Bemærk: GraphQL er et forespørgselssprog til API'er, der fungerer på filosofien om bare at bede om præcis, hvad du har brug for. I modsætning til REST API'er kigger du ikke efter slutpunkter til at levere dine data og behandle dem fra den struktur, der er givet derfra, men snarere bede om, hvad du vil, og brug disse data direkte. Læs mere om, hvordan det fungerer, og hvordan man bruger det i deres dokumenter.

Efter installationen kan nogle plugins bruges med det samme ved blot at angive dem i, gatsby-config.jsog de andre er konfigureret med et indstillingsobjekt.

Gå og tjek Gatsby-pluginbiblioteket, det har allerede et stort antal plugins, og mere tilføjes stadig af det aktive samfund.

Forretter

Disse er grundlæggende kedelplade Gatsby-sider, som hjælper dig med at starte udviklingen hurtigt, afhængigt af hvilken slags side det er. De hjælper dig direkte med at arbejde på udviklingen af ​​et websted, konfiguration og grundlæggende funktioner, du allerede har brug for. Hvilket betyder, mindre tid på værktøjet, mere tid til udvikling.

Gatsby-plugins har ofte deres tilsvarende startere, der viser eller tjener en hurtig måde at komme i gang med at bruge det. De fungerer også som en reference, der dækker alle funktioner og fremvisningskonfigurationer af det plugin, der er i brug.

Gatsby-temaer er en funktion, der stadig er under udvikling, som giver dig mulighed for at pakke og genbruge disse funktionaliteter og mønstre svarende til hvad der ses i startere. Læs mere om, hvad der brygger i Gatsby-bloggen.

Statiske websteder

Lad os først se på, hvordan Gatsby fungerer internt. I modsætning til de SPA'er, der fremsætter API-anmodninger, mens du kører appen, foretager Gatsby al dataindsamling, herunder datasourcing fra lokale filer, i løbet af byggetiden. Alle disse data bruges derefter til at generere statiske HTML-, JavaScript- og CSS-filer. Denne statiske gengivelse er det, der får tingene til at fungere hurtigere.

Det handlede meget om Gatsby, dets økosystem og hvordan det hjælper dig med at oprette fantastiske statiske steder. Men hvorfor vil vi have statiske websteder? Lyder det ikke som et skridt tilbage fra dynamiske?

  • De kræver ikke kompleks serveropsætning med databaser, vedligeholdelse og har ikke nogen skaleringsproblemer.
  • Data er fuldstændig sikre. CMS'er og API'er har private funktioner, men dataene er stadig til stede på serveren, som kan udnyttes. Gatsby tager kun de krævede data, der skal vises fra kilden, og de private eller sikrede data er ikke engang til stede i den endelige build. Hvilket er det sikreste det muligvis kan få.
  • I stedet for at stole på servere til at generere sider dynamisk, skal du pre-gengive dem alle på build og bruge CDN'er til en lynhurtig og jævn oplevelse for brugere over hele kloden.
  • Gatsby laver statisk gengivelse. Hvilket gør indhold tilgængeligt som HTML, og søgemaskineoptimeret, ingen lang indlæsningstid.

Prøve det!

Det burde have kastet lys over, hvad der er hype omkring det, og hvorfor nogle større virksomheder vælger at bruge det på deres websteder. Gatsby-udstillingsvinduet ser ud til at vokse med mange fantastiske tilføjelser for nylig.

Måske er det tid, du dypper dine hænder og kigger dig rundt!

Takket være CodeSandbox kan vi gøre det med det samme i selve browseren.

Hvis du gerne vil køre det lokalt, skal du tjekke gatsby-cli. Det er den hurtigste og nemmeste måde at komme i gang på. De har også fantastisk dokumentation og vejledninger, som du kan dykke ned i at udvikle websteder på gatsbyjs.org.

Håber du nød denne artikel og fandt det værd. Du kan tjekke alle mine projekter på Github eller Dribbble og tøv ikke med at kontakte mig på Twitter!

Du vil muligvis også se på mine andre artikler:

Progressive webapps: Overbygning af kløften mellem web- og mobilapps

Medmindre du har boet under en klippe, har du sikkert hørt om PWA'er eller Progressive Web Apps. Det er et varmt emne, rigtigt ... medium.freecodecamp.org Hackathon-rapport: Hvad kan du kode på 30 timer? Ret meget!

Hvad kan du bygge om 30 timer i træk? Som en gruppe andetårsstuderende med en voksende portefølje af arbejde ... medium.freecodecamp.org ACM-måned med kode 2k17: Building Moodify

Marts var en temmelig produktiv måned, alt sammen takket være denne store begivenhed, der var vært for Association for Computing Machinery, NIT ... hackernoon.com