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, банки, интернет-магазины, сайты застройщиков, стриминговые сервисы, телекоммуникации и другие сферы. В конце статьи ссылка на таблицу. Читать далее

Frontend архитектура MVP (Model-View-Presenter)

https://habr.com/ru/post/680096/?utm_campaign=680096&utm_source=habrahabr&utm_medium=rss
Frontend сейчас сильно разрастается, всё больше компаний переписывают свои старые решения на SPA. В компании которой я работаю это не обошло стороной.По умолчанию был выбран фреймворк Nuxt.js, т.к Vue лучше React :))
В общем суть не в фреймворке, а с чего начинаем. что там?

Адаптивные таблицы в вебе

https://habr.com/ru/post/680976/?utm_campaign=680976&utm_source=habrahabr&utm_medium=rss
Таблица — один из самых эффективных способов подачи ТЕКСТОВОЙ информации: на минимуме пространства размещено максимум данных. И что не менее важно — эти данные доступны не только для восприятия, но и для анализа (СРАВНЕНИЯ). Основная сложность таблиц при верстке — их адаптивность для устройств с небольшими экранами (мобильных девайсов). Можно ли сделать так, чтобы даже на экране с размерами в несколько сантиметров таблицы могли быть удобными для восприятия? Читать далее

Как интеллектуальная система поиска локаций помогает Fix Price открывать в среднем по 2 новых магазина ежедневно

https://habr.com/ru/post/688392/?utm_campaign=688392&utm_source=habrahabr&utm_medium=rss
Привет, Хабр! Меня зовут Вадим Райский, и я работаю руководителем IT-проектов для департамента управления магазинами Fix Price. Каждый год мы открываем около 700-750 торговых точек в России и за рубежом – примерно по две каждый день. Алгоритмы и большое количество данных позволяют с высокой степенью вероятности прогнозировать прибыльность каждой открытой локации.Сегодня я расскажу о том, как мы перешли от «аналогового» способа сбора данных о локациях к цифровому и выстроили интеллектуальную систему поддержки новых торговых точек.Как все начиналосьДавайте перенесемся в 2015 год и представим, что перед нами стоит задача открыть новый магазин. У менеджера по недвижимости заранее начинала болеть голова. Ему предстояло собрать и систематизировать данные о нужных локациях, накопленные за много лет в различных форматах – от Excel до рабочей почты. На поиски нужной информации могли уходить часы. Объем обрабатываемых данных легко понять, если представить себе, сколько информации собирается для принятия решения об открытии новой точки. Агрегируется информация по всем городам России, улица за улицей, ведется учет каждой вакантной коммерческой площади, собирается информация о ее технических характеристиках, потенциале трафика и других параметрах. На эти базовые данные затем нанизывается информация о ставках аренды и результатах переговоров с отдельным арендодателем. Читать далее

Oauth 2.1 spring authorization server + SPA

https://habr.com/ru/post/688680/?utm_campaign=688680&utm_source=habrahabr&utm_medium=rss
Доброго всем дня уважаемые хабровчане!До сего момента я являлся лишь читателем этого замечательного ресурса, но вот кажется и пришло время написать мою первую статью.Oauth 2.1 - дальнейшее развитие популярного фреймворка авторизации Oauth 2.0, который на момент написания статьи всё ещё вроде как находится в стадии черновика. Но тем не менее уже начинает применяться. На хабре уже есть более подробная статья на эту тему.Из не очень приятного, из Oauth 2.1 убраны варианты получения токена. Читать далее

Увеличиваем RPS на Nuxt.js

https://habr.com/ru/post/688858/?utm_campaign=688858&utm_source=habrahabr&utm_medium=rss
Все мы знаем что nuxt.js 2 (да и любое node.js приложение с SSR) не держит нагрузку без кеша, в среднем проекте если включить режим SSR то будет держать 20-30 RPS что очень мало.Стандартные решения это подключить пару пакетов каких нибудь кешеров, и кешировать каждую страницу или запросы. В целом это хорошо помогает, но не до конца)Есть 3 проблемы с которыми я сталкивался на проекте, и хотел бы стабилизировать ситуацию. Чтобы дать еще один шанс запуститься приложению хотя бы без SSR. Ускориться

Сравнение синтаксисов Vue JS

https://habr.com/ru/post/690508/?utm_campaign=690508&utm_source=habrahabr&utm_medium=rss
Сравнение разных синтаксисов Vue JS:- Options API- Composition API- Class API- Class API + vue-property-decorator (npm) Читать далее

Сквозь тернии к core-у или процесс компиляции Vue

https://habr.com/ru/post/690522/?utm_campaign=690522&utm_source=habrahabr&utm_medium=rss
Нео проснулся от бликов вспыхнувшего экрана компьютера. Экран заполняла зеленая полоска прогресса.– Матрица – испуганно прошептал Нео.– Александр, вы уснули на работе – прошептал тимлид.Я взглянул на экран компьютера еще раз. Компиляция Vue была завершена. Я облегченно вздохнул. Скомпилировать!

Простые, но приятные и воздушные тени вместе с Vue Box Shadows

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

Ускоряем разработку в VSCode

https://habr.com/ru/post/691534/?utm_campaign=691534&utm_source=habrahabr&utm_medium=rss
Привет, Хабр! Это моя первая публикация и хотелось бы начать с чего-то полезного для сообщества. С места в карьер… Я запилил расширение для VSCode, которое поможет автоматизировать создание файловой структуры компонентов.Для тех кому удобнее в видео формате, вот ссылка на скринкаст. Рассказываю плюс минус тоже самое, но волнительно и неловко. Читать далее

Перезапуск Вебиума

https://habr.com/ru/post/692586/?utm_campaign=692586&utm_source=habrahabr&utm_medium=rss
Начали с большого старого проекта на руби, поддерживаемого аутсорсерами, а оставили отлично документированный и покрытый тестами проект с техническим директором и внутренней командой разработки. Это честный рассказ о проекте длиною в год.Вебиум — онлайн-школа для подготовки к ЕГЭ. 30 тысяч школьников, тысяча наставников, 20 тысяч вопросов и 2 тысячи домашних заданий на сотни тем.В 2021 году у Вебиума уже была рабочая система на Ruby, которую разрабатывали подрядчики-аутcорсеры. К нам они обратились с привычной проблемой — подрядчики медленно пилят фичи. Посмотрев код и оценив возможности команды, мы поняли, что рефакторить существующий код — долго и дорого, и решили перезапустить систему своими руками на привычном стеке — Django и Nuxt.js. Справились за год: с сентября 2022 все ученики покупают и проходят курсы в новой системе.Перед нами стояли 3 задачи: Читать далее

Не повторять, выполнено профессионалами: как не надо разрабатывать таск-трекер

https://habr.com/ru/post/690480/?utm_campaign=690480&utm_source=habrahabr&utm_medium=rss
Почти три года назад мы запустили сервис для управления проектами, но без ошибок не обошлось. Делюсь опытом, чтобы на наши грабли больше никто не наступил. Читать далее

Особенности разработки TWA в 2022 году

https://habr.com/ru/post/693090/?utm_campaign=693090&utm_source=habrahabr&utm_medium=rss
Настоящая статья поможет сэкономить время разработчиков и выбрать правильные инструменты для разработки TWA в 2022 году. Читать дальше →

Распространяй и властвуй: приглашаем на открытый Frontend Meetup

https://habr.com/ru/post/693438/?utm_campaign=693438&utm_source=habrahabr&utm_medium=rss
Привет, Хабр 😇 Меня зовут Михаил Подгорный и я руковожу отделом Frontend платформы в Ozon. В нашей компании уже около 500 фронтенд-разработчиков, силами которых было создано более 400 веб-приложений. Мы пишем на TypeScript и Vue, шаблонизируем на JSX, для тестов используем Jest и Playwright. Контейнеризация через Docker, разворачиваем через GitLab и K8s, а следим за всем с помощью Grafana, Prometheus, Thanos, Graylog, Sentry и собственных решений.С ростом числа проектов и команд унификация и внедрение стандартов становятся необходимостью — общие библиотеки снижают стоимость разработки, единый подход к написанию кода позволяет быстрее обучать новых сотрудников, а стандартизированные программные интерфейсы дают возможность оперативно осуществлять массовые обновления.Приглашаю в гости на открытый Frontend Meetup Ozon Tech, который состоится 27 октября в 18:00. Читать далее

Миграция с vue-class-component на vuejs/composition-api

https://habr.com/ru/post/694960/?utm_campaign=694960&utm_source=habrahabr&utm_medium=rss
В статье хочу поделиться опытом переписывания существующих классовых компонентов vue на новый синтаксис vue-composition-api.

Немного о нашем стеке.
Наше приложение написано на nuxt2 + vue-class-components + typescript. Из-за стека переезд на новый nuxt затруднился тем, что прежде чем сменить версию nuxt со 2 на 3 нам нужно переписать все наши компоненты. Тут нас очень спасла библиотека vuejs/composition-api и nuxtjs-composition-apiВ статье разберем случаи от самых примитивных до менее примитивных.Стоит сразу отметить, что в composition-api вся магия происходит внутри метода setup , который включает в себя 2 хука жизненного цикла vue компонента: beforeCreate и created
Помимо основных примеров я покажу как будет работать типизация в тех или иных кейсах.

* Все названия переменных вымышлены и не используются на продуктиве)

Поехали! Читать далее

WebSocket ориентированое Api на Nest.js

https://habr.com/ru/post/696252/?utm_campaign=696252&utm_source=habrahabr&utm_medium=rss
В этой статье я расскажу как создал модуль под Nest.js позволяющий писать классическое RESTFull API со swagger'ом но клиент будет полностью на WebSocket'ах, звучит странно не так ли? Но зато очень быстро и удобно по итогу)Идея состоит в том, что вы пишите классическое документированное апи, со всеми типами и плюшками. Читать далее

Следим и вычисляем с Vue 3, или Как использовать watchEffect

https://habr.com/ru/post/697910/?utm_campaign=697910&utm_source=habrahabr&utm_medium=rss
Привет! Меня зовут Алексей, я frontend-специалист SimbirSoft. В этой статье разберем новый метод слежения за реактивными свойствами watchEffect.С появлением Vue 3 c Composition API стало доступно два метода слежения — watch и watchEffect. Если «старый» метод watch всем хорошо знаком и не должен вызывать затруднений у Vue-разработчиков, то новый метод стоит изучить подробнее. Материал будет полезен разработчикам, переходящим с Vue 2 на Vue 3 и всем «вьюшникам», которые еще не разобрались с этим методом.Composition API предоставляет нам два разных метода слежения за реактивными свойствами — watch и watchEffect. Они похожи, но все же каждый полезен в определенных случаях. Рассмотрим, какие сходства и различия существуют у этих методов: Читать далее