Besser einen Tag verlieren

Beim Investieren gibt es das Konzept „Schlecht jetzt - gut dann“. Der Investor knabbert regelmäßig 10, 20% oder sogar 30% seines Gewinns für die Zukunft ab. Er investiert dieses Geld in Anleihen, Aktien, OFZs, ETFs - wer ist das sehr wert? Jetzt, im Moment, nimmt der Investor seine Gewinne weg, beraubt sich einiger Vorteile, so dass er in Zukunft, am Horizont von 10 bis 20 Jahren, von Investitionen profitieren wird. Gewinne in der Zukunft werden die heutigen Nöte abdecken. Etwa die gleiche Strategie wie Alexei Okhrimenko ( obenjiro ), aber im Hinblick auf die Entwicklung - es ist besser, einen Tag zu verlieren und dann in 5 Minuten zu fliegen.


Quelle

Auf der Frontend Conf 2018 erzählte Alexey, wie er, nachdem er jetzt viel Zeit verloren hat, diese letztendlich später speichern kann. In diesem Bericht geht es nicht um Langeweile und nicht darum, wie man mit monotonen und routinemäßigen Aufgaben umgeht, sondern darum, wie man Zeit maximal verbringt - wie viel ist, alles ausgibt und sieht, was daraus wird. Das Transkript des Berichts ist die Erfahrung mit Schreibwerkzeugen zum Debuggen, Testen, Optimieren, Gerüsten und Validieren für verschiedene Projekte. Als Bonus wird Alexey über eine Reihe vorhandener Tools und deren Vorteile sprechen. Lassen Sie uns herausfinden, ob Sie überhaupt Zeit damit verschwenden müssen.

Über den Sprecher: Alexei Okhrimenko ist Entwickler bei Avito Frontend Architecture, wo er das Leben von Millionen von Menschen ein wenig verbessert. Leitet den Podcast „5 min Angular“ und organisiert in seiner Freizeit aus Schlaf und Podcast zusammen mit den Jungs von Tinkoff Angular Meetup und macht eine Vielzahl unterschiedlicher und kontroverser Berichte .

Wo kann ich Zeit verlieren?

Der Nullschritt besteht darin, einen Mac / iMac zu kaufen und sofort Zeit zu verlieren, oder Linux auf einen Laptop zu setzen und die gesamte Arbeitszeit darin zu verlieren, indem Sie die Konfiguration ändern. Ich empfehle auch sehr, mit Gentoo zu beginnen.

Es gibt 8 Punkte, für die wir Zeit aufwenden können.

• Terminal
  
• Design.
  
• Erstellen Sie ein Projekt.
  
• Codegenerierung.
  
• Rechtschreibcode.
  
• Refactoring
  
• Testen.
  
• Debuggen
  

Wir gehen in der Reihenfolge zu einem soliden Verlust über.

Terminal

Wo auf dem Terminal können wir unsere Zeit verbringen, um alles zu verlieren? Organisieren Sie Ihren Arbeitsbereich - erstellen Sie Ordner "Meine Arbeit", "Meine Hobbyprojekte" und legen Sie alles darin ab. Stellen Sie Homebrew ein , um zusätzliche Software zu installieren, die erwähnt wird.



Setzen Sie iTerm2 und das Standardterminal auf den Mac - werfen Sie es weg.



Installieren Sie Add-Ons wie oh-my-zsh , die eine Reihe sehr cooler Plugins enthalten.



Liefern Sie den Multiplexer tmux - terminal. Dies ist ein Programm für das Terminal, mit dem Sie mehrere Fenster in einem Fenster öffnen und zusätzlich die Sitzung unterstützen können. Wenn Sie das Terminal schließen, wird normalerweise alles unterbrochen und beendet, und tmux funktioniert weiterhin, auch wenn Sie es ausgeschaltet haben. Wenn ich noch nie mit tmux gearbeitet habe, empfehle ich eine Überprüfung von DBMS Studio .



Verschreibe Aliase . Jedes Mal, wenn Sie etwas mehr als einmal in das Terminal geschrieben haben - schreiben Sie sich einen Alias, wird es nützlich sein. Zwei Mal - schon viel, wird es sicherlich ein drittes, sechstes und zehntes geben.



Stellen Sie zusätzliche Tools bereit , z. B. jmespath oder in Kurzform - jp. Es kann durch Brew installiert werden und interessante Abfrageanforderungen in JSON-Dateien stellen.

brew tap jmespath/jmespath brew instal jp 

Wenn Sie beispielsweise JSON-Dateien gepackt haben, können Sie alles durchgehen und herausfinden, welche Versionen von React in Ihren Anwendungen und Projekten enthalten sind.

Automatisieren Sie Ihre Arbeit - öffnen Sie nicht mehrmals dieselben Dateien!

Sprechen wir jetzt darüber, wo wir alles ausgeben sollen. Alles, was oben steht, ist ein kleiner Zeitverlust. In Shell-Skripten können Sie mehr verlieren.

Shell-Skript

Es ist eine Programmiersprache, hauptsächlich für Bash, mit eigener Syntax.

 #!/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 

Die Sprache ist voll - einige Leute erstellen Spiele und Webserver, was ich nicht rate. Ich empfehle alle Arbeiten, die die Zeit in Anspruch genommen haben, um sie wieder auszugeben und alles vollständig in die Datei zu schreiben. Warum? Alle bekannten Entwickler, die schon lange in der Branche tätig sind, erstellen einfach ihr eigenes GitHub-Repository für Konfigurationen und platzieren dort die Konfiguration für ihren TMUX-Terminal-Multiplexer Shell Scripts zur Initialisierung.



Warum viel Zeit mit dem verbringen, was bereits einmal gemacht wurde? Wenn Sie dann zu einem anderen Job wechseln, wird Ihr Computer bei der Arbeit gewechselt, das Motherboard brennt aus und Sie verbringen ein oder zwei oder drei Tage erneut damit, die Umgebung einzurichten. Wenn Sie über ein solches Repository verfügen, dauert die Einrichtung und Installation nur 10 Minuten.

Design

Normalerweise ist jeder auf einmal sehr inspiriert: „Ja, Design! UML-Diagramme! “, Aber wenn ich das Wort UML laut ausspreche, bemerken viele bekannte Programmierer:

- Im Jahr 2018 ?! Was ist los mit dir? UML ist ein schreckliches Relikt der Vergangenheit. Warum graben Sie eine Leiche aus? Lass die Schaufel fallen!

Aber UML ist sehr nützlich. Beispielsweise hört ein Java-Entwickler bei einer Scrum-Rallye zu, während Python-Programmierer die Architektur von Backend-Funktionen diskutieren. Er reibt sich traurig den Kopf und merkt, dass er nichts versteht, sondern nur eine Stunde seiner Zeit verliert. Ein Java-Entwickler kann nicht mit Python-Programmierern interagieren - er sagt nicht, wie er Code schreiben, Klassen, Mixins oder etwas anderes verwenden soll. Er ist einfach nicht in die Sache involviert. Unsere Firma hat JavaScript, Python und Lua. Im Moment langweilen sich 2/3 der Menschen: zuerst 2/3, dann andere. UML löst dieses Problem.

UML ist eine universelle abstrakte visuelle Sprache für das Systemdesign, mit der Sie die Funktionen von Sprachen ignorieren können.

Ich werde zwei meiner Lieblingsbeispiele nennen.

Sequenzdiagramme

Diese Diagramme zeigen den Verlauf der Interaktion im Zeitverlauf.



Auf der vertikalen Y-Achse nimmt eine zeitliche Abhängigkeit ab: Zuerst erhalten wir eine Authentifizierungsanforderung, dann geben wir eine Antwort und dann fügen wir etwas in die Protokolle ein. Auf der horizontalen Achse X besteht bereits eine direkte Interaktion zwischen den Charakteren - Teilnehmer in einigen Fällen.

Persönlich verwende ich regelmäßig Sequenzdiagramme , um die Prozessauthentifizierung in Anwendungen zu beschreiben. Dabei finde ich als JS-Entwickler eine gemeinsame Sprache mit dem Backend von Python, Lua und Java. Wir alle verstehen uns und wissen, wie der Code als Ergebnis funktioniert, und wir kümmern uns nicht um die spezifische Implementierung dieser oder jener Sprache.

Klassendiagramm

Diese Diagramme sind auch sehr nützlich. JavaScript hat Klassen, wozu dienen Diagramme? Aber es gibt TypeScript, mit dem Sie Schnittstellen und abstrakte Klassen erhalten - eine vollständige Darstellung der endgültigen Architektur.

Eine Minute Design spart eine Woche Codierung.

PlantUML

Ich benutze die PlantUML Java Bibliothek. Damit können Sie eine komplizierte DSL-Datei verwenden, in der beispielsweise angegeben wird, dass List von AbstractList, Collection von AbstractCollection sowie von Interaktion, Aggregation, Eigenschaften, Schnittstellen und allem anderen geerbt wird.

 @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 

Als Ergebnis erhalte ich das endgültige Diagramm.



All dies funktioniert gut, es gibt Plugins für Visual Studio Code.
Es gibt noch eine andere interessante Anwendung.

StarUML

Wir zeichnen das einfachste Diagramm: Es gibt eine Basisklasse, von der die Testklasse geerbt wird.



Als nächstes verwenden wir StarUML . Es ist nicht zu teuer und kann nach Java exportiert werden. Es gibt kein Tool, das UML-Diagramme in TypeScript-Code exportieren würde, aber wir können nur mit StarUML in Java-Code exportieren.

Jsweet

Dann wenden wir JSweet an - eine Bibliothek, mit der Sie Java-Code in TypeScript- oder JavaScript-Code konvertieren können.



Java Code ...

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

... mit JSweet in TypeScript-Code konvertieren:

 /* 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»; 

Hier gibt es einen zusätzlichen Parameter _class - dies ist eine Funktion von Java, die gelöscht werden kann. Als Ergebnis haben wir ein fertiges Boilerplate mit TypeScript-Code aus Diagrammen erhalten - eine Basis, auf der Sie arbeiten können. Darüber hinaus ist diese Basis für alle konzipiert und klar.

Es lohnt sich auf jeden Fall, Zeit mit dem Entwerfen von UML zu verbringen.

Projekterstellung

Wer konfiguriert Webpack jedes Mal und erstellt Webpack-Konfiguration in einem neuen Projekt - Leute, was ist los mit dir ?! Alles ist gut? Benötigen Sie Hilfe? Wenn Sie als Geisel gehalten werden - schreiben Sie die Koordinaten in die Kommentare, wir schicken einen Rettungshubschrauber.

Der einfachste Weg, dies zu vermeiden und nicht jedes Mal dasselbe zu konfigurieren, besteht darin , ein gemeinsames Repository auf GitHub lokal zu erstellen oder GitLub CI zu starten, dieses Repository zu klonen, es zu durchsuchen und den Git-Ordner zu löschen.

 git clone something cd something rm -rf .git 

Jetzt haben wir ein Referenzprojekt, aus dem wir klonen. Mit diesem Ansatz können Sie sehr billiges Bootstrapping erhalten .

Yeoman - veraltet. Matsch - veraltet

Dass Yeoman veraltet ist, ist zu arrogant. Es ist nicht veraltet, nur immer weniger verwenden, wie Slush . Dies sind zwei identische Tools, nur mit einer anderen Basis: Yeoman ist Grunt und Codegenerierung. Slush ist Galp und Codegenerierung .

Trotz der Tatsache, dass die Tools interessant sind, werden jetzt häufiger andere verwendet.

Angular CLI, React App erstellen, Vue CLI

Wer arbeitet mit Angular - verwenden Sie die Angular CLI. React App erstellen - wer arbeitet mit React? Vue CLI - Fans von Vue.JS.

Die meisten sind bereits zu diesen Tools übergegangen. Eines der Hauptargumente, warum es sich lohnt, mit der CLI zu arbeiten, ist die Einheitlichkeit . Wenn Sie vergessen haben, Ihr Projekt über die CLI abzurufen, sind Sie sicher, dass die Person, die nach Ihnen kommt, die Struktur des Projekts kennt: Teams, Funktionen, die Sie durchgängig und Unit-Tests durchführen können. Diese Werkzeuge sind sehr gut.

Lohnt es sich, Zeit mit Bootstrapping-Projekten über die CLI zu verbringen, anstatt mit Yeoman? Ja, zögern Sie nicht.

Codegenerierung

Wir haben eine bestimmte Codebasis. Wenn wir ein Projekt starten, erstellen wir normalerweise zuerst das Routing und dann Redux - wie können wir darauf verzichten? Jedes Framework verfügt über ein spezielles Tool zur Codegenerierung. In Angular ist dies CLI Schematics . Vue CLI verfügt über einen separaten Abschnitt zum Generieren von Vue CLI-Plugins : Im Abschnitt Plugins können Sie Code für unsere Projekte generieren .

Redux CLI

Ich möchte mich auf die React- und Redux-CLI konzentrieren, da nach meiner Praxis die React-Programmierer am wenigsten an der Codegenerierung beteiligt sind und es weh tut, sie anzusehen. Jedes Mal, wenn Leute dieselben Dateien erstellen und sich beschweren, dass es schwierig ist, mit Redux zu arbeiten, müssen Sie eine Menge von allem erstellen. Es gibt also schon Werkzeuge!

Dies ist die Redux-CLI , mit der eine Dock-Datei für Sie erstellt wird, in der Effekte und Reduzierungen sowie die entsprechenden Aktionen und "dumme" Komponenten und "intelligente" Komponenten enthalten sind. Darüber hinaus können Sie Ihre Komponenten oder Codebasis mithilfe der Redux-CLI generieren. Redux CLI wird einfach installiert. Sie können entweder ein Projekt damit erstellen oder es in einem vorgefertigten Projekt initialisieren, das beispielsweise mit der Create React App erstellt wurde.

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

Es gibt ein anderes universelles Werkzeug, das nicht vom Framework abhängt - Plop .

Plop

Ich habe kürzlich von ihm erfahren. Plop macht dasselbe wie das vorherige: Durch Initialisieren dieses Tools können Sie alle erforderlichen Basiskomponenten erstellen. Geben Sie an, aus welchen Komponenten Ihre Anwendung besteht, und generieren Sie sie einfach. Sie verschwenden also keine Zeit mit der Erstellung der Hauptcodebasis. Mit einer User Story und Spezifikation können Sie grundlegende Funktionen, Tests und grundlegende Stile generieren - sparen Sie eine Menge Arbeit .

Sie müssen alle Tools optimieren - ich stelle regelmäßig React Blueprint ein, erstelle meine Komponentenbibliothek, aber diesmal zahlt es sich aus .

Code schreiben

Es wird Trivialität geben.

Code-Schnipsel

Mit Codefragmenten können Sie ein kleines Fragment, ein Schlüsselcodewort, schreiben und eine vorgefertigte Funktionalität erhalten. Sie können beispielsweise eine @Component erstellen, indem Sie @Component schreiben.


Für React und Vue gibt es dieselben Codefragmente.

Es gibt ein Problem mit gängigen Codefragmenten. Je professioneller der Entwickler, desto weniger verwendet er Codefragmente - einfach weil er bereits weiß, wie alles geschrieben ist und er zu faul ist, um sie zu erstellen. Er erinnerte sich bereits daran, wie man diese Komponente schreibt.

Ich möchte Sie daran erinnern, dass es unser Ziel ist, Zeit zu verbringen, ohne etwas Nützliches zu tun. Deshalb setzen wir uns und schreiben Code-Schnipsel. Hier können Sie unendlich viel Zeit verbringen, und das Ziel wird erreicht.

Persönlich haben sich Schnipsel als nützlich erwiesen, als ich mit i-bem.js gearbeitet habe :

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

Diese Deklaration ist nicht kompliziert, aber die Syntax ist weder Angular noch React noch Vue, und es ist sehr schwierig, sich die ersten hundert Male daran zu erinnern. Einhundertein wird erinnert. Ich wurde gequält, verbrachte viel Zeit und begann dann, diese Komponenten in Massen zu erstellen, einfach weil ich Codefragmente verwendete.

Für diejenigen, die mit WebStorm arbeiten, ist dies nicht sehr nützlich, einfach weil es kein so großes Ökosystem an Plug-Ins gibt und im Grunde alles anfangs enthalten ist - dies ist eine vollwertige IDE .

VScode-Erweiterungen / VIM-Erweiterungen

Die Situation mit den Editoren von Visual Studio Code und VIM ist anders. Um davon zu profitieren, müssen Sie Plugins installieren. Sie können mehrere Tage damit verbringen, alle guten Plugins zu finden und zu installieren - es gibt viele Plugins!



Ich habe unglaublich viel Zeit damit verbracht, nach ihnen zu suchen, was ich Ihnen empfehle. Sie können stundenlang sitzen, schauen, schauen, schöne animierte Gifs - ein Wunder! Schreiben Sie in die Kommentare, wenn Sie möchten, dass ich alles teile, was ich habe.

Es gibt Tools, die automatisch die Komplexität des Codes hervorheben, welche Tests bestehen, welche nicht, wenn Sie den Grund für den Fehler direkt im Code sehen können, welcher Code übergeben wurde oder nicht, Autocomplits, Autoprefixes - all dies in den Plugins.

Hier können Sie viel Zeit verbringen und wir werden unser Ziel erreichen. Natürlich sind Plugins für das Schreiben von Code nicht relevant, aber stellen Sie sich vor, sie helfen uns beim Schreiben.

Refactoring

Das ist mein Lieblingsthema! Und so sehr, dass ich einen separaten Bericht über Refactoring habe: „Refactoring - Wo? Wohin? Wann? Woher? Warum? Warum und wie? " Ich erzähle im Detail, was es ist und wie man damit arbeitet.

Ich warne Sie sofort , Refactoring ist nicht das, was Sie sich normalerweise vorstellen . Normalerweise bedeutet dies: "Ich habe die Codebasis verbessert und eine neue Funktion hinzugefügt." Dies ist kein Refactoring. Wenn Sie gerade kognitive Dissonanzen haben, schauen Sie sich den Bericht an und er wird bestanden.

AngularJS Grunt -> Webpack

Über Refactoring möchte ich eine lehrreiche Geschichte erzählen. Wir hatten ein sehr altes AngularJS-Projekt, das mit Grunt mit banaler Verkettung erstellt wurde. Das Projekt wurde während der ersten und zweiten Version von Angular geschrieben. Dementsprechend war dort alles sehr einfach: Die Dateien wurden verkettet, dann hässlich, und das wars. Irgendwann wurde uns klar, dass wir zu Webpack wechseln mussten. Wir haben eine riesige Legacy-Codebasis - wie kann man sie in Webpack übersetzen?

Wir haben einige interessante Besuche gemacht. Zuerst wandten sie sich an die lebab.io- Bibliothek.

Lebab.io

Mit dieser Bibliothek können Sie Code sehr gut von ES5 nach ES6 konvertieren. Sie nimmt die alte Codebasis und verwandelt sie in eine neue: fügt Importe ein, verwendet neue Zeilen, Klassen, setzt let und const richtig - alles tut für Sie. In dieser Hinsicht eine sehr gute Bibliothek.



Wir haben dieses Plugin installiert und den Dateicode über Lebab.io ausgeführt . Danach nahmen sie nur noch Moustache-Vorlagen und den Code, der unter den neuen Angular 1.6 und 1.5 mit einem Komponentenansatz anders aussah. Mit Hilfe der Stammgäste haben wir die notwendigen Teile herausgezogen, mit Hilfe von Moustache haben wir unsere Vorlage auf andere Weise gerendert und alle unsere Dateien durchlaufen.

 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); }): 

Infolgedessen haben wir eine große Menge an Legacy-Code in ein modernes Format konvertiert und Webpack schnell verbunden. Für mich persönlich ist die Geschichte sehr lehrreich.

Jsfmt

Dies ist ein Tool, mit dem Sie die Codebasis formatieren und nicht mit einer regulären Suche, sondern semantisch danach suchen können. Wir verbinden unsere Bibliothek, unser Dateisystem, lesen die Datei und möchten etwas finden. Unten finden Sie ein abstraktes Beispiel, wir arbeiten derzeit mit 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); }); 

So sieht unsere Anfrage aus:

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

R/Component ist eine eigene R Bibliothek und eine Component .

Dieser Teil sieht sehr seltsam aus:

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

Dies scheint kein gültiges JavaScript zu sein - und das tut es auch. Wir fügen kleine Buchstaben wie Platzhalter ein und sagen Jsfmt, dass wir nicht daran interessiert sind, was da ist: ein Objekt oder ein Array, eine Zeichenfolge oder ein boolescher Wert, null oder undefiniert - das spielt keine Rolle. Es ist wichtig, dass wir Links zu a und z erhalten. Danach finden wir, wenn wir die gesamte Codebasis durchgehen, alle Varianten von z . Zum Beispiel können wir alle Abhängigkeiten dieser Komponente finden. Dank dessen können Sie komplexes Refactoring durchführen.

Mit dem Tool konnte ich eine riesige Codebasis mit einem semantischen Ansatz unter Verwendung von Bäumen und Analysen umgestalten.

Ich musste keine komplexen Abfragen, komplexen Stammkunden oder einen Syntaxbaum analysieren. Ich habe nur eine Abfrage erstellt und angegeben, was geändert werden soll.

Zwei zusätzliche Werkzeuge

Beim Refactoring gibt es eine einfache Sache, über die ich zu sagen habe. Wenn Sie etwas umgestalten möchten, wählen Sie im Visual Studio-Code den Code aus. Dort finden Sie Hinweise und Refactoring-Optionen. Zum Beispiel eine Extraktionsmethode, eine Inline-Methode.


WebStorm verfügt über ein Kontextmenü, das je nach Konfiguration und reformierter Codebasis mithilfe einer Tastenkombination aufgerufen werden kann.

Im Allgemeinen verfügt WebStorm über mehr Befehle und ist jetzt weiter entwickelt als Visual Studio Code.

Testen

Jetzt das interessanteste und inspirierendste :)

Selen IDE

Zuerst eine kleine Geschichte. Irgendwie kamen Tester zu mir und sagten:

- Wir schreiben End-to-End-Tests, wollen sie automatisieren und haben eine Selenium-IDE.

Die Selenium IDE ist nur ein Plugin für Firefox, das Ihre Aktionen in einem Browser aufzeichnet. Es merkt sich alle Ihre Schritte - Klicks, Schriftrollen, Eingaben, Übergänge, und Sie können diese Schritte wieder verlieren. Das ist aber noch nicht alles. Sie können das, was Sie geschrieben haben, beispielsweise in Java oder Python exportieren und mithilfe der Selenium-IDE automatisierte End-to-End-Tests ausführen.

Es klingt großartig, aber in Wirklichkeit funktioniert die Selenium IDE alleine nicht perfekt, und außerdem hatten wir zu dieser Zeit noch ExtJs .

Extjs

Wenn Sie ExtJs hatten - sympathisieren und umarmen. Die Selenium-IDE schreibt immer den eindeutigsten Selektor. Auf unseren Elementen ist dies id. Aber ExtJs für jedes Element generieren eine zufällige ID. Ich weiß nicht warum. Dieses Problem mit ExtJs tritt bei der Nullversion auf.

 ExtJS = <div id="random_6452"/> 

Infolgedessen öffneten unsere Tester die Anwendung am Morgen, zeichneten alles auf und führten sie dann ohne erneutes Laden der Seite regelmäßig aus, um zu verstehen, ob beispielsweise das Backend defekt war. Sie haben das Backend aktualisiert, aber das Frontend nicht berührt. Die Hauptsache war, nicht auf Aktualisieren zu klicken, da danach eine neue ID generiert wurde.

Sofort kamen die Tester auf eine brillante Idee. Selenium IDE kann seine Datensätze in das HTML-Format exportieren - wir können mit HTML arbeiten, wir haben Vorlagen-Engines - versuchen wir es!

Google Chrome-Erweiterung

Erstellte schnell eine Google Chrome-Erweiterung und fand sofort die schicke elementFromPoint Methode.

 document.elementFromPoint(x, y); 

Trite zeichnete die Mausbewegung im Fenster auf und rief dann elementFromPoint auf. Als der Klick funktionierte, fand ich die Koordinaten des Elements, auf das ich geklickt hatte. Außerdem musste ein bestimmter Selektor erstellt werden, um dieses Element spezifisch auszuwählen. ID kann nicht verwendet werden - was tun?

Eine Idee kam auf - zusätzlich spezielle Test-ID an Komponenten hängen. Für die Komponente wurde eine abstrakte Test-ID erstellt, die nur für Tests benötigt wurde.

 data-test-id="ComponentTestId« 

Es wurde nur in einer Testumgebung generiert und wir haben es entsprechend dem Datenattribut ausgewählt. Das war aber nicht immer genug. Zum Beispiel haben wir eine Komponente, aber im Inneren befindet sich immer noch ein div , span , icon , Icon im i-Tag. Was tun?

Für diesen Schwanz haben wir zusätzlich XPath generiert:

 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; }; 

Als Ergebnis wird ein eindeutiger XPath-Selektor gebildet, der in einem erfolgreichen Fall aus dem Datenattribut des Selektors durch das Datenattribut mit dem Namen der Komponente besteht:

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

Wenn es innerhalb der Komponente noch eine komplexe Struktur gab, fiel alles andere nach striktem XPath auf - ohne ID. Wir haben id vermieden, weil wir mit ExtJs gearbeitet haben.

Dieser XPath konnte leicht getestet werden. Wir haben alle aufgezeichnet, zurück in das HTML-Dokument exportiert, zurück in die Selenium-IDE hochgeladen und ausgeführt.



Wir haben die Chrome-Erweiterung erstellt, die einfach das Selenium IDE-Datensatzformat generiert hat, jedoch auf ihre eigene Art und Weise, nicht wie die Selenium IDE. Dort haben wir viele intelligente Überprüfungen für das Scrollen von Spinnern und das erfolgreiche Laden von Anwendungen hinzugefügt. Wir haben zusätzliche Nuancen hinzugefügt, die die Selenium-IDE nicht berücksichtigt. Dank dessen haben wir vollautomatische End-to-End-Tests.

Das einzige, was die Tester danach noch tun mussten, war, eine beliebige Version der Anwendung zu öffnen, zu klicken, in Selenium IDE hochzuladen, zu überprüfen, als Python-Code zu speichern, die Gehalts- und Bonuserhöhung zu genießen und mir „Danke“ zu sagen.

Für Unit-Tests kann ich keine Leute aus der React- und der VueJS-Community zufrieden stellen - sorry! Ich kenne keine ähnlichen Tools für React und VueJS - vielleicht sind sie es. Ich werde nur denen mit Angular gefallen.

Simontest

In Visual Studio Code für Angular gibt es ein SimonTest- Plugin.



unit- — unit-. :

• , ;
  
• .
  

- - , - . , unit-.

— .

Debuggen

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 . ++. Hat es dir gefallen? Jetzt mitmachen! Frontend Conf ++ , : , , .

. ..