В сегодняшней статье речь пойдет о фреймворке Angular2. Мы поговорим об недочетах Angular1, расскажем об основных изменениях в новой версии фреймворка и, что на наш взгляд самое интересное, поделимся впечатлениями от использования новой версии Angular.
Для начала несколько слов о нас. Мы — небольшая IT компания. В качестве основного фреймворка для фронтенда у нас был выбран Angular 1, когда он был уже в довольно взрослом возрасте — версия 1.2+. Не так давно (буквально за месяц до релиза) мы решили попробовать Angular2 на новых небольших проектах. Нельзя сказать, что за 2.5 месяца мы стали гуру Angular2, но пока впечатления свежи, лучше ими поделиться.
Итак, давайте немного вспомним про Angular1. Как мне кажется, Angular1 принес много новых идей, имел довольно низкий порог вхождения и хорошо подходил для построения сложных клиентских приложений. Наверное, именно поэтому он быстро завоевал популярность и стал фреймворком #1. В тоже время в Angular1 было довольно много «скользких» моментов. Вот некоторые из них:
• В чем разница между factory и services
• Зачем нужны controllers, если есть directive?
• Слишком сложный механизм directive
• Иерархия $scope кажется здравой идеей, до тех пор, пока вы работаете с относительно простым приложением.
Не так давно вышел Angular2 и становится понятно, что от всех этих проблем разработчикам удалось избавиться.
Небольшой overview изменений с комментариями:
Осталось почти без изменений:
• DI
• Filters (теперь они называются pipe)
• Модули
• Services
Убрали:
• Controllers (используйте components)
• $scope (используйте components)
• Излишний механизм создания сервисов
Добавили:
• Новый язык – typeScript
Вы все еще можете писать на JS. Я не советовал бы вам использовать ES5, а c ES2015 мне к сожалению познакомиться не пришлось. Причин не писать на typeScript я не вижу, так как:
— Типизированные языки заставляют вас определять правильные сущности, ловят ошибки на этапе компиляции и значительно упрощают жизнь среде разработки.
— Приложение быстро перекомпилируется (1 — 2 секунды).
— Документация Angular и большинство вопросов на stackoverflow на typeScript.
• Новый синтаксис в разметке
Теперь фреймворк использует [] для передачи данных и () для привязывания listener’ов. Поначалу это изменение несколько смущает, но довольно быстро становится привычным. Вот два важных преимущества нового подхода:
— Визуально разделяет данные и листенеры.
— Среда разработки (от JetBrains) теперь может дать вам подсказку.
Изменилось:
• Directives
От директив (теперь они называются components) осталась только идея. Реализация была кардинально переделана и упрощена (без потери функциональности).
• Принцип построения приложения
Приложение теперь — это дерево компонентов. Вы начинаете думать в рамках компонентов и стараться все разбить на компоненты — на кусочки, которые можно использовать потом разных местах. Знаете, это действительно удобно.
Ну и на закуску, впечатления от использования Angular2:
• По мере роста приложения начинаешь понимать, что его сложность увеличивается не так сильно благодаря typeScript и грамотному разбиению всего на компоненты.
• Сборка проекта усложняется, но webPack в этим справляется.
• Отладка в браузере работает на четверку.
• Описания ошибок оставляют желать лучшего — старайтесь действовать маленькими итерациями, чтобы было проще понять причину ошибки.
• Библиотека компонентов не такая большая, как у Angular1, но основные вещи уже реализованы.
• Перевести существующий проект на Angular2 мне представляется слишком сложным — лучше оставить на Angular1
• Учиться лучше на небольших админках
Подведем итоги. На мой взгляд, Angular2 сильно отличается от Angular1. Вам придется потратить пару недель на то, чтобы вникнуть в изменения. Поначалу многое покажется странным и излишним, и, конечно, у нового фреймфорка есть свои недостатки. Однако, общие ощущения от работы у меня очень позитивные. Причин оставаться на Angular1 я не вижу — потратьте 1-2 недели на изучение нового и в бой!
