Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualité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 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:&nbsp;${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 ?
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Membre expérimenté
    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é

  3. #3
    Membre éclairé
    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.

  4. #4
    Membre habitué
    Bof... j'imagine même pas un site complexe avec ça, gros bordel en perspective :p.

  5. #5
    Candidat au Club
    Citation Envoyé par 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.
    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.

  6. #6
    Membre éprouvé
    ?
    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)