Development

Development

1854 bookmarks
Custom sorting
Advanced Fastify: Hooks, Middleware, and Decorators
Advanced Fastify: Hooks, Middleware, and Decorators
Статья про использование хуков, мидлварок и декораторов в fastify. Ниже приведу краткий пересказ. Хуки используются, чтоб добавить кастомную логиу перед или после какого-то действия. Например, перед отправкой ответа можно добавлять служебные заголовки Например ``` fastify.addHook("onSend", (request, reply, payload, done) = { reply.headers({ Server: "fastify", }); done(); }); ``` Хуки можно навесить как глобальные, так и на отдельные роуты. Хуки могут быть связаны как с запросами или ответами, так и с циклом работы приложения. Мидлварки позволяет добавить в цепь обработки запроса кастомную логику. Например, популярные использования для мидлварок - парсинг cookie или body у запроса. Fastify поддерживает expressjs-style мидлварок с помощью плагинов, но лучше использовать нативные fastify middlewares. Например, подключение `cookie-parser` позволяет удобно работать с куками в обработчиках запросов. ``` import Fastify from "fastify"; import middie from "@fastify/middie"; import cookieParser from "cookie-parser"; const fastify = Fastify({ logger: true, }); await fastify.register(middie); fastify.use(cookieParser()); ``` Также в fastify есть декораторы. По названию кажется что это еще 1 API для добавления логики к обработчикам запросов, но это не так. Декораторы позволяют добавлять новые свойства или функции к объекту fastify приложения, запроса или ответа. По сути, они позволяют добавить кастомное API во встроенные в fastify объекты. Например, можно добавить метод `isAuth` прямо в request, что звучит достаточно удобно. Также fastify имеет встроенную поддержку валидации данных через JSON-схему ``` fastify.post( "/users", { schema: { body: bodySchema, }, }, async (request, reply) = { /* обработка запроса */ } ); ``` Если запрос не проходит валидацию, fastify отвечает 400 кодом с описанием, какое поле не прошло валидацию. Если вам надо переехать на fastify с expressjs, то можно использовать плагин `@fastify/express`, который облегчает использование `expressjs` кода в fastify окружении.
·blog.appsignal.com·
Advanced Fastify: Hooks, Middleware, and Decorators
JavaScript Macros in Bun
JavaScript Macros in Bun
Bun вместе со своим бандлером представил свои макросы. Макросы - это JS-функции, которые выполняются в момент сборки приложения, а не во время исполнения приложения. Bun исполняет функцию-макрос и инлайнит её результат в вызываемом коде. При этом поддерживаются как синхронные, так и асинхронные функции Примеры применения: - Инлайн env переменных в код (например git commit) - Загрузка сетевых ресурсов (fetch чего-нибудь) - Предкомпиляция хелперов На самом деле, очень интересный функционал Пример кода ``` import { getGitCommitHash } from './getGitCommitHash.ts' with { type: 'macro' }; console.log(`The current Git commit hash is ${getGitCommitHash()}`); ```
·bun.sh·
JavaScript Macros in Bun
Sharing WebSocket Connections between Browser Tabs and Windows
Sharing WebSocket Connections between Browser Tabs and Windows
Статья рассказывает, как с помощью shared workers реализовать совместное использование websocket соединения несколькими вкладками. Shared worker это примерно как web worker, но с возможностью быть интегрированным несколькими вкладками. Такой worker не зависит от времени жизни определенной вкладки, т.е. если вкладка, которая породила такой worker, закроется - это не приведет к завершению worker'а. Shared worker завершается сам, когда не остается вкладок, которые с ним работают. В shared worker реализуется работа с websocket соединением, worker может обрабатывать сообщения от websocket и отправлять их во все подключенные вкладки
·brightinventions.pl·
Sharing WebSocket Connections between Browser Tabs and Windows
useHooks
useHooks
Коллекция полезных хуков для React, совместимых с серверными компонентами, от команды ui.dev
·usehooks.com·
useHooks
You Might Not Need React Query
You Might Not Need React Query
Возможно вам не нужен React Query. Статья является ответом на горячие споры в интернете о том, что серверный компоненты react делают React Query ненужным. Не смотря на то, что React предоставляет удобный способ делать асинхронную загрузку данных прямо в серверном компоненте, React все еще остается очень гибким решением, которое не форсит какой-то один способ как делать что-то "правильно". Для определенных приложений (например, которые сразу пишутся по определенной архитектуре, в которой серверные компоненты хорошо встроены), React Query действительно может быть не нужен. Однако для многих приложений придется использовать гибридный подход (и серверный компоненты и React Query) из-за ограничений архитектуры, плавных миграций или каких-то плюшек React Query. Либо же останутся проекты, которые не будут использовать серверные компоненты.
·tkdodo.eu·
You Might Not Need React Query
300ms Faster: Reducing Wikipedia's Total Blocking Time
300ms Faster: Reducing Wikipedia's Total Blocking Time
Статья про то, как команда wikipedia обнаружила, что их метрика Total Blocking Time на некоторых страницах достигает 600мс, что выше рекомендованной на 400мс и как они это исправляли. Что такое Total Blocking Time. Google Chrome любые таски, которые длятся дольше 50мс, помечает как long task. Сумма превышения тасками черты long task между первой отрисовкой и тем, как страница стала интерактивной (между FCP и TTI) и является Total Blocking Time. Например, страница отрисовалась, затем JS код выполняет 3 таски - 80мс, 30мс и 100мс. И затем страница становится интерактивной. В этом случае TBT будет = (80-50) + (100-50) = 80мс - столько времени таски превышали лимит в 50мс. Для некоторых страниц википедии TBT составлял 600мс. Просто безумно большое число. Эта проблема была решена в 2 этапа. 1. Было найдено, что 456мс забирает функция `_enable`. Wikipedia использует jquery, и эта функция находила все ссылки и накидывала им кастомный обработчик. На некоторых страницах находятся тысячи ссылок, что делает запуск этой функции долгой задачей. Хуже всего, что этот код не необходим, т.к. буквально за ним идет подписка на `hashchange`, который делает ровно то же самое, что и навешиваемый обработчик. Поэтому этот код был беспощадно удален, что дало улучшение в 200мс. 2. Дальше при исследовании было найдено, что функция `initMediaViewer` занимает 114мс. Там примерно та же проблема, что и в пункте 1. А конкретно - навешивается куча обработчиков слишком рано. Вместо этого используется возможность делегерирования событий. Обработчик накидывается только на контейнер с картинками. Обработчик по `event.target` определяет, какую конкретно картинку необходимо подгрузить В целом wikipedia избавились от 300мс в метрике TBT. Это все еще много (больше рекомендаций), но тут важно, что причина катастрофически низкой производительности как правило в том, что никто просто ей не занимается. Оптимизации в статье самые базовые и легко могли быть сделаны раньше.
·nray.dev·
300ms Faster: Reducing Wikipedia's Total Blocking Time
Build Your First JavaScript ChatGPT Plugin
Build Your First JavaScript ChatGPT Plugin
Туториал по созданию своего плагина для ChatGPT на JS. В целом создается простой HTTP сервер, который умеет отдавать корректную метаинформацию для интеграции с ChatGPT.
·sitepoint.com·
Build Your First JavaScript ChatGPT Plugin
State of Node.js Performance 2023
State of Node.js Performance 2023
Анализ производительности разных версий nodejs (16, 18 и кое-где 20). Анализ проводился в трех категориях: - Скорость работы внутрянки node.js - Запуск опен-сорс бенчмарка для node.js - Скорость работы сервера (без логики) В целом результаты следующие: - Node.js стал быстрее в большинстве кейсов. Где-то на чуть-чуть (5-10%), а где то на 400-500% (тесты на скорость доступа к переменной) - Кое где Node.js стал медленнее. Например, чтение файла с utf-8 кодировкой намного медленнее чем с ascii кодировкой. Например, заметен регресс производительности в 18 ноде в работе с потоками и буферами. В 20 ноде частично пофиксено Замеры производительности всегда синтетические. Даже если все графики показывают большое увеличение производительности, на реальных приложениях это скажется не так сильно (не стоит ожидать ускорения в 50-100%). Скорее стоит ожидать, что сама платформа становится все более производительной. Теперь при обнаружении проблем производительности намного меньше шанс, что проблема внутри node.js, а не в вашем коде Рекомендую к прочтению тем, кто пишет на node.js. Возможно статья даст вам идеи, как ускорить ваше приложение.
·blog.rafaelgss.dev·
State of Node.js Performance 2023
DeviceScript
DeviceScript
Microsoft анонсировали DeviceScript - это тулинг для написания кода для IoT устройств на Typescript. Для devicescript есть расширение для vscode. Это позволяет писать код для IoT с удобным API и возможностью дебажить код на устройстве или симуляторе устройства. Сам код будет запускаться на отдельной легковесной виртуальной машине на устройстве.
·microsoft.github.io·
DeviceScript
Introducing Deopt Explorer - TypeScript
Introducing Deopt Explorer - TypeScript
Статья от команды Typescript, как они исправляли код, который деоптимизировался в движке v8 (это который в nodejs и хроме). Если коротко, то движок категоризирует объекты в 3 категории: моноформные (всегда стабильная форма), полиморфные (несколько форм, например могут отличаться пара полей) и мегаморфные (структура объекта очень разнообразна). В зависимости от категории движок может применять различные оптимизации. Для мегаморфных структур оптимизаций нет - они медленные. Когда движок находит, что структура объекта на самом деле имеет большую вариацию и переводит объект в следующую категорию, это называется деоптимизация. Команда TS решила исправлять мегаморфные структуры т.к. они значительно могут влиять на перформанс TS компилятора. Для поиска подобных проблем, оказывается, есть инструменты и расширения для vscode - достаточно запустить скрипт и можно посмотреть прямо в vscode, какие переменные являются мегаморфными по структуре. Команда TS обнаружила, например, что Symbol является мегаморфным, хотя, по идее, так быть не должно. Благодаря инструментарию они нашли, что в Symbol есть необязательные поля, которые добавляются уже инстансированным объектам и это, как минимум, выводит их из разряда мономорфных (раньше была одна структура, затем её расширили). В конструктор Symbol были добавлены новые поля со значением undefined. Хотя, с точки зрения клиентского кода, разницы нет - разница есть для движка. Это оптимизация уменьшает вариативность Symbol, но повышает потребление памяти. В статье очень подробно описано как запускать такой профайлинг, как с ним работать и искать проблемы. Команда TS смогла ускорить компиляцию на 8-10% благодаря исправлению деоптимизаций движка. Рекомендую к прочтению и сохранению в закладки.
·devblogs.microsoft.com·
Introducing Deopt Explorer - TypeScript
The Bun Bundler
The Bun Bundler
Bun запустил в бету свой бандлер, который быстрее всех на рынке и в 220 раз быстрее webpack (по замерам создателя Bun) Цифрам, конечно, доверия нет, но Bun не перестает удивлять своими инструментами
·bun.sh·
The Bun Bundler
Technology Decision Making (and Boring Technology)
Technology Decision Making (and Boring Technology)
Хайлайты от слайдов доклада Choose Boring Technology (я, получается, делаю хайлайты на хайлайты). Как выбирать технологии 1. Стоимость долгосрочной поддержки является наибольшой стоимостью от всей стоимости проекта и перекрывает локальные преимущества с скорости доставки. Если же технология дает большой прорыв в скорости вашей работы - преимущества от технологии перекроют стоимость ее поддержки. 2. Люди очень субъективны при выборе базы данных. Почему-то разработчикам очень важно принести в проект новую базу данных. Какой-то иррациональный мотив заставляет разработчиков вместо известных им баз данных, в которых они уже профи, выбирать хайповые решения, по которым у них нет компетенций. Это следствие отсутствие процесса принятия решений. 3. Наша цель - создавать и поддерживать системы для получения бизнес-результата. У нас нет цели поиграться с технологиями. В 2000 году Eloqua был создан на скучном стеке - Visual Basic, SQL Server, IIS. Также все инструменты деплоя и мониторинга были реализованы на этих технологиях. Спустя 8 лет стек не поменялся и команда из 9 человек поддерживала все железо, дата центры, инфраструктуру и базу данных с аптаймом в 99.998% (автор явно не говорит, но это типа малый размер команды для такого большого сервиса) Скучный технологический стек позволил создать эффективную систему. Но новые технологии постоянно появляются и они появляются не просто потому что кто-то решил переизобрести колесо. Поэтому необходимо внедрять процесс по внедрению новых технологий в технологический стек компании. Практики, которые помогают выстроить такой процесс: - Инженерная документация, описывающая важную, медленно меняющуюся информацию и процессы - Фреймворк для принятия решений помогает командам понять как правильно принять решения, учитывая потребности команды и организации - Внутренний Технологический Радар описывает инструменты и технологии и их использование в компании - Процесс Request for Comments (RFC) может быть применем для внедрения новых технологий - Architecture Decision Records (ADR) описывают решения
·code.likeagirl.io·
Technology Decision Making (and Boring Technology)
JS private class fields considered harmful
JS private class fields considered harmful
Статья от Лея Веру про то, почему не следует использовать приватные поля классов. Если коротко, то есть конфликт между приватными полями и `Proxy`. `Proxy` не можем иметь доступа к приватным полям, в том время как они могут быть запрошены при проксировании публичного геттера или метода. Это полностью ломает, например, реактивность во Vue3 (и, вероятно, в Mobx, immer и других решениях, построенных на Proxy). Поэтому Лея в своих проектах начала использовать не настоящие приватные поля, а приватные по семантике. Как это было в typescript (объявление поля private делало его недоступным только в типах, в рантайме можно было с ним работать) и как это делали десятилетиями до этого в разных проектах (например, а давайте будем помечать все приватные поля префиксом `_`).
·lea.verou.me·
JS private class fields considered harmful
What is Technical Debt?
What is Technical Debt?
"У нас слишком много технического долга, необходимо начать его править" - наверное, все сталкивались с похожей фразой в рамках разработки продукта. Технический долг накапливается и всегда встает вопрос, а как его выплачивать. Если техннического долга много - то это негативное влияет на разработку: разработка замедляется, снижается качество, дизмораль разработчиков. В рамках статьи обсуждается как следует работать с техническим долгом в проекте. Основная проблема, из которой следуют все другие проблемы: как правило в командах нет единого понимания что такое "технический долг", а академическое определение неподходит для команд. Автор дает прагматичное определение технического долга. Технический долг - негативный результат от намеренного или случайного неоптимального решения при создании ПО. Технический долг можно разбить на составляющие: негативное влияние, качество решения, время, ощущение самостоятельности команды. Технический долг должен давать какое-либо негативное влияние на разработку. Например, наше неоптимальное решение усложняет DX, из-за чего сложно вносить правки в эту систему. Если негативного влияния нет - то, следуя денежной метафоре, это не "долг", это "free money". Время также играет важную роль в определении технического долга. То что мы не считаем техническим долгом сейчас, может стать им спустя время. Самостоятельность команды также влияет на формирование технического долга. Если команда не может принимать решения о том, что делать а что нет, когда и как выплачивать технический долг, то, очевидно, он с большой вероятностью будет накалпиваться. Что следует сделать: - Вывести с командой единое определение технического долга - Классифицировать технический долг: безопасность, перформанс и тд - Если вы можете посчитать денежное влияние на бизнес - считайте. - Учите команду защищать работы по исправлению технического долга перед стейкхолдерами - Технический долг может быть результатов бизнесовых решений. В этом случае следует явно указывать на это при принятии такого решения. Сам я не люблю термин "технический долг" т.к. я задолжал только тогда, когда принял решение о неоптимальном решении. Все остальное - это не "долг". Да и денежная метафора слабо бьется с реальной разработкой. Я предпочитаю термин "техническое развитие".
·lauratacho.com·
What is Technical Debt?
Introducing storage on Vercel
Introducing storage on Vercel
Vercel запустила свои хранилища для проектов на своей платформе. Они доступны в бесплатном плане, поэтому, если раньше вы не знали где хранить состояние приложения при деплое на vercel, теперь для вас есть отличное решение в виде Vercel KV (key value storage, типа redis), Vercel Postgress и Vercel Blob (для хранения файлов)
·vercel.com·
Introducing storage on Vercel
Qwik Reaches v1.0
Qwik Reaches v1.0
Состоялся релиз Qwik 1.0. Для тех кто пропустил, что такое Qwik - это очередной UI-фреймворк, который использует немного другую модель работы приложения, а именно не отсылает в браузер тонну JS, а вместо этого умеет подгружать JS только когда он действительно нужен (покрайней мере я так запомнил основную фичу qwik)
·builder.io·
Qwik Reaches v1.0
The Super Mario Effect - Tricking Your Brain into Learning More | Mark Robe
The Super Mario Effect - Tricking Your Brain into Learning More | Mark Robe
Очерь короткий доклад, но с очень важным посылом про мотивацию и геймификацию. Марк (докладчик) сделал простой сайт, чтобы доказать, что программировать могут все. Суть в том, чтобы визуальными блоками составить алгоритм для машинки для прохождения трассы. Но кроме самой игры, это также эксперимент - у игры есть 2 разные версии, которые отличаются только одним нюансом. В одной версии игры, если алгоритм неправильный, игрок видит текст "упс, попробуй еще раз", а в другой видит "упс, тебе -5 очков, попробуй еще раз". Очки при этом ни на что не влияли и вообще нигде не использовались. В игру сыграли 50 тысяч человек и были найдены следующие закономерности: - Процент успешного прохождения игры выше у первой группы людей (у которых не отнимают баллы) - Количество попыток у первой группы больше в два с половиной раза Тут можно сделать много разных выводов, но автор делает следующий: неудачи - это возможность узнать что-то новое, что можно использовать в следующий раз и эффективная стратегия для достижения цели - не стремиться уменьшать количество неудач, а сфокусироваться на выполнении цели, обучаясь на неудачах. Это очень похоже на то, как в свое время Марк проходил игру Mario с друзьями. Они никогда не обсуждали неудачи, они на них не фокусировались. Они обсуждали кто куда дошел, а все неудачи - это простой процесс изучения игры. И вот так Марк выводит The Super Mario Effect - фокусируйся на принцессе, а не на ямах, чтобы выполнить задачу и изучить что-то
·youtube.com·
The Super Mario Effect - Tricking Your Brain into Learning More | Mark Robe
Practical Guide to not Block the Event Loop
Practical Guide to not Block the Event Loop
Гайд по неблокирующей работе с event loop. Event Loop можно нечаянно заблокировать каким-нибудь сложным вычислением, что приведет к деградации работы сервиса. Чтобы этого избежать можно использовать 2 решения. Первое решение: сделать ресурсоёмкий код асинхронным, т.е. чтобы он выполнялся не за один "тик" цикла событий, а сделать так чтобы выполнялся итерационно с постановкой задачи в цикл событий. Тогда ресурсоёмий код не будет блокировать цикл событий и движок сможет разобрать дргуие события Второе решение: вынести ресурсоёмкий код в worker. У worker'ов есть свои ограничения (недавно в канале была хорошая ссылка на этот счет), но зато есть один неоспоримый плюс - worker не блокирует цикл событий.
·bbss.dev·
Practical Guide to not Block the Event Loop
Scaling up the Prime Video audio/video monitoring service and reducing costs by 90%
Scaling up the Prime Video audio/video monitoring service and reducing costs by 90%
Amazon Prime Video мигрировали с лямбда-функций (возможно не совсем корректный термин) на монолит и уменьшили требования к ресурсам инфраструктуры на 90% В чем проблема: у Amazon Prime Video есть система мониторинга проблем на стримах. Она состоит из 3х частей: первая часть следит за стримами и отсылает кадры и аудио в S3 хранилищ, вторая часть (детектор) ищет аномалии в этих данных (фризы, потери данных и тд), а третяя часть оркестрирует все это. Эта архитектура была выбрана, потому что такое решение можно сделать быстро и оно легко масштабируется. Однако, такое решение слишком дорого обходится, поэтому команда приняла решение совместить код который извлекает данные из стрима и находит аномалии в рамках одного процесса - теперь данные передаются быстро (без заливки на S3) и стоимость инфраструктуры снизилась на 90% Еще 1 кейс в копилку кейсов "монолит проще чем распределенные системы". Хотя, на мой взгляд (я не архитектор и книжек с кабаном не читал) решение использовать S3, вместо того чтобы поставить близкую функциональность близко друг к другу, выглядит странно
·primevideotech.com·
Scaling up the Prime Video audio/video monitoring service and reducing costs by 90%
What's New in DevTools (Chrome 113) - Chrome Developers
What's New in DevTools (Chrome 113) - Chrome Developers
Обычно я не слежу за обновлениями браузеров, но в Chrome 113 появилась очень важная фича - можно редактировать заголовки ответов. Это, например, может быть полезно для добавления CORS в рамках разработки. Глядишь, еще пара релизов, и наконец-то будет удобный способ редактировать и тело и заголовки и ответа и запроса. Это было бы мега полезно в определенных кейсах.
·developer.chrome.com·
What's New in DevTools (Chrome 113) - Chrome Developers
TypeScript Decorators: A complete guide
TypeScript Decorators: A complete guide
Достаточно неплохой гайд по декораторам в Typescript. Рассказывается, что такое декораторы, как их описывать и какие основные паттерны использования есть
·deadsimplechat.com·
TypeScript Decorators: A complete guide
partykit: Everything's better with friends.
partykit: Everything's better with friends.
Partykit - инструментарий для разработки приложений для совместного взаимодействия в реальном времени. Как обещает описание, с этой либой легко построить свое приложение с фичей коллаборации, или добавить эту фичу в существующее приложение.
·github.com·
partykit: Everything's better with friends.
Using ChatGPT as a technical writing assistant
Using ChatGPT as a technical writing assistant
Статья в блоге Мартина Фаулера про использование ChatGPT для написания технических текстов. Автор испытывает возможности ChatGPT в нескольких задачах: описание технологии в TechRadar от ThoughtWorks, адаптация текста для менее технически подготовленного читателя и написание статьи из коротких заметок. В целом, выводы следующие. Плюсы: - ChatGPT сохраняет много времени - Добавляет свой контент и секции, которые полезно перенести в готовый материал - Может добавить новые уточнения в текст за счет своих "знаний" Минусы: - Неаккуратность и поверхностность в некоторых ответах - Слишком оптимистичные ответы. Вероятно, влияет то, что нейронка обучалась, в том числе на маркетинговых текстах - Ограничения контекста. ChatGPT забывает начало диалога - Сложность ухода с локального максимума. Т.е. если ChatGPT кажется, что текущий ответ просто великолепен, то будет сложно увести его в другую сторону Как работать с ChatGPT для достижения лучших результатов: - Давайте контекст на вход. Чем лучше описан контекст, тем лучше нейронка сможет ответить - Работайте итеративно - Фокусируйтесь на малом количестве контента Как повысить качество материала: - Критически смотрите на то, что выдает нейронка. - Найдите упущенные моменты - Не расчитывайте, что ChatGPT все сделает за вас. Потратьте сами достаточно времени. - Берите ответственность за финальный результат. ChatGPT всего лишь вспомогательный инструмент, а результат - он ваш, собственный. И вы несете за него ответственность (его качество и проблемы в том числе)
·martinfowler.com·
Using ChatGPT as a technical writing assistant
Release v10.0.0 · immerjs/immer
Release v10.0.0 · immerjs/immer
Вышла 10 версия immer. Функционально ничего нового, но интересны ломающие изменения. - Отказ от UMD - Отказ от старых браузеров (теперь требуется поддержка Proxy, Reflect, Symbol, Map, Set) - Перестали поддерживать геттеры и сеттеры на объектах. Кейс редкий (непопулярный в использовании), а из-за его обработки код работает на 33% медленее - Отказ от default экспорта - Поддержка ESM - иммер может быть напрямую импортирован в браузер Как следствие, bundle size уменьшился с 16кб до 11кб. В целом наблюдается тенденция постепенного отказа от поддержки "старых" технологий и перехода на новые.
·github.com·
Release v10.0.0 · immerjs/immer
Exploring The Potential Of Web Workers For Multithreading On The Web — Smashing Magazine
Exploring The Potential Of Web Workers For Multithreading On The Web — Smashing Magazine
Статья в блоге Smashing Magazine про Web Workers. Эта статья - хороший туториал для понимания технологии. Описано что это, как начать использовать, основные паттерны и подводные камни и как их обойти. В статье рассказывается, что веб воркеры нужны чтобы выносить операции, не требующие доступы к UI, в отдельный тред. Это позволяет улучшить в целом перформанс приложения, т.к. основной тред, отвечающий за UI, может быть сфокусирован на UI. Практически же веб воркеры применяют для: - Вынос сложных расчетов - Обрабокта сетевых запросов - Параллельная обработка данных Но также у вебворкеров есть и определенные ограничения: - Коммуникация через postMesage может замедлить приложение - Тяжело дебажить - Нет доступа к некоторым DOM-апи - Сложность кода возрастает (непрямое перекидывание данными всегда сложнее чем простой вызов функции) Основные паттерны для оптимизаций: - Батчинг событий. Если postMessage не такой уж быстрый, но логично собирать пачку сообщеий и отправлять их одним postMessage, вместо вызова нескольких - Следует избегать синхронных методов в вебворках и уводить обработку данных в отдельный тик ивент лупа. - Быть аккуратным с потреблением памяти. Видимо есть какие-то особенности работы с памятью в веб-воркере т.к. в статье предлагается не использовать цикл for, а использовать вместо него forEach, что оптимизирует использование памяти. Если честно, не понимаю как, но видимо есть какие-то нюансы доступа к переданным данным из мейн треда в веб-воркере.
·smashingmagazine.com·
Exploring The Potential Of Web Workers For Multithreading On The Web — Smashing Magazine
On Endings: Why & How We Retired Elm at Culture Amp
On Endings: Why & How We Retired Elm at Culture Amp
Компания Culture Amp в своё время решила разрабатывать свой frontend на Elm. Если вы не знаете, что такое Elm - то если коротко это функциональный типизированный язык для разработки веба. Он достаточно простой и быстрый в рантайме. Решение было принято по следующим причинам: - В то время typescript еще не стал мейнстримом, а у Elm была очень хорошая типизация - Язык предлагает готовые концепции для реализации FLUX архитектуры. Это позволяет иметь единообразный читаемый код по всему проекту. - Elm привлекает энтузиастов. Это и плюс и минус. Плюс в том, что в компанию целенаправленно приходили крутые разработчики, которые хотели писать на Elm. Минус в том, что такие разработчики часто бывают заинтереснованны только в технологиях, а не в доставке ценности. - Elm позволяет переписывать приложение по частям. Но теперь компания отказывается от Elm. Основные причины: - Небольшой размер сообщества. Инструменты развиваются медленно, искать разработчиков может быть сложно - В проекте параллельно был React. Поэтому приходилось уметь писать код и на react и на elm. И даже в дизайн системе поддерживать оба варианта реализации. В свое время пытались переехать на web component'ы, чтобы не поддерживать 2 реализации, но оказалось что из-за web component'ов приходится код на Elm и React все равно приходится адаптировать, таким образом появляется 3 тип интеграции. - В какой-то момент оказалось (я так понял было что-то типа поглощения компании) что 75% разработчиков - React разработчики. Если раньше Elm можно было называть титульным стеком, то теперь это меньшинство Поэтому команда разработки приняла решение отказаться от Elm и переходить полностью на typescript + react. Не смотря на то, что может показаться, что вся эта история была ошибкой, это не так. Это сейчас ясно, что Elm это нишевая технология. В 2018 году еще не было до конца понятно, что будет с Web-ом и Elm выглядел в целом привлекательно (даже я написал в свое время Hello World и это было круто)
·kevinyank.com·
On Endings: Why & How We Retired Elm at Culture Amp
Load Balancing
Load Balancing
Супер крутой стартовый туториал про балансировку нагрузку на серверы. Кратко рассказывается про эволюцию подходов к балансировке (от "отдаем запросы разным серверам по очереди" до "учитываем нагрузку на сервер и мощность сервера"), а также очень наглядно, с крутыми анимациями, показывается как это выглядит. А внизу страницы есть плейграунд где можно самому поиграться и сделать свою модель с разными серверами, нагрузкой и стратегией балансировки
·samwho.dev·
Load Balancing
Node.js 20 Now Available - OpenJS Foundation
Node.js 20 Now Available - OpenJS Foundation
Вышел Node.js 20. Из интересных новшеств: - Экспериментальная модель разрешений. Теперь можно ограничить использование файловой системы, запуск процессов и тредов. Также планируют уметь ограничивать использовать сети и переменных окружения. В общем, фича из Deno переводится в node.js, что не может не радовать - Новый тест раннер теперь считается стабильным, т.е. он доступен без флага, гарантируется что он более менее работает, а его API не будут сильно менять - Появилась возможность упаковывать JS-приложения в бинарники. Т.е. можно взять и написать простой cli и затем упаковать его средствами ноды в готовый исполняемый файл (например exe для windows), который не требует установки node.js в ОС. В целом и раньше был способ упаковывать код + nodejs в бинарники, но теперь это реализовано самими node.js. Пока что фича эксперементальная и возможно что-то еще помют, потому что сейчас из доки не совсем понятны возможности фичи.
·openjsf.org·
Node.js 20 Now Available - OpenJS Foundation