Добро пожаловать! Счастлив видеть вас в седьмой части моей серии резюме Vuejs Amsterdam Conference 2022, в которой я делюсь с вами кратким изложением всех докладов.
Вы можете прочитать мою серию статей JSWorld Conference 2022 Summary (в четырех частях) здесь, где я подвел итоги всех докладов первого дня. Вы также можете найти предыдущие доклады конференции Vue Amsterdam 2022 в моем блоге.
(Повторяющееся) введение
Спустя два с половиной года JSWorld и конференция Vue Amsterdam снова прошли в Театральном Амстердаме с 1 по 3 июня, и у меня был шанс посетить эту конференцию впервые. Я узнал много нового, встретил много замечательных людей, пообщался с отличными разработчиками и прекрасно провел время. В первый день проходила конференция JSWorld, а во второй и третий дни — Vue Amsterdam.
Конференция была полна информации с замечательными докладчиками, каждый из которых научил меня чему-то ценному. Все они хотели поделиться своими знаниями и информацией с другими разработчиками. Поэтому я подумал, что было бы здорово, если бы я мог продолжать делиться ими и помогать другим использовать их.
Сначала я пытался поделиться несколькими заметками или слайдами, но чувствовал, что это недостаточно хорошо, по крайней мере, не так хорошо, как то, чем делился со мной докладчик. Поэтому я решил пересмотреть каждую речь, погрузиться в них глубже, поискать, сделать заметки и объединить их со слайдами и даже с их точными словами в речи, а затем поделиться этим с вами, чтобы то, чем я поделюсь с вами, было хотя бы на том же уровне, что и то, что я узнал от них.
Очень важный момент
Все, что вы прочитаете в этих нескольких статьях, является результатом усилий и времени самого оратора, а я лишь попытался выучить их, чтобы потом превратить в эти статьи. Даже многие предложения, написанные в этих статьях, являются именно тем, что они сказали или что они написали в Слайдах. Это означает, что если вы узнаете что-то новое, то только благодаря их усилиям.
И последнее, но не менее важное: возможно, я не буду вникать в каждую техническую деталь или живой код в некоторых выступлениях. Но если вам интересно и нужно больше информации, дайте мне знать, и я постараюсь написать более подробную статью отдельно. Также не забудьте заглянуть в их Twitter/Linkedin.
Здесь вы можете найти программу конференции:
JSWORLD Conference
The Nuxt Web
Себастьен Шопен — сооснователь Nuxt
Наша миссия в @nuxtlabs — предоставить лучший опыт разработчиков для обеспечения лучшего пользовательского опыта для ваших конечных пользователей. Мы делаем это с помощью Nuxt уже шесть лет.
Nuxt — это веб-фреймворк для создания любых приложений на Vue. Это означает, что вы можете делать:
- Рендеринг на стороне сервера (SSR)
- Генерация статических сайтов (SSG)
- Рендеринг на стороне клиента (CSR)
- Edge Side Rendering (ESR) благодаря Nuxt 3
С момента запуска Nuxt в октябре 2016 года он был загружен около 46M раз на npm, имеет 300k живых сайтов и 18k контрибьюторов на GitHub.
Сравнение между Nuxt 2 и Nuxt 3
- Веб-сервер: Для веб-сервера разработки и производства Nuxt 2 использует to connect, который является ядром Express.js, но для Nuxt 3 они создали h3, и он работает в любой среде JavaScript.
- Bundler: Webpack 4 используется в Nuxt 2, а для Nuxt 3 они начали с Webpack 5, но после выхода Vite, он официально поддерживается как бандлер по умолчанию.
- UI фреймворк: Vue 2 в Nuxt 2 и Vue 3 в Nuxt 3.
- Библиотека маршрутизации: Vue Router 3 в Nuxt 2 и Vue Router 4 в Nuxt 3, которая не будет включена, если не найден каталог
pages/. - Мета-управление: Поскольку Nuxt делает SSR, важно иметь возможность управлять мета-тегами. Vue Meta используется в Nuxt 2, а VueUse Head в Nuxt 3.
- Server(less) packager: Он появился в Nuxt 3, который уплотняет приложение nuxt для производства, удаляя node_modules, так что ваше приложение Nuxt будет около 1 мегабайта.
Это сравнение размера пакета hello world между Nuxt 2 и Nuxt 3:
Одна из причин, по которой Nuxt 3 настолько меньше, заключается в том, что он, как и Vue 3, является древовидным. Поэтому если вы не используете какую-то функцию, она не будет включена в пакет.
Размер эквивалентного пакета Next составляет около 80 кБ.
В этой связке Nuxt 3 JS 25,3 КБ от Vue, а оставшиеся 8,7 КБ включают в себя:
- Ввод приложения с гидратацией
- Корневой компонент с
<Suspense> - Универсальный и легкий маршрутизатор:
useRouter(),middlewareи<NuxtLink> - Головные композитные & компоненты:
useHead(),<Title>,<Meta>,<Script>, … - Универсальная выборка данных:
$fetch() - Страницы ошибок по умолчанию:
404и500.
Рендеринг по краям
Edge Side Rendering — также названный Райаном Далом контейнерами JavaScript — это возможность запуска JavaScript на узлах CDN где-то по всему миру, недалеко от конечного пользователя.
Преимущества:
- Запуск в миллисекундах от конечного пользователя
- Холодный старт за 0 мс
- Нет серверов для обслуживания
- Автоматическое масштабирование
- Доступный
Некоторые из поставщиков граничных вычислений в настоящее время:
- CloudFlare Workers
- Vercel Edge
- Netlify Edge
- Deno Deploy
- Lambda Edge
- StackPath
Content V2
Nuxt Content — это модуль Nuxt, который читает файлы Markdown, YAML, CSV и JSON в директории content/ для создания мощного слоя данных для вашего приложения. Сейчас вышла версия Content V2 с дополнительными возможностями.
Nuxt 2.X
Что ожидается в Nuxt 2.X:
- Vue 2.7
- Nuxt Bridge (бета-версия)
- Vite
- Nitro
- API композиции & настройка сценариев
- TypeScript
- nuxi CLI
- PostCSS 8
Nuxt 3.0
Что ожидается в Nuxt 3.0:
- Nuxt Image
- Гибридный рендеринг: Сервер + SWR + предварительный рендеринг
- Полная статическая генерация
- Режим предварительного просмотра
- Серверные сессии и аутентификация
- Рабочие службы (PWA)
- SEO-помощники и поддержка i18n
Конец восьмой беседы
Я надеюсь, что вам понравилась эта часть, и она может оказаться для вас такой же ценной, как и для меня.
В течение следующих нескольких дней я поделюсь с вами остальными докладами. Оставайтесь с нами…