2 pièce(s) jointe(s)
RedwoodJS, un framework JavaScript qui apporte le full-stack à la philosophie JAMstack
Le fondateur de GitHub présente RedwoodJS, un framework JavaScript qui apporte le full-stack à la philosophie JAMstack
et « fonctionne avec les composants de développement que vous aimez »
Avant tout, il convient de s’intéresser à JAMstack.
JAM est mis pour JavaScript, API et Markup :
- JavaScript : les fonctionnalités dynamiques sont gérées par JavaScript. Vous êtes libres d’utiliser la bibliothèque ou le framework que vous voulez.
- API : les opérations côté serveur sont abstraites sous forme d’API réutilisables, accessibles en HTTPS à l’aide de JavaScript. Ces opérations peuvent être déléguées à des services tiers ou bien à vos propres fonctions.
- Markup : les sites web sont servis sous forme de fichiers HTML statiques. Ces fichiers peuvent être générés à partir de fichiers source, comme du Markdown, à l’aide d’un générateur de site statique.
Les principaux bénéfices apportés par la JAMstack sont :
- Une performance accrue : servir du code généré et des assets à partir d’un CDN
- Une meilleure sécurité : plus besoin de se soucier des vulnérabilités du serveur ou de la base de données
- Un coût bien moindre : l’hébergement de fichiers statiques est moins cher, voire gratuit
- Une meilleure expérience de développement : les développeurs front end peuvent se focaliser sur la partie client, sans être dépendants d’une architecture monolithique. Cela se traduit en général par un développement plus rapide et plus ciblé.
- Redimensionnement à la volée : si votre site devient viral ou est soumis à un pic d’activité, le CDN compensera sans problèmes.
Vient alors RedwoodJS
Sur Twitter, c’est Tom Preston-Werner, fondateur de GitHub, qui a fait la présentation de son nouveau bébé : un framework JavaScript sur lequel il a travaillé durant l’année dernière. Sur le site dédié, voici l’introduction que nous pouvons lire : « vous aimez la philosophie JAMstack mais vous avez besoin d'une application Web basée sur une base de données ? Vous voulez une grande expérience de développeur et une mise à l'échelle facile? Redwood est là! S’appuyant sur React, GraphQL et Prisma, Redwood fonctionne avec les composants et le flux de travail de développement que vous aimez, mais avec des conventions et des aides simples pour rendre votre expérience encore meilleure ».
Tom Preston-Werner donne plus de détails sur son fil d’actualité Twitter :
« Redwood est opiniâtre. Le paysage actuel de JS et de nœuds modernes offre des millions de façons de tout faire, mais ce que je veux, c'est un excellent moyen de faire avancer les choses.
« Redwood est intégré. Combien de temps avez-vous consacré à l'intégration de diverses technologies dans votre application React ? Trop, je suppose. Redwood le fait pour vous, et nous continuerons de le faire pour vous à chaque nouvelle version.
« Redwood est edge-ready. Votre client Web est livré via CDN. Votre logique métier s'exécute sur AWS Lambda (déployée dans le monde entier si vous le souhaitez). Votre base de données peut être distribuée avec Yugabyte, AWS Aurora, Google Spanner, etc. Redwood est prêt à évoluer!
« Redwood est multiclient. Votre backend EST une API GraphQL, ce qui signifie que vous l'écrivez une fois et pouvez servir de nombreux frontends: web, mobile, desktop, CLI, kiosque, Tesla, n'importe quoi! Vous aurez éventuellement besoin d'une API, vous pouvez donc tout aussi bien commencer par une.
« Redwood propose une expérience de développeur. Soyez déclaratif autant que possible. Embrassez VSCode, ESLint et Prettier. Laissez Babel / webpack faire le gros du travail sans avoir à toucher aux fichiers de configuration. Concentrez-vous sur ce qui rend votre application spéciale ».
En savoir plus sur Redwood
Comment est-il organisé ?
Redwood place le code frontend et backend dans un seul monorepo :
- /web contient le frontend et est servi sous forme de fichiers statiques via un CDN (et automatiquement divisé en code pour vous).
- /api contient les fonctions sans serveur backend (une API GraphQL par défaut) que votre frontend appellera lorsqu'il aura besoin de données dynamiques.
Routage
Redwood dispose de son propre routeur qui apporte une innovation à cette partie souvent négligée (mais importante) de votre application. Les itinéraires nommés vous permettent de référencer un itinéraire par un nom que vous définissez, les types de paramètres d'itinéraire prennent soin de forcer les valeurs en fonction du type de données ou des fonctions personnalisées, etc.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| / web/src/Routes.js
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>
)
} |
Cellules
La séquence de récupération des données d'une API, montrant un espace réservé de chargement, puis affichant le résultat est si courante que Redwood les codifie en un modèle de code déclaratif, résultant en un code simple et lisible!
L’équipe les appelle des cellules et elles contiennent les états de requête, de chargement, de vide, d'erreur et de réussite GraphQL, chacun se rendant automatiquement en fonction de l'état de votre cellule.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| // web/src/components/UsersCell/UsersCell.js
export const QUERY = gql`
query USERS {
users {
id
name
}
}
`
export const Loading = () => <div>Loading users...</div>
export const Empty = () => <div>No users yet!</div>
export const Failure = ({ message }) => <div>Error: {message}</div>
export const Success = ({ users }) => {
return (
<ul>
{ users.map(user => (
<li>{user.id} | {user.name}</li>
))}
</ul>
)
} |
Services
Redwood met toute votre logique métier au même endroit: les services. Ceux-ci peuvent être utilisés par votre API GraphQL ou tout autre endroit dans votre code backend. Redwood fait toutes les choses ennuyeuses pour vous.
Découvrez à quel point il est facile de créer et de consommer un point de terminaison GraphQL :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| // api/src/graphql/users.sdl.js
export const schema = gql`
type User {
id: Int!
name: String!
}
type Query {
users: [User]
}
`
// api/src/services/users/users.js
export const users = () => {
return db.user.findMany()
}
// web/src/components/Users/Users.js
export const QUERY = gql`
query USERS {
users {
id
name
}
}
`
export const Success = ({ users }) {
return JSON.stringify(user)
} |
Générateurs
Même avec une élimination implacable de boilerplate, les fichiers Redwood ont encore besoin d'un peu de code pour vous aider à démarrer et doivent être créés dans les bons répertoires. Pas de problème, laissez un ordinateur faire ça pour vous!
Redwood contient plusieurs générateurs qui créent l'enveloppe des cellules, des pages, des mises en page, des services, etc. Il dispose même d’un générateur d'échafaudage qui créera toutes les pages nécessaires pour exécuter des opérations CRUD de bout en bout sur une table de base de données.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| # Create a cell for Users
$ yarn rw generate cell Users
# Create a layout named Admin
$ yarn rw generate layout Admin
# Create an About page and set the URL to /about
$ yarn rw generate page About /about
# Read the DB schema and create the SDL file for the User table
$ yarn rw generate sdl User
# Create api/src/services/email/email.js and include CRUD functions
$ yarn rw generate service Email --crud
# Create the SDL, service, cells, pages and components to CRUD a User
$ yarn rw generate scaffold User |
Formulaires
Travailler avec des formulaires est notoirement ennuyeux dans les applications React. Redwood supprime la complexité et vous donne la liberté de travailler avec des entrées HTML régulières, mais saupoudré d'un peu de validation et de gestion des erreurs. Affichez automatiquement les erreurs côté client et côté serveur et stylez-les comme tout autre composant React.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // web/src/components/Comment/Comment.js
import { Form, Label, TextAreaField, FieldError, Submit } from "@redwoodjs/web"
export const Comment = () => {
const onSubmit = (data) {
console.info(`Submitted: ${data}`)
}
return (
<Form onSubmit={onSubmit}>
<Label name="comment" errorStyle={{ color: "red" }} />
<TextAreaField
name="comment"
errorStyle={{ borderColor: "red" }}
validation={{ required: true }}
/>
<FieldError name="comment" errorStyle={{ color: "red" }} />
<Submit>Send</Submit>
</Form>
)
} |
Sources : RedwoodJS, Tom Preston-Werner, JAMstack
:fleche: Que pensez-vous de cette nouvelle technologie ? Utile ou pas ? Pensez-vous que c'est utile de l'essayer ?
