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

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. Они похожи, но все же каждый полезен в определенных случаях. Рассмотрим, какие сходства и различия существуют у этих методов: Читать далее

Effector — убийца Redux? Туториал с нуля. Часть 1

https://habr.com/ru/post/698880/?utm_campaign=698880&utm_source=habrahabr&utm_medium=rss
Redux и MobX больше не нужны ?

Туториал для новичков по EffectorJS - современному и удобному стейт-менджеру. Рассмотрим основные возможности, работу ядра, и какие проблемы решает. На примерах. Читать далее

Как мы еще не перешли с Vue.js на Hotwire

https://habr.com/ru/post/698394/?utm_campaign=698394&utm_source=habrahabr&utm_medium=rss
Мы продолжаем публиковать доклады последней Ruby Russia. На этот раз поговорим о новинке Hotwire, которую уже опробовали в Uscreen. Автор текста Марсель Мустафин, задавайте ему вопросы в комментариях! Читать далее

Процесс рендеринга Vue

https://habr.com/ru/post/699356/?utm_campaign=699356&utm_source=habrahabr&utm_medium=rss
Добрый день! Меня зовут Александр, я работаю frontend-разработчиком в компании Nord Clan. В прошлой статье мы рассмотрели процесс компиляции Vue, а теперь надо как-то «пристроить» результат этой самой компиляции в процесс рендеринга.Дизайн лого: Марина Четвертакова Читать далее

NuxtJS получил тройку, потерял JS и меняет фронтенд

https://habr.com/ru/post/700468/?utm_campaign=700468&utm_source=habrahabr&utm_medium=rss
17 ноября вышла стабильная версия Nuxt 3.0 (теперь без JS) - популярного фреймворка для построения фронтенд-приложений на Vue 3.Поэтому публикую тут самые важные, на мой взгляд, новые фичи + некоторые мысли насчёт увиденного. Читать далее

Сервисная архитектура во Vue 2 | Какие собственно варианты?

https://habr.com/ru/post/700392/?utm_campaign=700392&utm_source=habrahabr&utm_medium=rss
Рассуждаю о том, какие популярные методы выноса логики есть во Vue 2, какие у них плюсы и минусы. Расскажу о том, какую альтернативу я бы хотела видеть (спойлер, я ее реализовала), дам ссылку на репозиторий с решением. Это первая часть, подробнее о том что будет во 2 и 3 в конце статьи. Приятного просмотра! Хочу узнать, что дальше

Effector (reflect, typescript, forms). Основные инструменты. Туториал с нуля. Часть 2

https://habr.com/ru/post/701160/?utm_campaign=701160&utm_source=habrahabr&utm_medium=rss
Effector - менеджер состояния web-приложений.

Новое и удобное решение. Продолжаем серию статей для новичков. Разбираемся, что может упростить работу, как работать с формами и многое другое... Читать далее

Сервисная архитектура во Vue 2 | Проектирование класса (примитивы и объекты)

https://habr.com/ru/post/700964/?utm_campaign=700964&utm_source=habrahabr&utm_medium=rss
Поговорим о том, как стоит спроектировать класс, чтобы его можно было использовать в компонентах на Vue 2 (так, чтобы данные были реактивными). Покажу как запретить изменение данных в компонентах, либо как отвалидировать изменения.Это 2 часть цикла статей о сервисной архитектуре на Vue 2, в 1 части я рассуждала о популярных способах выноса логики, и о задаче, которую я перед собой поставила. How to do it?

Как мы создавали сервис для улучшения города в Ташкенте (Узбекистан)

https://habr.com/ru/post/701682/?utm_campaign=701682&utm_source=habrahabr&utm_medium=rss
Этот материал посвящен сервису Xalq Nazorati (Народный Контроль) — с ним люди могут пожаловаться на нерабочий лифт, яму на дороге, сломанный светофор или стертую дорожную разметку. В статье расскажем, с чего мы начинали проект, какие ошибки допускали, как их исправляли и где в итоге оказались.Сегодня в сервис Народный Контроль уже поступило более 28 тыс. обращений от горожан — чаще всего люди жалуются на проблемы на дорогах, ЖКХ и экологические проблемы.88% всех обращений были в итоге решены.Чтобы контролировать работу сервиса и обеспечить реальное решение проблем, мы разработали рейтинг районов города, тем самым мотивируя чиновников не отмахиваться от проблем.Чтобы лучше обозначать раскрытие темы, используем индикатор из хорошо знакомой многим игры. Так интереснее.Резюме Читать далее

Как мы разрабатываем без бэков: закрываем задачи силами фронта и сохраняем бюджет клиента

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

[Перевод] Создание плагина с Vite

https://habr.com/ru/post/703876/?utm_campaign=703876&utm_source=habrahabr&utm_medium=rss
Вам когда-нибудь требовались дополнительные возможности от конфигурации Vite, например, преобразование кастомного расширения, т.е., index.mycustomextension в index.js? Или преобразование markdown в JSX?Плагин Vite позволяет нам решать подобные задачи. Поэтому вам может быть интересно, как создать плагин Vite самостоятельно. В этой статье мы расскажем, как разработать несколько простых плагинов, которые вы сможете использовать в качестве основы и источника идей для своих собственных плагинов Vite. Читать далее

React vs Vue vs Angular

https://habr.com/ru/post/703836/?utm_campaign=703836&utm_source=habrahabr&utm_medium=rss
React vs Vue vs Angular. Общее сравнение JavaScript фреймворковВ ходе развития веб-разработки 3 JavaScript-фреймворка стали хорошо известны всем front-end разработчикам: React, Vue и Angular. React считается библиотекой пользовательского интерфейса, Angular - полномасштабным front-end фреймворком, предоставляющим собственные инструменты для всех связанных с разработкой веб-приложений функций, а Vue - прогрессивным фреймворком, реализованным как дополнительная разметка для HTML.Все три фреймворка могут использоваться практически взаимозаменяемо для создания компонентных frontend-приложений с расширенными возможностями пользовательского интерфейса. Однако окончательный выбор зависит от требований проекта и предпочтений разработчика. Каждый фреймворк имеет различную архитектуру, производительность в различных сценариях, экосистему и инструменты, которые мы постараемся рассмотреть в этой статье, чтобы лучше понять их удобство использования. Читать далее

Под капотом autofocus.su

https://habr.com/ru/post/704672/?utm_campaign=704672&utm_source=habrahabr&utm_medium=rss
Привет. Сегодня хочу рассказать про то, как за кулисами устроена работа моего мини-проекта по ведению задач autofocus.su. В предыдущей заметке я рассказал про принципы, лежащие в основе метода Автофокуса. А тут будет скорее набор ключевых слов с короткими описаниями того, что и как связано между собой. Конкретная реализация будет отличаться в вашем конкретном случае, но направления для поисков будут понятны.Лично мне часто не хватает какого-то скелета работоспособного приложения, чтобы было с чего начать. Надеюсь, что буду полезен.Начнем с бэкенда. Начнем!

Первая попытка gitlab-ci на фронте

Эта статья о сценарии развертывания фронта, через инструменты Gitlab-CI.

Я использую GitLab-CI, а носителем исполнения скриптов GitLab Runner (об этом позже) пусть будет простой дроплет от DO Читать дальше →
https://habr.com/ru/post/707112/?utm_campaign=707112&utm_source=habrahabr&utm_medium=rss

Реактивность в Vue

Уверен, вы когда-нибудь задавались вопросом «Что за зверь эта реактивность и как она работает?». Думаю, что настало время закрыть этот вопрос и рассмотреть работу реактивности на примере Vue.Дизайн превью: Марина Четвертакова Читать далее
https://habr.com/ru/post/706536/?utm_campaign=706536&utm_source=habrahabr&utm_medium=rss

Конструктор базы для браузерной стратегии в духе Dune 2/2000 на Three.js, Vue3 + TS

Самой успешной моей статьей для сообщества был подробный отчет о разработке браузерного FPS. Судя по статистике в базе данных — неожиданно огромное количество людей зашло и попробовало сыграть, я получал заинтересованные вопросы в личку и так далее. В дальнейшем я сделал еще одну попытку крафтового браузерного геймдева на javascript и попробовал создать конструктор для стратегии в духе культовой Dune из детства. В какой-то момент я уперся в низкую производительность получившейся разработки и заскучал, уже почти год как забросил это дело. Но меня получилось построить работающий полноценный контрол, сейчас можно возводить и демонтировать постройки. Поэтому я хочу, прежде всего, поставить точку для себя, немного рассказав и о данной затее — возможно для кого-то окажутся полезными мои усилия. Статья не будет такой объемной, дотошной и разнообразной как первая о создании полноценного шутера, зато сам код репозитория, кажется, немного интереснее, так использует более актуальный стек из Vue3 и TypeScript. Во много, эта разработка продолжает идеи и методы первой, с тем отличием, что мы пилим стратегию, а не шутер от первого лица. Я не буду повторять то что было уже пройдено и рассмотрено в первом примере, бегло покажу только «новые фичи». Читать далее
https://habr.com/ru/post/707518/?utm_campaign=707518&utm_source=habrahabr&utm_medium=rss