У нас есть страница со списком и фильтрами и раньше элемент списка редактировался в модалке. Ну мы же знаем что модалки зло? Конечно, конечно. Ну я переделал редактирование элемента на отдельную страницу (в рамках параллельной задачи).
И тут прилетает фичареквест от бизнеса - а можно что бы фильтры не сбрасывались при возвращении со страницы редактирования обратно на список элементов?
Прикииньте как модалка решает такие юзкейсы вообще без доп кода, а мне сейчас придется городить персистанс куда-то.
И я вот подумал, как бы еще можно решить такой кейс без доп кода, а что бы оно просто работало. Что если страницы рисовать не одна вместо другой, сбрасывая стейт, а визуально перекрывая (накладывая) их?
Нужен умный стек, с лимитом и автоматическим сбросом части истории при попытки перейти на уже лежащую в стеке страницу или еще какие правила. Но это все утилита строк на 50-100, а код страниц и компонентов сократился бы заметно.
Кто-то делал такое? Поделитесь в коментариях.
Кмк это хороший паттерн и он может показать силу SPA. Интересно что обычно мы используем классический MPA роутинг и он нас часто тормозит ментально.
P.S. и анимации переходов было бы делать таким образом заметно проще.
И тут прилетает фичареквест от бизнеса - а можно что бы фильтры не сбрасывались при возвращении со страницы редактирования обратно на список элементов?
Прикииньте как модалка решает такие юзкейсы вообще без доп кода, а мне сейчас придется городить персистанс куда-то.
И я вот подумал, как бы еще можно решить такой кейс без доп кода, а что бы оно просто работало. Что если страницы рисовать не одна вместо другой, сбрасывая стейт, а визуально перекрывая (накладывая) их?
Нужен умный стек, с лимитом и автоматическим сбросом части истории при попытки перейти на уже лежащую в стеке страницу или еще какие правила. Но это все утилита строк на 50-100, а код страниц и компонентов сократился бы заметно.
Кто-то делал такое? Поделитесь в коментариях.
Кмк это хороший паттерн и он может показать силу SPA. Интересно что обычно мы используем классический MPA роутинг и он нас часто тормозит ментально.
P.S. и анимации переходов было бы делать таким образом заметно проще.
👍3
artalog
Пробуем наноизировать goober
Результат вчерашней наноизации библиотеки goober на скриншотах. Подробности в ПРе, все оптимизации разбиты на отдельные комиты.
Я говорил на стриме, там можно заметно сократить бандлсайз с помощью optional chaing и
Напомню, они выплачивают деньги за урезание байт.
Я говорил на стриме, там можно заметно сократить бандлсайз с помощью optional chaing и
||= / ??= / ??, но для этого нужно правильно подправить сетап билда. Мне этим заниматься сейчас времени нет - можете подхватить 🙂Напомню, они выплачивают деньги за урезание байт.
Introducing Signals
Преактовцы выпустили пакет, который заимствует некоторые идеи из Solid.js.
И у него есть частичная совместимость с реактом
Для 2022 там используются достаточно стандартные решения в плане реактивщины, но…
С точки зрения вью либы они сделали то чего давно не хватало во всех этих реактах - нативные реактивные биндинги!
Что это? Я уже как-то предлагал реализовать нечто подобно на Jotai (тогда это посчитали неважной утилитой). Оно позволяет вставлять в JSX реактивные юниты без использования хуков! Трюк прост - давайте вставлять компонент-обертку, который в себе просто вызывает хук и возвращает его значение. Таким образом мы избавляемся от пачки правил использования хуков в одном рендере.
Хотя уже давным давно существует github.com/grammarly/focal, который делает нечто подобное, но преактовцы сделали интеграцию максимально прозрачной и лёгкой как с точки зрения юзер кода, так и по технической реализации (ну это они так говорят).
И, наконец, получили vue.js.
И важно тут вот что, реактивный юнит в преакте можно не просто вставлять в JSX, но и передавать в атрибуты DOM элементов - и это гейм-ченджер который позволяет практически полностью убрать ререндеры.
Интересно, конечно, что там по памяти и скорости инициализации. Ждем еще независимые перфтесты.
P.S. пакет весит как третий реатом, который еще более фичастый и универсальный 😉
Преактовцы выпустили пакет, который заимствует некоторые идеи из Solid.js.
И у него есть частичная совместимость с реактом
Для 2022 там используются достаточно стандартные решения в плане реактивщины, но…
С точки зрения вью либы они сделали то чего давно не хватало во всех этих реактах - нативные реактивные биндинги!
Что это? Я уже как-то предлагал реализовать нечто подобно на Jotai (тогда это посчитали неважной утилитой). Оно позволяет вставлять в JSX реактивные юниты без использования хуков! Трюк прост - давайте вставлять компонент-обертку, который в себе просто вызывает хук и возвращает его значение. Таким образом мы избавляемся от пачки правил использования хуков в одном рендере.
Хотя уже давным давно существует github.com/grammarly/focal, который делает нечто подобное, но преактовцы сделали интеграцию максимально прозрачной и лёгкой как с точки зрения юзер кода, так и по технической реализации (ну это они так говорят).
И важно тут вот что, реактивный юнит в преакте можно не просто вставлять в JSX, но и передавать в атрибуты DOM элементов - и это гейм-ченджер который позволяет практически полностью убрать ререндеры.
Интересно, конечно, что там по памяти и скорости инициализации. Ждем еще независимые перфтесты.
P.S. пакет весит как третий реатом, который еще более фичастый и универсальный 😉
Preactjs
Introducing Signals – Preact
👍7🤯3❤1
Forwarded from UfoStation
Опубликовали доклад с Ural Digital Weekend 2022:
«Медленная веб-страница. Что делать?»
Видео: https://www.youtube.com/watch?v=ow3eE1LokQ0
Слайды: https://bit.ly/slow_webpage
«Медленная веб-страница. Что делать?»
Видео: https://www.youtube.com/watch?v=ow3eE1LokQ0
Слайды: https://bit.ly/slow_webpage
👍3❤2
Waaaat
https://twitter.com/amasad/status/1567953865622061057
Рекомендую весь тред почитать (это не первый твит).
https://twitter.com/amasad/status/1567953865622061057
Рекомендую весь тред почитать (это не первый твит).
🔥3
artalog
Introducing Signals Преактовцы выпустили пакет, который заимствует некоторые идеи из Solid.js. И у него есть частичная совместимость с реактом Для 2022 там используются достаточно стандартные решения в плане реактивщины, но… С точки зрения вью либы они…
Зарепортил им багу, пофиксили 🙂
GitHub
Fix stale value when conditionally accessing stale signal by marvinhagemeister · Pull Request #127 · preactjs/signals
This PR addresses an issue where a stale conditional value would not be refreshed. In the example below the b signal wasn't updated upon re-activation.
const a = signal(0);
const b = computed((...
const a = signal(0);
const b = computed((...
🔥4