Immutable array updates with Array.prototype.with

Короткая заметка про новый метод массива - with. Метод создает копию массива, в котором один элемент заменен на другой.

const arr = [1,2,3]
const arr2 = arr.with(1,9)
console.log(arr);  // [1,2,3]
console.log(arr2); // [1,9,3]

Также в статье упоминаются ссылки на другие новый иммутабельные методы массива
- Array.prototype.toReversed() - создает копию массива, где элементы идут в обратном порядке
- Array.prototype.toSorted() - создает копию массива, где элементы - отсортированы
- Array.prototype.toSpliced() - как splice, но создает копию массива

https://web.dev/blog/array-with

#development #javascript

23 марта пройдёт митап (или конференция, не суть) от Яндекса по фронтенду

Те кто в Москве - могут посетить очно, но также будет и онлайн-трансляция

LLRT (Low Latency Runtime) is a lightweight JavaScript runtime

LLRT (low latency runtime) - новый рантайм для запуска JS кода, который используется в AWS labmda. Рантайм оптимизирован для запуска лямбда функций и стартует в 10 раз быстрее и потребляет в 2 раза меньше ресурсов.

Под капотом используется движок QuickJS (честно говоря, не слышал про него до этого). Также поддерживаются все основные API nodejs (или же есть свои аналоги этих API)

https://github.com/awslabs/llrt

#development #javascript #aws #quickjs

Дайджест за 2024-02-19 - 2024-02-23

---

На прошлой неделе было мало новостей из-за наложения двух факторов:
- Сломался пайплайн публикации новостей. Пока чинил - чуть не потерял все конфиги n8n 🙃
- Я был немножко в отпуске

На этой неделе оба фактора устранены, так что канал возвращается в привычный ритм ежедневной публикации

---

Union, intersection, difference, and more are coming to JavaScript Sets
В Set добавляют новые методы (и вроде они уже есть в новом Chrome): union, intersection, difference, symmetricDifference, isSubsetOf, isSupersetOf и isDisjointFrom.

Immutable array updates with Array.prototype.with
Короткая заметка про новый метод массива - with. Метод создает копию массива, в котором один элемент заменен на другой.


Яндекс приглашает людей посетить (офлайн или онлайн) конференцию от Яндекса про фронтенд
23 марта, 4 доклада, офлайн (Москва) и онлайн


LLRT (Low Latency Runtime) is a lightweight JavaScript runtime
LLRT (low latency runtime) - новый рантайм для запуска JS кода, который используется в AWS labmda. Рантайм оптимизирован для запуска лямбда функций и стартует в 10 раз быстрее и потребляет в 2 раза меньше ресурсов.

Под капотом используется движок QuickJS (честно говоря, не слышал про него до этого). Также поддерживаются все основные API nodejs (или же есть свои аналоги этих API)

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

WebContainers

StackBlitz разрабатывает технологию web containers. Если очень утрировано - технология позволяет запускать nodejs приложение прямо в браузере. Это, в частности, полезно для stackblitz т.к. бизнес построен вокруг предоставления окружения или песочницы для разработки приложений в браузере. Это удобно, но для запуска nodejs приложений требует запуска и обслуживания виртуалок. WebContainers решают проблему stackblitz, переводя запуск кода в браузер.

Если вам интересно поиграться с веб контейнерами - проходите по ссылке, там хорошая документация по работе с ними

https://webcontainers.io/guides/introduction

#development #javascript #webcontainer

Finishing Turborepo's migration from Go to Rust

Turborepo завершили свое 15-месячное переписывание кода 70 тысяч строк кода с Go на Rust. Сама миграция на Rust проходила так, чтобы не влиять на пользователей. В целом, это весьма непростая задача и поэтому статья интересна

Какие уроки вынесла команда Turborepo:
- Команда меняла свои подходы к сериализации данных. Сначала JSON, потом protocol-buffers, затем Capnproto. Но, если бы команда в самом начала исследовала вопрос сериализации, они бы сразу выбрали Capnproto
- У команды было несколько стратегий портирований кода. Если бы команда быстрее собирала MVP с имплементацией стратегии, команда могла бы узнать раньше о критичных подводных камнях стратегии. Соответственно, команда бы раньше узнала лучший способ миграции
- Для портирования кода очень важно качество изначального кода. Грязный, непокрытый тестами код портировать страшно - в него опасно вносить улучшающие рефакторинги.
- Перед миграцией следует хорошо проспекать техническую имплементацию. Частично миграция была сложна из-за того, что часть логики была плохо задокументирована (например, алгоритм хеширования).

https://vercel.com/blog/finishing-turborepos-migration-from-go-to-rust

#development #javascript #turbopack #migration #rust #go

Storybook 8 Beta

Команда Storybook подогревает интерес к следующему релизу. Коротко, что нам обещают в 8 сторибуке:
- Улучшение поддержки интерфейса для мобильных устройств. На случай, если кто-то смотрит storybook в мобильных браузерах
- Улучшение производительности (отключение медленных плагинов, переезд на swc)
- Улучшение инструментария для тестирования
- Поддержка серверных компонентов
- React теперь не будет являться обязательной зависимостью для storybook

https://storybook.js.org/blog/storybook-8-beta/

#development #javascript #storybook #release

New client-side hooks coming to React 19

Статья рассказывает про новые API, которые, предположительно, будут в react 19. Пока они доступны в канареечном релизе React

В статье рассказывается про:
- use(Promise)
- use(Context)
- Возможность передавать специфичный action в form
- useFormState
- useFormStatus
- useOptimistic
- Асинхронные транзишны

Постараюсь коротко рассказать про это API

use(Promise) позволяет дождаться выполнения Promise. Выглядит как сахар для удобного ожидания промиса внутри Suspence. Также отличается от классических хуков тем, что этот можно использовать внутри циклов и условий

import { use } from 'react';

function MessageComponent({ messagePromise }) {
    const message = use(messagePromise);
    // ...
}

use(Context) это аналог useContext, но можно использовать внутри циклов и условных блоков

Также улучшили работу с формами. У форм есть проп action, в который теперь можно закидывать функцию - обработчик формы <form action={handleSubmit}>. Само по себе это мало что дает, но вместе с этой возможностью идут новые хуки, которые позволяют получить стейт и статус формы - useFormState и useFormStatus. Используя комбинацию этих API можно удобно работать с нативными формами.

Самой сложной API для меня оказался хук useOptimistic. Пришлось из статьи перейти в доку реакта, чтоб почитать подробнее, как это работает. Как я понял, useOptimistic позволяет врапнуть другой стейт и изменить его, пока врапнутый стейт не изменился. И это может быть полезно для оптимистичных апдейтов UI (техника, когда мы отрисовываем экран исходя из того, что асинхронное действие завершится успехом)

Я понял, что это работает вот так

function MyComponent() {
  // Объявляем стейт
  const [state, setState] = useState([])
  // Врапуем его с помощью нового хука
  // в optimisticState изначально будет лежать state
  // В колбеке описываем, как обрабатывать оптимистичные изменения
  const [optimisticState, addOptimistic] = useOptimistic(state, (state, newItem) => [...state, newItem])

  // Предположим мы делаем запрос на did mount 
  useEffect(async () => {
     const itemToAdd = {}
     // добавляем оптимистичный апдейт
     addOptimistic(itemToAdd)
     // делаем запрос
     const realItemToAdd = await fetch(url)
     // после завершения запроса, меняем корневой стейт
     // мы рендерим optimisticState, но после обновления state
     // optimisticState обновиться до state
     setState([...state, realItemToAdd])
  }, [])

  return <div> {optimisticState} </div>
}

Если я понял неправильно, а вы - правильно - отпишитесь, пожалуйста, в комментах, как это работает на самом деле.

Также добавили возможность делать асинхронные transitions в React. До этого было требование, чтобы транзишны были синхронными

https://marmelab.com/blog/2024/01/23/react-19-new-hooks.html

#development #javascript #react #react19 #reactHooks

Periodic Face-to-Face

Статья в блоге Мартина Фаулера про важность личных встреч в эпоху распределенной команды. Модель распределенной команды получила огромный рост популярности с приходом ковида (собственно, выбора то и не было). По началу это было в новинку, но сейчас это уже привычный паттерн. Появилось много инструментов для работы в распределенной команде. Однако, не смотря на всё это развитие, нам все еще необходимо личное общение

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

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

В общем, remote-first - это не серебряная пуля. В зависимости от того, какие коммуникации вам необходимы для решения задач, вам может требоваться разная частота офлайн-встреч с коллегами. Если вы работаете совсем обособленно (например, пишете plsql запросы по ТЗ), то вам должно быть комфортно на удаленке. Если вы - часть команды разработки и постоянно друг с другом коммуницируете, то необходимо иногда встречаться.

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

https://martinfowler.com/bliki/PeriodicFaceToFace.html

#managment #remoteWork #martinFowler

Дайджест за 2024-02-26 - 2024-03-01

WebContainers
StackBlitz разрабатывает технологию web containers. Если очень утрировано - технология позволяет запускать nodejs приложение прямо в браузере. Это, в частности, полезно для stackblitz т.к. бизнес построен вокруг предоставления окружения или песочницы для разработки приложений в браузере. Это удобно, но для запуска nodejs приложений требует запуска и обслуживания виртуалок. WebContainers решают проблему stackblitz, переводя запуск кода в браузер.

Если вам интересно поиграться с веб контейнерами - проходите по ссылке, там хорошая документация по работе с веб контейнерами

Finishing Turborepo's migration from Go to Rust
Turborepo завершили свое 15-месячное переписывание кода 70 тысяч строк кода с Go на Rust. Сама миграция на Rust проходила так, чтобы не влиять на пользователей. В целом, это весьма непростая задача и поэтому статья интересна

Storybook 8 Beta
Команда Storybook подогревает интерес к следующему релизу.

New client-side hooks coming to React 19
Статья рассказывает про новые API, которые, предположительно, будут в react 19. Пока они доступны в канареечном релизе React


Periodic Face-to-Face
Статья в блоге Мартина Фаулера про важность личных встреч в эпоху распределенной команды. Модель распределенной команды получила огромный рост популярности с приходом ковида (собственно, выбора то и не было). По началу это было в новинку, но сейчас это уже привычный паттерн. Появилось много инструментов для работы в распределенной команде. Однако, не смотря на всё это развитие, нам все еще необходимо личное общение

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

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Does your team need a meeting reset?

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

Shopify в начале года устроил перезагрузку встреч - все повторяющиеся встречи с более чем двумя участниками были принудительно отменены с невозможностью их восстановить раньше чем через 2 недели. Т.е. идея такая, чтобы люди восстановили только те встречи, которые реально им нужны.

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

https://qz.com/why-your-team-should-try-a-meeting-reset-1849949241

#managment #remoteWork #mettings

Reporting Core Web Vitals With The Performance API

Крутая статья про возможности Performance API в браузере. Автор подробно объясняет, как с современным API можно снимать метрики производительности страницы и как с ними работать. Я раньше думал, что есть перформанс метки и это, в общем-то, все API. Но в статье показываются крутые примеры как использовать PerformanceObserver, который позволяет узнать не только цифры конкретных метрик WebVitals, но и почему они такие.

Например, есть метрика Largest Contentful Paint. Можно не только узнать, какая у нас метрика LCP, но и вывести элемент, на основе которого считается метрика. Ниже пример кода из статьи.

const lcpObserver = new PerformanceObserver(list => {

  const entries = list.getEntries();
  const lcp = entries[entries.length - 1];

  entries.forEach(entry => {
    // Log the results in the console
    console.log(
      `The LCP is:`,
      lcp.element,
      `The time to render was ${entry.startTime} milliseconds.`,
    );
  });
});

// Call the Observer
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

// The LCP is:
// <h2 class="author-post__title mt-5 text-5xl">…</h2>
// The time to  render was 832.6999999880791 milliseconds.

Кроме этого разобрано как:
- Кто вызвал Cumulative Shift Layout и какой shift произошел
- Подсчет времени от взаимодействия со страницей до обновления UI
- Репортинг долгих фреймов анимации

Как я понял, можно написать подобный код самому, а можно взять библиотеку, которая все это реализует.

Статья заканчивается на достаточно важной мысли - надо не только уметь замерять производительность, но и мониторить её. Поэтому автор также рассказывает 1 из вариантов мониторинга производительности на основе метрик от пользователей.


https://www.smashingmagazine.com/2024/02/reporting-core-web-vitals-performance-api/

#development #javascript #performance #recommended

Справочник React

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

Если вам понравился такой справочник, то у автора есть еще по популярным темам: HTML+CSS, Typescript, Angular, Solid, React Native, PWA, Node.js, Python3, XSLT, Базы данных.

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

https://reactdev.ru

#development #javascript #react #documentation #recommended

Introducing AI SDK 3.0 with Generative UI support

Недавно Vercel запускали генератор React-компонентов с помощью LLM-моделей по запросу. Теперь же они показывают SDK, которая позволяет интегрироваться с LLM-моделями и показывать пользователю ответ в виде React-компонента.

У обычных чатов с LLM (например, у того же chatGPT), общение происходит в чате обычным текстом, что не всегда удобно. Vercel AI SDK позволяет дать более богатый пользовательский опыт, отображая не просто текст, а React-компоненты.

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

С технической точки зрения, SDK реализовано для серверных React-компонентов.

https://vercel.com/blog/ai-sdk-3-generative-ui

#development #javascript #vercel #ai #react

Дайджест за 2024-03-04 - 2024-03-08

Does your team need a meeting reset?
С приходом ковид многие компании перешли на удаленный формат работы. Из-за этого сильно повысилось количество встреч в календаре. В некоторых командах встреч стало так много, что уже некогда работать. Поэтому некоторые компании начали движение в обратную сторону. Например, есть инициатива no meetings day - нужно выбрать день, когда ни у кого не должно быть созвонов. В данной статье рассматривается практика reseting meetings.

Shopify в начале года устроил перезагрузку встреч - все повторяющиеся встречи с более чем двумя участниками были принудительно отменены с невозможностью их восстановить раньше чем через 2 недели. Т.е. идея такая, чтобы люди восстановили только те встречи, которые реально им нужны.

⭐Reporting Core Web Vitals With The Performance API
Крутая статья про возможности Performance API в браузере. Автор подробно объясняет, как с современным API можно снимать метрики производительности страницы и как с ними работать. Я раньше думал, что есть перформанс метки и это, в общем-то, все API. Но в статье показываются крутые примеры как использовать PerformanceObserver, который позволяет узнать не только цифры конкретных метрик WebVitals, но и почему они такие.

Например, есть метрика Largest Contentful Paint. Можно не только узнать, какая у нас метрика LCP, но и вывести элемент, на основе которого считается метрика. Ниже пример кода из статьи.

⭐Справочник React
Большой справочник по React на русском языке. Описано много разного, начиная от перевода официальной документации React и заканчивая интеграциями с менеджерами состояния. В справочнике хорошие статьи и примеры кода, приятно читать.

Если вам понравился такой справочник, то у автора есть еще по популярным темам: HTML+CSS, Typescript, Angular, Solid, React Native, PWA, Node.js, Python3, XSLT, Базы данных.

Introducing AI SDK 3.0 with Generative UI support
Недавно Vercel запускали генератор React-компонентов с помощью LLM-моделей по запросу. Теперь же они показывают SDK, которая позволяет интегрироваться с LLM-моделями и показывать пользователю ответ в виде React-компонента.

У обычных чатов с LLM (например, у того же chatGPT), общение происходит в чате обычным текстом, что не всегда удобно. Vercel AI SDK позволяет дать более богатый пользовательский опыт, отображая не просто текст, а React-компоненты.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Why React Server Components Are Breaking Builds to Win Tomorrow

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

Рекомендую к прочтению, если вы еще не читали подобных статей и интересуетесь тем, как развивается React.

https://www.builder.io/blog/why-react-server-components

#development #javascript #react #reactServerComponents #recommended

Introducing JSR - the JavaScript Registry

Команда Deno сначала придумала свой рантайм для исполнения JS, а теперь представляют свой тулинг для реджистри с пакетами - JavaScript Registry (JSR). В основе JSR лежит идея, что тулинг для управления пакетами и реестр пакетами должен предоставлять лучший DX, чем текущие решения

NPM проделал большой путь в своем развитии, но сообщество проделало куда больший путь и хотелки разработчиков отличаются от того, что дает NPM. Например, до сих пор не решен вопрос, какой код нужно публиковать в npm - es5, es6 или может быть вообще не транспайлить код и поставлять исходники как есть?

Что же предлагает JSR. Я могу выделить 2 основных поинта

ES-модули вместо поддержки разных стандартов - сейчас, при публикации в npm, приходится думать над тем, в какой модульной системе публиковать пакет, или же поддерживать несколько систем сразу. Прогресс неумолимо наступает и ES-модули становятся все популярнее, но безопаснее поставлять одновременно точки входа для commonjs и es-модулей

DX как для автора, так и для пользователя - концепцию JSR можно описать так: "пусть разработчик пишет код как ему удобно, а JSR сделает так, чтобы пакет было удобно использовать". Что это значит? В JSR есть фичи для DX. Например, автор пакета просто пишет код на TypeScript, публикует его, а JSR сам его затранспайлит и поставит его готовым к интеграции в Node.js, Deno, Bun. Другая прикольная фича, это автодокументация. JSR сам собирает доку по интерфейсу, который предоставляет либа. Для этого достаточно хорошо описать типы и JSDoc к интерфейсам. Нельзя также не упомянуть, что все пакеты проверяются автоматикой и они получают оценку качества. Выглядит это почти 1 в 1 как отчет lighthouse: у вас 82 балла из 100 и список пройденных проверок и проблем.

Честно сказать, выглядит круто. Сообществу, ИМХО, не хватает хорошего тулинга для публикации пакетов. В статье более подробно описано, как начать пользоваться JSR и какие еще фишки там есть.

https://deno.com/blog/jsr_open_beta

#development #javascript #deno #registry #jsr

Introducing runes

В Svelte используется свой компилятор для обеспечения реактивности компонентов. Вы просто объявляете переменную и используете ее в шаблоне, а Svelte компилятор сам делает её реактивной. Иногда все не так просто, но не в этом суть. В Svelte5 уходят от этого подхода и теперь реактивность будет явной. Чтоб было не скучно, названо это рунами.

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

Ниже приведу примеры кода, как делать реактивные переменные сейчас, и как их делать в рунах

Пример реактивных переменных в svelte без рун

<script>
// объявляем пропсы
export let width
export let height 

// расчитываем реактивный computed
$:  area width * height

// объявляем переменную. Svelte сам сделает её реактивной
let count = 0
// handler клика на 
function increment(){
  count++
}
</script>
<button on:click={counter.increment}> {count} </button>
<div> {area} </div>

Пример реактивных переменных в svelte с рунами

<script>
// объявляем пропсы
let { width, height } = $props();

// расчитываем реактивный computed
const area = $derived(width * height);

// объявляем переменную
let count = $state(0);
// handler клика на 
function increment(){
  count++
}
</script>
<button on:click={counter.increment}> {count} </button>
<div> {area} </div>

В целом, API стало более явным, но осталось удобным.

https://svelte.dev/blog/runes

#development #javascript #svelte

Puter: Internet OS and Desktop Environment in the Browser!

Вот сидите вы в своем ноутбуке, запускаете операционную систему, в ней браузер и потом думаете "эх, хочу вернутся операционную систему, но для этого надо выйти из браузера, что же делать?". И тут вам на помощь приходит Puter - десктопное окружение внутри браузера! Puter предоставляет собой много-оконное окружение с приложениями, которое очень похоже на современные операционные системы. Поиграйтесь в демке, выглядит действительно круто (о том, зачем такое нужно - позже).

В демке можно позапускать vscode, терминал, paint, файловый менеджер, камеру и многое другое. Можно даже, как я понял, вставить свое приложение. Интересно, что сам Puter написан на чистом JS + JQuery (вот мы и нашли пользователей JQuery). Ребята решили не брать какой-то сложный фреймворк для того, чтобы приложение работало быстро.

Зачем и кому это нужно? В целом, юзкейс конечно нишевый, но, допустим, такие штуки могут быть полезны, чтобы собирать какие-то свои устройства и предоставлять пользователям привычный интерфейс. Купить какую-то дешевую железку, которая умеет запускать линукс и в нем браузер, подключить к ней мышку и клаву и залочить окно на Puter - и вот у вас управляемая удобная песочница с нужными вам приложениями, из которой сложно выйти. При этом, как я понял, можно описывать свои приложения для Puter на html+js+css, что позволяет делать что-то типа своих сетапов Puter.

https://github.com/HeyPuter/puter

#development #javascript #library