Dinge, auf die ich als erfahrener React-Entwickler im Code achten würde

Mit jahrelanger Erfahrung in der IT-Branche wäre ein erfahrener React-Entwickler die ideale Wahl, um den gesamten React-Bewertungscode des Befragten zu bewerten. Recruiter und Assessment Leads können so viele Checks wie möglich durchführen, aber sobald ein Senior Developer einschreitet, wissen Sie, dass die Codeprüfung abgeschlossen ist. Deshalb haben wir Chris Hoffman, einen erfahrenen React-Entwickler, gebeten, uns dabei zu helfen, den Code-Testauftrag eines Bewerbers Schritt für Schritt zu überprüfen.

In diesem Leitfaden erfahren Sie, welche wesentlichen Elemente eine umfassende React-Code-Bewertung ausmachen, wie man sie testet (mit Beispielen für gute Ergebnisse) und was sonst noch nötig ist, um ein großartiges React-Code-Zuordnungsergebnis zu erzielen.

Wesentliche Merkmale eines guten und erfahrenen React-Entwicklers

Die Bewertung der Code-Tests eines React-Entwicklers ist ein entscheidender Faktor, um seine Fähigkeiten im Umgang mit React zu bestimmen, bevor er eingestellt wird. Und mehr noch, es muss eine Reihe von Grundlagen geben, die den Kandidaten zu einem fähigen, effektiven und erfahrenen React-Entwickler machen.

• Was macht einen guten und erfahrenen React-Entwickler aus?

• Bereitstellung von sauberem, wartbarem Code

• Fehlerfreie Verwendung von UI-Komponenten in verschiedenen Webanwendungen

• Hervorragendes Verständnis der React-Bibliothek und ihrer Komponenten, einschließlich:

  • Wartung der Komponenten
  • Objektmodelle
  • useCallback & useMemo
  • Optimierung des App-Renderings
  • Erstellung von JSX-Elementen
  • Staatliche Verwaltungsmuster

• Arbeit mit CSS, HTML und JavaScript insgesamt:

  • HTML-Tags
  • CSS-Selektoren und CSS-Reset
  • Flexbox, Box-Modell und border-box
  • Implementierung von Media-Queries und anderen responsiven Webprinzipien
  • Scoping & Variablen
  • Funktionen & Pfeilfunktionen
  • Arrays und Objekte
  • Behandlung von Ereignissen

• Auch gut zu wissen und in ihrer Arbeit zu verwenden:

  • Tools erstellen: Webpack, Parcel, Vite
  • Open-Source-Bibliotheken: Moment.js, lodash, Redux, D3.js
  • API-Methoden: GraphQL, REST
  • Generator für statische Websites: Gatsby, Next.js
  • Code-Repositories: Bitbucket, GitHub
  • Frameworks: React Native, Vue.js, Angular
  • Prüfer für statische Analyse: TypeScript, Flow, ESLint
  • Cloud-Management-Plattformen: Microsoft Azure, Amazon AWS, Google Cloud Platform, Apache CloudStack
  • Paketmanager: yarn, pnpm, npm
  • Software-Testwerkzeuge: Cypress, Jest, React Testing Library, Selenium
  • Entwurfswerkzeuge: InVision, Figma, Zeplin, Sketch
  • Projektverwaltungs-Tools: Trello, Zoho Projects, ClickUp und Basecamp

• Ein bewährtes Portfolio an früheren Arbeiten

Neben einem sauberen und funktionalen Code und soliden Kenntnissen der Tools sollte der Entwickler auch über bemerkenswerte Jahre an Erfahrung und nachweislich gute Ergebnisse in vergangenen React-Projekten in seinem Portfolio verfügen. Theoretische Punkte lassen sich am besten mit praktischen Beispielen belegen, gefolgt von der Codebewertung, die der Entwickler vornehmen wird. Der Kandidat kann auch gebeten werden, Beispiele früherer Arbeiten oder Codeschnipsel zu schicken, die mit der aktuellen React-Stelle in Verbindung stehen, falls dies im Hinblick auf die gemeinsame Nutzung der Dokumentation möglich ist.

• Vorherige Code-Überprüfung

Es ist eine gute Idee, früheren Code zu prüfen, den der Entwickler als Teil seines Portfolios erstellt hat. Normalerweise ist ihr Code irgendwo in Repositories wie Git verfügbar und öffentlich. So können Sie sich ein besseres Bild von ihrem Potenzial und ihrer Erfahrung machen, abgesehen von den eigentlichen praktischen Prüfungen, die sie ablegen werden.

Die Diskussion darüber, wie sie programmieren oder warum sie sich für eine bestimmte Art des Programmierens entscheiden, ist ein unverzichtbarer und bewährter Weg, um die Arbeitsdynamik und die Denkweise von Entwicklern vorab zu bewerten. In den meisten Fällen werden die von den Entwicklern vorgelegten Lösungen von vielen Faktoren beeinflusst, wie z. B. engen Zeitplänen und Zeitbeschränkungen, einer schnellen Prototyping-Phase oder sogar der strikten Einhaltung einer bestehenden Codebasis (ohne das Recht auf Umschreiben oder Refactoring). Ein Gespräch darüber, warum sie so kodieren, wie sie es tun oder in der Vergangenheit getan haben, wird daher viele entscheidende Aspekte klären, bevor der Beurteilungs- und Einstellungsprozess weitergeht.

Und schließlich sollten Sie auch die Daten der von Ihnen bewerteten früheren Arbeiten überprüfen. Ein Entwickler kann zwar über viele Jahre Erfahrung verfügen, aber sein Code kann schon ein paar Jahre alt sein. Code, der nicht mehr aktuell ist, könnte aus einer Zeit stammen, in der der Entwickler ein Junior- oder Medior-Level-Entwickler war. Notieren Sie sich die Daten des jeweiligen Codes und das Datum, an dem Sie den Code derzeit überprüfen.

Worauf Sie bei der Überprüfung eines React-Codierungstests achten sollten

Erfahrene Entwickler konzentrieren sich bei der Überprüfung von React-Code-Bewertungen im Allgemeinen auf mehrere Grundpfeiler.

Chris Hoffman wies auf sieben "Must-Check"-Komponenten im React-Code hin, auf die er stets achtet.

1. Code-Lösung und Funktionalität

Überprüfen Sie die Codelösung und ihre Funktionsweise, indem Sie dies tun:

• Prüfen und sicherstellen, dass der Code effizient funktioniert
• Führen Sie die Anwendung aus und prüfen Sie, ob die Benutzeroberfläche anständig und funktional ist.
• Untersuchen Sie, ob der Entwickler Fehler richtig behandelt hat .
• Bewerten Sie, ob der Entwickler ein solides Verständnis für gutes UI/UX hat
• Prüfen Sie, ob der Entwickler UI-Änderungen im Zusammenhang mit dem Aktualisieren/Laden von Daten richtig behandelt hat.
• Prüfen Sie (falls die Lösung dies erfordert) das erneute Abrufen von Daten

In dieser Phase sollten Sie feststellen, ob die Kodierungslösung des Entwicklers das tut, was sie soll. Hier fasst Hoffman zusammen, was es bedeutet, Codelösungen und Funktionalität so gut wie möglich zu überprüfen:

"Überprüfen Sie, ob alle Anforderungen erfüllt sind und die Lösung funktioniert. Dadurch wird sichergestellt, dass der Bewerber den Anforderungen folgen kann und dass er sie erfüllen kann. Frontend-Entwickler haben zwar oft UI/UX-Designer an ihrer Seite, aber sie sollten auch in der Lage sein, sich selbst etwas einfallen zu lassen, das relativ gut aussieht."

Chris Hoffman

Ein umfassender und hochfunktionaler Code ist ein ausgezeichneter erster klarer Indikator dafür, dass sich jemand die Zeit genommen und Aufmerksamkeit und Fachwissen in die Ausführung des Codes investiert hat. Denken Sie daran, dass es von entscheidender Bedeutung ist, bei der Bewertung einen sauberen, organisierten Code und eine funktionierende Benutzeroberfläche ohne aufkommende Probleme zu sehen.

2. Kommentare zum Code

Beziehen Sie sich immer auf die Code-Kommentare, da diese Kommentare die Arbeitsschritte des Entwicklers verdeutlichen oder dieVorgehensweisenäher erläutern. Sie müssen sehen, ob der Entwickler Kommentare in bestimmten Kontexten korrekt anwendet. DieKommentare könnten sich auf Folgendes beziehen:

• Vollständig erledigte To-Do-Aufgaben
• Korrekte Verwendung von Kommentaren und Notizen
• Klare Erklärungen für alle spezifischen Schritte, die der Entwickler unternommen hat

"Zum Beispiel, wenn sie seltsamerweise etwas als Umgehung eines bekannten Fehlers geschrieben haben oder wenn sie einen komplexen Algorithmus geschrieben haben. Dies sollte auch dazu beitragen, die Fähigkeit des Entwicklers, Informationen zu vermitteln, darzustellen und zu erklären, warum er den Code auf eine bestimmte Weise geschrieben hat. Seien Sie vorsichtig mit Notizen für die Gutachter, denn der Bauträger könnte eine Notiz hinterlassen haben, warum etwas auf diese Weise gemacht wurde"

Chris Hoffman

Manchmal kann eine Lösung sehr gut funktionieren, auch wenn sie etwas anders umgesetzt wird, als man es eigentlich erwarten würde. Aus diesem Grund ist es wichtig, dass Sie immer prüfen, ob irgendwo in der Aufgabe Kommentare oder Anmerkungen vorhanden sind.

• Hier ist ein Beispiel für gut kommentierten Code:

3. Struktur des Codes

Als nächstes müssen wir die Struktur der Codedatei bewerten. Wie würden Sie sicherstellen, dass die Strukturarchitektur ausgezeichnet, funktionell und logisch ist? Prüfen Sie, ob die folgenden Kriterien erfüllt sind:

• Leicht verständliche Struktur
• Einfaches Auffinden von Dateien und anderen Daten
• Übersichtlich organisierte und verständliche Komponenten
• Keine Unordnung von Dateien oder Verzeichnissen
• Korrekte Platzierung von Dateien / Korrekte Projektstruktur

Als leitender Entwickler bestätigt Hoffman , wie wichtig ein sauberer und organisierter Entwicklungsprozess ist. Sie lässt den Entwickler mit seinen Selbstorganisationsfähigkeiten hervorstechen und erleichtert dem Evaluator die Arbeit. Insgesamt muss die Architektur der Codedatei sinnvoll sein.

leicht zu verstehenden Struktur organisiert sein. Der Programmierer oder Leser sollte sich nicht verirren oder zufällige Dateien und Verzeichnisse finden. Alles sollte an seinem richtigen Platz sein - globale Komponenten im Komponentenordner, Dienste in den Diensten, Seitenkomponenten in den Seiten und so weiter."

Chris Hoffman

• Im Folgenden finden Sie ein gutes Beispiel für die Struktur eines Dateisystems:

4. Konsistenz

Als Nächstes ist die Konsistenz der Gesamtbewertung zu prüfen - der Code muss in der Art und Weise, wie er geschrieben ist, konsistent sein. Einige der Dinge, auf die Sie sich bei der Beurteilung am meisten konzentrieren müssen, sind:

• Richtige Benennung von Dateien (Klassen, Dienstprogramme, Komponenten)
• Benennung der Variablen
• Verwendung von Funktionen (mit dem Schlüsselwort function oder Pfeilfunktionen)
• Importieren und Exportieren von Modulen
• Deklaration von Strings (Verwendung von ", oder ')

Unabhängig davon, ob ein Entwickler auf etwas unkonventionelle Weise arbeitet oder nicht, ist es immer besser und richtig, sich an einen einheitlichen, standardisierten Stil beim Schreiben von Code zu halten.

"Ein gutes Projekt sollte konsistent sein und sich an dieselben Muster und Wege beim Schreiben von Code halten. Wenn das Projekt richtig aufgesetzt ist, sollten die Entwickler auch über einige Werkzeuge verfügen, die einen einheitlichen Schreibstil und ein einheitliches Verhalten erzwingen, indem sie Tools wie ESlint und Prettier verwenden"

Chris Hoffman

• Dies ist ein praktisches Beispiel für einen einheitlichen Codestil:

5. Komplexität des Codes

Die Gesamtkomplexität ist ein wesentlicher Faktor, der zu berücksichtigen ist. Zu komplexe Bewertungsantworten erfordern mehr Aufmerksamkeit während der Bewertung. Wenn der Auftrag klein ist, brauchen wir keine übertechnisierte Antwort, also muss die Projektkomplexität dem Gesamtauftrag entsprechen.

Achten Sie auf die folgenden Punkte:

• Ist zu viel Code vorhanden?
• Wurde eine unnötige Funktion hinzugefügt/geschrieben?
• Ist die Aufgabe einfach, aber die Antwort des Entwicklers komplex?

Hoffman erklärt dies weiter:

"Entwickler neigen oft dazu, mehr Code als nötig zu schreiben oder eine Funktion zu schreiben, von der sie glauben, dass sie sie in Zukunft brauchen werden. Stellen Sie sicher, dass die Komplexität des Projekts dem Auftrag entspricht. Wenn die Aufgabe klein ist, brauchen wir kein übertechnisiertes Dateistruktur-System. In einem großen Projekt gibt es zum Beispiel ein Verzeichnis utils mit Unterdateien für jede Dienstprogrammkategorie. Bei einer kleineren Lösung reicht jedoch eine einzige utils-Datei aus."

Chris Hoffman

• Ein Beispiel für ein umfangreiches Utilities-Verzeichnis, das für große Projekte geeignet ist (aber nicht für kleine):

Sauberer Code und korrekte Benennung

Der zur Bewertung eingereichte Code muss in jeder Hinsicht so klar, prägnant und gut formuliert sein wie möglich. Achten Sie genau auf die folgenden Punkte, die ausgefüllt werden müssen:

• Klarer, leicht verständlicher Code

• Platzierung in mehreren Ordnern für einen sauberen, organisierten Stil

• Schwieriger , in Stücke aufgeteilter Code

• Zusätzliche Untergliederungen für komplexere Codes

• Keine Inline-Stile, wann immer möglich

• Korrekte Benennung von Variablen mit streng präzisen Begriffen

  • Sammlungen müssen in der Pluralform vorliegen ("Produkte" statt "Produkt")
  • Keine nutzlosen Namen mit nachträglichem Zusatz (vermeiden Sie Begriffe wie "amountOfProductsNumber" oder "productObj")
  • Keine Abkürzungen, es sei denn, sie werden allgemein empfohlen (schlechtes Beispiel: mcv = my cool variable. Gutes Beispiel: httpClient)
  • Keine Kurznamen, es sei denn, dies ist notwendig (gutes Beispiel: wenn der Entwickler "i" für "index" verwendet. Schlechtes Beispiel: 'o' für 'onSubmit')

• Ein Beispiel für sauber benannten und geschriebenen Code:

"Der Code sollte für den Leser klar und einfach zu verstehen sein und deutlich vermitteln, was der Entwickler beabsichtigt hat. Außerdem wollen wir nicht, dass alles in eine Datei gepresst wird - alles sollte seinen eigenen Platz haben. Der Code sollte so einfach wie möglich sein, wobei schwierigere Teile aufgeteilt werden, damit der Leser den Code in leicht verdaulichen Stücken betrachten und in komplexere Teile eintauchen kann, wenn er tiefer gehen und mehr Details verstehen möchte."

Außerdem fasst Hoffman die obige Aussage mit einem guten Beispiel zusammen: "Stile sollten von Komponenten getrennt werden, es sei denn, die Komponente ist klein und es macht keinen Sinn", so dass es wieder auf klare Unterscheidungen, Unterteilungen und die Lesbarkeit des Codes ankommt.

7. Nutzung der aktuellen Bibliotheken

Damit ein Coding-Interview so erfolgreich wie möglich verläuft, muss der Entwickler vor dem Assessment über alle React-Updates auf dem Laufenden bleiben.

"Die Lösung sollte eine relativ neue Version von JavaScript und TypeScript verwenden, um sicherzustellen, dass der Entwickler mit den aktuellen Versionen und Funktionen der Sprachen umgehen kann. Die Verwendung von alten Sprachmerkmalen wie "var" sollte ein großes Tabu sein. Dasselbe gilt für die Verwendung von Klassenkomponenten (außer in seltenen Fällen). Vermeiden Sie die Verwendung von Sprachmerkmalen, die zu bekannten Bugs und Fehlern führen können.

Fassen wir die von Hoffman oben beschriebene Definition zusammen: Um die Verwendung von Bibliotheken besser beurteilen zu können, sollten Sie auf die folgenden Kriterien achten bzw. darauf, wie gut der Entwickler alle diese Kriterien erfüllt:

• Verwendung aktueller und stabiler Bibliotheken (d. h. eine zwei Jahre alte Bibliothek ist in der heutigen Zeit nicht mehr die beste Wahl)
• Keine Verwendung fehlerhafter und veralteter Browserfunktionen
• Verwendung einer relativ aktuellen JavaScript/TypeScript-Version
• Keine veralteten Sprachmerkmale, Schlüsselwörter oder Variablen, wie z. B. 'var'.
• Keine Klassenkomponenten (sofern nicht anders angegeben)
• Keine Verwendung von fehlerverursachenden Funktionen

Beispiel für die Verwendung von JavaScript aus der Zeit vor ES6 im Vergleich zu einer modernen Version:

8. Tests

Tests

In dieser Phase ist es wichtig zu bestimmen, ob der Kandidat gute Tests schreiben kann und ob die Lösung insgesamt über Tests verfügt. Achten Sie auf die folgenden Punkte:

• Die Tests stellen sicher, dass der Code das tut, was er tun soll.
• Tests lassen uns wissen, ob wir etwas ändern müssen
• Tests sollten als Dokumentation für die Verwendung des Codes dienen
• Tests müssen einfach zu lesen sein (d.h. Gruppierung durch Arrange Act Assert-Muster) und Mocking-Bibliotheken/API
• Testen sollte so sein, wie ein Benutzer mit der UI interagieren würde

Hoffman fasste die Bedeutung von Tests im Detail zusammen:

"Einige mögen argumentieren, dass das Testen der wichtigste Teil des Programmierens ist. Tests geben uns die Sicherheit, dass unser Code das tut, was wir beabsichtigen. Sie stellen auch sicher, dass die Tests, wenn wir eine Struktur oder einen Code/eine Funktionalität unbeabsichtigt ändern, dies erkennen und fehlschlagen, so dass wir wissen, dass wir etwas ändern müssen."

Chris Hoffman

Korrektes Testen erfüllt einen wichtigen Zweck, aber es braucht einen erfahrenen, erfahrenen Entwickler, um zu erkennen, was Tests alles umfassen. Hoffman fügt hinzu:

"Suchen Sie nach einfach zu lesenden Tests (d.h. Gruppierung nach dem Arrange Act Assert-Muster), ggf. mit Mocking von Bibliotheken/API-Aufrufen. Achten Sie genau darauf, dass sie die gleiche Art und Weise testen, wie ein Benutzer mit der Benutzeroberfläche interagieren würde (in der Regel mit Hilfe der React Testing Library), anstatt Implementierungsdetails zu testen (d. h. sie sollten nicht prüfen, ob ein lokaler Zustand einen Wert hat, sondern ob eine Eingabe einen bestimmten Textinhalt hat)."

Chris Hoffman

• Hier sind Beispiele für das Testen von Komponenteninterna (schlechtes Beispiel) gegenüber dem Testen, wie ein Benutzer mit der Benutzeroberfläche interagieren würde (gutes Beispiel):

Schlussfolgerung

Auch wenn wir über ausgewiesene Fachleute für die Überprüfung von Code-Aufgaben verfügen, ist es immer von unschätzbarem Wert, wenn ein erfahrener Entwickler die Aufgaben und Lösungen für den Test überprüft. Erfahrene Entwickler sind diejenigen, die auch auf die kleinsten technischen Details der gesamten Aufgabe achten.

Eine Code-Peer-Review ist eine wunderbare Möglichkeit, einen zusätzlichen, unglaublich aufschlussreichen Gesichtspunkt zu erhalten, wenn es darum geht, die Genauigkeit und Qualität des Codes zu bestätigen. Ein erfahrener React-Entwickler prüft akribisch alle Elemente, die die Aufgabe eines erfahrenen, großartigen Entwicklers ausmachen - Funktionalität, Struktur, Konsistenz, Komplexität und Werkzeuge.

Trotz zahlreicher Hilfsmittel und virtueller Unterstützung für die Codeprüfung trägt der "menschliche Faktor" wesentlich zu dieser Art von Aufträgen bei. Durch den Einsatz ihres umfangreichen Fachwissens und ihrer Erfahrung wird der erfahrene React-Entwickler den Code anderer Entwickler immer detailliert, korrekt und effizient bewerten.