Как нанять разработчиков Angular: ключевые навыки и знания, которые нужно искать

Благодаря масштабируемой архитектуре многие команды веб-разработчиков выбирают Angular для создания эффективных и сложных одностраничных приложений. Но нанять разработчиков Angular легче сказать, чем сделать. Несмотря на то, что кандидатов много, ключом к беспрепятственной разработке является поиск отличного разработчика Angular, который применяет лучшие практики и передовые методы для соответствия стандартам кодирования высокого качества.

Понимание ключевых концепций популярного интерфейсного фреймворка Google подготовит вас к уверенному собеседованию с потенциальными клиентами и найму разработчиков самого высокого уровня — тех, кто стремится вывести кодовую базу на новый уровень. В этой статье изложены важные навыки и знания, которыми должен обладать первоклассный профессионал Angular.

Примечание. Это руководство относится к последним версиям Angular, которые больше не известны как AngularJS — термин «Angular» используется с версии Angular 2. Если вы нанимаете сотрудников для обслуживания или обновления устаревшего проекта веб-приложения AngularJS (версия ветка), ознакомьтесь с Как нанять отличного разработчика AngularJS.

Знайте основные функции Angular

Фреймворк Angular работает на TypeScript , и весь код, написанный внутри приложения, переносится в JavaScript. TypeScript — это надмножество JavaScript, которое компилируется в обычный JavaScript. Код Angular представлен этим надмножеством.

Многие разработчики изучают Angular, но им не хватает понимания основных концепций, необходимых для JavaScript, TypeScript, HTML или CSS. Если эти основы отсутствуют, разработчики склонны использовать неподходящие обходные пути и, таким образом, увеличивать технический долг проекта.

Итак, спросите кандидата, есть ли у него знания HTML5 и CSS3. Хорошему разработчику Angular не обязательно быть экспертом в области HTML или CSS, если таковым является кто-то еще в команде, но он должен понимать следующие ключевые понятия:

• Флексбокс
• переменные SCSS
• Разница между span и div
• Важные классы в CSS
• Атрибуты

Разработчики Angular должны хорошо разбираться в JavaScript и TypeScript, а также иметь некоторые навыки работы с HTML и CSS.

Твитнуть

Дизайн перед кодированием

Хороший дизайн — ключ к хорошей архитектуре приложения. Спросите своего кандидата, как он создает свои проекты, и сравните его мышление со следующими идеальными соображениями:

• Куда пойдет код? Нужна ли новая библиотека или модуль?
• Каковы входы и выходы?
• Должны ли быть какие-либо повторно используемые компоненты или директивы?
• Куда пойдет государство? (Обсуждается далее в разделе «Управление состоянием» ниже.)
• Куда пойдет бизнес-логика, т. е. в какой сервис?
• Можно ли разделить определенные компоненты между библиотеками для создания, по сути, системы дизайна пользовательского интерфейса?

Полная специфика конкретного дизайна менее важна, чем то, имеет ли кандидат привычку создавать проекты. Все проекты являются временными, поэтому для большинства приложений документация может быть такой же простой, как фотография эскиза на доске, если не требуется формальная документация. На более позднем этапе разработчик может сгенерировать технический проект из кода (с помощью подходящих инструментов), чтобы было понятно, как все части взаимосвязаны.

Понимание жизненных циклов приложений Angular

Спросите своего кандидата, что он знает о жизненном цикле компонента Angular . Их ответ должен включать три хука жизненного цикла: ngOnInit , ngOnChanges и ngOnDestroy . Как следует из названий, ngOnInit вызывается при инициализации компонента, ngOnDestroy вызывается при уничтожении компонента, а ngOnChanges вызывается при изменении атрибута. Последнее может происходить до ngOnInit — когда атрибут уже присвоен до полной инициализации компонента, то ngOnChanges выполняется до ngOnInit .

Если кандидат также знает о ngDoCheck , ngAfterContentInit , ngAfterContentChecked , ngAfterViewInit и ngAfterViewChecked , он знает все хуки обнаружения изменений для компонентов и находится на шаг впереди.

Хороший дополнительный вопрос, который можно задать о любом из хуков: «Когда происходит обнаружение изменений?»

Менее известным жизненным циклом является жизненный цикл провайдера , который имеет только один хук: ngOnDestroy . Это вызывается только тогда, когда поставщик подключен на уровне компонента, и в этом случае он уничтожается вместе с компонентом. Если он предоставляется на уровне корня или модуля, он никогда не будет уничтожен.

Конструктор поставщика будет выполняться при первом использовании поставщика, поэтому возможно, что конструктор никогда не будет выполнен. Спросите своего кандидата об этой возможности — в реальных сценариях это может быть часто упускаемым из виду источником ошибок!

Уверенное знание реактивного программирования

В приложении Angular реактивное программирование часто является самой сложной частью для понимания. Многие люди думают процедурно, когда начинают программировать фрагмент кода, предполагая, что его легче понять и с ним легче работать, как с шагами рецепта.

Реактивное программирование включает в себя реакцию на то, что мы не можем контролировать, и это может произойти в непредсказуемом порядке. Хотя мы реагируем таким образом каждый день — например, тормозим, когда машина перед нами внезапно останавливается, — многим разработчикам трудно использовать реактивный подход к программированию.

Но все, что происходит внутри приложения Angular, основано на реактивном программировании. Например, некоторые примеры реактивности в приложении для покупок на Angular могут включать:

• Когда пользователь входит в систему, номер на значке корзины обновляется, а пункты меню меняются на более конкретные параметры.
• Когда пользователь переходит к категории, продукты обновляются в зависимости от выбранной категории.
• Когда пользователь добавляет товар в корзину, значок корзины обновляется с количеством товаров.
• Когда товара нет на складе (зарегистрировано с помощью прослушивателя, отслеживающего текущие количества на складе из серверной части), пользовательский интерфейс страницы обновляется.

Обратите внимание, что это происходит автоматически и не требует обновления страницы. На собеседовании попросите кандидата описать, как он применил реактивное программирование в разработанном им приложении. Если кандидат описывает решения, которые включают обновление страницы или ручной вызов ChangeDetectorRef.detectChanges() для обновления компонента, считайте это желтым флажком.

Подводные камни с Observables в Angular

Менее опытные разработчики могут иногда обнаружить, что код, который они пишут в своих приложениях Angular, не выполняется. Опытные разработчики Angular могут определить общую причину: нет подписки на Observable — основной тип объекта в реактивном программировании. Только с подпиской будут выполняться внутренние вызовы или другие реакции.

Существует два способа создания подписок: разработчики могут использовать async канал или метод subscribe . Но есть предостережение: если разработчики делают подписку вручную (с помощью метода subscribe ), Observable нужно будет уничтожить вручную (хотя есть некоторые крайние случаи, когда это происходит по умолчанию). Разработчики могут уничтожить Observables несколькими способами:

• Использование async канала, где это возможно (это уничтожает Observable , когда компонент больше не нужен).
• Отмена подписки вручную с помощью метода unsubscribe для Observable в конце срока службы компонента ( ngOnDestroy ).
• Более декларативным способом с оператором takeUntil внутри оператора pipe и использованием субъекта (т. е. чего-то с именем вроде destroy$ ). В этом случае субъект выдает destroy$.next() в конце срока службы компонента ( ngOnDestroy ). После получения события destroy оператор takeUntil больше не будет принимать события от Observable, к которому он привязан, поэтому его логика подписчика больше не будет запускаться. В качестве примера см. оператор takeUntil в разделе 2. Аналогичные функции можно реализовать с помощью операторов take и takeWhile .
• Поскольку приложения Angular перешли на компилятор Ivy, мы также можем использовать аннотации. Библиотека until-destroy или другая сторонняя библиотека, такая как SubSink, может использоваться для плавной отмены подписки на наблюдаемые объекты после уничтожения компонента.

Еще одна потенциальная проблема с реактивным программированием связана с утечками памяти и множественными вызовами серверной части. Спросите кандидата, знают ли они об этих проблемах и как они обычно решают их. Утечки памяти могут произойти из-за отказа от подписки на Observable , как описано выше. Множественные вызовы на серверную часть из-за нескольких подписок на внутренний вызов могут быть решены путем совместного использования Observable .

Знайте состояние и как его использовать

У всех одностраничных приложений есть состояние, и это состояние доступно где-то во внешнем интерфейсе. Но что такое государство? Он содержит все переменные, относящиеся к текущему пользовательскому опыту. Например, аутентифицированные данные пользователя, такие как имя и URL-адрес изображения профиля, выбранный конкретный пункт меню или список на экране, например список товаров в корзине.

В приложении Angular необходимо учитывать три основных типа внешнего интерфейса:

Хорошее понимание того, что такое состояние и когда его следует загружать или перезагружать, является одним из ключевых навыков, на которые следует обращать внимание при найме разработчиков Angular. Это основная территория для изучения, если у вашей команды есть возможность просмотреть пример кода, написанный кандидатом. Если заявитель использует библиотеку для управления состоянием:

• Ищите использование NgRx, Akita, NgXs или подобных библиотек, специфичных для управления состоянием.
• Затем посмотрите, есть ли какие-либо уведомления для effects , action , reducer , store и selector в соответствующем коде.

Давайте посмотрим на общий поток состояния приложения в NgRx (который похож на Akita и другие библиотеки) в качестве примера:

Если разработчик создает свое собственное состояние с помощью сервисов, его компетентность в управлении состоянием может быть сложнее определить:

• Найдите ссылки на слова state или effect .
• Посмотрите, реагирует ли код на какое-то действие, например, если пользователь нажимает кнопку A, текст должен измениться на экране B.

Вопросы, которые интервьюеры должны задать о состоянии

Вы не всегда можете узнать все, что вам нужно знать, изучив код заявителя. Добавьте эти запросы в свой список вопросов, чтобы выяснить, насколько хорошо потенциальные разработчики Angular понимают состояние:

• Где вы использовали state и как? Это хорошая отправная точка для понимания их опыта работы с состоянием; не бойтесь уточнять подробности.
• Как вы принимаете решение, использовать библиотеку или нет? Это хороший знак, если они знают, что включать библиотеку состояний в приложение не всегда полезно.
• Что бы вы поместили внутрь государства, куда бы вы это поместили и как вы используете систему управления состоянием? Если говорят «я все помещаю в свое глобальное состояние приложения», это верный признак того, что разработчик не осознает негативных побочных эффектов, которые такая система может дать приложению.

Разработчики, разбирающиеся в различных типах состояний, смогут избежать следующих побочных эффектов:

• Состояние, применимое только к одному компоненту, может быть изменено или повреждено другими компонентами.
• Данные вложены в хранилище, поэтому становится трудно отслеживать данные, и данные становятся нечитаемыми для человека (в целях отладки, обмена данными и т. д.).
• Редактирование данных внутри формы уже передает их остальной части приложения, в то время как их следует отправлять в хранилище только при сохранении данных — другими словами, остальная часть приложения может использовать недопустимые данные.

Пройдет совсем немного времени, прежде чем глобальное хранилище превратится в неорганизованный беспорядок, и неясно, откуда берется каждая часть беспорядка, что затрудняет отладку и поддержку.

Понимание важности автоматизированного тестирования

Автоматизированное тестирование следует рассматривать так же важно, как и качество кода для любого веб-приложения Angular. Одной из основных причин, по которой программисты пишут тесты, является документирование своего кода: если новый разработчик присоединяется к компании, бизнес-логика и определенные потоки пользовательского интерфейса должны быть понятными в соответствии с ожиданиями набора тестов. Кроме того, автоматизированное тестирование выявляет ошибки на ранних стадиях разработки.

Задайте своему потенциальному разработчику Angular три тестовых вопроса:

• Что вы думаете о тестировании? Любой кандидат, которому наплевать на автоматизированное тестирование, должен быть прекращен. Даже если они предпочитают не использовать разработку через тестирование (TDD), разработчики, которые не видят ценности автоматизированного тестирования, будут стоить вашей компании времени на ручное тестирование и, что еще хуже, простоя конечного пользователя, когда регрессии появляются при внесении изменений в приложение. со временем.
• На что вы ориентируетесь при тестировании? Вместо того, чтобы тестировать базовые данные, такие как возможность присваивать значения полю или стремиться к конкретным показателям покрытия тестами (т. е. охват 85%), отличный разработчик Angular должен сосредоточиться на тестировании основной бизнес-логики.
• Обычно бывает больше E2E-тестов или модульных тестов? Почему? В качестве интерфейсных приложений приложения Angular могут использовать два основных типа автоматических тестов: модульные тесты и сквозные (E2E) тесты. Как правило, в наборе тестов будет много модульных тестов и меньше E2E-тестов. Модульные тесты небольшие, поэтому их можно быстро написать и выполнить. Тесты E2E больше и медленнее. Справедливое предупреждение: не все разработчики будут иметь одинаковое мнение относительно правильного соотношения модульных и E2E-тестов, которые необходимо поддерживать. На самом деле это зависит от сложности тестируемого приложения, и даже в этом случае ответ в некоторой степени спорен.

Угловые среды тестирования

У разработчиков Angular есть выбор, когда дело доходит до фреймворков для автоматизированного тестирования. Модульное тестирование можно выполнить с помощью Jest или Jasmine и Karma. Каждый разработчик Angular должен быть знаком с Jasmine и Karma. Jest также распространен — он, как правило, быстрее и имеет более продвинутые параметры тестирования.

Стандартом тестирования E2E для приложения Angular является Protractor, инструмент по умолчанию, созданный Angular CLI. Альтернативой является Cypress, многообещающая среда тестирования E2E с множеством опций.

Убедитесь, что кандидат обладает глубокими знаниями по крайней мере об одной среде модульного тестирования и одной среде тестирования E2E.

Будьте в курсе последних выпусков Angular

Великие разработчики Angular не всегда могут использовать последнюю версию в разработке по разным причинам, но они должны знать график выпуска Angular, чтобы быть в курсе изменений и быть готовыми к переключению. Один из способов оценить это — спросить кандидата, знаком ли он со стратегией выпуска Angular. Angular планирует выпускать основной релиз каждые шесть месяцев, обычно в феврале и мае. Выпуск Angular находится на «активной поддержке» в течение первых шести месяцев после даты выпуска и на «долгосрочной поддержке» в течение 12 месяцев после даты выпуска. Это довольно сжатые сроки по сравнению с некоторыми другими технологиями, поэтому особенно важно оставаться в курсе событий.

Вы также можете изучить самую последнюю версию Angular и спросить своего кандидата о преимуществах этих новых функций. Например, примерно в то время, когда был выпущен Angular 14, вы могли спросить кандидата о:

• Автономные компоненты, которые уменьшают потребность в модулях Angular. Автономные компоненты не объявлены ни в одном из существующих NgModule , и они напрямую управляют своими собственными зависимостями. В результате от них можно напрямую зависеть без промежуточного NgModule .
• Типизированные формы, еще одно крупное обновление в Angular 14, которое установило строгую типизацию по умолчанию для Angular Reactive Forms. Типизированные формы гарантируют, что значения внутри FormControls , FormGroups и FormArrays являются типобезопасными во всей поверхности API. Это обеспечивает более безопасные формы, особенно для глубоко вложенных сложных случаев.

Следующий великий разработчик Angular для вашей фронтенд-команды

Каждый проект и команда веб-разработки отличаются друг от друга и будут придавать различное значение различным аспектам навыков и знаний разработчика Angular. Но понимание фундаментальных тем, которые мы представили здесь, позволит менеджерам по найму конструктивно участвовать в найме — даже в более технических оценках.

Блог Toptal Engineering выражает благодарность Рамазану Йылдызу за обзор технических концепций и диаграмм, представленных в этой статье.