Самая первая версия Angular была представлена в 2009 году и является результатом новаторской работы инженеров Google, Миско Хевери и Адама Абронса. Angular - это среда с открытым исходным кодом с высокоразвитой поддержкой JavaScript, которая является частью экосистемы JavaScript . В целом он получил горячую оценку сообщества разработчиков.
Надежная кодовая база Angular и тот факт, что она разрабатывается, поддерживается и поддерживается Google, являются основными причинами, по которым разработчики полагаются на Angular при создании высоко интерактивных веб-приложений. В опросе разработчиков StackOverflow 2020 года Angular занял третье место по популярности среди технологий веб-фреймворков. С начала 2019 года сообщество разработчиков Angular выросло на 50 процентов по сравнению с 2018 годом, как указано в NG-Conf 2019. Учитывая высокие темпы его конкурентоспособности в эту эпоху технологического прогресса, Angular все чаще используется для приложений корпоративного уровня.
1. Что такое Angular?
Прежде всего следует отметить, что у Angular (без «JS» в названии) был предшественник - AngularJS. Названия почти одинаковые, но технически это разные инструменты. После выпуска в 2009 году он был заменен на «новый Angular», широко известный как Angular 2+ или просто Angular в 2016 году. Строго говоря, он используется с 2016 года.
Angular - это платформа веб-разработки, встроенная в TypeScript, которая предоставляет разработчикам надежные инструменты для создания клиентских (интерфейсных) веб-приложений, настольных и мобильных приложений.
В 2010 году основным преимуществом Angular было то, что он позволял превращать HTML-документы в динамический контент. До AngularJS HTML было гораздо менее удобно изменять, а это означало, что пользователи не могли активно взаимодействовать с интерфейсами на HTML-страницах так же просто и быстро, как сегодня.
Существовало несколько способов создания динамических одностраничных приложений (SPA), но они были слишком сложными для удобного программирования. Архитектура Angular уменьшила усилия по разработке, направленной на создание динамического контента, и пользователи получили выгоду от веб-страниц с динамическими формами и элементами.
Новый Angular, по сравнению с Angular JS, обеспечивает те же преимущества, что и его родительский (динамические страницы и т. Д.), Но с современными инструментами, большей производительностью; в большем масштабе. Современные функции с 2016 года по сегодняшний день призваны быть гораздо более удобными для пользователя, чем в 2010 году.
1.1. Для чего используется Angular и какие проблемы он решает?
Основная функция Angular - создание сложных веб-приложений. Его также можно использовать для создания универсальных приложений (т. е. одной базы кода для развертывания как на веб-платформах, так и на мобильных платформах, подобно React Native).
Будучи веб - фреймворков он инстинктивно помогает ускорить процесс создания веб - приложений, позволяя разработчику писать намного меньше кода. Angular также использует HTML для определения пользовательского интерфейса приложения . HTML, по сравнению с Javascript, является декларативным и интуитивно понятным языком; и намного менее сложный. Это также означает, что разработчику не нужно тратить время на выполнение программ и решение таких проблем, как «в каком порядке должны загружаться сценарии». По сути, вы можете определить, что вам нужно, и Angular позаботится об этом.
Использование TypeScript для повышения удобства сопровождения кода и повышения производительности по мере создания более сложных приложений - два отличных УТП для Angular. Кроме того, выбор конкретной экосистемы может позволить Angular стать основным инструментом для долгосрочных и крупных инвестиционных проектов, где крутая кривая обучения компенсируется стабильностью и постоянной технической поддержкой.
1.2. Похож ли он на какие-либо другие языки или фреймворки?
В пользовательском интерфейсе он похож на то, что раньше называлось « уровнем представления » в языках шаблонов, таких как JSP (страницы сервера Java), JSF (лица сервера Java) или ASP (ASP.net). На уровне логики это похоже на корпоративные технологии, такие как Java / .net.
React - еще один веб-фреймворк, с которым часто сравнивают Angular . Подобно Angular, React используется как при разработке одностраничных, так и мобильных приложений. Однако он отличается тем, что React намного меньше по размеру и обычно требует дополнительных библиотек при разработке сложных приложений React.
Vue - это еще один фреймворк, который часто сравнивают с двумя вышеупомянутыми. Vue работает на уровне представления приложения, обладая функцией виртуальной DOM и поддерживая дополнительные библиотеки, аналогичные React. Vue также имеет стиль шаблона, аналогичный Angular, но с точки зрения производительности он намного легче; Это означает, что он более полезен для создания пользовательских интерфейсов и решения сложных проблем. Это противоречит склонности Angular к разработке приложений корпоративного масштаба.
1.3. Каковы его основные преимущества или особенности?
Angular поставляется с множеством инструментов, используемых для наиболее распространенных задач программирования. К ним относятся: структурирование пользовательского интерфейса с компонентами, связь с внутренней структурой через HTTP, обработка форм (Angular поддерживает два подхода: формы на основе шаблонов и реактивные формы) и обработку логики приложения в сервисах. Особенностью Angular является то, что его дизайн ориентирован на крупномасштабные приложения. Angular имеет расширенную систему модульности в сочетании с внедрением зависимостей, что делает его легко настраиваемым для сложных приложений, чтобы сохранить модульность (но явно увеличивает сложность).
2. Что важно знать ИТ рекрутеру об Angular?
Angular использует множество концепций, заимствованных из таких технологий, как Java / .net, поэтому опытным back-end разработчикам Angular покажется знакомым и не будет представлять особой проблемы.
Однако есть некоторые концепции, которые потребуют обучения интерфейсным разработчикам, не обладающим хорошими знаниями в области серверной части. Примеры этих концепций включают внедрение зависимостей, сервис-ориентированную архитектуру, статическую типизацию, общие принципы ООП (объектно-ориентированного программирования) и так далее.
Тем не менее, Angular - это фреймворк с множеством встроенных функций. И изучение этих функций может потребовать значительных затрат времени и усилий. Это означает, что даже опытные разработчики Angular не будут знать абсолютно все о фреймворке от корки до корки, не забывайте про каламбур.
2.1. Как часто меняется стек технологий?
Официально команда Angular должна выпускать новую основную версию каждые шесть месяцев.
Новая основная версия означает, что она может содержать критические изменения , поэтому код, который работал в предыдущих версиях, может перестать работать. Поскольку в новых основных версиях могут быть критические изменения, эти радикальные изменения происходят не очень часто.
Основной причиной может быть неудобство, с которым столкнутся разработчики, приложив много усилий только для обновления фреймворка. Так что вместо революции каждые полгода мы скорее наблюдаем эволюционный рост.
Цитата с веб-сайта Angular гласит: В целом вы можете ожидать следующий цикл выпуска:
Мажорный выпуск каждые 6 месяцев
1-3 второстепенных выпуска для каждого основного выпуска
Выпуск патча и предварительная версия (next или rc) почти каждую неделю
2.2. Доступно ли много ресурсов / инструментов / технологий?
Angular - одна из самых популярных веб-фреймворков, поэтому для нее доступно множество библиотек с открытым исходным кодом. Излишне говорить, что существует множество легко доступных ресурсов, включая книги, учебные пособия, конференции и блоги.
Существует множество популярных библиотек компонентов, таких как Angular Material (реализация Google Material Design для Angular) или ng-bootstrap (реализация начальной загрузки Twitter для Angular). Кроме того, доступно несколько популярных библиотек управления состоянием, включая NGRX, NGXS, Akita, не говоря уже о различных методах в чистой библиотеке RxJS. По сути, для Angular нет недостатка в бесплатном и платном контенте, доступном онлайн .
2.3. С какими инструментами и методами должен быть знаком Angular разработчик?
Разработчики Angular должны быть знакомы с самим фреймворком, насколько это возможно.
Разработчикам очень важно знать архитектуру и шаблоны проектирования, поскольку Angular обычно используется для создания крупномасштабных проектов.
Шаблоны проектирования помогают поддерживать в порядке значительную кодовую базу и сложности и упрощают добавление новых функций. Без шаблонов проектирования код будет намного более хаотичным и сложным в обслуживании. Их функциональность не специфична для Angular, скорее, это общая тема компьютерных наук, но их существование особенно важно для Angular.
Они также должны быть знакомы с фундаментальными зависимостями Angular:
TypeScript - это основной язык для разработки приложений Angular. Это надмножество JavaScript с поддержкой во время разработки для обеспечения безопасности типов и инструментов. Браузеры не могут выполнять TypeScript напрямую, так как Typescript должен быть «перенесен» в JavaScript с помощью компилятора tsc, что требует настройки.
JavaScript (сам язык программирования браузера) - поскольку это среда, в которой будут запускаться приложения Angular, в частности, асинхронный JavaScript.
RxJS - программная библиотека, предоставляющая реактивные потоки, которые повсеместно используются в Angular.
2.4. Какой тип опыта важно искать в Angular разработчике (коммерческий, открытый, научный, академический)?
Научный и академический опыт практически не имеет значения. Коммерческий опыт создания веб-приложений обычно указывает на хорошие навыки разработчика Angular, поэтому это наиболее важный фактор.
Также необходим опыт использования библиотек JavaScript / TypeScript / Angular с открытым исходным кодом.
3. Как проверить навыки Angular разработчика на этапе подбора?
Следует отметить одну важную вещь: никогда не следует ожидать, что разработчик будет силен во всех аспектах программирования. Это сомнительно; например, тот, кто имеет большой опыт работы с CSS, HTML и стилем, также будет экспертом в архитектуре и шаблонах проектирования. Так что постарайтесь найти навыки разработчика Angular, необходимые для вашего проекта, и сосредоточьтесь на них.
3.1. Что нужно учитывать при просмотре резюме?
Очевидно, что опыт работы с Angular и другими веб-фреймворками является обязательным для любого резюме в этой должности. Однако другие вещи, которые следует учитывать, связанные с навыками разработчика Angular, включают:
- Знание JavaScript
- Браузер (среда выполнения) и DOM (объектная модель документа)
- Хорошее знание HTTP, так как почти всем приложениям необходимо загружать внешние данные для клиентского (Angular) приложения для обработки, отображения и передачи пользователям и т. Д.
- Возможность работать с CSS, поскольку приложения должны иметь красивый макет после всего
- Опыт в архитектуре и дизайне, позволяющий справляться со сложными бизнес-требованиями с помощью поддерживаемого кода
- Разработчику Angular крайне важно иметь обширный опыт работы с браузерами, DOM, HTTP и CSS. Это потому, что: если что-то невозможно в среде выполнения, этого также нет в Angular. По сути, фреймворк не может выходить за пределы своей среды выполнения.
Архитектура и шаблоны проектирования не менее важны, потому что, как упоминалось выше, приложения Angular довольно большие и сложные. Большие приложения с плохим дизайном приводят к высоким затратам на обслуживание приложений и добавление функций, что, конечно, не идеально.
3.2. Какие термины глоссария важно знать в Angular (включая фреймворки, библиотеки и языковые версии)?
Архитектура
- Modules
- Dependency Injection
- Components
- Performance techniques
- HTTP Services
State management
- Stateful Services
- NGRX or NGXS or Akita etc.
- Template-driven forms
Forms
- Reactive Forms
- Components
Templates
- Pipes
- 3rd party libraries with built-in components, such as Angular Material, ng-bootstrap, etc.
Аспекты связанные с Ангуляр
TypeScript - язык, на котором написаны приложения Angular. В то время как JavaScript является основой веб-программирования и используется на большинстве веб-сайтов, TypeScript - это современный объектно-ориентированный язык программирования, обеспечивающий лучшую структуру для управления большими веб-проектами. TypeScript внедряется в несколько крупных проектов и библиотек с открытым исходным кодом, включая Angular. Основные различия между JavaScript и TypeScript:
TypeScript имеет функцию строгой типизации или поддерживает статическую типизацию. Это означает, что статическая типизация позволяет проверять правильность типа во время компиляции. Это недоступно в JavaScript.
TypeScript указывает на ошибки компиляции во время компиляции (которая происходит во время разработки). JavaScript, будучи интерпретируемым языком, не имеет ошибок компиляции. Все ошибки передаются во время выполнения, поэтому потенциально больше ошибок может просочиться в приложение и вызвать проблемы для конечного пользователя.
RxJS - реактивные потоки используются для поддержки HTTP-запросов, запросов WebSocket, реактивных форм, маршрутизации, состояния приложения и т. Д.
Webpack - также называемый сборщиком , это инструмент, который объединяет множество разрозненных файлов (десятки, сотни или даже тысячи из них) и объединяет их в один логический файл, который затем запускается. Он имеет множество преимуществ, наиболее важными из которых являются лучшая производительность и улучшенные инструменты разработчика.
3.3. Какие версии полностью разные? Какие версии похожи друг на друга?
Как упоминалось ранее, каждую новую основную версию Angular можно интерпретировать как эволюционное изменение. Обновление 2016 года от AngularJS до текущего Angular было скорее революцией с внесенными фундаментальными изменениями.
Одно из самых важных изменений было в Angular 9, который представил новый компилятор под названием Ivy.
Каждая версия получает новый основной номер. Пока у нас было:
Angular 2
(Angular 3 не было, так как внутренние пакеты Angular были не синхронизированы друг с другом, а затем унифицированы. С тех пор пакеты обратно совместимы.)
Angular 4 - 10
Релизы можно увидеть в журнале изменений : https://github.com/angular/angular/blob/master/CHANGELOG.md
3.4. Какие еще строки в резюме могут показать навыки разработчика Angular?
Опыт работы с другими JS-фреймворками (или мобильными приложениями) был бы очень полезен. К ним относятся:
AngularJS, Ember, React, Vue и многие другие
Разработчику, знакомому с Vue или AngularJS, без сомнения, придется потратить немного времени на изучение Angular. Однако разработчик уже должен понимать, каковы типичные задачи, какие потенциальные проблемы необходимо решить и каковы ограничения веб-приложений. Их просто необходимо решить с помощью другого набора инструментов (но темы / проблемы / задачи логически почти одинаковы).
Опыт автоматического модульного тестирования (такие инструменты, как Karma, Jasmine, Jest, Mocha, Ava и т. Д.) И / или тестирования e2e (Selenium, Protractor, Puppeteer) также будет полезен, если в роль разработчика входит написание или поддержка тестов.
4. Техническая проверка навыков разработчика Angular во время технического интервью по телефону / видео.
Независимо от того, являетесь ли вы ИТ-рекрутером, менеджером проекта или техническим директором, вы прекрасно знаете, что успех вашего проекта зависит от вашей способности находить лучших разработчиков.
4.1. Вопросы, которые вы должны задать об опыте разработчика Angular . Зачем вам задавать каждый из этих вопросов?
1. В чем заключались ваши повседневные задачи в предыдущих проектах?
Ответ на этот вопрос должен сказать вам, интересует ли кандидата больше часть пользовательского интерфейса (HTML, CSS, визуальные эффекты, шрифты и т. Д.) Или логика приложения (управление состоянием, службы, модули). В общем, лучше иметь разработчиков разных специализаций вместе в одной команде, чем иметь всех экспертов по CSS и не иметь экспертов по архитектурному дизайну.
2. В предыдущих проектах вы поддерживали или создавали библиотеку компонентов (набор компонентов, повторно используемых несколькими приложениями или несколькими проектами)?
Этот вопрос касается расширенного варианта использования компонентов Angular. Если кандидат работал над таким проектом, велика вероятность, что он заметит больше технических нюансов (что является плюсом), чем разработчики, которые этого не сделали. Библиотеки компонентов создать сложно, поскольку они должны поддерживать несколько функций для различных компонентов.
3. Вы использовали внешние сторонние библиотеки для стилей?
Многие проекты и компании решают не создавать свой собственный язык дизайна (внешний вид торговой марки или бизнеса). Вместо этого они решили реализовать существующий язык, такой как Angular Material и ng-bootstrap. Эти инструменты предоставляют множество полезных функций, но их изучение требует времени. Если вы знаете, что ваша команда использует стороннюю библиотеку для стилей, обязательно спросите об этом кандидата. Это может существенно повлиять на решение о найме кого-либо.
4. Вы автоматически тестировали написанные приложения?
Если ваша команда поддерживает автоматические тесты, такие как модульные, функциональные, кандидат с опытом тестирования будет намного более привлекательным, чем те, кто этого не делает. Остерегайтесь кандидатов, которые «никогда не тестировали свое программное обеспечение автоматически» или не верят, что это имеет смысл или окупается.
5. Вы создавали приложения в реальном времени?
Большинство приложений загружают данные с сервера и отображают их пользователю, например, баланс вашего банковского счета. Значение меняется не очень часто, поэтому нет необходимости перезагружать его каждую секунду. Но некоторым приложениям (например, компаниям такси или финансовым учреждениям) необходимо обновлять свои данные каждую секунду или даже чаще. Если ваше приложение является приложением в реальном времени , то ваши компоненты Angular должны чаще сбрасывать данные или использовать WebSockets через HTTP.
6. Объясните, как работает асинхронный конвейер в Angular.
Этот вопрос проверяет, понимает ли разработчик один из фундаментальных инструментов, широко используемых в приложениях Angular. См. Подробное объяснение ниже.
Предположим, у нас есть компонент, который хранит HTTP- запрос в потоке , и этот поток привязан к шаблону с помощью трех разных асинхронных каналов. Сколько физических
7. HTTP-запросов выполняет этот компонент?
Этот вопрос очень важен, так как незнание того, как работают асинхронные каналы, часто приводит к созданию приложений, которые делают слишком много запросов, что замедляет как внешний, так и внутренний уровни.
Быстрый ответ: если нет субъектов и операторов общего доступа , то компонент делает три запроса (что неверно). Если правильно используется оператор subject / share , должен быть только один запрос, обеспечивающий все асинхронные каналы.
8. Каким правилам и принципам вы следуете при написании модульных тестов?
Этот вопрос проверяет знания и опыт тестирования в Angular и в целом. При создании больших приложений в Angular особенно важно доверять качеству своего приложения - а это практически невозможно без автоматических тестов (поскольку ручное тестирование чрезвычайно дорого).
Общие принципы тестирования:
- Тесты должны выполняться независимо и не должны зависеть от их порядка
- Пропуск одного теста не должен приводить к сбою другого теста, и наоборот
- Тесты должны проверять только одно поведение / атрибут.
- Данная функциональность должна быть протестирована один раз. Потому что если функциональность нарушена, продолжать тестирование не логично
- Модульные тесты должны имитировать их зависимости, например HTTP-вызовы. Это связано с тем, что если тест проверял поведение обоих компонентов и не удался из-за того, что сервер отвечает недопустимым ответом HTTP, это не может быть связано с компонентом. Проверку всего (включая зависимости) нужно проводить в так называемых e2e-тестах.
9. Вы работаете над проектом в течение некоторого времени и замечаете, что существует постоянная проблема: всякий раз, когда компонент изменяется, многие тесты терпят неудачу, и их необходимо обновить. Что бы вы об этом подумали и что бы сделали?
Этот вопрос проверяет как отношение разработчика, так и навыки работы в команде, и его технический опыт работы с приложениями Angular. Критика существующей кодовой базы неконструктивна и сразу же нарушает условия сделки. Предпочтительным подходом будет совместный анализ причин, согласование их в команде и создание измеримого плана того, как ситуацию можно улучшить с течением времени.
Предложение отказаться от действий для рефакторинга тестов и внедрения имеет мало смысла с точки зрения бизнеса, поскольку в действительности команды не могут просто прекратить предоставлять новые функции.
10. На прошлой неделе была выпущена новая версия Angular. Собираетесь ли вы обновить приложение, если да, то когда?
Как правило, речь идет о соблюдении баланса между поддержанием высокого технического качества проекта и бизнес-целями. Если разработчик говорит, что он выполнит быструю проверку, чтобы увидеть, можно ли легко выполнить эту задачу (обновление оказывается простым для навигации, но сначала необходима проверка), то это будет отличный ответ.
11. Вы собираетесь начать создавать приложение Angular, но не знаете, будет оно большим или маленьким. Бизнес не может сказать, будет ли приложение расти. Какой инструмент вы бы использовали для управления государством?
Этот вопрос проверяет образ мышления разработчика - могут ли они вводить ненужные дополнительные инструменты (что увеличивает сложность и стоимость предоставления функций) или упрощает работу. Хороший ответ - хранить данные в сервисах Angular, если приложение небольшое. Вы можете подумать о дополнительных библиотеках управления состоянием (NGRX, NGXS, Akita и т. Д.), Когда приложение станет больше и сложнее. Контекст этого вопроса заключается в том, что разработчики склонны использовать библиотеки, когда они не нужны, просто потому, что они хотят узнать их поближе, чтобы записать это в свои резюме. Это популярная проблема в сообществе разработчиков интерфейсов.