Узнайте, как создать веб-приложение с помощью Lit
Lit — это легкая, быстрая и современная библиотека веб-компонентов, которая позволяет разработчикам с легкостью создавать независимые от фреймворка повторно используемые компоненты пользовательского интерфейса. Однако начать работу с Lit и интегрировать его в новый проект может быть непросто.
Вот тут-то и появляется Bit.
В этой статье мы рассмотрим, как использовать Bit для создания нового проекта с Lit и эффективного создания масштабируемых и многократно используемых компонентов.
Независимо от того, являетесь ли вы новичком в Lit или опытным разработчиком, эта статья предоставит ценную информацию и практические советы по началу работы с Lit and Bit и созданию высококачественных компонентов пользовательского интерфейса для вашего следующего проекта.
Итак, давайте погрузимся и изучим это в процессе создания совершенно нового приложения To-Do!
Начиная
Первое, что нам нужно сделать, это создать проект. Мы создадим простое приложение ToDo с тремя компонентами:
- Фактическая оболочка приложения. Этот компонент будет иметь форму с одним полем ввода и кнопкой. Когда мы нажмем кнопку, во внутренний список будет добавлен новый элемент, и этот список будет передан компоненту
<todo-list>. - Список дел. Этот компонент отобразит список задач, а также покажет сообщение, когда в нашем списке ничего нет.
- Каждый пункт списка дел. Наконец, рядом с пунктами в списке To-Dos появится флажок, при котором текст задачи будет перечеркнут.
Вот как выглядит приложение:
Для этого будет использоваться Lit (как вы уже знаете), поэтому обязательно установите его со следующей строкой:
npm install lit
Вот и все, что вам нужно, чтобы начать творить. Однако нам также понадобится что-то вроде Polymer, чтобы это работало, потому что без него в тот момент, когда вы начнете импортировать свои веб-компоненты на основе Lit, браузер не будет знать, как разрешить зависимости Lit.
Для его установки используйте следующую строку:
npm install --save-dev polymer-cli
Затем вы можете создать файл polymer.json со следующим содержимым:
{
"entrypoint": "./index.html",
"shell": "./todoApp.js",
"npm": true
}
Структура вашего проекта должна быть следующей:
Вы можете запустить проект с помощью этой строки:
polymer serve --open-path ./index.html
Теперь, когда мы знаем, с чего начать, давайте быстро создадим наши компоненты Lit.
Создание вашего первого компонента Lit
Lit — это библиотека Google, упрощающая процесс создания веб-компонентов. Эта библиотека дает вам все строительные блоки, но вам необходимо иметь некоторое представление о том, как работают веб-компоненты.
💡 Узнайте больше о веб-компонентах и их работе.
К настоящему времени Lit должен быть установлен в вашем проекте вместе с Polymer.
Чтобы создать веб-компонент с Lit, вам нужно будет создать новый файл, определить внутри него класс, убедиться, что он расширяет класс LitElement, а затем использовать метод window.customElements.define, чтобы определить новый пользовательский элемент и связать его с вашим классом.
Единственное другое требование, которое исходит от веб-компонентов (а не от Lit), заключается в том, что имя пользовательского элемента должно иметь символ «-» посередине. Другими словами, вы не можете определить элемент из одного слова, его должно быть как минимум два.
import { LitElement, html, css } from 'lit';
export class TodoApp extends LitElement {
/*... class definition here ...*/
}
window.customElements.define('todo-app', TodoApp);
Внутри этих классов вы сможете определить пользовательские свойства (если они есть) и обязательный метод render, который отвечает за возврат HTML-представления компонента.
Давайте взглянем на полный класс TodoApp:
import { LitElement, html, css } from 'lit';
import './components/TodoList.js'
export class TodoApp extends LitElement {
static properties = {
todos: { type: Array },
newTodo: { type: String }
}
constructor() {
super();
this.todos = [];
this.newTodo = '';
}
static styles = css`
/* ...styles here... */
`;
render() {
return html`
<h1>Todo App</h1>
<form @submit="${this.addTodo}">
<input type="text" placeholder="New Todo" .value="${this.newTodo}" @input="${this.updateNewTodo}">
<button type="submit">Add Todo</button>
</form>
<todo-list .todos=${this.todos}></todo-list>
`;
}
updateNewTodo(event) {
this.newTodo = event.target.value;
}
addTodo(event) {
event.preventDefault();
this.todos = [...this.todos, {task: this.newTodo, completed: false}];
this.newTodo = '';
}
}
Мы определяем 2 свойства:
- Список задач в виде свойства
todo. - Создается новая задача в виде свойства
newTodo.
Кроме того, метод render возвращает форму, о которой мы говорили ранее. Каждый раз, когда мы обновляем содержимое поля ввода, мы выполняем метод updateNewTodo. И когда мы отправим форму, мы выполним метод addTodo, который заботится только о добавлении нового элемента в массив todos. Ничего больше. Присвоив это внутреннее свойство свойству todos компонента <todo-list>, Lit позаботится о реагировании на изменения в списке и соответствующем обновлении пользовательского интерфейса.
Этот компонент можно легко использовать со страницы HTML следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>To-Do App</title>
<script type="module" src="./todoApp.js"></script>
</head>
<body>
<todo-app></todo-app>
</body>
</html>
При импорте скрипта таким образом и благодаря полимеру элемент <todo-app> будет правильно отображать форму, как мы видели в методе render этого класса.
Список ToDos аналогичен, вот полный код:
import { css, html, LitElement } from 'lit';
import './TodoItem.js';
export class TodoList extends LitElement {
static get properties() {
return {
todos: { type: Array },
};
}
static get styles() {
return css`
/* styles here */
`;
}
constructor() {
super();
this.todos = []
}
render() {
return html`
<h2>To-Do List</h2>
${this.todos.length === 0
? html`<div class="no-todos">You have no to-do items</div>`
: this.todos.map(
(todo) =>
html`<todo-item task=${todo.task} .completed=${todo.completed}></todo-item>`
)}
`;
}
}
customElements.define('todo-list', TodoList);
Наиболее важной частью этого кода является метод render. Обратите внимание, что у нас есть состояние, когда список задач пуст, и другое состояние, когда у нас действительно есть элементы для рендеринга.
Наконец, компонент <todo-item> очень прост, как и предыдущий:
import { css, html, LitElement } from 'lit';
export class TodoItem extends LitElement {
static get properties() {
return {
task: { type: String },
completed: { type: Boolean },
};
}
static get styles() {
return css`
/* styles here */
`;
}
constructor() {
super();
this.task = '';
this.completed = false;
}
render() {
return html`
<div class="todo">
<input type="checkbox" .checked=${this.completed} @change=${this._handleCheckboxChange} />
<div class="todo-text ${this.completed ? 'completed' : ''}">${this.task}</div>
</div>
`;
}
_handleCheckboxChange(e) {
this.completed = e.target.checked;
}
}
customElements.define('todo-item', TodoItem);
Метод render предоставляет средства для обновления внутреннего состояния элемента (свойство completed). И когда это свойство изменяется, мы соответствующим образом обновляем пользовательский интерфейс.
Мы все?
Код работает, но мы можем улучшить весь рабочий процесс, добавив в него Bit, так что давайте посмотрим на это сейчас.
Управление и совместное использование наших компонентов
К настоящему времени у нас есть работающее приложение, но давайте просто представим, что это версия 0.1, и мы хотим развивать ее как часть команды.
Это означает, что нам понадобится способ поделиться кодом, позволить другим работать с ним и, скорее всего, создавать версии каждого компонента по отдельности на случай, если вы также захотите повторно использовать их где-то еще.
Вот где Бит вступает в игру!
Bit, если вы еще не слышали об этом, — это платформа для совместной работы над повторно используемыми компонентами кода и обмена ими. С помощью Bit вы можете разбить свою кодовую базу на небольшие автономные компоненты, которыми можно легко делиться и повторно использовать в нескольких проектах. Этот подход может значительно повысить скорость разработки и качество кода, поскольку разработчики могут сосредоточиться на создании небольших модульных компонентов, которые можно использовать и тестировать независимо друг от друга.
Bit особенно полезен для разработки интерфейса, где существует высокая степень компонентизации. С помощью Bit разработчики могут делиться и находить компоненты пользовательского интерфейса, стили и логику, что упрощает создание сложных пользовательских интерфейсов. Кроме того, Bit предоставляет мощный рабочий процесс для управления компонентами и управления версиями, что позволяет разработчикам совместно работать над общими компонентами и поддерживать их с течением времени.
👉 В этой статье я предполагаю, что у вас уже установлен Bit и вы ознакомились с основами. Если вы еще не знаете, с чего начать, прочитайте эту статью.
Настройка области действия
Области в Bit похожи на группы или категории, в которые вы можете поместить свои компоненты.
Хотя этот шаг не обязательно должен быть первым, что мы делаем, это хороший способ начать, особенно если вы думаете о том, чтобы поделиться своими компонентами в ближайшем будущем.
Итак, давайте перейдем к Bit.cloud (платформа Bit для хостинга и совместной работы над компонентами), давайте войти (или зарегистрироваться, если вы еще этого не сделали) и создайте новую область, нажав кнопку Создать, расположенную в правом верхнем углу страницы.
Нажмите «Область», а затем обязательно создайте личную область с именем «lit-components»:
Это создаст пустую область, в которой мы сможем начать публикацию наших компонентов.
Инициализация рабочей области
Теперь, когда область готова, мы можем запустить следующую команду, чтобы запустить битовое рабочее пространство:
bit new lit my-workspace --env teambit.web-components/lit --default-scope deleteman.lit-components
Рабочее пространство Bit — это, по сути, среда разработки, предварительно настроенная со всем необходимым для создания, сборки и публикации ваших компонентов. С помощью приведенной выше строки мы создали новое рабочее пространство, предварительно настроенное для работы с компонентами Lit. Мы также указали область по умолчанию, добавив мое имя пользователя и имя области, которую мы определили на предыдущем шаге.
👉 Если вы делаете это дома, не забудьте заменить мое имя пользователя своим.
Это так просто, с помощью этой строки Бит создал необходимые папки и файл workspace.jsonc, который будет управлять конфигурацией рабочей области.
Имейте в виду, что с этого момента вам придется запускать свои команды из папки my-workspace. Здесь вы можете использовать любое имя, и это имя будет использоваться для папки рабочей области.
Узнать больше:
Создание компонентов
С Bit вам не нужно создавать компоненты заранее, вы можете извлечь фрагменты своего кода в компоненты, а затем обращаться с ними так, как если бы они были пакетами, установленными через npm, даже если они фактически находятся в одной папке. . Это замечательно, когда вы добавляете Bit в существующий проект, так что вам не нужно начинать с нуля.
И это именно то, что мы собираемся сделать.
Позвольте мне показать вам, что я имею в виду.
Давайте сначала создадим такие компоненты:
my-workspace> bit create lit todos/todo-list --aspect teambit.web-components/lit my-workspace> bit create lit todos/todo-item --aspect teambit.web-components/lit
Эти две строки создадут две папки внутри my-workspace/lit-components/todos папок todo-list и todo-item.
И внутри каждой из этих папок у вас будет аналогичная структура:
index.js # the main file exporting your component <comp. name>.composition.ts # this file exports different versions of your component for the documentation <comp. name>.docs.mdx # the file where you'll write the actual documentation <comp. name>.spec.ts # here you'll write the tests <comp. name>.ts #the actual component, we'll put our code in this file
Мы будем беспокоиться только о файлах <comp. name>.ts, потому что мы собираемся поместить туда исходный код наших компонентов.
А исходные файлы просто исчезнут, потому что теперь всякий раз, когда вам нужно будет импортировать один из этих компонентов, вы будете использовать новый URL:
- Для компонента
<todo-list>будет @deleteman/lit-components.todos.todo-list» - А для компонента
<todo-item>: @deleteman/lit-components.todos.todo-item»
Это символические ссылки, которые Bit создал для вас. Теперь они ссылаются на локальную копию ваших файлов, но вы можете импортировать их, как если бы они были только что установленными пакетами npm. Таким образом, вы можете обновить свой код, чтобы использовать «внешние» зависимости еще до их публикации.
Это означает, что оператор импорта в основном файле todoApp.js теперь изменяется на import '@deleteman/lit-components.todos.todo-list'. И внутренне импорт <todo-list> компонента <todo-item> также необходимо соответствующим образом обновить.
💡 Обратите внимание, что теперь, когда вы импортируете компоненты Bit, вы на самом деле не ссылаетесь на файл JavaScript, поэтому ваши компоненты могут быть полностью написаны на TypeScript, если вы хотите и Бит сделает перевод для вас. Аккуратный!
И после этого обязательно установите все ожидающие или отсутствующие зависимости с помощью bit install .
Этого должно быть более чем достаточно для продолжения.
Публикация вашей работы
Теперь, когда вы создали новые компоненты, экспортировали их код и соответствующим образом обновили операторы импорта, единственный недостающий шаг для начала совместной работы с другими людьми — поделиться ими в Интернете.
Для этого нам сначала нужно версионировать наши компоненты. Это гарантирует, что все используют правильную версию кода и что не будет конфликтов при отправке изменений из разных мест.
Для этого мы будем использовать команду bit tag, которая автоматически присвоит номер версии, скомпилирует и проверит наши компоненты, прежде чем их можно будет опубликовать.
bit tag deleteman.lit-components/todos/todo-item bit tag deleteman.lit-components/todos/todo-list
Обратите внимание, что я использую свое собственное имя пользователя, вам придется обновить его на свое собственное.
Кроме того, прежде чем запускать эти строки, обязательно обновите тестовые файлы для каждого из ваших компонентов, так как они будут выполняться во время процесса тегирования.
Если все идет по плану, вы должны увидеть что-то вроде этого:
Компонент помечен как версия 0.0.1.
Теперь он готов к публикации. И мы можем легко сделать это с помощью одной команды:
bit export
Команда export захватит все отмеченные компоненты и экспортирует их на платформу Bit.cloud (при условии, что вы уже использовали команду bit login).
Вы должны увидеть результат, похожий на этот:
Это означает, что все было правильно экспортировано. На самом деле, вот так мои компоненты выглядят экспортированными и живут прямо сейчас:
Повторное использование этих компонентов
В качестве последнего действия, после того как вы успешно экспортировали эти веб-компоненты в Bit Cloud, вы можете использовать их в своих собственных проектах.
Как?
На самом деле у вас есть несколько способов, просто нажмите на один из них, чтобы увидеть варианты. В правом верхнем углу вы увидите кнопку «Использовать»:
Вы можете увидеть на скриншоте выше все возможные варианты.
Вы можете использовать стандартный менеджер пакетов, такой как pnpm или Yarn. Или вы можете использовать Бит.
Вариант «Бит» наиболее интересен, потому что на самом деле у вас есть разные способы добавления компонента в ваш проект.
- Вы можете установить компонент, который будет таким же, как использование npm или yarn. Он добавит компонент в качестве зависимости, и вы сможете импортировать его в обычном режиме.
- Вы можете «импортировать» компонент. Это скопирует файлы в вашу рабочую папку, но в то же время создаст те же символические ссылки, которые были созданы ранее. Это позволяет вам импортировать файлы, как если бы они находились в папке
node_modules, но в то же время у вас есть легкий доступ к ним и вы можете изменять их в соответствии со своими конкретными потребностями. - И вы можете «разветвить» компонент, что похоже на его «импорт», но вы начнете с него заново. Это означает, что вы не будете перезаписывать какие-либо предыдущие версии при внесении изменений, вместо этого они будут рассматриваться как новые компоненты. Это замечательно, если вы хотите изменить компонент и сделать его своим, но у вас нет прав на запись в его области.
В конце концов, то, как вы их используете, зависит от вас, самое замечательное, что у вас есть варианты!
Подробнее:
Создавать веб-компоненты с помощью Lit относительно легко, если вы понимаете, как их обслуживать (через Polymer, Webpack или что-то еще, что вы хотите использовать).
Но создания изолированных компонентов недостаточно, если вы хотите создать из них растущую библиотеку, особенно если вы хотите, чтобы другие использовали их и изменяли их.
Именно здесь в игру вступает Bit, который предоставляет необходимые функции, чтобы сделать вашу жизнь и жизнь вашей команды намного проще. Не говоря уже о заботе о качестве кода.
Пользовались ли вы ранее Литом? Что вы думаете об этом?
Создавайте приложения с повторно используемыми компонентами, как Lego
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
