Discussion :

[St�phane le calme]

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 JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

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 JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

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 JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

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 bash :

S�lectionner tout - Visualiser dans une fen�tre � part

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 JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Que pensez-vous de cette nouvelle technologie ? Utile ou pas ? Pensez-vous que c'est utile de l'essayer ?

[Invit�]

Tiens donc, �a faisait presque longtemps qu'on avait pas eu un nouveau framework JS

Le concept de JAM stack me fait bien rigoler, en gros c'est du web 2005 en AJAX sauf que au lieu de faire l'interface avec des outils de templating �prouv�s on utilise du JS

Utiliser GraphQL pour tout � l'�re HTTP/2 et HTTP/3

Bon aller j'arr�te, c'est pas trolldi mais �a m'a d�mang�

[L33tige]

C'est vrai que j'ai peu du mal � voir quel est l�int�r�t d'y investir du temps plut�t que dans un des cadors.

[Invit�]

Bof... j'imagine m�me pas un site complexe avec �a, gros bordel en perspective :p.

[Nilmanduil]

C'est vrai que j'ai peu du mal � voir quel est l�int�r�t d'y investir du temps plut�t que dans un des cadors.

Derri�re c'est du React et du GraphQL, donc techniquement, utiliser RedwoodJS, c'est investir du temps dans l'un des cadors, qui plus est celui dont la popularit� augmente le plus vite, qui est soutenu par un g�ant de la tech, et dont la part de march� est tr�s grande. Du coup pour moi, c'est un framework � surveiller parce qu'il pourrait bien nous surprendre et prendre beaucoup d'ampleur.

[frfancha]

Peut-�tre c'est int�ressant, peut-�tre pas. Aucun id�e sans y passer plus de temps.

Mais ce qui me d�range fort c'est le ton de la pr�sentation:

"Regardez comme c'est facile"
"Il fait tout pour vous"
"Les autres m�thodes sont nulles celle-ci est g�niale"

Notez que je comprends bien que ce ton provient de la news originale, ce n'est pas une critique de l'analyse de la r�daction developpez.com (vu qu'il n'y a pas d'analyse mais une simple traduction)