Angular - это сложно!

24 апреля 2017г.  angular     frontend     инструменты     framework     angularcli   


Выбор javascript фреймворка

Бытует мнение, что начать писать приложения с использованием Angular невероятно сложно. Половина из желающих собрать SPA своей мечты поддались веяниям моды и сразу отсеялись писать приложения на react.js. Высокий уровень вхождения из слухов "экспертов" отпугнул половину из тех, кто не поддался моде. Половину из оставшихся отвратила необходимость осваивать какой-то TypeScript (вам что обычного JS мало?) или Dart (а это что вообще такое?). Половину из этих оставшихся отпугивает чехарда с версиями Angular-а. Половина из тех, кто все-таки разобрался с версиями, не смогли пробиться через первые страницы документации на английском языке. Половина из оставшихся погрязли в устаревших boilerplate-ах и quickstart-ах для Angular 2 rc-X. И так далее, пока в конце концов, не остался один лишь ты, мой одинокий, но очень отважный читатель. И именно тебе я расскажу, правдив ли заголовок этой статьи.


Откуда растут ноги у слухов

Еще не так давно, летом-осенью 2016 года, попробовать использовать вторую версию Angular-а решался далеко не каждый. Официальная страничка отпугивала сообщением "релиз уже совсем скоро", документация была далеко не полная, а в project.json quickstart-приложения было перечислено так много всего разного, что разобраться "для чего вот это нужно" мог не каждый начинающий свое знакомство с фреймворком разработчик. Сообщество тоже еще только зарождалось. Часто, если в процессе разработки у вас появлялся вопрос "как сделать вот эту фичу", ответы других разработчиков на stackoverflow оставляли после себя еще больше вопросов. Да и не все из советов работали. Так как новые rc-версии часто меняли подходы к реализации одной и той же вещи.

Открытым так же оставался вопрос production-сборки, так как отдельной команды или рецепта для сборки нигде предусмотрено не было. В документации присутствовали некоторые скромные рекомендации, а также иногда можно было наткнуться на советы по сборке проекта с использованием Webpack. Изначально же для загрузки всех ангуляровских библиотек использовался system.js по-умолчанию. Который даже при указании "загружать библиотеки подготовленными сжатыми бандлами", все равно мог родить порядка 250 и более запросов, для загрузки вашего SPA. Что, мягко говоря, не очень хорошо.

Конечно, потратив денек на эксперименты с настройкой сборки бандлов и загрузки всего и вся первым webpack-ом (второго в тот момент еще не было), вы могли значительно сократить кол-во запросов к серверу (с 250+ до 4-10, в зависимости от вашего мастерства настройки webpack-а) и тем самым ощутимо ускорить первую загрузку приложения.

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

Так врет ли заголовок?

Чудо было неизбежно и оно случилось в конце февраля 2017 года. Именно тогда вышла 1.0.0-rc.0 версия замечательного инструмента Angular CLI. После его выхода, создать свое первое Angular-приложение стало не сложнее, чем выполнить последовательно 4 команды:

npm install -g @angular/cli ng new my-first-app cd my-first-app ng serve

Разумеется, без установленного node+npm никакого чуда не будет. Но я надеюсь, что это и так очевидно.

Давайте кратенько разберем, что тут происходит.

Первая команда устанавливает Angular CLI глобально в системе. Таким образом вы сможете запускать команду ng (ng по сути и есть основная команда Angular CLI) находясь в любой папке вашей системы, создавать там новые приложения, генерировать компоненты, запускать сборки и пр.

Вторая команда создает новое Angular-приложение в папке my-first-app. Процесс этот не самый быстрый, так как кроме генерации структуры самого приложения, npm скачает все необходимые зависимости, а это, на минуточку, порядка 150 Мб всевозможных библиотек. Придется немного подождать.

После того, как все успешно установится, можем запустить наше приложение. Для этого перейдем в папку с приложением (третья команда) и соберем и запустим его (четвертая команда, ng serve). Далее, в работу вступает webpack (в тот день, когда я пишу эти строки, Angular CLI использует webpack версии 1.3.0. Но я надеюсь, что в скором времени они переползут на webpack 2 и выше), который с помощью tsc компилирует *.ts файлы в js, собирает все (скрипты, стили, шаблоны) в бандлы и запускает простейший веб-сервер на http://localhost:4200/. Просто откройте этот адрес в браузере и вы должны увидеть что-то вроде надписи "app works!".

Поздравляю, вы только что создали и запустили свое первое angular-приложение! Сложно? По-моему, проще уже некуда.

Запуск с помощью ng serve

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

ng serve --host 0.0.0.0 --port 4201

У этой и других команд Angular CLI довольно много всяких полезных параметров. Я крайне советую ознакомиться с ними самостоятельно. Для этого введите в консоли команду:

ng help

Стоит обратить внимание, что запуская проект с помощью команды ng serve, по-умолчанию сборка осуществляется посредством JIT (Just In Time) компиляции. При этом типе компиляции, сборка осуществляется простейшим путем, без каких-либо встроенных оптимизаций. Все изменения, которые вы произведете в файлах вашего проекта, будут добавлены инкрементально, т.е. будут скомпилированы только новые изменения и внедрены, без компиляции всего приложения целиком. При этом должен смениться хеш-код вашей сборки, а js-код в вашем webpack-бандле отловит изменение этого хеша на веб-сервере и принудительно перезагрузит страничку.

JIT рекомендуется использовать для dev-разработки, ее преимущество в скорости внедрения изменений. Подробнее читайте в официальной документации.

Уже этой осенью, с релизом Angular 5, планируется вовсе отказаться от JIT компиляции, в пользу AOT, и все выше написанное касательно JIT станет неактуальным. Под неактуальным, я не имею в виду, что изменится сама команда ng serve, просто AOT тоже научится делать быстрые инкрементальные сборки и полностью отпадет надобность в JIT-сборках.

Сборка готового проекта

С появлением Angular CLI вам больше не надо самостоятельно ковыряться в конфигах webpack-а, а также переписывать код компонентов и main.ts скрипта, вашей точки входа в приложение, чтобы настроить AOT сборку для production. Теперь достаточно всего одной команды:

ng build

Просто, как никогда раньше!

Будучи запущенной без параметров, команда ng build соберет проект в виде неминифицированных js-файлов + *.js.map для удобной отладки. Что, конечно, не годится для production сборки. Для последнего нужно дополнительно передать следующий ключ:

ng build --prod

При этом, будет использованы настройки из environment.prod (если вы не перенастраивали environments-секцию в вашем .angular-cli.json), а также будет осуществлена AOT-компиляция. Результат компиляции найдете в папке dist вашего проекта. Можете скормить его содержимое любому веб-серверу, например, nginx или Apache, и любоваться победной надписи там.

Angular невероятно сложный, и я только что соврал

Теперь, когда мы за пять минут можем развернуть новый Hello, World! проект на Angular, а также запускать его, редактировать его компоненты и видеть результат изменений сразу в браузере, самое время приступать к более глубокому изучение фреймворка. Например, с помощью официального урока, состоящего из всего семи шагов.