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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Компоненти

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

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

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

Обединяване на Webpack и най-новите инструменти

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

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

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

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

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

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

Стайлинг

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

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

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

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

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

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

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

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

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

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

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

Приставки

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

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

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

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

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

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

Предястия

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

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

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

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

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

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

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

Опитай го!

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

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

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

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

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

Може също да погледнете и другите ми статии:

Прогресивни уеб приложения: Преодоляване на разликата между уеб и мобилни приложения

Освен ако не сте живели под камък, вероятно сте чували за PWA или Progressive Web Apps. Това е гореща тема, нали ... medium.freecodecamp.org Hackathon Report: Какво можете да кодирате за 30 часа? Много!

Какво можете да изградите за 30 часа подред? Като група студенти от втора година с нарастващо портфолио от работа ... medium.freecodecamp.org ACM Month Of Code 2k17: Building Moodify

Март беше доста продуктивен месец, всичко благодарение на това голямо събитие, организирано от Асоциация за изчислителни машини, NIT ... hackernoon.com