artalog – Telegram
artalog
4.2K subscribers
533 photos
40 videos
39 files
897 links
Развернутые ответы на вопросы в чатах, мысли от рабочих процессов.
Вопросы - @artalar.
Download Telegram
Логичным вопросом после https://news.1rj.ru/str/xavescor_code/14 будет: а зачем вообще это делать, если всё работает? Нода прекрасно держит обратную совместимость, npm репозиторий иммутабельный. Весь код будет работать в будущем спокойно.

Оно-то так. Но увы, перестанет работать программист. Сейчас поясню:
- Пример первый. egov.kz Электронное правительство Республики Казахстан. Angular@1. Это сверхактивно развивающийся проект, аудитория которого больше 5М пользователей. Но первый ангуляр приводит к тому, что внутреннюю кодовую базу попросту больно поддерживать. Нет ни библиотек, ни программистов на рынке, ни развития тулинга. Я общаюсь с ребятами оттуда и они чуток на стену от боли лезут.
- Пример второй. nextjs.org. Основной фреймворк для реакта. Это активно развивающийся проект с двумя неприятными нюансами. Первый - они спокойно ломают обратную совместимость в патчах(не минорах и тем более не мажорах). Но это фигня, кмк, так как с этим жить можно. Ну, почитаешь issues и найдёшь решение. Страшно другое. На сайте есть документация ТОЛЬКО для последней версии. Отстал на пару мажорных версий? Ну, удачи тебе. Будет весело.
- Пример третий. nestjs.com По сравнению с next - тут чуть получше, есть версионирование доки. Но есть 1 нюанс: перейдите по ссылке на migration guide https://github.com/nestjs/nest/releases/tag/v9.0.0. И тут начнётся веселуха, потому что вы попадёте на migration guide с v9 на v10, а не v8->v9. Справедливости ради, он всё же существует. Но они сломали ссылки.

Все эти 3 примера - это проекты с огроменным финансированием, которые не умеют в примитивные вещи. А если у гигантов не получается соблюдать базовый DX, то что говорить о мелюзге? Там вообще всё плохо будет. По этой причине лучше пытаться держать актуальным проект сейчас, а не пытаться через 5-10 лет обновить это устаревшее поделие. Возможно, его будет проще переписать с нуля.
👍174🔥1
Релиз новой среды установки+выполнения+тестирования JavaScript!

https://www.youtube.com/watch?v=BsnCpESUEqM

Хайлайты:

- hello world запускается за 4мс
- отлично работает с cjs и mjs
- бесшовный импорт раст файлов
- пишит / читает диск в несколько раз быстрее ноды
- может держать 4x больше RPC чем нода
- 6x больше WS messages чем нода
- большая встроенная стандартная библиотека для фенси DX
- совместимость с большинством node апи, можете попробовать запустить на нем next/nuxt/nest и т.п.
- установка зависимостей в десятки и сотни раз быстрее всех аналогов
- встроенные методы для тестов слизанные с jest
- тесты запускаются и десятки и сотни раз быстрее vitest / jest

Добавлю от себя. Сам JS в Bun работает быстрее чем в Node по моим скромным замерам. Ну SSR по их тестам сильно быстрее. Чекайте https://bun.sh/
🔥17🤮5👍21😐1
Вот вам самый краткий пример что бы продемонстрировать каким местом Bun повернут к разработчику и как заботиться о его DX. Он реактовские компоненты в консоль выводит в виде JSX!
https://bun.sh/guides/ecosystem/react
10
Сегодня в 15:00 по мск будем сравнивать @tanstack/react-query и @reatom/async.

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

Ссылки на стримы: https://news.1rj.ru/str/siberiacancode/651 (запись будет)

Напомню, этот стрим ляжет в основу моего доклада на холи: https://holyjs.ru/talks/eec3a942bf6846b5ab1b9c68b2b69f8a
🤡15🔥141
Forwarded from melikhov.dev
Почему Bun быстрее Node.js?

Уважаемый Мирипируни интересуется, почему я ничего не пишу про Bun. Ответ простой — я его ещё не попробовал. Зато на днях мнением поделился не менее уважаемый Маттео Коллина: My thoughts on Bun Давайте дам TL;DR

Несмотря на то, что Джарред Самнер и команда Bun делают потрясающие вещи, Маттео расстроен их заявлениями о совместимости с Node.js, которые не являются правдой в данный момент и приводят к наплыву пользователей в репозитории мейнтейнеров node.js-проектов с жалобами на неработоспособность в Bun.

Несколько причин, почему Bun так хорош такой быстрый:

- У Node.js маленькая команда и мало денег. В этих условиях они больше направлены на улучшение API и закрытие дырок в безопасности. Работы по увеличению производительности не приносят денег, более того, облачные провайдеры (главные источники дохода) не заинтерисованы в том, чтобы производительность росла, так как это означает уменьшение их доходов.

- Bun не парится над обратной совместимостью. Прежде всего скорость, а остальное починим, накостылим, запретим. Именно так и делаются по-настоящему быстрые вещи. Node.js продолжает поддерживать своих пользователей.

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

- Bun сейчас не совместим с Pino и Fastify. Команда Bun активно работает над добавлением отсутствующих API и выправлением поведения

- bun install быстрый, но его скорость во многом обеспечена поведением --prefer-offline по-умолчанию. Разница с pnpm --prefer-offline уже совсем не драматическая. Однако то, как добились этой небольшой разницы заслуживает уважения и повторения

Чем же ответит Node.js?

Несколько лет Node.js слишком мало инвестировали в перформанс (да, Маттео, мы заметили :). В прошлом году была собрана команда скорости и теперь это стратегическая инициатива (спасибо, bun!). Node.js будет двигаться вперёд без ломающих изменений. Что уже сделано — можно почитать тут.

Если вы хотите сделать Node.js быстрее, то приходите с пул-реквестами либо помогайте финансово.
🔥225
melikhov.dev
Почему Bun быстрее Node.js? Уважаемый Мирипируни интересуется, почему я ничего не пишу про Bun. Ответ простой — я его ещё не попробовал. Зато на днях мнением поделился не менее уважаемый Маттео Коллина: My thoughts on Bun Давайте дам TL;DR Несмотря на то…
Весь тви бурлит bun’ом и уже начали появляться мемчики.

Вот список интересностей которые я нарыл за последние пару дней:

- некоторый сырой код может выполнятся на bun до двух раз быстрее, скорее всего потому что он использует JSC, а нода V8

- установка зависимостей через bun на маке быстрее pnpm за счет использования нативного clonefile, который может быть быстрее симлинков, но НЕ экономит место на диске

- в самом медленном случае установки зависимостей bun совсем немного быстрее, а остальные случаи в абсолютных цифрах и так быстрые почти всегда

- у кого-то тесты на bun выполняются в 12 раз быстрее (60 -> 5 сек), просто подменой скрипта запуска

- bun.lockb нечитабелен

- история еще одной неудачной попытки миграции на bun

- пока что дебажить bun можно только через их вебсайт

- bun не следует спеке в резолвинге микротасок
👍6👎1
Куча сил ушло на этот апдейт. Оно же должно быть интегрировано с кешами, логированием и остатальной экосистемой. Должно не ломать, а расширять существующее апи. Ну, вроде, получилось :)

Потыкать тут.

Накидайте, пожалуйста, примеров асинхронных фетчингов, каких-то сложных флоу на других либах - будет интересно переписать и посравнивать.
3👍2
Forwarded from artalar
Касательно последних веб-стандартов.

Мне больше всего CSS не нравится именно из-за отсутствия миксинов. Переиспользовать код через классы не удобно! Я сейчас говорю о продуктовой разработке, а не чистом html, который мы очень редко пишем

1) Чистые классы практически никогда не используются, есть css-modules, из-за которых у нас добавляется лишний импорт (компонентные стили и общие стили, типа center)

2) НЕ СЕМАНТИЧНО, я считаю, описывать именованные стили и их применение в HTML, который должен отвечать за контент. Центрируется или нет элемент должно быть описано в самом CSS, а в HTML эта информация - лишний мусор, там должен быть только индетефикатор элемента, а не набор классов - шорткатов стилей.

3) Продолжая предыдущий пункт, css проще и понятнее, когда неймспейсинг проще. Объявил класс и описывай в нем все что нужно. А бегать в html, запоминать какие классы на элементе, искать их потом в css файле - лишняя ментальная нагрузка.

Разве это не очевидно?)
👍13🤔5🤮4👎1😁1
JSON-viewer’ы

Совсем забыл рассказать как можно смотреть JSON в репле реатома. Самый продвинутый и крутой инспектор - discoveryjs, пример: https://news.1rj.ru/str/reatom_ru_news/222

Были сложности с тем что бы его настроить, но спасибо @rdvornov, со всем помог. Этот инспектор красиво и эффективно отображает древовидные данные и может показывать некоторую аналитику по ним! В репле реатома он открывается при клике на 🔭

Но для лучшего перфа, по умолчанию все логи рисуются в простом и легком @observablehq/inspector (3.95 kB gzip) - тоже рекомендую. Бтв, он не загружает все данные сразу в DOM, только при раскрытии. Но с темной темой у него все плохо (буду рад ПРу в репл реатома).

Подключение, вся логика и стили описаны тут: https://github.com/artalar/reatom/blob/v3/docs/src/components/Repl.astro
👍7
Forwarded from Константин
Побуду КО.

discoveryjs — это не просто плагинчик, а Frontend framework for rapid data (JSON) analysis, sharable serverless reports and dashboards, на базе которого и сделано расширение.

Кроме этого конечно советую посмотреть доклад Ромы — Маленький Data Science для большого фронтенда
Я: хочу написать микролибу на шайни технологиях.

Шайни технологии:
🤷18😁2
Фух, готово https://github.com/artalar/stylerun

Потыкать: https://stackblitz.com/edit/stylerun

Кароч, ето максимально простой, легкий, быстрый css-in-ts, который не имеет никакой лишней сложности. Никаких парсингов, трансформаций, компиляций. Что написал - то в head>style и пойдет, а вся динамика идет через цсс-переменные.

Зачем? Если нужно накидать что-то простое с минимальным оверхедом. Например, встраевымый виджет, который не будет тащить за собой CSS со всеми проблемами бандлинга / загрузки / нейспейсинга и т.п.

Stylerun - облегченный styled-components (бандл в 20 раз меньше).

НЕ ПРИВЯЗАНО К РЕАКТУ!
🔥10💅8🤡7🤔3👍2
Реализация отписки в новом reatom/jsx получилось довольно интересной.

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

Я, пока что, решил не делать отдельный механизм рендеринга списка и условных выражений, но нашел простой способ следить за мертвыми элементами. Уточню, пока что reatom/jsx на каждый ререндер (которые впринципе редкость и случаются только при использовании условий в шаблонах) пересоздает элементы. Т.е. заного строит изменившийся DOM через document.createElement. Это не максимально эффективно, но, на самом деле, достаточно быстро для большинства случаев.

Так вот, про отписки! Рендеринг не оптимальный, но он возможен и при создании новых элементов, старые выбрасываются (`parentElement.replaceChild`). Как же трекать то что удалилось и отписывать от них прибинденные атомы? Ща распишу.

- при рендеринге условную реактивную логику можно описать только сделав атом, который возвращает элемент
- рендерер проверяет стейты переданных атомов и если возвращается элемент - он кладется в WeakMap<HTMLElement, Array<Unsubscribe>>
- когда какой-то атом биндится в дом, мы идем по parentElement и ищем список отписок в викмапе, если находим - значит мы в элементе условного рендера, добавляемся в список отписок
- а теперь, главный лайвхак - new MutationObserver(cb).observe(rootElement, { childList: true, subtree: true, }), где cb ищет mutation.removedNodes в викмапе и, если нашел, вызывает отписки.

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

P.S. а вы знали про Node API: isConnected?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Шо это я не понял
https://news.1rj.ru/str/artalog?boost

Ааа, надо обновить клиент телеги.
🗿11👍21🤡1
Объясните старперу, что я могу через эти ваши сторисы интересного вам показать / рассказать?
🤡1
Вы можете очень помочь этому каналу, мне и разработке реатома подписавшись на https://boosty.to/artalar
(принимаются карты любых стран)
4👍2💩1