Відсутність знайомства з кутовими та сучасними моделями дизайну

Angular (він же Angular 2, 4, 5, 6 ...) - це новий фрейм, повністю переписаний з нуля, замінивши відомий на сьогодні рамок AngularJS (він же Angular 1.x).

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

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

Починаємо

Новачок

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

Ветеран AngularJS

Якщо ви приїхали з AngularJS і хочете копатися прямо в новій версії, ви неодмінно хочете поглянути на швидкий посилання AngularJS vs Angular.

Шпаргалку

Поки ви не знайдете напам'ять повний API Angular, ви можете зберегти це
шпаргалка, яка поновлює синтаксис та розміщується на одній сторінці під рукою.

Посібник зі стилів

Хороша новина, є офіційний посібник з кутового стилю, написаний командою.

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

FAQ

У Angular багато копатися, і деякі питання часто турбують людей. Насправді, більшість незрозумілих речей, схоже, пов'язані з модулями, наприклад, жахливим питанням "Основні та спільні модулі".

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

Заглиблюючись

Незважаючи на те, що вони не є обов'язковими, Angular був розроблений для використання моделей дизайну, до яких ви, можливо, не звикли, як реактивне програмування, однонаправлений потік даних та централізоване управління державою.

Ці поняття важко відновити в декількох словах, і незважаючи на те, що тісно пов'язані між собою, вони стосуються конкретних частин потоку додатків, кожна з яких досить глибока, щоб дізнатися самостійно.

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

Реактивне програмування

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

Кутовий використовує RxJS для реалізації шаблону, що спостерігається.

Спостережуваний - потік асинхронних подій, який можна обробити операторами, схожими на масив.
Приклад Потік спостережуваних подій

Від обіцянок до спостережуваних

У той час як AngularJS в основному покладався на «Обіцяння» для обробки асинхронних подій, тепер обсерватори використовуються замість Angular. Незважаючи на те, що в конкретних випадках, таких як HTTP-запити, спостережуване може бути перетворене в обіцянку, рекомендується прийняти нову парадигму, оскільки вона може зробити набагато більше, ніж Обіцяння, з меншим кодом. Цей перехід також роз'яснюється у підручнику з кутом. Після того як ви зробили перемикач, ви більше ніколи не оглянетеся.

Довідки про навчання

  • Що таке реактивне програмування?
  • Вступ до реактивного програмування, якого ви пропустили, заголовок каже все (30 хв)
  • Функціональне реактивне програмування для розробників Angular 2, див. Принципи функціонального реактивного програмування на практиці з Angular (15 хв)
  • RxMarbles - графічне зображення Rx-операторів, що значно допомагає зрозуміти їх використання

Односпрямований потік даних

На противагу AngularJS, де однією з його торгових точок було двостороннє зв’язування даних, що призвело до багатьох великих головних болів у складних програмах, Angular тепер застосовує однонаправлений потік даних.

Що це означає? Іншими словами, це означає, що виявлення змін не може викликати циклів, що було одним із проблемних моментів AngularJS. Це також допомагає підтримувати більш прості та передбачувані потоки даних у додатках, а також суттєві покращення продуктивності.

Односторонній потік даних

Зачекайте, то чому в кутовій документації згадується синтаксис двостороннього зв’язування?

Якщо придивитися уважно, новий синтаксис двостороннього зв’язування - це просто синтаксичний цукор для поєднання двох односторонніх прив'язок (прив'язка властивості та події), зберігаючи потік даних однонаправленим.

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

Незважаючи на те, що Angular намагається залишатися зразком-агностиком і його можна використовувати із звичайними моделями MV *, він був розроблений з урахуванням реактивного програмування і справді світить, коли використовується з реактивними моделями потоку даних, як
редукція, Flux або MVI.

Централізоване управління державою

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

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

Цей підхід вперше став популярним у React впровадженням архітектури Flux. Багато бібліотек з'явилися тоді, намагаючись адаптувати та вдосконалити оригінальну концепцію, і одна з них набула величезної популярності, надаючи більш просту, елегантну альтернативу: Redux.

Redux є водночас бібліотекою (з великим R) та схемою дизайну (з маленьким r), ​​остання є рамково-агностичною і дуже добре працює з Angular.

Конструкція редукційного дизайну заснована на цих 3 принципах:

  • Стан програми - це єдина незмінна структура даних
  • Зміна стану викликається дією, об'єктом, що описує те, що сталося
  • Чисті функції, що називаються редукторами, приймають попередній стан і наступні дії для обчислення нового стану

Основні поняття, що стоять за цими принципами, добре пояснені в цьому прикладі (3 хв).

Цикл оновлення стану відновного стану

Для тих, хто зацікавився, модель redux була особливо натхненна архітектурою Elm та моделлю CQRS.

Яку бібліотеку використовувати?

Ви можете зробити Angular роботу з будь-якою бібліотекою управління, яка вам подобається, але найкращим варіантом буде використання NGXS або @ngrx. Обидва працюють так само, як і популярна бібліотека Redux, але з тісною інтеграцією з Angular та RxJS, з деякими приємними додатковими утилітами для розробників.

NGXS заснований на тих же концепціях, що і @ngrx, але з меншою кількістю шаблону та приємнішим синтаксисом, що робить його менш залякаючим.

Деякі ресурси для початку:

  • Кутовий підручник з NGXS з прикладом з нуля, підручник з NGXS (10 хв)
  • Створіть кращу програму Angular 2 зі скороченням та ngrx, приємним навчальним посібником для @ngrx (30 хв.)
  • Всебічне вступ до @ ngrx / store, поглиблене ознайомлення з використанням цієї бібліотеки в кутовій (60 хв)

Коли його використовувати?

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

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

Оптимізація продуктивності

Незважаючи на те, що нова версія Angular вирішує за рахунок дизайну більшість проблем із продуктивністю, які можуть виникнути з AngularJS, завжди є можливість для вдосконалень. Пам’ятайте лише про те, що надання додатків із хорошою продуктивністю часто є питанням здорового глузду та розумних практик розробки.

Ось перелік ключових моментів, які потрібно перевірити у вашому додатку, щоб переконатися, що ви надаєте своїм клієнтам найкращий досвід:

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

Постійне оновлення Angular

Кутова розробка рухається швидко, і оновлення основних ядер та інструментів регулярно просуваються.

На щастя, команда Angular надає інструменти, які допоможуть вам слідкувати за оновленнями:

  • npm run ng update оновлення дозволяє оновити додаток та його залежності
  • Веб-сайт Angular update пропонує вам зміни кутових змін та міграцій, надаючи покрокові посібники від однієї версії до іншої.

Це керівництво включено до всіх кутових проектів, що генеруються ngX-Rocket. Якщо ви шукаєте розширюваний, добре задокументований, стартовий набір для підприємств, то варто перевірити це!