tgoop.com/super_oleg_dev/53
Last Update:
Привет!
Наконец-то добрался рассказать про релиз Nuxt 3 Release Candidate.
Кстати, апрель был полон новостей про мета-фреймворки: была презентация мета-фреймворка RedwoodJS и интерактивный доклад от Рича Харриса про будущее SvelteKit.
Мне очень интересно, как развиваются Redwood и SvelteKit, но рассказывать всегда стараюсь про что-то, что меня вдохновило.
У Redwood крутые интеграции с GraphQL и Storybook, SvelteKit показывает отличный DX с Vite, Рич предлагает ряд интересных идей.
Но все-равно, в обоих фреймворках очень много спорных концепций, особенно по поводу file-system конвенций именования файлов, и совершенно никаких механизмов для разработки больших и сложных приложений.
Пример таких механизмов, позволяющих разделять приложения на строительные блоки, и разделять ответственность - Dependency Injection и модули, плагины, да даже миддлвары (никогда больше!).
А вот релиз Nuxt очень меня вдохновил, по двум причинам: система модулей и целая экосистема для создания инструментов, унифицированных под разные бандлеры.
Начнем с модулей, но немного издалека.
Фреймворк tramvai дает пользователям возможность создавать модули, благодаря использованию DI. Пример таких модулей, которые отвечают за независимый друг от друга функционал - seo, http-client, cookie, metrics.
Решили делать интеграцию с react-query - создали обертку и модуль, подключение одной строкой кода которого дает пользователю все необходимые возможности для использования.
И так добавляется практически любой функционал.
Поэтому меня так порадовал похожий функционал в Nuxt - фреймворк дает хуки жизненного цикла сборки и рантайма приложения, и все необходимое для их конфигурации - и на самом деле это уже очень мощный инструмент, даже без DI.
Потому что одна из главных задач любого фреймворка - это дать понятный и контролируемый жизненный цикл приложения, и удобную возможность встраиваться на его разные этапы.
Варианты инициализации, которые мы можем увидеть во многих React приложениях, состоящие из пары этапов - инициализация стейта, добавление провайдеров, рендер - хороши для старта, но не масштабируются.
Кстати, очень лаконичный пример модуля Nuxt, добавляющего css link на страницу:
export default defineNuxtModule({
setup (options, nuxt) {
nuxt.options.css.push('font-awesome/css/font-awesome.css')
}
})
tramvai модуль будет более многословным из-за синтаксиса провайдеров и заранее заданной гибкости (можно добавить от инлайн скрипта до мета-тега, и расположить их в один из слотов от начала head до конца body):
@Module({
providers: [{
provide: RENDER_SLOTS,
multi: true,
useValue: {
slot: ResourceSlot.HEAD_CORE_STYLES,
type: ResourceType.style,
payload: 'font-awesome/css/font-awesome.css',
}
}]
})
class FontAwesdomeModule {}
В других фреймворках, возможности намного более примитивны.
Remix предлагает экспортировать свойство links, в Next вообще возможен только прямой импорт файла, а для мета-тегов предлагается решение вида все-в-React.
Идем дальше!
BY SuperOleg dev notes
Share with your friend now:
tgoop.com/super_oleg_dev/53