DSP'17 — Nuxt.js nowym fundamentem timbercode.pl

21 marca 2017

W poprzednim wpisie na temat rozwoju timbercode.pl opisywałem mój proces tworzenia designu strony. Nie poruszyłem tam jednak tematu technologii, która byłaby wykorzystana pod spodem.

Aktualnie timbercode.pl jest generowane za pomocą jekylla. Jest to narzędzie do generowania statycznych stron internetowych: Ty przygotowujesz treść wpisów oraz szablony HTML, zaś jekyll zamienia to na HTML-e, i taką paczkę plików możesz wrzucić prosto na serwer i gotowe. To rozwiązanie świetnie też współgra z GitHub Pages oraz GitLab Pages (na których hostowane jest timbercode.pl), a to niewątpliwie zaleta: strona dostępna w internecie 24h na dobę bez żadnych opłat 🙂

Problem, który zaczął dostrzegać podczas pracy nad designem, to komponenty o dynamicznej „naturze”: wyszukiwarka czy doładowywanie wpisów na liście podczas odkrywania dalszych jej części. Podejrzewam, że wszelkie takie bajery można uzyskać za pomocą odpowiedniej dawki JavaScriptu. Ewentualnie z pomocą pluginów pisanych w Ruby. Obawiam się jednak, że przy tak bardzo „statycznym” jekyllu skończyłbym na łataniu łat i obchodzeniu obejść. Czy w takim razie nadszedł czas na zmianę technologii, na której oparte jest timbercode.pl?

Alternatywy

Rozważyłem dwie ścieżki – napisać całą stronę zgodnie z trendami, tworząc Single-Page Application opartą na jednym z popularnych frameworków lub dać sobie maksimum władzy nad zachowaniem aplikacji, serwując z ją „klasycznie” z backendu (np. napisanego w node.js).

Single-Page Application

Utworzenie bloga jako SPA brzmi kusząco: strona internetowa jako jedna spójna aplikacja ze swoim własnym routingiem, pozwalającym oddzielić adresy URL od struktury plików kodu źródłowego. Strona, na której przejście z jednego miejsca w drugie nie skutkuje irytującym przeładowaniem karty przeglądarki (mignięcie białego tła). Technologia, którą sobie upatrzyłem w tym celu to Vue.js – framework, który jest podobno równie sexy co React, zapewniając jednocześnie łatwiejsze rozpoczęcie pracy z pomocą przejrzystej dokumentacji. Co istotne, jest duża szansa, że Vue.js nie działa na przekór automatycznemu testowaniu aplikacji.

Niestety głównym problemem związanym ze SPA są kłopoty z SEO. Taka webaplikacja zazwyczaj ładuje swoją treść asynchronicznie i jest w ogóle tak bardzo „dynamiczna” w swej istocie, że… crawlery nie będą w stanie wykryć na niej wpisów blogowych i podpowiadać ich w wynikach wyszukiwania Google 🙁 Są na to rozwiązania, ale… to raczej obejścia niż rozwiązania leżące u podstaw danej technologii.

Backend serwujący frontend

Gdybym wybrał drugie rozwiązanie, to uzyskałbym większą swobodę pisania kodu. Mój backend mógłby dowolnie decydować, jaki HTML przesłać dla zadanego adresu URL. Mógłbym dostarczać użytkownikowi tylko tyle wpisów, ile mu potrzeba dla danego wyszukiwania, zamiast ładować na start wszystkie wpisy, które istnieją. Treści przyszłych wpisów mogłyby czekać cierpliwie poza przeglądarką użytkownika (w podejściu bez backendu mógłbym je ukrywać, ale i tak byłyby już pobrane przez klienta). No a także security… Jak ukryć tokeny dostępowe do innych serwisów bez możliwości „schowania” kodu na serwerze?

Niestety dodanie backendu to generowanie kosztów. Backend utrzymywany na Heroku to przynajmniej $7 miesięcznie. Darmowy plan też wchodzi w grę, ale… skutkuje on usypianiem backendu co jakiś czas. Efekt? Użytkownikowi strona internetowa ładuje się kilka dłuuugich sekund (bo „Heroku wstaje”).

Nuxt.js – niespodziewany zwycięzca

I tak oto docieramy do zwycięzcy, którym jest Nuxt.js. Jest to narzędzie oparte na Vue.js, które łączy w sobie cechy przyjemnie pisanej nowoczesnej webaplikacji z zaletami… statycznie generowanych stron. Otóż jedną z głównych funkcji Nuxt.js jest możliwość wygenerowania strony statycznej za pomocą komendy nuxt generate. Tak przygotowany blog nie sprawia problemów crawlerom i można go hostować bez wykorzystania własnego backendu.

Nie dość, że będę mógł wygodnie oskryptować stronę, to jeszcze nie będę musiał pisać boilerplate’u związanego z routingiem czy budowaniem aplikacji. Nuxt.js dostarcza oparty na Webpacku proces budowania (można go łatwo dokonfigurować na swoje potrzeby), generuje routing (na bazie struktury katalogów), a także wykorzystuje wygodną składnię Single File Components, w których style definiujemy w kontekście HTML-a i jego skryptów. I to wszystko nadal w ramach darmowych GitLab Pages! 🤓

Jakże się cieszę, że trafiłem na to narzędzie! 🙂

Podsumowanie

Przewidując problemy z rozwojem timbercode.pl zdecydowałem zmienić technologię bazową. Po długiej rozterce odkryłem Nuxt.js, który chwilę później stał się moim wyborem. Rozpocząłem migrację bloga, którą możesz obserwować na gałęzi migration_to_nuxt repozytorium kodu strony.

Mam nadzieję, że z pomocą tego narzędzia ułatwię sobie dalszą pracę, a także nauczę się czegoś nowego i ciekawego 😉