​Создание, тестирование и деплой одностраничного приложения с помощью Vue 3 + Vite и Pinia

В этом руководстве подробно описаны шаги по созданию функционального примера одностраничного приложения книжного магазина с использованием Vue 3 и запуска его с помощью Vite. Оно также включает подробности о том, как добавить управление состоянием с помощью Pinia (альтернатива Vuex) и маршрутизацию с помощью Vue Router .

https://dev.to/andreirusu_/create-test-and-deploy-a-single-page-app-with-vue-3-vite-and-pinia-5097

#vue #spa #pinia #vite

​Как создать роутер для пользовательского приложения SPA

Если вы разрабатывали SPA, то знаете о необходимости обработки несколько страниц в одностраничном приложении, как бы странно это не показалось. А если работали с React, то должны быть знакомы и с React Router, которая решает эту задачу.

Но в этой статье речь пойдёт о способе, который позволит вам избежать необходимости подключения лишней библиотеки, дав вам возможность использовать собственный маршрутизатор на ванильном JS. Подробнее в статье:

https://www.wiktorwisniewski.dev/blog/how-to-create-router-library

#spa #javascript

​Одностраничные приложения: полное руководство

Одностраничники уже плотно вошли в нашу жизнь и значительно её облегчили как с точки зрения разработчиков, так и пользователей. Если вы ещё не работали с SPA, то самое время познакомиться поближе с этой технологией и начать внедрять её в свои проекты:

https://www.keycdn.com/blog/single-page-application

#spa

Разработка одностраничного приложения с помощью Flask и Vue.js

Ловите пошаговое руководство по настройке базового CRUD-приложения с помощью Vue и Flask. Здесь вы начнёте с создания каркасов нового приложения Vue, а затем перейдёте к выполнению основных операций CRUD с помощью внутреннего RESTful API, работающего на Python и Flask.

К концу работы над проектом вы научитесь работать с Flask, Vue, RESTful API, подключать фронтенд к бэкенду, использовать маршрутизацию и многое другое. Начинаем здесь:

https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/

#flask #vue #spa

​ SSR и SEO в SPA

Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега <head> менялось в зависимости от URL.

Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.

#spa #seo #vue

​​SEO от А до Я для веб-разработчиков

В этом ролике рассмотрели основные принципы SEO-оптимизации для веб-разработчиков. Основы SEO-оптимизации, мета теги, чпу, open graph seo, canonical ссылки, sitemap, robots.txt, микроразметка, краулинговый бюджет, ssr vs spa: https://youtu.be/JU79n3yU1aA

#spa #seo

Разница между SPA и PWA

Мы часто сталкиваемся с терминами SPA (Single Page Application) и PWA (Progressive Web App). Давайте разберемся, что они означают и в чем их основные отличия.

SPA — это веб-приложение, которое загрузится однажды и будет динамически обновлять контент на странице без необходимости перезагрузки. Это значит, что после начальной загрузки сайта пользователю не нужно ожидать, пока загрузится новая страница. Все взаимодействия происходят на одном HTML-документе, что делает работу с приложением более плавной и быстрой. Примеры SPA: Gmail, Google Maps.

Для создания простого SPA можно использовать библиотеки или фреймворки, такие как React или Vue.js. Вот небольшая структура на React:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
            <p>Это простое SPA приложение.</p>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

PWA — это приложение, которое использует возможности современных веб-технологий, чтобы обеспечить пользователям функциональность, схожую с нативными приложениями. PWA могут работать офлайн, отправлять push-уведомления и устанавливаться на устройство как обычные приложения. Это достигается с помощью таких технологий, как service workers и манифест приложения.

Для создания простого PWA вам нужно добавить файл манифеста и service worker. Пример манифеста:

{
    "name": "Мое PWA приложение",
    "short_name": "PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Основные отличия:

1. SPA нацелено на улучшение пользовательского опыта за счет динамической загрузки данных, в то время как PWA — на создание полноценного приложения, доступного на разных устройствах и с функциональностью, как у нативных приложений.

2. SPA может быть частью PWA. PWA включает все возможности SPA и добавляет дополнительные функции, такие как работа в офлайн-режиме, установка на устройство и поддержка push-уведомлений.

3. SPA чаще всего использует JavaScript-библиотеки и фреймворки (React, Angular, Vue), тогда как PWA требует дополнительных технологий, таких как сервисные работники и манифесты.

#простымисловами #spa #pwa

SEO от А до Я для веб-разработчиков

В этом ролике рассмотрели основные принципы SEO-оптимизации для веб-разработчиков. Основы SEO-оптимизации, мета теги, чпу, open graph seo, canonical ссылки, sitemap, robots.txt, микроразметка, краулинговый бюджет, ssr vs spa.

#spa #seo

SPA-переходы без фреймворков: асинхронная смена страниц с клонированием DOM

Главная сложность плавных переходов между страницами — нужно одновременно держать в DOM старую и новую страницу, чтобы анимировать их crossfade. Готовые решения скрывают эту механику, но если требуется тонкая настройка, лучше разобраться, как всё устроено внутри.

В туториале показывают, как собрать лёгкий SPA-роутер на чистом JS, GSAP и Vite. Ключевой приём: клонировать контейнер, подгрузить HTML новой страницы, запустить параллельную анимацию и только потом удалить старый DOM.

Помимо роутинга с перехватом кликов и обработкой popstate, разбирают организацию страниц как модулей с init/cleanup, анимацию входа для элементов и блокировку повторных переходов.

В результате вы получаете полностью контролируемую систему, которую можно расширять под любые эффекты — от простого fade до сложных кинематографичных переходов.

Детали и код — в материале.

#spa #javascript #vite

Как измерить Core Web Vitals в SPA, где переходы не перезагружают страницу

Классическая беда одностраничников: роутер меняет содержимое, а для браузера это всё та же первая загрузка. LCP, CLS и INP посчитаны один раз при входе, дальнейшие переходы не мерит никто. Отсюда и метрики, в которые никто в команде не верит.

С Chrome 151 Soft Navigations работает без флага. Проверка поддержки и подписка выглядят так:

```if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
new PerformanceObserver(console.log)
.observe({ type: 'soft-navigation', buffered: true });
}```

Дальше логика простая. В каждой записи есть name — URL, к которому относится новый экран, и navigationId — уникальный идентификатор перехода, потому что один и тот же URL за жизнь приложения можно открыть десять раз. Получили запись — финализируйте метрики предыдущего экрана, отправьте их под старым URL и начинайте копить заново.

LCP для мягкой навигации приходит через interaction-contentful-paint, а у самой записи soft-navigation есть getLargestInteractionContentfulPaint() — он вернёт крупнейший такой пейнт, чтобы не буферизовать записи вручную.

Главное — не сравнивайте новые цифры со старыми напрямую. Они почти наверняка окажутся хуже, но не потому, что вы что-то сломали: эти переходы просто впервые попали под замер. Соберите пару недель параллельно и только потом делайте выводы.

https://developer.chrome.com/docs/web-platform/soft-navigations

#перформанс #spa

ИИ-краулер видит вместо вашего сайта пустой div

Откройте клиентски отрисованный сайт в браузере: всё на месте, герой отрисован, навигация работает. Теперь заберите тот же URL так, как это делает автомат, обычным GET без браузера и движка JavaScript. В ответе почти пусто: <div id="root"></div>, пара тегов <script> и никакого человеческого текста.

Раньше с этим мирились. Теперь заметная доля клиентов на ваших URL это краулеры за ответами ИИ: GPTBot, ClaudeBot, PerplexityBot, Google-Extended и фетчеры, которые обслуживают режимы поиска в вебе и живые цитаты. Многие читают начальный HTML и на этом останавливаются. Если контент появляется только после бандла, для них его не существует.

Разбор раскладывает начальный HTML на три состояния и помогает понять, в каком из них ваш сайт. Проверить себя можно одной командой curl прямо сейчас.

#spa