VueJS *

Привет! Разбираясь с микрофронтендами в монорепозитории для проекте с Vue3 пришёл к выводу, что так много уделяется внимания гибкости в построении архитектуры и бизнес-задачам, что все боятся заниматься улучшением "условий труда" связанных со сборкой приложения! Решил что эта задачка как раз мне подходит и представляю вашему вниманию небольшую статью которая возможно поможет вам сделать выбор или подтолкнет попробовать новые инструменты сборки фронтенда! Для справки - микрофронтенды у нас на Module Federation, Nx для управления монорепозиторием, общаемся мы через GraphQL, тестируем с Jest и конечно куда без TypeScript. Проект активно развивается, и с ростом его масштабов столкнулись с вопросом: какой сборщик лучше всего справится с нашими задачами? Webpack уже давно с нами, но его медлительность заставляет искать альтернативы. Vite обещает молниеносную разработку, а Rspack — производительность без сложной миграции. Давайте разберёмся, что подойдёт именно нам — и, возможно, вам.

Привет, Хабр! Я - Frontend Developer в МТС Диджитал. Все чаще и чаще я натыкаюсь на сообщения и комментарии пользователей в различных социальных сетях про Server-Side Rendering.

Обычно эти жалобы о том, кто-то недоволен зависимостью Next.js от Node.js-сервера. Кто-то сталкивается с ограничениями динамического роутинга при статической генерации. Исходя из этого некоторые люди писали в комментариях что-то вроде: "Вы же не ожидали, что SSR-фреймворк решит все проблемы разом?"

Большинство моих коллег с других компаний в принципе не понимают зачем я беру Nuxt почти во все свои проекты и задают вопросы. На первый взгляд это вполне логично. Какой смысл брать SSR фреймворк, если ты выключаешь в нем SSR. На примере Nuxt, SSR можно выключить одним булевым флагом в конфиге:

Eslint плагин eslint-plugin-import-group

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

Современные web-фреймворки для реализации управления состоянием используют библиотеки, такие, например, как Redux для React или Pinia для Vue. У традиционной реализации управления состоянием есть недостатки. Store в таком варианте является частью скрипта страницы, и его данные при её перезагрузке теряются. Кроме того, если нам в приложении нужно организовать управление отображением контента в нескольких окнах браузера, оказывается, что традиционный Store не может этого обеспечить.

Каждый PHP-разработчик, работая с современными JavaScript-фреймворками, наверняка задумывался о том, как было бы здорово передавать данные напрямую в компоненты без танцев вокруг контроллеров и типов данных. Арон Френсис, видимо, тоже терзал себя этим вопросом, поэтому 4 февраля 2025 года на своём ютуб-канале представил новую веху развития фронтенда на Laravel — Fusion.  В этом статье мы рассмотрим базовые принципы работы библиотеки и основные нюансы работы с ней.

Приложение позволяет:

• Распознавать и хранить результаты медицинских анализов, МРТ, и других исследований в структурированном виде

• Просматривать динамику показателей в виде графических отчетов

• Составлять аналитические отчеты с помощью искусственного интеллекта

Делал для себя, потом решил расширить аудиторию. Предлагается к попробовать.

Я и сам до конца не знаю, является ли заголовок статьи кликбейтом или нет. Разберёмся в комментариях. Только давайте по-честному! Согласен с тезисами — напиши, что статья огонь, поставь лайк и всё такое. Не согласен — аргументируй, а не просто: «бред»! Есть что добавить (идеи, фишечки) — добро пожаловать в комментарии.

Привет, меня зовут Андрей Шпилевский, и в этой статье я расскажу, почему я делаю тестовое лучше большинства, а также дам советы, как проходить этот этап быстро и максимально эффективно. Тема достаточно большая, поэтому будет разбита на 3 части. Это первая и начну ее я, пожалуй, не с советов: ‘Делай так, спина болеть не будет’, а с лирического вступления, которое, на самом деле, важнее, чем какие-либо пункты.

Представьте, что к вам приходит владелец с видео-концептом новой фичи для клиента, функционал которой отдаленно напоминает космический корабль, а у вас всего два месяца на разработку, и один — на тестирование. Если смогли представить, значит эта статья для вас, а если нет — то и для вас тоже, чтобы заранее знать, как выходить из таких ситуаций.

В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то:

- Prop drilling
- Provide/Inject
- Composition API
- Pinia
- Event Bus

Основано на личном опыте при работе с Cursor AI (и другими платформами)

Используйте по возможности системный промпт. Cursor позволяет иметь .cursorrules файл, в котором можно прописать основные установки по проекту. Пример файла.
Напишите свой и попросите AI улучшить его. Автокомплит его плохо видит, но chat и composer - вполне. По крайней мере, CSS дизайн систему проекта и свои компоненты при генерации кода использует четко.

Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс».

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

В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3.

К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.

Напишем всем известную игру на VueJS, Python и вебсокетах. Можно будет поиграть со случайным соперником и попробовать свои силы с другом.

С Новым годом, друзья! 

Сегодня мы поговорим об одном из интересных инструментов для разработчиков. Omatsuri — это открытая платформа, состоящая из 12 удобных утилит для повседневных задач разработчика. Сайт omatsuri.app выполнен в минималистичном стиле и предлагает интуитивно понятный интерфейс. Это инструмент, который явно создан «с душой» для тех, кто ценит функциональность и простоту.

Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать <Suspense> для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах.
Приступаем к деталям!

Nuxt 3 — это мощный фреймворк на основе Vue, который упрощает разработку серверно-рендерируемых и статически генерируемых веб-приложений. Одна из его особенностей — возможность работы с асинхронными данными с помощью специальных хуков. Они обеспечивают эффективное взаимодействие с API, динамическую загрузку данных и подгрузку контента. Многие знают про эти хуки, но далеко не все используют их потенциал в полной мере. 

Меня зовут Леша Смолыгин, я разработчик в Lamoda Tech. Разберемся, как использовать популярные хуки запроса из коробки useFetch, useAsyncData, $fetch, useLazyAsyncData и реализовать кастомный fetch. Эти инструменты решают задачи, связанные с загрузкой данных из API, при этом каждый из них имеет свои особенности и ограничения. Разберём их и сравним, чтобы понять, какой инструмент лучше подходит для той или иной ситуации в вашем приложении.

Привет, Хабр! На связи команда фронтенд-разработки из ecom.tech. Меня зовут Миша, я занимаюсь разработкой интерфейсов для внутренних сервисов. Например, мы сделали удобное приложение для курьеров-партнёров Самоката, сервис для быстрой работы логистов, интуитивно понятный терминал для складов. 

В этой статье я расскажу, как мы переизобрели взаимодействия с инпутами и написали свою клавиатуру для мобильного приложения – вас ждёт код и пошаговое описание. Поехали!

Как мы создали микросервисное приложение для анализа вакансий с hh.ru: Docker, Kafka, Elasticsearch и ещё немного магии

26 ноября 2024 года вышла новая мажорная версия инструмента для сборки приложений Vite. Это событие особенно примечательно тем, что это первый релиз после анонса VoidZero, где Even You представил грядущее направление развития основных продуктов.

Далее мы рассмотрим ключевые моменты этого обновления.

你好! Меня зовут Дмитрий, я фронтенд-разработчик в компании fuse8. Сегодня мы рассмотрим, как можно проводить валидацию кастомных компонентов в формах из UI-библиотеки ElementPlus.

Если вы работали с формами в ElementPlus, то наверняка знаете, что библиотека предоставляет простой интерфейс для валидации. Но что делать, если в форме используется кастомный компонент и необходимо применить правило валидации, которое передали в форму? С этим и разберёмся.