Минуле, сьогодення і майбутнє Angular CLI

17

Від автора: 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 розробники можуть генерувати маленькі спрощені стандартні проекти. Згенеровані з цим прапором проекти відрізняються від звичайних:

Инлайновые стилі – стилі зберігаються безпосередньо у файлах компонента

Инлайновые шаблони шаблони зберігаються безпосередньо у файлах компонента

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

Білди з іменами

При використанні ледачою завантаження в 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, в тому числі і підняття видимій області.

Також ми включили бета нового інструменту, над яким ми зараз працюємо. З його допомогою можна видаляти непотрібний код. Інструмент називається build optimizer. Для активації використовуйте наступний прапор:

ng build —prod —build-optimizer

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

Angular Universal

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

Angular Універсальний увійшов в реліз Angular v4 і включав в себе всі необхідні API для візуалізації програми на сервері. Універсальний 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 і ви на новому або існуючому проекті. Пишіть нам, чи допоміг вам наш інструмент, а також, що ви ще хотіли б бачити в ньому!