So stellen Sie Angular-Entwickler ein: Wichtige Fähigkeiten und Kenntnisse, auf die Sie achten sollten

Mit seiner hochskalierbaren Architektur entscheiden sich viele Webentwicklungsteams für Angular, um effiziente, anspruchsvolle Single-Page-Anwendungen zu erstellen. Aber die Einstellung von Angular-Entwicklern ist leichter gesagt als getan. Obwohl es viele Kandidaten gibt, liegt der Schlüssel zu einer nahtlosen Entwicklungserfahrung darin, einen großartigen Angular-Entwickler zu finden, der Best Practices und fortschrittliche Techniken anwendet, um qualitativ hochwertige Codierungsstandards zu erfüllen.

Das Verständnis der Schlüsselkonzepte des beliebten Front-End-Frameworks von Google bereitet Sie darauf vor, selbstbewusst Interessenten zu interviewen und die hochkarätigsten Entwickler einzustellen – diejenigen, die bestrebt sind, eine Codebasis auf die nächste Stufe zu bringen. Dieser Artikel beschreibt die entscheidenden Fähigkeiten und Kenntnisse, die ein Premium-Angular-Profi haben sollte.

Hinweis: Diese Anleitung gilt für die neuesten Angular-Versionen, die nicht mehr als AngularJS bekannt sind – „Angular“ gilt seit Angular 2. Wenn Sie für die Wartung oder das Upgrade eines Legacy-AngularJS-Webanwendungsprojekts (1.x Branch), lesen Sie How to Hire a Great AngularJS Developer.

Kennen Sie die Kernfunktionen von Angular

Das Angular-Framework wird auf TypeScript ausgeführt , und der gesamte in einer Anwendung geschriebene Code wird in JavaScript transpiliert. TypeScript ist eine Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird. Winkelcode wird durch diese Obermenge repräsentiert.

Viele Entwickler lernen Angular, haben aber kein gutes Verständnis der Kernkonzepte, die für JavaScript, TypeScript, HTML oder CSS erforderlich sind. Fehlen diese Grundlagen, neigen Entwickler dazu, unangemessene Workarounds zu verwenden und damit die technischen Schulden eines Projekts zu vervielfachen.

Fragen Sie den Kandidaten also, ob er sich mit HTML5 und CSS3 auskennt. Ein guter Angular-Entwickler muss kein HTML- oder CSS-Experte sein, solange es jemand anderes im Team ist, aber er sollte diese Schlüsselkonzepte verstehen:

• Flexbox
• SCSS-Variablen
• Der Unterschied zwischen einer span und einem div
• Die wichtigen Klassen in CSS
• Attribute

Angular-Entwickler sollten über ein solides Verständnis von JavaScript und TypeScript sowie einige HTML- und CSS-Kenntnisse verfügen.

Twittern

Design vor dem Codieren

Gutes Design ist der Schlüssel zu einer guten Anwendungsarchitektur. Fragen Sie Ihren Kandidaten, wie er seine Entwürfe erstellt, und vergleichen Sie sein Denken mit diesen idealen Überlegungen:

• Wohin wird der Code gehen? Wird eine neue Bibliothek oder ein Modul benötigt?
• Was sind die Ein- und Ausgänge?
• Sollte es wiederverwendbare Komponenten oder Richtlinien geben?
• Wohin wird der Staat gehen? (Weitere Erläuterungen unter Zustandsverwaltung unten.)
• Wohin wird die Geschäftslogik gehen – dh in welchem ​​Dienst?
• Können bestimmte Komponenten von Bibliotheken gemeinsam genutzt werden, um im Wesentlichen ein UI-Designsystem zu erstellen?

Die vollständigen Einzelheiten eines bestimmten Designs sind weniger wichtig als die Frage, ob der Kandidat die Gewohnheit hat, Designs zu erstellen. Alle Designs sind temporär, sodass die Dokumentation für die meisten Anwendungen so einfach wie ein Foto einer Skizze auf einem Whiteboard sein kann, es sei denn, es ist eine formelle Dokumentation erforderlich. Zu einem späteren Zeitpunkt kann der Entwickler das technische Design aus Code generieren (mit den richtigen Tools), um zu verdeutlichen, wie alle Teile zusammenhängen.

Lebenszyklen von Angular-Anwendungen verstehen

Fragen Sie Ihren Kandidaten, was er über den Lebenszyklus von Angular-Komponenten weiß. Ihre Antwort sollte drei Lebenszyklus-Hooks enthalten: ngOnInit , ngOnChanges und ngOnDestroy . Wie die Namen vermuten lassen, wird ngOnInit bei der Komponenteninitialisierung ngOnDestroy ngOnInit aufgerufen, wenn die Komponente zerstört wird, und ngOnChanges wird aufgerufen, wenn sich ein Attribut ändert. Letzteres kann vor ngOnInit erfolgen – wenn das Attribut bereits zugewiesen ist, bevor die Komponente vollständig initialisiert ist, dann wird ngOnChanges vor ngOnInit ausgeführt.

Wenn der Kandidat auch ngDoCheck , ngAfterContentInit , ngAfterContentChecked , ngAfterViewInit und ngAfterViewChecked kennt, kennt er alle Änderungserkennungshaken für Komponenten und ist einen Schritt voraus.

Eine gute Folgefrage zu einem der Hooks: „Wann findet diese Änderungserkennung statt?“

Ein weniger bekannter Lebenszyklus ist der Provider-Lebenszyklus , der nur einen Haken hat: ngOnDestroy . Dies wird nur aufgerufen, wenn der Anbieter auf Komponentenebene angefügt wird, in diesem Fall wird es zusammen mit der Komponente zerstört. Wenn es auf Root- oder Modulebene bereitgestellt wird, wird es niemals zerstört.

Der Konstruktor eines Providers wird ausgeführt, wenn der Provider zum ersten Mal verwendet wird, daher ist es möglich, dass der Konstruktor nie ausgeführt wird. Befragen Sie Ihren Kandidaten zu dieser Möglichkeit – in realen Szenarien kann dies eine oft übersehene Fehlerquelle sein!

Solide Kenntnisse in reaktiver Programmierung

In einer Angular-Anwendung ist die reaktive Programmierung oft der am schwierigsten zu verstehende Teil. Viele Leute denken prozedural, wenn sie anfangen, einen Code zu programmieren, in der Annahme, dass er einfacher zu verstehen und damit zu arbeiten ist, wie die Schritte eines Rezepts.

Reaktive Programmierung beinhaltet die Reaktion auf Dinge, die wir nicht kontrollieren können und die in einer unvorhersehbaren Reihenfolge auftreten können. Obwohl wir tagtäglich auf solche Dinge reagieren – zum Beispiel bremsen, wenn das Auto vor uns plötzlich stehen bleibt – fällt es vielen Entwicklern schwer, reaktiv an die Programmierung heranzugehen.

Aber alles, was in einer Angular-App passiert, basiert auf reaktiver Programmierung. Einige Beispiele für Reaktivität in einer Angular-Shopping-Anwendung können beispielsweise sein:

• Wenn sich der Benutzer anmeldet, wird die Zahl auf dem Einkaufswagensymbol aktualisiert und die Menüpunkte ändern sich zu spezifischeren Optionen.
• Wenn der Benutzer zu einer Kategorie navigiert, werden die Produkte abhängig von der ausgewählten Kategorie aktualisiert.
• Wenn der Benutzer ein Produkt zu seinem Einkaufswagen hinzufügt, wird das Einkaufswagensymbol mit der Anzahl der Produkte aktualisiert.
• Wenn ein Artikel nicht vorrätig ist (registriert durch einen Listener, der die aktuellen Lagerbestände vom Backend aus überwacht), wird die Benutzeroberfläche der Seite aktualisiert.

Beachten Sie, dass diese Dinge automatisch geschehen und keine Seitenaktualisierung erforderlich sind, um angezeigt zu werden. Bitten Sie den Kandidaten in einem Vorstellungsgespräch zu beschreiben, wie er die reaktive Programmierung in einer von ihm entwickelten Anwendung angewendet hat. Wenn der Kandidat Lösungen beschreibt, bei denen die Seite aktualisiert oder ChangeDetectorRef.detectChanges() manuell aufgerufen wird, um eine Komponente zu aktualisieren, betrachten Sie dies als gelbes Flag.

Fallstricke mit Observables in Angular

Weniger erfahrene Entwickler stellen manchmal fest, dass der Code, den sie in ihren Angular-Anwendungen schreiben, nicht ausgeführt wird. Erfahrene Angular-Entwickler können eine häufige Ursache identifizieren: Es gibt kein Abonnement für ein Observable , ein Hauptobjekttyp in der reaktiven Programmierung. Nur mit einem Abonnement werden Backend-Aufrufe oder andere Reaktionen ausgeführt.

Es gibt zwei Möglichkeiten, Abonnements zu erstellen: Entwickler können die async Pipe oder die subscribe -Methode verwenden. Aber es gibt einen Vorbehalt: Wenn Entwickler ein manuelles Abonnement (mit der Methode „ subscribe “) durchführen, muss das Observable manuell zerstört werden (obwohl es einige Grenzfälle gibt, in denen dies standardmäßig geschieht). Entwickler können Observables auf verschiedene Weise zerstören:

• Verwenden Sie nach Möglichkeit die async Pipe (dies zerstört das Observable , wenn die Komponente nicht mehr benötigt wird).
• Manuelles Abbestellen mithilfe der unsubscribe -Methode für ein Observable am Ende der Lebensdauer der Komponente ( ngOnDestroy ).
• Auf deklarativere Weise mit dem takeUntil Operator innerhalb des pipe -Operators und unter Verwendung eines Subjekts (dh etwas mit dem Namen destroy$ ). In diesem Fall gibt das Subjekt am Ende der Lebensdauer der Komponente ( ngOnDestroy ) destrue destroy$.next() aus. Nach dem Empfang des Destroy-Ereignisses akzeptiert der takeUntil Operator keine Ereignisse mehr vom Observable, an das er gebunden ist, sodass seine Abonnentenlogik nicht mehr ausgelöst wird. Ein Beispiel finden Sie im TakeUntil-Operator in Abschnitt 2. Eine ähnliche Funktionalität kann mit den take und takeWhile Operatoren verfügbar gemacht werden.
• Seit Angular-Anwendungen auf den Ivy-Compiler umgestiegen sind, können wir auch Annotationen verwenden. Die Until until-destroy Bibliothek oder eine andere Bibliothek von Drittanbietern wie SubSink kann verwendet werden, um Observables reibungslos abzubestellen, sobald eine Komponente zerstört wurde.

Ein weiterer potenzieller Schmerzpunkt bei der reaktiven Programmierung sind Speicherlecks und mehrere Aufrufe an das Backend. Fragen Sie den Kandidaten, ob ihm diese Probleme bekannt sind und wie er sie normalerweise lösen würde. Speicherlecks können auftreten, wenn Observable s nicht wie oben beschrieben gekündigt werden. Mehrere Aufrufe an das Back-End aufgrund mehrerer Abonnements für einen Back-End-Aufruf können gelöst werden, indem das Observable wird.

Kennen Sie den Zustand und wie Sie ihn verwenden

Alle Einzelseitenanwendungen haben einen Status, und dieser Status ist irgendwo am Frontend verfügbar. Aber was genau ist ein Staat? Es enthält alle Variablen, die für die aktuelle Benutzererfahrung spezifisch sind. Beispielsweise authentifizierte Benutzerdetails wie Name und Profilbild-URL, ein bestimmtes ausgewähltes Menüelement oder eine Bildschirmliste, z. B. eine Liste mit Einkaufswagenartikeln.

In einer Angular-Anwendung sind drei Haupttypen von Front-End-Zuständen zu berücksichtigen:

Ein gutes Verständnis dessen, was der Zustand ist und wann er geladen oder neu geladen werden sollte, ist eine der wichtigsten Fähigkeiten, auf die Sie bei der Einstellung von Angular-Entwicklern achten sollten. Dies ist ein erstklassiges Gebiet, das Sie erkunden sollten, wenn Ihr Team die Möglichkeit hat, einen vom Kandidaten geschriebenen Beispielcode zu überprüfen. Wenn der Antragsteller eine Bibliothek für die staatliche Verwaltung nutzt:

• Achten Sie auf die Verwendung von NgRx, Akita, NgXs oder ähnlichen, für die Zustandsverwaltung spezifischen Bibliotheken.
• Sehen Sie dann nach, ob im zugehörigen Code Benachrichtigungen für effects , action , reducer , store und selector vorhanden sind.

Betrachten wir als Beispiel den allgemeinen Ablauf des Anwendungsstatus in NgRx (der dem von Akita und anderen Bibliotheken ähnelt):

Wenn der Entwickler seinen eigenen Zustand mit Diensten erstellt, kann seine Kompetenz in der Zustandsverwaltung schwieriger zu identifizieren sein:

• Suchen Sie nach Verweisen auf die Wörter state oder effect .
• Prüfen Sie, ob der Code auf eine Aktion reagiert, z. B. wenn der Benutzer Taste A drückt, sollte sich der Text auf Bildschirm B ändern.

Fragen, die Interviewer zum Zustand stellen sollten

Sie können nicht immer alles herausfinden, was Sie wissen müssen, indem Sie den Code eines Bewerbers untersuchen. Fügen Sie diese Abfragen zu Ihrer Fragenliste hinzu, um zu untersuchen, wie gut potenzielle Angular-Entwickler den Zustand verstehen:

• Wo haben Sie state verwendet – und wie? Dies ist ein solider Ausgangspunkt, um ihre Erfahrung mit dem Staat zu verstehen; Scheuen Sie sich nicht, nach Einzelheiten zu suchen.
• Wie entscheiden Sie, ob Sie eine Bibliothek nutzen oder nicht? Es ist ein gutes Zeichen, wenn sie wissen, dass es nicht immer sinnvoll ist, eine Landesbibliothek in eine Anwendung aufzunehmen.
• Was würden Sie in den Staat stecken, wo würden Sie es unterbringen und wie nutzen Sie ein staatliches Verwaltungssystem? Wenn sie sagen: „Ich versetze alles in meinen globalen Anwendungsstatus“, ist dies ein sicheres Zeichen dafür, dass sich der Entwickler der negativen Nebenwirkungen nicht bewusst ist, die ein solches System einer Anwendung geben kann.

Entwickler, die die verschiedenen Zustandstypen verstehen, werden diese Nebeneffekte vermeiden:

• Zustand, der nur für eine Komponente gilt, könnte durch andere Komponenten modifiziert oder beschädigt werden.
• Daten sind im Speicher verschachtelt, sodass es schwierig wird, die Daten nachzuverfolgen, und die Daten werden für Menschen unlesbar (zum Zweck der Fehlersuche, des Datenaustauschs usw.).
• Durch das Bearbeiten von Daten in einem Formular werden diese bereits an den Rest der Anwendung ausgegeben, während sie nur beim Speichern der Daten in den Speicher verschoben werden sollten – mit anderen Worten, der Rest der Anwendung verbraucht möglicherweise ungültige Daten.

Es dauert nicht lange, bis der globale Speicher zu einem unorganisierten Durcheinander wird, und es ist nicht klar, woher jeder Teil des Durcheinanders stammt, was das Debuggen und Warten erschwert.

Die Bedeutung automatisierter Tests verstehen

Automatisierte Tests sollten für jede Angular-Webanwendung als ebenso wichtig angesehen werden wie die Codequalität. Einer der Hauptgründe für Programmierer, Tests zu schreiben, ist die Dokumentation ihres Codes: Wenn ein neuer Entwickler in das Unternehmen eintritt, sollten die Geschäftslogik und bestimmte UI-Flows basierend auf den Erwartungen der Testsuite klar sein. Außerdem deckt automatisiertes Testen Fehler früh in der Entwicklung auf.

Stellen Sie Ihrem potenziellen Angular-Entwickler drei Testfragen:

• Was denkst du über das Testen? Jeder Kandidat, der sich nicht für automatisierte Tests interessiert, sollte nicht mehr berücksichtigt werden. Selbst wenn sie es vorziehen, testgetriebene Entwicklung (TDD) nicht zu verwenden, kosten Entwickler, die den Wert automatisierter Tests nicht erkennen, Ihr Unternehmen Zeit für manuelles Testen und, schlimmer noch, Ausfallzeiten für Endbenutzer, wenn Regressionen auftreten, wenn Änderungen an einer App vorgenommen werden im Laufe der Zeit.
• Worauf achten Sie beim Testen? Anstatt grundlegende Gegebenheiten wie die Fähigkeit, einem Feld Werte zuzuweisen, oder das Streben nach bestimmten Testabdeckungsmetriken (z. B. 85 % Abdeckung) zu testen, sollte sich ein großartiger Angular-Entwickler auf das Testen der Kerngeschäftslogik konzentrieren.
• Gibt es in der Regel mehr E2E-Tests oder mehr Unit-Tests? Wieso den? Als Front-End-Anwendungen können Angular-Apps zwei Hauptarten von automatisierten Tests nutzen: Unit-Tests und End-to-End (E2E)-Tests. Typischerweise hat eine Testsuite viele Unit-Tests und weniger E2E-Tests. Komponententests sind klein, sodass sie schnell geschrieben und ausgeführt werden können. E2E-Tests sind größer und langsamer. Faire Warnung: Nicht alle Entwickler werden der gleichen Meinung sein, was das richtige Verhältnis von Unit- und E2E-Tests betrifft. In Wirklichkeit hängt es von der Komplexität der getesteten App ab, und selbst dann ist die Antwort bis zu einem gewissen Grad umstritten.

Angular-Test-Frameworks

Angular-Entwickler haben die Wahl, wenn es um automatisierte Test-Frameworks geht. Komponententests können über Jest oder Jasmine and Karma durchgeführt werden. Jeder Angular-Entwickler sollte mit Jasmine und Karma vertraut sein. Jest ist auch weit verbreitet – es ist im Allgemeinen schneller und bietet erweiterte Testoptionen.

Der E2E-Teststandard für eine Angular-Anwendung ist Protractor, das Standardtool, das von der Angular-CLI generiert wird. Eine Alternative ist Cypress, ein vielversprechendes E2E-Testframework mit vielen Optionen.

Stellen Sie sicher, dass der Kandidat über fundierte Kenntnisse in mindestens einem Unit-Testing-Framework und einem E2E-Testing-Framework verfügt.

Bleiben Sie über die neuesten Angular-Versionen informiert

Großartige Angular-Entwickler verwenden aus verschiedenen Gründen möglicherweise nicht immer die neueste Version in der Entwicklung, aber sie sollten den Veröffentlichungsplan von Angular kennen, damit sie über Änderungen auf dem Laufenden bleiben und auf einen Wechsel vorbereitet sind. Eine Möglichkeit, dies zu beurteilen, besteht darin, den Kandidaten zu fragen, ob er mit der Release-Strategie von Angular vertraut ist. Angular strebt alle sechs Monate eine Hauptversion an, normalerweise im Februar und Mai. Eine Angular-Version unterliegt in den ersten sechs Monaten nach dem Veröffentlichungsdatum dem „aktiven Support“ und 12 Monaten nach dem Veröffentlichungsdatum dem „langfristigen Support“. Dies ist im Vergleich zu einigen anderen Technologien ein ziemlich enger Zeitplan, weshalb es besonders wichtig ist, auf dem Laufenden zu bleiben.

Sie können auch etwas über die neueste Version von Angular recherchieren und Ihren Kandidaten nach den Vorteilen dieser neuen Funktionen fragen. Etwa zu der Zeit, als Angular 14 veröffentlicht wurde, haben Sie den Kandidaten vielleicht nach Folgendem gefragt:

• Eigenständige Komponenten, die den Bedarf an Angular-Modulen reduzieren. Eigenständige Komponenten werden in keinem vorhandenen NgModule und verwalten direkt ihre eigenen Abhängigkeiten. Infolgedessen kann man sich direkt auf sie verlassen, ohne dass ein zwischengeschaltetes NgModule .
• Typisierte Formulare, ein weiteres wichtiges Update in Angular 14, das die strikte Typisierung als Standard für Angular Reactive Forms festlegt. Typisierte Formulare stellen sicher, dass die Werte in FormControls , FormGroups und FormArrays auf der gesamten API-Oberfläche typsicher sind. Dies ermöglicht sicherere Formulare, insbesondere für tief verschachtelte komplexe Fälle.

Der nächste großartige Angular-Entwickler für Ihr Front-End-Team

Jedes Webentwicklungsprojekt und -team ist anders und misst den verschiedenen Aspekten der Fähigkeiten und Kenntnisse eines Angular-Entwicklers unterschiedliche Bedeutung bei. Aber das Verständnis der grundlegenden Themen, die wir hier vorgestellt haben, wird es den Personalchefs ermöglichen, sich sinnvoll an der Einstellung zu beteiligen – sogar an den eher technischen Bewertungen.

Der Toptal Engineering Blog dankt Ramazan Yildiz für die Durchsicht der in diesem Artikel vorgestellten technischen Konzepte und Diagramme.