Уже скоро мы можем увидеться на митапе в Ростове-на-Дону
Обсудим мультиязычность при реализации сайтов и приложений при помощи Strapi
Please open Telegram to view this post
VIEW IN TELEGRAM
3❤14🔥6
MSK VUE.JS News
Всем приветы🌚 Создадим активность в этом чатике! Пришло время объявить третьего спикера – Влад Худяков 👏 О чем будет доклад Влада: Все мы по-разному используем Nuxt. Где-то хватает статичных страниц, которые поддерживает команда разработчиков. Но если…
Всем хай, вернулся в строй после первого долгого отпуска. Попутно афигенская новость:
Запись моего доклада по конструктору сайта на vue.js с конфы Msk Vue подъехала. В основе бэка кстати лежит Laravel как собственный такой Headless
Кто не был - есть возможность посмотреть на ютубе. Будут вопросики задавайте через комментарии этого поста - отвечу :)
Теперь ждем запись с Ростова, где в презе была инструкция как собрать мультиязычный сайт-конструктор на Strapi 5 :)
Запись моего доклада по конструктору сайта на vue.js с конфы Msk Vue подъехала. В основе бэка кстати лежит Laravel как собственный такой Headless
Кто не был - есть возможность посмотреть на ютубе. Будут вопросики задавайте через комментарии этого поста - отвечу :)
Теперь ждем запись с Ростова, где в презе была инструкция как собрать мультиязычный сайт-конструктор на Strapi 5 :)
2❤11🔥8
Всем доброго вечера пятнички!
Наверняка вы еще за пк, или по пути домой - а значит, что можно послушать запись доклада по теме: Многоязычный контент на Strapi 5 (i18n)
На примерах, которые я показываю в докладе можно получить не только мультиязычное API, но и возможность реализовать конструктор блоков сайта и применить в работе.
Саму презентацию прикрепляю после поста, что бы было нагляднее повторять по шагам.
Будут вопросы - велком в комментарии - разберем
Наверняка вы еще за пк, или по пути домой - а значит, что можно послушать запись доклада по теме: Многоязычный контент на Strapi 5 (i18n)
На примерах, которые я показываю в докладе можно получить не только мультиязычное API, но и возможность реализовать конструктор блоков сайта и применить в работе.
Саму презентацию прикрепляю после поста, что бы было нагляднее повторять по шагам.
Будут вопросы - велком в комментарии - разберем
🔥10
Как превратить выставочный стенд в источник заявок?
За 3 дня — от дизайна до релиза мы запустили интерактивный квиз для стенда ГК Практика на форум 100+ TechnoBuild.
Нарисовали адаптивный дизайн и реализовали его для десктопа и мобильных устройств.
Сотрудники работали с планшета, а посетители могли пройти тест со своих телефонов по QR-коду.
Квиз определяет специализацию участника, валидирует выбранные ответы и сохраняет всё в в общую таблицу: данные, выбранные варианты и итоговый профиль.
Как результат — поток релевантных лидов и готовая аналитика по интересам аудитории без ручной обработки.
При реализации использовали Vue3 и Laravel, такой стек используем для запуска маркетинговых активностей, сервисов, админок, личных кабинетов и реализации CRM-систем.
Админка для сайта-конструктора кстати позволяет собирать поля и компоненты аналогично Strapi, позволяя расширять базу компонентов
Рассказать вам как утроено наше решение при реализации сайта конструктора из админки?
За 3 дня — от дизайна до релиза мы запустили интерактивный квиз для стенда ГК Практика на форум 100+ TechnoBuild.
Нарисовали адаптивный дизайн и реализовали его для десктопа и мобильных устройств.
Сотрудники работали с планшета, а посетители могли пройти тест со своих телефонов по QR-коду.
Квиз определяет специализацию участника, валидирует выбранные ответы и сохраняет всё в в общую таблицу: данные, выбранные варианты и итоговый профиль.
Как результат — поток релевантных лидов и готовая аналитика по интересам аудитории без ручной обработки.
При реализации использовали Vue3 и Laravel, такой стек используем для запуска маркетинговых активностей, сервисов, админок, личных кабинетов и реализации CRM-систем.
Админка для сайта-конструктора кстати позволяет собирать поля и компоненты аналогично Strapi, позволяя расширять базу компонентов
Рассказать вам как утроено наше решение при реализации сайта конструктора из админки?
❤14🔥8
Как выбрать стек для многостраничного сайта, если вы любите Nuxt (Vue JS) 👩💻 ❤️
Все наши проекты строятся по одной модели: Nuxt + API (Headless).
Это не зависит от типа: сайт, сервис, CRM-система или элементарный квиз.
Быстрый интерфейс у нас один и тот же — меняется только инструмент для реализации API.
И именно он определяет, как сайт будет жить и развиваться дальше.
Представьте:
Вы хотите суперкар, но вам в качестве базы рекоммендуют Ладу Приору. Построить что-то можно — но в один момент вы упрётесь в ограничения и будете начинать заново.
И наоборот: вам нужно просто ездить на дачу — и для этого точно не нужна команда инженеров и разработанный кузов с нуля.
Ниже — три самых частых пути, которые мы используем, и задачи, под которые они подходят.
1) Nuxt + WordPress API (WP Engine)
Когда важна скорость и гибкость в изменении контента.
Для компаний, которые только выходят в онлайн или активно ищут своё позиционирование.
Страницы могут меняться каждую неделю, тексты переписываются, гипотезы тестируются.
Что получает бизнес:
— быстрый запуск за вменяемые деньги
— простое, привычное управление страницами
— возможность экспериментировать без разработчиков
🌝 Если вы в поиске решения для старта — это ваш вариант.
2) Nuxt + Strapi
Когда контента становится много и нужен порядок, структура и фильтрация.
Strapi даёт редактору возможность собирать страницы как конструктор: блоки, коллекции, динамические зоны.
Сайт масштабируется, структура остаётся устойчивой, есть удобная мультиязычность.
Что получает бизнес:
— аккуратный, структурный, системный сайт
— самостоятельную сборку страниц из готовых компонентов
— комфортную работу при росте разделов
🌝 Если вы уже знаете, что хотите от сайта — Strapi оптимален.
3) Nuxt + Laravel API
Когда сайт — вторая часть системы, а первая — ваши процессы.
Здесь речь уже не про страницы, а про логику и функциональность: личные кабинеты, рейтинги, калькуляции, интеграции, конструкторы товара.
Сайт становится фасадом продукта или платформы.
Что получает бизнес:
— развитие в любом направлении, подключение интеграций, сбор аналитики
— гибкость в функционале и лёгкое масштабирование структуры
— возможность строить систему, а не витрину
— параллельное развитие, например: сайт + личный кабинет + мобильное приложение
🌝 Если вы строите продукт — Laravel даёт самую устойчивую траекторию.
Общий вывод
Все три решения работают по одному принципу:
отдельный интерфейс на Nuxt (VueJS) + API, который отдаёт данные.
Разница — только в траектории вашего бизнеса:
⭐️ WordPress (WP Engine) — скорость, частые изменения, работа с контентом
⭐️ Strapi — рост, порядок, структура, много типов страниц
⭐️ Laravel — процессы, продукт, долгосрочное развитие
Конечно, есть и другие варианты — например, Python (Django) 🐍 — отличный инструмент, и опыт с ним у нас тоже есть.
Но этот пост в рамках обсуждения того, как Nuxt(VueJS) применим к разным задачам разработки сайтов и сервисов без явного контекста обработки большого количества данных.
#vuejs #frontend_разработка #backend_разработка #spot
Все наши проекты строятся по одной модели: Nuxt + API (Headless).
Это не зависит от типа: сайт, сервис, CRM-система или элементарный квиз.
Быстрый интерфейс у нас один и тот же — меняется только инструмент для реализации API.
И именно он определяет, как сайт будет жить и развиваться дальше.
Представьте:
Вы хотите суперкар, но вам в качестве базы рекоммендуют Ладу Приору. Построить что-то можно — но в один момент вы упрётесь в ограничения и будете начинать заново.
И наоборот: вам нужно просто ездить на дачу — и для этого точно не нужна команда инженеров и разработанный кузов с нуля.
Ниже — три самых частых пути, которые мы используем, и задачи, под которые они подходят.
1) Nuxt + WordPress API (WP Engine)
Когда важна скорость и гибкость в изменении контента.
Для компаний, которые только выходят в онлайн или активно ищут своё позиционирование.
Страницы могут меняться каждую неделю, тексты переписываются, гипотезы тестируются.
Что получает бизнес:
— быстрый запуск за вменяемые деньги
— простое, привычное управление страницами
— возможность экспериментировать без разработчиков
🌝 Если вы в поиске решения для старта — это ваш вариант.
2) Nuxt + Strapi
Когда контента становится много и нужен порядок, структура и фильтрация.
Strapi даёт редактору возможность собирать страницы как конструктор: блоки, коллекции, динамические зоны.
Сайт масштабируется, структура остаётся устойчивой, есть удобная мультиязычность.
Что получает бизнес:
— аккуратный, структурный, системный сайт
— самостоятельную сборку страниц из готовых компонентов
— комфортную работу при росте разделов
🌝 Если вы уже знаете, что хотите от сайта — Strapi оптимален.
3) Nuxt + Laravel API
Когда сайт — вторая часть системы, а первая — ваши процессы.
Здесь речь уже не про страницы, а про логику и функциональность: личные кабинеты, рейтинги, калькуляции, интеграции, конструкторы товара.
Сайт становится фасадом продукта или платформы.
Что получает бизнес:
— развитие в любом направлении, подключение интеграций, сбор аналитики
— гибкость в функционале и лёгкое масштабирование структуры
— возможность строить систему, а не витрину
— параллельное развитие, например: сайт + личный кабинет + мобильное приложение
🌝 Если вы строите продукт — Laravel даёт самую устойчивую траекторию.
Общий вывод
Все три решения работают по одному принципу:
отдельный интерфейс на Nuxt (VueJS) + API, который отдаёт данные.
Разница — только в траектории вашего бизнеса:
⭐️ WordPress (WP Engine) — скорость, частые изменения, работа с контентом
⭐️ Strapi — рост, порядок, структура, много типов страниц
⭐️ Laravel — процессы, продукт, долгосрочное развитие
Конечно, есть и другие варианты — например, Python (Django) 🐍 — отличный инструмент, и опыт с ним у нас тоже есть.
Но этот пост в рамках обсуждения того, как Nuxt(VueJS) применим к разным задачам разработки сайтов и сервисов без явного контекста обработки большого количества данных.
#vuejs #frontend_разработка #backend_разработка #spot
Please open Telegram to view this post
VIEW IN TELEGRAM
💯10❤5🔥3
Как мы убрали “форменный хаос” из страховых процессов
Пару лет назад большинство страховых форм выглядели одинаково громоздко. Клиент должен был вбить тонну данных вручную: ФИО, данные авто, полис, номера, контакты. Все это нужно пропускать через маски, валидации, подключиать Dadata для автозаполнения и чуть ускорить процесс.
Главная проблема - эти формы были на главных страницах страховых без контекста о пользователе.
Сразу ловим ключевую проблему: данные заполняются каждый раз, слетала - придется заполнить заново т.к возможности сохранить черновик нет.
Как решали:
Перенесли форму из страницы сайта в личный кабинет — туда, где есть контекст:
автомобили клиента, действующие полисы, история обращений.
Формы перестали быть анкетами. Добавлены сущности авто и полисов, чтобы система сама знала всё, что человек раньше переписывал рукой. Данные подтягиваются автоматически, уже провалидированы как нам нужно и хранятся как часть профиля.
При наступлении страхового случая путь сокращается.
Не нужно заполнять десятки полей, клиент просто выбирает действующий полис из списка и проходит несколько шагов, где уже всё предзаполнено: владелец, автомобиль, номер полиса. Сфокусироваться нужно только на фактических деталях: дата, место, фото.
Как результат — короткая воронка фиксации ДТП, которая не грузит пользователя и присылает в страховую структурированные данные с которыми можно дальше работать.
Это тот случай, когда цифровой продукт реально меняет операционку: легче людям, быстрее бизнесу, меньше нагрузки на поддержку.
Пару лет назад большинство страховых форм выглядели одинаково громоздко. Клиент должен был вбить тонну данных вручную: ФИО, данные авто, полис, номера, контакты. Все это нужно пропускать через маски, валидации, подключиать Dadata для автозаполнения и чуть ускорить процесс.
Главная проблема - эти формы были на главных страницах страховых без контекста о пользователе.
Сразу ловим ключевую проблему: данные заполняются каждый раз, слетала - придется заполнить заново т.к возможности сохранить черновик нет.
Как решали:
Перенесли форму из страницы сайта в личный кабинет — туда, где есть контекст:
автомобили клиента, действующие полисы, история обращений.
Формы перестали быть анкетами. Добавлены сущности авто и полисов, чтобы система сама знала всё, что человек раньше переписывал рукой. Данные подтягиваются автоматически, уже провалидированы как нам нужно и хранятся как часть профиля.
При наступлении страхового случая путь сокращается.
Не нужно заполнять десятки полей, клиент просто выбирает действующий полис из списка и проходит несколько шагов, где уже всё предзаполнено: владелец, автомобиль, номер полиса. Сфокусироваться нужно только на фактических деталях: дата, место, фото.
Как результат — короткая воронка фиксации ДТП, которая не грузит пользователя и присылает в страховую структурированные данные с которыми можно дальше работать.
Это тот случай, когда цифровой продукт реально меняет операционку: легче людям, быстрее бизнесу, меньше нагрузки на поддержку.
🔥14
This media is not supported in your browser
VIEW IN TELEGRAM
Крути колесо! Как я без слов ушел пилить генератор Колеса фортуны и запилил.
@spot_spin_bot - это свой универсальный mini-app для маркетинга, розыгрышей и предсказаний друзей.
Актуально для скидочек и активностей на Новый год.
Здесь можно создавать свое колесо фортуны для друзей и клиентов, собирай результаты прямо в чат-боте.
При этом можно добавить обязательную подписку на группу для участия/вращения
Примеры использования от бизнеса к простому развлечению:
- Поймай скидку
- За что ты любишь баню?
- Какая Audi тебе подходит?
Добавляем варианты призы/скидки/имена при создании колеса, делимся - профит. Отслеживаем в кабинете активность и результаты.
Лимитов на создание количество таких колес - нет, в кабинете можно создавать и отслеживать результаты, редактировать.
Получился инструмент не только для бизнеса и блогеров, но и для друзей который помогает:
🔥 Увеличивать аудиторию
Участники подписываются на ваш канал, чтобы крутить колесо
🎁 Дарить призы, скидки и эмоции
Настройка: от призов и скидок до примитивного контента
📈 Повышать лояльность
Геймификация позволяет сильнее вовлечь пользователя
⚡️ Вирусное распространение
Участники могут поделиться результатом в виде ссылки с друзьями, не только в tg
На будущее - в работе кросс-платформа, то есть этот мини-апп уедет на другие площадки (vk и др.).
В основе реализация конечно же на Vue 3 и бэкенд на NestJS.
Крутим колесо и получаем скидку на разработку в январе
Такие вот пироги, польза не так ли?
Обсудим, что выпало в комментах!
@spot_spin_bot - это свой универсальный mini-app для маркетинга, розыгрышей и предсказаний друзей.
Актуально для скидочек и активностей на Новый год.
Здесь можно создавать свое колесо фортуны для друзей и клиентов, собирай результаты прямо в чат-боте.
При этом можно добавить обязательную подписку на группу для участия/вращения
Примеры использования от бизнеса к простому развлечению:
- Поймай скидку
- За что ты любишь баню?
- Какая Audi тебе подходит?
Добавляем варианты призы/скидки/имена при создании колеса, делимся - профит. Отслеживаем в кабинете активность и результаты.
Лимитов на создание количество таких колес - нет, в кабинете можно создавать и отслеживать результаты, редактировать.
Получился инструмент не только для бизнеса и блогеров, но и для друзей который помогает:
🔥 Увеличивать аудиторию
Участники подписываются на ваш канал, чтобы крутить колесо
🎁 Дарить призы, скидки и эмоции
Настройка: от призов и скидок до примитивного контента
📈 Повышать лояльность
Геймификация позволяет сильнее вовлечь пользователя
⚡️ Вирусное распространение
Участники могут поделиться результатом в виде ссылки с друзьями, не только в tg
На будущее - в работе кросс-платформа, то есть этот мини-апп уедет на другие площадки (vk и др.).
В основе реализация конечно же на Vue 3 и бэкенд на NestJS.
Крутим колесо и получаем скидку на разработку в январе
Такие вот пироги, польза не так ли?
Обсудим, что выпало в комментах!
🔥7
Хоба! Мы не бросили вью.
Произошел ренейм канала, но я всё так же «Пишу код на Vue.js» — просто масштабы задач выросли и могу дать вам больше экспертизы вне фронта.
За 5 крайних лет сильно изменился мой вектор: от креатива и вёрстки — к сложным системам где совсем не разрулить без бэкенда.
Креатив остался опытом и приятным бонусом, даже в строгих админках и сервисах получается вылизывать плавность и переходы.
Фундамент фронта в проектах все тот же: Vue 3 и его крутейшая экосистема.
Сейчас в фокусе — функционал first и это в большинстве модули для систем и личных кабинетов.
То, что упрощает флоу, закрывает бизнес-потребности и сокращает путь от админа до клиента.
Что будет происходить дальше в канале:
— [#кейсы] Реальные кейсы из продакшена
— [#инструменты] Инструменты и библиотеки, которые применяем
— [#опыт] Факапы и победы
— [#инсайты] Решения, которые удачно сработали
— [#код] Иногда код и песочницы
Есть крутецкое предложение: после публикации кейса (который можно показать изнутри) устраивать публичный мит и показывать его под капотом, важен шеринг опыта - так мы все будем окружены пользой.
Как вам идея?
Произошел ренейм канала, но я всё так же «Пишу код на Vue.js» — просто масштабы задач выросли и могу дать вам больше экспертизы вне фронта.
За 5 крайних лет сильно изменился мой вектор: от креатива и вёрстки — к сложным системам где совсем не разрулить без бэкенда.
Креатив остался опытом и приятным бонусом, даже в строгих админках и сервисах получается вылизывать плавность и переходы.
Фундамент фронта в проектах все тот же: Vue 3 и его крутейшая экосистема.
Сейчас в фокусе — функционал first и это в большинстве модули для систем и личных кабинетов.
То, что упрощает флоу, закрывает бизнес-потребности и сокращает путь от админа до клиента.
Что будет происходить дальше в канале:
— [#кейсы] Реальные кейсы из продакшена
— [#инструменты] Инструменты и библиотеки, которые применяем
— [#опыт] Факапы и победы
— [#инсайты] Решения, которые удачно сработали
— [#код] Иногда код и песочницы
Есть крутецкое предложение: после публикации кейса (который можно показать изнутри) устраивать публичный мит и показывать его под капотом, важен шеринг опыта - так мы все будем окружены пользой.
Как вам идея?
Выпустили в open-source библиотеку для Vue.js
vue-wave-player — аудио плеер голосовых сообщений в стиле Telegram для Vue 3.
Писали изначально для модуля чата, решили поделиться. Волна рендерится на Canvas, весит всего 48.5 kB.
Так же применим для воспроизведения аудио.
Что умеет:
— Canvas-рендеринг с поддержкой Retina
— Перемотка по волне + поддержка touch
— Адаптив от 300px до любой ширины
— Плавная анимация появления волны
— Пауза всех плееров на странице, если воспроизвел один
— Кастомизация цветов и размеров, сетки
— Стили инжектятся автоматически
В каких проектах применить:
— Мессенджеры и голосовые чаты
— Подкаст-платформы
— Образовательные проекты с аудио
— Голосовые заметки и диктофоны
— Музыкальные сервисы
— CRM с записями звонков
Как установить?
Что бы вы добавили в функционал?
🔗 Demo
🔗 npm
🔗 GitHub
#инструменты #vuejs #frontend #github
vue-wave-player — аудио плеер голосовых сообщений в стиле Telegram для Vue 3.
Писали изначально для модуля чата, решили поделиться. Волна рендерится на Canvas, весит всего 48.5 kB.
Так же применим для воспроизведения аудио.
Что умеет:
— Canvas-рендеринг с поддержкой Retina
— Перемотка по волне + поддержка touch
— Адаптив от 300px до любой ширины
— Плавная анимация появления волны
— Пауза всех плееров на странице, если воспроизвел один
— Кастомизация цветов и размеров, сетки
— Стили инжектятся автоматически
В каких проектах применить:
— Мессенджеры и голосовые чаты
— Подкаст-платформы
— Образовательные проекты с аудио
— Голосовые заметки и диктофоны
— Музыкальные сервисы
— CRM с записями звонков
Как установить?
npm i vue-wave-player
Что бы вы добавили в функционал?
🔗 Demo
🔗 npm
🔗 GitHub
#инструменты #vuejs #frontend #github
GitHub
GitHub - khudyakv/vue-wave-player: Audio player with Canvas waveform visualization in Telegram style for Vue 3
Audio player with Canvas waveform visualization in Telegram style for Vue 3 - khudyakv/vue-wave-player
Ребят, прошу хэлпа. Идет второй день тестов приложения в проде:
- поправил возможные прыжки колеса
- добавил статистику по розыгрышу (Для тех кто создает свое колесо для клиентов/друзей)
- увеличил память сервера и RPS
Вчера гадали активно гадали в локальных пабликах на понос и беременность, сегодня отгадываем, что может написать клиент в 6 утра
Ссылка ведет на созданный розыгрыш, можно создавать свои и делиться с клиентами и друзьями, разыгрывать скидки и просто выбирать страну для путешествия.
Подходит для всех отраслей, туризм, недвижимость, авто-тематика и многие другие - типа гендер-пати
Крутите колесо, позже расскажу результаты и покажу как выглядит статистика из админки.
Добавил статистику самых попадающихся призов прямо на страницу результатов для организаторов.
Всем мир! ✌️Делитесь призами в комменты, баги тоже жду, если будут, буду благодарен!❤️❤️❤️❤️❤️❤️
UPD: На данный момент почти 200 пользователей, которые активно принимают участие в тестах :) Лучшие!
- поправил возможные прыжки колеса
- добавил статистику по розыгрышу (Для тех кто создает свое колесо для клиентов/друзей)
- увеличил память сервера и RPS
Вчера гадали активно гадали в локальных пабликах на понос и беременность, сегодня отгадываем, что может написать клиент в 6 утра
Ссылка ведет на созданный розыгрыш, можно создавать свои и делиться с клиентами и друзьями, разыгрывать скидки и просто выбирать страну для путешествия.
Подходит для всех отраслей, туризм, недвижимость, авто-тематика и многие другие - типа гендер-пати
Крутите колесо, позже расскажу результаты и покажу как выглядит статистика из админки.
Добавил статистику самых попадающихся призов прямо на страницу результатов для организаторов.
Всем мир! ✌️Делитесь призами в комменты, баги тоже жду, если будут, буду благодарен!❤️❤️❤️❤️❤️❤️
UPD: На данный момент почти 200 пользователей, которые активно принимают участие в тестах :) Лучшие!
Фронтенд делает бэкенд для фронтенда,
который делает бэкенд для фронтенда...
Короче, прям по кейсу пойдем - нужен бэкенд, который будет безопасно получать данные для авторизации, скроет маршруты и заменит их на свои и вот это все...
В чем сама концепция: встраиваем BFF прямо в Nuxt.
Фронтенд обеспечивает бэкенд сам для себя — один инструмент, фронтендер, фронтендеры вокруг и задача не только в том, что бы не разворачивать отдельный бэк - но и уменьшить расстояние в секундах до конечных данных.
Зачем это нужно?
- Безопасно получать данные для авторизации
- Скрыть реальные API маршруты и заменить их на свои
- Агрегировать данные из нескольких источников
- Кэшировать и оптимизировать запросы
Что даст бизнесу?
1. Повысит бизнес-метрики
- Страница явно быстрее загрузится, без лишних промежуточных запросов в другой сервис/сервер.
- Один прямой запрос, значит легче поддержка и меньше рук необходимо держать.
- Рост конверсии за счет скорости, конечно же >100500%
2. Безопасность
- Токены и ключи хранятся на сервере, не доступны из браузера, значит меньше рисков утечки данных
- Валидация и доп. проверки выполняются на сервере Nuxt
3. Разработка и масштабирование
- Один стек/инструмент, проще поддерживать. Меньше ставка на то, что Петя в понедельник не заболеет.
- Быстрее разработка: можно скопировать прям файлами API и изменить роуты (новости/статьи и пр.)
- Проще инфраструктура сервера, один условный контейнер, вместо двух и более
При росте остается возможность перейти на более сложную архитектуру
Для большинства наших проектов — рабочее решение. Это все таки не инструкция, а подход — используйте, если вы считаете, что вам это под задачи подходит.
Зарубежная преза, по которой можно понять принцип без кода и слов, листать стрелками, ссылка тут
#опыт
Какое слово не понятно в тексте? BFF?
Расшифруй или придумай свое :)
Ну или сколько шакалов у картинки по шкале от 1 до 10?
который делает бэкенд для фронтенда...
Короче, прям по кейсу пойдем - нужен бэкенд, который будет безопасно получать данные для авторизации, скроет маршруты и заменит их на свои и вот это все...
В чем сама концепция: встраиваем BFF прямо в Nuxt.
Фронтенд обеспечивает бэкенд сам для себя — один инструмент, фронтендер, фронтендеры вокруг и задача не только в том, что бы не разворачивать отдельный бэк - но и уменьшить расстояние в секундах до конечных данных.
Зачем это нужно?
- Безопасно получать данные для авторизации
- Скрыть реальные API маршруты и заменить их на свои
- Агрегировать данные из нескольких источников
- Кэшировать и оптимизировать запросы
Что даст бизнесу?
1. Повысит бизнес-метрики
- Страница явно быстрее загрузится, без лишних промежуточных запросов в другой сервис/сервер.
- Один прямой запрос, значит легче поддержка и меньше рук необходимо держать.
- Рост конверсии за счет скорости, конечно же >100500%
2. Безопасность
- Токены и ключи хранятся на сервере, не доступны из браузера, значит меньше рисков утечки данных
- Валидация и доп. проверки выполняются на сервере Nuxt
3. Разработка и масштабирование
- Один стек/инструмент, проще поддерживать. Меньше ставка на то, что Петя в понедельник не заболеет.
- Быстрее разработка: можно скопировать прям файлами API и изменить роуты (новости/статьи и пр.)
- Проще инфраструктура сервера, один условный контейнер, вместо двух и более
При росте остается возможность перейти на более сложную архитектуру
Для большинства наших проектов — рабочее решение. Это все таки не инструкция, а подход — используйте, если вы считаете, что вам это под задачи подходит.
Зарубежная преза, по которой можно понять принцип без кода и слов, листать стрелками, ссылка тут
#опыт
Какое слово не понятно в тексте? BFF?
Расшифруй или придумай свое :)
Ну или сколько шакалов у картинки по шкале от 1 до 10?
❤9