Storybook with Norbert and Dom
Durée: 69m19s
Date de sortie: 04/06/2021
Storybook is an open source tool for building UI components in isolation. Tune in as we talk t Dominic Nguyen and Norbert de Langen about the story behind storybook, what it's like to run an open-source based company, the importance of developing UI in isolation, and more
- Storybook
- jimp
- Storybook Addon React Docgen
- Meteor
- Pheonix LiveView
- Meteor's DDP
- Blitz.js
- Redwood.js
- Atmosphere
- Component story format
- Storybook Args
- Story Docs
- Chromatic Visual Testing
Tooltips
Andrew
Justin
Dom
Norbert
Une chose que Norbert m'a appris un peu il y a quelques années, c'était que si tu construis des trucs dans un livre de historie,
dans ce modèle de compétition et de historie, tu as un bon peu de choses pour te freiner.
Bonjour, bienvenue au DevTools FM Podcast. C'est un podcast sur les tools de développement et les gens qui le font.
Je suis Andrew et c'est mon co-host Justin.
Salut tout le monde.
Aujourd'hui, nous allons parler de deux gens qui sont à l'involation de l'histoire,
un tool de développement qui a radicalement changé le façon dont les compétences sont développées.
Vous voulez vous introduire?
Oui, merci Andrew.
Bonjour, je m'appelle Dominic, je suis le co-founder de Chromatic,
la compagnie de l'histoire et je travaille sur le design de l'histoire.
Bonjour, je m'appelle Norbert Thelungen, je vis à la Nélande et je suis un des maintiennes de l'histoire.
Donc, où ont-ils tous commencé votre travail?
Comment avez-vous travaillé sur un projet d'opensource comme ça?
Oui, pour moi, j'ai commencé à travailler sur l'opensource un peu d'années,
peut-être 7 ans, je commence avec Meteor, le premier framework de l'appareil de l'on.
C'est toujours en train de se faire, la population est tapée,
mais pendant ce temps-là, nous pensions sur le module de reload, les uis optimistes,
les trucs que vous avez vu dans l'écosystème maintenant.
Et puis, nous avons démontré à Apollo GraphQL,
où nous avons construit le GraphQL client libraires
et qui a été la partie de la lancer de ce produit.
Et vraiment, ce qui nous a emprunté est
juste la liberté et le chaos
qui est en opensource.
Et dans ce chaos, c'est une idée de la idée de Mineral Rich Nebula
que les stars ont été bornées.
Le livre de l'histoire est une des idées cool.
C'est quelque chose que nous aimons et nous avons brûlé nos minds
quand nous l'avons déjà détenu sur la construction de la compétition et de l'isolation.
Oui, pour moi, c'est un peu plus long, je pense.
Peut-être, oui, juste plus long, je pense.
J'ai commencé en pensant sur l'opensource,
plus et plus, depuis que j'ai commencé à utiliser,
en utilisant NPM, Waybeck1.
Et j'ai toujours eu cette idée de « je veux contribuer, je veux contribuer ».
Mais c'est vraiment difficile de comprendre exactement
et quel projet, il y a beaucoup de choses
et beaucoup de choses qui se sont faits.
Le moyen de la histoire est de l'utiliser.
J'ai construit un peu d'ad-on pour cela,
en regardant le test.
J'ai appris que l'opensource était non-maintainé
et que je voulais contribuer.
Donc, 1 plus 1 pour moi est 2.
Je pose à la question de « Hey, si vous regardez pour un nouveau maintainateur,
je vais faire ça ».
J'espère vraiment que les autres personnes vont aussi faire ça.
Il se passe le temps que, oui, ils en ont regardé pour un nouveau maintainateur.
Le prochain matin, je me suis réveillé par un email
qui était la nouvelle administrateur
de l'organisation de Storybook.
J'ai commencé à organiser
comme beaucoup de personnes que je pouvais
pour pouvoir faire Storybook, et je pense
que la restée est de la histoire.
C'est vraiment drôle comment les histoires d'opensource
ont commencé de cette façon.
J'étais vraiment intéressé par ce projet
et ça n'a plus été maintainé
et j'ai besoin d'un autre pour contribuer.
Maintenant, j'ai été en train de faire le tour de l'opensource.
C'est une histoire très similaire pour moi.
Je suis travaillé sur un truc pour le travail,
c'était l'opensource, et les maintainateurs ne l'ont pas répondu.
J'ai vraiment voulu faire des changements.
Je me disais,
« Juste, laisse-moi, s'il vous plait,
je vais le faire, je vais le faire ».
C'est une des parts de la top, aussi.
J'ai une histoire similaire.
J'ai commencé mon premier projet d'opensource
qui a commencé à maintenir, c'était Jimp.
Et il y a vraiment un appel ouvert
pour les gens de maintenir.
J'étais en train de dire, je pense que je peux le faire,
mais je n'ai pas le temps de se dépasser
et de faire des problèmes.
Ça m'a causé.
Quand tu sais comment les saussages ont été faites,
c'est vraiment difficile de se faire en volunteer à ce moment.
Et souvent, pour moi,
c'est pas possible de savoir
comment les saussages ont été faites,
de se faire en profiter à la fin,
mais je vois pourquoi c'est difficile
pour les gens de faire ce temps
dans leurs vies, et surtout quand l'opensource
peut prendre plus de temps
pour votre temps libre et le temps de travail.
Oui, j'ai été expérimenté de ça.
Je l'ai récentement fait,
et je travaille maintenant à la start-up.
Et l'énergie que j'ai de la retraite
pour faire des choses d'opensource
est vraiment différente
que quand je travaillais dans un endroit
où je pouvais dire, « Oh, je vais juste travailler sur l'opensource Friday ».
Non de ça anymore.
On utilise des tools, Andrew.
On utilise auto,
on utilise le React-type, le script, et le DocGen.
Donc, merci d'avoir eu une grande chute.
Oui, c'est vraiment mon premier package.
Je regarde les downloads,
et je suis comme, « Oh, mon Dieu ! »
Je suis vraiment
en train de faire ce plug-in
dans un GitHub.
Je me suis dit que ça serait bien,
et ensuite j'ai intégré le livre.
Quand vous vous en avez mentionné,
je n'oublie pas que vous avez été en train de travailler sur le milieu.
Et quand vous vous en dites ça,
je me suis excité.
C'est comme un petit thread qui me connecte
et beaucoup de développeurs que je sais,
c'est que nous avons tous commencé
comme le milieu était notre premier amour
dans l'opensource front-end.
Quand vous pensez à ça,
beaucoup de les gens qui ont travaillé sur le milieu
ont fait des trucs cool dans l'écosystème.
Le livre de histoire est un de ces trucs.
Vous m'avez rencontré Tom,
Michael a travaillé sur le milieu,
Evan Yu, du View,
Apollo,
des trucs cool dans le système de JavaScript.
Je n'ai pas vu que
Evan Yu était de la milieu,
c'est fou.
Un long temps ago.
Il était l'un des premiers gens
qui travaillait avec moi.
C'était vraiment un peu avant de sa temps.
Les choses que j'ai vraiment
décédées, j'ai fait le standard
de ce que la webtech
serait comme pour les prochaines années.
Je vais investir un peu plus de temps personnel
pour apprendre l'éxur et le phoenix.
Et jouer avec LiveView
et beaucoup de stuff web
et je pense toujours
de retourner en milieu.
Et en pensant sur le
protocole de data
ou le protocole de data payload,
ddp ou quelque chose.
Bonne temps.
C'est trop nostalgique.
Ce sont des idées qui sont bienvenues
à l'époque.
fortes avec Blitz.js
et Redwood.js.
JavaScript
est quelque chose que les gens
travaillent sur maintenant.
C'est une des choses
que...
à l'époque,
il n'était pas bien vrai
parce qu'il y avait un peu
d'invention de nouveaux tools
sur les stacks.
Vous avez un layer de vue,
vous avez un layer de data
vous avez un end de base
qui est une abstraction sur la main de MongoDB
ou l'intégration sur la main de MongoDB
vous avez les trucs isométriques
je ne suis pas sûr
de ce que ça veut dire anymore, je l'ai entendu
et même un manager de package
tout ça était bundlé
dans un outil
et le challenge de l'étude
dans un outil et de la façon dont l'écosystème
était, il y avait encore
beaucoup d'exploration
qui n'était pas fait
et comme ça, cette exploration
ne pourrait que être faite
par les gens qui se battent contre la main
expérimentant avec les routiers
expérimentant avec les layers de vue
expérimentant avec les autres parts
et en innovant plus vite
que l'un des groupes de gens
qui peut même faire
je n'ai pas oublié de faire ça
mon premier package que j'ai évoqué
était à l'atmosphère
je l'ai designé
c'est cool
j'ai construit ça
avec les gens qui travaillent ici
en fait, mes co-founders
oh wow, petit monde
pourquoi pas nous prendre un moment
pour parler un peu
plus d'histoire
surtout pour les gens qui pourraient être
les qui n'ont pas utilisé
ou ne sont pas si familles avec ça
qu'est-ce que vous voulez dire
et ce qu'est le but de la histoire
oui, bien sûr
la histoire est un outil
différent de les gens
parce que c'est assez flexible
mais dans son corps
il y a un workbench
pour travailler sur des compétences
en isolant la whole
et le keyword pour la histoire
pour moi, en tout cas, comme un développeur
et un ingénieur, est vraiment isolation
et isoler un component d'autre
nous savons que la compétition de la writer
est bonne et les compétences isolées
sont de la même manière
qu'elles devraient être self-contained
nous avons même écrit des compétences
parfois avec des States
et parfois sans les States
comme nous essayons d'isoler
l'expérience de la behaviour
et d'extracter des compétences séparées
mais beaucoup de développeurs
ne sont vraiment en train de travailler
pour en faire en fait
en égager tous ces compétences séparément
je vois beaucoup d'ingénieurs
juste en égager un page de la page
et en égager un peu de la base
ils commencent avec le header
ils créent le logo
et le menu
et ils travaillent de la main
et ils créent un tout petit page de la main
la histoire vous donne un moyen de racheter
de cela qui vous donne un moyen
de partir de la basse à la top
vous commencez avec vos petits compétences
et vous l'envente
et à un moment vous êtes en train de composer
vos compétences et vous vous en endvez
sur la scène
que votre producteur ou des designers
vous voulez créer
vous pouvez vraiment faire cela
dans votre app
parce que vous n'avez pas le droit
de faire cela, vous n'avez pas un workbench
donc si vous avez un workbench
comme un storybook
vous pouvez créer beaucoup plus de compétences
en parallèle
vous pouvez en véritablement
avoir plus de développeurs
et travailler sur la même page
c'est un concept de storybook
vous avez un workbench
vous pouvez cataloguer
ce n'est pas un keyword pour moi
quand je pense et parle de storybook
cela crée un catalogue de toutes vos compétences
un problème que j'ai fait
tout le temps quand je consultais
c'est que
pouvez-vous me donner
toutes les possible études que ce component peut être
quelles sont toutes les variants
qui existent
de cette manière que je sais
ce que je peux créer
ou ce que j'ai perdu
parce que j'ai un grand
document de design
mais je ne sais pas ce qui existe
pour moi ce sont les histoires
je peux voir un component et
toutes les variants possible
aussi, vous pouvez créer un nouveau variant
si je dois créer un nouveau variant
je sais maintenant où le remplacer
et pour moi cela donne beaucoup de structure
pour ma code et ça me rend mieux mes compétences
parce que si je pense
sur mes compétences en isolation
et sur comment la service API
devrait être et la interface
devrait être, je commence
à utiliser ça dans le endroit correct
alors que si vous vous faites un page
sur le haut et le bas
c'est très souvent
et ça me rend très facile
je vais juste passer
tout le temps
et vous ne pensez pas vraiment
sur ce dont le component est
et comment je crée la compétition correcte
et quand vous avez vos compétences
et que l'égeage est map
sur les histoires, ça ne fait pas
beaucoup de squinting pour voir
que ces sont vos cas de test pour votre
environnement test, et le livre de histoire
vous donne l'obligation
de faire des choses comme les tests visuels
par rapport à les screenshots
à l'un de l'autre pour les bugs UI
ça fait des choses comme
intergrer avec le library de test
pour vous aider à tester les mêmes
compétences que vous avez déjà construite
et ainsi et encore
dans le système de test
une chose que Norbert m'a
appris un peu il y a un an
c'était que si vous
construisez des choses dans le livre de histoire
et que vous avez un component
et un modèle de histoire
vous avez un bunch de choses pour freiner
des choses comme test, des choses comme documentation
des choses comme accessibilité, comme heuristics
et puis
sur les adhons que les gens créent
dans le système de l'éco
des integrations avec Figma, des integrations
avec Adobe XD, des integrations avec
MSW
qui est comme un library de service de mock
et ainsi et encore
et donc toutes ces choses sont
juste de la box si vous vous vous dites les histoires
j'aime
l'appeler comme histoire est primitive
quand vous avez votre histoire est primitive
cela moque tous ces cas de utilisation
si vous avez vos cas de utilisation
de component en structure
c'est très facile de faire
c'est un test case, c'est un test visuel
c'est un piece de documentation
oui, les histoires sont primitive
c'est un cool truc parce que un couple
d'années, Michael, Shilman et Tom Coleman
et Norbert, qui sont innovés
sur les histoires
avec le format de histoire
qui est comme ce format de module ES6
qui permet aux histoires de être super portables
donc il n'y a pas de lock-in avec le livre de histoire
quand vous utilisez, vous pouvez utiliser
ces histoires avec un autre outil
que vous utilisez dans votre stack de texte
ce n'est pas juste purement
hypothotique, parce que nous
en fait, nous voyons les tools
utilisant le format de histoire
ce n'est pas juste un livre de histoire
que vous utilisez, les autres tools
ont utilisé ça aussi
oui, nous avons un test-runner
qui a été construit dans ce format
c'est vraiment cool de voir les gens
pour changer l'application de la histoire
pour que ce soit un truc primitive
parce que avant, avec les histoires de
l'ad, c'était
très différent et plus overhead
comme, le nouveau ES6 API est
presque
c'est clair, quand vous l'avez fait
c'est comme, oh, vous pouvez juste
exporter une fonction normal
et maintenant vous avez un component
que vous pouvez utiliser d'autre
ça me donne un bon bruit
parce que je pense que la prochaine extension
de la format de histoire de histoire est Arcs
vous avez probablement déjà utilisé
Andrew, Dom, je sais que vous êtes familiar avec ça
je ne sais pas, mais Justin, c'est
plus fort pour les arguments
et
vous n'avez presque pas besoin
d'avoir des histoires
parce que pour la plupart
une histoire est un component
combiné avec des données
et donc
ce format de histoire de component
vous permet d'avoir un Arcs
c'est que vous avez vraiment
de définir vos données
et si vous définissez vos données de cette façon
le livre de histoire peut aussi
rendre un contrôle pour vos données
qui est incroyable
parce que pas tous sont un développeur
et
les designers particulièrement
et puis je parle de vous, Dom
nous avons tous aimé
vous avez le contrôle de vos données de la histoire de histoire
et cela vous permet d'experimenter
et vous pouvez trouver
des cas de très très étranges
comme vous avez des histoires de histoire
pour explorer vos cas de histoire
mais il y a toujours plus de cas de histoire
comme ce qui se passe si votre bouton
contient un
long texte
ou si votre liste de items
contient zéro items
ces choses vous pouvez maintenant explorer
interactuellement dans le livre de histoire
quelque chose que nous sommes vraiment
chiant sur explorer dans le futur
c'est que, ou alors que vous jouez
avec ces contrôles
et vous pouvez cliquer en sauve
et cela génère une nouvelle histoire pour vous
pour les listeners qui ne savent pas
quel est le contrôle
et comment est-ce que cela a été expéré dans le livre de histoire
oui, le contrôle est
un nob dynamique
généré
qui vous permet de
ajuster les données
dans votre component
par cliquer sur un UI
et cela signifie que vous n'avez pas
de vous faire couper
pour évaluer des choses
comme des longs strings
ou des différentes formes de données
je pense que le plus important pour Args
c'est que
si vous vous regardez un point de vue
et que ce component est
un fonction de procès
et de state à la fin du jour
et avec Args
maintenant on a un
concept de première classe
qui mérite
ce que les compagnons sont en dessous
c'est logique
qui prend le data et les arguments
et puis qui a fait un UI
et quand nous pouvons
le mettre à l'usage
si ils sont des développeurs
des designers, des propriétaires
dans le livre de histoire
cela signifie que nous ne savons pas
ce qui est utile
mais ce qui est intéressant
c'est que plus de gens sont involved
dans le UI, plus de gens sont involved
en entendant
comment un interface de user est rendu
et cela peut seulement
cacher des bonnes choses pour moi
si je m'utilise comme exemple
entendant comment un component est rendu
cela m'a aidé à le faire
c'est l'une des clés de la histoire
qui mérite
les développeurs et les designers
et cela fait beaucoup plus de collaboration
où est-ce que l'histoire de l'histoire
a été créée avec ces deux gens
dans un bon moyen ?
je sais que Docs est un
grand win
beaucoup de gens me demandent
peut-être que je peux utiliser la histoire
comme documentation
mais je ne sais pas si c'est un bon
mais je comprends
que si quelqu'un d'autre
a des bonnes à utiliser
je dois
regarder leur documentation
les histoires sont
documentation
mais quand vous êtes très proches
de la même base de code
vous regardez les histoires dans une manière différente
quand vous êtes plus loin
par exemple
en utilisant un
l'histoire d'un component
si ils se sont directement exposés
à toutes leurs histoires
ce n'est pas super
utile mais vous êtes plus intéressés
à une explication de
ce qui est le concept
des components, ce qui est un variant
et vous utilisez cela dans les situations
il y a d'autres variants
que vous voulez utiliser dans ces cas
ce qui est un documentation
page
c'est pourquoi le documentation
apporte MDX
et vous pouvez utiliser vos histoires
dans vos files MDX
en fait vous pouvez également
spécifier vos histoires
dans MDX
le documentation ne vous intéresse pas
si vous référez les histoires
ou vous pouvez aussi
extracter les histoires directement
l'idée est que vous avez
une seule source de vérité
qui est votre histoire
et vous pouvez les présenter
comme des components isolés
ou vous pouvez les composer
dans votre page d'un document
c'était l'un des points de sale
pour le documentation
avant l'adon d'un document
on a eu un site Wordpress
qui a embêté les PNGs
de spécs
pas même des compagnons
c'est les PNGs de la spécs
et on a eu de l'épargner
mais les adon d'un document
ont vraiment unifié cette expérience
et maintenant nous avons une seule source de vérité
où si vous voulez savoir
quel est le support du système de design
vous allez au PNG
et on a essayé de cader
les deux designers et les développeurs
et de construire un bon outil pour les deux targets
quand vous pensez à
votre histoire de component
sont les documents de base
pour le UI
et vraiment les capacités de PNG
d'extrême de ça
pour pouvoir auto-generer
des tables de props
pour des frameworks différents
pour ajouter des pros et des marques
et les injecter à l'intérieur
de vos components en plus
c'est quelque chose que j'ai vu
à Andrew quand vous étiez en train
vous étiez à l'extrême de ces patterns
parce que vous pouvez construire vos propres components
qui sont intégrés dans les documents de PNGs
et cela vous permet
d'avoir la flexibilité
d'un plus fuller CMS
et d'avoir la automation
d'un outil qui comprend
ce que vos propres components sont
qui comprend comment ils travaillent
et leurs arguments et leur data
et le shape de leurs APIs
et qui peut automater
beaucoup de travail pour les documents
l'une des plus importants pour Docs
c'est qu'il est automatique
je me sens comme si vous visiez un outil pour Docs
ou des Docs UI
et ils sont à la date
si l'un des choses est à la date
il commence à manger en fait
qu'est-ce qu'il y a à la date
est-ce qu'il y a une chose à la date
est-ce que cet outil peut même travailler ?
donc on a remis l'anxiety
comme un système de design
ou un component de l'analyse
ou même un developer UI
on a remis l'anxiety de toujours
de garder ces Docs à la date
parce que nous nous faisons pour vous
quelque chose que beaucoup de gens me disent
c'est que leur histoire de storytelling
c'est beaucoup de travail
je pense que c'est un jeu de net
pour les gens
je pense que tout le monde ici
s'est dit pour sûr
mais certains ne sont pas
ils pensent que leur histoire de storytelling
est beaucoup de travail
mais j'ai hâte
que ceux-ci
soient peut-être toujours en train de
faire des choses en bas
et puis en plus de réactifs
mais si vous pensez à ça
en en maintenant un site
comme vous l'avez dit avec beaucoup de PNG
c'est beaucoup de travail
en écrire tous ces unités
avec des snapshots attaînés
c'est beaucoup de travail
et je pense que le storytelling
en fait éliminé beaucoup de travail
et plus de travail que le tic
et pour moi
ça ne fait pas vraiment plus de travail
pour être en écrire des histoires
en fait je trouve que beaucoup de travail
je ne pouvais pas faire
si ce n'était pas pour le storytelling
et c'est peut-être un peu bizarre
mais si vous pensez
sur ce que certains compagnons ont besoin
en termes de données
c'est difficile de
obtenir ces données d'un réel app
un exemple facile serait
un time out, un component qui
montre quand quelque chose a été timé
ou comment vous pourrez
atteindre ce state dans votre réel app
comme vous allez en éliminer
une réversation proche
et vous en avez un temps out
comme vous avez maintenant
attendu 60 secondes pour votre component
pour moi personnellement
le truc que je travaille pour chromatique
pour en faire un exemple
j'ai besoin d'un compte qui est logé
à l'aide d'un web et de l'application
et avec notre propre username et le password
et c'est difficile
d'avoir un user comme ça
donc dans le storytelling je n'ai pas besoin
de faire ça tout à l'heure
tout que je dois faire c'est de donner les compagnons avec la bonne date
c'est beaucoup plus facile
plus ou moins de travail pour en faire
ceci
c'est ce que nous nous sommes en train de voir
dans l'écosystème
le storytelling a maintenant
10 000 stars
ce que c'est
c'est une testament à la communauté de développeurs
réaliser que construire des choses en isolation
construire des UIs en isolation
c'est le pattern
de ne pas faire des UIs
pour faire un bon et satisfaire
bon expérience
parce que dans le passé
comment j'aurais fait
ce que Norbert m'a dit
j'aurais dû aller dans mon app
faire des fixations pour ces données
mettre sur un server de staging
faire des contoursions et des gymnastiques
pour aller dans le même état
et le même user
ça fait beaucoup de travail
juste de la mettre en place
seulement pour travailler sur une partie du UI
vraiment
une compagnie
comme une menu de dropdown
et pense sur combien de fois
il faut faire ça de nouveau pour des états de blocage
pour des états d'erreur
pour tout type de complexité
juste de la main
même des sites de marketing
bénéficient de ça
parce que les données sont primitives
les réquires
l'alternative n'est pas appuyée
et je pense que c'est ce que nos membres de la communauté
réalisent
et pourquoi le storytelling est devenu si populaire
c'est comme que l'alternative s'occupe
donc on va faire quelque chose
qui ne le fait pas
c'est assez intéressant
comment les livres de storytelling
permettent de faire des pratiques
de développement
donc réacte et d'autres frameworks
j'ai pu mettre cette notion
de séparer cette idée
de quoi une présentation
d'un aspect particulier de l'UI
devrait être versus ce que l'objectif de l'UI
est
dans cet état
donc
souvent dans mon propre expérience
ça devient
comme une fonction d'enforciation
si vous faites le développement de la construction
où vous êtes construit, vos compagnons
en première et la première
souvent vous êtes construit les choses que vous avez besoin
pour pouvoir cette pièce de UI
et puis vous avez un composant de rap
ou un contexte ou une autre intégration
qui vient plus tard
pour donner le logic d'enregistrement
pour pouvoir les enregistrer
parce que vous êtes enregistrant le UI
je pense que le format nouveau
ça peut être plus
et le RG
ça ressemble vraiment
et surtout, j'ai pensé
que vous devez faire
des tests de UI
parce que souvent, vous êtes
dans des états de visual qui ne sont pas en place
c'est comme, oh oui, ça a un long texte
mais peut-être
si vous avez un moyen
de le faire
comme, oh oui, on va juste donner
ce composant, ces différents états de data
c'est plus facile de tester
c'est assez intéressant
donc, en parlant de test
Chromatic est une compagnie
qui aide
à maintenir un
histoire
c'est vraiment au point de
cette notion de test visuel
donc Dom, pourquoi ne vous le dis pas?
Qu'est-ce que l'inspiration
pour créer ça?
et comment ça va?
Chromatic est une compagnie
qui aide à maintenir
des services de cloud
qui font des choses
comme publish, version, access control
visual testing, review UI
et ça a aussi un huit
d'autres problèmes que les utilisateurs de storybook
habituellement rencontrent, le coeur qui est
autour de
feedback et testing
donc, en parlant de test
visual testing est cette idée
c'est pas nouveau, en tout cas
on n'a pas inventé l'idée de comparer
les shots à l'un à l'autre et de détecter les
changements mais ce que nous
avons décidé c'est que, hey, dans
ce nouveau monde, en nous enantant
les composants et les
développement de développement, les practices, les UIs
aussi en regardant le design
et les industries de design
enantant les UIs aussi
comme, ils ont des composants comme un constructe
classique, on réalise que
hey, ce que vous voulez
de visual test
c'est des composants
dans le passé, vous étiez visual testing pages
et ce que ça meant c'était
que ça allait bien pour les sites marketing
c'était bien pour les sites de contenu
parce que vous pouvez prendre un snapchat de
un page et comparer
à la screen à la screen mais
ça ne fonctionne pas en component-driven UIs
parce que si vous faites
un changement pour un composant
donc deux, peut-être 50 pages
peut-être 100 pages
et
vous êtes en train de vous faire
oui, je vous dis que ça ne fonctionne pas
pour les sites marketing
parce que votre contenu constamment change
et donc vous ne faites pas
visualement les composants
vous faites visualement les composants
qui, par design,
change et vous approvez
beaucoup de choses
ça fait beaucoup de bruit
et donc, ce que visual test
sur le niveau component, c'est que vous entendez
et le point de vue de la fin
ce qui a changé dans la hierarchy
et voir
comment les changements dans la hierarchy
peuvent être casqués à d'autres laires
quand, par exemple, un bouton change
comment ça effectue la formule de crédit
comment ça effectue un composant
comment ça effectue tous les boutons sur le site
donc c'est là que
cette test visuel de components est venu
et pourquoi nous sommes sois
sois excités d'offrir ça au monde
le autre truc que Chromatic fait
est que ça s'enlève
un challenge que j'ai fait tout le temps
sur un travail que j'ai dû faire
qui s'appelle UI review
et c'est le point
après que je implemente un UI
je peux couper mon chemin de la box
et j'ai dû le partager
avec un bunch d'autres gens
vous le partez avec votre design
vous le partez avec votre producteur
vous le partez avec votre spécialiste d'accessibilité
et tout le monde s'en va
tout le monde a une opinion
sur UI, ça se passe
parce que c'est tellement visual
et c'est tellement proche de ce que le user
s'en va voir
et quand vous le partez avec tout le monde
comment avez-vous des messages
peut-être que votre CEO vous a envoyé
une message de slack
peut-être que votre producteur a ajouté
un ticket pour vous pour faire quelque chose
des gens vous envoyent des emails
des messages de GitHub
vous êtes emploiés comme un developer
de toutes les différentes directions
avec des messages et des demandes
et pas de mention
certains de ces messages
n'est même pas sur la version
de l'individu que vous avez
c'est comme un design
final final 3
de votre implementation
ce qui t'a aidé aussi c'est
que vous avez un espace de travail
pour tous ces gens et vous donner des messages
pour l'implementation
parce que pas seulement
tout le monde est en place
les choses que les gens
parlent de
sont constantement à date
car Chromatic vous écrivent
votre histoire et vous gardez ça à date
c'est comme un point de référence universal
pour un nouveau feature
ou un nouveau piece de UI
que vous proposez
c'est comme un autre step naturel
pour les designers et les travailleurs
quand vous êtes en train de faire quelque chose
comme sketch ou figma
vous pouvez commenter
sur les parts spécifiques de l'UI
le fait que ça arrive
à la procédure de code
ça fait que le transition est semblable
exactement
quand vous pensez à la plus populaire des tools de design
et d'autres tools de la main-d'offres
comme zapp on apprecie
vraiment, c'est quoi que leur proposition de valeur
c'est pas des pixels de painting
les pixels de painting sont shared entre tous
vraiment ce qu'ils parlent
et ce qu'ils vendent
c'est le aspect de collaboration
et de la consensue
ce qui va être construit
et quand vous pensez à un engineer UI
comment vous faites ça ?
pourquoi n'avons-nous pas ces tools ?
comment nous avons de consensue
sur l'UI qui va être
réellement élevé
nous sommes plus près de l'utilisateur
que d'autres disciplines
d'un producteur ou un designer
ou d'exécutif
nous sommes les plus près des gens
mais pourquoi n'avons-nous pas ce suite de tools
qui nous permettent de collaborer
et de nous aider à tester et de maintenir
nos UI
c'est ce que Chromatic a essayé de se faire
c'est génial
nous avons eu une conversation
dans notre dernier épisode
où cette notion de
de mettre les designers plus près
de l'utilisateur est une très powerful chose
parce que la chose inverse
où vous portez les développeurs
à des tools de design est génial
mais c'est aussi très loin de la procédure
de la procédure
de la production
mon collègue Hart
dit tout le temps
le software n'est jamais fait
il y a toujours ce processus
d'internation
et donc il s'agissait d'une erreur
de penser sur la collaboration
de designer et de développeurs
de des pièces discrètes
de je designais
ma tool de design et j'ai la main
et j'ai la main
et je la construis
dans le livre de la histoire
il y a un autre loop
qui est le reste de la loop
et j'ai implementé ce qui se passe
après que je le portais
et puis ce qui se passe
quand quelqu'un d'autre décide de venir
et de maintenir ça
ou de changer ou de tweaking
donc, quand le design est fait
c'est juste la première partie
et comme un loop nommé
on a une spéciale word
pour le software qui est fait
c'est déproqué
oui
bien
oui
dans le cycle de vie
il y a une opportunité business
pour l'éloignage
on a développé quelque chose
maintenant on doit l'interroger
comment on peut faire de la histoire
connectée à la histoire
c'est intéressant
je veux parler de quelque chose
avant de nous remettre la prochaine question
il y a beaucoup de conversations
sur comment c'est difficile
d'entraîner l'open source
il y a beaucoup de companies qui ont
l'a étudié
et j'aime penser à Mongo
c'est une histoire intéressante
on va dire qu'on va l'opensource
c'est un peu différent
car c'est un producte
qu'ils vendent
c'est un tout sorti d'open source business
avec des support tact sur le top
mais c'est difficile
on peut parler un peu
comment la création
de la company qui est vraiment founded
sur l'open source
qui s'adresse sur le top
comment ça a été travaillé
ce que vous voyez est le futur
d'opensource
c'est un
difficile question
c'est une question législative
sur Twitter
et des discussions en public
il y a beaucoup de différentes
de manière
mais non d'un seul point
c'est d'avoir un
c'est un peu de lumière
on pense
notre modèle business est très straight forward
on construit un projet d'opensource
pour le scratch round itch
on construit des tools commerciales
au-delà de cet projet
qui ne sont pas vraiment d'open source
car ils ont des compagnons cloud
ils ont des contrôles accessibles
on doit se protéger et s'assurer
on construit des tools cloud
et on utilise cet argent pour
construire plus de choses qui scratchent
sur l'opensource
et le cycle de vie
continue et continue
et on fait le U.I.
de mieux faire le développement
par continuer
ce cycle de vie
mais je ne sais pas
comment tout le monde
est plané pour faire ça
on est heureux car on a la confiance
de nos clients
ils nous payent de la monnaie
pour construire des trucs
qui nous donnent beaucoup de valeur
et ils continuent à payer de la monnaie
car ils ont la confiance
et on vous aime
et ça nous aide
à construire plus de choses d'opensource
je pense que l'histoire de l'opensource
est un peu unique
dans le monde d'opensource
considérant que Chromadix
ne vienne pas l'histoire
de tout le monde
Chromadix
existe par Chroma
pendant quelques années
comme un an
Chroma ne vienne pas
l'identité de l'histoire
ne vienne pas
la repository
c'est vraiment un projet
d'opensource
où tout le monde est bienvenu
et peut contribuer et foyer leurs opinions
nous avons une communauté
qui a plus de gens
que Chroma
et nous nous faisons surement
qu'il reste de cette façon
ce que nous essayons de faire
est un projet d'opensource
qui est bienvenu
et bien sûr
Dham, moi et Michael
nous contribuons beaucoup
à la base de la story
et nous avons notre agenda
mais nous aussi nous voulons aussi
les agendas de la communauté
et de la code base
beaucoup de choses que nous faisons
dans la story de la code base
ne font pas 100% du sens business
comme nous avons
des tools d'opensource
qui compétent avec Chromadix
mais c'est
comme Dhamonix dit
certaines choses ne sont pas vraiment dans l'opensource
parce que les choses que vous avez mentionnées
si vous voulez faire et faire tout
sur votre machine local
oui, vous pouvez faire des shots de la histoire
et vous pouvez créer une image
de chaque histoire
nous avons des tools d'opensource
qui vous ont juste apporté
nous avons même construit des tools
nous avons, oui, nous avons
et nous nous maintenons
ce qui est plus de travail que de les construire
nous nous voici comme conduits
pour les bonnes idées et les autres
de la communauté
et souvent ces bonnes idées sont quelque chose
que nous n'avons jamais pensé
et ce qui nous permet de promouvoir
les meilleures choses en plus
c'est ce qui nous permet de la faire
ça nous permet de la faire
et de la continuer
je pense que c'est l'une des choses
qui nous permet de la faire
de la faire
j'ai souvent dit à beaucoup de gens
que c'est l'un des plus prévenus
des communautés d'opensource
c'est que j'ai messé Norbert
il m'a dit, hop en zoom
j'ai envie de vous rencontrer
et je vais vous donner un accesse
pour les prévenus
je vous ai vu beaucoup de temps
quelqu'un a mis un prévenu
ils se sont dit, on va le faire
pour un week ou deux
et le travail
il ne peut pas vraiment le prendre
et je vais voir un de ces cours
pour les contributors
pour les méter
et les méter
c'est super cool de voir
je pense que c'est totalement understandable
que les gens
vont contribuer à un projet d'opensource
mais
ils peuvent être bâtés
parce que de temps
ou d'intérêt
pour le 100% qui est requiert
d'un projet d'opensource large
Storybook t'aiment
être enversé pour un
degré de saignement
et il doit
avoir un bon rythme
pour un degré de saignement
il doit avoir un log change
un log de migration
etc etc
il y a beaucoup de travail administratif
qui va en avoir un bon
et d'un degré d'opensource
de repository
mais pas tous les gens peuvent le prendre
pour le 100%
je pense que ça fait juste le sens
pour les méter
pour les 90% de les PR
et les prendre pour le 100%
et les avoir un degré
ça fait le sens pour moi
j'ai vraiment aimé le processus
et je pense que c'est très bien
et les gens sont super appréciés
de vous prendre le 99%
pour le 100%
il y a un autre
élément qui parle de l'effort de
l'effort de la main
d'opensource
et je suis capable de voir
les 3 de ces projets
où le travail est
le bon travail est de la construction
c'est comme le tip de l'aspect
c'est un petit
petit hôtel que vous voyez
à la distance, par le haut de l'eau
mais sous ce iceberg
le water est le reste
d'un travail de maintenance
de la management de la production
de la production de choses avec le reste
d'un système de l'éco
d'un 5, du YAK 17
du VU3
qui ont des changements de API
qui affectent la façon
d'utiliser le storybook
et le travail de maintenance
c'est la stuff d'intégration
qui permet à nos utilisateurs
d'avoir la plus de migration
possible, en tant que tool
qu'ils utilisent
si ils décident de l'obgrater
du VU2 et du VU3
c'est facile
si ils décident de changer du VU3
de réacte, de svelte
ou de God forbid
c'est facile
on aime le VU, on va supporter le IV
de la prochaine couple de mois
mais
ce que je dis
est qu'on peut faire des travail d'intégration
donc il ne faut pas
utiliser le storybook, de construire des éléments
et avoir une bonne durée
et ne t'as pas de honte
à l'inviter
vous devez faire ça avec les autres applications
mais quand vous intégrer et ajouter
vous pouvez être sûrs que c'est possible
de l'adverter avec le reste de l'éco-système
ça explique
pourquoi le storybook doit être
un espace d'accueil pour les nouveaux contributaires et les contributaires en général,
parce qu'on a vraiment besoin, on a désormais besoin de ces personnes pour contribuer.
Je ne comprends pas l'angle ou l'envie de moi-même,
mais le historique est toujours en train de le contenir,
et on a toujours besoin de tout le travail et d'être upgrade, comme Don m'a dit.
Et ça fait beaucoup de compasse mental que je ne peux personnellement pas être dans mon propre espace.
Donc, c'est ce que nous avons besoin de contribuer pour nous aider à comprendre ces outils.
2 ou 3 ans plus tard, je n'ai pas compris le type-script.
Je suis un grand fan, mais je n'ai pas fait ça.
Je pense que le décès du texte du historique de la communauté de la réussite
a été notre migration de type-script qui a originé de nous soutenir Anglard.
Anglard, aussi, a été construit en type-script et le texte du historique n'était pas réact.
Mais ça a évolué en temps, et les développeurs anglards et les historiques de la société
ont été élevé et maintenant tout le type-script de la société de la histoire est type-script.
Et si c'est à moi, bientôt, le base de la code de chromatique sera aussi.
Oui, c'est drôle.
Quels autres expériences avez-vous tous eu
en évaluant les contributions et les management de la communauté de la communauté?
Le projet de historique est un projet grand expérience
et a fait beaucoup de techniques différentes.
Et comme c'est le cas avec tous les projets d'open source,
vous êtes un petit équipe qui travaille et qui essaie de faire ce truc.
Comment vous le faites?
Qu'est-ce que l'expérience sur le jour en jour?
Qu'est-ce que l'un des plus grands défis?
Je suis juste inquiétant sur l'insight.
C'est comme si nous étions construitre le ship et aussi, on est en train de faire saison.
Donc, en quelque sorte,
nous essayons de garder un float
par faire ce base-séparation de maintenance
en supportant plus de nouveaux outils.
On ne peut pas faire ça sans la communauté
et les autres personnes travaillant ensemble.
Quand vous avez des communautés plus grandes,
tous ces gens doivent s'occuper de l'autre
ou de communiquer.
Nous avons, à l'intérieur des maintenances,
et surtout les maintenances de corps,
les plus contextes sur toutes les différentes parties.
Alors, plutôt que de construire chaque partie différente,
nous essayons de connecter les gens qui ont des challenges similaires
à l'un de l'autre et d'enlever de l'autre
pour construire sur le dos de la histoire.
Ce que nous faisons sur les maintenances de corps,
c'est vraiment ce que nous faisons,
de définir les API Core,
de définir les choses dans le format de la histoire,
que les autres personnes peuvent construire.
En quelque sorte,
lesquels nous construisons, c'est un travail de plaisir.
Nous faisons des trucs d'impact.
Nous avons pu voir ça
comme des parents de sucre
sur le côté des fields,
en disant, oui, cool,
tu as mis un goal, c'est génial.
Qu'est-ce que tu as fait, Noverte ?
Je me souviens, au début,
je parlais de chaque issue qui est venu
et de l'MPR,
mais à un moment,
ça a été impossible pour moi
de passer tout à l'heure.
J'ai vraiment hâte d'avoir
une période de l'année ou encore une fois
où je n'ai pas pu beaucoup de choses.
C'est ce que je parle de Dom,
et de Zool et de Tom,
comme, hey,
peut-je peut-être migrer un peu
vers le côté chromatique
où les choses sont un peu plus slow.
Et nous avons eu un projet de long terme.
Et recently, j'ai été migréant
et en arrivant à la histoire du côté des choses.
C'est comme ça que j'ai été.
Et pour moi,
je n'ai encore pas ouvert de Kalanli,
qui est comme,
quelqu'un d'autre peut s'exprimer
à la rencontre de Zool avec moi,
qui je pose vraiment.
Qu'un d'autre peut s'exprimer avec moi
pour parler de la histoire,
et si la question est la question de ce que je peux faire pour m'aider,
ou, hey,
peut-être que tu aies l'aider à comprendre ce bâtiment
pour que je puisse contribuer.
J'aime faire ces rencontres.
Ce sont souvent les highlights de mon jour.
Nous avons Michael,
qui est juste amusant
et qui a été en train de faire le projet.
Il a été en train de penser à tout le monde,
à tout le PR,
à tout le bâtiment que nous faisons,
de la histoire.
Oui, je ne veux pas être dans ses choux.
Il fait un travail incroyable.
Mais il veut être dans ses choux.
Il veut avoir ces choux
et il les fait très bien.
Et puis, on a un peu d'autres membres
qui font de la team
dans les spaces de la team.
On a un jouin sur la documentation,
donc de la maintenir.
C'est un travail de temps en temps,
qui est l'arrivée du API de Storybooks.
C'est énorme.
Et les capacités sont énormes.
Et on est toujours ajoutés
de nouveaux features.
On a Varun,
sur DX,
qui est un expérience de développeur.
Il a un peu de articulation
et de soutien pour comprendre
pourquoi Storybook fait les choses
et comment utiliser Storybook
pour faire des choses
comme test,
des choses comme développement de component,
des choses comme documentation
et un bunch d'autres maintiennes
qui nous enlèvent.
Oui,
ce sont des noms de nombre.
Il y a beaucoup d'autres.
Je ne les n'ai pas appelés.
Je les connais par nom,
mais on n'a pas suffisamment de temps
pour vraiment
aller tout à l'heure.
C'est génial.
Oui,
merci pour l'expect.
Donc,
Dom,
vous avez mentionné
voir des choses vraiment cool.
Qu'est-ce que vous avez vu
sortir de la communauté?
Il y a beaucoup.
Ok,
Norbert, vous allez au premier.
Je me souviens.
J'ai un bon exemple.
Ce n'est pas un nouveau add-on.
Il a existé pour beaucoup de temps.
Mais je pense que c'est un grand exemple
de l'extendant Storybook
sur ses paramètres originaux,
ce qui est le
accessibilité.
J'aime vraiment
le concept de ça.
Je veux prendre cet add-on
plus fort.
En fait,
quand je suis terminé
avec un peu de travail chromatique
que je suis maintenant en train de travailler,
je plane de
prendre un très attention
à ce look-up.
Et probablement extracter
certaines choses que ça fait
dans le corps.
Le corps de Storybook.
Je pense que
le principal
feature de cet add-on
devrait être
extracter des données
de la histoire.
Et ça devrait vraiment être
l'responsabilité de les stories
pour montrer ce data.
Je pense que
les plus grands
add-on créateurs doivent faire
les plus grands.
Ça veut dire que l'extendant
Storybook est capable
de faire de l'exemple.
Et ça aussi
fait de l'expérience
chromatique.
Nous en planons
de prendre ce
extractant
et de graphiser
en chromatique
dans le temps.
Donc,
ne pas juste
dévouer
ce que le corps
a fait
avant et après.
Mais aussi,
vous pouvez voir
que je suis-je
en train de
ou
en diminuant
mon score de accessibilité
en temps.
Un peu de choses
qui se sont
dans l'ecosystème
le premier.
Au-dessus de ma tête
est
Yann
un entreprise
qui a juste élevé
une intégration
Ça vous permet
d'extraire
les stories de Storybook
et de les mettre directement
dans les test.
Vous n'avez pas de...
C'est juste
ergonomiquement
un tool super puissant.
Vous vous réutilisez les stories
une fois.
Vous les réusez et les teste.
Vous n'avez pas de pensée.
Varun
a des really cool add-ons
que il fait
des choses
qui sont toutes
sur le débat de CSS
et le layout de CSS.
Comme un developer UI
c'est
tout
tout que je fais
c'est ce que je me sens.
Je suis comme
Hey,
c'est...
C'est...
C'est...
Line-up rioters?
C'est ce que j'ai fait?
Donc il est construit
des tools
qui vous permettent
de visualiser l'aliment
dans la Storybook.
Ça vous permet
de mesurer les distances
entre
les titans et les titans
des distances
entre les éléments dons.
Ce sont les deux
intéressants
qui ont venu recentement.
Et puis
il y a un liste animaux
de
des add-ons
qui
sont de
des integrations
avec la Storybook.
Et puis,
bien sûr,
les add-ons
qui sont de
Je pense que
le UX pin
a un très cool
que l'on a vu
récemment
qui vous permet
de prendre les histoires
que vous avez évoquées
dans la Storybook
et d'importer
les histoires
dans votre
tool de design
pour que vous puissiez
juste
designer
avec
des données
de la histoire
comme un designer.
C'est un catnip pour moi
parce que je ne dois pas
maintenir
une libraire
et un
Storybook anymore
qui est
source de la vérité.
C'est le code.
Je peux utiliser
la libraire de la histoire
de la histoire
ou
d'un UI
dans la Storybook
dans
mon tool de design.
Donc,
oui.
Oui,
ce type de clôt
est comme
pour moi
le grand
développement de la
U.I.
de
des
développeurs
et des tools
sont
parfaitement
syncs.
C'est un problème
de l'accomplissement
et il y a des
dozens
et des dozens
de compagnies
qui en tentent.
Oui,
Andrew,
tu as pris un stab
à ça aussi,
oui?
Tu as un sketch
à l'aute
tu as un couple
de
cool projects.
Mon
attente
m'a emmené
à peut-être
90,
95%
mais tu veux vraiment
comme
ça 100%
spécialement
c'est une grande
compagnie
donc
on a
éventuellement
évoqué
de l'auteur
et notre design
a commencé
à utiliser
Figma.
ce qui
a terminé
en
est
qu'ils
maintiennent
une
libraire
qui est
très robuste
et je ne pense pas
que je pourrais
générer
de code
pour faire
aussi robuste
que ça.
Peut-être qu'on peut
dans le futur
qui sait
mais ce
travail
a
C'est un truc qui me fait et qui me semble comme une célèbre chromatique
quand tu te rends un livre de la histoire en chaleur.
C'est aussi...
C'est vraiment cool.
Oui, c'est incroyable.
En fait, on a fait des bugs dans notre célèbre,
grâce à ça.
Et on a une régression visuelle sur notre célèbre,
parce que je ne pense pas que beaucoup de gens
peuvent dire ça.
C'est wild et j'adore ça.
Il y a des trucs vraiment cool sur le système d'éco-écos
et aussi des trucs inspirationsaux.
Ce n'est pas un livre de histoire, mais ce n'est pas un livre de histoire.
C'est un livre de histoire qui a été réalisé par les libraries de l'UiComponent.
Vous pouvez construire les libraries de l'UiComponent.
Je pense que dans le livre,
vous avez fait des livres de component de dev-tools.
Vous pouvez construire des choses qui semblent comme des tools de dev-tools,
mais dans le livre de histoire,
ou dans l'interface web.
Il y a des gens qui font des trucs 3D,
donc l'interface de la histoire avec 3JS,
c'est la libraries de 3D.
Et de toute façon,
vous avez des mappings textuelles,
des réflexions et des espaces 3D.
Et quand vous pensez à ça,
l'os de dev-tools est parfait pour les trucs 3D,
parce que vous voulez pouvoir reproduire un state de UiComponent
par des propres de données.
Le livre de histoire est un tool qui vous aide
à pouvoir le faire vite.
Qu'est-ce que ça ressemble à l'accessoire de Z-Axis
quand il est positionné comme ça,
et que l'objet est extrême comme ça.
Le concept de la développement de component de dev-tools
est excitant pour voir cela transler
à tous ces domaines différents.
Je n'ai jamais aimé le terminaire, c'est fou.
Encore une fois, nous avons le cas d'un couple de co-workers
qui ont fait une expérience native de la histoire.
Ça rendait nativement
un peu plus de temps pour les phones en histoire.
Vous pouvez développer vos components mobiles
en même manière que vos components web.
C'est une partie d'un web assez excitante.
Nous avons l'impression d'innovation des patterns
et des workflows de dev-tools.
C'est probablement pourquoi vous avez le podcast dev-tools.fm.
Nous avons le temps pour voir le futur un peu.
Oui, pour sûr.
Cool.
On va nous faire des trucs pour la semaine.
Andrew, vous voulez faire des trucs?
Mon premier truc de la semaine est Loopback.
C'est un tool de développement.
Ce qui vous permet de combiner
plusieurs sources d'audio
de différentes appes à une source
et d'utiliser ça comme un input pour une autre.
Ça peut être très confusant.
Les exemples qu'ils ont sur leur site
sont les musicies de Apple
et les microphones
pour créer un nouveau device virtual.
Ce que vous pouvez faire avec ce device virtual
est d'utiliser ça comme en Zoom.
Si vous voulez avoir de la musique background
dans votre call de Zoom,
vous pouvez utiliser ça pour le faire.
Ce que j'ai utilisé c'est
une autre app called Crisp.ai
qui remet l'audio background.
J'ai réveillé
l'audio de mon tool de editing
dans un device virtual
et j'ai utilisé ça comme input pour Crisp.
Et je pouvais
réveiller l'audio background
en remetant le son de la musique pre-record.
Ça m'a aidé
à éditer des épisodes.
C'est un super cool tool.
J'aime leur interface
très visuel.
C'est très visuel.
Il s'arrête
pour Justin's love
de les tools de visualisation.
Il s'agit d'un truc pour autre.
C'est une expérience fun.
C'est très vrai.
Le programme textuel est très puissant.
C'est très turiste.
Mais aussi, pas tout est
très best displayed en texte.
Donc, sur Twitter,
j'ai vu un blog
d'un blog d'un blog de blog
StackBlitz.
StackBlitz est un service
qui vous donne un editor online.
Vous pouvez penser à des codespaces
ou à des codes sandbox.
Ils ont juste élevé
ce feature qui s'appelle Web Containers
qui va réunir votre service
dans le browser.
Vous avez
NoJS en faisant un API GraphQL.
Ça va réunir le browser.
Ce n'est pas nécessairement
totalement unique.
Donc, CodeSandbox
réunit beaucoup de choses
dans le browser.
J'ai contribué à ça
dans le passé.
C'est très intéressant
comment ils ont été
créés.
C'est un peu
juste des web-workers
et de loading
des choses en web-workers
et de coordinate.
Mais
je pense qu'il y a des
choses très intéressantes
dans les web containers.
Et je pense qu'il y a
des usages très clairs
de ce que je prépare
d'être WebAssembly
en fait, en faisant ces choses
plus nativement dans le browser.
Donc,
un projet vraiment fascinant
vous pouvez imaginer
d'être capable de créer
des livres de la histoire,
l'application,
directement dans le browser,
tout en faisant le browser
sans avoir à faire un MPM install,
tout ce qui va dans ce processus.
Donc, c'est vraiment, vraiment fascinant
la technologie.
On va linker le blog post
où ils introduisent
les notes de la show.
Mais c'est assez cool.
C'est cool de voir
tous ces outils tentant
de lower le barrière
pour entrer à développement.
Sam va revenir
pour le repler.
Ce que j'ai parlé
l'année dernière.
C'est très similaire.
Un de mes petits conseils
est le service mock-worker.
Il y a un API mock-ing
qui vous aide
rapidement et facilement
de mocker le data
dans des compagnons
et des UI.
Il travaille avec un livre de histoire
et il y a un ad-on.
Il y a des UI
qui sont interprétruits
avec le data.
Il y a des data
inextricable
interprétruits avec le data.
C'est quelque chose
qui s'appelle un third party API,
c'est un formule de credit
de la carte.
Il peut être difficile
de construire une isolation.
Mais vous voulez
construire une isolation
parce que vous avez
tous ces autres bénéfices
de construire une isolation.
Et ce que le service mock-worker
fait, c'est que
il s'applique un service-worker
dans votre browser,
intersepte des requises,
des requises HTTP
et des réponses
de votre choisition.
C'est assez facile
de faire des choses
comme,
vous arrêtez de faire
une réponse
pour un API
que vous avez besoin
de mock-worker.
J'aime vraiment des tools
comme ça.
J'étais vraiment allé
partager ceci
cette semaine.
Il y a une histoire
intéressante
autour de la testation
en particulier
où c'est
comme la laitre
que vous testez
en matière de matière.
Et beaucoup de gens
d'aideraient
exprimer,
vous devriez écrire
votre code
dans un moyen
où vos fonctions
peuvent avoir
une injection dépendant
et vous êtes
écrire votre code
pour être testable.
Et
comme résultat
souvent,
le code
devient vraiment
curieux.
Il n'est pas
le plus facile de
faire
ceci
une simple chose.
On
fait une injection
en ce moment
et on a
un adapter interface
que nous avons
utilisé
pour faire
ceci.
Et vous
écrire un code testable
qui devient très difficile
pour raison d'avoir
l'air
Et donc
des outils
comme
ce que
le moque
travaille
qui
sort
vraiment,
vraiment,
très bas
et qui
dit, ok,
ce sont les prémunaux
que vous avez besoin
de travailler.
Un autre
outil
dans ce vain
est
MockFS,
qui est
un library
sur NPM.
En fait,
je vous ai
mis un
pourquest
à auto
un peu plus tard
pour faire
ceci.
MockFS
dit,
vous êtes
en train de
lire des files
sur le système de file.
Les fonctions
que vous
utilisez
et comment
vous les accesses,
vous ne voulez pas
les moquer.
Ce sont
les détails
Mais vous voulez
dire que le
système de file
a ces files.
Et je trouve
que
sur un niveau super,
très bas,
un niveau
de
je ne
espère que
ce
ressource,
ou cet API,
ou cet file
existait
avec cet contenu
et je voulais
faire ce
chose.
Il
serait plus
puissant
pour
votre
environnement de
parce que
ça signifie
que vous ne
n'avez pas
à penser
à
faire
une
édition
pour les
liens horizontaux
de la stack,
les
isolation des
et la
isolation de la
back-end
et des
isolations.
engineers
ont déjà
décidé de
type de
front-end
et des
liens
stack.
Et
les
liens
sont
en
sélection
de la
stack.
Et
ce
un
point de
sélection
stack.
Et
question
est
que
avez
liens
et
des
liens
de la
Et
de la
stack.
La
stack
est
dégâte
et
dégâte.
Et
un
point de
sélection
de la
stack.
Et
ce
sélection
de la
stack.
point de
sélection
de la
stack.
Die
des
six
un service qui vous donne une expérience de développement verselle avec des databases.
Vous pouvez avoir un poursuit, un schéma d'update et obtenir un exemple database pour ce poursuit.
Ils démentient la migration et tout pour vous.
C'est construit sur cette technologie appelée Vitus.
Je ne sais pas exactement ce qu'on appelle.
C'est énorme.
Je suis vraiment intéressé et excité à voir où cette technologie se passe.
C'est une grande expérience dans l'écosystème depuis longtemps.
Il y a beaucoup d'interessants services qui sont en train de faire des services.
FanaDB a été un service en ligne pour un temps, mais dans ma opinion leur API est assez complexe et c'est difficile de le faire.
La planète scale est en train de faire ma sequel sous la haute.
Donc si vous avez travaillé avec les databases, ça devrait être très familier pour vous.
En tout cas, c'est probablement l'un des plus excitantes companies de database que j'ai vu pendant longtemps.
Superbase est aussi très excitant, mais cette fois pour une très différente raison.
C'est bien.
J'ai bien expérimenté avec Fana et c'était assez cool.
Mais le concept d'automapes migrations, vous me souviendrez.
C'est pas un problème que vous pensez avoir quand vous commencez votre service, mais les databases sont un grand problème.
Je m'aimais un site qui s'appelle kickback.tv, qui est un reader de chansons de la musique.
Je fais ça en faisant des milliers de services sur les services de service pour les blogs.
Mon problème est que je suis connecté à un database.
C'est bien de voir plus de solutions pour ce type de utilisation.
Mon deuxième tool est un tool appelé Measure.
C'est présentement dans la phase prototype, mais ça devrait arriver avec le boulot 6.3.
Ce que ça fait, c'est que ça mesure les distances, les dimensions de la marque de la marque,
visualise les images dans un canvas, qui est overlayé sur le top de l'Ui.
Ce que ça aide, c'est de vérifier le spacing et les distances entre les éléments.
C'est vraiment rapidement dans un livre de historie.
Si vous êtes un developer de l'Ui comme moi, vous venez de faire ça tout le temps.
En fait, je fais ça pour le plus de temps.
C'est juste que ce spacing ne ressemble pas à la fois.
C'est un clic de la bouton pour voir ce que ça fait.
Je vois cette idée évoluer dans le cours des années.
Je pense que la première fois que j'ai vu ça, c'était avec Adam Argyle, Visbug.
Il est un développeur sur le team web de Google.
C'est beaucoup comme ça.
Je pense que récemment, un autre enjeuner versel qui travaille sur les systèmes de design
a aussi un blog qui s'est posté sur ça.
C'est cool de se percoler à l'écosystème.
Absolument.
En fait, je pense que l'inspect Pix est ce que c'est.
Visbug est la première inspiration pour nous.
Nous essayons de faire ça pour plus de gens,
pour que tout le monde puisse avoir le bénéfice de ce spacing.
Le taux que nous avons utilisé dans le livre de historie
est évidemment l'escalier.
Je pense que tout le monde ici est très familier avec ça.
Je ne recommande pas l'escalier,
parce que je pense que tout le monde a déjà utilisé ça.
Mais je recommande de regarder le scan de la deep scan,
qui est... Je ne sais pas comment ils le font,
mais ils sont immédiatement rapide
en détectant des choses qui peuvent être faibles avec leur code.
Des choses comme,
vous devez configurer E as Lint
avec toutes les preuves ou les plugins.
Le scan de la deep scan automatique le tient pour vous
et le dit.
Vous devez utiliser un lit ici,
mais vous ne le rédefinez pas.
Ou vous êtes en train de retourner quelque chose ici,
mais vous ne retournez pas dans l'autre clause.
C'est simple,
que l'E as Lint peut vous accueillir,
mais la machine de E as Lint peut être une performance.
Et la code base de E as Lint peut prendre un temps.
La deep scan est quelque chose que vous pouvez faire
par exemple,
ou vous pouvez le faire en code VS
et c'est juste incroyablement rapide.
C'est le plus important que je vais vérifier
pour les cas de la use.
Ce petit exemple qu'on a ici,
où vous faites un rendu de fonction
sans rétablir votre JSX,
je fais ça tout le temps.
C'est tellement amusant.
Parce que le message de l'air
ne vous donne pas de la telle telle que vous avez fait.
C'est juste un peu confusant.
Mais celui-là est un peu au-delà.
C'est une des communités de l'Embar.
C'est l'un des communitaires de l'Embar.
C'est un tool appelé MO,
qui est l'opposite de OM,
qui est probablement une unité que vous avez entendu.
C'est l'électricité.
Et apparemment, MO est l'opposite exacte de ça.
C'est un flow qui est vraiment élevé,
qui est très intéressant.
Le tool n'est pas prêt pour l'utilisation,
mais c'est un expérience
d'un bundler
qui se trouve dans votre browser.
C'est un autre tool de service-workers.
Cette fois, c'est essentiellement
faire des paroles et des webpacks,
pendant que vous vous demandez des files.
Et une chose qui m'a été détenue
depuis un très long temps,
c'est que le tout pipeline
de paquets de publish,
n'est pas vraiment un peu d'intérêt.
Par exemple, pour un livre de la histoire,
nous sommes maintenant publiés en commun jazz,
et nous sommes aussi publiés en ESM,
et nous sommes aussi publiés en ESM,
mais sans la régenerateur de runtime,
parce que certains personnes ont des systèmes
plus modernes que d'autres,
et vous pouvez vraiment polyfiller la régenerateur de runtime,
et c'est juste un syntaxe,
si vous essayez de le faire.
Et je pense vraiment que cet entire problème
d'avoir des codes et de la réchauffe,
c'est que le consommateur est près de la réchauffe,
ou que le travail de Babel
soit le plus tard possible.
Et ça me semble comme un tout
qui peut nous prendre dans cette direction,
donc je suis vraiment excité pour ça.
Je sais que ce n'est pas une production prête,
mais c'est quelque chose qui me excite vraiment,
c'est que les services,
les services de l'exploitation,
les packages,
et de la façon dont ils sont capable de faire.
Un de leurs promesses,
Edward Faulkner,
c'est un gars qui a fait ça,
et qui a présenté ça à Ember Koff,
l'année dernière.
Il dit que vous n'avez pas besoin de faire
un install MPN,
vous vous spécifiez votre app
et ça le downloadera directement dans le browser.
Je ne sais pas si vous,
mais je spending beaucoup de temps
downloadant les packages d'MPN,
même si ils sont déjà dans mon cash.
Mais ça fait que ça prend
un grand millier de fois
pour que tout soit copié.
Et maintenant mon coeur est faible
parce que
il y a un millier de versions de Lowdash.
C'est bien d'avoir ça.
On est en train d'avoir un shift paradigm
de ce CJS et ESM
pour un grand question,
parce que beaucoup de
expériments et
nouveaux set-ups sont en train de se faire.
Oui, mais
comme je pense que tout le monde est
en train de se faire aware,
le système de JavaScript
est juste un peu plus marqué.
ESM est
peut-être la fin de l'évolution
de la format module que nous avons
dans le JavaScript,
mais c'est pas
la dernière iteration
de la langue de JavaScript.
C'est toujours en train de se faire évoluer,
les nouvelles features sont élevées
chaque année, ce qui est un grand truc.
Et donc, on ne sera jamais
vraiment fait avec migrater
pour la prochaine version
de JavaScript.
Donc, un tour comme ce
qui tient à l'end consumer
oui, encore, ça me fait vraiment
beaucoup. Je suis espéré que ça sera
en réalité à un moment.
Pour sûr.
Cool. Merci d'avoir regardé ces tournes.
C'était génial.
Un grand épisode aujourd'hui.
Merci Tom, merci Norbert.
C'est génial de vous avoir regardé.
Le storytelling est génial.
C'est l'un des meilleurs tools.
Donc, vous avez fait un grand travail.
Merci beaucoup pour nous inviter.
Bye bye.
Oui.
Absolument.
Et c'est tout pour nous aujourd'hui.
Tout à l'heure, jusqu'à la prochaine.
Vous allez prendre l'easy.
Apprécier tout le monde.
Sous-titres réalisés par la communauté d'Amara.org
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