Предположим, вам нужно нанять веб-разработчика, работавшего с 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 показано, как инструменты могут применяться на разных этапах процессов разработки и развертывания.
Рис. 1. Используемые инструменты
Программировать на Angular проще, чем на AngularJS, но настраивать среду нужно правильно, чтобы вы могли насладиться процессом разработки. В следующем блоге мы обсудим настройку проектов и инструментов более подробно.
