tgoop.com/super_oleg_dev/46
Last Update:
В заголовке статьи присутствует совершенно новый для меня термин - Resumable Javascript. Его подробное объяснение можно прочесть в репозитории фреймворка на github - https://github.com/BuilderIO/qwik/blob/main/docs/RESUMABLE.md, и в этом комментарии - https://dev.to/ryansolid/comment/1lnip к статье про проблемы эффективной гидрации.
Для понимания термина, приводится пример современных фреймворков, которые являются Replayable - после инициализации приложения на сервере, требуется полный replay приложения на клиенте, т.е. процесс гидрации со всеми его минусами.
Resumable фреймворк умеет продолжать работу с разметкой, которую инициализировал сервер, т.е. не требует загружать и исполнять код всего приложения, сравнивать DOM и повторно загружать данные. Вместо этого, в соответствии с действиями пользователя, будет загружаться код, нужный только для реакции на это действие, будь то загрузка данных, SPA переход или обновление HTML на странице.
Qwik делает это возможным благодаря сериализации всех важных данных в HTML разметке, и разделения их на категории:
- Указатели на DOM события
- Состояние компонентов
- Указатели на шаблоны компонентов
- Связи между различными реактивными состояниями
Используя такое разделение, и сериализации всех данных приложения, Qwik реализует точечную ленивую загрузку кода для обработчиков событий, и кода с разметкой компонентов (мой небольшой личный разрыв шаблонов, оказывается код обработчиков событий и код компонентов можно разделить и грузить отдельно!).
Итоговая цель фреймворка - точечная регидрация компонентов вне зависимости от их положения в дереве компонентов приложения. Summary по ленивой загрузке также доступно в репозитории фреймворка - https://github.com/BuilderIO/qwik/blob/main/docs/LAZY_LOADING.md.
Между делом, попался интересный issue - https://github.com/solidjs/solid/issues/264 по поводу Partial Hydration для Solid.js, где автор рассматривает ряд вариантов для реализации фичи, и самой перспективной видит возможность грузить template код компонентов по требованию.
Более подробная статья про то, как Qwik добивается гранулированной загрузки данных - https://dev.to/builderio/qwik-the-answer-to-optimal-fine-grained-lazy-loading-2hdp
Демка todo-app на Qwik - https://stackblitz.com/edit/qwik-todo-demo. В этой демке очень наглядно, при взаимодействии с приложением, загружается по отдельности JS код обработчиков и шаблонов компонентов.
В итоге, не разбирая специально статью Resumable JavaScript with Qwik, мы почти полностью рассмотрели все концепции, которые она затрагивает. Рекомендую к прочтению и комментарии к статьям, в них есть много интересных мыслей.
Например, из интересного, есть twitter тред про Partial Hydration - https://twitter.com/RyanCarniato/status/1489077057942220803, где один из авторов Remix Райан Флоренс говорит о том, что демки не доказывают профита от всех этих сложностей с гидрацией, и в Remix отлично работает подход Progressive Enhancement.
Мне показалось это не очень честным, например можно увидеть значительно большее количество кода у Remix (читай React) демки, чем у Marko и Qwik. Также, сложно назвать это demo приложение чем-то сложным и большим, для настоящих приложений с тяжелыми страницами частичная гидрация принесет еще больше заметной пользы.
Единственное, что мы пока не рассмотрели, это проблемы фреймворка и подхода частичной гидрации. Если коротко:
- Qwik еще сырой
- Документация не полная
- Даже при частичной гидрации есть критичные вещи, которые надо грузить сразу
- Потенциальный waterfall загрузки скриптов, лучше грузить все параллельно или в одном бандле
- Необходимо умное разделение кода, это требует большой работы над тулингом
Думаю это не полный список, и определенно стоит ждать real-world кейсов использования фреймворка.
BY SuperOleg dev notes
Share with your friend now:
tgoop.com/super_oleg_dev/46