Comment puisje apprendre à réagir?

Dans cet épisode du Smashing Podcast, nous parlons de l'apprentissage de React. Comment React aime-t-il travailler et comment les développeurs expérimentés peuvent-ils commencer? J'ai parlé à Mina Markham pour le découvrir.

Notes de présentation

Mise à jour hebdomadaire

Transcription

Drew McLellan: Elle est architecte frontale, conférencière et organisatrice, et amoureuse des systèmes de conception . Son travail sur la bibliothèque de brevets Pantsuit pour la campagne présidentielle Hillary for America de Hillary Clinton a marqué un tournant pour les systèmes de conception dans l'industrie et a été présenté dans des publications telles que Wired, Fast Company et Communication Arts. Comme beaucoup d'entre nous, elle écrit du code pour gagner sa vie, actuellement en tant qu'ingénieur senior chez Slack. Nous savons donc qu'elle est une développeur talentueuse et avant-gardiste, mais saviez-vous qu'elle a déjà été confondue avec Patrick Swayze? Mes amis fracassants, veuillez accueillir Mina Markham. Salut Mina. Comment allez-vous?

Mina Markham: Je fracasse.

Drew: Bon à entendre. Maintenant, parfois sur le Smashing Podcast, nous parlons aux gens du sujet pour lequel ils sont les plus connus. Et parfois, c'est amusant de parler de quelque chose d'un peu tangentiel. Maintenant, je pourrais discuter avec vous toute la journée sur les bibliothèques de modèles, les systèmes de conception, le travail incroyable que vous avez fait dans ce domaine particulier, et je pourrais vous parler de sujets dont vous avez peut-être parlé, d'événements, tels que l'événement A part, des choses comme la direction artistique. Et nous pourrions évidemment parler de CSS jusqu'à ce que les vaches rentrent à la maison. Mais vous avez tweeté il y a quelques jours, et je me suis rendu compte que nous sommes en fait tous les deux dans le même bateau, car nous sommes tous les deux des ingénieurs expérimentés et nous avons récemment commencé à travailler avec React. Donc, avant d'en arriver à React, où en êtes-vous arrivé à ce point? Aviez-vous travaillé avec d'autres bibliothèques et frameworks pour le développement JavaScript?

Mina: Non, en fait, je fais surtout du JavaScript vanille depuis un moment. Et avant cela, bien sûr, je suis entré dans JavaScript. Permettez-moi de reformuler cela. J'ai commencé à travailler avec un script Java en utilisant jQuery parce que cela avait le plus de sens pour moi. C'était quelque chose qui m'était très facile à analyser pour comprendre ce qui se passait. Et puis à partir de là, je suis revenu à la vanille, au JavaScript simple, à ESX, et je n’étais pas vraiment entré dans les guerres du framework. Je n'avais pas, comme je n'avais pas de favori. Je n'avais pas de chien dans le combat. Je me disais: «Pour toi, réagis, peu importe. Je m'en fiche vraiment. " Mais les temps changent.

Drew: Et dans ce genre de façon de travailler avec JavaScript vanille, parce que j'en ai fait beaucoup moi-même aussi. J'ai travaillé avec différents frameworks. J'ai fait beaucoup de choses avec jQuery à l'époque. J'ai travaillé avec YUI, Yahoo User Interface Library. Aviez-vous ressenti bon nombre des points douloureux que quelque chose comme l'architecture de React tente de résoudre? J'ai passé la majeure partie de ma carrière à créer des sites Web plutôt que des applications Web et des choses de ce genre. Donc, tout ce que j'ai fait était assez statique dans une certaine mesure. Je n'ai donc jamais vraiment eu à gérer la gestion de l'État, des choses comme ça. Donc, les points douloureux que React tente de résoudre, je ne les ai jamais vraiment appliqués au genre de travail que j'ai fait.

Drew: De manière générale, quelle est la nature des projets que vous avez avec React jusqu'à présent ?

Mina: Ce n'était en fait que le seul projet sur lequel je travaille actuellement et je ne peux pas donner trop de détails à cause d'une société publique et de toutes ces bonnes choses.

Drew: [

Mina: Mais essentiellement ce que j'essaie de faire, c'est que j'essaie d'utiliser React pour, c'est une sorte de produit très interactif où j'ai besoin que les gens puissent entrer et enregistrer les données à un certain état, puis les manipuler et générer autre chose avec lesdites données. Et c'est juste quelque chose qui n'est pas une simple manipulation DOM à ce stade. C'est vraiment beaucoup plus complexe, la gestion frontale des données et la gestion de l'état desdites données. Il n'y avait donc vraiment pas d'autre alternative que d'utiliser une sorte de bibliothèque qui tente de résoudre ce problème. Je savais que je ne serais pas en mesure de passer le cap avec un simple JavaScript. J'envisageais peut-être de gérer quelque chose du côté serveur, mais encore une fois, en raison de la nature très interactive de ce avec quoi je travaille, cela doit être dans le client. Et donc nous utilisons déjà React at Slack pour diverses autres choses. Et donc je me disais: «D'accord, eh bien, nous devrions simplement aller de l'avant et adopter la même chose que le reste de la société mère que les entreprises utilisent et partir de là.»

Drew: L'une des choses que j'ai 'ai toujours l'air d'être un problème avec les gens qui prennent React se familiarise avec la chaîne d'outils qui est nécessaire pour faire fonctionner les choses, Webpack étant un éléphant évident dans la pièce. Avez-vous dû faire une grande partie de la configuration de la chaîne d'outils ou comme moi si vous aviez le luxe que vos coéquipiers le fassent pour vous?

Mina: Oh, j'adore l'équipe d'infrastructure de Slack pour les données. L'équipe d'infrastructure frontale de Slack a géré tout cela. Je n'avais pas à y penser. C'était super. Parce que j'ai essayé d'apprendre React avant dans le passé. Habituellement, la meilleure façon d'apprendre est de travailler et de mettre en œuvre des choses. Et nous utilisons React pour construire beaucoup de hillaryclinton.com en 2016. Donc ce n'est pas comme si je n'avais jamais travaillé avec des gens qui l'utilisaient. C'est juste que mon travail n'a jamais eu besoin de moi directement pour m'impliquer. Mais cette base de code était très complexe et très sophistiquée, et il se passait tellement de choses qu'il y a une telle barrière à l'entrée pour essayer d'apprendre quoi que ce soit là-dedans si vous ne saviez pas déjà comment React et Redux et tout cela fonctionnent, ce que je non. Donc je n’étais pas vraiment efficace pour apprendre dans cet environnement.

Mina: Heureusement, ici, j’ai des gens qui aiment en retirer un peu plus des éléments complexes. Je n'ai pas du tout à me soucier de la configuration Webpack. Cela a été mis en place. Cela a été essayé et testé et prêt à fonctionner. Je suis dans un bateau similaire où nous utilisons également Redux en plus de React, dont je ne savais pas qu'il s'agissait de deux choses différentes. Je ne savais pas quelle partie gérait quoi. Passer dans une base de code comme ça, c'était un peu désorientant parce que je ne savais pas que c'était la même chose. Des gens qui étaient des développeurs chevronnés de React me disaient: "Oh, nous utilisons également Redux, ce qui rend un peu plus difficile pour vous d’apprendre vraiment ce que React peut faire si vous partez de zéro." Et je n'ai jamais vraiment compris ce qu'ils voulaient dire par là parce que je ne savais pas de quoi ils parlaient.

Mina: Pour répondre à votre question initiale, j'ai encore un peu plus d'obstacle à entrée, car il ne s'agit pas seulement d'apprendre React. Je dois apprendre React et aussi comment utiliser la boutique Redux. Donc, ces deux choses en même temps peuvent être un peu trop.

Drew: Oui, j'ai trouvé exactement la même chose entrant dans une base de code existante que mon premier projet React qui utilise Redux. Et je pense que, comme c'est la nature de ces types de technologies quand ils sont jeunes, ils itèrent très rapidement, et quelle est la meilleure pratique à un moment donné, 6 mois plus tard a évolué et il y a une façon différente de faire les choses. Et lorsque vous avez une base de code qui s'étend sur plusieurs années, vous pouvez parfois y avoir différents styles d'implémentation. Il n'est pas toujours synchronisé. Et bien sûr, si vous suivez un tutoriel ou quoi que ce soit à apprendre, vous lisez des livres, vous utilisez des ressources, ils seront dans la version la plus moderne de la façon de faire les choses. Et cela ne correspond pas nécessairement à ce que vous voyez lorsque vous regardez un produit existant et mature. Est-ce quelque chose que vous aviez vécu du tout, ou avez-vous réussi à garder votre base de code vraiment à jour?

Mina: Je pense que c'est quelque chose que j'ai certainement vécu. Quand j'ai essayé d'apprendre à faire React par moi-même, j'ai regardé divers tutoriels et des choses comme ça. Et j'ai remarqué, ou du moins les gens m'ont dit qui ont travaillé qui ont travaillé avec moi que certaines des choses que nous faisons ou une sorte d'anti-modèle ou pas tout à fait comment les choses fonctionnent maintenant, parce que cette base de code est légèrement, bien nous mûrir un parent, mais il a quelques années. Et donc il y a des façons qui, je suppose, sont plus faciles à faire que la façon dont nous les faisons actuellement parce que cela a été écrit il y a des années. C'est donc un peu un tapis roulant qui essaie de suivre l'heure actuelle et de s'assurer que je veux faire les choses de la meilleure façon, mais je ne veux pas non plus casser une base de code établie parce que je veux jouer avec des trucs. [19659009] Drew: Évidemment, l'une des choses avec React, c'est que des gens comme vous et moi y arrivons, cela peut sembler un peu troublant comme tout cela avec JSX. Utilisez-vous JSX dans votre projet?

Mina: Nous le sommes. J'utilise JSX.

Drew: Avez-vous fait la paix avec ça?

Mina: Je tombe comme un petit petit morceau de moi meurt chaque fois que j'ouvre un de ces fichiers. C'est toujours un sacrilège de mettre mon code HTML dans le fichier JavaScript. Je sais que c'est une sorte de révolutionnaire et tout le problème, mais je trouve juste que j'écris mon balisage dans un fichier JavaScript. J'ai fait la paix avec ça, mais chaque fois que je le fais, je suis juste comme, "…" Les soucis de séparation, c'est une chose. Je voudrais que ça revienne, s'il vous plaît.

Drew: C'est un point valable, n'est-ce pas? Mon expérience lorsque je commençais à travailler plus sérieusement avec JavaScript, et c'était probablement lorsque j'étais de retour chez Yahoo, les choses étaient très proches du modèle des pages HTML rendues par le serveur, puis en adoptant une approche d'amélioration progressive, en superposant JavaScript pour améliorer L'interface. Et si l'état de quelque chose dans l'interface devait changer, votre code devait connaître toutes les parties de l'interface qu'il devait mettre à jour, ce qui vous conduit évidemment à une approche étroitement couplée avec ces grandes vues monolithiques où le code que vous écrivez a besoin de connaître tous les autres codes qui l'entourent. Et je suppose que cela ne se prête pas vraiment à une approche composante que vous adopteriez lorsque vous travaillez avec une bibliothèque de modèles ou un système de conception, ce qui correspond davantage à votre domaine d'expertise particulier. Je suppose que React se prête davantage à cette approche, n'est-ce pas?

Mina: Je pense que oui, surtout avec la possibilité de coupler le CSS très spécifique à un JSX ou à un composant React. Et de cette façon, il est beaucoup plus facile de séparer ou de ne prendre que ce dont vous avez besoin pour la bibliothèque et de laisser le reste, tandis qu'une bibliothèque de modèles ou un système de conception qui tente de faire quelque chose de plus monolithique avec un seul fichier CSS de grand style ou quelque chose comme ça , cela rend les choses très difficiles. Vous devez en quelque sorte tout prendre ou rien. J'apprécie donc que React nous permette de faire un développement plus individualisé et plus composant, même si je souhaite toujours qu'il y ait un moyen pour moi de séparer vraiment ma couche de présentation et ma couche de contenu de ma couche d'interactivité. Mais peut-être que c'est juste que je suis un peu vieille école dans ce sens.

Drew: Je ressens vraiment la douleur là-bas. L'idée est que, venez me corriger si je me trompe, je crois que plutôt que de séparer les technologies, le CSS, le JavaScript et le HTML, c'est séparer la fonctionnalité. Donc tout ce qui est un composant existe tous ensemble-

Mina: Ouais.

Drew: … ce qui, je suppose, est utile si ce composant n'est alors plus nécessaire. Vous pouvez simplement le supprimer, et il a disparu, et cela ne laisse aucune empreinte autour de votre application. Ce n'est pas toujours le cas avec CSS. Comment travaillez-vous avec CSS avec React? Avez-vous regardé des choses comme des composants de style ou quelque chose comme ça?

Mina: Non, nous ne l'avons pas. J'ai entendu parler de composants de style, mais je ne les ai jamais vraiment vraiment approfondis pour être parfaitement honnête. Donc, la façon dont nous travaillons avec CSS avec React est d'écrire Less, et nous avons juste un fichier Less attaché à chaque composant individuel qui est importé dans ce composant. Et puis il est lié via Webpack et servi au client.

Drew: Utilisez-vous un système comme BEM ou quelque chose pour transformer l'espace de noms?

Mina: Ouais. Nous utilisons BEM pour l’espacement de noms, bien que l’adhésion à celui-ci varie en fonction de qui écrit quoi. Mais nous essayons d'utiliser un modèle d'espacement de noms BEM pour rendre un peu plus clair le but de chaque classe et composant individuel.

Drew: Et cela semble-t-il fonctionner avec succès pour vous?

Mina : Je pense que oui. Parfois, il a en quelque sorte le même vieux problème de parfois je ne sais pas comment nommer quelque chose. Après un certain temps, les choses quotidiennes ont toujours été et seront toujours difficiles pour le maître. C'est donc le seul problème que j'ai avec, c'est que je n'ai parfois aucune idée de ce que je devrais appeler un composant particulier.

Drew: Certainement. C'est une bataille constante, n'est-ce pas, comment trouver le nom des choses?

Mina: Ouais.

Drew: Je finis toujours par travailler sur une nouvelle fonctionnalité ou quelque chose comme ça, vous donnez un composant et toutes les classes et tout le nom que la fonction a pour le moment. Et puis au moment où vous venez de lancer, il a été renommé autre chose. Vous avez donc des références à l'ancien nom dans le code et l'interface a le nouveau nom. Et…

Mina: J'essaie de toujours nommer les choses en fonction de leur fonction ou de leur objectif par rapport à des choses un peu plus éphémères, car il est moins probable que l'objectif réel de ce composant change. J'ai oublié de le mentionner, mais en plus d'utiliser BEM, je suppose que nous utilisons des BEMIT si vous le connaissez. Il s'agit essentiellement de l'ITCSS plus BEM, tous deux créés par Harry Roberts. J'utilise donc la notation hongroise pour indiquer si quelque chose est un composant, par rapport à un objet de mise en page, par opposition à un modèle plus grand composé de plusieurs composants. Et à partir de là, nous utilisons la convention BEM pour signifier comme l'élément bloc et tout cela.

Drew: Et avez-vous dû faire beaucoup de refactorisation et de suppression de composants et de choses dans votre base de code et la question de CSS se laisser distancer?

Mina: Ouais. Donc, la partie non React de mon travail, de maintenir slack.com, c'est juste un tas de fichiers Less qui sont compilés pour CSS. Et je vous garantis, il y a beaucoup de code zombie là-dedans, parce que nous itérons certainement beaucoup au-dessus des choses depuis que je suis là. Et nous n'avons pas toujours le temps de revenir en arrière et de faire le nettoyage par rapport à la refonte d'une page ou de quelque chose. Donc, il est trop tard pour un audit, je dirai cela.

Drew: C'est quelque chose que nous venons de voir dans notre projet React, en regardant comment nous abordons CSS. À l'heure actuelle, nous avons quelques gros fichiers CSS globaux pour l'ensemble de l'application, et nous obtenons cette situation où la taille de notre ensemble ne fait que croître, et grandit, et grandit et ne devient jamais plus petite, même si les choses deviennent supprimé. Nous avons donc étudié des éléments comme les composants de style, Tailwind est également une autre option que nous envisageons sérieusement. Avez-vous beaucoup regardé le vent arrière?

Mina: Je ne l'ai pas beaucoup regardé. J'ai été curieux à ce sujet, mais encore une fois, je n'ai jamais vraiment eu le temps de creuser pour voir si c'est quelque chose que je veux essayer d'introduire dans notre base de code.

Drew: J'étais en fait assez surpris, parce que comme vous, je suis un peu old school avec la façon de faire ces choses. J'aime bien la séparation des préoccupations. Et j'aime écrire mon CSS en CSS, et bien sûr, l'approche avec Tailwind est que vous avez tous ces noms de classe, qui ressemblent un peu aux styles en ligne que vous appliquez. Et si ça fait sale.

Mina: Ouais.

Drew: Et j'ai fait du bénévolat au sein de l'équipe, nous avons tous pris une technologie pour enquêter s'ils conviendraient bien à nos problèmes , et je me suis porté volontaire pour regarder Tailwind parce que j'étais absolument certain que j'allais le détester.

Mina: Non, non.

Drew: Mais il se trouve que je pense que cela résout un problème beaucoup de problèmes. J'ai été assez impressionné.

Mina: Ouais. J'ai en quelque sorte adopté une façon de penser similaire, car dans le passé, je préférerais de beaucoup qu'une classe comprenne tous les styles dont j'avais besoin pour un composant particulier et non une classe par propriété, comme je pense que Tailwind le fait ou des langues comme ça. Pour les mêmes raisons, cela ressemblait beaucoup à: "Eh bien, je suis juste en train d'exécuter CSS en ligne à ce stade. Pourquoi ferais-je ça? " Mais comme je développe de plus en plus, à l'intérieur de notre système de conception Slack, j'ai créé un tas de ce que j'appelle des classes utilitaires qui font des choses comme ajouter un peu de marge avec un motif. J'ai remarqué que de plus en plus, j'utilise ces classes en plus des classes de composants. Je me dis donc: "D'accord, je devrais peut-être revoir tout cela pour faire un CSS comme une déclaration à la fois." Je ne sais pas si j'irais aussi loin, mais cela vaut vraiment la peine d'être considéré.

Drew: L'informatique semble faire volte-face en termes de tendances entre les clients légers et les clients gros. Nous avons commencé avec les ordinateurs centraux avec terminaux, puis avec l'ère PC avec Windows et Office et toutes ces sortes de grosses applications. Et ils devenaient tous très lents, et puis le Web est arrivé, et c'était juste un navigateur, et tout le travail se faisait sur le serveur. Et tout était à nouveau rapide et rapide. Et maintenant, nous sommes revenus à remettre tout ce travail dans le navigateur avec tout ce qui se fait avec JavaScript, des choses comme React et l'approche JAMstack où nous sommes de retour à une sorte de gros client. Je crains parfois que nous demandions trop au navigateur. Est-ce une erreur? En demandons-nous trop au navigateur qui essaie de faire toutes ces choses dans React?

Mina: Je veux dire oui avec la mise en garde de, encore une fois, mon expérience est très limitée aux sites Web principalement statiques. Je ne fais pas beaucoup de développement de produits. Alors peut-être que dans ce domaine, cela a plus de sens. Mais de mon point de vue, j’ai l’impression que nous utilisons souvent une hachette alors que nous avons juste besoin d’un couteau à beurre. Je ne sais pas pourquoi nous devons mettre tout cela dans le navigateur, mettre tant de travail et tant de pression sur le client. Je pense que nous pourrions faire cela beaucoup plus simplement. L'une des choses qui m'a toujours un peu fait hésiter à utiliser React, ou je dis hésitant, mais ce que je veux dire quand cela m'a mis en colère visuellement et que je m'y suis activement opposé, c'est quand j'allais sur un site Web et que rien ne se rendait littéralement parce qu'il y avait était une erreur ou quelque chose comme, "Vraiment? La page entière est cassée parce qu'une fonction est tombée en panne? »

Mina: Cela m'a un peu énervé de voir que souvent c'était une approche tout ou rien. L'une des discussions que j'ai faites à AEA dans le passé et dans d'autres endroits dans le passé portait sur la façon d'inclure l'amélioration progressive et non seulement votre développement, mais aussi la direction artistique et la conception des sites. Et je voudrais mentionner spécifiquement des exemples de sites Web qui n’ont pas fait d’amélioration progressive ou n’ont subi aucune dégradation gracieuse. C'était comme si vous aviez le JavaScript en cours d'exécution dans le navigateur ou que vous n'obteniez absolument rien. Et ce serait comme un simple site qui représente des informations sur l'histoire de la conception Web, qui a été l'un des sites dont on a réellement parlé, l'histoire de la conception Web de 1990 à nos jours. C'était un beau site Web avec beaucoup de chronologies, une animation des choses. Mais il aurait aussi pu être rendu statiquement avec juste une liste. Il y avait des étapes entre ne rien montrer et montrer cette expérience magnifiquement améliorée qui, je pense, s'est perdue à cause de la façon dont nous abordons le développement Web moderne maintenant.

Drew: Donc, diriez-vous qu'il existe absolument certaines catégories de des projets qui conviennent à une solution comme React et certains où elle ne devrait vraiment pas être utilisée et vous devriez utiliser des méthodes plus traditionnelles?

Mina: Je pense que si votre site en particulier est principalement statique, il servait simplement informations, je suppose que je ne comprends pas pourquoi vous avez besoin d'un projet comme React pour rendre quelque chose qui n'a pas beaucoup d'interaction au-delà de la simple manipulation DOM. Je suppose que je ne vois pas quel avantage vous en retirez. Encore une fois, je ne travaille peut-être pas sur les projets appropriés. Je n'ai peut-être pas seulement vu ou trouvé ce cas d'utilisation, mais j'ai du mal à voir s'il s'agit principalement d'un site statique, présentant du contenu, pas beaucoup d'interaction, pas beaucoup d'interaction au-delà du DOM manipulé et faisant des animations. Je ne vois pas comment le fait d'avoir une bibliothèque React vous aide à atteindre cet objectif.

Drew: C'est intéressant parce que je ne suis pas mauvais en parler parce que je ne l'ai pas réellement utilisé, mais je vois beaucoup de Gatsby projets et Gatsby étant un générateur de site statique qui utilise un front-end React. Et je vois que tous les exemples des thèmes et des choses dont ils disposent sont tous des sites basés sur du contenu, ou des blogs, et un site de recettes, et un portfolio, et ce genre de choses. Et il y a quelque chose que je pense en fait que ce n'est pas nécessairement le bon choix pour quelque chose comme React. Pourquoi cela n'est-il pas rendu statiquement puis amélioré progressivement?

Mina: Ouais.

Drew: Ce n'est pas un logiciel.

Mina: Ouais. Je n'ai pas non plus utilisé Gatsby. J'ai entendu beaucoup de bonnes choses à ce sujet, mais c'est probablement l'un des exemples auxquels je penserais: «D'accord, je suppose que je ne vois tout simplement pas pourquoi cet outil est nécessaire pour faire ce travail particulier. " Encore une fois, je ne sais pas. C'est peut-être simplement parce que plus de gens sont à l'aise d'écrire dans React lorsqu'ils écrivent quelque chose d'autre, et c'est juste de fournir un outil qui rencontre les gens là où ils se trouvent. J'ai entendu beaucoup de choses sur les générateurs de sites statiques qui utilisent React pour les personnes qui les ont utilisés et qui les aiment, mais ce n'est pas un cas d'utilisation que j'aurais immédiatement dit: "Oh, cela a du sens".

Drew: Il semble qu'il y ait toujours eu cette bataille entre ce que nous appellerions un site Web et ce que vous pourriez appeler une application Web. Et l'abîme entre les deux semble s'élargir, et s'élargir, et s'élargir, tandis qu'une approche d'amélioration progressive tente de combler l'écart en prenant quelque chose de statique et en ajoutant JavaScript et en ajoutant de l'interactivité. Il semble que des choses comme React conviennent parfaitement aux logiciels que vous exécutez dans le navigateur. Êtes-vous d'accord avec cela?

Mina: Je serais certainement d'accord avec cela, car on dirait qu'il a été construit pour ce type d'environnement; il a été conçu pour exécuter des logiciels. Il a été construit par Facebook pour Facebook. Il a donc été conçu pour un produit. Il a été conçu pour exécuter tout ce que vous appelez une application Web dans le navigateur et pas nécessairement pour le type de travail que, comme je l'ai mentionné, j'ai l'habitude de faire. Donc, je pense que dans ces scénarios, il est certainement très judicieux de l'utiliser si vous créez un logiciel plus complexe et plus sophistiqué destiné à être exécuté à l'intérieur d'un navigateur. Mais si vous construisez un site de marketing ou autre, je suppose que j'aurais encore du mal à voir pourquoi cela sera nécessaire là-bas.

Drew: Donnons-nous donc la permission aux gens de continuer à construire des sites Web décents et rendus statiquement?

Mina: J'aimerais voir plus de choses se produire. J'ai l'impression que ça s'est perdu et que c'est en quelque sorte perdu, si c'était cool ou quoi que ce soit. J'ai l'impression que nous avons perdu cette partie du développement Web. C'est tellement drôle: vous et moi avons tous les deux dit que nous étions un peu à l'ancienne, et j'en ris parce que je fais du développement web depuis, quoi, six ans maintenant? Comment suis-je vieille école? Ça ne fait pas si longtemps pour moi. Et pourtant, je fais partie de la vieille garde qui n'aime pas les choses nouvelles et brillantes. Je ne comprends pas.

Drew: Donc, en fait, React existe depuis toujours que vous êtes développeur Web.

Mina: Peut-être que j'ai juste une vieille âme . Je ne sais pas.

Drew: Je pense que c'est probablement le cas. Je n'ai pas regardé personnellement, il existe des approches rendues côté service que vous pouvez adopter avec les applications React. En avez-vous fait l'expérience?

Mina: Je n'en ai jamais vu. Je les ai brièvement examinés pour le projet sur lequel je travaille actuellement, car j'ai l'impression que certaines parties de l'opération fonctionneraient mieux sur un serveur que sur les clients. Mais je pense qu'en raison de mes connaissances limitées et du fait que la base de code est un peu plus compliquée que je ne peux comprendre, je n'ai pas été tout à fait en mesure de comprendre comment faire fonctionner cette pièce. J'adorerais le comprendre finalement, mais j'ai passé une journée à y creuser. Je me disais: «Tu sais quoi? Je ne cherche pas ça, je dois l'être. Alors je vais juste reculer et prendre un chemin différent. "

Drew: Ouais. Je pense que nous avons tous été là.

Mina: Ouais. J'ai emprunté un chemin. Je me disais: «Oh, c'est sombre et effrayant. Inversons. Inversons. "

Drew: Éloignez-vous du code.

Mina: Oui.

Drew: Donc, vous avez été très diplomate et poli à propos de React jusqu'à présent. J'ai l'impression qu'il y a un peu de tension sous la surface. Allons. Dites-nous ce que vous ressentez vraiment.

Mina: J'ai été poli et diplomatique, principalement parce que la base de fans de Reacts peut parfois être un peu méchante, et je préfère ne pas les faire venir pour moi. Alors s'il vous plaît, React est super. C'est merveilleux. Utilisez-le pour ce que vous voulez l'utiliser. Je plaisante, mais même ce tweet que vous avez mentionné au début de ce podcast où je pense que ce que vous avez dit, c'est que je ne le déteste pas. Je ne l'aime pas, mais je ne le déteste pas. Même cette déclaration, j'ai eu des gens, il n'y avait pas de vitriol, mais ils étaient plus prêts à sauter à la défense et à dire: «Eh bien, j'adore parce que X, Y, Z.» Je me dis: «Je n'ai pas dit que c'était mauvais. Je viens de dire que je suis tout à fait d'accord. " Mais apparemment, meh n'est pas bien. Je dois l'aimer.

Mina: C'est pourquoi j'ai probablement été un peu plus diplomate que je ne le serais normalement, juste parce que je ne veux pas que les gens pensent que je suis mauvais, parce que Je ne suis pas. Il a sa place dans plus de développement web. Il remplit une fonction. Il fait bien son travail. Les gens l'adorent. Ce n'est tout simplement pas un outil que j'ai jamais eu ou voulu utiliser jusqu'à présent.

Drew: Ouais. Les choses peuvent devenir très tribales, n'est-ce pas, les gens se sentant obligés de prendre parti ou non, et vous êtes soit absolument pour quelque chose, soit absolument contre quelque chose? Et je ne suis pas sûr que cela serve un bon objectif, et je ne pense pas que cela nous fasse vraiment avancer en tant qu'industrie et en tant que communauté pour ce faire.

Mina: Oui. C'est vraiment bizarre. C'est fascinant à regarder d'un simple point de vue sociologique, mais c'est souvent vraiment bizarre d'observer. C’est comme si je n’étais pas autorisé à être, comme je l’ai dit, neutre sur certaines choses. Je dois avoir une opinion bien arrêtée, c'est-à-dire que je ne pense pas en bonne santé. Quel est le terme, "opinions fortes, détenues de façon vague?" C’est comme ça que je procède. Je ressens fortement certaines choses, mais ce n'est pas comme si vous ne pouviez pas changer d'avis. Là où je me sens comme certaines personnes, leur identité est enveloppée dans certains aspects, que si vous n'êtes pas pour tout ce avec quoi ils ont choisi de s'identifier, c'est une légère personnelle contre juste, je m'en fous de ce sujet particulier, ou un outil, ou autre chose.

Drew: Oui. Je ne sais pas si cela est aggravé par le fait que nous avons tous tendance à nous spécialiser beaucoup plus dans des parties particulières de la pile. Et je sais qu'il y a des gens qui sont des développeurs de React. Ils s'appelleraient un développeur React parce que c'est ce dans quoi ils travaillent. Et ils n'écriraient pas nécessairement un script Java vanille ou n'utiliseraient pas Vue ou autre chose. React est leur monde. Donc je suppose que cela ressemble presque à une attaque contre toute leur carrière de dire: "Je n'aime pas React." Eh bien, ils sont vraiment investis pour vous faire aimer React ou quelle que soit la technologie.

Mina: J'avouerai être une de ces personnes dans le passé. En fait, il s'agissait probablement principalement de SASS, je crois. Je faisais partie de l'équipe de SASS en tant que préprocesseur et tous les autres préprocesseurs sont des ordures. Je ne veux pas en parler. Je ne veux pas m'occuper d'eux. Et j'ai réalisé que c'était une façon très étroite de voir les choses. Utilisez l'outil approprié pour le travail. Tout ce qui vous rend plus productif, c'est le bon outil. Peu importe ce que c'est.

Drew: Y a-t-il des technologies avec lesquelles nous travaillons qui n'ont pas ce genre de sensation tribale? Y a-t-il quelque chose que les gens sont heureux d'utiliser ou de ne pas utiliser? Je ne pense à rien.

Mina: Wow. En fait, personne n'a d'opinion sur le balisage.

Drew: Non.

Mina: J'ai l'impression que personne n'a d'opinion sur le HTML réel et sur le balisage, tout simplement, "c'est là". Ils l'utilisent. Mais les gens ont des opinions bien arrêtées sur CSS et comment c'est terrible ou merveilleux, et les guerres de préprocesseur qui ne se produisent plus vraiment, et bien sûr, tout le tribalisme au sein des différentes bibliothèques JavaScript.

Drew: Donc, vous diriez que votre parcours jusqu'à présent avec React est toujours juste: «C'est un outil. Il fait son travail? »

Mina: Il est passé d'une curiosité à une aversion active et viscérale à cause de sa prévalence et de mon inutilité. Je pensais que cette prévalence était à moi. Je suis maintenant avec meh, ce qui ne veut pas dire que je déteste ça. Cela signifie simplement…

Drew: Je pense que c'est un bon endroit où aller. Je pense que nous sommes probablement tous plus forts en tant que technologues si nous comprenons la valeur d'une technologie particulière pour son objectif. Nous pouvons évaluer ce qui est bon dans quelles circonstances et choisir le bon outil pour le travail.

Mina: Ouais. Et c'est un peu là où j'en suis arrivé à ce stade de ma carrière où je ne m'investis pas vraiment dans une langue ou une technologie particulière, ou quoi que ce soit, parce que c'est comme: «Juste quel outil est le plus approprié pour ce que vous êtes essayer de le faire, puis utiliser cela. " J'ai appris qu'il y a une place pour tout; il y a un temps et un endroit pour tout faire. And up until recently, there was no real time or place for me to use this React librarian, and now there is.

Drew: I think that’s a good place to be. So I’ve been learning all about React lately as you have in the day job. Is there anything else that you’ve been learning about lately?

Mina: I’ve actually learned ironically, which is I think another language that has originated at Facebook, I’ve been doing a lot of Hack development, mostly because that’s what I use at Slack, at my day job. Learning Hack paved the way for me to get more comfortable using React because they follow very similar patterns, except one is server side and one’s not. So that, along with just in general, I’ve been learning more about the back-end and how that works for various different reasons. And I’ve been stretching myself for the past couple years and getting more and more outside of my comfortable zone. Design systems, libraries, that’s very much my world, and I feel very good and comfortable in that world. But I’m stepping outside of it and doing a lot more server side logic, and API development, and data modeling, and all of that. I’ve been doing a lot on that for the past year as well.

Drew: I find that the more I understand about the whole stack about back-end stuff in front-end stuff, each one helps my knowledge of the other. I find I write better front-end code by having written back-end code and understanding-

Mina: Yeah. I think I feel the same way. Now that I have a better idea of, like we said, the whole stack of how we get from the data to the end client. I find that I’m thinking about the entire pipeline no matter what part I’m actually working in. I’m thinking about what’s the best way to structure this API so that when I get to the template, I don’t have to do so much manipulating of the data that I receive on that end of it. It’s definitely made me overall a better engineer, I feel like it

Drew: If you, dear listener, would like to hear more from Mina, you can follow her on Twitter where she’s @MinaMarkham and find her personal site at mina.codes. Thanks for joining us today, Mina. Do you have any parting words?

Mina: Have a smashing night?

Drew: Great.

(il)