Не хуже React: как стать Angular-разработчиком в 2022 году — дорожная карта

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

Что такое Angular?

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

Согласно данным сайта work.ua, средняя зарплата Angular-разработчика — 52,500 гривен (~$2 тыс.) в месяц. На момент написания статьи доступно 87 вакансий. 

Теперь, когда у вас есть базовое понимание Angular, давайте рассмотрим, что нужно, чтобы его освоить. Знание нижеприведенных технологий и инструментов также пригодится при повышении квалификации и для карьерного роста. 

Основы

Чтобы стать разработчиком Angular, для начала нужно изучить основы фронтенда, а именно языки разметки HTML, язык таблиц стилей CSS и язык программирования JavaScript. Это очень важно. 

• HTML: ознакомьтесь с основами HTML и Semantic HTML.
• CSS: изучите основы CSS, Flexbox, CSS grid, освойте адаптивный веб-дизайн и медиа-запросы.
• JavaScript: изучите синтаксис, основные операторы, манипуляции с DOM, AJAX, поднятие (hoisting), Event Bubbling, прототипы, ECMAScript и другие особенности языка.

Основные навыки разработки

После изучения базы освойте основные навыки разработки веб-приложений, а именно: 

• систему контроля версий Git;
• HTTP/HTTPS протоколы;
• терминал;
• структуру данных и алгоритмы;
• шаблоны проектирования.

Angular

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

Build Tools

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

• Angular CLI;
• WebPack;
• Bazel;
• RollUp.

Менеджеры пакетов:

• Npm;
• Yarn.

Таск-раннеры (запуск задач): 

• Npm scripts;
• Gulp.

Стилизация

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

• CSS Framework:
  • Bootstrap;
  • Zurb;
  • Semantic UI;
  • Bulma;
  • Tailwind CSS.
• CSS Preprocessor:
  • Saas/SCSS;
  • Post CSS;
  • Less.
• Design Systems:
  • Clarity Design System;
  • Angular Material.

Стандарт оформления кода

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

• Angular Style Guide;
• Tslint;
• Prettier.

Изнанка Angular

Так как Angular написан на TypeScript, будет не лишним изучить этот язык программирования, а также библиотеку для управления асинхронными операциями и событиями в приложении в стиле реактивного программирования RxJS. 

Архитектура

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

• Schematics;
• Building Libraries;
• Angular Elements.

Управление состоянием

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

• NGXS;
• NGRX:
  • @ngrx/entity;
  • @ngrx-data;
  • @ngrx/effects.

Прогрессивные веб-приложения (PWA)

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

• angular/PWA;
• Workbox.

Библиотеки

При использовании Angular для разработки веб-приложений вы можете столкнуться со следующими библиотеками: 

• Lodash;
• Moment.js.

Тестирование

Тестирование помогает обнаружить ошибки в исходном коде и определить, работает ли приложение так, как ожидалось. Тестирование приложения можно проводить следующими методами: 

• Юнит-тестирование:
  • Jasmine;
  • ESLint;
  • Karma;
  • Jest.
• E2E-тестирование:
  • Protractor;
  • Cypress.

Небраузерная среда

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

• Десктоп:
  • Electron.
• Телефон:
  • NativeScript;
  • Ionic;
  • Angular/PWA.
• Рендеринг на стороне сервера:
  • Angular Universal.

Ранее мы публиковали дорожные карты для дата- и DevOps-инженеров, а также Java-, фронтенд-, бэкенд- фулстек- и разработчиков игр.