Что нужно для создания простой таблицы JavaScript в 2022 году

Некоторые из вас, возможно, еще помнят пост [Каково это — изучать JavaScript в 2016 году] (https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f), из которого я также взял изображение выше. Это 8 лет спустя; многое должно было произойти в такой быстро развивающейся экосистеме, как JavaScript, которая делает нашу жизнь проще, верно?

Итак, каково это создавать простую таблицу в наши дни? Наша пользовательская история на сегодня такова:

Как пользователь

Чтобы в браузере можно было увидеть немного латиницы

Мы хотим, чтобы запись из jsonplaceholder отображалась в таблице

Когда вы попытаетесь подойти к этой теме, вам может показаться, что с тех пор мало что изменилось. Только то, что некоторые инструменты немного лучше скрывают от вас сложность и всплывают на поверхность только тогда, когда что-то выходит из строя, а вы понятия не имеете, что происходит. Взгляните на сценарий create-react-app в качестве примера.

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

``` ударить

npx создать-реагировать-приложение

компакт-диск реагировать-приложение

npm выполнить выброс

Когда мы открываем package.json, мы видим, что у нас есть> 50 зависимостей в нашем приложении, даже до написания одной строки кода. Если мы запустим npm run build и проверим размер полученных файлов, то увидим следующий результат:

``` ударить

❯ du -ch build/static/js/*.js

8.0K build/static/js/787.28cb0dcd.chunk.js

Сборка 132 КБ/static/js/main.0278e899.js

всего 140 тыс.

У нас 140 тыс., и мы даже не начали извлекать данные или отображать их в таблице. Но это 2022 год; а как насчет другого подхода? И чтобы двигаться вперед, мы возвращаемся к истокам.

Создайте новую папку web-app и добавьте в нее файл index.html. HTML-файл должен содержать следующее содержимое:

```разметка

<голова>

<метакодировка="utf-8" />

<тело>

При этом мы все еще находимся в точке, когда таблицы на странице нет, но в 2022 году создать ее прямо в этом файле, без всяких бандлеров/билдеров/транспиляторов/и т.п., можно сделать быстро и удобно.

Мы будем использовать то, что предлагает нам браузер, в основном [функциональность модуля] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), которую сегодня поддерживают все современные браузеры. И мы собираемся создать [Веб-компоненты] (https://developer.mozilla.org/en-US/docs/Web/Web_Components), еще одну технологию, поддерживаемую браузерами, которая позволяет нам создавать повторно используемые элементы для страницы.

Во-первых, мы создаем пользовательский элемент на странице, которая должна отображать нашу таблицу:

```html

<голова>

<метакодировка="utf-8" />

<тело>

Пожалуйста, подождите, идет загрузка...

Давайте откроем это в браузере. Сначала запустите локальный веб-сервер, открыв свой терминал, и для python 2 введите python -m SimpleHTTPServer 3000, для python 3 python -m http.server 3000 и ​​откройте http://localhost:3000. в вашем браузере.

Мы можем увидеть следующий результат:

Пожалуйста, подождите, идет загрузка...

Поздравляем, вы создали свой первый веб-компонент! Это хорошее начало, но ему не хватает функциональности. Для дальнейшего развития приложения мы добавим на страницу тег скрипта и пометим его как модуль.

```html

<голова>

<метакодировка="utf-8" />

<тип сценария="модуль">

импортировать { html } из "https://unpkg.com/lit@2.2.0?module";

импортировать { pureLit } из "https://unpkg.com/pure-lit@2.0.2?module";

pureLit("jsonplaceholder-posts", async () => htmlloaded!);

<тело>

Пожалуйста, подождите, идет загрузка...

Обновление страницы в браузере изменит «Пожалуйста, подождите при загрузке...» на «Загружено!». Однако сейчас происходит немало вещей, которые могут оказаться для вас неожиданными.

Во-первых, мы можем импортировать зависимости из URL-адресов в браузере. Это то, что обеспечивает вышеупомянутый функционал модуля. Таким образом, установив для тега script значение module, мы можем импортировать другие библиотеки JavaScript, если они предоставляют свою библиотеку как модули. Мы импортируем две библиотеки: lit, облегченный фреймворк для упрощения создания веб-компонентов, и pure-lit, который расширяется, позволяя использовать функциональные компоненты.

При последующем вызове функции pureLit("jsonplaceholder-posts", async () => html`loaded!`)пользовательский элемент <jsonplaceholder-posts> регистрируется в браузере и заменяется шаблонным Строка HTML "загружено!".

Теперь мы можем реорганизовать существующую функцию, чтобы получить данные с URL-адреса https://jsonplaceholder.typicode.com/posts и сопоставить список с строками таблицы.

```js

pureLit("jsonplaceholder-posts", async () => {

const posts = await fetch(https://jsonplaceholder.typicode.com/posts)

.then((ответ) => response.json())

вернуть html`<таблица>

${posts.map(({название, тело}) =>

html<tr><td>${title}</td><td>${body}</td></tr>)

`

Обновление страницы в браузере представляет нам все сообщения в таблице. И все это без необходимости использовать webpack, babel, даже nodejs, имея удобные функции javascript, такие как async/await.

И проверка размера кода, который мы должны поддерживать, даст нам следующий результат:

``` ударить

❯ du -h index.html

4.0K index.html

Это действительно часть примера с реактивным стартером. Конечно, можно возразить, что сложность, связанная с загрузкой модулей, просто перенесена в браузер, но здесь есть одно существенное отличие: если раньше это было частью вашего процесса сборки для установки и загрузки модулей, то теперь это инфраструктура реализована в соответствии со стандартами браузера. Загрузка модулей больше не является вашей проблемой и не требует npm, а для их включения вам не нужен Webpack. Современные функции JavaScript доступны без Babel. А компонентизация ваших элементов пользовательского интерфейса может быть выполнена изначально с помощью веб-компонентов. Библиотеки существуют только для того, чтобы облегчить вашу жизнь, но полученный пользовательский элемент можно использовать в простом HTML, не требуя, чтобы приложение, которое их использует, использовало ту же структуру. Вы даже можете дойти до написания пользовательских элементов без каких-либо фреймворков; однако они облегчают задачу.

С другой стороны, если вы хотите добавить функциональность, которая, по вашему мнению, является ценной, вы все равно можете это сделать. Вместо того, чтобы встраивать файл скрипта в HTML, вы также можете переместить его в файл и, например, запустить npx eslint index.js --fix, чтобы проверить их.

Итак, наша жизнь стала лучше? Частично, можно сказать, так и было. Конечно, разработчику еще многое нужно знать, но я надеюсь, что с модулями JavaScript, веб-компонентами и языковыми функциями, поддерживаемыми в браузерах, мы достигли уровня, когда добавление динамической таблицы в браузер может быть выполнено только с помощью чтение только документации JavaScript на MDN. Также чувствуется, что экосистема стала более стабильной, а количество появляющихся новых фреймворков сократилось.

Наконец, написание таблицы, которая загружает и отображает некоторые данные в HTML + JavaScript правильным и приемлемым способом, никогда не было таким простым.

И благодаря тому, как мы обслуживали наше приложение, мы даже использовали Python, замыкая цикл до исходной статьи [Каково это — изучать JavaScript в 2016 году] (https://hackernoon.com/how-it-feels-to -learn-javascript-in-2016-d3a717dd577f), отлично!

Фреймворки, инструменты и технологии, используемые в этой статье

lit — Простые быстрые веб-компоненты (ранее известные как Polymer)

pure-lit — легкая функциональная оболочка вокруг lit — отказ от ответственности: я основной участник

Модули JavaScript — создание и импорт модулей Javascript в браузере.

[Веб-компоненты] (https://developer.mozilla.org/en-US/docs/Web/Web_Components) — веб-компоненты представляют собой набор различных технологий, позволяющих создавать повторно используемые пользовательские элементы.

jsonplaceholder — Бесплатный поддельный API для тестирования и прототипирования.

create-react-app — настройте современное веб-приложение, выполнив одну команду.