Fonctionnement sur place et développement web

Bonjour à tous!

Maintenant, je vais vous raconter une histoire étrange. Une fois, je vivais dans une copropriété, dans laquelle, au rez-de-chaussée, il y avait une salle de fitness avec des tapis roulants. Dans ma jeunesse, j'ai été activement impliqué dans le sport, puis j'ai réussi à connaître l'état qui se produit pendant la course et qui s'appelle le «second souffle»: c'est à ce moment que vous commencez soudain à vous sentir inspiré par une divinité qui ne connaît pas la fatigue. La respiration, les palpitations et les mouvements du corps ont une résonance particulière et vous transforment en voiture de course. Le sentiment est plus lumineux, à mon avis, plus vous n'aimez PAS courir jusqu'à ce point. Donc, chaque jour, je passais devant les tapis roulants et je pensais que ce serait bien de se souvenir de la jeunesse. Eh bien, je m'en suis souvenu. Le tapis roulant a aidé à cela, il vous a permis d'affiner le rythme et d'atteindre le rythme souhaité. Dans la rue, je ne peux pas faire ça: il est très difficile de parcourir la ville à vitesse égale, le terrain et les obstacles interfèrent. Après un certain temps, j'ai déménagé dans un appartement normal (sans salle de fitness) et j'ai commencé à penser à acquérir mon propre tapis roulant.

Oui, bien sûr, vous pouvez simplement acheter un abonnement au club de sport le plus proche, mais moi, comme beaucoup de mes collègues en informatique, je suis une phobie sociale. Si ce n'est même un sociopathe. L'exercice est un processus intime pour moi. Eh bien, utiliser n'importe quelle minute gratuite pour la formation était également tentant: «la santé du geek» et tout ça ... En bref, j'ai regardé les offres des magasins en ligne, lu des critiques, je me demandais combien je pouvais dépenser pour cette entreprise, comment résoudre le problème avec le bruit et où mettre ce bandana plutôt gros ... Puis je suis tombé entre les mains d'une corde à sauter ordinaire, et je me suis dit: bon, le voilà, une bonne option pour l'entraînement cardio sans trop d'hémorroïdes! Tout ce dont vous avez besoin, c'est de hauts plafonds et ... Rien ne vint de là: pour sauter sur une corde à sauter de manière rythmée et régulière, vous devez être en mesure de le faire. Nous revenons aux pensées sur le tapis roulant ou ... Attendez une minute, pourquoi ne pas simplement essayer de COURIR EN PLACE? Oh bien, en quelque sorte TROP simple et stupide. Mais j'ai essayé. Et tu sais quoi? C'est super! Les sensations sont presque les mêmes que celles que j'ai éprouvées sur le tapis roulant, seul tout est beaucoup plus simple: vous accrochez à votre main un bracelet de fitness, mettez des écouteurs avec de la musique de saucisse, allumez la minuterie - et c'est parti! Oui, il y a des nuances, mais croyez-moi, elles sont insignifiantes. En conséquence, je suis malade de ce sujet depuis un certain temps maintenant, à tel point que je veux rejoindre la secte des mêmes fous. Vous me demandez: de quoi parlez-vous en général, comment tout cela est-il lié au développement web?

Et voici comment

Considérez la pile technologique populaire pour le développement frontal moderne:

TypeScript + MOINS / SCSS / PostCSS + React + Redux / Mobx + Webpack

De facto, c'est maintenant une certaine norme. Il est facile de vérifier cela en analysant les postes vacants. Tout nouveau projet cette année, avec le plus haut degré de probabilité, sera lancé avec une liste similaire sous le capot. C'est un si bon ensemble de tapis roulants testés dans le temps. Parcourons cette liste ensemble et voyons ce qu'il en reste si nous utilisons l'approche Run in Place.

TypeScript

Chose merveilleuse. Quiconque a déjà écrit quelque chose de sérieux pour le Web comprendra cela. Souvent, dans des articles sur TypeScript pour les débutants, donnant des exemples, ils parlent de choses très simples et banales, telles que la transmission d'arguments typés à une fonction ou les vicissitudes de la conversion de type en JavaScript, à partir desquelles vous êtes enregistré. Mais les capacités de TS sont plus grandes et plus profondes que les vérifications de type au stade de la compilation, cela peut conduire le développeur "par la main" tout au long du projet, incitant et ne laissant pas trébucher une fois de plus. Mais TS a ses inconvénients: il ne fonctionne PAS dans un navigateur sans transpail et sa syntaxe, disons, «ondulations» dans les yeux. Lorsque vous travaillez avec le front-end, votre flux de travail implique souvent de vérifier comment votre code s'exécute dans le navigateur, vous avez besoin d'un accès constant au runtime natif. La perte de temps pour reconstruire un projet pour refléter les changements, dans l'ensemble, peut être énorme. Même si vous avez tout ce dont vous avez besoin est mis en cache et optimisé. Que faire? Mon option: utiliser JS + JSDoc. Oui, TS Static Analyzer prend en charge le format JSDoc . En même temps, vous voyez votre code directement dans le navigateur et profitez des avantages de la civilisation. Les blocs décrivant les types et autres conseils ne sont pas mélangés avec le code et ont des limites évidentes, ce qui, personnellement, m'aide beaucoup à lire le code «en diagonale». Si vous utilisez VS Code, vous pouvez essayer cette approche en ajoutant simplement la ligne // @ ts-check au début de votre code. Si vous avez besoin de la prise en charge des navigateurs hérités, la compilation à partir d'ES6 + sera bien sûr toujours nécessaire, mais uniquement pour la version de production. Par conséquent, vous simplifiez le débogage lors de l'exécution (d'où l'absence d'erreurs et d'avertissements lors de l'assemblage) et économisez beaucoup de temps.

MOINS / SCSS / PostCSS

De cet ensemble, mes favoris étaient MOINS et PostCSS. J'ai adoré LESS pour sa syntaxe plus «native» et la relative facilité des dépendances nécessaires à l'environnement de développement. PostCSS a aidé à créer toutes sortes d'astuces avec SVG et des préfixes de piste. Les inconvénients, comme dans le paragraphe précédent, j'appellerais la nécessité d'une recompilation constante. Eh bien, les dépendances elles-mêmes. Cependant, dans notre année 2018, nous avons une chose aussi merveilleuse que les variables CSS natives! C'est une chose extrêmement puissante qu'aucun préprocesseur ne peut comparer: vous pouvez redéfinir vos variables directement en runtime! Cela ouvre tout un monde de nouvelles possibilités. Par exemple, vous pouvez très simplement, "à la volée", changer les thèmes de l'application entière, ainsi que ses blocs individuels. Littéralement, un utilisateur peut coller un skin pour une application avec un sélecteur de couleurs, et pour cela, vous n'avez pas besoin de conserver des packages séparés avec des styles précompilés ou de surcharger votre JS avec une logique supplémentaire. Et bien plus, plus subtil et spécifique. Je choisis le CSS moderne natif. Mais si vous devez prendre en charge IE11, alors tristesse .

Réagir

React nous a apporté un nouveau concept de décomposition modulaire, qui correspondait très bien aux besoins de développement côté client, car la structure des composants répétait la structure de la présentation, simplifiant la perception et mettant de l'ordre aux chefs de développeurs. C’est pourquoi, à mon avis, il est devenu si populaire et c’est pourquoi il le remercie. Cependant, React acquiert de plus en plus les propriétés d'un culte du cargo: les gens commencent à le faire glisser dans des projets uniquement parce que "tout le monde le fait". Et c'est terrible, car le choix d'ingénierie, en particulier dans un problème aussi important, doit être aussi conscient que possible. Et pour être conscient, vous devez comprendre que React est plein de défauts. Pour moi, c'est d'abord qu'il s'agit d'une abstraction trop épaisse au-dessus du DOM natif et apporte une énorme quantité de ses propres spécificités que vous devez traiter au lieu de résoudre directement les problèmes. Cela est particulièrement ressenti et déprimant si vos tâches sont légèrement moins triviales que les moules banaux. Vous pouvez parler de ce sujet pendant longtemps, rappelez-vous JSX, VDOM et plus, mais pour nous maintenant la question principale est: quelle est l'alternative? Non, pas Vue. Et pas, surtout, angulaire. Pour moi, ce sont des composants Web: un ensemble de standards CustomElements + ShadowDOM + ES Modules + HTML Templates . Pourquoi? Parce que ce sont les normes prises en charge par la plate-forme Web elle-même, et non la méta-plate-forme et les modules complémentaires JS.

Vous pouvez diviser votre code en blocs soignés et l'organiser comme vous le souhaitez à l'aide de modules natifs. Oui, les modules sont pris en charge par tous les navigateurs modernes et vous n'avez pas besoin de reconstruire pendant le processus de développement. Oui, vous pouvez stocker des styles et des modèles séparément dans des modules. Oui, vous pouvez spécifiquement activer la prise en charge de la syntaxe pour ces fichiers et les utiliser en tant que HTML et CSS natifs. Le cycle de vie des composants Web vous aidera à organiser le rendu et les mises à jour sans analyse et modification inutiles de la structure du DOM. ShadowDOM vous permet de vous débarrasser des encombrants BEM et de ne pas vous soucier en outre de l'encapsulation des styles.
ShadowDOM est transparent pour les variables CSS et vous permet de passer des paramètres vers l'intérieur à partir de n'importe quel niveau d'imbrication approprié. Cela vous permet d'expérimenter la conception paramétrique et d'effectuer de nombreuses autres astuces. Les composants Web fonctionnent parfaitement avec l'API DOM habituelle tout en étant des éléments HTML à part entière: toutes les méthodes standard sont entre vos mains. Vous pouvez utiliser des attributs personnalisés pour passer des paramètres et des paramètres d'affichage (bien que, contrairement à React, vous ne pouvez pas passer autre chose que des chaînes et des valeurs booléennes, mais pour moi ce n'est pas du tout un problème). Votre code sera plus simple et plus rapide. Croyez-moi, j'ai pu comparer. Un peu triste: pour la plupart des utilisateurs, tout fonctionnera nativement, mais certains auront besoin de polyphiles . Si vos statistiques et votre public cible, principalement sur les navigateurs modernes, n'hésitez pas à vous plonger dans ce sujet, ça vaut le coup.

Redux / mobx

C'est plus compliqué. D'une part, il y a un tas d'articles énumérant les forces et les faiblesses et comparant différentes approches de stockage des états. Et pour aller aux détails - vous avez besoin d'un cas spécifique. Il s'est avéré que ce sujet me hante depuis un certain temps: je rencontre des tâches assez complexes de travail avec des données structurées complexes. Eh bien, en général: les données qui ne sont jamais proches de la réalité en pratique sont simples, commodément normalisées avec une hiérarchie universelle claire. Le plus souvent, il s'agit d'un graphique délicat, qui nécessite que vous disposiez initialement de la flexibilité maximale dans le système. Dans ce domaine, je suis un adepte de la construction de vélos, mais je ne recommanderai pas aveuglément ma propre voie à tout le monde. Ce que je peux certainement conseiller, c'est de ne pas dédaigner les principes fondamentaux de l'informatique moderne, de lire quelque chose de populaire sur la théorie des graphes, la théorie des ensembles, la théorie du chaos. De plus, je ne parle pas d'une sorte de hardcore: les idées les plus générales peuvent être très utiles et «vider le cerveau» de la bonne manière. Dans le cas simple, vous pourrez écrire votre propre dépôt d'état avec le blackjack et les abonnements à vos genoux, et ce ne sera pas plus difficile que de fouiller dans la documentation des bibliothèques populaires.

Webpack

Bien sûr, nous pouvons abandonner complètement le système d'assemblage. Mais résoudre la chaîne d'importation en code en temps réel n'est pas la chose la plus rapide. Par conséquent, nous avons toujours besoin de bundles pour la version de production. Eh bien, une sorte de minification / obscurcissement, encore une fois, et une distribution compacte pour papa ... C'est pourquoi nous quittons Webpack. Mais nous n'avons besoin pour lui que de quelques modules avec un minimum de configurations, et pas d'observateurs et de reconstructions pour le processus de développement. Personnellement, ma configuration de construction semble très compacte et ne nécessite pas un grand nombre de dépendances. Récemment, j'entends souvent parler du nouveau constructeur de colis, et son concept minimaliste me plaît beaucoup, mais, à ma connaissance, il ne fonctionne pas avec les modules ES et, à mon avis, c'est un fichier. J'espère que cela change.

Quel est le résultat

J'entends souvent l'opinion que si vous écrivez "vanille" - vous rencontrerez inévitablement le fait que votre projet se transformera bientôt en une bouillie non prise en charge avec des nouilles. Permettez-moi de parer: premièrement, si vous le souhaitez, la bouillie peut également être préparée à partir d'une réduction avec une réduction (j'en ai assez vu). Et deuxièmement, tout sera très bien si vous utilisez des modules, JSDoc et de bonnes pratiques de POO. Alors, où en sommes-nous:

JS + CSS + Composants Web + Webpack

Sur les cinq «tapis roulants», il n'en reste qu'un, significativement léger. Et cela suffit pour sentir les "ailes derrière".

PS Je n'affirme nullement que mes approches conviendront à tout le monde. Je vous demande de considérer cet opus au moins comme une occasion de réfléchir à ce qui nous semble acquis.