Инструментарий Angular-разработчика: что нужно знать и уметь?

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

  • JavaScript де-факто является стандартным языком программирования для создания клиентской части веб-приложений.
  • TypeScript — надмножество JavaScript, позволяющее повысить продуктивность разработчиков. TypeScript поддерживает большую часть функциональности ES6 и добавляет необязательные типы, интерфейсы, аннотации метаданных и пр.
  • Анализатор кода TypeScript использует файлы с определением типов для кода, который изначально не был написан на TypeScript. DefinitelyTyped представляет собой популярную коллекцию подобных файлов, содержащих описание API сотен библиотек и фреймворков JavaScript. Определение типов позволяет IDE предоставлять помощь в зависимости от контекста и выделять ошибки. Вы будете устанавливать файлы с определением типов с помощью структуры @types.
  • Поскольку большинство браузеров поддерживают лишь синтаксис ECMAScript 5 (ES5), для развертывания вам понадобится скомпилировать (преобразовать из одного языка в другой) код, написанный на TypeScript или ES6, к ES5. Angular-разработчики могут использовать для этих целей Babel, Traceur и компилятор TypeScript.
  • SystemJS — универсальный загрузчик модулей, который загружает модули, созданные в соответствии со стандартами ES6, AMD и CommonJS.
  • Angular CLI — генератор кода, позволяющий генерировать новые проекты, компоненты, сервисы и маршруты для Angular, а также создавать приложение для развертывания.
  • Node.js — платформа, построенная на движке JavaScript для Chrome. Содержит фреймворк и среду выполнения для запуска кода JavaScript за пределами браузера. Эта среда выполнения понадобится, например, для установки инструментов, необходимых при разработке приложений Angular.
  • npm — менеджер пакетов, позволяющий загружать инструменты, а также библиотеки и фреймворки JavaScript. Этот менеджер пакетов имеет репозиторий, в котором содержатся тысячи элементов. Вы будете использовать его для установки практически всего: от инструментов разработчика (например, компилятора TypeScript) до зависимостей приложений (таких как Angular, jQuery и др.). С помощью npm можно запускать сценарии. Вы будете использовать эту функциональность, чтобы запускать серверы HTTP, а также для автоматизации сборки.
  • Bower раньше был популярным менеджером пакетов, предназначенным для разрешения зависимостей приложений (наподобие Angular и jQuery). Мы больше не будем использовать его, поскольку все, что нужно, можно загрузить с помощью npm.
  • jspm — еще один менеджер пакетов. Зачем он нужен, если npm может позаботиться обо всех зависимостях? Современные веб-приложения состоят из загружаемых модулей, и jspm интегрирует SystemJS, что позволяет без труда загружать подобные модули.
  • Grunt — средство для запуска задач. Между разработкой и развертыванием находится много этапов, и все они должны быть автоматизированы. Вам может понадобиться скомпилировать код, написанный на TypeScript или ES6, в более широко поддерживаемый синтаксис ES5, а код, изображения и файлы CSS — минимизировать. Кроме того, может воникнуть необходимость включить все задачи, которые проверяют качество кода, и модульные тесты для вашего приложения. Grunt поможет сконфигурировать все задачи и их зависимости, используя файл JSON, поэтому процесс будет на 100 % автоматизирован.
  • Gulp — еще одно средство для запуска задач. Оно может автоматизировать задачи точно так же, как и Grunt, но конфигурировать вы будете с помощью не JSON, а JavaScript. Это позволит при необходимости выполнить отладку.
  • JSLint и ESLint — анализаторы кода, которые определяют проблемные шаблоны в программах JavaScript или документах, отформатированных в JSON. Они являются инструментами проверки качества кода. Запуск программы JavaScript с помощью JSLint или ESLint приведет к появлению предупреждений, указывающих на способы улучшения качества кода программы.
  • TSLint — инструмент проверки качества кода для TypeScript. Он имеет набор расширяемых правил для навязывания рекомендованного стиля написания кода и шаблонов.
  • Minifiers, как и UglifyJS, уменьшает размер файлов. В JavaScript эти программные средства удаляют комментарии и line breaks, а также укорачивают имена переменных. Минификацию можно выполнить для HTML, CSS и файлов изображений.
  • Упаковщики, такие как Webpack, объединяют несколько файлов и их зависимости в один файл.
  • Поскольку синтаксис JavaScript очень либерален, для кода приложения требуется тестирование, поэтому нужно выбрать один из фреймворков тестирования. Я предпочитаю использовать фреймворк Jasmine и средство для запуска тестов Karma.
  • JavaScript и TypeScript широко поддерживаются современными IDE и текстовыми редакторами, такими как WebStorm, Visual Studio, Visual Studio Code, Sublime Text, Atom и др.
  • Все крупные браузеры поставляются с инструментами разработчика, которые позволяют выполнять отладку программ прямо в браузере. Даже если программа была написана на TypeScript и развернута в JavaScript, вы можете отладить оригинальный исходный код, используя его отображения. Мы применяем Chrome Developer Tools.
  • Веб-приложения должны работать на мобильных устройствах. Вам следует задействовать компоненты пользовательского интерфейса, которые поддерживают адаптивный подход к веб-дизайну с целью гарантировать, что макет пользовательского интерфейса изменяется в зависимости от размера экрана устройства пользователя (Чтобы узнать больше об адаптивном веб-дизайне, обратитесь к «Википедии»: https://en.wikipedia.org/wiki/Responsive_web_design).

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

  • npm для конфигурирования приложений, установки утилит и зависимостей. Вы будете задействовать сценарии npm, чтобы запускать веб-серверы и задачи при автоматизации сборки;
  • Node.js в качестве среды выполнения для запускаемых утилит, а также как фреймворк для написания веб-сервера;
  • SystemJS для загрузки кода приложения и динамического компилирования TypeScript в браузере;
  • компилятор командной строки TypeScript под названием tsc для запуска и программирования приложения с помощью Node;
  • Jasmine для создания модульных тестов и Karma для их запуска;
  • Webpack для минимизации и упаковки приложений для развертывания.

Примечание

Писать программы на Angular гораздо проще, чем на AngularJS. Однако вам придется серьезно подготовиться, поскольку вы будете использовать средства компиляции в другие языки и загрузчики модулей, которые не нужны при разработке приложения с помощью JavaScript и AngularJS. Как правило, введение модулей ES6 изменяет способ загрузки приложений в браузер в будущем.

На рис. 1 показано, как инструменты могут применяться на разных этапах процессов разработки и развертывания.

Используемые инструменты Agular 

Рис. 1. Используемые инструменты

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

Вас заинтересует / Intresting for you:

Установка PHP 7 на Windows
Установка PHP 7 на Windows 1755 просмотров Zero Cool Wed, 17 Oct 2018, 11:56:42
Фильтр Google Page Layout Algo...
Фильтр Google Page Layout Algo... 535 просмотров Игорь Воронов Tue, 17 Mar 2020, 16:26:29
Фильтр Гугл Pirate Algorithm (...
Фильтр Гугл Pirate Algorithm (... 458 просмотров Денис Wed, 08 Jul 2020, 16:58:46
Объект Navigator Javascript: и...
Объект Navigator Javascript: и... 3471 просмотров Денис Tue, 25 Sep 2018, 06:30:01
Войдите чтобы комментировать