Поддерживаемость PWA: Использование веб-компонентов¶

Добро пожаловать на четвертую неделю, пятый день серии 30 Days of PWA! Теперь, когда мы рассмотрели, как начать строить PWA и какие базовые и расширенные возможности они дают, пришло время погрузиться в то, как на самом деле выглядит хороший PWA и как мы можем сами начать создавать качественные приложения. На четвертой неделе мы расскажем о лучших практиках и технологиях, которые можно использовать, чтобы довести PWA до совершенства.

С чего начать с ремонтопригодности?¶

Поддержка PWA, да и любого другого приложения, может оказаться серьезным делом, сопряженным с множеством уникальных проблем. Веб-возможности, благодаря которым появились PWA, позволяют создавать более сложные и функциональные веб-приложения, но за это приходится платить. Как сохранить чистоту и расширяемость наших все более сложных PWA-проектов?

Из множества доступных нам вариантов сегодня мы рассмотрим одну технологию, которую мы можем использовать в наших проектах: веб-компоненты!.

Веб-компоненты?¶

Веб-компоненты — это набор веб-технологий, позволяющих создавать собственные автономные компоненты (например, <custom-button>), которые работают в любом месте в Интернете. Они обладают целым набором преимуществ при разработке, включая удобство сопровождения проекта. Ознакомьтесь с этой статьей "Почему Web-компоненты?" для краткого ознакомления с преимуществами Web-компонентов.

Теперь давайте рассмотрим, как веб-компоненты могут улучшить наши PWA и сделать наши проекты более удобными для сопровождения.

Инкапсуляция с помощью Shadow DOM¶

Когда мы создаем веб-компонент, все наше поведение, html и стилизация содержатся в этом компоненте. Нам не нужно беспокоиться о том, что он будет вмешиваться в другие аспекты нашего проекта, когда мы включаем компонент в наше приложение. Это огромный плюс для удобства сопровождения: это позволяет нам сегментировать код и избежать чрезмерно многословного "спагетти" кода в файлах проекта. Кроме того, для больших PWA, в которых могут одновременно работать несколько разработчиков, веб-компоненты позволяют осуществлять одновременный вклад, отделяя несвязанные компоненты друг от друга.

Веб-компоненты делают это возможным с помощью Shadow DOM, который позволяет нашему компоненту жить в "скрытой" части нашего большого дерева DOM. Мы можем предотвратить столкновение с остальной частью DOM, изолировав часть, относящуюся к веб-компоненту.

Веб-стандарт¶

Веб-компоненты являются Web Standard, что означает, что они рассматриваются как фундаментальная модель поведения компонентов в Web. Это означает, что мы можем рассчитывать на то, что созданные нами веб-компоненты будут работать практически везде:

Еще одним преимуществом является то, что фреймворки веб-компонентов, как правило, небольшие и полностью совместимые. Это означает, что вы можете использовать веб-компоненты в составе более крупных современных фреймворков (например, React или Angular), и они будут работать так, как ожидается. Можно даже отказаться от фреймворков и создавать веб-компоненты на ванильном javascript.

Что касается удобства сопровождения PWA, то это замечательно. Мы знаем, что наши компоненты будут работать в различных браузерах и фреймворках, и нам не нужно писать дополнительный код для поддержания работоспособности нашего проекта. Когда мы хотим обновить или расширить один из наших компонентов, мы можем свободно работать, не беспокоясь о проблемах совместимости. Веб-стандарты также, как правило, гарантируют перспективную совместимость: наши компоненты будут продолжать работать по мере развития и изменения открытого Интернета.

Создание веб-компонентов с помощью FAST¶

Существует множество вариантов фреймворков для создания веб-компонентов, но сегодня мы будем использовать фреймворк FAST, чтобы рассмотреть пример для начинающих.

Допустим, мы создаем наивный элемент <movie-review>, который будет находиться в файле MovieReview.ts.

Для начала мы можем начать с элемента с несколькими атрибутами:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import {
    FASTElement,
    customElement,
    attr,
} from '@microsoft/fast-element';

@customElement('movie-review')
export class MovieReview extends FASTElement {
    @attr movieName: string = 'No Movie Listed';
    @attr rating: string = '0';
}

Далее мы можем предоставить HTML-шаблон для отображения наших атрибутов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import {
    FASTElement,
    customElement,
    attr,
    html,
} from '@microsoft/fast-element';

// our html template for our component
const template = html<MovieReview>`
    <div class="reviewDiv">
        <div class="nameDiv">${(x) => x.movieName}</div>
        <div class="ratingDiv">
            ${(x) => x.rating} stars!
            <div></div>
        </div>
    </div>
`;

// that we can pass into our customElement
@customElement({
    name: 'movie-review',
    template,
})
export class MovieReview extends FASTElement {
    @attr movieName: string = 'No Movie Listed';
    @attr rating: string = '0';
}

Затем мы можем использовать наш элемент следующим образом:

1
2
3
4

<movie-review
    moviename="Fast and Furious: Tokyo Drift"
    rating="5"
></movie-review>

В результате мы получим просто скучный черный текст. Давайте посмотрим, как можно добавить стилистику:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import {
    FASTElement,
    customElement,
    attr,
    html,
    css,
} from '@microsoft/fast-element';

const styles = css`
    .reviewDiv {
        border: 1px solid black;
        display: inline-block;
        padding: 10px;
    }

    .nameDiv {
        font-size: 24;
        font-weight: bold;
        font-style: italic;
    }

    .ratingDiv {
        color: blue;
    }
`;

И мы можем передать эти стили точно так же, как и в наш шаблон:

1
2
3
4
5
6
7
8
9

@customElement({
    name: 'movie-review',
    template,
    styles,
})
export class MovieReview extends FASTElement {
    @attr movieName: string = 'No Movie Listed';
    @attr rating: string = '0';
}

Тогда наш красивый компонент будет выглядеть примерно так:

Теперь у нас есть многократно используемый компонент <movie-review>. Как видите, этот пример достаточно наивен, но вы можете начать представлять себе возможности. Допустим, у нас есть более глубокий компонент <movie-review>, который мы можем использовать внутри связанного с ним компонента <movie-review-list>. Тогда мы сможем изменять внешний вид и функциональность наших обзоров фильмов отдельно от списка, в котором они отображаются, что позволит нам расширять и обновлять наш компонент <movie-review> независимо от окружения, в котором он находится. Инкапсулированный и сопровождаемый!

Если вы хотите получить более подробную информацию о создании качественных компонентов и добавлении функциональности или воспользоваться десятками готовых компонентов, предлагаемых FAST, ознакомьтесь с документацией FAST.

FAST — не единственный способ создания веб-компонентов: ознакомьтесь с полным списком возможностей в этой статье.

Подведение итогов¶

Сегодня мы узнали, как можно писать удобный в обслуживании веб-код и наполнять наши PWA веб-компонентами. Мы лишь едва коснулись поверхности веб-компонентов и фреймворка FAST, и если вы хотите по-настоящему использовать веб-компоненты в наших PWA-сайтах, вам предстоит еще многое узнать. Загляните в ресурсы, чтобы узнать больше!

Ресурсы¶

• Документация по FAST
• Документация MDN по веб-компонентам
• Создание PWA с помощью веб-компонентов Статья Джастина Уиллиса

Комментарии