Быстрый пользовательский интерфейс — Создание приложения To-Do с помощью VanillaJS и веб-компонентов

Приходите посмотреть, как выглядит ставка Microsoft на веб-компоненты

Fast — это библиотека компонентов, разработанная и поддерживаемая Microsoft. На самом деле, хотя вы определенно можете использовать Fast в качестве библиотеки компонентов, вы можете сделать с ним гораздо больше.

В том виде, в котором он был разработан, Fast позволяет вам создать с его помощью целую систему дизайна, если вы этого хотите. Но не будем забегать вперед, давайте более подробно рассмотрим библиотеку Fast UI и то, как вы можете использовать ее для создания собственных приложений.

Что такое быстрый интерфейс?

Fast UI — библиотека на основе веб-компонентов. Это означает, что все, на что мы будем смотреть с этого момента, будет основано на веб-компонентах. Microsoft создает Fast в надежде предоставить разработчикам строительные блоки, необходимые для использования преимуществ нового веб-стандарта: Стандарта веб-компонентов.

С Fast у вас есть 3 варианта:

Вы можете просто взять предоставленный набор компонентов и использовать их для создания своего приложения. Это то, что мы собираемся делать сегодня BTW.
Вы можете создавать свои собственные компоненты, расширяя те, которые предоставляются библиотекой. Если предоставленных недостаточно, вы можете настроить их так, как вам нужно.
И если вас не устраивают предыдущие два варианта, вы даже можете создать всю свою дизайн-систему с Fast и базовыми элементами, которые он предоставляет.

Прелесть его в том, что вам на самом деле не нужен фреймворк для его использования, на самом деле, сегодня я собираюсь показать вам, как создать приложение To-Do с помощью vanilla JS и Fast, без необходимости в чем-либо еще.

Тем не менее, они предоставляют вам инструкции о том, как использовать Fast практически со всеми основными фреймворками (ознакомьтесь с их документацией здесь).

Помните, Fast заботится о том, чтобы предоставить вам способ абстрагировать представление ваших компонентов, другие его аспекты, такие как бизнес-логика, полностью зависят от вас. Это означает, что Fast UI не является заменой React, Vue или даже Next, это просто еще один инструмент, который вы можете использовать для отображения результатов на экране.

Создание приложения To-Do с помощью VanillaJS

Чтобы доказать свою точку зрения, я собираюсь показать вам, как вы можете использовать Fast только с VanillaJS. Вы можете посмотреть весь код, клонируя этот репозиторий.

После этого вот что мы собираемся создать: Быстрое задание.

Вот что мы получили:

Поле ввода для ввода новой задачи
Аккордеонные элементы, которые мы можем расширить, чтобы завершить каждую задачу
Когда закончите, задача покажет, сколько секунд нам потребовалось, чтобы закрыть задачу.
И мы также можем перезапустить задачу после закрытия.

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

Это означает, что у нас будет 3 основных компонента, о которых нужно позаботиться:

Поле ввода
Аккордеонный список дел.
Таймер. Этот элемент будет отображаться только после закрытия задачи.

Давайте посмотрим на них.

Быстрая настройка с VanillaJS

Прежде чем двигаться дальше, нам нужно добавить Fast в наш файл index.html, и мы можем легко сделать это, импортировав CDN-версию Fast Component.

Добавьте это в свой элемент head:

Это приведет к импорту последней версии Fast Component, и каждый отдельный компонент, предоставленный им, будет автоматически доступен.

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

Обратите внимание на элементы fast-text-field и fast-button. Это веб-компоненты, предоставляемые Fast. Мы можем просто добавить их, не стилизуя их и не беспокоясь о них. Это то, что я называю «уровень 1», просто используйте то, что вам дают.

Теперь давайте взглянем на пользовательский тег todo-list.

Создание собственных компонентов

Компонент ToDo List будет состоять из других быстрых компонентов. Первое, что вам нужно сделать, чтобы создать свой собственный компонент, это экспортировать класс, который расширяет класс FastElement. Этот класс позаботится обо всех шаблонах, необходимых для настройки веб-компонента.

А внутри класса мы добавим необходимые методы бизнес-логики. Проверьте класс ниже:

Обратите внимание, что этот синтаксис необходим, потому что я использую VanillaJS, если вы используете TypeScript, вы сможете воспользоваться нотациями.

Тем не менее, следующие части являются наиболее важными:

Свойство static definition содержит объект конфигурации, описывающий компонент. Свойство name определяет тег, который вы будете использовать в своем HTML. template сообщит компоненту, откуда взять HTML-контент, так же, как и свойство styles. Наконец, массив attributes будет содержать свойства элемента, вы можете установить и получить их с помощью методов setAttribute и getAttribute.
Массив todos будет содержать список объектов ToDo (подробнее об этом чуть позже), а массив _taskIds будет содержать тот же список, но только с идентификаторами объектов. Это не идеально, но, как мы увидим, для динамического обновления шаблона массив элементов должен иметь простые элементы.
В строке 38 нам нужно вручную зарегистрировать компонент, чтобы он мог быть проанализирован и использован браузером. Если бы вы использовали пакет Fast NPM, вам не нужно было бы это делать, но, поскольку мы используем VanillaJS, мы должны добавить этот шаг.

Шаблон нашего элемента выглядит так:

Как видите, я снова использую быстрые компоненты ( fast-card , fast-accordion и т. д.).

Я перебираю массив идентификаторов задач с помощью строки 7. Функция repeat здесь не может заметить, когда объекты внутри массива изменяются, поэтому я перебираю массив строк. Как видно из метода toggleTask, когда задача помечена как «выполненная», я добавляю к строке «@1». Это запускает обновление функции repeat, и список автоматически обновляется. Мне не нужно беспокоиться о ручном повторном рендеринге DOM или о чем-то еще.

Из-за этого дополнительного шага всякий раз, когда мне нужна часть информации из фактической задачи, например ее описание, я должен получить доступ к родительскому элементу (см. строку 17 из приведенного выше кода шаблона).

Всякий раз, когда я нажимаю кнопку элемента (который, кстати, имеет внутри динамический текст, в зависимости от состояния этого конкретного элемента ToDo), я вызываю функцию endTask, которая выглядит следующим образом:

Это просто, я просто получаю элемент старым добрым методом document.getElementById, а затем вызываю метод toggleTask. Этот метод найдет правильный элемент задачи, вызовет его метод toggle и в то же время соответствующим образом обновит идентификатор внутри _taskIds (либо добавив, либо удалив строку @1).

В строке 19 кода шаблона я добавляю таймер задачи, так что давайте посмотрим и на него.

Создание условно отображаемого компонента

Компонент таймера задачи отображается только тогда, когда задача закрыта, НО его таймер работает с момента добавления элемента в DOM.

Итак, нам нужно создать компонент, который поддерживает интервал и выполняет рендеринг только тогда, когда происходит что-то еще. Мы можем сделать это с помощью директивы when, например:

Наш счетчик будет хранить ссылку на свой объект ToDo. Как только его свойство selected станет true, будет отображено fast-badge, иначе оно будет удалено из DOM.

Класс для этого компонента выглядит так:

Обратите внимание на следующее:

Атрибут todoId устанавливается через HTML, когда мы используем элемент (ознакомьтесь с кодом шаблона списка задач выше).
Метод connectedCallback — это метод жизненного цикла веб-компонентов. Подробнее об этих методах можно прочитать здесь. В частности, он вызывается, когда элемент вставляется в DOM. С помощью этого кода, когда элемент (таймер) добавляется в DOM, мы используем свойство todoId для получения фактического объекта ToDo и устанавливаем ссылку на таймер внутри ToDo, вызывая метод setTimer. Мы будем использовать эту ссылку внутри условия when шаблона.

Это очень простой компонент, и я бы сказал, что самая важная его часть — это то, как достигается условный рендеринг.

Больше нечего делать, если вы хотите протестировать приложение, просто клонируйте репозиторий и запустите его с помощью npx http-server, чтобы оно заработало.

Как видите, Fast UI обладает некоторыми очень интересными свойствами расширяемости, его очень просто настроить, а шаблоны очень эффективны. Хотя я не вникал в это, вы потенциально можете создавать свои собственные версии этих быстрых компонентов и настраивать их по своему усмотрению. Они просто предоставляют вам неуверенную версию в качестве основы.

Если вы хотите узнать больше о Fast UI, ознакомьтесь с их очень обширной документацией или присоединитесь к их Discord-серверу, где вы сможете задавать вопросы другим пользователям Fast.

Вы пробовали Fast UI раньше? Что ты об этом думаешь?

Станьте компонуемым: создавайте приложения быстрее, как Lego

Bit – это инструмент с открытым исходным кодом для модульного и совместного создания приложений. Перейдите на компоновку, чтобы поставлять быстрее, более последовательно и легко масштабировать.

→Подробнее

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

Помогите своей команде:

→ Микроинтерфейсы

→ Дизайн-системы

→ Совместное использование кода и повторное использование

→ Монорепо