Aller au contenu principal

📨 #125: tRPC, T3, Remix, Zustand, Server Components, Drag & Drop, Forms, Gatsby, Remotion, React-Native, Skia...

· 11 minutes de lecture
Sébastien Lorber

Salut à tous !

C'est la semaine du Black Friday. J'ai préparé pour vous une page que je vais tenir à jour avec les meilleurs deals pour un dev React. J'en ai déjà trouvé quelques-uns, mais certains ne sont pas encore annoncés, alors revenez vendredi ;)

Black Friday 2022 Banner

J'ai enfin l'occasion de mettre tRPC à l'honneur, avec des sorties officielles et un super article qui le compare à GraphQL!

Pour info, il y a un nouveau meetup React-Native Paris avec une 1ere date (6 Décembre). Rejoignez aussi le Slack React-Native Connection. Il est probable qu'une conférence sur le développement mobile arrive prochainement 😜 et j'espère bien qu'une conf React fera également son retour!

Les vidéos de la conférence React Brussels sont en ligne. Je pense y aller l'année prochaine, histoire de rencontrer la communauté React de Belgique!

N'oubliez pas de remplir le sondage State Of JS qui vient d'ouvrir! content d'y trouver Docusaurus cette année. 🙏 N'hésitez pas à suggérer la newsletter pour les resources 😏 (utilisez le nom Anglais: "This Week In React")

💡 Consulter cette newsletter sur Twitter - format visuel 🎨


Pour me soutenir:

Ne manque pas le prochain article !


    💸 Sponsor

    FlyCode rend votre app React éditables, sans code - basé sur Git

    FlyCode rend votre app React éditables, sans code - basé sur Git.

    FlyCode (YC S22) rend les applications web React modifiables en quelques minutes afin que les équipes produit et UX puissent itérer et sortir des produits plus rapidement, sans avoir à attendre (ou consommer) le temps des développeurs.

    FlyCode lit votre code React et trouve les textes, les images, les design tokens et les événements analytics, puis il permet aux non-codeurs de collaborer, de les modifier et de renvoyer une demande de modification (ils n'ont pas besoin d'accéder à GitHub !).

    • Gain de temps de développement
    • Pas d'intégration de code, ça lit simplement votre code !
    • Basé sur GitHub, un robot analyse le code et crée les pull requests
    • Utilisez votre propre stack et vos propres composants
    • Gardez le contrôle de votre base de code

    Vous pouvez commencer ici: flycode.com/developers


    ⚛️ React

    tRPC 10

    tRPC 10

    Belle refonte de tRPC qui améliore grandement la DX et le support IDE. Cette librairie qui facilite les appels backends typesafe fait de plus en plus d'adeptes. Elle peut être facilement utilisée dans l'écosystème React grace aux packages d'intégration (Next.js, React-Query...). J'adore la tagline "Move Fast and Break Nothing" 😄

    Pour comprendre l'intérêt, je recommande de lire Why we ditched GraphQL for tRPC. Alex explique pourquoi ils ont remplacé GraphQL par tRPC dans leur starter Bison, dans un context React. tRPC nécessite beaucoup moins de boilerplate, de codegen TypeScript et de bundle JS, tout en améliorant la DX, le support IDE et simplifiant la gestion du cache. La manière de gérer l'over-fetching est différente: il ne faut pas hésiter à créer une nouvelle procédure. tRPC est idéal pour une app Node.js full-stack en TypeScript avec le code backend/frontend co-localisé (Next.js par exemple). GraphQL reste une bonne solution pour créer une API publique exposée à des partenaires qui n'utilisent pas forcément JavaScript.

    J'en profite pour placer également T3-App qui a aidé à populariser tRPC, et qui dispose enfin d'une doc officielle. Il s'agit d'une stack typée de bout en bout pour Next.js basée sur tRPC, Prisma, Tailwind... La doc sur l'intégration tRPC explique bien les avantages par rapport à une API Route basique de Next.js. Voir aussi create-t3-turbo qui rajoute en plus une app Expo dans un monorepo avec Turborepo.


    Working with Zustand

    Working with Zustand

    Dominik rappelle d'où l'on vient en terme de state management. Il explique pourquoi il aime Zustand, une solution minimaliste et sans magie, dans la philosophie de React. Il donne quelques astuces pour l'utiliser au mieux, comme exposer des hooks custom, utiliser des selecteurs atomiques, ou encore grouper les actions dans un objet immuable.


    Remix dual reponses

    Remix and the Alternate Timeline of Web Development

    Jim explique que Remix a fait quelques pas en arrière pour repensé tout le modèle de nos apps frontend. Avec Remix, le support du progressive enhancement ne nécessiter l'écriture de notre app de 2 manières différentes (client + server) comme avec les autres frameworks, car les routes Remix savent retourner à la fois du JSON et du HTML à partir du même code.


    Taming the dragon: Accessible drag and drop

    Taming the dragon: Accessible drag and drop

    Devon (Adobe) vient d'annoncer la sortie de hooks de drag & drop accessibles pour React-Aria et React-Spectrum. Il explique comment le support clavier et screen reader fonctionne pour permettre aux utilisateurs de sélectionner un élément, et trouver les cibles potentielles avec Tab, ou encore l'expérience mobile. Tout cela avec de nombreuses démo vidéos. On sent une nouvelle fois qu'il y a beaucoup de travail derrière cette API React-Aria, qui est la première à tenter de résoudre ce problème complexe.


    Ne manque pas le prochain article !


      💸 Sponsor

      The React Native Show - a podcast series

      The React Native Show - Podcast

      Puisque vous êtes ici, vous aimez sûrement rester à jour avec les dernières nouvelles de React ! 🔥 Si vous voulez vous plonger dans React et React Native, écoutez les derniers épisodes du React Native Show :

      The React Native Show est un podcast hébergé par Callstack. Chaque épisode explore en détail un sujet différent. L'animateur se plonge dans chaque discussion avec ses invités - des experts internationaux du domaine.


      📱 React-Native

      [Reply] 2022: How can we improve React Native?

      L'équipe React-Native a répondu officiellement à la discussion sur comment améliorer React-Native. On y apprend de nombreux détails sur la roadmap. L'investissement sur React-Native semble s'accélérer. Les points qui m'intéressent particulièrement sont:

      • Metro devrait rattraper son retard (swc, pnpm, symlinks, support ESM "exports"...)
      • Yoga et le support CSS qui va se compléter: flex gap, boxShadow...
      • Le cross-platform, les APIs unifiées, React-Native-Web qui passe sous la direction de Meta
      • Les améliorations de DX: debugging, stacktraces, sourcemaps, LogBox...


      🧑‍💻Jobs

      🧑‍💼 Masteos - Lead ReactJS - Hybride ou Remote - 75-90k€

      Masteos réinvente l’expérience de l’investissement locatif, en proposant un parcours entièrement dématérialisé et un accompagnement de haut niveau aux particuliers qui souhaitent acheter un bien pour le louer.

      🧑‍💼 Premier Octet - Développeurs(euses) React - Paris

      Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).

      💡 Comment publier une offre d'emploi ?


      🇫🇷 En français

      💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !


      🔀 Autre


      🤭 Fun

      Life is short - Make sure to spend it arguing about JS frameworks with strangers on the internet

      Ne manque pas le prochain article !