Защо трябва да използвате GatsbyJS за изграждане на статични сайтове

Гетсби се разраства с течение на времето и се радвам да го видя в употреба от огромен брой сайтове като маркетингови сайтове, блогове и генерирани статични страници.

Това, което ме привлече на първо място, беше гладкото изживяване в развитието, невероятните резултати и топлата общност. Навлизайки малко по-задълбочено в работата си, екосистемата и също обсъждайки нейния потенциал с повече разработчици ме накара да се замисля колко мощна е - много повече, отколкото първоначално предполагах.

Тази статия има за цел да ви накара да видите защо е придобила популярност. Ако вече го използвате, ще получите по-добра представа за функциите, които бихте могли да използвате за още по-голямо изживяване в разработката.

Имайте предвид, че това работи за мен и споделям само моите възгледи. По никакъв начин не ви казвам, че настоящата ви настройка, която работи за вас, е остаряла, но просто се опитвам да споделя как Гетсби е бил страхотен за мен.

Какво е Гетсби?

Това е друг статичен генератор на сайтове като Hugo, Jekyll и т.н. И така, какво го прави специален? Защо говорим конкретно за това?

Гетсби може да се използва за създаване на статични сайтове, които са прогресивни уеб приложения, следват най-новите уеб стандарти и са оптимизирани да имат висока производителност. Той използва най-новите и популярни технологии, включително ReactJS, Webpack, GraphQL, модерен ES6 + JavaScript и CSS.

GraphQL + React + Webpack = ❤

Това означава, че много разработчици могат да влязат без голяма крива на обучение, тъй като те вече знаят или поне са използвали едно парче от този технологичен стек, върху който е изграден Гетсби.

Освен това бих искал да добавя нещо, което забелязах да работя с разработчици, които нямаха представа за най-новите рамки и библиотеки и просто бяха свикнали с традиционния начин за изграждане на HTML, JavaScript, CSS файлове.

Подход към развитието

От една страна, имаме потребители, които очакват плавно изживяване в мрежата като приложение. Другата страна са разработчиците, използвани за сайтове със страници, като всяка от тях е HTML файлове или може би използва някои шаблони - в самата база - сайтове като страници с вътрешна връзка.

Ако започвате с някоя от най-новите рамки, нека разгледаме случая React. Може да имате приложение, работещо и работещо с минимална конфигурация с create-react-app. Но ако погледнете структурата на проекта, може да няма много смисъл за начинаещ или дори някои разработчици, идващи от други стекове на технологии. Моделът е доста различен от този, който сте виждали досега.

Това е така, защото без допълнителна настройка те се стремят към създаване на приложения за една страница, СЗЗ. За да добавите маршрутизация, страници или оптимизиране за SEO, ще са необходими повече инструменти и конфигурация.

Това не изглежда много удобно, когато искате статични сайтове, нали? Така че тук имаме Гетсби, оптимизиран за този конкретен случай на употреба. Това може да бъде по-интуитивно за разработчиците, тъй като има страници, създадени от компоненти, които следват основната идея, че сайтовете са страници с вътрешна връзка.

Характеристика

елементи

Компонентите са ключова характеристика на React и сега те са често следван модел на уеб дизайн. При сегашното ниво на сложност на потребителските интерфейси е почти невъзможно да се запише поддържан код в дълги страници на HTML или да се използват шаблони за двигатели и да се очаква последователност.

Така че вместо това, ние изграждаме компоненти за многократна употреба и след това ги използваме за конструиране на изгледи. По този начин имаме отделни модули, работещи с отделни неща, и е по-лесно да се управлява и поддържа. Компонентът просто съдържа цялата необходима информация, а Гетсби, тъй като използва React, следва същия модел.

Атомният дизайн е подход, който е добър начин за работа със сложни интерфейси и бихме могли да го използваме тук за използване на React компоненти. Брад Фрост има невероятна публикация в блога, описваща какво е и как работи.

Пакетиране на уеб пакет и най-новото оборудване

Webpack създава оптимизирани, минимизирани пакети от HTML, JavaScript и CSS. Когато е предварително конфигуриран с Babel и повече плъгини, той ви позволява да използвате най-новите ES6 + JavaScript и GraphQL.

Глазура на тортата: имаме вградено горещо презареждане и разделяне на код, което дава по-добро изживяване при разработване и по-добра ефективност на сайта. Това има за цел да накара програмиста да напише минимална конфигурация на инструментариума и да се съсредоточи повече върху действителната разработка на сайта.

Gatsby плъгини, стартери и React пакети

Можете да използвате всеки от пакетите, които вече сте използвали с NPM, особено React, тъй като е изграден върху едно и също нещо. Но това не е всичко: има голям брой непрекъснато нарастващи приставки, стартери и трансформатори от общността на Гетсби.

Почти никога не стигате дотам, че всъщност трябва да надграждате свой собствен инструмент или модул, общността вече предлага огромен брой, за да задоволи всяка нужда.

Използвайки тях, Gatsby може да се разшири с допълнителна функционалност. Например, няколко примера включват отзивчиви изображения, офлайн функционалност, изходни данни от CMS и формати за маркиране на данни, добавяне на услуги на трети страни (Google Analytics и т.н.) и т.н.

оформление

Отново сложните потребителски интерфейси означават сложни модели за стилизиране и е само въпрос на време, преди да се раздуят таблиците със стилове. Получавате проблеми с конкретността, превъртете през стотици редове от код, опитвайки се да разберете нещата, и накрая използвате! Важно за да видите действително добавения от вас стил.

Gatsby има поддръжка за SCSS, CSS в JavaScript библиотеки, което ви позволява да управлявате стилове по-добре и лесно. Дори настройката за това е доста лесна за справяне с инсталирането на плъгин или пакет.

Отзивчиви изображения

Преоразмеряване на изображенията за отзивчивост на различни устройства, мързеливо зареждане, използване на srcsets и картина ... Вече звучи досадно, когато трябва да се направи ръчно.

Различни версии на едно и също изображение за отзивчивост

Въпреки че в наши дни това е изискване за оптимизирани за производителност и оптимизирани като приложения интерфейси, не виждаме много инструменти, в които можем директно да скочим и използваме.

Междувременно, в Gatsby само с плъгин, особено gatsby-плъгин-остър, можете директно да генерирате течни изображения, да добавяте филтри, да променяте формати, да размивате при зареждане и много повече. Това спестява много работа и време ръчно преоразмеряване на изображения и писане на изричен код на табелката за отзивчиви изображения. Той също така ви дава начин на по-добра производителност, заедно с по-плавно потребителско изживяване.

Приложение като опит

С повишаването на производителността и функциите, които да добавят към гладкостта на потребителското изживяване, Gatsby цели цялостно изживяване, подобно на приложението, заем от пълни PWA. Няма презареждания между страниците, когато използвате gatsby-link вместо хипервръзки и приложението все още изглежда гладко и изпълняващо благодарение на мързеливо зареждащи се изображения и разделяне на код.

За сайтове, които следват стандарти, които също искате да изпълнявате, имаме множество неща за вършене и ръководства, които трябва да следвате: минимизиране и групиране, кеширане на браузър и асинхронизиране на скриптове или файлове за зареждане и т.н. Когато работите с рамка като React, имате още неща, за които да се притеснявате, въпреки че решава няколко проблема: разделяне на код, SEO, маршрутизиране, ако е необходимо, отзивчиви изображения и списъкът продължава.

Gatsby има за цел да реши всички тези проблеми, с по-малко време, отделено за инструментална екипировка, конфигурация и среда и повече време за реално проектиране и разработване на сайта.

Екосистемата Гетсби

Plugins

Гетсби е създаден да бъде разтегателен и гъвкав - използването на плъгини е един от начините да го направите. Те могат да бъдат инсталирани директно и да се използват за различни функционалности, включително правене на сайта офлайн, добавяне на Google Analytics, добавяне на поддръжка за вградени SVG файлове, вие го наречете - списъкът е почти безкраен.

От различните видове Gatsby плъгини, плъгините от gatsby-source по-специално извличат данни от локален или отдалечен източник и позволяват използването му чрез GraphQL. Тези източници могат да бъдат CMS като Wordpress, Drupal, Plone, локално маркиране, XML или такива файлове, бази данни, API и формати на данни като JSON, CSV.

Това означава, че почти всичко изобщо може да се използва като източник за работа с Gatsby и генериране на статични сайтове.

Забележка: GraphQL е език за заявки за API-та, който работи на философията само да иска точно това, което ви е необходимо. За разлика от API на REST, не търсите крайни точки, за да предоставите вашите данни и да ги обработвате от структурата, която е предоставена от него, а по-скоро питате какво искате и директно ги използвате. Прочетете повече за това как работи и как да го използвате в своите документи.

След инсталирането някои плъгини могат да се използват веднага, като просто ги изброите в gatsby-config.js, а останалите се конфигурират с обект на опции.

Вижте библиотеката с плъгини Gatsby, тя вече има доста голям брой плъгини и още се добавят още от активната общност.

предястия

Това са по принцип сайтове на Gatsby, които ви помагат бързо да започнете, в зависимост от това какъв тип е. Те ви помагат директно да работите върху разработването на сайт, конфигурация и основни функции, за които вече се грижите. Което означава, по-малко време за инструмента, повече време за развитие.

Плъгините за Gatsby често имат своите съответни стартери, които показват или служат за бърз начин да започнете да го използвате. Те също така действат като референция, обхващаща всички функции и витрина конфигурации на използвания плъгин.

Библиотека на Gatsby Starter

Темите на Гетсби са функция, която все още е в разработка, която ви позволява да пакетирате и използвате повторно тези функционалности и модели, подобни на тези, които се виждат в предястията. Прочетете повече за това, което се готви в блога на Гетсби.

Статични сайтове

Първо, нека разгледаме как работи Гетсби вътрешно. За разлика от SPA-ите, които отправят заявки към API, докато стартирате приложението, по време на изграждането Gatsby извършва всички извличане на данни, включително извличане на данни от локални файлове. След това всички тези данни се използват за генериране на статични HTML, JavaScript и CSS файлове. Това статично изобразяване прави нещата да работят по-бързо.

Как работи Гетсби

Това беше много за Гетсби, неговата екосистема и как ви помага да създавате невероятни статични сайтове. Но защо бихме искали статични сайтове? Не звучи ли като крачка назад от динамичните?

  • Те не изискват сложна настройка на сървъра с бази данни, поддръжка и нямат проблеми с мащабирането.
  • Данните са напълно защитени. CMS и API имат частни функции, но данните все още присъстват в сървъра, които могат да бъдат използвани. Gatsby взема само необходимите данни за показване от източника, а частните или защитените данни дори не присъстват в крайната версия. Кое е най-безопасното, което е възможно да получи.
  • Вместо да разчитате на сървърите за динамично генериране на страници, предварително ги представете за изграждане и използване на CDN за пламтящо бързо и гладко изживяване за потребителите по целия свят.
  • Гетсби прави статично изобразяване. Което прави съдържанието достъпно като HTML и оптимизирана за търсачките, няма дълго първоначално време за зареждане.

Опитай го!

Това би трябвало да хвърли някаква светлина върху какъв е шумът около него и защо някои големи компании избират да го използват на своите сайтове. Витрината на сайта на Гетсби изглежда изглежда нараства с много невероятни допълнения напоследък.

Може би е време да си потопиш ръцете и да се огледаш!

Благодарение на CodeSandbox можем да направим това веднага, в самия браузър.

Ако искате да го стартирате локално, трябва да проверите gatsby-cli. Това е най-бързият и лесен начин да започнете. Те също имат невероятна документация и ръководства, за да се гмурнете в разработващите сайтове на gatsbyjs.org.

Надявам се, че ви е харесала тази статия и сте намерили, че си струва. Можете да разгледате всичките ми проекти в Github или Dribbble и не се колебайте да се свържете с мен в Twitter!

Може би искате да разгледате и другите ми статии: