Кутові кращі практики - видання серпня 2017 року

(Ця публікація перехресне повідомлення від https://fluin.io/blog/angular-best-practices-august-2017)

Ще один місяць, ще один підсумок кращих практик. Цього місяця ми повернулися до основних основ інструментарію та конфігурації IDE, а також до деяких принципів реактивного програмування, які допоможуть вам створити майбутній успіх.

Найкраща практика 1: Використовуйте CLI

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

Починати новий проект? Створіть його за допомогою CLI.

Працюєте над існуючим проектом? Створіть новий проект з CLI, а потім перемістіть існуючий код у / src / app /.

npm встановити -g @ angular / cli
новий мій проект

У CLI є інструменти для створення лісів (він же схематичні) для створення нових проектів та створення нового коду для вас, але це не є основною перевагою. Основна перевага CLI полягає в тому, що він автоматизує конвеєр збірки як для прямої розробки з ng службою, так і для виробничого коду, який ви будете пересилати до браузерів з ng build -prod

ng build -prod завжди збирається скористатися якомога більшою кількістю найкращих практик, оскільки команда Angular зможе ввімкнутись автоматично. Це означає, що ця команда з часом стане більш потужною з такими функціями, як Service Workers або The Angular Optimizer.

Найкраща практика 2: Встановіть розширення коду проти Джона Папи

Visual Studio Code - це дивовижний IDE для створення кутових додатків. Однією з найбільших переваг, яку ви можете зробити для себе, є встановити істотний кутовий розширення John Papa.

Це робить роботу з Angular у коді Visual Studio краще, ніж будь-коли.

Цей пакет включає наступні дивовижні інструменти:

  1. Служба Angular Language (Служба кутових мов) - надає відомості про шаблони та відомості про кут поповнення та перевірку помилок під час вашої програми
  2. EditorConfig - підключає конфігурацію VSCode до вашої .editorconfig, яку ми автоматично генеруємо для вас у рамках нового проекту CLI
  3. Bracket Pair Colorizer - замість стандартного виділення синтаксису, це розширення забарвлює дужки, круглі дужки та фігурні дужки на основі вкладеного шару. Візуальні ознаки гніздування - це величезна допомога при роботі зі складним кодом.

Найкраща практика 3: Не підписуйтесь на свої спостереження в компонентах

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

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

Кращий спосіб зробити це - використовувати трубу async у ваших шаблонах, і дозволити Angular керувати всім за вас. Давайте подивимось на зразок коду.

Не робіть цього:

...
шаблон: `
    {{localData | json}}
`)
експортний клас MyComponent {
    місцеві дані;
    конструктор (http: HttpClient) {
        http.get ('шлях / до / мій / api.json')
        .підписка (дані => {
            this.localData = дані;
        });
    }
}

Замість цього робіть

...
шаблон: `
    {{дані | асинхронізація | json}}
`)
експортний клас MyComponent {
    дані;
    конструктор (http: HttpClient) {
        this.data = http.get ('шлях / до / мій / api.json');
    }
}

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

Труба Async скасовує HTTP-запити, якщо дані більше не потрібні, замість того, щоб доповнити, обробити, а потім нічого не робити з цим.

Нарешті, труба Async означає, що ми можемо створювати ефективніші програми, переключаючи ваш ChangeDetectionStrategy на OnPush. Коли ви переходите на OnPush, багато нових та вдосконалених стратегій можуть викликати необхідність виявлення змін, які ваша підписка вручну не буде автоматично запущена.

Ось кілька прикладів вдосконалених стратегій спостереження:

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

Багато функцій / повноважень спостережуваних даних втрачаються при ручній підписці. Спостереження можна збагатити такою поведінкою, як повторення, startWith (для таких речей, як кешування в режимі офлайн) або оновлення на основі таймера.

Найкраща практика 4: Не забувайте про SEO та Analytics

Веб-сайти та додатки є потужними завдяки тому, як пошукові системи, такі як Google, можуть індексувати їх та ділитися вашим вмістом зі світом.

Продукти Analytics допоможуть вам зрозуміти потреби та поведінку користувачів.

Щоб налаштувати обидва ці функції, включіть фрагмент Google Analytics у наш index.html та замініть код відстеження, видаливши початковий перегляд сторінки, який вони включають за замовчуванням.

Тепер давайте продовжимо та додамо події до нашого app.module.ts.

Ми хочемо прослухати всі події маршрутизатора, з’ясувати, коли подія навігації успішно завершена (NavigationEnd), а також оновити назву сторінки та надіслати подію аналітики.

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

Для SEO, ми будемо читати заголовок сторінки з додаткових даних, які ми включаємо в наш конфігурацію маршруту.

app.module.ts

оголосити var ga;
...
RouterModule.forRoot ([
    ...
    {path: 'bio', компонент: Bio, дані: {title: 'About'}},
    {шлях: 'проекти', компонент: Проекти, дані: {назва: 'Проекти'}},
])
...
конструктор (маршрутизатор: Маршрутизатор, активованийРуте: АктивованийРуте, назва: Назва) {
    router.events.filter (e => e екземпляр NavigationEnd). підписатися ((подія) => {
        нехай pageTitle = router.routerState.snapshot.root.children [0] .data ['title'];
        якщо (pageTitle) {
            title.setTitle (pageTitle);
        } else if (pageTitle! == false) {
            title.setTitle ("Мій заголовок за замовчуванням");
        }
        ga ('відправити', 'перегляд сторінки', event.urlAfterRedirects);
    });
}