Angular 6 и будущее ngX-Rocket

Angular 6 и будущее ngX-Rocket

Последний выпуск Angular, шестая версия фреймворка уже из духовки, за которым, как обычно, последовало обновление генератора ngX-Rocket для его поддержки.

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

Небольшие изменения

Что касается этого нового основного выпуска, вы можете быть удивлены, так как на этот раз список изменений довольно мал. Единственное критическое изменение заключается в том, что NodeJS 8.9 теперь является минимальной поддерживаемой версией, соответствующей новым требованиям для Angular CLI 6.

Помимо обновления шаблонов и структуры каталогов для соответствия новым проектам Angular 6, мы также выполнили полную миграцию на RxJS 6 с несколькими критическими изменениями, будьте осторожны при обновлении существующих проектов. Кстати, мы отказались от пакета rxjs-compat для всех шаблонов, кроме проектов на основе Ionic: с Ionic 4 под углом кажется, что Ionic 3 больше не будет обновляться после обновления Angular, поэтому миграция Ionic 4 должна быть быть завершенным, прежде чем можно будет удалить уровень совместимости RxJS.

Наконец, полифиллы для браузеров IE также были удалены по умолчанию для новых проектов, чтобы уменьшить размер пакета. Если вам все еще нужна совместимость с IE, посмотрите polyfills.ts файл и раскомментируйте соответствующие строки.

Что дальше?

Над новой версией Angular CLI был проделан большой объем работы, так как теперь она имеет много интересных функций. Некоторые из этих новых функций могут заставить вас задуматься, как они повлияют на будущее ngX-Rocket, поскольку их цели, как правило, схожи, поэтому давайте рассмотрим эти изменения и посмотрим, что будет в дорожной карте для ngX-Rocket!

ng add и схемы

ng add является последним отказом от использования схем интерфейса командной строки Angular, и вы можете задаться вопросом, не делает ли он бесполезными усилия по поддержке генератора Yeoman теперь, когда мы можем использовать такие команды, как ng add @angular/material. Это нет!

Хотя сейчас здорово иметь возможность быстро добавлять любую популярную библиотеку, если она предоставляет схемы, цель нашего генератора - предоставить начальный набор интеграций, чтобы мы убедились, что они работают вместе безупречно: вы можете думать об этом как о комбинации столько же ng add команд одновременно. Тогда вы можете спросить, почему мы не можем просто сделать ngX-Rocket пригодным для использования с ng add?

Поскольку схемы появились в Angular CLI 1.5, моя первоначальная мысль была такой:

🎉 Давай, забудь о Йомене! 🎉

Но позже, немного поэкспериментировав, я продолжил использовать Yeoman и весь подход к вопросу / генератору по нескольким причинам:

• Это способ легче повторять и поддерживать: гибкость Yeoman в сочетании с основами, проделанными над нашей основной библиотекой, позволяет быстрее и проще добавлять новые функции и обновлять их. , так как мы можем управлять проектами в целом. Со схемами вы должны читать и изменять файлы в существующем проекте, что более эффективно, но усложняет обслуживание.
• Дополнения. Перед тем, как развернуть ngX-Rocket, я использовал множество других генераторов Yeoman, и у всех них была одна общая черта: НИ ОДИН из них не удовлетворил мои потребности полностью и не удовлетворил меня на 100%. ngX-Rocket не является исключением и никогда не сможет соответствовать размеру обуви, поэтому была реализована система надстроек, и находится всего в одной команде: ngx new --addon и вы готовы иметь свой собственный генератор.

С помощью надстройки вы можете переопределить любой файл сгенерированного проекта, например, чтобы изменить конфигурацию tslint, чтобы она лучше соответствовала вашим потребностям. Вы также можете добавить готовую интеграцию с некоторыми из ваших внутренних корпоративных библиотек: аутентификация SSO, тема и компоненты, регистратор ... Не забывайте, надстройки могут быть опубликованы публично на NPM, если вы хотите поделиться ими, но вы также можете оставить их внутренними и использовать свой собственный частный реестр NPM!

И, наконец, вы даже можете перейти на fullstack с надстройками и обеспечить внутреннюю поддержку с помощью C #, Java, NodeJS или любых других технологий, которые вам нравятся. Следите за обновлениями, скоро будут опубликованы некоторые примеры интеграции 😉

Оставить на потом?

Хотя, сохраняя текущую форму как комбинацию CLI и генератора Yeoman, в какой-то момент может быть интересно извлечь некоторые отдельные функции в независимые схемы, такие как интеграция Cordova или Electron. Таким образом, его можно было бы использовать как для запуска нового проекта (как сейчас), так и для интеграции в существующие проекты с помощью ng add, что было бы идеальным компромиссом.

На данный момент следующие шаги - завершить встроенную интеграцию, чтобы мы могли еще быстрее приступить к работе с расширенными вариантами использования и улучшить взаимодействие с разработчиками: поддержка оболочки приложения , интегрировать рендеринг на стороне сервера с Angular Universal, интегрировать Hot Module Reloading (HMR), интегрировать Electron … Вы можете сохранить эту из наиболее важных функций, которые будут следующими в дорожной карте, используя @next milestone на github.

Обновление созданных проектов

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

Во-первых, команда ngX-Rocket в большинстве случаев быстро догоняет Angular и обновления инструментов, но иногда, даже если работа по обновлению завершена, нам приходится откладывать выпуск обновления на несколько недель (например, что случилось с Angular 5 релиз), почему это? Перед выпуском такого обновления мы стараемся убедиться, что все наши интеграции и варианты использования работают, и иногда командам Angular требуется время, чтобы устранить некоторые (блокирующие) проблемы, которые появляются в новых версиях. Чтобы уменьшить возможные задержки, мы ежедневно запускаем CI с последними сборками Angular и ng CLI, чтобы мы могли сообщать о критических проблемах до публикации нового выпуска, но это не идеально.

Короче говоря, перед обновлением вашего проекта взгляните на репозиторий ngX-Rocket, чтобы узнать, выпустили ли мы новую версию, поддерживающую обновление, если она там есть, то, скорее всего, это означает, что вы можете безопасно выполнить обновление. Если нет, возможно, вам стоит немного подождать, прежде чем решиться… 😉

Затем, если вы решите пойти ва-банк и выполнить обновление, как это сделать? У вас есть несколько вариантов:

1. Делайте все вручную, npm update ваши зависимости, следуйте инструкциям по миграции (если есть) и скрестите пальцы 🤞
2. Использование Углового инструмента обновления вместе с новой командой ng update будет вашим лучшим выбором на сегодняшний день, так как она проведет вас через все изменения, которые вам необходимо внести в свое приложение.
3. Используйте процедуру обновления ngX-Rocket, которая в основном снова запускает генератор в вашем проекте и использует вашу систему управления версиями, чтобы вы могли вручную объединить обновления. Для более простых обновлений вы можете использовать команды ngx update --tools, чтобы обновлялись только пакеты / инструменты, без шаблонов, чтобы уменьшить нагрузку на объединение. Я предлагаю вам использовать его только в том случае, если у вас есть проблемы с решением 2 с этого момента, или если вы хотите обновить руководства, правила линтера или другие дополнения из более новых версий генераторов.

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

Документация и учебные пособия

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

Но! Мы действительно хотели бы изменить это и предоставлять все больше и больше документации 📚 🌈! Например, нам следует:

• Улучшение нашего веб-сайта и добавление разделов для документов и дополнений
• Создайте FAQ на основе наиболее распространенных вопросов по github
• Напишите учебные пособия: начало работы, публикация приложения, добавление аналитики, подключение аутентификации, добавление конфигурации при загрузке, создание надстройки… Есть много чего!

Я знаю, что написание документации - не самое захватывающее занятие в мире, но оно необходимо, а обмен знаниями полезен для всех, независимо от уровня вашего опыта.

Это подводит нас к самому главному ...

Ты тоже можешь помочь 😃

Проекты с открытым исходным кодом живут за счет вклада. Даже если вы не являетесь техническим экспертом, вы можете помочь разными способами! Вот несколько различных способов внести свой вклад (включая, но не ограничиваясь):

• Предлагайте новые функции на github
• Сообщайте об ошибках в трекере проблем (не забывайте следовать шаблону проблемы!)
• Задайте или ответьте на вопросы о переполнении github / стека (используйте тег # ngx-rocket)
• Напишите документацию в любой форме (статьи в блогах, руководства, добавление / обновление существующих руководств…)
• Реализуйте функции из журнала и отправьте Pull Requests.
• Сделайте отличные иллюстрации для продвижения проекта (мы могли бы использовать некоторую помощь, чтобы сделать более красивый логотип).
• Поделитесь с нами своим мнением и расскажите, как вы используете генератор в своей компании (форма обратной связи скоро появится на веб-сайте, а пока используйте github или электронную почту)
• Распространяйте ❤️ и повышайте осведомленность в социальных сетях, на конференциях, с коллегами…

У всех нас очень ограниченное количество времени для такого вклада, и такие проекты могут существовать, взявшись за руки и эффективно используя это время.

Также я хотел отметить, что с самого начала этот проект спонсировался компанией Thales, которая предоставила ресурсы и время инженерам для помощи в разработке и сопровождении проекта без каких-либо ограничений на направление проекта. Мой новый работодатель Criteo теперь также спонсирует проект, уделяя время проектированию. Это еще один способ внести свой вклад, предоставив время и / или ресурсы для помощи проекту через спонсорство, поэтому не стесняйтесь обсуждать с нами, если вы думаете, что можете помочь в чем-то.