Опять эти антивирусы.

У меня в квартире сидят два друга с разными ноутбуками.
У одного Касперский внезапно кричит, что была обнаружена атака, в ЛОКАЛЬНОЙ сети.
В это время, второй нажимает в своем Avast сканирование локальной сети.

Я давненько пишу на эффекторе и зачастую упираюсь в некоторые не очень красивые или практичные решения в проектах, в которые прихожу.

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

Хочу рассмотреть очень простой пример: Страница логина с 2FA аутентификацией.

Моя цель: отделить код самих страниц друг от друга, а также вынести код перехода между страницами и все эти правила за пределы страниц.

Тогда все, что касается страницы логина будет лежать в:
src/pages/auth-login/model.ts
При этом код отвечающий за проверки логики между страницами в:
src/processes/login/model.ts.

Можно представить модель каждой страницы как черный ящик с событиями, этот подход позволяет упростить редактирование страниц, а снаружи можно:
1) запустить процесс, дернув событие
2) отправить .abort внутрь модели
3) подписаться на успешное завершение логики модели
4) подписаться на завершение с ошибкой
5) и еще добавить кастомные события в зависимости от бизнес-логики

В моём случае, каждая модель страницы экспортирует что-то вроде:

// Should be called only from outside, here just listen
export const inputs = {
  started: createEvent(),
  aborted: createEvent(),
};

// Should be called by this model
export const outputs = {
  finished: createEvent<UserSession>(),
};

В процессе обработки мы можем заимпортировать все нужные нам модели страниц и построить любую логику:

import * as loginModel from '@/pages/auth-login';
import * as login2FaModel from '@/pages/auth-login-2fa';

sample({
  clock: loginModel.outputs.finished,
  target: login2FaModel.inputs.started,
})

Когда процесс логина завершится успешно, начинаем процесс двухфакторной аутентификации.

Это самый примитивный пример, но с его помощью можно строить довольно сложные процессы.

Снова вернулся к SSR на effector.

Так как у меня жутко болит от Next.JS, я поглядел в сторону Vite и его vite-plugin-ssr, который теперь называется Vike.

Файловый роутинг, куча хуков для кастомизации, любой UI-фреймворк, SSR, SSG, можно подключить свой роутер, любое направление деплоя.

Задача прикрутить к Vike effector, оказалась довольно тривиальной. Поверх Vike можно построить свой фреймворк с уже настроенными плагинами и структурой. В ближайшем проекте, которым я занимаюсь в свободное от курса время, будет Vike + Effector + React.

Мне очень нравится вайб этого проекта, очень похоже на Razzle, но с большим коммьюнити.

Волшебная ситуация

Чел выложил на свой статический сайт 3.44MB .mp3
Кто-то решил задудосить его скачивая файл множество раз с кучи устройств. А Netlify, где был выложен статический сайт, выставил счет на $104К.

Я был в подобной ситуации, когда игрался с Kubernetes на AWS. Но там мне прилетело около $20К, после разговора с поддержкой, счет аннулировали.

P.S.
Буквально час назад Matt CEO of Netlify написал, что счет тоже будет аннулирован. Спасибо за ссылку в комментах.

Но любопытно, все было бы точно также, если бы чел не написал о своей ситуации в Reddit, и там это не вызвало волну комментов?

Давайте почитаем исследование опенсорса в России?

https://research.nplus1.ru/

У нового дизайна гугл очень много странных решений.

Две огромные близкорасположенные одинаковые визуально кнопки.
Странная вытянутая форма форма.

В других вариациях еще и места пустого очень много.

Объясните?

Жду запуска 3 старшипа.
Любопытно, что чуваки из spacex успели починить в такой огромной ракете.

Вот читаю я это и не понимаю

В чём смысл всей этой возни с хуками для экшенов и форм?
Упростить создание лендингов с инпутом и кнопкой подписки?

https://github.com/facebook/react/pull/28491

Сейчас узнал, что Cloudflare постепенно становится таким маленьким AWS.

У них также куча своих сервисов. Например, можно запускать ML-модели — https://developers.cloudflare.com/workers-ai/

Помните раньше были такие кодмоды?

Они писались крайне редко и очень сложно. Просто поглядите по ссылке выше и в пакеты от того же facebook.
Нужно неплохо так понимать как устроено AST конкретного языка и конкретного парсера.
Только для javascript есть около 20 парсеров, хоть и не у всех уникальный AST.

Как утверждают авторы Grit, достаточно разобраться в устройстве их языка GritQL, чтобы трансформировать любой поддерживаемый синтаксис.

На примере с картинки:
- шаблон по которому ищем: console.$method($my_message).
- $name это так называемые метапеременные, вроде ссылок на AST-ноды.
- слева от => шаблон по которому ищем, а справа на что будем заменять.
- where описывает список условий, при которых сработает матч паттерна и замена.
- выражение слева от <: соответствует паттерну справа
- а там составной паттерн or {}, список в доке

Это может показаться слишком простым, но в языке можно переиспользовать буквально каждую часть: функции, предикаты и паттерны.
Можно делать кодмоды, а можно сделать линтер с продвинутыми фиксами.

https://docs.grit.io

Для чего нужен effector patronum?

Конечно, всё, что есть в patronum можно реализовать своими руками. В некоторых случаях это довольно просто, в других придется помудрить с типами, а третьи еще умудриться протестировать.

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

Оператор format

Хочу порекомендовать фронтенд-разработчика.
На случай если вы в компании сейчас нанимаете.

5 лет опыта: typescript, react, effector, redux, vue.
Довольно много разного опыта.

Писать сюда: @Nataliya_R7
В комментах CV.pdf

Вы уже знаете о существовании @scope в CSS?

https://12daysofweb.dev/2023/css-scope/

В стандарте существует AbortSignal.timeout()

await fetch(url, {
  signal: AbortSignal.timeout(300),
})

https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static

А вот тут есть и другие полезные каналы про фронтенд.

https://t.me/addlist/Z6Efi4jXwe9lODcy

Я подписан как минимум на половину каналов из папки.

+300 человек за один вечер.
Спасибо вам! 💜