AngularJS vs Ангуляр 2: основні відмінності


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Чи варто починати новий проект на Ангулярі 2?

Однозначно – так! І ось чому:

  • це грамотно і ретельно спроектований, високопродуктивний фреймворк;
  • з нижчим порогом входження, порівняно з першою його версією;
  • з якісною документацією та великою кількістю практичних прикладів.

Початок нового проекту

Нарешті ковток свіжого повітря, повна свобода, можна почати все з чистого аркуша. Ретельно опрацювати архітектуру, структуру даних, компоненти, різні абстракції, скласти словник термінів, додатки і т. д., щоб усе було красиво.

Свобода дій

Проте з першою версією Angular-у не все так просто. Потрібно щоб все придумане лягало на реалії фреймворка, його модулі й сервіси певного типу. Не можна просто взяти і акуратно створити якийсь клас або компонент, який буде робити щось важливе. Потрібно вирішити, чим цей компонент буде з точки зору фреймворка? Яким типом сервісу: value, constant або все ж factory? Може це буде сервіс типу service? Адже він створює об’єкт з оператором new, здається це те, що потрібно. А раптом Сінглтона буде недостатньо? Такі питання виникають практично завжди під час роботи з Ангуляром, і  на них немає однозначної відповіді.

Звільнення від подібного роду обмежень, з боку фреймворка, на мій погляд, є головною перевагою Angular 2. Можна використовувати будь-яку зручну модульну систему, як завгодно називати і підключати довільний код.

Генератор коду

Далі щоб розпочати роботу над проектом необхідно:

  • створити файлову структуру програми;
  • налаштувати роботу з шаблонами;
  • налаштувати роботу зі стилями, препроцесором;
  • налаштувати збірку для розробки, налаштування, продакшена;
  • налаштувати процес тестування;

З другою версією фреймворка ми отримуємо інструмент командного рядка, з якого можна генерувати додатки, модулі, компоненти, директиви, сервіси, фільтри (pipe – нова їх назва), запускати тести, перевірку коду і т. д. І для застосування описаного вище необхідно виконати одну команду:

ng new app-name

Буде створена вся необхідна інфраструктура в кращому на даний момент вигляді. Відразу можна приступати до роботи. Нічого зайвого.

Команда може приймати додаткові аргументи. Наприклад, якщо планується використовувати CSS препроцесор Stylus:

ng new app-name –style = styl

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

TypeScript

Згенерований код додатка буде використовувати TypeScript, який лякає багатьох, швидше за все через хибне уявлення про нього. Насправді це той самий JavaScript (ECMAScript 6), але з деякими приємними і корисними можливостями:

  • інтерфейси;
  • типізація;
  • перерахування (Enum);
  • модифікатори (public, private, static);
  • декоратори (@).

Все це дозволяє писати більш стабільний і гарний код та звільняє від потреби повсюдно використовувати JSDoc.

Почавши використовувати TypeScript, хочеться писати тільки на ньому, і вже не розумієш, як можна було бути таким необачним – не використовувати його раніше?

Компоненти

В Ангулярі 2 немає контролерів, тільки компоненти. Створити новий можна в такий спосіб:

ng generate component playground/player

Ця команда створить директорію player в playground з мінімально необхідним кодом компонента:

  • файл реалізації;
  • файл шаблону;
  • файл стилів із розширенням використовуваного CSS препроцесора;
  • файл юніт-тестів.

Жодних копіпаст як джерела зла і помилок!

Two-way binding

Ключова фішка Angular – two-way binding. Як вона реалізована в Angular 2?

<app-player [(position)]=”playerPosition”></app-player>

Такий запис в шаблоні передасть значення властивості playerPosition поточного компонента і буде змінювати його при зміні властивості position усередині компонента player. Це і є two-way binding.

Чому саме такий дивний запис?

В Angular 2 з’явився новий синтаксис, який дозволяє передавати значення властивостей дочірнім компонентам (one-way binding). Використовує він квадратні дужки:

<app-player [position]=”playerPosition”></app-player>

І можна підписуватися на події, що виникають у дочірніх компонентах. Використовуються круглі дужки:

<app-player (positionChange)=”onPositionChange($event)”></app-player>

Такий запис передбачає, що в компоненті player є властивість positionChange – екземпляр класу EventEmitter. Коли в компоненті player викликається this.positionChange.emit (newValue), виконується код onPositionChange ($event), зазначений у шаблоні. $event буде містити значення newValue.

Так в Angular 2 і реалізується two-way binding:

  • передача вихідного значення властивості;
  • підписка на подію з назвою «назва властивості всередині дочірнього компонента» + «Change»;
  • зміна властивості в батьківському компоненті при появі події.

Запис [(position)] = «playerPosition» є лише синтаксичним цукром, який виконує все описане автоматично і заощаджує час на будівництво будинку, посадку дерева та виховання сина.

Завдяки цій реалізації в Ангулярі 2 немає вотчерів, які раніше становили джерела багатьох проблем з продуктивністю. Тепер все відбувається природніше.

Принципи SOLID

У нашій команді ми активно використовуємо принципи SOLID, які роблять підтримку і подальшу розробку програми більш ефективним і приємним процесом.

Angular 2 вирішує питання високого рівня пов’язаності коду, нової потужної реалізації Dependency Injection і можливості абстрагуватися від реалізацій різних взаємопов’язаних компонентів, використовуючи інтерфейси (TypeScript).

Наприклад, можна написати таку конструкцію:

class SomeComponent {
constructor (public someService: SomeService) {}
}

За створення екземпляра цього компонента автоматично буде створений екземпляр сервісу SomeService і переданий у конструктор SomeComponent. Це значно знижує рівень пов’язаності й дозволяє тестувати їх окремо один від одного.

Так само запис public someService (TypeScript) робить цей сервіс доступним усередині екземпляра класу за допомогою ключового слова this (this.someService).

Валідація форм

Валідація на основі шаблонів, яка була раніше, залишилася, але з’явилася нова додаткова реалізація. Її конфігурація повністю відбувається в JavaScript, що дозволяє формувати набір правил динамічно, створювати реюзабельні валідатори і повністю керувати процесом, в тому числі фільтрувати користувацькі введення.

Валідатор (Validators.required і подібні) – проста функція, до якої передається значення і яка повертає null або об’єкт з описом помилки.

У шаблоні форми потрібно вказати formGroup:

<form [formGroup]=”formGroup”>

Полям введення потрібно вказати відповідні назви контролів formGroup:

<input type=”password” formControlName=”password”>
<input type=”password” formControlName=”passwordConfirm”>

Ось і все. Валідність форми і всі стани помилки  можна отримувати через об’єкт formGroup, який буде оновлюватися при кожній взаємодії користувача з нею.

Роутінг

Роутінг схожий на колишній, але з деякими приємними поліпшеннями. Наприклад, якщо який-небудь громіздкий модуль програми використовується рідко, можна довантажувати його динамічно:

{
path: ‘profile’,
loadChildren: ‘app/profile/prodile.module#ProfileModule’
}

Обробка всіх запитів, що починаються з /profile (/profile/photo, /profile/orders, /profile/orders/:id), буде передана ProfileModule, який завантажують за першої необхідності.

Низький поріг входження

Незважаючи на всю міцність Angular 2, це дійсно так. На мій погляд, унаслідок того, що:

  • максимально використовуються можливості JavaScript;
  • багато речей реалізовані у логічний і очікуваний спосіб;
  • якість підказок і авто-завершення на вищому рівні (завдяки TypeScript);
  • є командний рядок для генерації всього необхідного;
  • якісна документація.

Проте це не говорить про легкість його засвоєння людиною, яка не знає JavaScript.

Висновок

Ще багато можна написати про нову версію фреймворку, порівняти основні сервіси, розібратися, як відбувається робота з асинхронними операціями (Zone.js), згадати про реактивне програмування (Rx.js) і т. д. Але це вже буде не стаття, а книга. Хочеться сказати, що Ангуляр 2 – дуже професійний і якісний фреймворк. Працюючи з ним, відчуваєш, що його писали люди, які мають великий досвід практичної розробки і розумієш: більше не хочеться писати на першій його версії.

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Trends: проект на ангуляр

Коментарі 1

  • З Angular 2 набагато комфортніше працювати, ніж з Angular JS. І так, я, наприклад, не дуже сильний в Джаваскрипті, але розібратися з новою версією Angular дійсно не було жодної проблеми. Фреймворк дуже зручний, на Angular 2 дуже легко і комфортно писати. Це, я вважаю, головне досягнення розробників. Angular 2 багато чого забороняє, але і багато дає. Для мене зараз це оптимальний інструмент, його легше адаптувати і простіше вчитися.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *