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


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

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

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

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

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

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

Свобода дій

Але з першою версією 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» є лише синтаксичним цукром, яка робить все описане автоматично і заощаджує час на будівництво будинку, посадку дерева і виховання сина.

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

Принципи 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?


Коментарі 1

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

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

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