François Best
Durée: 52m6s
Date de sortie: 02/09/2025
This week we talk to Francois Best, the creator of Nuqs, a library for managing URL state in React. We talk about the origins of Nuqs, the challenges of managing URL state, and the future of the library.
Il y a assez de bons routes, pour le moment, à peu près.
Si vous ne pouvez pas construire votre application,
vous n'aurez pas besoin d'un autre route, d'un autre travail.
Il y a beaucoup de faibles manières de construire des applications
avec les choses que nous avons.
Bonjour, bienvenue à DevTools FM.
C'est un podcast sur les tools de développement
et les gens qui les font.
Je suis Andrew et je suis ma co-host Justin.
Bonjour, tout le monde.
Nous sommes vraiment excitées à avoir François Best sur ce jour.
François, vous avez fait beaucoup de bons tools d'open source.
Un des trucs que je sais au dessus de ma tête, c'est
comme Nukes ou NQ, ou NUQS.
Je suis toujours très intéressé
en déclenche des state et des paramètres de courant.
Donc je suis excité de parler de ça et de beaucoup de votre travail.
Mais avant de nous dépasser,
Would you like to tell our listeners
a little bit more about yourself?
Oui, sure.
So my name is François Best.
I'm a freelance software engineer from Grenoble
in the French Alps.
I've been building on the web for the last eight years or so.
And before that, I was working in the music
slash pro audio industry building music software in C++.
And I think what got me into web development
was the faster feedback loops
that we can have with building on the web.
Even before we had fast reload on styles
or auto module reloading in React,
you just had to reload the page and you saw your changes.
Whereas in the native world,
you would have to rebuild your program
before you could see any change.
And that took forever.
And so having this fast feedback loop
was really nice to have on the web.
Not only that while you build,
but also when you deploy,
once you want to see your changes
on someone else's machine,
you get push some other servers
or somewhere, builds your application,
serves it and gives you a URL
that you can give to anybody
and they can access it instantly.
Whereas in the native world,
you would have to build your software,
put in an installer, ship it to users,
sell it to users usually,
have them install this thing
and then it would sit on their machine
forever without potentially being updated.
Whereas the web is always instant,
you always have the latest version of everything.
And this was really cool
as someone wants to build things fast.
This was really the best platform.
Yeah, definitely.
I have similar feelings.
The web's feedback loop is definitely addictive
once you get going with it
and it's just so instant gratification.
Before we start talking about NUCs,
I was looking through your past projects
and it seems like you had a little bit
of a focus on security tooling
and you had some interesting security projects.
So can you explain to us
what those projects are?
Je pense que c'est de la période pandémique.
J'ai eu des préoccupations
pas de préoccupations,
mais j'ai commencé à être plus intéressé
dans les préoccupations de la application que nous avons construite.
C'est la première fois que j'ai fait
un scandale de Cambridge Analytica
qui a été révélée par Brexit,
qui a impacté moi un peu
parce que ma fille est britannique.
Donc j'ai commencé à me demander
comment pouvons-nous construire des applications
qui sont plus sécurisées
et plus préoccupées?
Et la meilleure façon de faire ça
est d'entrer une encryption.
J'ai commencé à tinker
avec comment la encryption fonctionne,
ce sont les cifres
et les autres sont bons pour quoi?
Comment composer ces choses
et comment faire des applications
qui sont plus sécurisées.
De faire des données sécurisées.
J'ai construit quelques choses
d'open source
que j'ai mis en github.
C'est généralement ce que je fais.
Je trouve une idée,
je tinker avec ça
et tout ce que je mets en github
parce que c'est de la convenience.
Et parfois, quelque chose s'étend,
parfois c'est juste abandonné
et quitte à la place
sur l'architecture de la web.
Mais c'est un bon moyen
de essayer des choses
et de voir,
apprendre en public, essentiellement.
C'est de construire des choses.
Donc je ne recommande pas nécessairement
à personne d'utiliser
les choses que j'ai construite
pour la production de sécurité.
En production.
Mais c'était un concept
prouvé
que j'avais en mind
pour un bon temps,
qui était de construire
une sorte d'SDK
pour une encryption
dans les JavaScripts
ou les typescripts.
Mais ça pourrait travailler
sur le front-end
de les applications de web.
Donc le front-end
fait la encryption
et tente de la données
et
reçoit la données
et décrypte-le localement.
Donc c'est le premier local
à son coeur
avec une layer de encryption
sur le top.
Donc le service ne voit pas
rien.
Beaucoup de fois
que j'ai essayé de mettre
cela en pratique en actualité,
j'ai toujours terminé
dans les problèmes
que parfois
vous avez besoin de le service
pour faire des choses.
Et si vous n'avez pas
le data parce que c'est décrypté,
bien, ça limite
un peu
ce que vous pouvez faire
en termes d'applications.
Et donc
si des clients
veulent faire ça,
je leur demande
si vous êtes vraiment sûrs
parce que vous n'aurez pas
pu changer votre mind
quand c'est en place.
Donc
c'est toujours
la sorte double
d'enduin encryption, je pense.
Vous avez des caractéristiques
mais aussi vous avez plus
des features
de cela.
Je vais dire
Incan Switch
fait de l'exercice
dans le space
sur la première encryption locale
et ils ont un projet
appelé Key Hive
que ils tentent
de faire exactement
ce problème.
C'est comme
comment vous
vous
comment vous vous
plusieurs personnes
en collaborant sur un document
et tous
en faisant
encryption
en soi-même.
Donc ils ont
cette chaine de confiance
avec les clés
et un peu
un peu
je ne sais
un peu de challenges
là-bas
mais c'est
un espace super intéressant.
Oui,
encryption
est en fait
les plus bonnes parts.
Le problème
du graphisme
est la partie du hart.
Vous transformez
un problème de data
dans un problème de management
quand vous commence
à involouir la encryption.
Et cela
implique
les clés de confiance,
les PKI
et des choses comme ça.
C'est un peu
oui,
c'est un espace différent
de juste construire
les applications
avec les clés de texte
de la façon
qu'on fait.
Mais oui.
Donc,
pourquoi ne nous
parler
en
NQS
ou du
nukes?
Quelle nukes
avez-vous réprimé?
Je l'ai utilisé
pour les nukes
ou nukes
en français.
Mais j'ai vu
tout le monde
l'appeler nukes.
Donc maintenant c'est
le nukes.
Donc,
nukes,
cool.
Comme nukes
sans la pêche.
C'est correct.
Donc,
ce
c'est ce que
c'est le problème
qui a originalement
motivé
ce nukes.
Pourquoi
était-il
l'économie URL
importante
pour vous?
Je pense que
l'initiel
de l'usage
que j'avais
était
sur mon site.
J'ai
utilisé mon site
comme
un
laboratoire
pour
beaucoup de
petits expériences.
Et
une des
c'était
un calculateur
pour les joints
de Dovetail.
J'ai
appris
le travail
durant la pandémie.
Et
j'ai voulu
avoir ce petit
calculateur
où je pouvais
designer
les joints
sur mon laptop.
Et
avoir
un
SVG
rendu en
manière
qui serait
comme
avoir tous les
mesures
déçues.
Et
quand je voulais
aller
au
le workshop
pour
faire
le cut
actuel,
je n'ai pas voulu
mettre mon laptop
avec moi
parce que
c'est beaucoup de
bleus.
Donc,
je voulais
transmettre ça
à mon téléphone.
Et je voulais
pouvoir
juste
mettre un
pour
mettre un
code
comme ça.
Mais
qu'est-ce que je
pourrais
avoir
l'application
sur mon téléphone
aussi?
Et
comment
je transmettais
les choses
entre elles?
Je ne veux pas
avoir un service
où je
transmets le data
pour
faire
un projet
ou quelque chose.
Je vais juste
mettre le URL
parce que c'est
convaincu.
Je peux
le couper.
Je peux
le mettre sur l'autre
côté.
C'est bon.
Et
c'est
en fait
comment ça a commencé.
Et
j'ai
eu ce petit
app
que je n'ai
jamais utilisé
pour
mettre
des
bleus.
Mais
c'était
comme
le point
pour
ce truc.
Et
il a besoin
beaucoup de
différentes
choses
que je pense
que
c'est
bien
facile de
comme
Et donc j'ai terminé dans ce problème très rapidement parce que j'aime tinker avec tout ce que j'ai construit.
Et c'est comme le premier step que Nox a fait en devenir « time safe »
plutôt que type safe, ou aussi être type safe, mais aussi être « time safe ».
C'est un concept « time safety » qui est...
Essentement, ça fait sure que votre application va travailler à ce que tu fais,
à ce que tu fais des updates et à ce que tu es connecté.
Donc nous avons cette « thoughtful queue » qui intervient avec les updates de la URL,
et puis les mettre à l'application sur le brousser à un rate que tu apprécies.
Parce que pas tous les brousses travaillent à l'un de ces rates,
comme Safari et Firefox, ils seront heureux d'avoir un update à chaque 50 milliseconds, pour exemple.
Mais Chrome et Firefox sont heureux de 50 milliseconds.
Safari a besoin d'une date de 120 milliseconds entre les updates pour être safe.
Donc c'est beaucoup plus lent.
Et tu dois compte sur ça parce que tu ne sais pas ce que les brousses sont et si tu te l'apprécies
à tout le maximum de rate, alors ta URL est moins responsable quand il pourrait être plus.
Donc c'est un peu comme ce temps-mètre en Nux qui s'appelle avec ça.
Nous avons récemment appris 2.5 qui a un bounce sur le top de cette « thoughtful queue »
donc tu peux maintenant faire des updates plus en plus dans le futur, je pense.
Comme tu le type pour ces inputs, c'est vraiment utile.
Donc ça semble que Nux est probablement un côté effectuel
et que ça a interprété les données, pour que ces choses soient plus rapidement updates.
Exactement, la URL reste la source de vérité, mais c'est l'éventuelle source de vérité.
En règle, la URL est toujours la saison, mais quand tu as écrit,
tu as cette température optimiste des updates, qui se passe
alors que la request de URL est en train de être impendie et de la pente.
Donc nous devons nous raconter cette state optimiste.
Mais tu as cette...
Nux utilise une...
Nux utilise une state de utilisation, comme un API.
Donc tu as la valeur et la fonction de changer, la function de state update.
Donc la valeur est toujours instant, donc tu peux connecter à des components contrôles.
Mais la URL, comme tu le dis, est un côté effectuel.
Il y a quelques effets de utilisation qui ont été réalisés avec synchronisation.
Je veux juste vous parler de ce que tu as un article très bon sur ton blog,
de l'assurance de l'Iceberg type URL.
Je pense que c'est un très grand accès.
C'est une summary de la parole que je lui ai donné à React Paris
en Marche, et je vais vous donner encore en React Advanced London
en novembre, 28 novembre.
C'est comme, qu'est-ce que les dangers que tu n'as pas vraiment vu avec l'Iceberg type URL.
Parce que je vois cela arriver avec Redux, avec Zuchan,
avec le state de management en général.
Tu donnes les gens un tour et ils vont essayer de mettre absolument tout le monde
dans leur application, parce que ça se sent magique.
Quand tu es un peu plus élevé, c'est vraiment sympa,
mais tu dois en faire compte qu'il y a des constraints sur la URL,
en termes de la taille, en termes de la temps, comme je l'ai dit,
en termes de beaucoup de choses.
Et ce article, et ces points,
c'est comme l'accumulation de ce que j'ai appris avec ce projet,
des choses que tu ne devrais probablement pas faire avec le state de management.
Et donc je veux pouvoir donner à des gens un sort de backup
contre ce que tu peux faire, mais être conscient de ces problèmes et les limitations.
Donc, en termes de la compétition, de mettre les choses à la limite,
je vois que tu as dit un peu de ce que tu veux,
c'est que tu veux donner à des gens la possibilité de faire un ship
de components nukes envers les NPM,
et avoir cette solution de state de management,
comme tout à l'extérieur de la contrôle des host apps.
Je suis intéressé si tu as exploré ça plus,
et si tu le recommences.
Ce n'est pas vraiment au-delà de la contrôle des host apps,
c'est une interface universelle,
ou une layer d'abstraction sur les components de ton projet.
Donc, la grande chose de réaction,
et la chose qui a fait la scale, je pense,
est le système d'encapsulation.
Tu as un component qui contient les présentations, les styles et les comportements.
Donc, dans un component, tu peux décrire toutes ces choses.
Le contenu, la HTML que tu générelles,
les styles avec des noms classiques et les styles,
et le logic avec des hooks et des effets, et toutes ces choses.
Mais ces States,
essentiellement, vivent dans la même partie de ce component,
la même représentation de ce component.
Donc, ce que nukes peut faire,
c'est d'extraire ça,
pour le faire vivre dans la URL, dans une manière descriptive.
Donc, tu descrites les paroles de la recherche que ton component accepte.
Tu expoques les paroles avec le component.
Et ces définitions que tu as expoqué avec le component,
tu peux réutiliser dans le service avec des loader,
ou tu peux composer avec d'autres choses dans ta description de page.
Tu peux avoir cette manière déclarative
de dire que tu as un component qui interacte avec la URL.
Ici, c'est ce qu'il faut, ici c'est ce qu'il peut faire,
et ici c'est ce que tu as le lien avec.
Comment tu génére un lien avec un component que tu as importé?
Donc, tu as cette manière fréquente
de définir des comportements pour les States URL
que tu peux mettre dans les components de l'NPM,
ou dans les rapports monor,
surtout si tu as une libraire de share,
comme j'ai eu des clients,
ils ont eu plusieurs appels de Next.js,
et ils veulent avoir une réaction de réaction,
qu'ils veulent porter au Next.js,
et ils ont eu des appels de multiple monor,
et ils avaient eu un système design de l'Ibrie,
où ils pouvaient utiliser les States URL
avec cette interface unifiée.
Ils pouvaient donc consommer ces components,
de la même manière qu'ils consomment généralement les components réactifs,
tu n'as pas vraiment pensé
sur les styles ou les HTML
qui sont rendus par les components,
tu les composes.
Donc, l'idée avec Noxus de faire exactement la même,
c'est de faire que c'est composable
pour déclenter ton comportement de search programs,
et faire que le framework est agnostic,
pour que tu puisses mettre le framework que nous soutenons.
On a un petit peu d'adaptation
pour ce clip.
Donc, si tu veux construire une libraire
qui construit des components avec Noxus,
une chose que je recommande
c'est quelque chose qu'on doit en faire,
c'est de mettre Noxus en dépendance pure,
ne pas le mettre en dépendance directe,
la même raison que si tu veux embêter la réaction réactif,
par exemple, la query test,
dans la libraire,
tu aurais des issues contextaux.
Donc, le réacte doit avoir la même
objectif de contexte
à travers ta application
pour pouvoir connecter les dots.
Donc, Noxus utilise un contexte interne,
si tu veux utiliser
ces components en même temps,
il faut utiliser le contexte
de l'application que tu es en train de mettre.
Donc, en le mettre.
Donc,
ce est important.
C'est quelque chose que je voulais te demander
avant de vous dire
que je vais vous donner des trucs spécifiques
dans la chaîne.
Je vais vous donner ce blog que j'ai mentionné
précédemment.
Je pense que
j'ai pensé beaucoup sur mon site personnel,
c'est le fait que
il y a beaucoup de links sur le web.
Donc, c'est comme
les gens qui changent les URLs,
les URLs que quelqu'un d'autre a linké
ou les maires de la carte,
etc.
C'est quelque chose
que je veux toujours optimiser
pour que les choses soient restées.
C'est intéressant
que tu as
l'air d'accomplir
avec ce qu'il y a de la première classe,
d'acquérir
les paramètres de la query,
des tests de migration,
et donc, tu as le temps
de créer un task de migration URL.
Tu peux parler un peu
de l'accompté de l'accompté
et de la façon dont tu vois
l'utilisation.
Ça a été de l'utilisation de l'analyse.
Essentiellement,
on a eu des applications
où on a changé, et on a réalisé
que les liens de l'analyse
ne travaillent plus.
C'est un code timide,
ne pas changer, je ne m'en souviens pas.
Mais tu veux faire
que les contrats que tu as
ont été spécifiés par un
nom de certaine patin,
et d'un URL state, et un hash,
tout le URL
est toujours le même
que le temps de vie de ta application.
Et, c'est très facile
de briser les choses, parce que c'est très facile
de changer, et pas très facile
de voir ce que tu as changé.
Donc, le truc dans l'article
n'est pas une API qui nous
expose, c'est quelque chose que je
n'ai pas à penser, que je veux construire dans le futur.
C'est
deux parties, c'est
visualiser les changements,
et avoir un moyen
d'établir
ces migrations
quand tu fais un changement.
C'est très similaire à ce que tu peux avoir
dans les migrations database,
parce que c'est exactement
le même système.
Si tu penses que le URL est un database
immutable, que tu as senti
dans le wild, et que ta application
a un service
qui doit connecter
à ces databases,
tu dois faire surement
que la logique que tu as
dans ta application
peut comprendre ce qui est venu de ces URLs.
C'est le même chose
que les migrations database, je pense.
Donc, nous avons besoin de
des mêmes types de tools
pour appeler
les changements que nous
faisons dans la manière déclarative,
la même manière que nous faisons
les migrations dans SQL, par exemple.
Mais ce n'est pas techniquement limité
aux URLs, c'est un problème
de migration qui est de la valeur.
Je l'ai eu
avec Redis, par exemple.
Si tu updates la forme
d'un objectif JSON que tu as
dans Redis, maintenant tu dois
garder les versions qui sont
updates, et tu dois faire des migrations
data, pas nécessairement schema,
parce qu'il n'y a pas de schema
dans des valeurs de valeur.
Mais tu dois faire des migrations data
sur quoi tu as reçu pour
faire surement que tu peux convertir
quelque chose que ta application peut comprendre.
Donc, oui, c'est probablement la prochaine
aventure que je vais aller
dans l'open source, parce que
j'ai vraiment envie d'attacher tout ce problème
dans la manière déclarative,
type safe.
J'ai toujours été frustré
avec le state de migrations
dans les databases.
Et je pense
que, parce que
le temps, le temps est un problème,
parce que ta application s'évolue
dans le temps, donc tu dois avoir un snapshot
de tous les states de la schema
que tu as évoqué dans le temps,
pour pouvoir brancher...
C'est un peu comme un get, si tu penses.
Tu dois pouvoir brancher
à un point donné,
où tu as été donné un URL
qui matche ce point en temps
du schema, et pouvoir regrasser
tes procès par regrasser
ou squashing, ou autre chose.
Je ne sais pas si le get
métaphore
fonctionne très bien, mais ça me semble un peu comme ça.
Tu as tous les snapshots de changements,
et tu dois pouvoir marcher sur ce grapho
quand tu fais ces migrations.
Tu aurais probablement
un data log,
un database de time-trival,
il y a beaucoup de choses
dans le...
le sort de la place de la closure,
spécifiquement,
où...
ou un ditomique est le database, mais le database
est le language query,
où ils font des databases immutable,
et tu peux faire des queries et tout.
C'est assez cool.
Donc, la forme de l'API
est souvent de la state de query,
le nom de la variable
que tu veux mettre dans le URL,
et puis un parser.
Il y a beaucoup de combinations de parser
que tu peux avoir, et puis
il y a des states de query
où tu peux créer des objets
de plusieurs parsers.
Pourquoi n'est-ce pas
une de ces libraries de validation
de la chelonne de la chelonne de la chelonne
où c'est
le même API relativement,
où tu peux utiliser le state de query
et puis un parlement de validation
de la chelonne de la chelonne
pour faire tout le terrain.
J'ai eu cette question beaucoup de fois.
La réponse est que ces libraries de validation
sont des parts de validation.
Quand tu peux aller
d'un string à un objet,
mais si la transformation
de ce string à un objet
n'est pas réversable
avec juste un 2 string, pour exemple,
tu dois impliquer
la fonction de la fonction de la chelonne
pour pouvoir
aller en bas et en bas
entre les deux représentations
dans le URL et dans la mémorie.
Il y a des projets
qui font ça.
Ils réversent l'ingénierie
des API de zode
pour essayer de comprendre
ce que l'on fait
et construire la chiralisation
que ça donne.
Il fonctionne jusqu'à la introduction de la transformation.
Et puis tu dois
réverser la transformation
pour pouvoir s'y réaliser.
Donc, Nux
vous donne ces objets,
les passers, on les appelle,
mais c'est un passer et un serialiser.
La meilleure parole pour ça
est surday. Si tu as fait un rust,
il y a ce beau crêpe en rust,
qui se trouve en surday,
qui se termine
et transforme
tout le format dans un type de data.
C'est vraiment cool.
Donc, ces passers
en Nux sont un peu comme ça. Ils font
un serialisation et un passage,
qui sont équivalents avec eux et
tu peux construire ta propre et faire sure que
tu aies une belle représentation
dans le URL pour un type de data.
Donc, par exemple, si tu penses
sur un objectif de date,
il y a beaucoup de moyens pour le représenter
dans le URL. Tu peux avoir un timestamp, qui est juste
le nombre de milliseconds
et depuis Unix
Époque, tu peux avoir
une représentation ISO 8601
de juste le date,
ou le date et le temps,
ou le temps zone, ou le temps zone. Il y a beaucoup de moyens.
Je ne peux pas attendre pour l'appli de temps pour l'API
de construire les choses qui
ont un plus de match
entre la représentation de serialisation
et le type de data
qui est associé avec ça.
Mais oui, tu peux voir qu'il n'y a pas
un moyen, je pense,
de représenter
des types de data
comme un string.
Et surtout si tu veux faire ça
dans un concise, parce que le URL est limité
dans le size, on veut faire sure que tu représentes
le nombre de temps le plus petit possible, donc que tu peux
avoir assez de states dans le URL
sans atteindre des limites.
Et avoir un moyen
de retourner en 4.
C'est pourquoi nous avons ces objets
dans Unix.
Tu as mentionné
l'API principal, c'est vrai,
c'est comment ça a commencé.
Et généralement, je suggère
que les gens découvrent le URL
parce que c'est le plus facile,
c'est le direct 1-1 replacement avec les states.
Tu as juste le quai que tu veux
et tu peux faire ça dans un
URL, et le type de data, si tu veux,
tu peux juste travailler avec un string, ça marche bien.
En default, tout est un string.
C'est un pass-through.
Mais quand tu commences à scale-ver
ta application, tu réalises
que tu dois linker les deux components,
tu dois les mettre sur le server, tu dois faire
plus, tu dois laisser
les components, la boudre de les components,
et integrer
un peu plus tard avec le reste de ta application.
Et c'est là que les states
s'appliquent, parce que ça prend
cet objectif
comme un argument qui décrit
vos paroles de la saison.
Le quai dans l'objectif est le nom
dans le URL,
et le valeur est le pass-through
pour dire à Nux
comment faire ce qu'est le type de data
associé avec ça, plus les options
et tout ça.
Donc, ces objectifs de description,
tu peux réutiliser tout le temps
dans les states de la application,
pour accéder à la state et
d'émerger la site client.
Mais aussi dans les loaders, pour pouvoir
le loader sur le server,
en l'application de la page,
dans le XJS, ou dans les loaders,
dans le React Brouter, Remix et tout.
Et tu peux aussi
générer des links type-safe
avec ce qu'on appelle le serializer.
Donc, tu as un moyen dual
d'aller
du string URL, du string query
pour des types de data types,
en bas et en bas, et un hook
qui vous donne, essentiellement,
un Reacty
de manière.
C'est assez cool. Je vais mentionner
l'autre schema
transformer
qui fait serialisation et
désserialisation, et je vois que tu as
une page de communauté
que quelqu'un a
construit quelque chose.
Ethan Niza a fait un pull request
pour ajouter ça.
Merci, Ethan.
C'est assez cool,
car l'effect peut faire
cette transformation duale, donc c'est
possible de connecter
avec Nox, en utilisant
l'application passée.
C'est assez cool.
C'est génial. C'est comme si tu as
construit quelque chose d'incroyable
et d'accord.
Je pense que la question
n'est pas
pas assez loin de avoir un tournevis
ou d'avoir un tournevis
dans le reste de la vie.
Je pense que quelqu'un m'a demandé
sur Twitter. Je l'ai pensé
pour 10 secondes et j'ai vu
l'ex-KCD, des standards
dans mes yeux, non, je ne veux pas
construire un routier. Il y a
assez de bons routiers, pour maintenant
au moins.
Honnêtement, entre le Next.js,
un routier 10 stack, un remix, un routier React,
un Waku,
tout les grands, comme ça.
Si tu ne peux pas construire
l'application, tu n'as pas besoin d'un autre routier,
tu as besoin d'un autre travail.
Il y a
beaucoup de moyens de construire des belles applications
avec les choses que nous avons.
Astro est aussi un de mes
n'aimants.
Je voudrais en fait supporter Astro, mais
le fait que les îles se font
est un peu difficile de supporter
sans toutes les dépendances. Tu dois avoir
ce concept de nano stores pour
pouvoir avoir ces îles communiquer ensemble.
Mais tu peux techniquement
utiliser le React SPA
adapter, le Nox adapter.
Dans Astro,
si chaque île a une,
parce que le URL est centralisé
à travers toute l'application, ils seront
tous connectés à ça et
parler à l'autre. Tu ne vas pas
avoir
les optimistiques updates
à travers les îles.
Tu aurais un peu de taré entre
deux îles, mais
ça va travailler.
Il va s'enfoncer.
Mais c'est
quelque chose.
Donc, ne pas construire un routier, non,
ce n'est pas dans mes plans.
Je crois que les gens m'ont plus
plus marre que moi pour faire
ce travail, et je le voudrais.
Je vais
appuyer aux gens qui construisent les routiers
pour essayer de construire les adapters pour Nox
au-dessus de la surface.
L'idée de construire un layer
pour le réact ecosystem, plutôt que de
essayer de fragmenter par ajouter plus de
options et plus de fatigue
sur le coeur de tous les minds.
Donc, maintenant, c'est plus unifié
plutôt que de fragment.
Donc, pas de routiers pour moi.
C'est un objectif noble, mais
de faire des délais avec le
routier, aussi contrôler le URL
doit avoir
pu avoir des hurdles pour toi en développant
Nox. Qu'est-ce qui a été un des
challenges de la intégration avec tous ces
différents frameworks routiers ?
Oui, c'est une bonne question.
Historiquement,
Nox n'était pas
supportant toutes ces frameworks.
Il a commencé juste avec Next. Historiquement
le nom Nox vient
de Next Use Query State,
qui était, c'est pour Next,
le nom de
Use Query State.
Et pour deux ans, j'ai laissé comme ça, et
ce n'était pas très bien utilisé.
Et c'était bien.
Mais quand j'ai commencé
de rebuilder mes websites
avec le routier app,
pour essayer RSC
et toutes ces choses, évidemment, ça a commencé
de ne pas travailler, parce que c'est un routier
complètement différent, comme les deux routiers,
pages et app.
Et ils n'ont pas travaillé le même.
Et donc, j'avais
cette question, en fait, de la communauté.
Les gens voulaient supporter le routier app
avec la prochaine Use Query State, par exemple.
Et
il y avait une question
à un moment,
comment nous pouvons faire ça ?
Nous pouvons fork le projet.
On a une Use Query State hook par chose,
et on a changé le nom
de la hook.
Mais ça n'a pas vraiment
fait de la scale, parce que
Next vous donne
cette façon progressive de
avoir les deux routiers dans la même application.
Vous pouvez construire pages et
les changer d'un à l'autre.
Et j'ai voulu avoir
cette abstraction,
où vous pouvez avoir des compagnies
complètement agnostiques de où il se débrouille
et pouvoir débrouiller en pages
ou app.
Et j'ai réussi à obtenir ça
en fonction de nos autres, parce que
j'ai utilisé beaucoup de hacks.
C'était quand le routier app
était développé
et stabilisé.
Il y avait un peu de moments chaotiques
en 2023, quand ça s'est passé.
Mais, ça a été possible
et on a
un bon moment pour ce hook
qui a pu pouvoir s'arriver
et c'est pourquoi ça a commencé
à devenir populaire, parce que les gens ont
vu que ils pouvaient utiliser
cette pattern, entre les deux routiers.
Il était aussi targeté le routier app,
qui était l'une des premières manières
d'abstracter les états de la url.
Vous avez eu les blocs basiques,
avec des parables de search et
les deux manières de surdétention
avec le routier ou avec
l'application de la history de la windows.
Mais Nux vous a donné
cette déclaretif d'abstraction
sur le top de ça, et il a aussi travaillé
avec le routier des pages.
C'est juste après un moment que nous réalise
qu'on pourrait aller plus loin
qu'au prochain.
Il n'y a rien techniquement spécifique
pour le concept de la whole. Le hook est un hook réact.
Les applications qu'il utilise
au sein de l'outil, quand vous consumez, ne sont pas spécifiques
pour le prochain.
Et le concept de la whole
pourrait être scale à d'autres frameworks.
Le plus important que j'ai besoin
pour les clients, c'était
l'application single-page.
Le Google Way de réact, le réact créateur
de l'app, et tout ça.
Vous l'avez sur le top de la vitre,
et vous avez un bundle qui vit
sur un site statique.
Je voulais être capable de stiller
l'accès à ceci, car
les sites statiques ne sont pas
vraiment carenés par le code de la query.
Vous pouvez stiller un URL
sur un site statique,
et vous pourrez toujours
avoir des comportements différents
sur le state URL que vous avez passée.
Nous voulions faire ça.
C'est là que l'adapteur de l'idée
a été créé pour soutenir
d'autres choses. Le réact
était la prochaine chose obviante.
Tana
a réélevé un réact.
C'est intéressant. Nous avons quelqu'un qui
fait le state URL
dans un route.
C'est là où les choses se sont formées
d'une validation du concept.
Je
ai une app TAN Stack Router,
et le moyen de l'intergrer
avec les routes et le search
semble être de la mienne.
Je vais probablement
aller au NUCS, car
maintenant, je fais
tout le parsing, et je fais
beaucoup d'assumptions.
Et avoir le type safe serait
très bien.
C'est laité
dans ce portion.
Le API TAN Stack
pour ça, je vais
mettre des armes de foot,
pour que ça soit cumbersome
pour que je le type,
mais la abstraction
que vous avez,
ou une fonction que je passe
quelque chose, semble super simple
et
difficile à faire.
Oui, vous pouvez
voir avant de changer
tout, car c'est
expérimental, la soutien pour TAN Stack Router.
Parce que
dans l'expérience
et dans l'idéologie
des deux
ways que le NUCS et TAN Stack Router
opèrent.
Par exemple,
TAN Stack Router fait
un passage global
et un layer de serialisation.
Vous pouvez définir
cela à la route de votre route.
Vous pouvez spécifier les deux fonctions
de serialisation et de déshérilisation.
Mais le NUCS fait ça
par la suite de potentiellement différentes
de façon différente.
Donc, si vous avez
une façon non
TAN Stack, de faire des choses dans le NUCS,
il ne sera pas très bien interagé
avec ça, au moins pour les parts
type safe.
Les armes, si elles sont utilisées
en isolation, elles vont travailler parfaitement bien.
Mais le point d'utiliser TAN Stack Router
est la route type safe.
Vous devez déclarer
les définitions de la version de TAN Stack
dans le NUCS,
pour que vous puissiez
faire des choses dans votre component.
C'est la autre partie.
TAN Stack Router définit
la définition de votre version de TAN Stack
dans la route de la route.
Mais le NUCS fait
plus...
Il n'est pas très opinionné de où il fait
mais la interface que vous avez avec ça
est les armes qui vivent dans les components.
Pas nécessairement
dans la page, mais
même les components ne sont pas
vraiment partie de
où la validation est définie. C'est
une partie de la
route définie, je pense.
Et vous avez
ce décollage
dans le NUCS, où vous
définissez les parables de la suite, où vous les consommez,
alors que c'est plus centralisé
dans la route de la TAN Stack.
Des approches différentes pour le même problème.
Les deux sont complètement valides.
Vous pouvez les mélanger
si vous êtes attentionnés à la bonne place.
Mais
c'est deux différents moyens
de faire la même chose.
Mais si vous avez
une application
base sur la route de la TAN Stack,
je vous recommande
de utiliser les API de la TAN Stack
et de voir comment les utiliser
pour les mieux.
D'ailleurs, de tenter de
cramer le NUCS dans ce truc.
La route de la TAN Stack
est plus ici pour
permettre aux autres components
de la communauté, de l'NPM ou des memos
de la TAN Stack
et de pouvoir être utilisé
et peut-être lié à
si elles sont simples.
Dans ces cas, c'est plus
unifiant, encore plus
la laiture dans la communauté
que de tenter de
fragmenter les choses.
Vous avez parlé un peu
de la
la integration de la TAN Stack
ou de la integration de la TAN Stack.
Mais peut-être que vous pouvez
aller plus en détail
pour que vous
avez un module
de la TAN Stack
et que vous pouvez créer des loaders.
Il y a
plusieurs outils que les gens peuvent utiliser.
Vous pouvez parler de comment
les integrations avec des components de la TAN Stack.
Oui, bien sûr.
Le réacte sur le service import
fait le sens si vous utilisez le app
ou tout ce qui peut être loadé
dans le app.
Vous pouvez aussi, si vous
vous avez un
framework agnostic library
de l'utiliser,
de l'utiliser client directif.
Le importe de NUCS a utilisé le client
au-dessus car il expulse les hoaxes
et tout autre, mais
le hook est
porté dans le service NUCS
qui n'a pas l'utiliser client directif.
C'est la seule différence, mais d'autre côté c'est la même code.
Vous pouvez utiliser tout
sur le service NUCS
apart de ce cash
que nous allons parler de plus tard.
Ce qui est le suivi.
Avec le réacte sur les components
particulièrement la implementation de la TAN Stack
c'est quelque chose que je dois vérifier
dans le réacte sur les components
et la implementation en réacte.
Mais il y a
ce concept de
fonction cash qui existe
dans le réacte.
Ce qui vous permet
de...
C'est un peu basé sur un
label async.
C'est basé sur le storage async
qui est un API qui vous permet
de passer le contexte quand vous avez une réquest
qui vient de passer le contexte
à travers différentes pages,
même par des changements de promesse.
Ça permet
de passer les components async
dans les components réactes
pour avoir accès
à le même contexte.
Mais de pouvoir résolver plus tard.
Il n'est pas perdu.
Et aussi, c'est scoped
avec
les fonctions lambda
pour que si vous avez deux calls
pour un bundle,
vous n'avez pas un variable global
qui se pollue et change
par chaque call.
Avec les cellules,
on peut réutiliser un processus
et avoir plusieurs réquests.
Ceci
permet d'isolier
ces contextes.
Vous pouvez voir un peu
comme un contexte replacement
pour le réacte
sur le site server,
ce qui n'existe pas.
Ce n'est pas un contexte
pour le contexte de la propagation
de données.
C'est ce que nous avons fait.
Nous avons passé
un référence au objectif
dans le cache.
Nous avons pu
avoir accès à ces programmes.
Dans les components de la page,
nous avons un programme
de promesse.
Si vous avez eu le temps,
vous pouvez passer les résultats
et installer
ce résultat.
Après que vous avez fait
ceci, vous pouvez régler
l'application.
Et avoir tous les réactes
dans le fruit,
il y a un enfant,
évidemment, de cette page.
Mais il n'a pas de
être dans les mêmes
components de page.tsx
pour avoir accès à ces références.
Il peut avoir un référence
qui ne fonctionne pas, mais le problème
avec ça, c'est
que ça ne s'arrête pas de la localité
de la comportement.
Vous vous permettez de faire des choses
de la même manière que les
données en bas.
Vous n'avez pas de la manière
de faire des choses de la même manière que le
de l'autre. Vous avez un moyen
de faire des choses de la même manière que le cache.
Vous pouvez pas faire
cette localité de la comportement
qui fait que les choses s'arrêtent
par le Via Jam
Deshalb 2z
d'un refused
Program sur les aspects virtual
Oganda.
et d'weder la excellente, la dynamique Living,
ou encore la possibilité d'entraimer des jeux en spectacle,
la surface d'air et médic soprattutto.
Lacale cros – ça se passe comme anti-ędzy par le bureau,
c'est ça en Якób, chuisin.
Et ce n'est pas de терриo qui se reprend assez pour aller dans les bâtonsdamnaux,
Oui, c'est sûr. C'est un cas de état qui est un peu bizarre, que je souhaite avoir un API que j'aime, car le contexte est comme un tool intergral sur le front-end.
Le fait que tu ne peux pas utiliser ça dans le component de service est comme un brinbreur, et c'est comme, je dois retourner à tout ce proche de drill,
et ça me fait comme l'overhead de la réaction de réaction qui sort d'une noix quand tu n'as pas d'accès à ça.
Oui, je pense que ça vient de la facture que tout peut être assingue, et donc que les choses peuvent arriver en ordre.
Donc, contexte, juste comme un moyen de passer des données immutables, de la très haute-down, peut travailler.
Mais si tu commences à avoir un contexte, un contexte qui est defini par exemple à l'aile de lait,
parce que les laitiers ne sont pas rérendus, ils peuvent avoir des données stale.
Et donc, les choses rendent des temps différents, et ça devient, je pense, difficile de débarguer ce que tu as des données.
Est-ce que c'est frais ? Est-ce que c'est stale ?
Il y a d'autres manières, je pense, pour définir cela.
Le cache API, en fait, fonctionne pour des données immutables très bien.
Et je n'ai pas encore essayé de utiliser le cache, pour exposer des choses comme ça, le cache de données.
Mais je pense que, en faisant un contexte sur le service, ça serait cool,
mais il pourrait potentiellement exposer à un peu de faute-gains.
Donc, c'est probablement pourquoi ils n'ont pas exposé cela, juste encore,
qu'ils pourraient essayer de trouver des cas de laite et de trouver un bon API pour ça.
En parlant de Next et de l'utilisation du contexte,
tu as juste révé la version 2.5 de Nukes, qui est cool.
Oui, comme on l'a récris, c'est génial.
Un des features qui me semble vraiment cool, c'est la isolation des clés,
où tu ne peux que réprimer les éléments qui sont effectués par les parts du paramètre courier,
ce qui est assez chiant.
Mais tu as un note, que ça ne fonctionne pas pour Next.js,
parce qu'ils utilisent un contexte single pour tenir les rs.
Je suis curieux de voir comment ça fonctionne en général.
C'est vraiment cool, mais ça ressemble à des optimisations intéressantes
qui ont besoin d'être arrivées à la haute pour Next.
Oui, l'idée originale était d'un router 10 stack,
parce qu'ils ont des sites de usage, de usage, je ne sais pas exactement,
mais tu peux passer un selecteur là-bas et rétablir un subset de ce que ce hook a accès à.
Donc, ce hook ne sera que réparé, quand ce truc que tu as rétracté change,
c'est comme de la subscription de la fingrame, que Tana m'a appelée,
et c'est vraiment cool.
Je pense que dans leur implementation,
dans les stores single, ils ont des places pour les choses.
En ma case, la Noxie était un peu différente,
parce qu'il n'y a pas de store single,
mais je pense qu'il y a un jour réérité pour faire ça.
Mais tout le hook mérite son state par le partage de l'urale,
et c'est dépendant de comment le framework nous donne accès
à un objectif de la surface de l'urale, si c'est un.
Donc, la plupart des frameworks,
React Router et Next, ou Remix React Router et Next,
ont donné un hook qui se rend le temps que le changement de l'urale,
ce qui est bien, parce que tu as l'air d'avoir un contenu fresh,
mais tu as peut-être réparé des choses qui ne pourraient pas être nécessaires.
Donc, j'ai expérimé ceci avec le component de l'application single-page,
parce qu'il n'y a pas de framework, pas de route,
donc je n'étais pas libre de faire ce que je voulais.
Et par accès à un peu de ce genre de objectif,
je peux détecter qui,
qui, value pair, a changé quand tu fais un update,
et seulement appeler les hooks qui ont changé,
en ce cas, parce que quand tu fais un set state avec la même référence,
ça ne t'a pas appellé un render.
Donc, par la preuve de la référence dans la set state update,
dans la set state update,
ça garantit que tu ne rendras pas les parts.
Donc, c'est fait comme ça,
et ça n'est pas...
C'est quelque chose de limité pour les updates chelons,
quelque chose qu'on doit parler de, en Nux.
C'est le fait que Nux updates la site client URL,
et puis tu dois appeler la site client en ce cas,
pour atteindre le service.
En cas de React SPA, il n'y a pas de service.
Donc, c'est la raison de pourquoi Nux fait ça,
par défaut, sur le client.
C'est comme si tu as la garantie d'avoir un client.
Tu n'as pas la garantie de avoir un service,
un processus SSR, de l'écouter à des changements.
Donc, si ta application est servie,
sur le CDN, par exemple,
il n'y a pas besoin d'avoir un refreshment sur la page,
quand tu fais un changement,
parce que tu perds le reste de ton state,
ce qui est en mémoire.
Mais tu peux faire le site client,
parification Encite suck d'usage,
de microbes dans tout l' Oriole.
Donc, tu peux copier et partager avec d'autres.
Mais il s'agit seulement de sitio unplug pilgrots.
Le ves blouchis au Nux n'a pas de sitées,
et à partir du diagnostic,
il convinira à contrôler
les légyers ouvrés par notre client,
ou on tombe par les liens deaque par lebil
chui,
par le service ou un client yourself,
qu'est-ce qu'on dit,
des props dans la page Router ou la réagir des components en app Router.
Cool, donc en rafin, nous aimons toujours poser une question de face futures.
Qu'est-ce qui se passe pour Next ?
Est-ce que vous avez des plans cool pour V3 ?
Vous allez sur Framework Agnostic ?
Peut-on commencer à utiliser ça dans notre app HTML ?
Framework Agnostic, je ne pense pas que ça.
Vu Router a déjà fait quelque chose de similaire.
Quelqu'un a faulé Nux pour faire travailler avec Svelte,
ce qui je ne pense pas que c'est nécessaire, car je pense que Svelte aussi a déjà un concept similaire.
Je n'ai pas vu ce que ça fait, mais non, je suis heureux.
Je baisse les applications React.
Je voudrais essayer les autres frameworks, c'est sûr.
Mais je suis un guy de React.
Pour maintenant, je vais me satisfaire avec juste soutenir le système React.
C'est beaucoup de travail.
Qu'est-ce qui se passe pour V3 ?
Il y a des changements que je veux ajouter.
Un de ces changements est de soutenir des arrays de clés native.
Donc le facteur que vous pouvez répéter un clé dans l'urale,
donc foo equals bar et foo equals baz.
Ça vous donne un array de foo et baz.
Et donc nous avons un bar à l'arrêt de l'arrêt de l'arrêt,
qui compose avec d'autres barres,
donc vous pouvez avoir des arrays dans l'urale.
En un de la façon de la paix,
vous avez les valeurs séparées avec un caractère séparateur,
qui est un comma par défaut.
C'est vraiment compact, mais il y a des frameworks de basse-bord
et des applications de legacy.
Ils utilisent ce répétition du bouton.
Donc je veux pouvoir soutenir ça.
Il y a aussi d'autres patterns différentes,
comme le library QS qui encode la structure dans les clés,
plutôt que les valeurs,
qui font que c'est un peu difficile de travailler avec Nox,
parce que Nox suppose que vous savez,
avant de temps, statiquement,
ce que les clés sont.
Donc,
ce sont des challenges intéressantes que je veux regarder.
Un autre serait la validation.
Donc ajouter une histoire propre pour intégrer les libraries de validation,
comme le type Zard,
ou le type Arc,
par la interface standard.
Pour valider à la fois de la runtime,
les choses que le type script ne vous dit pas,
comme le nombre de range,
le fait que la date est avant ou après un certain époque,
des choses comme ça,
des choses que vous ne pouvez pas représenter
juste dans le système type.
Et donc il y a un peu de validation
faite par les passagers,
pour faire sure que le type de data qu'on obtient est valide,
comme le date est le correct,
des choses comme ça.
Le nombre n'est pas nul, des choses comme ça.
Mais vous pourrez,
peut-être, dans certains cas,
ajouter plus de validation à ce point.
Donc vous pouvez le faire
par ajouter après le fait.
Mais si il était construit,
ça permettrait de faire
ce pass de validation des passagers des décérialisés.
C'est une partie du article,
l'article iceberg,
où j'explique que vous avez besoin
de ces pièces dans cet ordre
pour avoir quelque chose de safe.
Et vous pourrez aussi avoir le validation
sur le right quand vous vous updatesz la valeur.
Donc vous devez générer un state invalidée
dans l'urale.
Et donc ça implique
que la fonction de date de state
peut maintenant s'y faire.
Et donc nous devons avoir
un mécanisme d'airurale correct
et d'une histoire autour de ça,
qui va impliquer,
je pense, un changement de break
sur ce que l'on a réveillé
par cette fonction de date de state.
Donc ça va probablement
être le changement principal
dans le V3.
Oui, ça semble être un
hard API à contendre avec.
Les paramètres de query
sont parfois écrits.
Ça me trippe dans mon code
quand le système type me dit
ceci.
Donc je ne peux pas imaginer
comment
tenter de garder votre appui
current à l'appli
et aussi de soutenir
ce qui va
définitivement requiser
un changement de break.
Peut-être.
Peut-être.
Je pense que ce sera un changement type.
C'est pour sûr.
Mais je pense que ça peut
probablement se faire
sans un changement de break.
C'est plus de
le nightmare
en termes de type
tout le monde.
Internation.
Mais de point de vue de user
il sera toujours passé
comme un détail.
Il sera peut-être
une option de passée
comme un détail.
Mais internation,
le aspect de la carte de la carte
est en fait très simple.
C'est le type de la carte
pour faire sure que tout est
type correctement.
C'est un peu plus difficile.
Je pense que
tous les libraries
tous les types de la carte
sont un peu comme ça.
C'est facile de faire
quelque chose à la carte de la carte.
Mais ça vous fait 10 fois
le temps que j'ai pris
pour vous écrire la carte de la carte
pour écrire la saison propre.
Pour écrire
ce que vous pouvez faire
avec l'API.
Et
c'est ce classique
que mes types sont comme ça.
Sorry, les applications
ne sont pas les mêmes.
Mais j'aime ça.
Je viens de C++.
Évidemment, j'aime les types.
J'étais born in types.
Donc c'est bien.
Les types sont pas
comme les types
que j'aime.
Mais c'est une autre discussion.
On va sauver ça pour un autre épisode.
Ça nous rapporte pour nos questions.
Francois, merci pour votre question
et pour nous parler de Nux.
C'est comme une abstraction
qui peut vous aller assez loin
dans l'app.
Merci pour votre question.
Merci pour avoir
moi, un grand fan
de l'application pour le bien.
Merci.
Merci pour votre question.
Episode suivant:
Les infos glanées
devtools.fm:DeveloperTools,OpenSource,SoftwareDevelopment
A podcast about developer tools and the people who make them. Join us as we embark on a journey to explore modern developer tooling and interview the people who make it possible. We love talking to the creators front-end frameworks (React, Solid, Svelte, Vue, Angular, etc), JavaScript and TypeScript runtimes (Node, Deno, Bun), Languages (Unison, Elixor, Rust, Zig), web tech (WASM, Web Containers, WebGPU, WebGL), database providers (Turso, Planetscale, Supabase, EdgeDB), and platforms (SST, AWS, Vercel, Netlify, Fly.io).
Tags