Столько обещаний, но..
Линейная бизнес-логика превращается в лапшу.
Много бойлерплейта с ручным приводом.
Деградация производительности по мере роста приложения.
Нестабильная работа при возникновении исключения.
Легко допустить конфликт инвариантов, который приводит к дребезгу, неконсистентности или даже зависанию.
Классные метрики, но..
Тормоза и глюки в дев-режиме.
Сетевые задержки при любой навигации.
Падение при лагающей/потерянной сети.
? 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 тэги.
