JS Dates Are About to Be Fixed

Статья, объясняющая грядущие изменения работы с датами в JS. Работа с датами в системах, где нужно учитывать часовой пояс - это всегда боль. Мой любимый пример, с одной из прошлых работ: сотрудник агенства недвижимости работает из Владивостока, само агенство недвижимости зарегистрировано в Казани, а объекты недвижимости продает в Екатеринбург. Вопрос: как отображать время работы менеджера в интерфейсе?

Новое предложение как раз решает эту проблему, добавляя Temporal.ZonedDateTime, в которой кроме, собственно, времени, также хранится и таймзона и календарь (Грегорианский например)

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

const one = Temporal.ZonedDateTime.from('2020-11-01T01:45-07:00[America/Los_Angeles]');  
const two = Temporal.ZonedDateTime.from('2020-11-01T01:15-08:00[America/Los_Angeles]');  
  
Temporal.ZonedDateTime.compare(one, two);

https://docs.timetime.in/blog/js-dates-finally-fixed/

#development #javascript #Date #proposal

JavaScript Generators Explained, But On A Senior-Level

Очень хорошая статья про генераторы в JavaScript. Она объясняет не синтаксис генераторов, а их суть.

Генераторы - это pull streams (вытягивающие потоки). Stream (поток) - это когда данные приходят не сразу, а их приход распределен во времени. Потоки делятся на pull и push. Push - это когда мы не контролируем проход данных по потоку. Например, websockets - мы не контролируем когда данные приходят - они просто приходят. Pull - это когда мы контролируем, когда мы хотим получить следующие данные. Так вот, генераторы - это штука для pull streams.

В программировании данные могут быть обработаны двумя способами - жадно (eager) - обрабатываем сразу; или лениво (lazily) - обрабатываем по мере необходимости.

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

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => { 
 console.log(`Squaring ${num}`);  // выводит каждый "квадрат"
 return num * num; 
}); 
console.log('squares:', squares); // [1, 4, 9, 16, 25]

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

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => { 
    return {
      valueOf: () => {
       console.log(`Squaring ${num}`);  // выводит каждый "квадрат"
        return num * num; 
      }
    }
 
}); 
console.log('squares: ', squares); // выведетм массив объектов - ни один квадрат не посчитан
console.log(+squares[3]) // унарный оператор `+` вызовет `valueOf` и только тогда запустится расчет квадрата числа

Данный пример немного синтетический и его стоит заменить на что-то более сложное и ресурсоёмкое. Но, надеюсь, мысль понятна.

Промисы жадные (eager), т.к. колбек промиса выполняется моментально и нет способа его остановить.

Получается, что промисы - это жадная асинхронщина.
Генераторы тоже асинхронщина, но уже ленивая - можно управлять потоком выполнения кода, приостанавливать его и запускать снова.

Основные 3 юзкейса для генераторов:
- Ленивый расчет. Это полезно если у вас либо сложные расчеты, либо бесконечный поток данных
- Асинхронное программирование
- Итерирование - генераторы позволяют поставить алгоритм на паузу, что полезно в случае в сложных алгоритмов

https://www.reactsquad.io/blog/understanding-generators-in-javascript

#development #javascript #generators #recommended

How To Create An NPM Package

Достаточно подробный туториал, описывающий, как флоу создания и публикации npm-пакета в 2024 году. В целом, ничего нового, но описано хорошо и может быть кому-то полезно.

https://www.totaltypescript.com/how-to-create-an-npm-package

#development #javascript #npm #tutorial

Дайджест за 2024-09-02 - 2024-09-06

Announcing Rspack 1.0
Вышел в свет Rspack v1.0. Rspack - это бандлер, написанный на Rust, совместимый с webpack экосистемой и работающий быстрее в 10 раз.

How I cut 22.3 seconds off an API Call using Trace View
Статья в блоге Sentry про то, как можно использовать Trace View для оптимизации перформанса. Если честно, только из этой статьи я узнал что в Sentry вообще есть такая фича, как трейсинг.

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

JS Dates Are About to Be Fixed
Статья, объясняющая грядущие изменения работы с датами в JS. Работа с датами в системах, где нужно учитывать часовой пояс - это всегда боль. Мой любимый пример, с одной из прошлых работ: сотрудник агенства недвижимости работает из Владивостока, само агенство недвижимости зарегистрировано в Казани, а объекты недвижимости продает в Екатеринбург. Вопрос: как отображать время работы менеджера в интерфейсе?

Новое предложение как раз решает эту проблему, добавляя Temporal.ZonedDateTime, в которой кроме, собственно, времени, также хранится и таймзона и календарь (Грегорианский например)

⭐️JavaScript Generators Explained, But On A Senior-Level
Очень хорошая статья про генераторы в JavaScript. Она объясняет не синтаксис генераторов, а их суть.

Генераторы - это pull streams (вытягивающие потоки). Stream (поток) - это когда данные приходят не сразу, а их приход распределен во времени. Потоки делятся на pull и push. Push - это когда мы не контролируем проход данных по потоку. Например, websockets - мы не контролируем когда данные приходят - они просто приходят. Pull - это когда мы контролируем, когда мы хотим получить следующие данные. Так вот, генераторы - это штука для pull streams.

How To Create An NPM Package
Достаточно подробный туториал, описывающий, как флоу создания и публикации npm-пакета в 2024 году. В целом, ничего нового, но описано хорошо и может быть кому-то полезно.

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

Также я промил работу в ТБанк. Мы в целом ищем скиловых разработчиков, в том числе фронтендеров и в том числе в проект, где я работаю - в Отели.
В комментариях под записью можно почитать мои ответы на некоторые вопросы и как все плохо в современной культуре найма (алгособесы, нерелевантные задачи, отписки от HR). С тем что сообщество повернуло не туда в плане проверок перед наймом не спорю 🙃

Если вам интересно узнать чтото про работу в ТБанк - пишите в личку любые вопросы, постараюсь на них ответить

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

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

Особенности Effector, которые почему-то никто не обсуждает: опыт ВКонтакте спустя год использования

На Codefest команда ВК рассказывала, как они решили перейти на effector и почему пришлось откатываться. Мне лично доклад сильно понравился, потому что он, по своему смыслу, двух-уровневый: на первом уровне - критика effector, на втором уровне - как выбирать инструменты (отдельно кекнул прям на докладе, что решили выбирать стейт менеджер на основе голосования)

Записи докладов с Codefest еще не обнародовали, но команда VK выпустила статью на ту же тему. Статья уже стала источником небольшой драмы в сообществе (например, можно почитать кучу постов у sergeysova и немножко у artalog).

В целом в статье подсвечены нюансы effector, которые могут быть проблемой при разработке. Я в свое время писал простую помидорницу (ого, даже еще доступно по pomodoro.msosnov.com) с использованием effector. Для себя я тогда подчеркнул, что при входе в разработку на effector, приходится перезагружать стиль мышления чтобы работать с его сущностями и реактивной моделью. В целом нахождение хорошего решения или дебаг всех текущих связей напоминал игру в шарады - с непривычки приходится долгое время сидеть и думать как бы изменить граф связей, чтобы было хорошо, а когда находишь решение - чувствуешь детский восторг, а потом понимаешь, что на своем рабочем стеке это заняло бы пол-минуты максимум. До сих пор считаю решение шарад - идеальной метафорой знакомства с effector :)

А статью рекомендую почитать. В целом на объяснении нюансов, которые команда ВК посчитала недостатками, можно узнать и про инструмент, и про то, на что необходимо обращать внимание при выборе инструментов.


https://habr.com/ru/companies/vk/articles/839632/

#development #javascript #effector #vk #recommended

An SSR Performance Showdown

Немного странный бенчмарк производительности серверного рендеринга разных библиотек. Задача простая: отрисовать спираль из 2398 дивов. В сравнении участвовали fastify-html (простая либка для рендера html из fastify), react, preact, vue, solidjs, svelte.

В явных лидерах (>1000 RPS): fastify-html и vue, далее с небольшим отставанием (>900 RPS) идут svelte и solidjs, завершают рейтинг preact (717 RPS) и react (572 RPS).

Ничего не могу сказать про качество бенчмарка, но выглядит интересным

https://blog.platformatic.dev/ssr-performance-showdown

#development #javascript #ssr #performance #react #preact #vue #svelte #fastify #solidjs

Announcing Vue 3.5

Анонсирован Vue 3.5. Давно не следил за vue, хотя продолжительно время писал на нём. И вот решил посмотреть что там нового в vue 3.5.

Я, конечно, давно уже не слежу за тем, насколько Vue быстрее или медленнее других библиотек и фреймворков. Но в моей памяти - он считается достаточно быстрым (поправьте в коментах, если это уже давно не так). Тем не менее, в 3.5 уменьшили в 2 раза потребление памяти системой реактивности, а трекинг огромных вложенных массивов ускорился в 10 раз в определенных кейсах

Также я до сих пор помню баги, связанные с тем, что разработчик решил деструктуризировать что-то из vuex и оно теряло свою реактивность. В 3.5 решили проблему с деструктуризацией пропсов. Компилятор сам увидит деструктуризация и заменит её на "обычное" обращение к props.

т.е. теперь можно писать

const { count } = defineProps<{
  count: number
}>()

тогда как раньше везде, где был нужен count, все требовалось использовать props (если требовалась реактивность)

const props = defineProps<{
  count: number
}>()
console.log(props.count)

Также в релиз попали улучшения, связанные с SSR, который давно запрашивало сообщество.

Во-первых, ленивая гидрация. Теперь можно объявить компонент ленивым и попросить vue гидрировать его, только если он стал виден

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

Добавили хук useId, который генерирует уникальные id, которые сойдутся и на сервере и на клиенте

Добавили служебный атрибут data-allow-mismatch, который говорит Vue, что контент может отличаться после гидрации. Это полезно для кейсов, где идет работа с датами. Например, на сервере мы выводим today и получается 2024-09-09, а у пользователя уже 2024-09-10. React в этом случае будет ругаться при гидрации (в коментах меня поправили, что также можно отключить), а во vue вот добавили специальную директиву на случай, если это ожидаемое поведение

<span data-allow-mismatch>{{ data.toLocaleString() }}</span>

Внезапно также улучшили интеграцию с custom-elements. Теперь писать веб-компоненты на Vue еще проще

Еще из интересного - добавили явное API для отчистки сайд-эффектов в вотчерах

import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const controller = new AbortController()

  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // callback logic
  })

  onWatcherCleanup(() => {
    // abort stale request
    controller.abort()
  })
})

В общем, на Vue я не пишу, но релиз ноутсы все равно выглядят очень интересно :)

https://blog.vuejs.org/posts/vue-3-5

#development #javascript #vue #release

OpenAI is shockingly good at unminifying code

Небольшая статья, показывающая интересный юзкейс для нейронок. Чувак увидел прикольную ASCII-анимацию на сайте, и захотел узнать как она работает. Как это часто бывает на сайтах - из исходников есть только минифицированный код на React в сорсах страницы.

Его можно было бы и реверснуть ручками (там небольшой фрагмент кода), но чел воспользовался мощью chatGPT, который правильно разобрал алгоритм и затем почти правильно написал читаемую имплементацию на typescript.

https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai

#development #javascript #minifiedCode #chatgpt

Inside ECMAScript: JavaScript Standard Gets an Extra Stage

Комитет стандартизации Ecmascript добавил еще 1 Stage для предложений по улучшению языка. Между 2 и 3 этапом добавился stage 2.7.

Почему он понадобился: часто большие предложения, попадавшие на Stage 3, разворачивались обратно на Stage 2 т.к. оказывалось, что у предложения есть существенные недостатки, которые не были выявлены ранее. Это означает, что вся работа, сделанная в stage 3, была сделана зря. Чтобы минимизировать подобные кейсы, решили добавить шаг 2.7, в котором уже договорились о том, как все должно работать, но теперь пишут тест-кейсы и валидируют, что это предложение действительно рабочее (если я правильно понял).

А вот сделали бы стейджи, как при программировании на BASIC, где код пишут обозначая строки и обычно делают строки 10, 20, 30, 40, чтобы можно было добавить новых строк между текущими, то не пришлось бы добавлять дробный stage, добавили бы 25 😁

https://thenewstack.io/inside-ecmascript-javascript-standard-gets-an-extra-stage/

#development #javascript #ecmascript

А еще завтра я буду выступать в Томске на конференции Город-ИТ. Если вдруг вы там будете - заходите. Буду рассказывать доклад про парное программирование, поотвечаю на вопросы и покажу коллегу из Томска, который пейрит в нашей команде :)

https://gorod.it/inprog2024?fact_id=19590

Дайджест за 2024-09-09 - 2024-09-13

⭐️Особенности Effector, которые почему-то никто не обсуждает: опыт ВКонтакте спустя год использования
На Codefest команда ВК рассказывала, как они решили перейти на effector и почему пришлось откатываться. Мне лично доклад сильно понравился, потому что он, по своему смыслу, двух-уровневый: на первом уровне - критика effector, на втором уровне - как выбирать инструменты (отдельно кекнул прям на докладе, что решили выбирать стейт менеджер на основе голосования)

Записи докладов с Codefest еще не обнародовали, но команда VK выпустила статью на ту же тему. Статья уже стала источником небольшой драмы в сообществе (например, можно почитать кучу постов у sergeysova и немножко у artalog).

An SSR Performance Showdown
Немного странный бенчмарк производительности серверного рендеринга разных библиотек. Задача простая: отрисовать спираль из 2398 дивов. В сравнении участвовали fastify-html (простая либка для рендера html из fastify), react, preact, vue, solidjs, svelte.

В явных лидерах (>1000 RPS): fastify-html и vue, далее с небольшим отставанием (>900 RPS) идут svelte и solidjs, завершают рейтинг preact (717 RPS) и react (572 RPS).

В комментах отписаличь, почему бенчмарк - фигня

Announcing Vue 3.5
Анонсирован Vue 3.5. Давно не следил за vue, хотя продолжительно время писал на нём. И вот решил посмотреть что там нового в vue 3.5.

Я, конечно, давно уже не слежу за тем, насколько Vue быстрее или медленнее других библиотек и фреймворков. Но в моей памяти - он считается достаточно быстрым (поправьте в коментах, если это уже давно не так). Тем не менее, в 3.5 уменьшили в 2 раза потребление памяти системой реактивности, а трекинг огромных вложенных массивов ускорился в 10 раз в определенных кейсах

В комментах разные уточнения к посту и перформансу

OpenAI is shockingly good at unminifying code
Небольшая статья, показывающая интересный юзкейс для нейронок. Чувак увидел прикольную ASCII-анимацию на сайте, и захотел узнать как она работает. Как это часто бывает на сайтах - из исходников есть только минифицированный код на React в сорсах страницы.

Его можно было бы и реверснуть ручками (там небольшой фрагмент кода), но чел воспользовался мощью chatGPT, который правильно разобрал алгоритм и затем почти правильно написал читаемую имплементацию на typescript.

Inside ECMAScript: JavaScript Standard Gets an Extra Stage
Комитет стандартизации Ecmascript добавил еще 1 Stage для предложений по улучшению языка. Между 2 и 3 этапом добавился stage 2.7.

Почему он понадобился: часто большие предложения, попадавшие на Stage 3, разворачивались обратно на Stage 2 т.к. оказывалось, что у предложения есть существенные недостатки, которые не были выявлены ранее. Это означает, что вся работа, сделанная в stage 3, была сделана зря. Чтобы минимизировать подобные кейсы, решили добавить шаг 2.7, в котором уже договорились о том, как все должно работать, но теперь пишут тест-кейсы и валидируют, что это предложение действительно рабочее (если я правильно понял).

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

Также короткий пост о том как я посетил конфу в Томске

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

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

How I Created a 3.78MB Docker Image for a JavaScript Service

Чем бы ты не занимался, всегда найдется азиат, который сделает это круче.

Так произошло и с докер-образами для JS-сервисов. Чела не устраивало, что все текущие образы весят 50+ МБ, вне зависимости от рантайма, и тогда он сделал свой докер-образ, который весит 3.7МБ.

Чтобы сделать такой худой образ, автор использует LLRT как рантайм. Это рантайм, который развивает AWS, если я правильно помню. Создан поверх движка QuickJS.

Т.к. llrt весит так мало не просто так (а потому что многое там упрощено и многого там просто нет), то пришлось немножко адаптировать свое приложение. Например, переписать часть, связанную с http сервером.

Итоги:
- Докер образ стал весить меньше
- Приложение быстрее стартует
- Приложение медленее работает
- Автор в целом рекомендует оставаться на nodejs для большинства кейсов.

https://shenzilong.cn/record/How%20I%20Created%20a%203.78MB%20Docker%20Image%20for%20a%20JavaScript%20Service

#development #javascript #docker

Exploring Goja: A Golang JavaScript Runtime

Вот было у вас такое, что вы пишете на golang, и вам не хватает простого человеческого javascript? Теперь ваша боль решена - Goja - js рантайм для Golang

Если без шуток, челу необходимо было запускать JS в рамках Golang приложения. Конкретного кейса автора я не понял, но в целом могу выдумать несколько интересных: запуск JS-кода в контролируемом рантайме (для спортивного программирования например), описание сложных правил в UI на JS, а исполнение правил - на сервере на golang.

Автор смотрел в сторону разных вариантов запуска JS в рамках Golang, но остановился на Goja. Основное преимущество Goja - это бесшовная связка структур в Golang со структурами JS.

В целом, если у вас на сервере крутится golang и вам надоело дублировать какую-то логику в нескольких местах, можете предложить в команде использовать Goja, чтобы реализовывать общую логику на JS и использовать ее в golang. Ну или у вас могут быть еще какие-то кейсы для использования такой библиотеки

На последок, закину сниппет кода, который использует Goja

package main

import (
 "fmt"

 "github.com/dop251/goja"
)

func main() {
 vm := goja.New()

 // Passing an array of integers from 1 to 100
 values := []int{}
 for i := 1; i <= 100; i++ {
  values = append(values, i)
 }

 // Define the JavaScript code to filter even values
 script := `
  values.filter((x) => {
   return x % 2 === 0;
  })
  `

 // Set the array in the JavaScript runtime
 vm.Set("values", values)

 // Run the script
 result, err := vm.RunString(script)
 if err != nil {
  panic(err)
 }

 // Convert the result back to a Go slice of empty interfaces
 filteredValues := result.Export().([]interface{})

 fmt.Println(filteredValues)
 // Outputs: [2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100]

 first := filteredValues[0].(int64)
 fmt.Println(first)
}

https://jtarchie.com/posts/2024-08-30-exploring-goja-a-golang-javascript-runtime

#development #javascript #runtime