Среди всех проблем движения React на сервер меня больше всего беспокоит подготовленность фронтендеров к разработке бекенда. Со стороны маркетинга реакта этот вопрос вообще не освещается, там все просто, “а теперь мы ходим напрямую в базу”.
Конечно, бекенд - не рокет сайнс, там даже все стабильнее и менее разрозненно, чем на фронте. Но это большой пласт специфики по производительности (кешированию) и, особенно, безопасности. Кто научит новых фулстеков этому? Vercel об этом не очень беспокоится.

Реакт точно будет процветать, хотя бы из-за вечной востребованности фулстеков на рынке, как дешевом способе сделать полноценный продукт. Качество - оно для разных продуктов требуется разное. Наверное, огромный рынок фриланса и мелких студий подсядут на RSC. Это я так фантазирую, статистики у меня нет. Фейсбук, в очередной раз, сделал технологию для себя, но подойдет она большой части индустрии.

А что со SPA? Я считаю что это единственный способ делать сайты, не только приложения, нормально по UX. И я бы ставил на их больший рассвет, но вот индексация гугла со мной не согласится, а это сейчас самое главное на масс маркете. Хотя, в любом случае будет часть приложений, которым SSR вообще не сдался и какую технологию они будут выбирать.., даже не знаю. Preact имеет минимальный порог входа и отличные ТТХ, но у него, почему-то, очень мало амбассадоров. Я бы хотел попробовать его еще в реальной разработке, хотя самый первый пост в этом канале был про его недостатки, которые никуда не ушли.

Скримба очень интересная. Идея простая и гениальная - для обучающих скринкастов нужна не запись картинки с экрана, а запись действий на экране. Имея такую запись, можно легко прыгать в любой участок кода в любой момент времени, экспериментировать с ним и получать мгновенный фидбек.
Интересно еще и то что весь этот редактор сделан на собственном ЯП IMBA, который компилится в высокопроизводительный JS (HTML, CSS), этакая питонячая версия Elm.
Серьезный минус для меня только один - TS поддерживается очень плохо, только на части синтаксиса, импорты вообще не работают и горят красным.
Но на простом JS можно сделать очень удобный тутор.

В чате обсуждаем новость про MDN Playground, зачем делать свое решение, а не взять готовое? А что есть из готового, codesandbox и stackblitz очень тяжелые (если хочешь вставить сразу несколько).

Предложили https://docs.jsfiddle.net/embedding-fiddles, открыл пример - скачал 2МБ, из которых большая половина на JS, причем в анзипе там 6+ метров, это сколько парсить и инициализировать!

Посмотрел повнимательнее, большую часть занимает jsfiddle.net/js/_dist-linters.js, без него результат очень даже ничего и работоспособность не ломается! Проблема теперь в том, что в доке я не нашел как это отключить.
Надо еще покопать, если звезды сойдуться, засуну jsfiddle на сайт реатома 🤔

У меня в шрифте как слева, а надо как справа.
Решение в лоб dangerousInnerHTML={text.replace('®', '<sub>®</sub>')} не элегантно, потому что я не знаю где мне этот символ может прилелеть.

К счастью в css есть такая классная фича - unicode-range, помощью нее можно заставить браузер брать этот символ из другого шрифта.

Находим на google fonts шрифт в котором наш сивол выглядит как надо, скачиваем ег ои вырезаем оттуда все кроме этого символа с помощью сервиса https://transfonter.org/, закидываем в проект и пишем следующий стиль

@font-face {
  font-family: 'Copyright';
  src: url('/fonts/copyright.woff2') format('woff2'),
       url('/fonts/copyright.woff') format('woff');
   unicode-range: U+00AE;
}

body {
  font-family: 'Copyright', 'Ваш обычный шрифт', sans-serif;
}

Готово.

P.S. Шрифт со спец символом не грузится пока на странице не появится этот символ

Promise.withResolvers на stage 2 и это хорошо! А как вы сейчас это делаете?

Простое решение в одну строку:
new Promise((...a) => ([res, rej] = a))

Максимальная минификация:
const toPromise = (cb, resolvers) => ({
promise: new Promise((...a) => (resolvers = a)),
cb: (...a) => cb(...a).then(...resolvers),
});

https://300.ya.ru/TUzFaQLo

Советую почитать оригинал! 😄

В комментариях много советуют RHF. Я его уже смотрел :)

Поделитесь вашими болями при работе с формами, менеджерами форм. Через час разберу их на стриме.

НАШЕЛ!
https://natto.dev/

Только вчера думал, и сегодня в рабочем чате подтверждение прилетело…
Реакт сломан бай дизайн и нам нужно бежать от него. Без шуток, я уже максимально серьезно об этом задумываюсь. А проблема в чем? Нет гарантий.

Ни на что нет гарантий, ваши мемоизации и эффекты, в которых хранится логика, которую иначе в реакте и не написать, “когда-то” “может быть” будут сбрасываться и перевызываться. Это уже происходит при переизбытке deps в соотстветствующих хуках. Лишние ререндеры банально мешают дебажить. Количество сложности, особенно для начинающего разработчика, катастрафическое в прямом смысле слова. На дебаг большого реакт приложения за рациональное время способны только дорогие опытные разработчики.

Я просто не знаю как проектировать фичи и апи библиотечного кода с учетом того что useMemo и useEffect будут перевызываться не только лишь когда надо. Сейчас я думаю, “а ладно, потом перепишем”. Все так думают, или не задумываются о проблеме вовсе. Но я понял, что это безответственно.

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

Самое противное, что не понятно куда валить. Vue приятнее, но там кучка свои проблем. Ангулар тоже много чем пугает, особенно Rx’ом. Есть вообще вьюшные фреймворки, который расчитаны на дебаг, когда все станет большим?

Дейли ремайндер про квирки React.js:

- патчится globalThis.fetch

- сайд-эффекты вызываются дважды (пока в деве, потом может быть и в проде)

- console манкипатчится что бы скрыть логи второго рендера от StrictMode. Раньше это было дико не очевидно, почему часть логов пропадает, сейчас второй лог красится в полупрозрачный. Но дебаг все равно очень страдает - стактрейсы содержат декоратор лога и из консоли просто не перейти в место лога. Бесит.

- синтетические события не только унифицируют, но и отличаются от нативных. В целом, они делают поведение кода более предсказуемым в рядовой разработке, но в том числе из-за них бандлсайз react + react-dom выливается в 140кб! Кстати, “Hello World!” на next.js выплевывает бандл на треть мегабайта.

- HMR сбрасывает состояние хуков, но не useState, хуже того - колбек инициализации тоже не перевызывается, даже если изменения были именно в нем.

- Нет хука для инициализации данных с сайд-эффектом. Если вам нужно проставить currentDate или создать инстанс либы, который запускает фетчинг, нет удобного способа это сделать (см пункт выше).

- React.js написан на полумертвом Flow! Если захотите поконтрибьютить, так просто IDE вам типы подсказывать не будет.

Если знаете подобный более полный список, поделитесь статейкой, пожалуйста.