Обновить
64K+

ReactJS *

JavaScript-библиотека для создания интерфейсов

20,75
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Как фронтендеру стать мобильным разработчиком, или Перевод API React в Jetpack Compose

Время на прочтение11 мин
Охват и читатели6.2K

Привет, я Данильян, работаю в Самокате фронтенд-разработчиком, разрабатываю бэкофисное приложение с использованием React. Когда я только начинал изучать Jetpack Сompose, я наткнулся на статью, в которой простым языком для людей, пришедших из мира веб-технологий в мир мобильной разработки, расписано, как писать код для мобильных устройств, чтобы было как в React. Из материала в статье особенно подкупали примеры: вот, что вы делали в React, а вот, как в Jetpack Compose получить то же самое. 

Делюсь с вами переводом этой статьи.

Читать далее

Паттерн Мейоз: локальное состояние и сервисы

Время на прочтение9 мин
Охват и читатели1.8K

В прошлой заметке я представил общественности шаблон проектирования Мейоз, как способ управления состоянием одностраничного javascript приложения. Шаблон не связан с конкретной библиотекой рендеринга, и опирается исключительно на небольшую функцию stream и нативную реализацию объекта Array в javascript.

Идея шаблона заключается в использовании streams (потоков) для хранения состояния приложения, глобального или локального (например состояния html формы), связывания, свертки и комбинации потоков в функциональном стиле. Шаблон предлагает использовать определенные реактивные структуры данных, но не обязательно буквально так как это делает автор. В рамках шаблона можно реализовать любое удобное и понятное поведение приложения.

В этой заметке я перепишу небольшое приложение "Кубики", и вместо библиотеки mithril для рендеринга будем пользоваться reactjs. Будем использовать потоки для управления глобальным и локальным состоянием, а так же, сервисы — объекты, определяющие функции, которые выполняются всякий раз, когда изменяется состояние.

Читать далее

Управление состоянием в React приложениях

Время на прочтение3 мин
Охват и читатели8.4K

Всем привет!

Все мы прекрасно знаем что построить полноценный стор на react context достаточно тяжело, а оптимизировать его ещё тяжелее.

А что если я расскажу как это можно сделать быстро и просто?

Читать далее

Знакомство c Reatom

Время на прочтение9 мин
Охват и читатели20K


Привет, меня зовут Артём Арутюнян и я автор менеджера состояния Reatom. Этим постом открывается серия обучающих материалов на русском языке, документация на английском доступна на официальном сайте.

А оно вам надо? Думаю, да, потому что Reatom — это универсальное решение, которое позволяет легко пошарить глобальное состояние за микроскопическую (2.5KB) цену, эффективно строить самодостаточные и переиспользуемые логические модули гигантских приложений или просто сделать ваш сетевой кеш реактивным с помощью дополнительного пакета @reatom/async.

В этой статье мы кратко пройдёмся по мотивации и истории, а потом разберём основные фичи и примеры их использования вместе с биндингами к React.js. Похожий разбор есть в виде скринкаста.
Читать дальше →

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Время на прочтение3 мин
Охват и читатели7.6K

Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors.

Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и применит соответствующий код css класса.

-

Делаем фронт на React, а ChatGPT будет нашим Redux редьюсером

Время на прочтение6 мин
Охват и читатели12K

Приложение React/Redux представляет собой односторонний цикл потока данных. Пользователь взаимодействует с пользовательским интерфейсом, который производит действия Redux, которые отправляются в функции reducer, которые обновляют объект состояния приложения, который передается обратно в React для повторного отображения пользовательского интерфейса.

Разговор с ChatGPT также представляет собой односторонний цикл. Человек посылает запрос (действие), который передается языковой модели (редуктор), которая обновляет разговор (состояние) своим ответом.

Можем ли мы использовать последнюю модель ChatGPT для этих целей? Спойлер: да, можем!

Читать далее

React + TypeScript: необходимый минимум

Время на прочтение11 мин
Охват и читатели94K


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


Представляю вашему вниманию перевод этой замечательной статьи.


Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо!


Преимущества изучения TS могут быть сведены к следующему:


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

Эта статья представляет собой минимальное введение по использованию TS в React.


Антигероем нашей истории будет Пэт — очень неприятный технический директор.

Читать дальше →

Сколько нужно времени, чтобы переписать объявление?

Время на прочтение10 мин
Охват и читатели2.3K

Привет! Меня зовут Илья Никитин, я по-прежнему фронтенд-разработчик в Авито, работаю в кластере BuyerX. В прошлом году я писал о том, как сложно было перевести кнопки контактов на странице объявления с Twig-шаблонизатора на React. Мы переживали, получится ли перезапуск и станет ли он последним. В итоге A/B-тест мы не раскатили, но перезапуск действительно был последним, мы учли все ошибки и пошли дальше. За прошедший год мы полностью переписали страницу объявления. Рассказываю, как это было и с какими трудностями нам пришлось столкнуться.

Читать далее

Про Inbox, веселые легаси и динамические микрофронты

Время на прочтение8 мин
Охват и читатели2.6K

Наш Альфа-Банк прекрасен. Мы его очень любим, но он такой большой-большой, разнообразный и сложный. Думаю, никого не удивил :) Наш ИТ-ландшафт содержит великое множество всякой «флоры и фауны», с которой необходимо считаться. То тут, то там, из глубоких Enterprise джунглей нам улыбаются и игриво подмигивают орды легаси-систем, каждая из которых живет своей собственной жизнью и поддерживается разными командами. Например, HR-вопросы — это SAP HCM, со своими потоками и фронтами, написанными на SAP UI5, Fiori, вопросы учета — SAP ERP, а есть ещё IBM Lotus Notes, системы документооборота и пр., и пр.

Для организации и упорядочивания различных бюрократических процедур, в банке есть такой инструмент, как электронная заявка. По задумке, он должен быть удобным: открываешь сервис, выбираешь тип, заполняешь, отправляешь. Нюанс в том, что есть примерно 1000 видов разных заявок, и в каждой родительской системе заявки создаются по своему, в разных местах, а согласуются своим инструментарием. Сотрудники страдают, а новые коллеги ужасаются, когда окунаются в этот зоопарк систем: непонятно куда бежать, что нажимать и как это всё работает. 

Всем привет, меня зовут Олег Кругляков, я руководитель направления в одной из команд клиентского пути сотрудника Alfa People. В статье хочу поделиться опытом создания сервиса, который объединяет все эти заявки в одном месте без «беготни» по разным системам. При всем при этом, он весело работает в браузере и весело работает в мобильном приложении, нордически выдерживая единый дизайн. Ну, приятно, чего греха таить ?

Читать далее

Что такое состояние

Время на прочтение13 мин
Охват и читатели25K


Привет! Меня зовут Артём Арутюнян, много где меня можно встретить под ником artalar. 10 лет я разрабатываю крупные веб-сервисы, и вот уже четыре года менеджер состояния, исследуя тему реактивности, консистентности данных и состояния. А началось всё с простого вопроса: почему React, самая популярная современная библиотека для написания UI, по умолчанию полностью рушит приложение и показывает белый экран при появлении ошибки в любом компоненте во время рендера?

В данной статье хотелось бы описать и раскрыть формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения.

Примеров будет немного, т. к. их достаточное описание превратило бы статью в небольшую книжку. Но надеюсь, что сами идеи всё же будут понятны.
Читать дальше →

Big State Managers Benchmark

Время на прочтение9 мин
Охват и читатели13K

Здравствуйте, меня зовут Дмитрий Карловский и я.. большой любитель физики высоких энергий. Сталкиваешь такой совершенно разные вещи между собой, и смотришь на бабахи, уплетая поп-корн.

Так как в Реакте всё очень плохо с архитектурой, а страдают от него многие, то к настоящему времени появилось уже очень много так называемых менеджеров состояний. И каждый наперебой уверяет, что он самый быстрый, самый надёжный, самый компактный, самый выразительный и вообще самый правильный.

Что ж, давайте возьмём их всех и столкнём лбами друг с другом и с суровой реальностью, чтобы узнать кто же на самом деле тут батя!

Мне больше 18 и я готов к последствиям

Пишем продвинутый планировщик с использованием React, Nest и NX. Часть 3: работа с задачами

Время на прочтение8 мин
Охват и читатели5.5K

Друзья, всем привет! Меня зовут Игорь Карелин, я frontend-разработчик в компании Домклик. В прошлой части мы разобрали, как создать аутентификацию с помощью библиотеки Passport, а сегодня мы рассмотрим такие манипуляции, как добавление, редактирование, удаление и получение задач. Для начала давайте разберём HTTP и некоторые типы запросов.

Читать далее

Конвертируем markdown в html и подключаем компоненты React с Unified это просто

Время на прочтение11 мин
Охват и читатели19K

Библиотека Unified и экосистема плагинов для работы с Markdown и HTML позволит очень просто создать конвертер и подключить компоненты React. Unified преобразует контент в синтаксическое дерево, и имеет набор утилит для работы с деревом, но даже без набора утилит это простая задача, достаточно уметь перебирать свойства объекта javascript. Все это будет продемонстрировано и объяснено.В статье есть пример создания плагина и демо проект.

Читать далее

Ближайшие события

React memo: Преисполнимся в оптимизации

Время на прочтение4 мин
Охват и читатели39K

Привет! Сегодня поговорим про стандартные способы оптимизации web-приложения в экстремистской библиотеке React. Мотивацией послужило некоторое количество кода, который я видел. Связан он с использование API React не по назначению или без учета каких-то очевидных проверок на производительность и тонкостей (с натяжкой).

Читать далее

Разработка и тестирование сортируемых компонентов Drag and Drop. Часть 2 — Тестирование

Время на прочтение14 мин
Охват и читатели2.9K

В предыдущей статье вы узнали, как разрабатывать переупорядочиваемые drag-and-drop компоненты, теперь пришло время их протестировать. В этой части вы покроете приложение юнит тестами с помощью BDD подхода.

Читать далее

Как программисты дурят бизнес?

Время на прочтение15 мин
Охват и читатели53K

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

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

Предполагаемая аудитория: Бесстыжие программисты и наивные руководители. Одних пристыдим, другим раскроем глаза. И наоборот.

Ну, задай огонька!

Разработка и тестирование сортируемых компонентов Drag and Drop. Часть 1 — Разработка

Время на прочтение6 мин
Охват и читатели3.7K

Разработка и тестирование сортируемых компонентов Drag and Drop. Часть 1.

В этой серии статей мы рассмотрим задачу разработки и тестирования сортируемых компонентов Drag-and-Drop.

Читать далее

RTK query: что мы от него хотим и зачем

Уровень сложностиСредний
Время на прочтение13 мин
Охват и читатели89K

Redux Toolkit Query — это мощный инструмент для взаимодействия с API, который из коробки реализует такие полезные фишки, как отображение состояния загрузки, кэширование, дедупликацию запросов, полинг, ревалидацию при различных условиях, а также весьма удобна в использования за счёт готовых хуков. 

Привет, меня зовут Антон Степанов, я — frontend-разработчик в Альфа-Банке. В статье расскажу какие задачи при работе с API frontend-разработчику приходится решать чаще всего, к каким идеям рано или поздно это может привести, и как их можно реализовать в RTK query, собственно.

Под катом много кода и убеждений.

Читать далее

MobX c MVVM хорош, но с DI ещё лучше

Время на прочтение6 мин
Охват и читатели6.9K

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

Читать далее

React vs Vue vs Angular

Время на прочтение12 мин
Охват и читатели73K

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

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

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

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

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

Читать далее