📨 #169: useMemo, 2 Reacts, Next.js, Remix, JS Rising Stars, Docusaurus, Astro, Fresnel, Mutative, JSX emails, Expo usage, React-Native releases, Reanimated, VisionCamera, TypeScript, Rspack, Biome...
Salut à tous !
Un petit service pour commencer: est-ce que vous pouvez répondre à cet email pour me dire ce que vous voulez? Un simple "Coucou" ou un retour plus constructif me vont très bien. J'ai changé la manière dont mes emails sont envoyés, et reconfiguré les protocols emailing SPF, DKIM, DMARC. J'ai besoin de faire comprendre aux algos Gmail que mes emails sont bienvenus. Obtenir des réponses à mes emails aide pour cela.
Cette semaine, nous avons un aperçu de l'avenir de React.useMemo
, et beaucoup de contenu liés de Lee Robinson 😄.
Expo nous montre sa forte présence dans l'écosystème React-Native, mais aussi les app stores 💪
JavaScript Rising Stars 2023 a été publié. Cette année, j'ai eu l'occasion de commenter la section React, shadcn/ui et Bun ont été les plus gros succès. Merci à Theo d'avoir recommandé ma newsletter dans sa vidéo d'analyse des tendances : bienvenue à tous ceux qui se sont inscrits récemment 🙏.
Paris 2024, ce n'est pas seulement les Jeux olympiques : nous sommes aussi de retour dans le monde des conférences React ! Depuis la fin de React Europe, il manquait vraiment une conférence React à Paris. C'est enfin réparé avec 3 superbes confs à venir 👌
-
📅 22 mars - React Paris - L'équipe derrière React Brussels et BeJS lance une nouvelle conférence à Paris et le programme vient d'être annoncé aujourd'hui !
-
📅 22-23 avril - React Connection + React-Native Connection - La conférence d'une demi-journée sur React-Native que j'ai aidé à organiser l'année dernière a été un grand succès. Elle revient donc cette année sous la forme d'une conférence de 2 x 1 journée, ce qui vaut la peine de se déplacer. Le CFP est ouvert jusqu'au 3 février.
J'essaierai d'assister aux deux, et j'espère y rencontrer certains d'entre vous !
💡 Consulter cette newsletter sur Twitter - format visuel 🎨
Pour me soutenir:
- 😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
- 💸 Sponsorise la newsletter ou sponsorise-moi
- 🧵 Retweet le dernier thread Twitter
- 📨 Réponds à cet email
- 💬 Rejoins le chat Discord
Ne manque pas le prochain email !
💸 Sponsor
Nlux ― A new new React / JS library to create conversational AI web apps
NLUX (for Natural Language User Experience) is a new open-source React / Javascript library that makes it simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website. With just a few lines of code, you can add conversational AI capabilities and interact with your favourite LLM.
Key features 🌟 include:
- Build AI Chat Interfaces In Minutes - High quality conversational AI interfaces with just a few lines of code.
- React Components & Hooks -
<AiChat />
for UI anduseAdapter
hook for easy integration. - Flexible LLM Adapters -
ChatGPT
andHuggingFace
, and an API to Create Your Own Adapter for any LLM. - Customisable Chat Personas - Configure bot and user pictures, names, and descriptions for personalised interactions.
- Zero Dependencies - Lightweight codebase, with zero-dependencies except for LLM front-end libraries.
More info, examples and documentation on Nlux.ai
⚛️ React
The future of React.use and React.useMemo - a powerful alternative to context selectors
Colin explique comment le contexte React peut causer des problèmes de performance, l'absence d'une API de sélecteur de contexte, et comment il a optimisé les performances d'une application grâce à l'implémentation userland use-context-selector de Daishi Kato.
La partie la plus intéressante est le résumé des récentes discussions sur Twitter. Dan Abramov a expliqué que les context selectors ne composaient pas bien. Andrew Clark a partagé le projet d'étendre useMemo()
et de permettre l'utilisation d'autres hooks à l'intérieur de celui-ci. Cela fonctionnerait avec le hook use avec n'importe quel type Usable
(actuellement React context et Promise, mais peut-être à l'avenir Observables, stores et autres resources), mais aussi avec les hooks tiers ! Cela résoudrait le problème de la sélection de data d'une manière performante et composable, et serait compatible avec le compilateur React Forget à venir.
Excellent article de Dan Abramov, qui donne de bonnes raisons d'exécuter le code localement (feedback instantané), ainsi qu'à distance (au plus près de la source de données). Il propose une nouvelle formule React : UI = f(data, state)
, où f
représente l'ensemble de votre application React, s'exécutant dans 2 environnements distincts.
Cela se termine par une question intéressante, demandant implicitement si vous inventeriez les React Server Components pour résoudre ce problème.
Is there some way we could split components between your computer and mine in a way that preserves what’s great about React? Could we combine and nest components from two different environments? How would that work?
- 💸 From Dreamweaver to JSX: The Evolution of Visual Dev Tools for the Web
- 🌟 2023 JavaScript Rising Stars: voir mon commentaire sur la section React.
- 🐦 Next.js can now run with HTTPS locally
- 📖 Remix Docs - new Client Data guide
- 📜 Common mistakes with the Next.js App Router and how to fix them: Lee Robinson est en contact avec des centaines de développeurs Next.js et a recueilli les erreurs les plus courantes. Également disponible sous forme de [vidéo] (https://www.youtube.com/watch?v=RBM03RihZVs). Je découvre que la fonction redirect retourne un type never et throw une erreur.
- 📜 How I'm Writing CSS in 2024: Lee Robinson aime CSS en 2024. Il décrit les contraintes qui font une bonne UX/DX, et le rôle d'une build step, d'un compilateur ou du streaming. Il recommande les modules CSS, Tailwind CSS ou StyleX.
- 📜 Increasingly miffed about the state of React releases: aucune nouvelle release depuis plus de 550 jours.
- 📜 Executing Dangerously Injected Scripts Inside React Components: technique intéressante pour contourner les limitations de sécurité et exécuter des scripts injectés via dangerouslySetInnerHTML, en utilisant les Document Fragments.
- 📜 28 Advanced NextJS features everyone should know: liste et commente diverses fonctionnalités moins connues de Next.js, que l'auteur n'a rencontrées dans aucune des applications sur lesquelles il a travaillé.
- 📜 Things I would change about React to increase DX: liste quelques points douloureux de React, et fais des propositions pour les résoudre (toutes ne sont pas forcément bonnes ni possible).
- 📜 Harmful complexity: using React for static content: opinion intéressante, mais j'espère prouver que l'auteur a tort et que React est intéressant pour le contenu statique, en particulier avec les RSC et MDX.
- 📜 A new blog for 2024: utilisation d'outils modernes tels que Catalyst, TWC, Contentlayer, Tailwind, Next.js.
- 📜 How to Set Up Soft Navigation Reporting in a React App: Montre l'utilisation du paquet npm Google web-vitals dans une application CRA.
- 📜 Introducing Superglue: React ❤️ Rails: “Superglue makes React and Redux as productive as Hotwire, Turbo and Stimulus”
- 📜 How Lee Robinson created his Guestbook, and you can do it too
- 📜 2024 Predictions by JavaScript Frontend Framework Maintainers
- 📦 Fresnel 7.0 - React 18 support - SSR compatible approach for responsive layouts for React
- 📦 @tanstack/router-vite-plugin - Vite alternative to the router CLI
- 📦 Docusaurus 3.1 - built-in broken anchors detectors,
parseFrontMatter
hook - 📦 Astro 4.1 - Accessibility audit rules, client:visible rootMargin, custom cookie encoding
- 📦 Mutative 1.0 - Efficient immutable updates, 10x faster than Immer
- 📦 JSX email 1.7 - A fork of react-email that keeps being improved
- 🔨 Palettify - Get an instant preview for your theme - supports shadcn/ui and soon MUI
- 🔗 Remix Resources - Community templates, stacks and libraries
- 🎥 Jack Herrington - HTMX For React Developers in 10 Minutes
- 🎥 Lee Robinson - React Server Components: the Good, the Bad, and the Ugly
- 🎥 Remix Singles - "Trellix" - Cookies, Auth, and Drag & Drop: playlist officielle Remix qui créé un clone Trello (demo app).
Ne manque pas le prochain email !
💸 Sponsor
CMS with Inline Visual editing for Next.js, Remix and Gatsby
Set up a project in just 1 minute with the CLI and define your own Visual blocks as React components to convey your pixel-perfect corporate brand, using any CSS framework.
Content editors can easily use these blocks to compose pages visually, just like using a word processor, without compromising the design system.
React Bricks is enterprise-ready with Digital Assets Management, Advanced SEO, Collaboration, Scheduled Publishing, Multilanguage, Integrations with external data sources, Approval Workflow, Single Sign-On, Multiple environments, Backup and Change history.
Trusted by corporate clients such as The Weather Channel, Deel.com, La Banque Postale, leading eCommerce sites and over 8,500 users worldwide.
Get started today!
📱 React-Native
Evan Bacon a rassemblé une liste impressionnante de 1599 applications qui utilisent les libs Expo (et donc React Native). La liste comprend des noms connus comme Pizza Hut, Burger King, Microsoft, Discord, Shopify, NFL, Walgreens, Amazon, CNN, et bien d'autres encore. Ce n'est pas une grande nouvelle pour nous de voir React Native prospérer, mais il est appréciable de confirmer la présence de nombreuses apps dans le top de l'App Store.
- 💸 Galaxies.dev - Master React Native & Save 25% on PRO with code GALAXIES24
- 👀 Proposal: Hover style API for iPad / Apple Vision Pro: l'iPad prend en charge les effets de survol hover pour les utilisateurs de la souris ou du trackpad, ce qui sera également utile pour le future support de Vision Pro d'Apple, dans lequel les éléments de navigation sont mis en évidence lorsque l'utilisateur les regarde.
- 📜 Introduction to Reanimated: Un bon article d'introduction pour apprendre les concepts derrière l'une des bibliothèques d'animation les plus populaires, couvrant les shared values, reanimated styles et animated views.
- 📦 React-Native v0.73.2 + v0.72.9 + v0.71.15: nouvelles releases qui fixent l'erreur a build iOS "Error installing boost Verification checksum”, et quelques autres nouveautés.
- 📦 react-native-vision-camera 3.7.0: inclut désormais un Expo config plugin pour activer facilement le scanner QR/Barcode entièrement natif.
- 🎥 Theo - Moving off React Native: Clickbait, mais intéressant. Theo discute de la migration d'Alan (🇫🇷) de “vanilla” React-Native vers Expo.
- 🎥 Szymon Rybczak - Bringing React Server Components to React Native
- 🎥 Simon Grimm - THE React Native Tech Stack for 2024
🇫🇷 En français
- 📜 Expo Router (version 2). Mise en place et configuration d'un projet
- 🎥 React n’est pas une qu'une librairie web
- 🎥 Actus JS de la semaine - Top 10 des projets JS de 2023, shadnc/ui, Bun…
🔀 Autre
- 👀 TypeScript 5.4 Iteration Plan -
NoInfer<T>
, throw expressions... - 📜 Daniel Rosenwasser on TypeScript and What’s Ahead in 2024
- 📜 Weird things engineers believe about Web development
- 📜 The Website vs. Web App Dichotomy Doesn't Exist
- 📜 The Popular Vote of Interop 2024
- 📦 Biome 1.5 - 97% Prettier compat + 2024 Roadmap
- 📦 Node 20.11 - improves test_runner, import.meta, perf…
- 📦 Rspact 0.5 - Module Federation
🤭 Fun
A plus 👋
Ne manque pas le prochain email !