Прежде чем я начну, я должен упомянуть следующее: это не учебное пособие. Но если вы здесь, потому что хотите быстро начать создавать облегченные приложения с помощью Redux / Express / Webpack / Routing, посмотрите это репо здесь: create-lit-app
И дайте мне знать, если вы использовали его для создания чего-нибудь крутого!
Я совсем недавно начал работать на работе, где мы используем Polymer в интерфейсе. Переход с модулей React и ES6 на импорт Polymer и HTML наверняка был немного неудобным. Однако недавно команда Polymer решила перейти на NPM, выпустив Polymer 3. Прочтите об этом здесь.
С выпуском Polymer 3 также появился новый предлагаемый базовый класс LitElement, порожденный Lit-html Джастина Фаньяни. Кажется, это путь вперед:
«Для новых разработок вам также следует рассмотреть LitElement, легкий, производительный базовый класс нового поколения для настраиваемых элементов».
Так что же такое LitHTML?
LitHTML позволяет писать HTML-шаблоны с подсветкой шаблонов JavaScript (понятно?), А также эффективно отображать и повторно отображать эти шаблоны в DOM. Это выглядит примерно так:
Теперь, если вы использовали React раньше, вы могли бы узнать это как JSX или функциональный компонент без сохранения состояния (сокращенно: FSC), но это не так. На самом деле это просто стандартный синтаксис javascript!
LitHTML использует тегированные литералы шаблонов, что является простой функцией ES6 (#usetheplatform), которая может охватывать несколько строк и содержать выражения javascript. Этот тегированный литерал шаблона (а именно: html``) возвращает результат шаблона, который представляет собой объект, содержащий ссылку на шаблон, который мы хотим визуализировать, и данные, с которыми мы хотим его визуализировать.
Хорошая особенность тегированных шаблонных литералов заключается в том, что когда мы хотим визуализировать наш helloTemplate несколько раз:
Для всего приложения создается только один объект результата шаблона, единственное, что отличается, - это данные, передаваемые в него.
Кроме того, в LitHTML нет Vdom или каких-либо различий.
Что такое ЛитЭлемент?
LitElement - это новый базовый класс, который использует LitHTML для реагирования на изменения свойств и декларативного рендеринга материалов. LitElement выглядит так:
Если вас интересуют другие примеры Lit и вы хотите узнать больше о жизненном цикле, ознакомьтесь с этими невероятными демонстрациями Ларса ден Баккера
Вот что интересно: Затем lit-html обеспечивает быстрое обновление, создавая статический DOM один раз и умно обновляя только те части DOM, которые меняются.
Отличие от Vdom (виртуального дома) в том, что Vdom при каждом изменении визуализирует все виртуальное дерево. Он масштабируется вместе с количеством узлов в вашем шаблоне, но снижает стоимость узла до минимума.
LitHTML не выполняет никаких различий и не сравнивает статические части шаблона после первоначального рендеринга. Вместо этого он смотрит только на выражения. Это просто значения javascript. Если значение или результат выражения не изменились, DOM не обновляется. LitHTML даже не выполняет для этого никакой дополнительной работы, его просто javascript оценивает выражения. В конце концов, Polymer - это не фреймворк, его синтаксический сахар по сравнению со стандартными API веб-компонентов.
Кроме того, Lit работает быстро, потому что он использует быстрый встроенный в браузер синтаксический анализ строк, который примерно в 3 раза быстрее, чем стандартные выражения javascript. (#usetheplatform)
Еще немного о шаблонных литералах с тегами…
Этот странно выглядящий html тег может немного сбить вас с толку, если вы никогда его раньше не видели, поэтому давайте углубимся в него. Теги шаблонных литералов - это просто стандартный синтаксис ES6. И эти теги на самом деле просто функции! Рассмотрим следующий пример:
Мы просто создали собственный тегированный литерал шаблона, и все, что мы сделали, это объявили функцию. Вы можете попробовать это сами прямо сейчас, написав в консоли своего браузера. Единственная разница в том, как мы это называем.
Теперь давайте посмотрим, как тегированные литералы шаблона обрабатывают выражения:
Когда мы используем выражения или другие переменные в нашем литерале шаблона, javascript оценивает выражение, и мы можем получить доступ к результату в нашей функции. (Я использовал spread или, скорее, оператор gather, чтобы объединить все следующие параметры в массив, но мы также могли написать: function customTaggedLiteral(strings, value1, value2)). Вот как работают литералы шаблонов с тегами тегами.
И если мы посмотрим на исходный код LitHTML, то увидим, что именно это и происходит:
Итак, опять же, LitHTML не использует скрытую магию фреймворка. Стандартный синтаксис ES6. (#usetheplatform)
Для более подробного объяснения внутренней работы LitHTML, пожалуйста, посмотрите следующие два видео Джастина Фагнани: https://www.youtube.com/watch?v=Io6JjgckHbg https://www.youtube. ru / watch? v = ruql541T7gc
Создание приложения CRUD с LitHTML
Теперь, когда у нас есть некоторый контекст и есть некоторые впечатления о том, что такое LitHTML и LitElement и как они выглядят, пришло время продемонстрировать приложение, которое я создал с ними.
В свободное время я люблю смотреть стримы Twitch, модерировать их (привет BradWOTO) и писать для них чат-ботов и другие инструменты стримеров. Я не буду слишком углубляться в чат-бота, но предпосылка проста: бот наблюдает за чатом стримеров на предмет каких-либо команд, и если кто-то отправил команду, бот отправит ответ, который хранится в базе данных. Команда также имеет разрешение, что означает, что некоторые команды предназначены только для модератора или только для подписчика и, следовательно, могут использоваться только модераторами или подписчиками.
И с тех пор, как я открыл для себя LitHTML, я очень хотел заполучить какой-нибудь хобби-проект, чтобы опробовать его. Я недавно закончил работу с этим чат-ботом и подумал, что было бы отличным упражнением написать довольно простое приложение CRUD (Create / Read / Update / Delete) для управления командами для бота. Это означает пару вещей:
- Мне нужна аутентификация / авторизация, потому что мы не хотим, чтобы все могли удалить все команды.
- Мне понадобится подключение к API / базе данных для обработки всего CRUD. Я использовал базу данных SQL, так как там уже были команды ботов, но вы могли легко переключить это на Mongo.
- Мне нужно какое-то государственное управление. (Возможно, я мог бы сделать это без Redux, но я подумал, что было бы неплохо попробовать это в сочетании с LitHTML)
Я не буду объяснять весь код в этой истории, но выделю пару интересных примеров и лакомых кусочков. Начнем с самого начала.
Укладка
Одна замечательная особенность, на которую я наткнулся, - это то, как мы можем использовать стили. Рассмотрим этот пример:
Мои цвета объявлены в файле Colors.js и импортированы в Appstyles.js. Теперь я могу просто использовать ${ AppStyles } в любом компоненте, который мне нужен, и поскольку когда-либо создается только один объект шаблона AppStyles, а выражения в шаблоне вряд ли изменятся, это значительно снижает стоимость рендеринга и допускает модульность.
Использование внешних компонентов
Использовать внешние веб-компоненты очень просто. Просто установите с помощью:
npm install --save @vaadin/vaadin-button
И импортируйте и используйте так:
Легко и нежно японцы.
Я абсолютно влюбился в компоненты Vaadin, поэтому огромное спасибо команде Vaadin. Их компоненты красивы, доступны и хорошо документированы.
(У них также есть отличный роутер, который create-lit-app использует для своей маршрутизации)
Компоненты текстового поля и текстовой области Vaadin поставляются со встроенной функцией проверки, которая делает их идеальными для использования в моем приложении, поскольку, например, каждая команда должна начинаться с восклицательного знака.
Проверка входных данных выполняется с помощью регулярных выражений и выглядит так:
Добавление Redux
Redux - отличный способ управления состоянием, который широко используется во многих различных приложениях. Redux сохраняет все состояние вашего приложения в одном неизменяемом объекте, который называется хранилищем. Когда значения в вашем магазине меняются, изменяется ваше представление / пользовательский интерфейс. Эту концепцию часто описывают так: UI = f(state) Подробное объяснение Redux выходит за рамки этой истории, но вы можете прочитать все о Redux здесь, возможно, это лучшая сохраненная документация, которую я когда-либо читал.
Я использую Redux для хранения всех моих команд, отслеживания любых ошибок API и состояния загрузки. Также для открытия модальных окон и поисковых запросов.
Поскольку я использую несколько разных операций в своей команде (Добавить / Удалить / Обновить), мне нужна пара разных модальных окон и проверок. Когда, например, я нажимаю на свой <edit-button>:
Я отправляю в магазин действие с модальным режимом, в данном случае «edit», и в качестве полезной нагрузки команду, которую я хочу отредактировать.
Моя модальная структура выглядит так:
Еще одна замечательная особенность Redux - отладка путешествий во времени. Вы, наверное, догадались, как изменилось представление моего приложения из-за следующих действий:
Если вы заинтересованы в добавлении Redux в свой освещенный проект, вы можете прочитать раздел полимер-pwa-starter на Redux, или, если вам нужен быстрый и простой пример, перейдите в create-lit-app.
Директивы
Еще одна интересная вещь, которая поставляется с LitHTML, - это директивы. Директивы - это функции, которые могут расширять lit-html, напрямую взаимодействуя с Part API.
Отличным примером директивы является директива until, которая выглядит так:
Итак, пока обещание не будет выполнено, будет отображаться сообщение «Загрузка…».
Я использовал директиву UnsafeHTML. В чатах Twitch вы можете использовать эмоции, а просто текст, например: Kappa, отобразит эту эмоцию в чате:
У стримеров также могут быть собственные эмоции, которые вы можете использовать, если на них подписаны. Например: bradLOVE отобразит эмоцию сердца и может использоваться только подписчиками BradWOTO.
Я подумал, что было бы здорово не просто отображать текст bradLOVE в списке команд, а вместо этого отображать реальное изображение эмоции. Здесь я столкнулся с проблемой, поскольку простая замена текста bradLOVE тегом изображения не сработает и будет выглядеть следующим образом:
Мне удалось решить эту проблему с помощью директивы UnsafeHTML, например:
И он выведет это:
Сборка / развертывание с помощью webpack
Я использовал webpack для создания своего проекта, с большой помощью невероятно полезного веб-падавана и его polymer3-webpack-starter.
Я много боролся с настройкой веб-пакета, но люди из канала веб-пакетов полимерный запас очень мне помогли. После настройки webpack и завершения разработки все, что мне нужно было сделать, это запустить webpack --env production, и мое приложение было готово к работе.
Для развертывания я использовал платформу облачных приложений Heroku. Вот действительно полезная ссылка для размещения приложения узла на heroku. Поскольку весь мой код был связан с webpack, все, что мне нужно было сделать, это обслужить мою папку распространения с моим экспресс-сервером следующим образом:
И мое приложение было запущено!
Подведение итогов
Вот и все для этого сообщения в блоге, как я уже упоминал ранее, это на самом деле не учебник, а скорее описание моего опыта разработки освещенного приложения. Если вы хотите самостоятельно начать разработку светового приложения, попробуйте create-lit-app, так как в нем есть все, что это приложение настроило для вас, и оно готово к работе. (Redux / Webpack / Express API). Я хотел бы услышать любые отзывы или предложения.
Спасибо за прочтение!
Первоначально опубликовано на gist.github.com.
