Mieux vaut perdre un jour

En investissant, il y a le concept de «mauvais maintenant - bon alors». L'investisseur grignote régulièrement 10, 20% voire 30% de ses gains pour l'avenir. Il investit cet argent dans des obligations, des actions, des OFZ, des ETF - qui en vaut la peine. Maintenant, en ce moment, l'investisseur retire ses gains, se prive de certains avantages, de sorte qu'à l'avenir, à l'horizon de 10 à 20 ans, il bénéficiera d'investissements. Les bénéfices futurs couvriront les difficultés actuelles. À propos de la même stratégie professée par Alexei Okhrimenko ( obenjiro ), mais en ce qui concerne le développement - il vaut mieux perdre une journée, puis voler en 5 minutes.


Source

Lors de la conférence Frontend Conf 2018, Alexey a expliqué comment, après avoir perdu beaucoup de temps maintenant, il l'a finalement sauvé plus tard. Ce rapport ne porte pas sur un sentiment d'ennui et non sur la façon de gérer les tâches monotones et routinières, mais sur la façon de passer du temps au maximum - combien, tout dépenser et voir ce qui en découle. La transcription du rapport est l'expérience de la rédaction d'outils de débogage, de test, d'optimisation, d'échafaudage et de validation pour différents projets. En prime, Alexey parlera d'un certain nombre d'outils existants et des avantages qu'ils apportent. Voyons si vous avez vraiment besoin de perdre du temps.

À propos de l'orateur: Alexei Okhrimenko est développeur chez Avito Frontend Architecture, où il améliore un peu la vie de millions de personnes. Dirige le podcast "5 min Angular" , et pendant son temps libre de sommeil et podcast, organise Angular Meetup avec les gars de Tinkoff, et fait un grand nombre de rapports différents et controversés .

Où puis-je perdre du temps?

La première étape consiste à acheter un Mac / iMac et à commencer immédiatement à perdre du temps, ou à mettre Linux sur un ordinateur portable et à y perdre tout son temps de travail, en changeant les configurations. Je recommande également fortement de commencer par Gentoo.

Il y a 8 points sur lesquels nous pouvons passer du temps.

• Terminal
  
• Conception.
  
• Créez un projet.
  
• Génération de code.
  
• Code d'orthographe.
  
• Refactoring
  
• Test.
  
• Débogage
  

Nous procédons à une solide perte en partant dans l'ordre.

Terminal

Où sur le terminal pouvons-nous passer notre temps à tout perdre? Organisez votre espace de travail - créez des dossiers «Mon travail», «Mes projets de loisirs» et mettez-y tout. Configurez-vous Homebrew pour installer des logiciels supplémentaires qui seront mentionnés.



Mettez iTerm2 et le terminal par défaut sur Mac - jetez-le.



Installez des modules complémentaires comme oh-my-zsh , qui viennent avec un tas de plugins très cool.



Livrer le multiplexeur terminal tmux . Il s'agit d'un programme pour le terminal, qui vous permet d'ouvrir plusieurs fenêtres dans une seule fenêtre et de prendre en charge en plus la session. Habituellement, si vous fermez le terminal, tout se brise et se termine, et tmux continuera de fonctionner, même si vous l’avez désactivé. Si je n'ai jamais travaillé avec tmux, je recommande une critique de DBMS Studio .



Prescrire des alias . Chaque fois que vous avez écrit plus d'une fois dans le terminal - écrivez-vous alias, cela vous sera utile. Deux fois - déjà beaucoup, il y en aura certainement une troisième, sixième et dixième.



Fournissez des outils supplémentaires, par exemple, jmespath ou sous une forme abrégée - jp. Il peut être installé via brew et faire des requêtes de requête intéressantes dans des fichiers JSON.

brew tap jmespath/jmespath brew instal jp 

Par exemple, vous avez compressé des fichiers JSON, vous pouvez parcourir tout et découvrir quelles versions de React dans vos applications et projets.

Automatisez votre travail - n'ouvrez pas les mêmes fichiers plusieurs fois!

Parlons maintenant de l'endroit où tout dépenser. Tout ce qui est au-dessus est une petite perte de temps, vous pouvez en perdre plus dans les scripts Shell.

Script shell

C'est un langage de programmation, principalement pour bash, avec sa propre syntaxe.

 #!/bin/bash for dir in 'ls $YOUR_TOP_LEVEL_FOLDER'; do for subdir in 'Is $YOUR_TOP_LEVEL_FOLDER/$dir' do $(PLAY AS MUCH AS YOU WANT); done done 

La langue est pleine - certaines personnes créent des jeux et des serveurs Web, ce que je ne conseille pas de faire. Je recommande tout le travail qui a pris le temps de le dépenser à nouveau et de tout écrire dans le fichier. Pourquoi? Tous les développeurs familiers qui travaillent dans l'industrie depuis longtemps créent simplement leur propre référentiel GitHub pour les configurations et y placent la configuration pour leur multiplexeur terminal TMUX, Shell Scripts pour l'initialisation.



Pourquoi consacrer une tonne de temps à ce qui a déjà été fait une fois? Ensuite, lorsque vous passez à un autre travail, ils changeront votre ordinateur au travail, la carte mère s'éteindra et vous passerez à nouveau un jour ou deux ou trois pour configurer l' environnement . Lorsque vous disposez d'un tel référentiel, la configuration et l'installation ne prendront que 10 minutes.

La conception

Habituellement, tout le monde est très inspiré à la fois: «Oui, le design! Diagrammes UML! », Mais quand je dis le mot UML à haute voix, de nombreux programmeurs familiers remarquent:

- En 2018?! Quel est le problème avec toi? UML est une terrible relique du passé. Pourquoi déterrer un cadavre? Lâche la pelle!

Mais UML est très utile. Par exemple, lors d'un rassemblement Scrum, un développeur Java écoute les programmeurs Python discuter de l'architecture des fonctionnalités backend. Il se frotte tristement la tête et se rend compte qu'il ne comprend rien, mais perd simplement une heure de son temps. Un développeur Java ne peut pas interagir avec les programmeurs Python - il ne dira pas comment écrire du code, utiliser des classes, des mixins ou quoi que ce soit d'autre. Il n'est tout simplement pas impliqué dans l'affaire. Notre entreprise dispose de JavaScript, Python et Lua. En ce moment, 2/3 des gens s'ennuient: d'abord les 2/3, puis les autres. UML résout ce problème.

UML est un langage visuel abstrait universel pour la conception de systèmes, qui vous permet d'ignorer les fonctionnalités des langages.

Je vais vous donner deux de mes exemples préférés.

Diagrammes de séquence

Ces diagrammes permettent de montrer l'historique des interactions au fil du temps.



Sur l'axe Y vertical, une dépendance temporelle descend: on obtient d'abord une demande d'authentification, puis on donne une réponse, puis on met quelque chose dans les logs. Sur l'axe horizontal X, il y a déjà une interaction directe entre les personnages - participants à un événement.

Personnellement, j'utilise périodiquement des diagrammes de séquence pour décrire l'authentification des processus dans les applications. Ce faisant, je, développeur JS, trouve un langage commun avec le backend de Python, Lua et Java. Nous nous comprenons tous et savons comment le code fonctionnera en conséquence, et nous ne nous soucions pas de l'implémentation spécifique de tel ou tel langage.

Diagramme de classe

Ces graphiques sont également très utiles. JavaScript a des classes, quel est l'intérêt des diagrammes? Mais il y a TypeScript, et avec lui, vous pouvez obtenir des interfaces, des classes abstraites - une représentation complète de l'architecture finale.

Une minute de conception permet d'économiser une semaine de codage.

PlantUML

J'utilise la bibliothèque Java PlantUML . Avec lui, vous pouvez utiliser un DSL compliqué, dans lequel, par exemple, indiquer que List est hérité de AbstractList, Collection from AbstractCollection, ainsi que l'interaction, l'agrégation, les propriétés, les interfaces et tout le reste.

 @startuml abstract class AbstractList abstract AbstractCollection interface List interface Collection List <|— AbstractList Collection <|— AbstractCollection Collection <|— List AbstractCollection <|— AbstractList AbstractList <|— ArrayList class ArrayList { Object[ ] elementData size() } enum TimeUnit { DAYS 

En conséquence, j'obtiens le diagramme final.



Tout cela fonctionne bien, il existe des plugins pour Visual Studio Code.
Il existe une autre application intéressante.

StarUML

Nous dessinons le diagramme le plus simple: il existe une classe de base dont la classe de test est héritée.



Ensuite, nous utilisons StarUML . Ce n'est pas trop cher et peut exporter vers Java. Il n'y a pas d'outil qui permettrait d'exporter des diagrammes UML en code TypeScript, mais nous pouvons exporter simplement en utilisant StarUML en code Java.

Jsweet

Ensuite, nous appliquons JSweet - une bibliothèque qui vous permet de convertir du code Java en code TypeScript ou JavaScript.



Code Java ...

 import java.until.*; /** * */ public class BaseClass { /** * Default constructor */ public BaseClass(){ } /** * some attribute */ protected String baseAttribute; } 

... en utilisant JSweet convertir en code TypeScript:

 /* Generated from Java with JSweet 2.0.0 — <a href="http://www.jsweet.org/">http://www.jsweet.org</a> */ /** * Default constructor * @class */ class BaseClass { public constructor) { this.baseAttribute = null; } /** * some attribute */ baseAttribute : string; } BaseClass["_class«] = «BaseClass»; 

Il y a un paramètre supplémentaire _class - c'est une fonctionnalité de Java, cela peut être supprimé. En conséquence, nous avons obtenu un passe-partout prêt à l'emploi de code TypeScript à partir de diagrammes - une base sur laquelle vous pouvez travailler. De plus, cette base est conçue et claire pour tout le monde.

Passer du temps à concevoir UML en vaut vraiment la peine.

Création de projet

Qui configure Webpack à chaque fois et crée webpack-config dans un nouveau projet - les gars, qu'est-ce qui ne va pas avec vous?! Tout va bien? Avez-vous besoin d'aide? Si vous êtes pris en otage - écrivez les coordonnées dans les commentaires, nous enverrons un hélicoptère de sauvetage.

Le moyen le plus simple d'éviter cela et de ne pas configurer la même chose à chaque fois est de créer un référentiel commun sur GitHub localement ou d'augmenter le CI GitLub, de cloner ce référentiel, d'y accéder et de supprimer le dossier git.

 git clone something cd something rm -rf .git 

Nous avons maintenant un projet de référence à partir duquel nous clonons. Avec cette approche, vous pouvez obtenir un amorçage très bon marché.

Yeoman - obsolète. Slush - obsolète

Cette dépréciation de Yeoman est trop arrogante. Il n'est pas obsolète, il est de moins en moins utilisé comme Slush . Ce sont deux outils identiques, mais avec une base différente: Yeoman est Grunt et la génération de code. Slush est Galp et la génération de code .

Malgré le fait que les outils soient intéressants, maintenant d'autres sont plus souvent utilisés.

CLI angulaire, Create React App, Vue CLI

Qui travaille avec Angular - utilisez la CLI Angular. Créer l'application React - qui fonctionne avec React. Vue CLI - fans de Vue.JS.

La plupart sont déjà passés à ces outils. L'un des principaux arguments pour lesquels il vaut la peine de travailler avec la CLI est l' uniformité . Si vous avez oublié de récupérer votre projet à l'aide de la CLI, vous êtes sûr que la personne qui vous suivra connaîtra la structure du projet: équipes, fonctionnalités, que vous pouvez exécuter de bout en bout et des tests unitaires. Ces outils sont très bons.

Vaut-il la peine de passer du temps sur des projets d'amorçage à l'aide de la CLI, plutôt que Yeoman? Oui, n'hésitez pas.

Génération de code

Nous avons une certaine base de code. Habituellement, lorsque nous démarrons un projet, nous créons d'abord le routage, puis Redux - comment pouvons-nous nous en passer? Chaque framework dispose d'un outil de génération de code spécialisé. Dans Angular, il s'agit de CLI Schematics . Vue CLI a une section distincte pour générer des plugins Vue CLI : vous pouvez générer du code pour nos projets dans la section plugins.

CLI Redux

Je veux me concentrer sur React et Redux CLI, car d'après ma pratique, ce sont les programmeurs React qui sont les moins impliqués dans la génération de code et ça fait mal de le regarder. Chaque fois que les gens créent les mêmes fichiers et se plaignent qu'il est difficile de travailler avec Redux, vous devez créer un tas de tout. Il y a donc déjà des outils!

Il s'agit de la CLI Redux , qui créera pour vous un fichier d'ancrage, dans lequel il y aura des effets, des réducteurs, et les actions correspondantes, et des composants "stupides" et des composants "intelligents". De plus, vous pouvez générer vos composants ou votre base de code à l'aide de la CLI Redux. La CLI Redux est installée simplement, vous pouvez soit créer un projet à l'aide de celui-ci, soit l'initialiser dans un projet prêt à l'emploi, par exemple, créé à l'aide de l'application Create React.

 npm i redux-cli -g blueprint new <project name> blueprint init blueprint g dumb SimpleButton 

Il existe un autre outil universel qui ne dépend pas du cadre - Plop .

Plop

Je l'ai découvert récemment. Plop fait de même que le précédent: en initialisant cet outil, vous pouvez créer tous les composants de base nécessaires. Indiquez les composants de votre application et générez-les. Vous ne perdez donc pas de temps à créer la base de code principale. Ayant une histoire utilisateur et des spécifications, vous pouvez générer des fonctionnalités de base, des tests, des styles de base - économiser une énorme quantité de travail .

Vous devrez régler tous les outils - je syntonise périodiquement React Blueprint, je crée ma bibliothèque de composants, mais cette fois, c'est payant .

Écriture de code

Il y aura banalité.

Extraits de code

Les extraits de code vous permettent d'écrire un petit fragment, un mot de code clé et d'obtenir une fonctionnalité prête à l'emploi. Par exemple, vous pouvez créer un composant angulaire en écrivant @Component .


Pour React et Vue, il existe les mêmes extraits de code.

Il y a un problème avec les extraits de code courants. Plus le développeur est professionnel, moins il utilise d'extraits de code - simplement parce qu'il sait déjà comment tout est écrit et qu'il est trop paresseux pour les créer. Il s'est déjà rappelé comment écrire ce composant.

Permettez-moi de vous rappeler que notre objectif est de passer du temps sans rien faire d'utile. Par conséquent, nous nous asseyons et écrivons des extraits de code. Ici, vous pouvez passer un temps infiniment grand et l'objectif sera atteint.

Personnellement, les extraits de code m'ont été utiles lorsque j'ai travaillé avec i-bem.js :

 modules.define("button<i>«,</i> [«i-bem-dom»], function(provide, bemDom) { provide( bemDom.declBlock( this.name, { /*   */ }, { /*   */ } ) ); }); 

Il n'y a rien de compliqué dans cette déclaration, mais la syntaxe n'est ni Angular, ni React, ni Vue, et il est très difficile de s'en souvenir les cent premières fois. On se souvient de cent et unième. J'ai été tourmenté, j'ai passé beaucoup de temps, puis j'ai commencé à créer en masse ces composants simplement parce que j'ai utilisé des extraits de code.

Pour ceux qui travaillent avec WebStorm, ce n'est pas très utile, simplement parce qu'il n'a pas un si grand écosystème de plug-ins et, fondamentalement, tout est inclus au départ - c'est un IDE à part entière .

Extensions VScode / extensions VIM

La situation avec les éditeurs de Visual Studio Code et VIM est différente. Pour en tirer un avantage, vous devez installer des plugins. Vous pouvez passer plusieurs jours pour trouver tous les bons plugins et les installer - il y a beaucoup de plugins!



J'ai tué un temps fou pour les rechercher, ce que je vous recommande. Vous pouvez vous asseoir pendant des heures, les regarder, les regarder, de beaux gifs animés - un miracle! Écrivez dans les commentaires si vous voulez que je partage tout ce que j'ai.

Il existe des outils qui mettent automatiquement en évidence la complexité du code, qui passe les tests, qui ne le font pas, lorsque vous pouvez voir la raison de l'échec directement dans le code, quel code a réussi ou non, les compléments automatiques, les préfixes automatiques - tout cela dans les plugins.

Ici, vous pouvez passer beaucoup de temps et nous atteindrons notre objectif. Bien sûr, les plugins ne sont pas un peu pertinents pour écrire du code, mais imaginez qu'ils nous aident à l'écrire.

Refactoring

Ceci est mon sujet préféré! Et à tel point que j'ai un rapport séparé sur le refactoring: «Refactoring - Où? Où aller? Quand? D'où? Pourquoi? Pourquoi et comment? " Je dis en détail ce que c'est et comment travailler avec.

Je vous préviens tout de suite , le refactoring n'est pas ce que vous imaginez habituellement . Habituellement, cela signifie: "J'ai amélioré la base de code et ajouté une nouvelle fonctionnalité." Ce n'est pas du refactoring. Si vous avez une dissonance cognitive en ce moment, regardez le rapport et il passera.

AngularJS Grunt -> webpack

À propos de la refactorisation Je veux raconter une histoire instructive. Nous avions un très vieux projet AngularJS, qui a été construit en utilisant Grunt avec une concaténation banale. Le projet a été écrit lors des première et deuxième versions d'Angular. En conséquence, tout était très simple là-bas: les fichiers étaient concaténés, puis uglifiés, et c'est tout. À un moment donné, nous avons réalisé que nous devions passer à Webpack. Nous avons une énorme base de code héritée - comment la traduire en Webpack?

Nous avons fait quelques visites intéressantes. Tout d'abord, ils se sont tournés vers la bibliothèque lebab.io .

Lebab.io

Cette bibliothèque vous permet de convertir du code d'ES5 en ES6, et très bien. Elle prend l'ancienne base de code et la transforme en une nouvelle: insère des importations, utilise de nouvelles lignes, classes, définit let et const correctement - tout fait pour vous. À cet égard, une très bonne bibliothèque.



Nous avons installé ce plugin, exécuté le code du fichier via Lebab.io . Après cela, ils ont juste pris les modèles Moustache et le code, qui avait l'air différent sous les nouveaux Angular 1.6 et 1.5 avec une approche en composants. Avec l'aide des habitués, nous avons retiré les pièces nécessaires, avec Moustache, nous avons rendu notre modèle d'une manière différente et avons parcouru tous nos fichiers.

 var object_to_render = {key: «value», ...}; fs.readFile(path_to_mustache_template, function (err, data) { if (err) throw err; var output = Mustache.render(data.toString(), object_to_render); fs.saveFileSync(path_to_mustache_template); }): 

En conséquence, nous avons converti une énorme quantité de code hérité en un format moderne et rapidement connecté Webpack. Pour moi personnellement, l'histoire est très instructive.

Jsfmt

Il s'agit d'un outil qui vous permet de formater la base de code et de la rechercher non pas avec une recherche régulière, mais sémantiquement . Nous connectons notre bibliothèque, notre système de fichiers, lisons le fichier et voulons trouver quelque chose. Ci-dessous un exemple abstrait, nous travaillons actuellement avec Angular.

 var jsfmt = require('jsfmt'); var fs = require('fs'); var js = fs.readFileSync('component.js'); jsfmt.search(js,"R.Component(a, { dependencies : z })").map((matches, wildcards) => { console.log(wildcards.z); }); 

Voici à quoi ressemble notre demande:

 <b>R.Component</b> (a, { dependencies: z }) 

R/Component est sa propre bibliothèque R et certains Component .

Cette partie a l'air très étrange:

 R.Component<b> (<u>a</b></u>, { dependencies: <b><u>z</b></u> }) 

Cela ne semble pas être du JavaScript valide - et c'est le cas. Nous insérons de petites lettres, comme des espaces réservés, et disons à Jsfmt que nous ne sommes pas intéressés par ce qui est là: un objet ou un tableau, une chaîne ou une valeur booléenne, nulle ou non définie - cela n'a pas d'importance. Il est important pour nous d'obtenir des liens vers a et z , après quoi, lorsque nous parcourons toute la base de code, nous trouverons toutes les variantes de z . Par exemple, nous pouvons trouver toutes les dépendances de ce composant. Grâce à cela, vous pouvez faire un refactoring complexe.

En utilisant l'outil, j'ai pu refactoriser une énorme base de code avec une approche sémantique utilisant des arbres et des analyses.

Je n'avais pas besoin d'écrire des requêtes complexes, des habitués complexes ou d'analyser un arbre de syntaxe - je viens de former une requête et d'indiquer pour quoi changer.

Deux outils supplémentaires

En refactorisation, il y a une chose simple que je dois dire. Si vous souhaitez refactoriser quelque chose, dans le code Visual Studio, sélectionnez le code, et il y aura des conseils et des options de refactoring qui sont là. Par exemple, une méthode d'extraction, une méthode en ligne.


WebStorm dispose d'un menu contextuel qui peut être appelé à l'aide d'une combinaison de touches, selon la configuration, et d'une base de code réformée.

En général, WebStorm a plus de commandes; il est maintenant plus développé que Visual Studio Code.

Test

Maintenant, le plus intéressant et le plus inspirant :)

Selenium IDE

D'abord une petite histoire. Les testeurs sont venus me voir et ont dit:

- Nous écrivons des tests de bout en bout, nous voulons les automatiser et nous avons un IDE Selenium.

L'IDE Selenium n'est qu'un plugin pour Firefox qui enregistre vos actions dans un navigateur. Il se souvient de toutes vos étapes - clics, parchemins, entrées, transitions, et vous pouvez à nouveau perdre ces étapes. Mais ce n'est pas tout. Vous pouvez exporter ce que vous avez écrit, par exemple, en Java ou en Python, et exécuter des tests automatisés de bout en bout à l'aide de l'IDE Selenium.

Cela semble génial, mais en réalité l'IDE Selenium en lui-même ne fonctionne pas parfaitement, et d'ailleurs, à cette époque, nous avions encore des ExtJ .

Extjs

Si vous aviez ExtJs - sympathisez et étreignez. L'IDE Selenium écrit toujours le sélecteur le plus unique. Sur nos éléments, c'est id. Mais les ExtJ pour chaque élément génèrent un identifiant aléatoire, je ne sais pas pourquoi. Ce problème avec ExtJs est fourni avec la version zéro.

 ExtJS = <div id="random_6452"/> 

En conséquence, nos testeurs ont ouvert l'application le matin, ont tout enregistré, puis, sans recharger la page , l'ont périodiquement exécutée, essayant de comprendre si le backend, par exemple, s'était cassé. Ils ont mis à jour le backend, mais n'ont pas touché le frontend. L'essentiel n'était pas de cliquer sur Actualiser, car après cela, un nouvel identifiant était généré.

Les testeurs ont immédiatement proposé une idée brillante. Selenium IDE peut exporter ses enregistrements au format HTML - nous pouvons travailler avec HTML, nous avons des moteurs de modèles - essayons de le faire!

Extension Google Chrome

Créez rapidement une extension Google Chrome et trouvez immédiatement la méthode chic elementFromPoint .

 document.elementFromPoint(x, y); 

Trite enregistrant le mouvement de la souris sur la fenêtre puis appelant elementFromPoint, lorsque le clic a fonctionné, j'ai trouvé les coordonnées de l'élément sur lequel j'ai cliqué. En outre, il était nécessaire de créer un certain sélecteur, d'une manière ou d'une autre, pour sélectionner spécifiquement cet élément. L'ID ne peut pas être utilisé - que faire?

Une idée est venue - accrocher en outre un test-id spécial sur les composants. Un identifiant de test abstrait a été créé pour le composant, qui n'était nécessaire que pour les tests.

 data-test-id="ComponentTestId« 

Il a été généré uniquement dans un environnement de test, et nous l'avons select en fonction de l'attribut data. Mais cela ne suffisait pas toujours. Par exemple, nous avons un composant, mais à l'intérieur il y a toujours un div , span , icon , icon dans l'i-tag. Que faire à ce sujet?

Pour cette queue, nous avons également généré XPath :

 function createXPathFromElement(elm) { var allNodes = document.getElementsByTagName('*'); for (var segs = [ ]; elm && elm.nodeType = 1; elm = elm.parentNode) { if (elm.hasAttribute('class')) { segs.unshift(elm.localName.toLowerCase() + '[a)class = «' + elm.getAttribute('class') + ' »] '); } else { for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) { if (sib.localName = elm.localName) i++; }; segs.unshift(elm.localName.toLowerCase() + '[' + i + ']'); }; }; return segs.length ? '/' + segs.join('/') : null; }; 

En conséquence, un sélecteur XPath unique est formé, qui se compose, dans un cas réussi, de l'attribut de données du sélecteur par l'attribut de données avec le nom du composant:

 <b><u>.//*[@data-test-id='ComponentName']</b></u>/ul/li/div/p[2] 

S'il y avait encore une sorte de structure complexe à l'intérieur du composant, tout le reste se démarquait selon XPath strict - sans id. Nous avons évité id parce que nous avons travaillé avec ExtJs.

Ce XPath pourrait être facilement testé. Nous avons tous enregistré, réexporté vers le document HTML, téléchargé à nouveau vers l'IDE Selenium et l'avons exécuté.



Nous avons créé l'extension Chrome, qui a simplement généré le format d'enregistrement Selenium IDE, mais à sa manière, pas comme le fait Selenium IDE. Là, nous avons ajouté de nombreux contrôles intelligents pour le défilement de spinner, le chargement réussi de l'application - nous avons ajouté des nuances supplémentaires que l'IDE Selenium ne prend pas en compte. Grâce à cela, nous avons des tests de bout en bout entièrement automatisés.

La seule chose qui restait aux testeurs à faire après cela était d'ouvrir n'importe quelle version de l'application, de cliquer, de télécharger sur Selenium IDE, de vérifier, de l'enregistrer en tant que code Python, de profiter de l'augmentation du salaire et du bonus et de me dire "merci".

Pour les tests unitaires, je ne peux pas plaire aux gens des communautés React et VueJS - désolé! Je ne connais pas d'outils similaires pour React et VueJS - peut-être qu'ils le sont. Je ne ferai que plaire à ceux avec Angular.

Simontest

Il existe un plug- in SimonTest dans Visual Studio Code for Angular.



unit- — unit-. :

• , ;
  
• .
  

- - , - . , unit-.

— .

Débogage

80% , 80% .

, ? ?

Chrome DevTools

, - , , , .



Debugger ? - - , . Profiler, , Dumps, runtime, , , .

Tracing

— : . runtime : , , — promise, setTimeout, setTimeout promise. .

Spy-js vs TraceGL

: Spy-js TraceGL . , . Debugger : , — ? , , — .

, , — , . , deadlocks — deadlock , .

JS , . . deadlocks .

Spy-js WebStorm, , . spy-js. TraceGL Mozilla. , , Firefox -. TraceGL , , , . TraceGL Chrome , , .

, WebStorm, Spy-js. : Spy-js, , . WebStorm : TypeScript, CoffeeScript, . Spy-js, , , , . .

, , 5 , : , , , . — , , .

?

• .
  
• , - , , -.
  
• . .
  
• — , , ;
  
• , : .
  
• , , — , .
  
• — .
  
• , ! .
  

? «, »:

— ! : , 5 ! !

— 2018 . Frontend Conf . ++. Ça vous a plu? ! Frontend Conf ++ , : , , .

. ..