Дизайн-системы и UI-киты сейчас воспринимаются как равнозначные или тождественные. Но это не так! Более того, смешивать их будет чистым дилетантством, что недопустимо для современных UI/UX-дизайнеров и фронтендеров. В этой заметке я — Денис Пушкарь, оунер дизайн-системы Ростелекома — объясню почему.
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:
Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Привет, друзья!
На днях мне на глаза попалась статья, посвященная разработке корзины товаров на React с помощью Redux Toolkit для управления состоянием приложения и Redux Persist для хранения состояния в localStorage.
В этой заметке я покажу, как реализовать аналогичный функционал с помощью Zustand, что позволит вам наглядно убедиться в его преимуществах перед Redux как с точки зрения количества кода, так и с точки зрения производительности.
Если вам это интересно, прошу под кат.
Данная статья описывает баг и его решения в контексте ReactJS + Server-Side Rendering, но это также актуально для всех фреймворков большой тройки так и для чистого JS.
При разработке сайта мы столкнулись с проблемой, что при использовании тега <img> на некоторых страницах Safari загружал изображение несколько раз вместо одного. Для отображения картинок мы использовали тег <img> с атрибутом srcset, что бы показывать картинки разного разрешения для экранов с высоким ppi.
Мы постоянно имеем дело с формами: регистрация, заполнение анкеты, составление отзыва. Первое, что нам хочется сделать как разработчикам,— максимально выделить общие компоненты, чтобы как можно меньше дублировать код.
Допустим, мы можем сделать простые компоненты вроде инпутов или составные, типа окна с формой. Но всё равно бы пришлось постоянно собирать такие композиции во всех местах, не говоря уже о разном бэкенде для всех форм.
На самом деле есть другое решение.
Привет, друзья!
В данном туториале мы разработаем чат с использованием следующих технологий:
Функционал чата будет таким:
Если вам это интересно, прошу под кат.
В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.
В этой статье поговорим о том, как разработать и запустить бэкэнд на Node.js-Express и фронтенд на React в контейнере Docker.
Несколько слов о мотивации написать эту статью. Большенство вещей, о которых я тут хочу рассказать, вы можете узнать из документации React. Но проводя собеседования последние пару лет я понял, что многие разработчики о них не знают по каким-то причинам, может просто не вчитывались внимательно или этому не уделено достаточного внимания в самой документации. Так что я решил собрать тут несколько моментов и разобрать их, чтобы тот кто прочитает эту статью, начал понимать React чуть лучше и стал более осознанно использовать те или иные инструменты в работе. Так же это будет полезно тем, кто хочет подготовиться к собеседованию и не ударить в грязь лицом, когда их будут гонять по реакту.
Благодаря лени узнал, какие фреймворки используют компании на российском рынке. Проанализировал e-comm, банки, интернет-магазины, сайты застройщиков, стриминговые сервисы, телекоммуникации и другие сферы. В конце статьи ссылка на таблицу.
В этой статье я хочу затронуть еще одну задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Star Rating виджета.
За последние пять месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других компаний.
Вы должны уточнить требования и реализовать этот виджет в течение ~ 45–50 минут.
Хочешь устроить очередной… кхм… спор о том, какой фреймворк лучше и прослыть хайпожором — напиши статью «фреймворк ХХХ кулл, остальных на кол». Но когда твой выбор влияет на стек всей компании, объясняться все равно приходится — с коллегами, заказчиками, подрядчиками. Чтобы не повторять сто раз одно и то же, запишу аргументы в этой статье. Так что приглашаю к обсуждению самих «пострадавших» и поехали!
Всем привет, не так давно ко мне в команду в ПРОФИ пришла задача реализации довольно комплексной в плане верстки и интерактивности карты, на которой бы отображались заказы, оставленные нашими клиентами. Мы решили использовать фреймворк, адаптирующий яндексовый SDK под реакт.
react-yandex-maps + доки к нему
UI маркеров почти полностью приходится настраивать по докам уже Яндекса, тк react-yandex-maps предоставляет нам только внешний интерфейс, позволяющий довольно удобно прокинуть параметры в объект маркера как пропсы.
По докам яндекса довольно просто понять, как сделать маркер с статичной картинкой вместо дефолтного пина, но как сделать полностью кастомный маркер разобраться не просто.
В этой статье я хочу затронуть задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Image Slider.
За последние 5 месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других. (Больше информации можно прочитать в моем Telegram-канале)
Вы должны реализовать этот виджет за ~45–50 минут и рассказать об оптимизации. Эту информацию я постараюсь рассказать здесь. Основная цель состоит не в том, чтобы реализовать Image Slider с большим количеством функционала, а в том, чтобы показать, как реализовать и оптимизировать.
Добрый день. Хочу поделиться информацией о том как мне удалось пририсовать динамическую React компоненту внутрь всплывающего окна над меткой на Яндекс карте.
Disclaimer: Безусловно, эта статья для начинающих кодеров на React. Опытный и не очень react-разработчик не найдет тут ничего полезного. Разве что может указать на ошибки(буду благодарен).
Построение и декомпозиция проекта
Никакой сложной архитектуры и декомпозиции не будет. Цель проекта - показать часто встречаемое применение хука useState и связка javascript кода с html элементами в одном компоненте. Всего будем использовать только три файла: App.js, App.css и Gradient.js.
⚛ Проектируем DataGrid на React так, чтобы сэкономить Boilerplate
Хорошо продуманная архитектура позволяет не только избежать legacy, но и отдать часть рутины менее квалифицированным кадрам. Думаю, будет уместно поделиться заметками о проектировании DataGrid, так как скорее всего вы уже сталкивались с копипастой)
⚛ Джентльменский набор React компонентов FullStack разработчика для управления потоком данных.
В этой статье я рассказываю, как сэкономить время на рутинной загрузке данных с сервера и отображении значений в верстке когда Redux или другой контейнер состояния избыточен.
