0 == "0"
// true

0 == []
// true

"0" == []
// false

Волшебство JavaScript

#js

Красивые симуляции на JavaScript с целью изучения его возможностей по производительности

Статья

#js #performance

const count = ?;

let x = count;
let y = count;

x++;
console.log(x);

y = y + 1;
console.log(y);

Немного JavaScript

В каких случаях результат вывода будет различным?

#js #challenge

JavaScript worker threads / Web workers — это мощный функционал, доступный в современных веб-браузерах, а также в Node.js, Deno и Bun, который позволяет создавать независимые потоки выполнения в одной JavaScript-среде. Эти worker threads работают параллельно с главным потоком, позволяя приложению выполнять ресурсоемкие операции или обрабатывать сетевые запросы без блокировки пользовательского интерфейса.

Преимущества использования worker threads:

Повышенная отзывчивость: Передавая длительные задачи на worker threads, главный поток остается свободным для обработки пользовательских взаимодействий и обновления интерфейса. Это приводит к более плавному и отзывчивому пользовательскому опыту.

Повышенная производительность: Worker threads могут использовать несколько ядер современных процессоров, что позволяет параллельно выполнять ресурсоемкие задачи.

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

Модульный код: Worker threads способствуют модульной организации кода. Мы можем изолировать сложные задачи в отдельных worker-скриптах, улучшая поддержку и повторное использование кода.

Варианты использования:

1. Ресурсоемкие вычисления

Представьте, что у нас есть сложная математическая формула для расчета данных по нескольким точкам. Непосредственное выполнение этого на главном потоке заблокирует пользовательский интерфейс и сделает наше веб-приложение неотзывчивым. Такие задачи идеально подходят для worker threads.

2. Обработка изображений/видео

Допустим, мы хотим разрешить пользователям загружать изображения в наше веб-приложение и применять фильтр черно-белого цвета перед отображением. Обработка изображения непосредственно в главном потоке может вызвать задержку во время применения фильтра. Опять же, это ресурсоемкая задача, где worker threads могут спасти ситуацию.

3. Анализ данных

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

4. Фоновые задачи

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

5. Приложения в реальном времени

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

#js #workerthreads

В третьей стадии находится пропозал о декораторах в JavaScript

Если его примут, задание реактивных переменных возможно "упростится" до:

@reactive
let count = 0;

@shallowReactive
let messages = [];

Правда, после этого js перестанет быть js-ом...

#js #tc39 #decorators

Интересный сайт, рассказывающий как писать современные веб приложения на чистом JS, CSS и HTML

plainvanillaweb.com

#js #webcomponents

#meme #js

Чтобы немного нейтрализовать психологическую травму, нанесенную TypeScript, вот на ночь четыре капли седатива от JS

#js

Эван напрашивается на мем про гуся...

#evanyou #js

AbortController можно применять не только для отмены сетевого запроса, но и для отмены, практически, любых событий, включая setTimeout, анимацию или нажатие на кнопку

const abortController = new AbortController();

button.addEventListener(
  'click',
  () => console.log('clicked'),
  { signal: abortController.signal }
);

abortController.abort();

Иногда это удобней, чем делать отписку-подписку.

#js #tip

В экспериментальных версиях браузеров уже появляется реализация Temporal - официальной замены Date в JavaScript

const dateTime = Temporal.Now.plainDateTimeISO();
console.log(dateTime); // e.g.: 2025-01-22T11:46:36.144

// 1851222399924 is our timestamp
const launch = Temporal.Instant.fromEpochMilliseconds(1851222399924);
const now = Temporal.Now.instant();
const duration = now.until(launch, { smallestUnit: "hour" });
console.log(`It will be ${duration.toLocaleString("en-US")} until the launch`);
// "It will be 31,600 hr until the launch" <- @js-temporal/polyfill
// "It will be PT31600H until the launch" <- Firefox Nightly

Уже доступен полифилл - @js-temporal/polyfill

#js #date

Обычно для группировки массива по какому-то ключу используют reduce

Однако уже доступны Object.groupBy и Map.groupBy, которые позволяют упростить эту процедуру

const users = [
  { id: 1, name: "Alex", role: "admin" },
  { id: 2, name: "Anna", role: "user" },
];

const grouped = Object.groupBy(users, ({ role }) => role);

// Результат:
// { admin: [{...}], user: [{...}] }

#js

В JS чтобы выйти из вложенных циклов можно использовать метки

outerLoop: for (let i = 0; i < 5; i++) {
    let j = 0;
    while (true) {
        if (j === 2) {
            break outerLoop; // Выходит из внешнего цикла
        }
        j++;
    }
}

И не забываем, что Array.prototype.sort() приводит к строкам. Нужен компаратор.

[10, 2, 1].sort(); // [1, 10, 2] (как строки!)  
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10] (правильно)  

#js #tip

Фронтенд-фреймворки показывают, как они умеют.
На екмаскрипте.

#js #video #offtop

Раньше я думал, что JavaScript нужно заменять полностью, но сейчас согласен с Мурычем - достаточно статической типизации примитивов.

Причем, он предлагал "вьюшную" модель - если Ref инициализирован строкой, то и дальше в нем только строки. Так же с переменными по примитивным типам в JS

Cтатическая типизация примитивных типов плюс ES классы решат 95%+ всех проблем без извращений TS

#ts #js #murych

Для синхронизации или передаче данных между разными вкладками можно использовать LocalStorage

Во Vue можно даже сделать реактивную обертку.

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

// Создаем канал
const bc = new BroadcastChannel("share_channel");

// Посылаем сообщение в канал
bc.postMessage("Сообщение какое-то");

// Ловим событие в канале
bc.onmessage = (event) => {
  console.log(event);
};

Также postMessage можно использовать для связи открытых окон ( login ) с родительским окном - window.opener.postMessage()

#js

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

#js #oop