RedwoodJS – nowa platforma webowa JavaScript
Tom Preston-Werner wydał nowy, bezserwerowy framework aplikacji internetowych – RedwoodJS. Jego zadaniem jest przede wszystkim tworzenie i wdrażanie aplikacji JAMstack. RedwoodJS nie osiągnęło jeszcze stabilnej wersji 1.0, więc nie jest odpowiednie do użytku produkcyjnego. We wpisie na blogu twórcy piszą:
Wyobraź sobie frontend React, statycznie dostarczany przez CDN, który komunikuje się przez GraphQL z twoim backendem działającym na AWS Lambdas na całym świecie. A wszystko to można wdrożyć za pomocą tylko git push – to jest Redwood.
Skład RedwoodJS
Redwood obecnie korzysta z technologii React, GraphQL (Apollo), Prisma, Babel oraz Webpack. W planach jest także obsługa Jest oraz Storybook. Oprócz tego nowy framework przejmuje Jamstack. Aplikacja jest podzielona na dwie części – frontend i backend. Cała organizacja Redwood polega na umieszczaniu kodu frontend i backend w jednym mono-repozytorium.
- /web – Strona internetowa – strona zbudowana przy pomocy React, frontend, udostępniany jako pliki statyczne przez CDN
- /api – Strona api – implementacja interfejsu API GraphQL, są to funkcje bezserwerowe zaplecza, frontend będzie je wywoływał w razie potrzeby dynamicznych danych.
Utrzymywanie tego oddzielnie pozwala na różne zależności i procesy kompilacji dla każdego projektu.
Na grafice wygląda to następująco:

Architektura RedwoodJS
Własny router RedwoodJS
Przede wszystkim Redwood dostarcza wbudowany router. Dzięki niemu programiści wyświetlają wszystkie ścieżki w jednym pliku, bez żadnego zagnieżdżania. Router wprowadza przede wszystkim wiele nowości do aplikacji. Mowa o nazwanych ścieżkach, a także typach parametrów ścieżek. Te pierwsze pozwalają właśnie na odwoływanie się do ścieżek za pomocą zdefiniowanej nazwy. Typy z kolei dbają o wymuszanie wartości na podstawie typu danych lub funkcji niestandardowych.
import { Router, Route } from '@redwoodjs/router' const Routes = () => { return ( <Router> <Route path="/" page={HomePage} name="home" /> <Route path="/users/{type}" page={UsersPage} name="users" /> </Router> ) } // web/src/components/Admin/Admin.js import { Link, routes } from '@redwoodjs/router' const Admin = () => { return ( <h1><Link to={routes.home()}>My CRM</Link></h1> <Link to={routes.users({type: "admin"})}>View Admins</Link> ) }
Generatory, komórki, formularze
Redwood posiada także liczne generatory CLI, tworzące powłokę komórek, stron czy układów. Przede wszystkim ograniczają one schemat typowych operacji.
Komórki w RedwoodJS zapewniają przede wszystkim proste podejście do obsługi zdalnego pobierania danych w wielu stanach. Zawierają one zapytanie GraphQL, stany ładowania, Empty, Failure, a także Success. Minimum potrzebne do działania komórki to eksport QUERY i Success.
Z kolei Formularze Redwood zbudowane są na podstawie React Hook Form. Z Redwood formularze są prostsze i dają gwarancję pracy ze zwykłymi danymi wejściowymi HTML, a także zapewniają walidację.
Źródła: InfoQ, RedwoodJS Docs