Первая средняя статья. Второй день обучения горит…
Быстрый фон:
Я родом из C/Go. Бэкэнд. Самые мрачные области оптимизации ЦП, настраиваемые двоичные форматы, встраивание нейронных сетей в серверы и прочее дерьмо.
Я всегда хотел изучить javascript. Шутки в сторону. У меня есть. Но затем я выполняю обещания и обещаю себе никогда больше не пытаться изучать JS. Итак, круг Дхармы повторяется. Мы здесь.
Почему Лит?
Раньше зажигал, был Полимер. Polymer был веб-платформой Google для использования веб-компонентов. Веб-компоненты представляют собой аккуратно связанные фрагменты кода, которые позволяют вызывающей стороне ссылаться на компонент, как на любой другой стандартный тег HTML. Веб-компоненты имеют собственный стиль, логику и свойства, что позволяет соединять компоненты по модульному принципу. За исключением того, что в то время веб-компоненты не полностью поддерживались в нескольких браузерах. В то же время полифиллы максимально точно имитируют недостающие возможности браузера. Polymer создал фреймворк для создания хорошо связанных компонентов и полифиллов для поддержки браузеров.
Но
Полимер был не совсем простым. Кроме того, в это время появился React, и было не так уж важно использовать полифиллы для будущего веб-стандарта, который еще не был принят.
Перенесемся вперед по трем основным версиям Polymer и некоторым значительным обновлениям браузера.
(2019–02–05) Лит родился.
lit-html — это крошечная (чуть более 3 КБ в комплекте, минимизированная и сжатая gzip) и быстрая библиотека JavaScript для шаблонов HTML. lit-html хорошо работает с подходами функционального программирования, позволяя вам декларативно выразить пользовательский интерфейс вашего приложения в зависимости от его состояния.
Эффективно. lit-html работает молниеносно. Когда данные изменяются, lit-html не нужно выполнять какие-либо изменения; вместо этого он запоминает, где вы вставляли выражения в свой шаблон, и обновляет только эти динамические части.
Выразительный. lit-html предоставляет вам всю мощь JavaScript, декларативного пользовательского интерфейса и шаблонов функционального программирования. Выражения в шаблоне lit-html — это просто JavaScript, поэтому вам не нужно изучать специальный синтаксис, и в вашем распоряжении вся выразительность языка. lit-html изначально поддерживает множество типов значений: строки, узлы DOM, массивы и многое другое. Шаблоны сами по себе являются значениями, которые можно вычислять, передавать в функции и из них, а также вкладывать друг в друга.
Расширяемость: lit-html также можно настраивать и расширять — это ваш собственный конструктор шаблонов. Директивы настраивают способ обработки значений, позволяя использовать асинхронные значения, эффективные повторы с ключом, границы ошибок и многое другое. lit-html включает в себя несколько готовых к использованию директив и упрощает определение ваших собственных.
- https://www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release
LitElement использует lit-html для рендеринга компонентов и добавляет API для объявления реактивных свойств и атрибутов. Элементы обновляются автоматически при изменении их свойств. И они обновляются быстро, без различий.
- https://www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release
Хорошо, разве это не звучит сексуально? Ну я укусил. Я решил, что освещено хорошо.
1 день:
Хорошо, я не писал статью для этого, но в основном долго боролся с NPM. Также узнал об этом приятном инструменте под названием:
@open-wc
По сути, это хороший стартовый шаблон для вас. В моем случае я решил сделать веб-компонент вместо приложения. Именно тогда у меня появилась идея делать веб-компонент на каждый день, пока я не освоюсь в интерфейсе.
В первый день я сделал небольшой генератор случайных смайликов. Я знаю. Абсолютно сумасшедший (первая попытка давай, будь милым).
Вы нажимаете кнопку, и она случайным образом выбирает эмодзи.
День 2
Я интересуюсь криптой уже около 3-4 лет. У меня есть MetaMask в моем браузере, и мне просто интересно, насколько сложно будет сделать компонент, который подключается к сети Ethereum.
npm init @open-wcЯ начал с самого простого шаблона веб-компонента.
open-wc создает все это дерьмо, но все, что нас сейчас волнует, это DayTwo.js.
Первым делом я добавил в рендер элементы mwc-formfield/mwc-checkbox. Внутри ${} я выполняю некоторый код JS. Синтаксис ${} освещен html.
После запуска «npm run start» я вижу что-то похожее на это (я установил свой флажок).
import { html, css, LitElement } from 'lit-element';
import '@material/mwc-button'
import '@material/mwc-checkbox'
import '@material/mwc-formfield'
Кстати, импортировать материальные веб-компоненты очень просто, просто установите их с помощью npm и импортируйте :)
Следующее, что я сделал, это создал простую mwc-кнопку.
<mwc-button raised ?disabled=${!this.ethereumSupport} @click=${this.__enableEthereum}>Enable Ethereum</mwc-button>
Еще раз я стилизовал его. Чтобы стилизовать компоненты материала, я просто добавил пользовательские свойства mdc CSS. Документы здесь: (https://www.npmjs.com/package/@material/mwc-checkbox)
Ладно, милая. Теперь у меня есть эта сексуальная зеленая пуговица.
Но что, если я нажму на нее?
Для кнопки был зарегистрирован обработчик кликов, который вызывает this.__enableEthereum. Я думаю, это какой-то синтаксис LitElement.
@click=${this.__enableEthereum}
Сначала я заложил всю логику включения эфириума в этот метод. Но
await ethereum.enable():
должен работать в асинхронной функции, а обработчик кликов не может быть асинхронным (я понятия не имею, почему, если вы знаете, скажите мне, пожалуйста!)
В этих методах мы устанавливаем свойства (this.account или this.networkID). Свойства в основном хранят данные, которые автоматически повторно отображают часть веб-страницы при изменении данных.
Свойства типизируются и инициализируются в конструкторе.
Самое классное в свойствах то, что вы можете использовать их в своем html. Например, я помещаю учетную запись в заголовок… Когда свойство учетной записи изменяется, учетная запись также отображается на веб-сайте. Посмотрите на обработчик кликов __enableEthereum, чтобы увидеть, как я устанавливаю свойства.
Ладно, на этом я закончил. Я доволен тем, что построил. Но я решил пойти немного дальше, потому что узнал, что MetaMask будет переключаться на события для отлова изменений (смена аккаунтов, сетей, цепочек и т.д.). Я понятия не имел, как обрабатывать события в LitElement, но, видимо, вы можете зарегистрировать свои события в конструкторе или в методах firstUpdated. Это сработало для меня:
Теперь я мог реагировать на изменения, происходящие в MetaMask.
И последнее замечание: ethereum.autoRefreshOnNetworkChange испортил мои обновления свойств. Отключение этого (в будущем оно будет отключено по умолчанию) все исправило.
Увидимся завтра за графиками…
твиттер: https://twitter.com/sbsends
