Топ перлов:
В JS нет переменных и присваивания, но есть потоки
Все числа выделяются в куче
TS не годится для разработки
let и const - главные перфоманс ботлнеки
Упоминаемые материалы:
Мета-сслыки:
Форум Гипер Дев: https://t.me/h_y_o_o
$mol_news: https://t.me/mol_news
Донаты: http://boosty.to/hyoo
Продолжается перевод книги Vue.js 3 Design Patterns and Best Practices
На данный момент переведено 6 глав:
Глава 1, Фреймворк Vue 3
Глава 2, Принципы и шаблоны проектирования программного обеспечения
Глава 3, Создание рабочего проекта
Глава 4, Композиция пользовательского интерфейса с помощью компонентов
Глава 5, Одностраничные приложения
Глава 6, Прогрессивные веб-приложения
?️️️️️️ Array.prototype.sort
Как будет отсортирован следующий массив [-1, 0, 1, 2, -1, -4, -2, -3, 3, 0, 4].sort()?
? Предыстория
На выходных я решал литкод, и в задаче 3sum было необходимо отсортировать массив по возрастанию, перед тем как перейти к основной реализации алгоритма.
Я написал решение, подебажил на бумаге — всё работает, отправляю код на проверку — не работает ?♂️. Перепроверяю всё глазами — ну должно же работать!
Сдаюсь и начинаю дебажить в VS Code и вижу, что сортировка массива работает не так как я ожидал.
ℹ️ Объяснение
Если перейти на MDN и прочитать документацию Array.prototype.sort(), то станет всё понятно.
Метод sort() в JavaScript преобразует элементы в строки и затем сравнивает их последовательности значений кодов UTF-16. Это означает, что при сортировке числа рассматриваются как строки.
Таким образом, числа в данном случае сортируются на основе их строкового представления. Например, '-10' будет идти перед '-2', потому что строка '10' идет перед строкой '2' в лексикографическом порядке.
Чтобы выполнить числовую сортировку массива, нужно предоставить функцию сравнения методу sort(), как показано здесь:
[-1, 0, 1, 2, -1, -4, -2, -3, 3, 0, 4].sort((a, b) => a - b);Это даст вам [-4, -3, -2, -1, -1, 0, 0, 1, 2, 3, 4] — числовую сортировку.
⚛️ Атомарные обновления в Zustand
Я уже упоминал атомарные обновления, когда говорил о проблемах контекста реакта.
Я называю обновления атомарными, если компонент обновляется только тогда, когда изменяются данные, которые он использует. У контекста реакта с этим большие проблемы, но и при использовании Zustand можно выстрелить себе в ногу.
Zustand сравнивает по ссылке предыдущее и текущее значение, возвращаемое из useStore(), и если объект изменился — происходит ре-рендер.
❌ В следующем примере у нас всегда будет возвращаться новый объект, и ре-рендер произойдёт даже если изменился только age, а lastName и firstName не изменились
const {firstName, lastName} = useStore(({firstName, lastName}) => ({firstName, lastName}));
Аналогичное поведение будет и в следующем случае
const {firstName, lastName} = useStore();
✅ Есть три варианта использования значений из стейта, которые поддерживают атомарные обновления:
1️⃣ Одиночные селекторы
const firstName = useStore((state) => state.firstName)
const lastName = useStore((state) => state.lastName)
2️⃣ Селектор, который возвращает объект + shallow - функция сравнения предыдущего и нового стейтов
const {firstName, lastName} = useStore(({firstName, lastName}) => ({
firstName,
lastName
}), shallow);
3️⃣ Автосгенерированных селекторы
const firstName = useStore.use.firstName();
const lastName = useStore.use.lastName();
Накидал небольшую демку в Codesandbox
#frontend #react #statemanagement #zustand
?️️️️️️ Каррирование и частичное применение
Каррирование и частичное применение — две концепции из функционального программирования, которые очень часто путают из-за их схожести (а я пишу этот пост, чтобы наконец-то запомнить).
И частичное применение, и каррирование, реализуются как функции, принимающие в качестве параметра другую функцию.
Частичное применение — функция partialApply, принимающая первым параметром функцию — fn, а остальные параметры — часть параметров функции fn. Функция partialApply возвращает функцию, которая в качестве параметров принимает недостающие аргументы функции fn.
Каррирование — функция curry, которая принимает единственный параметр — функцию fn, и возвращает каррированную функцию fn. Можно сказать, что каррированная функция fn — функция аккумулятор, которая будет накапливать переданные аргументы до тех пор, пока не будет передано достаточно параметров для вызова исходной функции. Параметры можно передавать в любом количестве.
Подробнее
⬇️ Проваливание промисов
Когда вы передаете в then() что-то отличное от функции (например, промис), это интерпретируется как then(null) и в следующий по цепочке промис «проваливается» результат предыдущего.
Подробнее о промисах в статье "У нас проблемы с промисами".
Amazon опубликовала компилятор jsii 1.90, представляющий собой модификацию компилятора TypeScript, позволяющую извлечь из компилируемых модулей информацию об API и сгенерировать универсальное представление данного API для обращения к JavaScript-классам из приложений на различных языках программирования. Код проекта написан на TypeScript и распространяется под лицензией Apache 2.0.
Jsii даёт возможность создавать на языке TypeScript библиотеки классов, которые могут использоваться в проектах на языках C#, Go, Java и Python, благодаря трансляции в родные для этих языков модули, предоставляющие тот же самый API. Инструментарий используется в AWS Cloud Development Kit для поставки библиотек для разных языков программирования, формируемых из одной кодовой базы. В новой версии jsii реализовано кэширование списка классов для каждой сборки и документировано, как можно превратить обязательное свойство в необязательное.
Источник: OpenNET.
Препарируем Nano Stores и находим родовые травмы
https://youtu.be/Q2rzPc7EEa8
Крайне малые размеры, но..
Лишние вычисления и сайд-эффекты
Медленная работа: и архитектурно, и по реализации
Только статические зависимости с ручным приводом
Нестабильность поведения
Автор без этических ограничений
Поблагодарить, Обсудить, Бенчмарки, $mol_wire.
Централизованный сериализабельный тайм-тревел, но..
Много бойлерплейта с кишками наружу
Врут про undo/redo
Утечки памяти by design
Тормоза на больших проектах
Сложно переиспользовать свой код
Требует кучи тяжёлых костылей
Столько обещаний, но..
Линейная бизнес-логика превращается в лапшу.
Много бойлерплейта с ручным приводом.
Деградация производительности по мере роста приложения.
Нестабильная работа при возникновении исключения.
Легко допустить конфликт инвариантов, который приводит к дребезгу, неконсистентности или даже зависанию.
Классные метрики, но..
Тормоза и глюки в дев-режиме.
Сетевые задержки при любой навигации.
Падение при лагающей/потерянной сети.
? Why I’ve stopped exporting defaults from my JavaScript modules
Сегодня на повестке статья из далёкого и спокойного 2019 “Why I've stopped exporting defaults from my JavaScript modules”.
В статье автор предлагает отказаться от экспортов по-умолчанию в JavaScript. Я бы выделил 2 причины, которые кажутся для меня наиболее важными:
1️⃣ Дефолтные экспорты не указывают имя функции или класса, которую вы импортируете, что может (и будет) вызывать неконсистентность в именовании.
2️⃣ Когнитивная нагрузка замедляет разработку. Если вы используете дефолтные экспорты, вам придётся самостоятельно, каждый раз указывать название импорта. В случае с именованными экспортами ваша IDE наверняка подскажет вам имя, как только вы начнёте печатать и вам останется лишь нажать Enter.
Если вы всегда используете именованные экспорты, вам больше не нужно выбирать между именованными и дефолтными экспортами. Например, если изначально в файле вы экспортировали только одну функцию и теперь вам нужно экспортировать ещё одну, вам не придётся заменить везде неименованные импорты на именованные.
? ESlint
Чтобы убедиться, что все разработчики используют именованные экспорты, вы можете использовать правило import/no-default-export
Когда я добавлял это правило в наш проект, я наткнулся на GitLab issue, где команда Гитлаба планировали перейти с дефолтных экспортов на именованные. Они также ссылаются на эту статью.
? What developers need to know about Chrome's Memory and Energy Saver modes - Chrome Developers
В конце прошлого года в Google Chrome появились 2 новых режима
Memory Saver (Экономия памяти)
Energy Saver (Энергосбережение)
Они позволяют более гибко управлять использованием системных ресурсов браузером.
Memory Saver: Этот режим автоматически освобождает неиспользуемые фоновые вкладки, чтобы освободить память для активных вкладок и других запущенных приложений. Но для сложных сайтов с интерактивностью это может привести к проблемам восстановления состояния страницы.
Energy Saver: Режим Energy Saver позволяет браузеру снизить частоту обновления экрана для экономии заряда батареи. Обычно, для большинства сайтов, не требуется внесение изменений, но если вы используете JavaScript-анимации, имейте в виду, что они могут замедлиться.
? Важно, чтобы веб-разработчики учитывали эти новые режимы и обеспечивали безупречный опыт для пользователей. Рекомендуется сохранять состояние пользователей при изменении их активности и обрабатывать перезагрузки страницы после удаления вкладок.
В данный момент нет никаких событий, которые будут запущены перед выгрузкой вкладки. Рекомендуются следующие способы сохранения состояния:
- Периодически, когда состояние изменяется
- Когда вы переходите на другую вкладку, по событию visibilitychange
? Не забудьте протестировать свой сайт в этих режимах, чтобы убедиться, что все работает как задумано.
? Server-Driven UI
Сегодня посоветую доклад с HolyJS — Виталий Полещук, Стёпа Михайлюк — Server-driven UI в вебе. Не пиши, а описывай свой фронтeнд
Парни в докладе рассказывают, как можно не заниматься формошлёпством, точнее как его упростить, чтобы создавать новые формы можно было проще и быстрее.
Backend Driven UI представляет собой подход, в котором бэкенд говорит клиенту, как должен выглядеть интерфейс. В случае с формами, например, может передаваться массив элементов, где у каждого элемента есть тип:
- header
- select
- checkbox
- …
клиент проходится по этому массиву и рендерит соответствующий UI компонент. Таким образом реализация компонентов находится на фронте, а их расположение и взаимодействие на бэке.
? Основные преимущества Server Driven UI
- Возможность делегировать создание форм бэкендерам или аналитикам
- Мгновенные релизы, достаточно обновить данные на сервере для изменения формы сразу на всех устройствах
Ещё по теме:
- Яндекс выпускает DivKit — фреймворк для server-driven UI с открытым кодом
🧮 Задача на знание замыканий в JavaScript
Если вам приходится собеседовать начинающих фронтендеров, то следующая простая задача поможет вам проверить, понимает ли разработчик принцип работы с замыканиями, и может ли он применять их на деле.
/**
* Нужно написать функцию, которая принимает число N и возвращает функцию,
* вызов которой первые N раз возвращает 'yes', а потом – 'no'.
*/
function canGetCount(n) {
// code here
}
const getOne = canGetCount(2);
getOne() === 'yes'
getOne() === 'yes'
getOne() === 'no'
Обнаруженные проблемы:
Не перехваченное исключение ломает всё приложение..
Отслеживание изменений ломается на мутациях, отличных от присвоения.
При компиляции код компонента раздувается на порядок.
Две модели реактивности, работающие по разным принципам, суммирующие недостатки друг друга.
Обнаруженные проблемы:
Система реактивности капитально ломается при исключениях
ErrorBoundary перехватывают не все исключения
Memo вычисляются когда они никому не нужны
Без обмазывания batch-ами, эффекты (включая полную актуализацию DOM) вызываются для грязного состояния
Финал стрима не записался, да.
У меня есть экспертиза и уникальный материал по следующим темам:
Реактивное Программирование (FRP, ORP и тд)
Бесконфликтные Алгоритмы (OT, CRDT и тд)
Ни на западе, ни у нас аналогов нет. Тем более с таким глубоким погружением. Думаю вот, может сделать курсы по этим темам для продвинутых. Но не знаю на сколько это востребовано. Кому интересно - отпишитесь, пожалуйста, в этой форме.
Тут я расписал подробнее, как я их вижу. По первому большая часть материалов уже есть. По второму пока только зачатки.
Если вы используете бесплатную IntelliJ IDEA Community Edition, то из поддержки JS и CSS там только весьма скудная syntax highlighting only подсветка синтаксиса, но есть простой способ её улучшить.
В этом нам поможет плагин TextMate Bundles, который уже встроен в современных версиях IDEA. В этом плагине уже встроены бандлы для JavaScript и CSS, причём, с достаточно неплохой подсветкой синтаксиса. Загвоздка в том, что эта подсветка не работает из коробки, т.к. её перекрывает та самая syntax highlighting only подсветка.
Чтобы всё заработало, идём в Settings > Editor > File Types и удаляем File name patterns для CSS (syntax highlighting only) и JavaScript (syntax highlighting only). Тоже самое можно проделать и для SQL (syntax highlighting only).
Пример было/стало для JavaScript:
К сожалению, это не даёт подсветку синтаксиса для CSS и JavaScript встроенных в соответствующие HTML тэги.