Okviri dolaze i odlaze, i dok se Gatsby na kraju može zamahnuti kao tehnologija, jačanje performansi i produktivnosti snažni su argumenti da se odmah zaroni.
Čekaj, što je Gatsby?
Gatsby je besplatni okvir otvorenog koda zasnovan na Reactu koji programerima pomaže u izradi brzih web stranica i aplikacijaNjihov naglasak (objasnit ću kasnije). Volim ga opisivati kao Create React App na steroidima, gdje je to jednostavan način za pokretanje React aplikacije i fokusiranje na produktivnost uistinu s različitim dijelovima vaše aplikacije. U svojoj srži, to je proslavljena aplikacija Webpack, u kojoj se sve gradi na istom onom Webpack cjevovodu koji ste se trudili napisati i potpuno razumjeti do danas (ili sam to možda samo ja).
Ljepota je ipak u tome što ono što daje je statična web stranica (jednostavna HTML datoteka) s unaprijed pripremljenom aplikacijom za optimalnu isporuku. To znači da se u osnovi može izvoditi bilo gdje, kao što je jednostavno bacanje u S3 i posluživanje kao statična web stranica ili još lakše, neka Netlify izgradi i posluži umjesto vas.
Sve je u skriptama
Gatsby je jedan od mnogih dostupnih alata koji podržava JAMstack arhitekturu. Za nepoznate, JAM je kratica za Javascript API-je i Markup, ili gotovo statično HTML web mjesto koje koristi javascript za ostvarenje čarolije.
JAMstack aplikacije odmah imaju puno prednosti, uključujući:
- Lako ugostiti
- Jeftino ugostiti
- Učitava se super brzo (većinu vremena)
To obično znači da ćete često imati brzu web stranicu koja vas ne košta puno novca za hostiranje i održavanje.
Zvuči pomalo poznato?
Lako je ovo usporediti s Railsom, kao što često čujem od ostalih iz svog tima, i to s pravom. U Gatsbyju je puno čarolije iza kulisa!
Ali ako se ne oslanjate samo na dodatke i teme (što je u redu), na kraju dana još uvijek izrađujete React aplikaciju kao i bilo gdje drugdje. Vaša se aplikacija prilično može prenijeti u bilo koji drugi okvir (osim izvora podataka i dijela za generiranje stranica). Komponente su komponente, stilovi su stilovi.
const Nav = () => { return ( A normal nav component in a normal Gatsby app. ) }Gatsby je mišljenja o mnogim aspektima, ali ta mišljenja uglavnom ne spadaju u ideju da još uvijek izrađujete webpack aplikaciju, a te konvencije su webpack i konfiguracija iza njega, ne nužno Gatsby.
Pa, što ga zapravo čini tako sjajnim?
Doslovno bootstrap za manje od minute
Ozbiljno. Okretanje novog web mjesta Gatsby doslovna je definicija svih tih članaka o mamacima koji kažu da nešto možete učiniti za 5 minuta. Instalirajte CLI i udaljene su samo tri naredbe od vaše aplikacije lokalno ili statički izrađene.
Na primjer, ako ste željeli pokrenuti novi projekt neobjavljenih kostiju sa Sassom:
$ gatsby new my-cool-gatsby-project //github.com/colbyfayock/gatsby-starter-sass $ cd my-cool-gatsby-project $ yarn develop
Zajednica početnika pruža jednostavnu točku ulaska u vašu novu aplikaciju (ili cijelu stvar koju želite).
Napomena: cijeli "u roku od jedne minute" ovisi o tome na kojoj ste vezi jer ćete morati pričekati da se ovisnosti preuzmu i instaliraju.
Sve to zajedno u mrežu sadržaja
Jedan od koncepata koji stoji iza Gatsbyja je ideja o "mrežnoj mreži" i Gatsby je rješenje da se sve to skupi. Mnoge se aplikacije, koje rastu, grade s arhitekturom JAMstack, što pomaže u ideji da možemo izvući onoliko sadržaja s koliko mjesta želimo i na učinkovit način ga spojiti u jednu aplikaciju.
Kada sve bude rečeno i završeno, podatke iz mnogih izvora možete povući u jednu statički kompiliranu aplikaciju. To doista brzo plamti. ?
Besplatno poboljšanje performansi!
Iz kutije ćete dobiti svoju nadopunjenu konfiguraciju webpacka, uključujući podjelu koda, prethodno dohvaćanje, umetnute stilove, umanjenje imovine i tonu druge veličine. To jednostavno nadogradite bogatstvom dodataka koje je lako konfigurirati, poput postavljanja aplikacije kao PWA (progresivna web aplikacija) i pružanja mogućnosti izvanmrežnog načina rada
Mnogo je modnih riječi, ali na kraju dana, to znači da bi vaša web stranica trebala biti brza na temelju uglavnom najboljih praksi koje optimiziraju svu imovinu vaše web stranice za brzinu i isporuku, a čineći je što pristupačnijom transpiliranjem za stariji preglednici i pazeći da spore veze ne troše vrijedne resurse. Teško je to potvrditi kao tvrdu statistiku, ali Kyle Mathews (osnivač Gatsbyja) tvrdi da su stranice Gatsbya 2-3 puta brže od sličnih vrsta web lokacija.
Povećana produktivnost!
Više se ne morate baviti složenošću osiguranja izvedbe svoje aplikacije prepisivanjem i prilagođavanjem konfiguracije web-paketa novim najboljim praksama za svaku novu aplikaciju koju pokrenete. Gatsby sve ovo radi za vas. Omogućuje vam da se usredotočite na bitove za uvoz koji vašu aplikaciju čine posebnom, a ne na skelu.
Ovo je napravljeno korak dalje s Gatsbyjevim dodacima i dodavanjem tema. Teme nisu ono što biste očekivali u tradicionalnom smislu ili ono što biste očekivali od Wordpressa, ali pružaju način da apstrahirate bilo koji dio svoje Gatsby aplikacije kako biste ga mogli ponovo koristiti u aplikaciju.
Imate li knjižnicu temeljnih komponenata koju koristite svaki put? Neka to bude tema. Imate li određenu konfiguraciju za izvor podataka koju ne želite svaki put prepisivati? Neka to bude dodatak. Mogućnost apstrahiranja ovih ključnih dijelova u vašoj aplikaciji štedi vam vrijeme i stres na svakom novom projektu koji zavrtite, a da ne spominjemo sposobnost održavanja tih dijelova na jednom mjestu, ispravljanja pogrešaka i poboljšanja jednostavnim ažuriranjem paketa.
Velika zajednica
I sam Gatsby već ima pristojno veliku zajednicu, ali povrh toga imate Webpack i React koji postoje već neko vrijeme. React je trenutno najpopularniji UI okvir, koji znatno olakšava otklanjanje pogrešaka putem jednostavnog Google pretraživanja. Teško je pronaći problem na koji ste prvi i jedini koji naletite.
Ako imate posebno pitanje za Gatsby, njihova izdanja za Github roje se od ljudi koji su vam spremni pomoći u otklanjanju pogrešaka ili rješavanju sljedeće greške. Sve što traže je da im pristojno pružite način razmnožavanja, što im olakšava da vam u prvom redu pomognu!
Hackermanov prijatelj
Volite zasukati rukav i sami dotjerati cjevovod? Gatsby pruža jednostavne načine za umetanje u obradu bilo da se radi o priključivanju na životni ciklus izrade ili podešavanju konfiguracije webpacka. To omogućuje da jezgra vaše aplikacije bude jednostavna ili napredna koliko želite, iako ako ste toliko napredni, možda pomozite u pisanju dodatka ili dva!
Možda ne baš sjajno ...
Brza gradnja donosi više bugova
Trebali biste očekivati da ćete tu i tamo naići na neke probleme, zadržavajući najnovije i najbolje rezultate, uostalom to je softver otvorenog koda koji se razvija za više od vaše pojedinačne web stranice.
Ekipa iz Gatsbyja vrlo je brzo gradila, što je sjajno, ali brzo kretanje sklono je previđanju stvari dok grade. Srećom, oni počinju gurati automatizirano testiranje kako bi ojačali kôd i namjerno pokušavaju izbjeći žurbu na rješavanju ove vrste problema.
Samo budite temeljiti u testiranju nadogradnji paketa i ne bojte se smanjiti verziju paketa i zaključati verziju paketa ako naiđete na probleme.
Statičke web stranice su prvoklasne, a ne web aplikacije
Gatsby se olovkom predstavlja kao sveobuhvatno rješenje za statične i nestatične aplikacije, ali je li tako? Podrška za rute samo za klijenta zahtijeva ugađanje dodatka ili stranice, što je u redu, ali njihov ton u vezi s problemima sugerira da nisu uvijek usredotočeni na njih dvoje.
Stvarno je jedini argument ovdje zašto biste za taj slučaj korištenja koristili Gatsby preko Create React App? Iako možda nije prva klasa, i dalje je prilično funkcionalan s bonusom na standardne osnovne pogodnosti Gatsbyja, ali očito programske pogreške i značajke neće biti prioritet prema tom cilju.
Samo probajte već!
Moje mišljenje ili bilo koje drugo nije važno dok ga ne probate. U najgorem slučaju doslovno ste izgubili 5 minuta između instaliranja ovisnosti i brisanja mape s projektom u njoj, što je pozitivno iskustvo učenja. U najboljem slučaju, upravo ste otkrili sjajan alat koji će vam pomoći da napravite sjajne stvari.
Krenite graditi, eksperimentirajte i podijelite sjajne stvari koje napravite!
Uredi: Promijenjeno "usporavanje" kako bi se "izbjeglo žuriti" radi pojašnjavanja namjere izjave, jer ne usporavaju količinu stvarnog posla koji se ulaže, već pokušavaju biti oprezniji s njim.
- ? Slijedite me na Twitteru
- ? Pretplatite se na moj Youtube
- Up Prijavite se za moj bilten
Izvorno objavljeno na //www.colbyfayock.com/2019/09/what-is-gatsby-and-why-its-time-to-get-on-the-hype-train