Просто Angular


Введення
8-9-го грудня 2016 року була проведена перша конференція Angular в Бельгії. Ігор Мінар (провідний розробник Angular) виступив в якості основного доповідача з декількома цікавими оголошеннями щодо того, за яким графіком буде випускатися Angular. І уявіть собі, в березні 2017 року нас чекає реліз Angular 4. При цьому, на даний момент вже опублікована бета-версія.
Від перекладачів
Всім привіт, з вами Максим Іванов і Дмитро Сергієнков, і сьогодні ми з'ясуємо куди поділася третя версія, і чому ми як і раніше можемо бути вірні Angular. Зараз починаючому фронтенд-розробнику, що вивчає JavaScript, досить важко визначитися: який же фреймворк або бібліотеку їм взяти і вивчити, залишаючись в тренді? Звичайно, без слова React, зараз не обходиться жодна розмова на тему фронтенда, проте, в свій час я почав з першої версії Angular, начитався багато посібники з написання фронтенда на ES6 (з класами та іншим добром) і досі не шкодую. Так, ви можете писати корпоративні програми з використанням тільки jQuery, але по мірі розвитку і складності проекту ви почнете закопувати себе в спагетті-коді, змішуючи логіку і уявлення, MV*-фреймворки ж цього зробити не дадуть.
Зміст
  1. Чому Angular 4? Де Angular 3? Що відбувається?

  2. Angular2 Webpack Starter

  3. Що хорошого з'явилося в 2016 році разом з Angular 2

Чому Angular 4? Де Angular 3? Що відбувається?
image
Специфікація семантичного версионирования
Ще у вересні, коли вийшла друга версія, Angular Team оголосила про те, що вона буде підтримувати семантичне версіонування (SEMVER).
Як видно з назви, семантичне версіонування — це додавання сенсу кожним номером версії. Семантика номера версії дозволяє розробнику визначити, що за модернізація була проведена в даній версії продукту, до того ж, ми можемо налаштувати наші інструменти, наприклад, менеджер пакетів NPM, таким чином, щоб при складанні програми вибиралася конкретна версія залежних бібліотек, щоб при цьому ми нічого не зламали.
Семантика версії складається з трьох чисел:
image
Всякий раз, коли Ви виправляєте помилки в коді (баг) і випускаєте продукт заново, Ви збільшуєте останню цифру; якщо ж просто була додана нова функція у вашому продукті, ви збільшуєте другу цифру, але коли Ви випускаєте продукт з кардинальними (критичними) змінами, які ламають роботу вашого старого коду, Ви збільшуєте першу цифру.
Критичні зміни з'являються тоді, коли Вам, як розробнику, який використовує дану бібліотеку, доведеться втрутитися в свій код і змінити його після оновлення і переходу на нову версію.
Що це може означати для Angular Team? Зрозуміло, що для будь-якого бурхливо розвивається програмного забезпечення настає момент, коли доводиться проводити критичні зміни. І тому, з об'єктивних міркувань, Angular Team змінила версію 1.x на 2.x, з-за того, що ті зміни, які були виконані, зламали роботу основного коду.
Критичні зміни не повинні приносити біль
Співтовариство Angular точно зрозуміє, про що йде мова. Користувачам, щоб перейти на другу версію, довелося переписати весь код. Хоча багато хто і полюбили Angular 1.x, але з об'єктивних причин були зроблені загальні критичні зміни, був написаний новий API, нові шаблони. Це було очевидно, і в кінцевому рахунку, Angular 2 був повністю переписаний (хоча й існує спосіб менш болісно мігрувати на нову версію).
Зараз вирішено, що перехід від версії 2 до версії 4, 5,… не повинен бути таким болючим, як це було з першою версією. Тепер код не буде повністю листуватися, наші зміни будуть стосуватися тільки окремі бібліотеки, що поставляються зараз з Angular 2, в свою чергу вони будуть дотримані згідно SEMVER. Крім того, поступово ми будемо включати Deprecation фази (попередження консолі розробника про те, що в наступних версіях даний функціонал підтримуватися не буде), щоб дозволити розробникам вчасно перейти на новий функціонал.
Angular Team використовує власний інструмент контролю змін і обробки автоматичних оновлень. Команда наполегливо працює над ним, і запланувала випуск спільно з виходом Angular 5 в 2017 році.
Тепер це просто «Angular»
Як ви, можливо, вже здогадалися, термін «Angular 2» буде застарілим з виходом 4-ої та 5-ої версії. Тим не менше, тепер слід почати називати його просто «Angular» без версії. Крім того, ви повинні почати уникати бібліотек з GitHub/NPM з префіксом ng2 — або angular2-. Існує єдиний ресурс з документацією — angular.io c офіційним співтовариством на GitHub.
Нові правила версионирования
З цього моменту, намагайтеся уникати використання номера версії, якщо він не є необхідним для усунення неоднозначності.
Три простих керівних принципу:
  • Використовуйте «Angular» за замовчуванням (наприклад, «Я angular-розробник», «Це Angular-Meetup», «Angular співтовариство швидко розвивається»)
  • Використовуйте «Angular 1», «Angular 2», «Angular 4», коли мова йде про специфічні речі («ця функція X з'явилася в Angular 4», «Ми оновилися з Angular 1 до 2», «Я пропоную це зміна в Angular 5»)
  • Використовуйте повну версію semver при повідомленні про помилку (наприклад, «Ця проблема присутня в Angular 2.3.1»)
Вся документація, навіть для Angular 1.x, будуть приведені у відповідність з цими правилами в найближчі тижні. Але якщо ви пишете у своєму блозі, пишіть статті, курси, книги або всякий раз, прагніть орієнтуватися на специфічну версію Angular, дописывайте версію в заголовках публікації, нібито в цій статті використовується Angular 2.3.1. Це допомагає уникнути плутанини для ваших читачів, особливо, коли ви пишете про конкретних API.
Чому ми вирішили все ж пропустити третю версію
Бібліотеки ядра Angular знаходяться в одному сховищі на GitHub. Всі вони мають свою версію і поширюються як різні пакети NPM:
image
З-за неспівпадання у версіях маршрутизатор пакетів став відразу шукати Angular 4. Тому ми вирішили, що семантичне версіонування має бути строгим для основних пакетів ядра, які набагато легше підтримувати, а версія Angular іменуватися, виходячи з останньої версії залежностей.
Крім того, важливо розуміти, що Angular використовується в Google. Більшість додатків Google використовують Angular з основної гілки репозиторію на GitHub. Всякий раз, коли відбувається оновлення в гілці master, всі відразу ж інтегрується в основний внутрішній репозиторій Google (використовується один монолітний репозиторій), де розташовуються такі продукти як Google Maps, google Adsense інші. В результаті всі проекти, що використовують Angular падають, якщо вони мають критичні зміни, тому доводиться все переписувати, що, в свою чергу, незручно. Таким чином, краще всього мати повністю уніфіковану версію, яку було б легше підтримувати протягом довгого часу, що допомогло б команді бути більш продуктивною у випуску нових функцій.
Попередній графік релізів
Той факт, що критичні зміни все ж будуть, не означає, що вони з'являться відразу ж через тиждень. Angular Team запевняє, що надалі у вас залишиться зворотна сумісність між версіями, тепер зміни будуть мати чіткий характер і йти за певним графіком протягом трьох циклів:
  • патч-релізи щотижня
  • кожні 3 місяці будуть з'являтися незначні зміни (minor) у функціоналі
  • кожні 6 місяців нова версія Angular з незначною міграцією
Наступні 3 місяці будуть присвячені доопрацювання Angulr 4.0.0.
image
Після Angular 4.0.0 вас чекає попередній графік подальших випусків:
image
Висновок: не турбуйтеся
В кінці Ігор Мінар підсумував:
  • не турбуйтеся про номери версій
  • ми повинні розвиватися разом з Angular, щоб не допускати такого, як це було з відмінностями між Angular 1.x і 2.x, ми повинні зробити це разом, як спільнота, розвивати і покращувати наш улюблений продукт
  • ви повинні усвідомити чому нам довелося вчинити так з Angular 1.x і переписати все з нуля
Angular2 Webpack Starter
image
Angular2 Webpack Starter — представляє з себе репозиторій для швидкого старту з Angular і TypeScript, за допомогою складальника проектів Webpack.
Що включено в даний репозиторій:
  • Кращі практики щодо організації файлів і каталогів на Angular 2
  • Система складання Webpack 2 з TypeScript
  • Демонстраційний приклад на основі Angular 2
  • Свіжа версія Angular
  • Ahead of Time (AoT) для швидкого завантаження вашого додатка
  • Tree shaking для автоматичного видалення невикористаного коду вашого проекту
  • Тестування з використанням Jasmine і Karma
  • Покриття тестами з Istanbul і Karma
  • End-to-end Angular 2 тестування з Protractor
  • Менеджер типів @types
  • Material Design
  • Hot Module Replacement
  • Підтримка Angular 4 шляхом зміни package.json і будь-яких інших майбутніх версій
Швидкий старт
Переконайтеся, що у вас є Node.js версії >= 5.0 і NPM >= 3.0
# клонируем наш репозиторій
git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git

# вибираємо директорію
cd angular2-webpack-starter

# встановлюємо залежності допомогою npm
npm install

# далі за бажанням

# запускаємо сервер
npm start

# запускаємо Hot Module Replacement
npm server run:dev:hmr

Переходимо на http://0.0.0.0:3000 або http://localhost:3000 у вашому браузері. Більш докладно на офіційному репозиторії.
Змістовний відеокурс
Курс дасть можливість швидко почати створювати свої додатки з використанням одного з найпопулярніших фреймворків – Angular 2. У процесі проходження курсу крок за кроком ви зробите реальне додаток і добре розберетеся в специфіці Angular 2. Курс англійською, але насправді, якщо у вас кульгає мову, головне спробувати вникнути в код, який пише автор, в основному всі прикріплюється слайдами, які теж інтуїтивно зрозумілі. Платити нічого не треба, сиди і розвивайся.
Що хорошого з'явилося в 2016 році разом з Angular 2
Статистика
  • 1.3 мільйона розробників використовують Angular 1
  • 360 тисяч вже використовують Angular 2
image
Якщо Angular 1 був монолітним проектом, то тепер Angular 2 слід розглядати як платформу.
image
Angular 1 використовував 43 вбудованих директиви, тепер у Angular 2 ми використовуємо [ ] ( ).
image
Angular 2 швидше
Спочатку Angular 1 важив 56K. При цьому ядро самого Angular 2 було — 170K. Angular Team оптимізували тонни коду і тепер ядро Angular 2 важить 45K.
image

Відкладене завантаження

Основне завдання Angular Team була в тому, щоб домогтися автоматичної відкладеного завантаження. Це гарантує нашим додатками тільки те, що необхідно для поточної сторінки. Лінива завантаження також була включена при маршрутизації в додатках.

Швидкий рендеринг

У порівнянні з першою версією програми на Angular 2 працюють в 2,5 рази швидше, а перемальовування в 4,2 рази швидше. Команда Angular вважає, що вона може зробити рендеринг ще більш швидким.
image
Офіційне керівництво з написання коду
image
У часи Angular 1 з'явилася велика кількість посібників з написання коду. Це призвело до великої кількості відмінних стилів, що призвело до разночтению в Інтернеті. Для Angular 2 тепер є офіційне керівництво по стилю.
Матеріальний дизайн для додатків на Angular 2
image
Angular Material виглядає дійсно добре. Використовувати матеріальний стиль у вашому додатку досить легко, просто додавайте компоненти.

Прогресивні web-додатки з Angular Mobile Toolkit
image
Angular Mobile Toolkit дозволить легко створювати веб-додатків, що завантажуються миттєво на будь-якому пристрої, навіть без підключення до Інтернету.
image
Прогресивні веб-додатки дуже цікаві для багатьох веб-розробників. Створення і повторне використання коду для створення мобільного застосування з хорошою продуктивністю, майже рівну нативному мобільному додатком. Angular Mobile Toolkit є ще одним кроком до здійснення цієї мрії.

Шаблонизация на стороні сервера
image
Великий проблемою додатків на Angular 1 було те, що вони збиралися тільки в браузері. Це означає, що ваші програми були абсолютно SEO-неорієнтовані.
Команда Angular винесли основний компонент збірки, і тепер ваші програми можна збирати де завгодно, в тому числі і на сервері.
Досить легко це зробити за допомогою NodeJS для складання шаблонів на стороні сервера.
Наші програми тепер будуть працювати ще швидше для наших користувачів, тепер ми можемо заощадити дорогоцінний час рендеринга в браузері.
image

Швидка розробка додатків через термінал за допомогою Angular CLI
image
найприємніше — це Angular CLI. Установка програми займає багато етапів, де багато речей може піти не так:
  • налаштування типізації з TypeScript
  • налаштування импортов компонентів
  • запуск програми
  • використання System.js
image
Angular CLI робить установку простий в один рядок:
ng new scotch-app

image
Щоб почати працювати з Angular CLI, все, що вам потрібно зробити, це:
npm install -g angular-cli
ng new scotch-app
cd scotch-app
ng serve

Більше нам не потрібно Gulp, Grunt, Webpack, Browserify.
image

Велика кількість туториалов
Наприклад, це відео цілком пояснює як побудувати додаток на Angular 2:

Опціональна типізація у вашому web-додатку
Є багато цікавих речей, які може зробити TypeScript. Є багато причин, чому ви повинні використовувати TypeScript. Завдяки TypeScript Angular 2 став краще розвиватися.
image

Хороші інструменти для налагодження
image
Будь-яка людина, який використовує Batarangle з Angular 1 знає, що його здатність бачити змінні і стан вашого застосування в браузері є великою підмогою при розробці.
Тепер є Angular Augury, він дозволяє нам зробити саме це. Немає необхідності в console.log () в кожній частині вашої програми, щоб побачити стан змінної, ієрархію спадкування у вашому браузері.
image

Платформа для розробки бізнес-додатків Firebase
image
Ви можете побудувати програму в режимі реального часу з Angular 2, Firebase і AngularFire2 приблизно за 10 хвилин, наприклад чат. Є багато функціональних можливостей, які реалізуються в короткий проміжок часу.
image

Кросплатформені мобільні додатки з NativeScript + Angular 2
image
У той час як Angular Mobile Toolkit зосереджена на створенні прогресивних веб-додатків, NativeScript більше зацікавлений на створення рідних додатків з Angular 2.
У чому різниця, запитаєте ви? Наприклад в анімації. Маючи нативну анімації, відмінну від браузерною все буде виглядати гладко навіть при великій кількості об'єктів.

Просте тестування завдяки зонам
Zone.js бібліотека керування асинхронними завдання, спосіб управління контекстом виконання. Багато фантастичних слів, але основна ідея полягає в тому, що тестування буде набагато простіше в Angular 2!
image
Всі ці асинхронні завдання відслідковуються завдяки zone.js. У своєму відео Джулі Ральф розповідає як це працює:

В ув'язненні
Я дуже пишаюся тим, що Angular виріс із звичайного фреймворку в цілу платформу, завдяки якій тепер можна легко розробляти не тільки веб-додатки, але і нативні, не поступаючись в якості. Багато роботи виконала Angular Team, і за це я їм вдячний. Звичайно, навколо є багато хорошого, але бути частиною чогось великого куди приємніше. З наступаючим Новим роком дорогі читачі, ми бажаємо вам всього найкращого і удачі!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.