2067

 Mała zmiana, Wielki Gatsby - co to takiego?

gatsby.js

Dzisiejszy wpis poświęcimy Gatsby.js trochę bardziej technicznym aspektom tworzenia stron internetowych, nie znaczy to jednak, że dla naszych klientów, zupełnie nie zaznajomionych z kodowaniem będzie on bezużyteczny!

W Website Style wiemy, jak przekazywać wiedzę tak, by była ona zrozumiała i czytelna dla wszystkich naszych odbiorców.

1. Gatsby.js - co to jest?

To nowoczesny framework, który umożliwia budowę szybkich stron internetowych i aplikacji webowych. Działa w oparciu o React oraz GraphQL. Jego podstawowym zadaniem, a jednocześnie ogromną zaletą, jest optymalizacja kodu źródłowego strony.

2. Co wyróżnia Gatsby od innych frameworków?

  • po pierwsze płynność: szybkość ładowania i działania witryn przygotowanych w oparciu o statyczne generatory stron (np. Hugo czy Jekyl),
  • dynamiczne elementy aplikacji tworzonych z wykorzystaniem innych frameworków;
  • wygodne i optymalne środowisko developerskie;
  • możliwość zarządzania treściami z poziomu popularnych systemów CMS, np WordPress. 

 

Podsumowując, strony stworzone przy użyciu Gatsby.js będą bardzo szybkie, wydajne oraz dobrze zoptymalizowana pod kątem SEO. Twórcy włożyli dużo pracy w optymalizację szybkości działania stron tworzonych przy jego pomocy.  Internetowe strony www przygotowane z wykorzystaniem Gatsby.js są bezpieczniejsze niż oparte o tradycyjne systemy CMS. Dzięki budowaniu statycznych zasobów strony, podczas jej wczytywania przez użytkownika po stronie serwera nie jest wykonywany żaden kod.  

3. Dlaczego warto?

  1. Przede wszystkim – strony oparte o framework Gatsby.js są szybkie i wydajne. Jest to główna zaleta oprogramowania, która w obecnym świecie, jak wiadomo jest bardzo ważna.

Framework w trakcie prac, twory statyczne pliki strony, których wczytywanie jest wręcz natychmiastowe. Podczas ładowania witryn, po stronie serwera nie są wykonywane żadne dodatkowe skrypty, toteż, zwracany jest statyczny plik html, css i js.

Po wczytaniu podstawowej struktury, treści i stylów strony doczytywany jest JavaScript, który uruchamia aplikację React i wstępnie ładuje część danych dotyczących pozostałych podstron. Dzięki temu przejście na inną podstronę nie wymaga przeładowania całej strony. Pobierze tylko treści danej podstrony i dynamicznie podmieni te części, które się zmieniły.

 

  1. Bezpieczeństwo

czyli coś, co jest w dzisiejszych czasach niezwykle ważne. Nie raz,  nie dwa musieliśmy szybko reagować i udaremniać ataki spamerskie i hakerskie na stronach internetowych naszych klientów. Dlatego też, przykładamy wielką wagę do bezpieczeństwa naszych wszystkich rozwiązań i tworzonych serwisów.

Stosując Gatscy.js, dzięki budowaniu statycznych zasobów strony, podczas jej odczytywania przez użytkownika po stronie serwera nie jest wykonywany żaden kod.

CMS, w którym przygotowywane są treści (np. WordPress) można postawić w lokalnej sieci, za firewallem i na zewnątrz wystawiać tylko rozbudowaną wersję strony. Dzięki temu z zewnątrz w ogóle nie będzie dostępu nawet do panelu logowania systemu CMS, co praktycznie zmniejsza do zera niebezpieczeństwo włamów.

 

  1. Wtyczki

Gatsby umożliwia wielu danych z wielu źródeł na raz – jest to szczególnie ważne w przypadku większych portali, które po jakimś czasie klienci chcą połączyć w jeden serwis, zarządzany z jednego miejsca. Przykładowo, wpisy blogowe możemy uzupełniać w systemie WordPress, a produkty sklepowe mieć na platformie Presta – i możemy całość spiąć jednym front-endowym rozwiązaniem, Gatsby.js

 

Co ciekawe, framework oferuje także całkiem pokaźną bibliotekę wtyczek, które bardzo przypominają te dostępne na WordPressie – możemy wybierać spośród pluginów do optymalizacji obrazów w kontekście wyświetlania responsywnego czy pod kątem SEO.

 

  1. Indeksowanie

Stworzenie strony korzystając z Gatsby.js, zapewnia też pełne indeksowanie w wyszukiwarkach, mimo oparcia całej witryny o ReactJS. Podczas procesu budowania wszystkie podstrony i ich treści są renderowane do statycznych plików HTML i w momencie wczytania strony przez użytkownika najpierw zwracany jest HTML i CSS, a dopiero później jest ładowana aplikacja React. Dzięki temu podczas indeksowania, roboty wyszukiwarek mogą odczytać i zaindeksować całą treść strony czytając tylko HTML

 

  1. Udogodnienia dla programistów

Czyli coś, co mocno usprawnia prace developerskie – a jak wiadomo, im szybciej developer będzie w stanie ingerować w kod strony, tym łatwiej i niższym kosztem będziemy w stanie nanosić na nie zmiany i wdrażać kolejne elementy.

Lokalną deweloperską wersję strony można uruchomić jedną komendą, a wszystkie wprowadzane zmiany w kodzie są automatycznie, w czasie rzeczywistym na niej odzwierciedlane. Środowisko jest skonfigurowane tak, aby można było korzystać z najnowszych technologii, które w razie potrzeby zostaną skompilowane do wersji wspierających starsze przeglądarki 

 

Jeśli oprogramowanie Gatsby to temat, którym Cię właśnie zaciekawiliśmy, jeśli chciałbyś odświeżyć swoją istniejącą już witrynę firmową – zachęcamy do wypełnienia krótkiej ankiety projektowej i skontaktowania się z nami. Doradzimy, wycenimy i jak zawsze – damy z siebie 100% aby efekt końcowy zachwycił nie tylko Ciebie, ale i Twoich klientów.

 

2067

framework

Gatsby.js

Czytaj również

Grafika a e-commerce - jak połączyć dobre (ładne) z użytecznym?
1067

Grafika a e-commerce - jak połączyć dobre (ładne) z użytecznym?

Dzisiejsze zagadnienie jest z cyklu pytań retorycznych, na które większość zapewne zna odpowiedź. Mimo to, wydaje się że duża grupa właścicieli firm o roli designu zupełnie zapomina, zadowalając się formą “good enough” (“wystarczająco dobre, zadowalające” w wersji polskiej). O ile takie myślenie wcale nie jest karygodne, jeśli mamy dobre przesłanki i goni nas czas. Jeśli jednak chcemy się odpowiednio przygotować do kampanii, zmian, rebrandingu… dobrze jest po prostu wiedzieć czym jest ten mityczny dobry design.

Czytaj dalej