6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 1)

Привет! Меня зовут Наташа Калачева. Я Frontend-разработчик в компании AGIMA. Vue — один из самых популярных фреймворков JS, его используют для разработки SPA и PWA. А его главные плюсы — это понятная, четкая документация, готовая структура и низкий порог входа.Тем не менее, Frontend сегодня — это сложные приложения, которые содержат не только красивые элементы интерфейса, но и большую часть логики и функциональности всего продукта. Это требует от нас тщательного планирования и организации проекта, чтобы сделать его масштабируемым и простым.В этой статье поделюсь правилами, которых придерживаюсь в работе и которые помогают упростить поддержку и расширение приложения. Мы рассмотрим, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.

Следуя этим рекомендациям, вы сможете создавать более эффективные проекты. Читать далее
https://habr.com/ru/post/722332/?utm_campaign=722332&utm_source=habrahabr&utm_medium=rss

6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 2)

Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue. Первые 3 принципа я опубликовала вчера. Здесь еще 3. Читать далее
https://habr.com/ru/post/722568/?utm_campaign=722568&utm_source=habrahabr&utm_medium=rss

Создание простого SPA на VueJs с использованием CMS Strapi

Данное руководство составлено на основе некоторого опыта, который был получен из книг и официальной документации. Вашему вниманию будет представлено 2 варианта написания простых в поддержке сайтов на Vue.js (с использованием backend систем и без). В первой части будет изложена инструкция по экспресс созданию сайта - галереи с использованием статичных JSON файлов для хранения данных сайта. Во второй части мы рассмотрим более сложный вариант, с использованием опен сорс CMS решения для управления данными сайта. Весь код в данном руководстве представлен в синтаксисе javascript/hml/css и bash. Читать далее
https://habr.com/ru/post/723676/?utm_campaign=723676&utm_source=habrahabr&utm_medium=rss

[Перевод] Ionic Capacitor Vite, Vue (в 4-х частях)

Capacitor — это нативный рантайм с открытым исходным кодом для создания приложений Web Native. Создавайте кроссплатформенные iOS, Android и Progressive Web Apps (PWA) с помощью JavaScript, HTML и CSS.Vite — это инструмент сборки, цель которого — обеспечить более быструю и экономную разработку современных веб-проектов. Он состоит из двух основных частей: сервер dev и команда build. За 8 минут я объясняю, как создать проект vue js с помощью vite, преобразовать его в мобильное приложение и развернуть его на симуляторе с live-reload для эффективного процесса разработки. Читать далее
https://habr.com/ru/post/725382/?utm_campaign=725382&utm_source=habrahabr&utm_medium=rss

[Перевод] Как использовать пропсы для передачи данных дочерним компонентам в Vue 3

По традиции делимся полезными переводными материалами во frontend-разработке. В этот раз frontend-специалист SimbirSoft Никита сделал выбор в пользу материалов Nwose Lotanna, опубликованных на сайте blog.logrocket.com. С разрешения автора мы перевели статью, в которой он рассказывать о способах использования пропсов для передачи данных дочерним компонентам в Vue 3.Примечание автора: Данная статья последний раз была обновлена 15 декабря 2022, чтобы отразить обновления, добавленные в Vue 3.Пропсы — это важная фича в Vue для управления родительскими и дочерними компонентами, однако взаимодействие с ними может быть довольно мудреным. В этой статье мы изучим, как передавать данные из родительского компонента в дочерний с использованием пропсов в Vue 3. Весь код из этой статьи вы можете найти на GitHub. Что ж, начнем! Читать далее
https://habr.com/ru/post/725506/?utm_campaign=725506&utm_source=habrahabr&utm_medium=rss

Как мы увеличили скорость работы сайта в 10 раз

Полностью обновили код и разработали дизайн сайта alta-profil.ru. Сделали его удобнее, быстрее и информативнее для пользователей. В этом кейсе расскажем об обновлении сайта: что делали, с какими проблемами столкнулись и как их решали. Читать далее
https://habr.com/ru/post/725880/?utm_campaign=725880&utm_source=habrahabr&utm_medium=rss

Адаптивный и многоязычный компонент футера для Vue 3: создание и использование

Вы занимаетесь блогингом или созданием контента на нескольких языках? Или у вас есть множество социальных медиа-аккаунтов, которыми вы хотите поделиться? Тогда вам понравится этот адаптивный и многоязычный компонент футера для Vue 3!Данный компонент футера разработан с учетом удобства использования, а также адаптивности и настраиваемости. Он автоматически отображает социальные ссылки и иконки на нужном языке и подходящем типе устройства. Минималистический дизайн футера позволяет пользователю сосредоточиться на главном содержимом страницы. Компонент прост в использовании, а его адаптивность гарантирует хороший внешний вид на любом устройстве и размере экрана. Читать далее
https://habr.com/ru/post/726242/?utm_campaign=726242&utm_source=habrahabr&utm_medium=rss

Pinia scoped стор

На сегодняшний день все стейт-менеджеры экосистемы Vue предоставляют глобальное централизованное хранилище, привязанное к корню приложения. Однако у текущей системы есть одно важное ограничение - глобальные модули стора не позволяют создавать независимые состояния для инстансов одного компонента/модуля.Предлагаемое автором решение - узконаправленные, локальные сторы, привязанных к конкретному инстансу модуля или просто Pinia scoped стор. Читать далее
https://habr.com/ru/post/726452/?utm_campaign=726452&utm_source=habrahabr&utm_medium=rss

Как мы разрабатывали браузерную игру: взгляд со стороны frontend-архитектора

Многие компании сегодня всячески пытаются мотивировать и удерживать своих сотрудников. Поэтому все чаще мы слышим о геймификации как о процессе, который позволяет значительно улучшить показатели вовлеченности, повысить продажи, заинтересовать и превратить ежедневную рутину в увлекательный игровой процесс. Мы в SimbirSoft приняли участие в разработке такого игрового приложения. Я Антон, руководитель Архитектурного комитета SimbirSoft, и в этой статье я расскажу о полученном опыте с точки зрения технологических особенностей реализации frontend-части. Читать далее
https://habr.com/ru/post/726512/?utm_campaign=726512&utm_source=habrahabr&utm_medium=rss

Декомпозиция и интерфейс vue-компонентов

В большом vue-приложении всегда есть необходимость в декомпозиции компонентов и их логики. В статье приводятся размышления и некоторые выводы относительно подходов к декомпозиции vue-компонентов и их интерфейсу. Читать далее
https://habr.com/ru/articles/719980/?utm_campaign=719980&utm_source=habrahabr&utm_medium=rss

6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 1)

Привет! Меня зовут Наташа Калачева. Я Frontend-разработчик в компании AGIMA. Vue — один из самых популярных фреймворков JS, его используют для разработки SPA и PWA. А его главные плюсы — это понятная, четкая документация, готовая структура и низкий порог входа.Тем не менее, Frontend сегодня — это сложные приложения, которые содержат не только красивые элементы интерфейса, но и большую часть логики и функциональности всего продукта. Это требует от нас тщательного планирования и организации проекта, чтобы сделать его масштабируемым и простым.В этой статье поделюсь правилами, которых придерживаюсь в работе и которые помогают упростить поддержку и расширение приложения. Мы рассмотрим, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.

Следуя этим рекомендациям, вы сможете создавать более эффективные проекты. Читать далее
https://habr.com/ru/companies/agima/articles/722332/?utm_campaign=722332&utm_source=habrahabr&utm_medium=rss

6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 2)

Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue. Первые 3 принципа я опубликовала вчера. Здесь еще 3. Читать далее
https://habr.com/ru/companies/agima/articles/722568/?utm_campaign=722568&utm_source=habrahabr&utm_medium=rss

Создание простого SPA на VueJs с использованием CMS Strapi

Данное руководство составлено на основе некоторого опыта, который был получен из книг и официальной документации. Вашему вниманию будет представлено 2 варианта написания простых в поддержке сайтов на Vue.js (с использованием backend систем и без). В первой части будет изложена инструкция по экспресс созданию сайта - галереи с использованием статичных JSON файлов для хранения данных сайта. Во второй части мы рассмотрим более сложный вариант, с использованием опен сорс CMS решения для управления данными сайта. Весь код в данном руководстве представлен в синтаксисе javascript/hml/css и bash. Читать далее
https://habr.com/ru/articles/723676/?utm_campaign=723676&utm_source=habrahabr&utm_medium=rss

[Перевод] Ionic Capacitor Vite, Vue (в 4-х частях)

Capacitor — это нативный рантайм с открытым исходным кодом для создания приложений Web Native. Создавайте кроссплатформенные iOS, Android и Progressive Web Apps (PWA) с помощью JavaScript, HTML и CSS.Vite — это инструмент сборки, цель которого — обеспечить более быструю и экономную разработку современных веб-проектов. Он состоит из двух основных частей: сервер dev и команда build. За 8 минут я объясняю, как создать проект vue js с помощью vite, преобразовать его в мобильное приложение и развернуть его на симуляторе с live-reload для эффективного процесса разработки. Читать далее
https://habr.com/ru/companies/otus/articles/725382/?utm_campaign=725382&utm_source=habrahabr&utm_medium=rss

[Перевод] Как использовать пропсы для передачи данных дочерним компонентам в Vue 3

По традиции делимся полезными переводными материалами во frontend-разработке. В этот раз frontend-специалист SimbirSoft Никита сделал выбор в пользу материалов Nwose Lotanna, опубликованных на сайте blog.logrocket.com. С разрешения автора мы перевели статью, в которой он рассказывать о способах использования пропсов для передачи данных дочерним компонентам в Vue 3.Примечание автора: Данная статья последний раз была обновлена 15 декабря 2022, чтобы отразить обновления, добавленные в Vue 3.Пропсы — это важная фича в Vue для управления родительскими и дочерними компонентами, однако взаимодействие с ними может быть довольно мудреным. В этой статье мы изучим, как передавать данные из родительского компонента в дочерний с использованием пропсов в Vue 3. Весь код из этой статьи вы можете найти на GitHub. Что ж, начнем! Читать далее
https://habr.com/ru/companies/simbirsoft/articles/725506/?utm_campaign=725506&utm_source=habrahabr&utm_medium=rss

Как мы увеличили скорость работы сайта в 10 раз

Полностью обновили код и разработали дизайн сайта alta-profil.ru. Сделали его удобнее, быстрее и информативнее для пользователей. В этом кейсе расскажем об обновлении сайта: что делали, с какими проблемами столкнулись и как их решали. Читать далее
https://habr.com/ru/articles/725880/?utm_campaign=725880&utm_source=habrahabr&utm_medium=rss

Адаптивный и многоязычный компонент футера для Vue 3: создание и использование

Вы занимаетесь блогингом или созданием контента на нескольких языках? Или у вас есть множество социальных медиа-аккаунтов, которыми вы хотите поделиться? Тогда вам понравится этот адаптивный и многоязычный компонент футера для Vue 3!Данный компонент футера разработан с учетом удобства использования, а также адаптивности и настраиваемости. Он автоматически отображает социальные ссылки и иконки на нужном языке и подходящем типе устройства. Минималистический дизайн футера позволяет пользователю сосредоточиться на главном содержимом страницы. Компонент прост в использовании, а его адаптивность гарантирует хороший внешний вид на любом устройстве и размере экрана. Читать далее
https://habr.com/ru/articles/726242/?utm_campaign=726242&utm_source=habrahabr&utm_medium=rss

Pinia scoped store

На сегодняшний день все стейт-менеджеры экосистемы Vue предоставляют глобальное централизованное хранилище, привязанное к корню приложения. Однако у текущей системы есть одно важное ограничение - глобальные модули стора не позволяют создавать независимые состояния для инстансов одного компонента/модуля.Предлагаемое автором решение - узконаправленные, локальные сторы, привязанных к конкретному инстансу модуля или просто Pinia scoped store. Читать далее
https://habr.com/ru/articles/726452/?utm_campaign=726452&utm_source=habrahabr&utm_medium=rss

Как мы разрабатывали браузерную игру: взгляд со стороны frontend-архитектора

Многие компании сегодня всячески пытаются мотивировать и удерживать своих сотрудников. Поэтому все чаще мы слышим о геймификации как о процессе, который позволяет значительно улучшить показатели вовлеченности, повысить продажи, заинтересовать и превратить ежедневную рутину в увлекательный игровой процесс. Мы в SimbirSoft приняли участие в разработке такого игрового приложения. Я Антон, руководитель Архитектурного комитета SimbirSoft, и в этой статье я расскажу о полученном опыте с точки зрения технологических особенностей реализации frontend-части. Рассмотрим большое количество нестандартных элементов игрового интерфейса и общие требования и ограничения к frontеnd-части приложения (архитектура, model, service, store и т.д.). Поделюсь, как реализовали:— набор визуальных элементов приложения;— элементы пагинации;— сложный компонент на примере кнопки;— составной компонент на примере g-card-list;— анимацию. Читать далее
https://habr.com/ru/companies/simbirsoft/articles/726512/?utm_campaign=726512&utm_source=habrahabr&utm_medium=rss

Big State Managers Benchmark

Здравствуйте, меня зовут Дмитрий Карловский и я.. большой любитель физики высоких энергий. Сталкиваешь такой совершенно разные вещи между собой, и смотришь на бабахи, уплетая поп-корн.Так как в Реакте всё очень плохо с архитектурой, а страдают от него многие, то к настоящему времени появилось уже очень много так называемых менеджеров состояний. И каждый наперебой уверяет, что он самый быстрый, самый надёжный, самый компактный, самый выразительный и вообще самый правильный.Что ж, давайте возьмём их всех и столкнём лбами друг с другом и с суровой реальностью, чтобы узнать кто же на самом деле тут батя! Мне больше 18 и я готов к последствиям
https://habr.com/ru/articles/707600/?utm_campaign=707600&utm_source=habrahabr&utm_medium=rss

Открываем и закрываем модалки на Vue Composition API

Предыстория этой статьи простая. На одном из моих проектов я заметил, что мы с двумя коллегами частенько пишем очень похожие функции open/close/toggle для модалок, табов и других подобных элементов. В относительно среднем по количеству страниц/компонентов/коду проекте я нашел примерно 25 реализаций этих функций. Конечно, в некоторых случаях мы не просто что-то открываем, но и выполняем какие-либо сайд эффекты, например, отправляем события. Само по себе это боли не доставляет, а к особым поборникам DRY мы явно не относимся. Однако мне стало интересно, что может предложить Composition API, чтобы не писать каждый раз даже лишние пару-тройку строк кода. Читать далее
https://habr.com/ru/articles/708562/?utm_campaign=708562&utm_source=habrahabr&utm_medium=rss