Gatsby vs Hugo, részletes összehasonlítás

Ebben a cikkben két statikus webhelygenerátort hasonlítok össze, Gatsbyt és Hugót. Megvitatom a keretrendszer ismertségét, stabilitását, biztonságát, eszközeit, a gyorsaságot, a teljesítményt és a mindkettőt körülvevő közösséget. Tehát kezdjük.

Körülbelül egy évvel ezelőtt megváltoztattam a webhelyemet Wordpressről Hugo-ra, amely egy Go-ban írt statikus webhely-generátor, amely a Go sablonkönyvtárait használja a sablonokhoz. Nemrégiben elvégeztem a Gatsby, egy másik statikus webhely-generátor életképességének felmérését, amely a React-ben íródott, és amely a React-et használja a sablonokhoz.

Ebben a cikkben összehasonlítom a Hugo v0.42 és a Gatsby v1.93 közötti különbségeket. Összehasonlításképpen ezt a Hugo és ezt a Gatsby oldalt használtam. Mindegyik kódja megtalálható a Github webhelyen a Hugo webhelyhez és a Gatsby webhelyhez.

Keretrendszer ismerete

Ha még nem ismeri a React-et, és nem tervezi a React megtanulását, akkor valószínűleg Hugót kell választania. Ha ismered és szereted a React-et, akkor a Gatsby-t kell választanod? Nos, nem feltétlenül.

Azt állítom, hogy megfelelő ismeretekre van szüksége a React-ről (lásd: Tanuljon meg reagálni ezekkel az erőforrásokkal), ha használni szeretné a Gatsby-t. A React megértéséhez pedig a JavaScript megfelelő ismeretére van szükség (lásd: A JavaScript megismerése ezekkel az erőforrásokkal)

Annak ellenére, hogy csaknem egy éve használom a Hugót, nem volt szükségem a Go megértésére. Nekem is csak egy keveset kellett megtanulnom a Go sablonkönyvtárairól. Megállapítottam azonban, hogy ismeretlenségem miatt gyakrabban kellett hivatkoznom Hugóra a dokumentációra. Gatsby mélyebb megértést igényel a React-től, mint Hugo a Go-tól elvárja. Mindazonáltal, ha a keretrendszer ismerete lenne az egyetlen kritérium, akkor a Gatsbyt választanám, mert jó, hogy nem kell hivatkoznom a dokumentációra, miközben új funkciókat adok a weboldalamhoz.

Stabilitás

A stabilitás felmérésének egyik módja az lenne, ha összehasonlítanánk Hugo GitHub témáit Gatsby GitHub témáival. Látni fogja, hogy a Gatsby több funkcióval rendelkezik (ami izgalmas), de több hibája is van (ami nem annyira izgalmas). Eredetileg addig nem tekintettem a stabilitást kritériumnak, amíg nem találtam meg ezt a hibát, és ez rádöbbentett a szoftver stabilitásának fontosságára. Lehet, hogy a ráfordított idő és erőfeszítések miatt személyesen veszem ezt a hibát, és megpróbálom megtalálni azt a hibát, de szerintem Hugo még mindig stabilabb, mint Gatsby.

Biztonság

Gatsby JavaScript-et használ, és a JavaScript-alkalmazások köztudottan sok Node-modul futtatásához szükségesek. Van még egy Node modul is, amely Hot Pocket tweeteket küld, és egy másik, amely betakarítja a hitelkártyaszámokat: D. A statikus webhelyek természetüknél fogva általában biztonságosabbak, de mégis úgy gondolom, hogy érdemes megemlíteni, hogy több függőség több kódot eredményez, amelyben nem biztos, hogy megbízik.

Szerszámozás

A Gatsby rendelkezik a JavaScript eszköztár minden előnyével és a JavaScript kimerültségének minden hátrányával. Ráadásul Gatsbynek van egy nagyon szép plugin-könyvtár. Különösen a gatsby-plugin-offline lehetővé tette, hogy könnyen hozzáadhassak offline képességeket a webhelyemhez, amelyeket még mindig nem találtam ki Hugóval.

Másrészről, néhány dolog, amihez plugin szükséges Gatsby-vel, csak kijönnek a dobozból Hugóval. Például gatsby-plugin-reakció-sisakra van szükség a fejcímke szerkesztéséhez, míg ez a Hugo egyszerű HTML-jével megoldható. Mivel élveztem a Gatsby-hoz kapott szerszámok használatát, ezt Gatsbynak adom.

Építési sebesség

Hugo kevesebb mint 100 ms alatt képes minden további eszköz nélkül elkészíteni a weboldalamat. A Gatsby körülbelül 15 másodperc alatt képes felépíteni a webhelyemet, de ez rengeteg további eszközt tartalmaz. A PostCSS és az Imagemin hozzáadása a Hugo-összeállításhoz kb. 5 másodpercig ütközik az elkészítési idővel. A fejlesztés során a változások figyelése szintén gyorsabb volt a Hugo használatával. Szerintem itt Hugo a győztes.

Dokumentáció

Gatsbynak és Hugónak is nagyon szép dokumentációja van. Hugo rendelkezik a Gyors indítás, a Gatsby pedig az Első lépések szakaszsal. Gatsbynek van egy igazán szép oktatóanyaga is, amely kiegyenlíti a meredekebb tanulási görbét. Személy szerint könnyebben kezdtem el kezdeni a Gatsby-t, de ez azért van, mert már megértettem a React-et. Szerintem méltányos azt mondani, hogy Hugónak és Gatsbynak is nagyszerű dokumentációja van.

Teljesítmény

A Világítótorony használatával a teljesítmény pontszáma 100 volt a Hugo-i webhelyemen és 95 a Gatsby-i webhelyemen. Az első tartalmas festék a 3G-kapcsolathoz körülbelül 1 másodperc volt a Hugo webhelyen és 1,5 másodperc a Gatsby webhelyen. A weboldal tesztelésével a töltési idő 2G kapcsolaton Hugóban 8,7, Gatsby-ban 11,7 másodperc volt.

Azonban egy egyszerű manuális teszt elvégzésével, hogy melyik oldal töltsön be először, Gatsby észrevehetően gyorsabb volt, így nem igazán értem, hogy mit mér a Lighthouse vagy a Web Page Test. Továbbá, mivel a Gatsby egyoldalas alkalmazás, a webhelyen belüli navigáláshoz nincs szükség a szerver kérésére. Az oldalakat csak újra megjeleníti a JavaScript. Mindenesetre biztosan állíthatom, hogy Hugo és Gatsby is gyors. Szeretném hallani a gondolatait az alábbi megjegyzésekben.

Közösség

Gatsby gyorsan népszerűvé válik, amely virágzó közösséggel jár. Ez nem azt jelenti, hogy Hugo közössége unalmas. Ha a GitHub sztárjai bármi múlnak, akkor Hugónak több mint 27 ezer, Gatsbynak pedig több mint 23 ezer. Úgy tűnik, hogy a Twitteren Gatsby aktívabb, mint Hugo.

Végső gondolatok

Tehát melyiket válassza? Gatsby a React-et használja, amelyet jobban ismerek, jobb az eszköze, és virágzó közössége van. Másrészt Hugo stabilabb, és kevesebb időt tölt az építkezéssel. Nagyobb weboldalaknál az építkezés sebessége egyre fontosabbá válik, és néhányan nem biztos, hogy törődnek a React-kel. Esetemben a stabilitás volt a legfontosabb kritérium, ezért úgy döntöttem, hogy ragaszkodom Hugóhoz. Nagyon izgatottan látom, mit hoz a jövő ezen a téren.

Mielőtt elmész ... Köszönjük, hogy elolvastad a cikket! Autodidakta szoftverfejlesztőként írok szakmai és oktatási tapasztalataimról, ezért nézd meg a blogomat, vagy iratkozz fel a hírlevelemre a további tartalmakért.

Akár ez is tetszhet:

  • Hogyan adhatom ki a személyes webhelyem frissítéseit
  • Tananyag - szoftverfejlesztés (a tanulási források listája, kezdve a Bevezetés a számítástechnikába)
  • Érdemes megtanulni a teljes kötegű webfejlesztést?