Оптимизация производительности ssr-приложений

https://habr.com/ru/post/588468/?utm_campaign=588468&utm_source=habrahabr&utm_medium=rss
Кто бы что не говорил о метриках производительности, мол это все ерунда и ни кому кроме гугла не нужно. Но, во-первых, я так не считаю, а во вторых у нас есть заказчики, которым это важно

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

Не буду пересказывать рекламные лозунги про 500% пользователей покидают страницу после 100мс ожидания, увелечения конверсии на 20% при снижении LCP на 2мс… читайте сами. Скажу коротко: метрики производительности важны. Читать дальше →

[Перевод] CSS :has() селектор

https://habr.com/ru/post/662355/?utm_campaign=662355&utm_source=habrahabr&utm_medium=rss
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня. Читать далее

Простой способ создания и переиспользования модальных диалогов во Vue 3

https://habr.com/ru/post/662652/?utm_campaign=662652&utm_source=habrahabr&utm_medium=rss
Модальные диалоги не такая и сложная задача в разработке. Разве что можно легко запутаться в коде, если нужно вызывать модальные окна по цепочке. Но это очень монотонная и неинтересная работа с повторяющейся логикой, которую подчас копируют из компонента в компонет с незначительными изменениями.
Хорошим решением было бы создать функцию, которая принимала бы компонент диалога и управляла бы его рендерингом в шаблоне, а этот диалог можно "промисифицировать" и работать с ним как с асинхронной функцией. Как например в этой библиотеке vue-modal-dialogs. К сожалению она давно не обновлялась и не опддерживает Vue 3.
А еще отличной идеей для организации кода было бы отдельные хуки, код в которых выполнялся бы в зависимости от действий пользователя.
Все это есть в плагине vuejs-confirm-dialog о котором я хочу вам рассказать. Читать дальше →

[Перевод] Тестирование с помощью Vitest

https://habr.com/ru/post/664350/?utm_campaign=664350&utm_source=habrahabr&utm_medium=rss
Vitest — это новая среда тестирования на базе Vite. Он все еще находится в разработке, и некоторые функции могут быть еще не готовы, но это хорошая альтернатива, которую можно попробовать и изучить. Читать далее

Функция Reactive во Vue: как это работает

https://habr.com/ru/post/664506/?utm_campaign=664506&utm_source=habrahabr&utm_medium=rss
После jQuery я попробовал AngularJS и был очарован его возможностями. Несколько строк в AngularJS заменяли кучу спегетти-кода в jQuery. Это было похоже на магию. Сейчас все современные Frontend-фреймворки так или иначе обеспечивают реактивность, и это уже никого не удивляет. Тем не менее далеко не все разработчики понимают, как это работает.Сейчас я работаю с Vue, поэтому и разбираться с тем, как устроены реактивные функции, будем на его примере. Я расскажу, как сделать из простого объекта реактивный, а также немного о том, какие современные возможности JS для этого используются. Читать далее

[Перевод] Pinia vs Vuex: Ананасовый экспресс в светлое будущее

https://habr.com/ru/post/666250/?utm_campaign=666250&utm_source=habrahabr&utm_medium=rss
Pinia vs Vuex: Ананасовый экспресс сижу код пишу! Pinia, легковесная библиотека управления состояниями для Vue.js, приобрела популярность в последнее время. Она использует новую систему реактивности во Vue 3 для создания интуитивно понятной и полностью типизированной библиотеки управления состояниями. Читать далее

Есть много способов сделать это: Vue 3 и взаимодействие компонентов

https://habr.com/ru/post/668072/?utm_campaign=668072&utm_source=habrahabr&utm_medium=rss
Vue 3 принёс в жизнь разработчиков возможность организации более гибкой структуры приложений. Всё чаще я стал замечать, что разные команды, а порой и разработчики внутри одной, используют целый зоопарк сомнительных подходов для организации взаимодействия между компонентами. Применяются какие-то крайности, либо всё в state manager, либо в composable (composition API), либо мутация props внутри дочерних компонентов!Хотелось бы поднять эту тему и рассмотреть варианты взаимодействия компонентов доступные нам во Vue 3. Давай посмотрим...

‍Vue: переворот сознания

https://habr.com/ru/post/667516/?utm_campaign=667516&utm_source=habrahabr&utm_medium=rss
В прошлой статье я писал об EasyUI — библиотеке, реализующей графический интерфейс для одно-страничных Web-приложений. Эту библиотеку наша команда использовала при разработке Web-интерфейса для одного маленького, но очень умного устройства. С момента начала реализации проекта прошло довольно много времени, появилось много новых технологий и решений. Об одном из них я и хочу поговорить в этой статье.

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

Поскольку в нашем проекте использовалась достаточно "длинная" таблица сенсоров с постоянно меняющимися показаниями, перед нами стояла задача оптимизации опроса этих довольно медленно "отдающих" свои показания сенсоров. Мы реализовали виртуальную прокрутку этой таблицы, когда единовременно опрашивались лишь видимые на экране сенсоры.

Ещё тогда, читая документацию, я предполагал, что реализация такой таблицы сенсоров при помощи реактивного фреймворка будет простой и элегантной. Оставалось только проверить мои предположения на практике, что я, наконец, и сделал. Для меня, привыкшего к "тяжёлым" проектам вне реактивной парадигмы, потребовался некий переворот сознания, чтобы оценить достоинства Vue. Однако, это стоило того. Ведь всё оказалось гораздо проще, чем я думал... Читать дальше →

Фронтенд-новости №8. Найдена оптимальная длина строки, всемирный день доступности и использовать ли <dialog>

https://habr.com/ru/post/668356/?utm_campaign=668356&utm_source=habrahabr&utm_medium=rss
Дайджест новостей и полезных статей о фронтенд-разработке за последнюю неделю 23–29 мая. Что там у вас ещё

Азбука вкуса, Nuxt и наш тернистый путь к микрофронтам

https://habr.com/ru/post/663260/?utm_campaign=663260&utm_source=habrahabr&utm_medium=rss
Уже больше года мы в Азбуке вкуса мигрируем с jQuery на Nuxt. По мере роста, делали свою реализацию микрофронтов, чтобы хорошо организовать работу и решить ряд проблем.  В процессе наступили на пару граблей, долго думали и наконец сделали.  Приглашаем узнать о проделанной нами работе, о сложностях, с которыми мы столкнулись, и оценить итоговую реализацию. Узнать больше

[Перевод] Vue 2.7 теперь в бета-тесте

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

Создание приложения NET 6 + VUE с защитой reCaptcha

https://habr.com/ru/post/673552/?utm_campaign=673552&utm_source=habrahabr&utm_medium=rss
Создание приложения NET 6 + VUE с защитой reCaptcha. Читать далее

Настройка ESLint для чистого кода в проектах на Vue

https://habr.com/ru/post/674036/?utm_campaign=674036&utm_source=habrahabr&utm_medium=rss
В процессе работы над проектами разработчики придерживаются определенного кодстайла. Как правило, за это отвечает ESLint. ESLint — это линтер для языка программирования JavaScript. Он статически анализирует код на наличие проблем, многие из которых можно исправить автоматически.Как показывает практика, команды в проектах часто пренебрегают кастомной настройкой ESLint, оставляя дефолтную. В этом случае большая часть кодстайла остается на совести разработчика. Кодстайл, как правило, в таких проектах нигде не описан или существует в формате устной договоренности. При таком подходе большую часть правил приходится держать в уме, не говоря уже о том, что многие из них основаны на субъективных предпочтениях. Нередки случаи, когда разные части приложения отформатированы под разные правила. Например, если разработчики пишут код в разных операционных системах, то переносы строк у них отличаются. Правил так много, а настройки столь обширны, что использование разных редакторов кода в командной разработке может усложнить взаимодействие.В этой статье рассмотрим пример настройки ESLint для разработки приложений на Vue. В итоге мы получим настройки ESLint, которые будут проверять наш код на соответствие большинству правил официального стайлгайда Vue. Материал полезен начинающим разработчикам, которые хотят улучшить свой стиль кода, и более опытным на старте нового проекта в незнакомой или большой распределенной команде. Эти настройки помогут придерживаться кодстайла и отслеживать некоторые ошибки (синтаксические, логические, ошибки, связанные с динамической типизацией) еще на этапе написания кода, повысят его читаемость и упростят код-ревью. В конечном итоге это приведет к сокращению сроков разработки. Читать далее

Как сделать сервис реактивным в одну строку в Vue.js + Typescript

https://habr.com/ru/post/674432/?utm_campaign=674432&utm_source=habrahabr&utm_medium=rss
С выходом Composition API в Vue появилось новые возможности повторного использования кода. Больше нет необходимости в миксинах, компонентах высшего порядка и прочих “хаках”, если вам нужно вынести общую логику для нескольких компонентов. Но что если у вас есть нереактивный сервис, инкапсулирующий бизнес-логику, а переписывать все на composition api не хочется?  Читать далее

Как backend разработчики frontend писали (Vue + TS + Webpack)

https://habr.com/ru/post/675280/?utm_campaign=675280&utm_source=habrahabr&utm_medium=rss
У нас в команде есть пару проектов, для которых есть старые frontend. Написаны все они на разных технологиях, но объединяет их одно: нежелание кого-либо туда лезть и что-то править. Команде там кажется страшно, непонятно и неудобно. Любая доработка превращается в головную боль. В очередном проекте нам хотелось не допустить такого развития событий, и, кажется, у нас получилось.Данная статья предназначена не для полноценных frontend разработчиков, а для членов команд, которым требуется реализовать небольшой frontend не имея должной экспертизы в этом вопросе. И сделать это так, чтобы каждый новый сотрудник без глубокого погружения мог сразу делать небольшие доработки. Читать далее

Хочу перемен: почему пора переходить на Vue 3

https://habr.com/ru/post/675692/?utm_campaign=675692&utm_source=habrahabr&utm_medium=rss
Привет! Меня зовут Влад, я frontend-разработчик в компании SimbirSoft. Мне приходилось создавать приложения как на старых версиях Vue, так и на новых. Причем многие из моих коллег вполне успешно разрабатывают на Vue 2 и не спешат переходить на Vue3, даже спустя два года после релиза.Что же касается бизнеса и владельцев продуктов, в моей практике также встречались кейсы и примеры, когда заказчики не понимали всех преимуществ использования новой версии.В этой статье попытался раскрыть новшества, которые могут стать «триггером» для миграции на новую технологию для обеих заинтересованных групп. Поговорим об экосистеме Vue 3, о новинках и пользе для разработчиков и бизнеса. И, разумеется, сравним Vue 2 и Vue 3 с технической точки зрения. Также рассмотрим одно из главных нововведений фреймворка – Composition API, раскроем технические нюансы и определим лучшие кейсы использования нового API. Читать далее

Превращаем HTML table в GridComponent. Часть I. Frontend

https://habr.com/ru/post/676622/?utm_campaign=676622&utm_source=habrahabr&utm_medium=rss
Привет хабровцы и любители фронтенда!

Это моя первая статья, в которой я хочу поделиться своими первыми шагами в мир frontend разработки на VueJS. И в качестве примера для изучения я решил реализовать вариант грида со стандартным набором функционала: сортировкой, фильтрацией и пагинацией. Несмотря на то, что в интернете очень много подобных решений и у каждого есть все вышеперечисленные функции (и даже больше), думаю что реализация этого компонента позволит читателю, особенно новичку, познакомится со многими аспектами разработки на VueJS. Читать далее

Vue здорового pragmatica. Как правильно делать выбор между React и Angular

https://habr.com/ru/post/677896/?utm_campaign=677896&utm_source=habrahabr&utm_medium=rss
Хочешь устроить очередной… кхм… спор о том, какой фреймворк лучше и прослыть хайпожором — напиши статью «фреймворк ХХХ кулл, остальных на кол». Но когда твой выбор влияет на стек всей компании, объясняться все равно приходится — с коллегами, заказчиками, подрядчиками. Чтобы не повторять сто раз одно и то же, запишу аргументы в этой статье. Так что приглашаю к обсуждению самих «пострадавших» и поехали! Смотреть битву фреймворков

[Перевод] Как создать и развернуть библиотеку компонентов Vue в NPM

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

Обмен данными между Phaser.js и Vue.js используя Vuex

https://habr.com/ru/post/678584/?utm_campaign=678584&utm_source=habrahabr&utm_medium=rss
Я потерял много времени, пытаясь найти решение — как осуществить обмен данными между vue.js и Phaser. Этот вопрос заинтересовал меня, т.к. все что не касается игровой механики, намного удобнее и быстрее делать вне игрового движка, например: авторизация и вывод игровой статистики.Поскольку у меня есть некоторый опыт работы с Vue.js, то я решил использовать его для этих целей.Поскольку Phaser работает как отдельное приложение, то вы не можете передавать или извлекать информацию из него, для этого вам потребуется немного пофантазировать.Я не мог найти, как передать какую-то переменную в Phaser через процесс инициализации игры или как достучаться из него во Vue. Казалось бы, у обоих инструментов есть большие комьюнити, но я нашел лишь много подобных вопросов на форумах или под видео на YouTube — и все они либо без ответа, либо содержат не рабочие или не полноценные ответы. Я решил написать эту короткую статью, потому что надеюсь помочь другим энтузиастам, которые находятся в самом начале пути. Читать далее

Vue, React или Angular: какой стек используют в России. Проанализировал 180 сайтов

https://habr.com/ru/post/679150/?utm_campaign=679150&utm_source=habrahabr&utm_medium=rss
Благодаря лени узнал, какие фреймворки используют компании на российском рынке. Проанализировал e-comm, банки, интернет-магазины, сайты застройщиков, стриминговые сервисы, телекоммуникации и другие сферы. В конце статьи ссылка на таблицу. Читать далее