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