Прошлое, настоящее и будущее Angular CLI

Прошлое, настоящее и будущее Angular CLI

От автора: Angular CLI – инструмент командной строки для создания приложений на Angular. За последний год он стал самым главным инструментом среди разработчиков на Angular. CLI автоматизирует множество задач, возложенных на разработчика в 2017 году. Начиная с конфигурации, которая идет по умолчанию, этот инструмент «выпекался» в лучших практиках, найденных сообществом за долгое время, и с его помощью можно создавать обслуживаемый код. CLI представляет парочку мощнейших возможностей Angular, и это простота в освоении, быстрый разгон по сравнению с самостоятельной установкой.

Прошлое, настоящее и будущее Angular CLI

Если вы еще не пользуетесь преимуществами CLI, это легко исправить. Скажем, у вас установлены node и npm. С помощью четырех команд ниже вы можете быстро поднять Angular и CLI.

npm install —g @angular/cli
ng new my-angular-project
cd my-angular-project
ng serve

Пробежимся

Angular CLI сильно изменился за последние пару месяцев. Можете посмотреть большие заметки о прогрессе на странице релиза. Однако нужно посмотреть, что случилось с этим инструментом за последние 4 месяца.

1.2 июнь 2017

Флаг —minimal

С помощью флага minimal разработчики могут генерировать маленькие упрощенные стандартные проекты. Сгенерированные с этим флагом проекты отличаются от обычных:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Инлайновые стили – стили хранятся напрямую в файлах компонента

Инлайновые шаблоны – шаблоны хранятся напрямую в файлах компонента

Нет тестов – проект не генерирует юнит и комплексные тесты

Билды с именами

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

При создании продакшн билда имя задается цифрами в последовательности процесса создания.

0.46af283b5453c1d30d30.chunk.js

1.2b2a029972b8935a384a.chunk.js

Теперь при создании билдов используются имя модуля. Оно выступает в качестве подсказки и является частью процесса создания билда. Имя помогает с дебагом в билдах, которые не идут в продакшн.

admin.module.chunk.js

home.module.chunk.js

Дедупликация лицензии и изоляция

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

Сейчас для уменьшения размеров билда мы извлекаем эти лицензии в отдельный файл 3rdpartylicenses.txt и удаляем дублирующие лицензии.

1.3 август 2017

Уменьшение веса билда

С каждым релизом мы тщательно работаем над улучшением качества кода, генерируемого CLI в продакшн билдах. В этом релизе мы задействовали последние возможности Webpack 3, в том числе и поднятие видимой области.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Также мы включили бета нового инструмента, над которым мы сейчас работаем. С его помощью можно удалять ненужный код. Инструмент называется build optimizer. Для активации используйте следующий флаг:

ng build --prod --build-optimizer

Мы проверили инструмент на собственном сайте angular.io. Размер продакшн билда сократился на 52%.

Angular Universal

Серверный рендеринг – отличный способ повысить восприятие производительности приложения. Ваше приложение станет лучше работать с ботами типа Twitter и Facebook, которые заходят на ваш сайт, когда пользователи делятся контентом.

Angular Universal вошел в релиз Angular v4 и включал в себя все необходимые API для рендеринга приложения на сервере. Universal Support в CLI упрощает этот процесс, разрешая создавать второе CLI приложение с помощью конфига .angular-cli.json. Этот конфиг оборачивается вокруг основного приложения и позволяет генерировать билд server.

Начальная поддержка для ранних бета v5

Angular делает основные релизы примерно раз в 6 месяцев. Команда делает все в Open Source, поэтому в ранней бета версии в Angular мало функционала. Но людям может приглянуться этот инструмент, а команда Angular всегда надеется на обратную связь от ранних тестов.

Вы можете протестировать предстоящие релизы Angular и дать свой отзыв. Релиз Angular 5.0.0 потребует последней версии CLI.

1.4 сентябрь 2017

Schematics

Schematics – один из главных проектов команды CLI. Schematics позволяет запускать произвольный код для трансформации дерева – это способ автоматического написания кода и генерации файлов. Эти возможности позволяют создавать свои шаблоны для ng new и ng generate под ваш стиль или компанию, строить поверх предоставляемых шаблонов. Также вы можете генерировать код по форме и ответу от удаленного API.

Прошлое, настоящее и будущее Angular CLI

Schematics постоянно развивается, а совсем скоро начнется написание документации. Чтобы доказать пригодность и техническую основу Schematics, мы автоматически включили этот инсутрмент в релиз CLI 1.4.

Будущее CLI

У команды CLI множество планов, которые должны сделать жизнь разработчиков еще проще. Вот несколько идей, которые команда надеется включить в будущие релизы (но не обещает):

Режим Ahead of Time Compilation по умолчанию – команда Angular усердно старается сделать компиляцию еще быстрее, и как только компилятор достигнет того уровня производительность, который мы наблюдаем сейчас, мы включим режим AOT по умолчанию. Это устранит проблемы, когда разработчики сталкивались с различиями в двух режимах.

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

Поддержка библиотек – сегодня CLI может делать оптимизированные UMD для браузера и оптимизированные пакеты CommonJS для сервера. Что если бы CLI умел делать пакеты для других приложений Angular?

Build Optimizer по умолчанию — Build Optimizer многообещающий инструмент, с помощью которого разработчики могут передавать в браузер крайне маленькие пакеты. Как только этот инструмент пройдет проверки и будет одобрен сообществом, мы включим его по умолчанию.

Service Worker по умолчанию – мы верим в том, что процесс создания хороших веб-приложений включает в себя версию приложения под Progressive Web App (PWA) с сервис воркером. Мы верим, что эти инструменты можно включить по умолчанию, не разрушая ожиданий разработчиков относительно общих задач типа удаления или обновления. Надеемся сделать это в будущем.

Начнем

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

Автор: Stephen Fluin

Источник: https://blog.angular.io/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree