Hvad er Gatsby, og hvorfor er det tid til at komme på hype-toget

Rammer kommer og går, og mens Gatsby i sidste ende kan fungere som teknologien, er ydeevnen og produktivitetsforøgelserne stærke argumenter for at dykke ind med det samme.

Vent, hvad er Gatsby?

Gatsby er en gratis og open source-ramme baseret på React, der hjælper udviklere med at opbygge lynhurtige websteder og apps

Deres vægt (jeg forklarer senere). Jeg kan godt lide at beskrive det som Create React App på steroider, hvor det er en nem måde at starte en React-applikation på og fokusere på at blive produktiv med de virkelig forskellige dele af din applikation. I sin kerne er det en glorificeret Webpack-app, hvor alt bygger på den samme Webpack-rørledning, som du har kæmpet for at skrive og forstå fuldt ud indtil denne dag (eller måske er det bare mig).

Skønheden er dog, at hvad den output er, er et statisk websted (enkel HTML-fil) med din applikation forudindleveret til optimal levering. Det betyder, at det i det væsentlige kan køre hvor som helst som bare at dumpe det i S3 og tjene det som en statisk webside eller endnu lettere, få Netlify til at bygge og servere det til dig.

Det hele findes i manuskripterne

Gatsby er et af de mange tilgængelige værktøjer, der understøtter JAMstack-arkitekturen. For det ukendte står JAM for Javascript API'er og Markup eller stort set et statisk HTML-websted, der bruger javascript til at få magien til at ske.

JAMstack-apps har mange fordele lige ud af æsken, herunder:

  • Let at være vært for
  • Billigt at være vært for
  • Det indlæses super hurtigt (det meste af tiden)

Dette betyder generelt oftere end ikke, at du vil have et hurtigt websted, der ikke koster dig en masse penge at både være vært for og vedligeholde.

Lyder det lidt velkendt?

Det er let at sammenligne dette med Rails, som jeg ofte hører fra andre på mit team og med rette. Der er meget magi bag kulisserne i Gatsby!

Men medmindre du rent læner dig om plugins og temaer (hvilket er fint), ved slutningen af ​​dagen bygger du stadig en React-applikation, som du ville gjort andre steder. Din app kan stort set overføres til andre rammer (bortset fra datasourcing og side-genereringsdel). Komponenter er komponenter, stilarter er stilarter.

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

Gatsby er meningsfuld på mange aspekter, men disse meninger falder for det meste uden for ideen om, at du stadig bygger en webpack-app, og disse konventioner er af webpack og konfigurationen bag den, ikke nødvendigvis Gatsby.

Så hvad gør det faktisk så godt?

Bogstaveligt talt bootstrap på under et minut

Helt seriøst. At spinde et nyt Gatsby-websted er den bogstavelige definition af alle de klik-agnartikler, der siger, at du kan gøre noget på 5 minutter. Installer CLI, og du er 3 kommandoer væk fra din app spundet op lokalt eller statisk bygget.

For eksempel, hvis du ville øge et nyt barebones-projekt med Sass:

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

Et fællesskab af startere giver et let indgangspunkt til din nye app (eller det hele, du vil have).

Bemærk: hele "under et minut" afhænger af, hvilken type forbindelse du har, da du bliver nødt til at vente på, at afhængighederne downloades og installeres.

At bringe det hele sammen i indholdet mesh

Et af begreberne bag Gatsby er ideen om "indholdsnet", og Gatsby er løsningen på at trække det hele sammen. Mange apps og voksende bygges med JAMstack-arkitekturen, som hjælper med ideen om, at vi kan hente så meget af vores indhold fra så mange steder, som vi vil, og bringe det i en applikation på en performant måde.

Når alt er sagt og færdigt, kan du trække data fra mange kilder ind i en statisk kompileret applikation. Det flammer virkelig hurtigt. ?

Gratis ydeevne boost!

Ud af kassen får du din supercharged webpack-konfiguration inklusive kodedeling, forudhentning, inline-stilarter, formindskelse af aktiver og masser af anden storhed. Opgrader det let med et væld af plugins, der er nemme at konfigurere som at konfigurere din app som en PWA (progressiv webapp) og give mulighed for offline-tilstand

Masser af buzzword derinde, men i slutningen af ​​dagen betyder det, at dit websted skal være snappy baseret på for det meste bedste praksis, der optimerer alle dit websteds aktiver til hastighed og levering, alt imens det gøres så tilgængeligt som muligt ved at transpile til ældre browsere og sikre, at langsomme forbindelser ikke spilder værdifulde ressourcer. Det er svært at bekræfte som en hård stat, men Kyle Mathews (Gatsby-grundlægger) hævder, at Gatsby-websteder er 2-3 gange hurtigere end lignende typer af websteder.

Øget produktivitet!

Du behøver ikke længere bekymre dig om kompleksiteten ved at sikre, at din applikation fungerer, ved at omskrive og tilpasse din webpack-konfiguration til de nye bedste fremgangsmåder for hver nye app, du bootstrap. Gatsby gør alt for dig. Det giver dig mulighed for at fokusere på de importbits, der gør din app speciel, ikke stilladset.

Dette tages et skridt videre med Gatsbys plugins og tilføjelsen af ​​temaer. Temaer er ikke, hvad du ville forvente i traditionel forstand, eller hvad du ville forvente af Wordpress, men de giver en måde at abstrakte enhver del af din Gatsby-applikation, så du kan genbruge den app til app.

Har du et kernekomponentbibliotek, du bruger hver gang? Gør det til et tema. Har du en bestemt konfiguration til datasourcing, som du ikke vil omskrive hver gang? Gør det til et plugin. At være i stand til at abstrahere disse nøglestykker til din app sparer dig tid og stress på hvert nye projekt, du spinder op, for ikke at nævne muligheden for at vedligeholde disse stykker på ét sted, reparere fejl og forbedringer med en simpel pakkeopdatering.

Stort samfund

Gatsby selv har allerede et anstændigt stort samfund, men derudover har du Webpack og React, som har eksisteret i et stykke tid. React er den mest populære brugergrænseflade i øjeblikket, hvilket gør fejlretning via en simpel Google-søgning meget lettere. Det er svært at finde et problem, som du er den første og eneste, der snubler over.

Hvis du især har et Gatsby-spørgsmål, svømmer deres Github-problemer med folk, der er villige til at hjælpe dig med at debugge eller tackle den næste fejl. Alt, hvad de beder om, er at du høfligt giver dem en måde at reproducere på, hvilket bare gør det lettere for dem at hjælpe dig i første omgang!

Hackermans ven

Kan du lide at rulle ærmet op og justere rørledningen selv? Gatsby giver nemme måder at lappe ind i behandlingen, uanset om det tilsluttes byggets livscyklus eller tilpasning af webpack-konfigurationen. Dette gør det muligt for kernen i din app at være så let eller avanceret, som du vil, men hvis du er så avanceret, kan du måske hjælpe med at skrive et plugin eller to!

Det måske ikke så godt ...

At opbygge hurtigt giver flere bugs

Du kan forvente, at du rammer nogle snags her og der og forbliver på det nyeste og bedste, når alt kommer til alt er det open source-software, der udvikler sig til mere end bare dit individuelle websted.

Gatsby-teamet har bygget meget hurtigt, hvilket er fantastisk, men at bevæge sig hurtigt er tilbøjeligt til at overse tingene, når de bygger. Heldigvis begynder de at skubbe automatiseret test overalt for at hjælpe med at hærde koden, og de forsøger forsætligt at undgå hastende arbejde for at løse denne type bekymringer.

Bare sørg for at være grundig med at teste dine pakkeopgraderinger og vær ikke bange for at nedgradere og låse din pakkeversion, hvis du får problemer.

Statiske websteder er første klasse, ikke webapps

Gatsby penner sig selv som en altomfattende løsning til både statiske og ikke-statiske apps, men er det? Understøttelse af kun klientruter kræver et plugin eller tweaking af sideoprettelse, hvilket er fint, men deres tone i spørgsmål antyder, at de ikke altid er lige så fokuserede på de to.

Virkelig det eneste argument her er, hvorfor ville du bruge Gatsby over Create React App til den brugssag? Selvom det måske ikke er førsteklasses, er det stadig ret funktionelt med en bonus på de standardunderliggende Gatsby-fordele, men bugs og funktioner vil helt klart ikke blive prioriteret mod dette mål.

Bare giv det et skud allerede!

Min mening eller andre betyder ikke noget, før du prøver det. I værste fald spildte du bogstaveligt talt 5 minutter mellem installation af afhængigheder og sletning af mappen med projektet i, hvilket på en positiv note er en læringsoplevelse. I bedste fald har du lige opdaget et fantastisk værktøj, der hjælper dig med at gøre gode ting.

Gå opbyg, gå eksperiment, og del, hvilke fantastiske ting du laver!

Rediger: Ændret "langsommere" for at "undgå at skynde sig" for at afklare udsagnets hensigt, da de ikke bremser mængden af ​​faktisk arbejde, der bliver lagt ned, men forsøger at være mere forsigtige med det.

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev

Oprindeligt offentliggjort på //www.colbyfayock.com/2019/09/what-is-gatsby-and-why-its-time-to-get-on-the-hype-train