Co to jest Gatsby Framework

Opublikowany: 2023-06-19

Gatsby to znakomity framework do tworzenia statycznych stron internetowych. Jest to jedna z wielu technologii wspierających metodologię tworzenia stron internetowych Jamstack, która umożliwia działanie stron i aplikacji niezależnie od serwera WWW.

Dla tych, którzy nie są zaznajomieni, JAM to akronim oznaczający JavaScript, interfejsy API i znaczniki. W kategoriach laika odnosi się to do strony internetowej, która składa się głównie z HTML i używa JavaScript, aby coś się działo.

Gatsby pozwala programistom e-commerce szybciej konstruować witryny, uruchamiać je bez żadnych problemów i zmniejszać liczbę luk w zabezpieczeniach. Dzięki temu przedsiębiorstwa zajmujące się handlem elektronicznym mogą korzystać z dowolnego interfejsu API, który wybiorą, w celu poprawy doświadczenia zakupowego klienta.

Dodatkowo platforma szybko zwiększyła swój udział w rynku, aw ciągu ostatnich dwóch lat praktycznie podwoiła liczbę obsługiwanych stron internetowych. Ponad 228 000 stron internetowych korzysta obecnie z Gatsby, w tym gigant branżowy Ubisoft.

Czym jest Gatsby Framework?

Gatsby to darmowy generator stron statycznych o otwartym kodzie źródłowym, który został opracowany na bazie Node.js przy pomocy React i GraphQL. Posiada ponad 2500 wtyczek, które można wykorzystać do generowania statycznych stron internetowych w oparciu o źródła, takie jak dokumenty Markdown, MDX (Markdown z JSX), obrazy i szeroką gamę systemów zarządzania treścią, w tym WordPress, Drupal i inne.

To kolejny statyczny generator witryn, taki jak Hugo, Jekyll itp.

Za pomocą Gatsby'ego można tworzyć statyczne strony internetowe, które działają jak Progressive Web Apps, zgodne z najnowszymi standardami sieciowymi.

Ważne cechy Gatsby'ego

  1. Gatsby używa GraphQL do pobierania danych z dowolnego miejsca, na przykład z różnych baz danych, witryn WordPress itp.
  2. Gatsby używa React JS do szablonów witryn i CSS do stylizacji witryn.
  3. Gatsby ma również architekturę wtyczek, która ułatwia korzystanie z nich, umożliwiając wtyczkom współpracę z JavaScript.

Co to jest statyczna strona internetowa?

W przeciwieństwie do tradycyjnych dynamicznych witryn internetowych, które renderują stronę w momencie żądania, statyczna witryna internetowa wykorzystuje renderowanie po stronie serwera w celu dostarczenia gotowych plików HTML, CSS i JavaScript do przeglądarki internetowej.

Jeśli korzystasz ze statycznej witryny, możesz oddzielić repozytorium treści od interfejsu front-end, co daje większą kontrolę nad sposobem prezentacji treści. Witryna statyczna jest atrakcyjna dla firm ze względów finansowych, ponieważ pliki statyczne są małe, szybkie i tanie w obsłudze.

Statyczne strony internetowe stają się w ostatnich latach coraz bardziej popularne. Wzrost ten wynika z dwóch głównych czynników: ulepszonych narzędzi programistycznych (języki i biblioteki) oraz rosnącej wśród firm potrzeby maksymalizacji wydajności witryny internetowej poza ograniczeniami witryny opartej na bazie danych.

Witryny z CV, witryny z portfolio, jednorazowe strony docelowe i blogi instruktażowe to przykłady witryn statycznych. Witryny te zazwyczaj składają się z kilku stron i nie wymagają regularnych aktualizacji ani spersonalizowanych treści.

Co to jest statyczny generator witryn

Generatory witryn statycznych to narzędzia, które pobierają surowe dane i kolekcję szablonów i generują w pełni funkcjonalną statyczną witrynę HTML. Podstawową funkcją statycznego generatora witryn jest automatyzacja tworzenia poszczególnych stron HTML oraz ich wcześniejsze przygotowanie w celu udostępnienia ich użytkownikowi. Te strony HTML są wstępnie zbudowane, dzięki czemu ładują się szybko w przeglądarce użytkownika.

Najczęściej statyczne generatory witryn są częścią podejścia do tworzenia stron internetowych JAMstack.

Zalety korzystania z witryny statycznej

Oprócz automatyzacji pracy statyczny generator witryn oferuje następujące korzyści:

Zwiększona wydajność

Statyczne strony internetowe mogą zaoszczędzić czas i energię, tworząc strony w pamięci podręcznej, które nigdy nie wygasają. Ponadto można zminimalizować te pliki przed wdrożeniem, aby zapewnić jak najmniejsze obciążenie, a także można szybko i bez większego wysiłku przeprowadzić wdrożenie za pośrednictwem sieci CDN.

Elastyczność

Ponieważ większość systemów CMS jest powiązana z bazą danych z predefiniowanymi polami, ograniczają one Twoją elastyczność. Jeśli chcesz dodać widżet Twittera do niektórych witryn, zazwyczaj potrzebujesz wtyczki, krótkiego kodu lub niestandardowej funkcjonalności.

Jeśli pracujesz ze statyczną witryną, możesz upuścić kod widżetu bezpośrednio do pliku lub użyć fragmentu.

Wysoce niezawodna

Statyczna strona internetowa wymaga mniej zasobów do obsługi. Aby obsłużyć zbyt wiele żądań, wystarczy, że serwer zwróci kilka płaskich plików, co ułatwi dostosowanie do zmiennego obciążenia ruchu. Chociaż serwer sieciowy nadal może zostać rzucony na kolana lub interfejsy API mogą zostać przeciążone, ale wymaga to znacznie większej liczby równoległych żądań.

Lepsze bezpieczeństwo

Statyczne generatory witryn umożliwiają programistom zastosowanie bezgłowego systemu zarządzania treścią poprzez oddzielenie interfejsu od zaplecza. Ponieważ jest mniej potencjalnych portów wejścia, statyczne strony internetowe są bezpieczniejsze.

Kontrola wersji i testowanie

Dane bazy danych są niestabilne. CMS pozwala użytkownikom dodawać, usuwać lub zmieniać treści w dowolnym momencie. Cała strona internetowa może zostać usunięta za pomocą kilku kliknięć myszką. Chociaż możesz wykonać kopię zapasową bazy danych, możesz, ale nadal możesz utracić niektóre dane, nawet jeśli robisz to regularnie.

W większości przypadków statyczna witryna jest bezpieczniejsza. Można zapisać zawartość w:

Pliki płaskie: Zapewnia to łatwiejszą kontrolę wersji za pomocą Git. Oryginalna treść jest zapisywana, a wszelkie wprowadzone zmiany można natychmiast cofnąć.

Prywatne bazy danych: dane nie są potrzebne, dopóki witryna nie zostanie utworzona, więc nie muszą znajdować się na serwerze publicznym.

Ponieważ witryna może być generowana i przeglądana w dowolnym miejscu, nawet na komputerze osobistym użytkownika, testowanie jest również uproszczone.

Przy odrobinie więcej pracy możesz skonfigurować systemy wdrażania, które pozwolą Ci zdalnie budować witrynę i aktualizować działający serwer za każdym razem, gdy nowa zawartość zostanie przekazana do repozytorium, sprawdzona i zatwierdzona.

Co to jest Jamstack

Wyrażenie „JamStack” odnosi się do nowoczesnej architektury tworzenia stron internetowych, która obejmuje JavaScript, interfejsy programowania aplikacji (API) i znaczniki (JAM). Jamstack nie jest technologią ani frameworkiem per se, ale raczej alternatywną architekturą, na której buduje się aplikacje i strony internetowe.

Zamiast wykorzystywać typowy system zarządzania treścią (CMS), witryna Jamstack oddziela infrastrukturę (API), kod (JavaScript) i treść (Markup). Oddzielna architektura będzie zarządzać nimi oddzielnie zarówno po stronie serwera, jak i klienta. Strony internetowe i aplikacje zbudowane za pomocą Jamstack przenoszą jak najwięcej pracy z serwera na urządzenie użytkownika. Takie postępowanie drastycznie zmniejsza liczbę żądań wysyłanych do serwera, a tym samym skraca czas oczekiwania na odpowiedź z serwera.

Mathias Biilmann, współzałożyciel Netlify, wymyślił termin JamStack.

Ekosystem Gatsby'ego

Gatsby zapewnia szereg opcji tworzenia strony internetowej. Można go dostosować do indywidualnych potrzeb i zaoferować gotowe opcje dla tych, którzy dopiero zaczynają, co czyni go bardzo elastycznym.

Gatsby zapewnia trzy metody programowania: wtyczki, motywy i startery.

Wtyczki

Pakiety Node.js z łatwością zawierają podstawowe funkcje witryny Gatsby. Typowe wtyczki obejmują platformy analityczne, responsywne treści i ulepszenia optymalizacji pod kątem wyszukiwarek.

Motywy

W przypadku witryn Gatsby motyw Gatsby to wtyczka zawierająca plik gatsby-config.js, który zapewnia dodatkowe wstępnie skonfigurowane funkcje, pozyskiwanie danych i kod interfejsu użytkownika. Ponieważ motywy są zasadniczo wtyczkami, mogą być dystrybuowane i instalowane za pośrednictwem rejestru, takiego jak npm lub przędza, a ich wersje można aktualizować za pomocą pliku package.json na stronie internetowej.

Przystawki

Starter to szablon, ogólna strona internetowa Gatsby, którą można wykorzystać jako podstawę do dalszego rozwoju. Gdy ktoś zmieni rozrusznik, nie ma już żadnego połączenia z pierwotnym źródłem.

Oficjalne startery Gatsby obejmują domyślną witrynę, witrynę blogową, minimalną witrynę „hello world” oraz możliwość używania i tworzenia motywów. Dostępnych jest również kilka starterów stworzonych przez społeczność.

Termin „siatka treści” opisuje związek między trzema głównymi elementami Gatsby'ego. Podstawowe elementy to

  1. Usługi CMS: Contentful, WordPress i Shopify to tylko niektóre przykłady. Jako platforma do tworzenia treści, usługi CMS mogą służyć jako centralne repozytorium do zarządzania danymi.
  • Infrastruktury do rozwoju: Gatsby używa współczesnych frameworków programistycznych React i GraphQL.
  • Narzędzia wdrażania: Gatsby tworzy statyczne pliki do wdrożenia i integruje je z Netflify, Vercel lub AWS Amplify.

Gatsby wstępnie pobiera zasoby z systemu zarządzania treścią lub plików przeceny i umieszcza je w odpowiednich folderach.

Istnieją tysiące wtyczek dostępnych dla ekosystemu Gatsby, w tym do integracji sieci społecznościowych, handlu elektronicznego, analiz, optymalizacji obrazu i leniwego ładowania.

Zagłębmy się głębiej w React, GraphQL i webpack, trzy podstawowe elementy konstrukcyjne Gatsby'ego.

Reagować

React (znany również jako React.js/ReactJS) to bezpłatna biblioteka JavaScript front-end o otwartym kodzie źródłowym do tworzenia interfejsów użytkownika z komponentami interfejsu użytkownika. Meta, pierwotnie Facebook, zarządza nim we współpracy ze społecznością indywidualnych programistów i firm. Aplikacje jednostronicowe, mobilne i renderowane przez serwer mogą być zbudowane na potężnych podstawach React przy użyciu popularnych frameworków, takich jak Next.js.

GraphQL

GraphQL to język zapytań i technologia uruchomieniowa po stronie serwera, szeroko stosowana w interfejsach programowania aplikacji, aby zagwarantować, że klient otrzyma wszystkie niezbędne dane.

Facebook opracował go w 2012 roku podczas tworzenia aplikacji Facebook, a obecnie służy wielu innym celom.

Ogólnie rzecz biorąc, GraphQL ma na celu umożliwienie rozwoju API i ograniczenie do minimum obaw związanych z bezpieczeństwem API poprzez zapewnienie języka zapytań, który daje programistom API pełną swobodę swobodnej gry i kształtowania API według własnego uznania.

Pakiet internetowy

Webpack to darmowy program pakujący moduły JavaScript typu open source. Chociaż został zaprojektowany z myślą o JavaScript, może być również używany do modyfikowania innych zasobów front-end, w tym HTML, CSS i obrazów, jeśli obecne są odpowiednie moduły ładujące. Do tworzenia zasobów statycznych Webpack wykorzystuje moduły z zależnościami.

Webpack tworzy wykres zależności na podstawie zależności, umożliwiając twórcom stron internetowych zastosowanie podejścia modułowego podczas tworzenia aplikacji internetowych.

Funkcja dzielenia kodu Webpack umożliwia użytkownikom generowanie kodu w razie potrzeby.

Podsumowując, oto jak działa Gatsby:

  • Gatsby uzyskuje swoje dane za pomocą interfejsu API GraphQL.
  • Następnie webpack jest odpowiedzialny za tworzenie pakietów i dzielenie kodu.
  • Na koniec wstępnie wyrenderowane strony HTML, CSS i React są wdrażane na serwerze.

CO MOŻESZ ZBUDOWAĆ Z GATSBY?

Decyzja o użyciu Gatsby zależy od rodzaju aplikacji, którą zamierzasz stworzyć. Z Gatsbym możesz zbudować:

  • PWA (progresywne aplikacje internetowe)
  • Witryny JamStack
  • Statyczne witryny handlu elektronicznego
  • Bezgłowe witryny e-commerce
  • Superszybka cyfrowa strona biznesowa

Studium przypadku Gatsby'ego

1. Wezwanie domowe Pro

Housecall Pro obsługuje różne branże usług domowych.

Szybkość witryny, skalowalność, SEO i, co najważniejsze, możliwość publikowania nowych stron bez udziału programistów były ich priorytetami, więc przeszli na Gatsby i nie zawiedli się.

  • Gatsby umożliwił natychmiastowe indeksowanie ich witryny przez wyszukiwarki, ponieważ tworzy wszystkie strony jako statyczne pliki HTML.
  • Od czasu wdrożenia Gatsby pod koniec listopada 2018 r. do kwietnia 2019 r. ruch organiczny na blogu wzrósł o 973 procent.
  • Od końca listopada 2018 r. do kwietnia 2019 r. częstotliwość, z jaką witryna marketingowa pojawiała się na pierwszej stronie wyników wyszukiwania Google dla różnych słów kluczowych, wzrosła o 56%.

2. Wyślij siatkę

SendGrid to platforma komunikacji z klientami, która napędza zaangażowanie i rozwój.

Po tym jak wyemigrowali do Gatsby'ego,

  • Centrum wiedzy SendGrid skróciło czas ładowania strony o połowę.
  • Nowa witryna Gatsby ładowała się początkowo o 20% szybciej, a przejścia między stronami były o 100% szybsze.

3. Siłownie YouFit.

YouFit Gyms to ogólnopolska sieć klubów fitness.

Odkąd ponownie uruchomili swoją witrynę z Gatsby, byli świadkami następujących rzeczy:

  • Wzrost ruchu organicznego o 22%.
  • Natychmiastowy spadek współczynnika odrzuceń o 10%.
  • Współczynnik konwersji leadów wzrósł o 60%, ponieważ więcej osób dołączyło do bezpłatnego okresu próbnego.

4. Kredyty samochodowe Kanada

Car Loans Canada pomaga w łączeniu potencjalnych nabywców samochodów z kredytami samochodowymi i salonami samochodowymi w całej Kanadzie.

Jak skorzystali na Gatsbym

  • Zwiększona liczba wyświetleń strony na sesję
  • Średni czas, jaki użytkownik spędza na stronie, wzrósł o ponad 100%.

Wniosek

Teraz prawdopodobnie masz pełne pojęcie o zaletach, jakie oferuje Gatsby. Jest to niewątpliwie najnowocześniejsza technologia, która zapewnia mnóstwo przekonujących powodów dla marketerów, ludzi biznesu, korporacji i sklepów, aby z niej korzystać.

Podsumowując, możemy stwierdzić, że jeśli zaczniesz się go uczyć, aby rozwijać swoją karierę lub poszerzać swoją wiedzę, to Gatsby Cię nie zawiedzie.