В своей прошлой статье я рассуждал о том, как использование паттерна MVVM позволяет упростить процесс разработки. Паттерн был реализован с применением библиотеки MobX. Эту библиотеку я считаю в разы удобнее Redux, аргументы в пользу чего я также привел в статье. Однако, у нее имеется серьезный недостаток - излишняя свобода действий, в следствие наличия которой разработчики не всегда знают как писать код "хорошо". Паттерн MVVM же диктует несколько простых правил по использованию MobX, благодаря которым разработчики могут реже наступать на грабли. Однако, он не решает всех проблем. И в этой статье я бы хотел показать, как можно дополнить паттерн MVVM и сделать процесс разработки ещё приятнее.

https://habr.com/ru/post/704772/?utm_source=habrahabr&utm_medium=rss&utm_campaign=704772

Всем, привет! Меня зовут Данильян, я работаю в Самокате фронтенд-разработчиком и разрабатываю бэкофисное приложение с использованием React. Помимо работы, у меня есть несколько сайд-проектов, в которых я широко использую Deno. В последнее время этот проект радует новыми фичами чуть ли не каждую неделю и об одной из них я хотел бы рассказать в этом посте.

https://habr.com/ru/post/705204/?utm_source=habrahabr&utm_medium=rss&utm_campaign=705204

React vs Vue vs Angular. Общее сравнение JavaScript фреймворков

В ходе развития веб-разработки 3 JavaScript-фреймворка стали хорошо известны всем front-end разработчикам: React, Vue и Angular.

React считается библиотекой пользовательского интерфейса, Angular - полномасштабным front-end фреймворком, предоставляющим собственные инструменты для всех связанных с разработкой веб-приложений функций, а Vue - прогрессивным фреймворком, реализованным как дополнительная разметка для HTML.

Все три фреймворка могут использоваться практически взаимозаменяемо для создания компонентных frontend-приложений с расширенными возможностями пользовательского интерфейса. Однако окончательный выбор зависит от требований проекта и предпочтений разработчика.

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

https://habr.com/ru/post/703836/?utm_source=habrahabr&utm_medium=rss&utm_campaign=703836

Привет, друзья!

В данном туториале я покажу вам самый простой и быстрый, хотя и не очень оптимальный с точки зрения размера сборки, способ рендеринга 3D-объектов и моделей в React.

Мы решим 3 интересные задачи:

• рендеринг самописного 3D-объекта;


• рендеринг готовой 3D-модели;


• совместный рендеринг объекта и модели.

Знание вами основ работы с трехмерной графикой в браузере является опциональным.

Источником вдохновения для меня послужила эта замечательная статья.

Если вам это интересно, прошу под кат.

https://habr.com/ru/post/704024/?utm_source=habrahabr&utm_medium=rss&utm_campaign=704024

ЮMoneyDay — онлайн-конференция про айти в финтехе.

Разработчики, аналитики, продакты и проджекты расскажут, как работают в ЮMoney.

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

https://habr.com/ru/post/704078/?utm_source=habrahabr&utm_medium=rss&utm_campaign=704078

Сегодня мы рассмотрим процесс написания своего собственного плагина babel и опубликуем его в npm.

https://habr.com/ru/post/704028/?utm_source=habrahabr&utm_medium=rss&utm_campaign=704028

Привет, друзья!

Представляю вашему вниманию перевод этой замечательной статьи, в которой рассказывается о разработке приложения с помощью React Query.

Репозиторий с кодом проекта

Прим. пер.: автор рассказывает лишь о ключевых особенностях приложения, поэтому я рекомендую клонировать репозиторий, установить зависимости и запустить сервер для разработки, чтобы иметь возможность выполнять необходимые операции при чтении статьи. Обратите внимание: если у вас возникнут проблемы при запуске сервера для разработки с помощью команды npm start, перенесите переменные, определенные в этой команде в файле package.json, в файл .env:

SKIP_PREFLIGHT_CHECK=true

TSC_COMPILE_ON_ERROR=true

ESLINT_NO_DEV_ERRORS=true

И отредактируйте команду start следующим образом:

"start": "react-scripts start"

Руководство по React Query

https://habr.com/ru/post/702876/?utm_source=habrahabr&utm_medium=rss&utm_campaign=702876

Привет, друзья!

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

Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:

• ширина таблицы должна соответствовать ширине слайдера;


• ширина колонки таблицы должна соответствовать ширине слайда;


• слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации;


• таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне);


• при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы — переключение слайдов.

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

https://habr.com/ru/post/701972/?utm_source=habrahabr&utm_medium=rss&utm_campaign=701972

Всем привет! Меня зовут Никита Русанов, я лид команды фронтенда в компании, где мы создаем продукт, упрощающий переезд. В данной предметной области много задач по взаимодействию с гео данными. Сегодня я расскажу, каким образом можно работать с картами в браузере. В этой части мы с вами поговорим про используемые технологии.

https://habr.com/ru/post/701778/?utm_source=habrahabr&utm_medium=rss&utm_campaign=701778

Effector - менеджер состояния web-приложений.

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

https://habr.com/ru/post/701160/?utm_source=habrahabr&utm_medium=rss&utm_campaign=701160

Всем привет, дорогие читатели Хабр. Мы долго думали, чтобы нам сделать такое, что от нас не потребует глубоких знаний бэкенда и базы данных, но все же интересное и обучающее, исключительно ориентированное на конечного пользователя. Так мы пришли к тому, что нам бы хотелось изучить более подробно сферу WebRTC и WebSockets и решили сделать что-то похожее на Google Meet c е"e основными фичами, которые более подробно описаны чуть ниже. Но давайте все по порядку :) Приготовьтесь, будет много кода!

https://habr.com/ru/post/701002/?utm_source=habrahabr&utm_medium=rss&utm_campaign=701002

Привет, Хабр! Я Лена Райан, фронтенд разработчик в Х5 Tech. Решила поделиться с вами подборкой ТОП-10 проверенных зачётных онлайн-ресурсов по фронтенду, которые будут полезны как новичкам, так и желающим подтянуть свои знания по этой теме. Подборка подойдёт также тем, кто только недавно пришёл в IT или в профессию фронтендера и хочет понять, с какой базы им начать.

https://habr.com/ru/post/700274/?utm_source=habrahabr&utm_medium=rss&utm_campaign=700274