Pull to refresh
3
0
Подобный Роман @Tazer16179

Frontend разработчик

Send message

Error Boundaries в React: препарируем лягушку

Reading time11 min
Views24K

Представим, что у нас есть приложение на React, в котором можно читать и писать отзывы. Пользователь открыл список отзывов, пролистал его, нажал кнопку «Написать отзыв». Форма написания отзыва открывается в попапе. Пользователь начинает вводить текст, свой email. Вдруг валидация почты срабатывает с ошибкой, которую разработчики забыли обработать. Результат — белый экран. React просто не смог ничего отрендерить из-за этой ошибки в каком-то попапе.

Первая же мысль — не надо было всё уничтожать, список же был не при делах. Чтобы обработать ошибку в render-фазе в React, необходимо использовать Error Boundaries. Почему именно так нужно обрабатывать ошибки — расскажу под катом.

Читать далее
Total votes 13: ↑12 and ↓1+12
Comments5

Отладка React для самых маленьких

Reading time3 min
Views20K

Эта статья для тех, кто только начинает свой путь в написании больших React приложений, но все еще использует только console.log для их дебага. Мы с вами рассмотрим работу с расширением для браузера "React Developer Tools" на простом примере, который в дальнейшем вы сможете применить в своих проектах. Это расширение дает возможность просмотра дерева компонентов, их props, состояния и контекста. Также достаточно просто отловить неэффективные компоненты, которые подвергаются повторному рендерингу, посмотреть сколько на это уходит времени и построить графики для визуализации эффективности компонентов. Благодаря этой информации вы не только сможете оптимизировать ваше приложение, но и более глубоко изучить React и понять все тонкости работы с ним.

Читать далее
Total votes 4: ↑3 and ↓1+3
Comments1

Архитектура модульных React + Redux приложений

Reading time7 min
Views62K


Большинство разработчиков начинает знакомство с Redux с Todo List Project. Это приложение имеет следующую структуру:

actions/
  todos.js
components/
  todos/
    TodoItem.js
    ...
constants/
  actionTypes.js
reducers/
  todos.js
index.js
rootReducer.js

На первый взгляд такая организация кода кажется логичной, ведь она напоминает стандартные соглашения многих backend MVC-фреймворков:

app/
  controllers/
  models/
  views/

На самом деле, это неудачный выбор как для MVC, так и для React+Redux приложений по следующим причинам:

  1. С ростом приложения следить за взаимосвязью между компонентами, экшнами и редюсерами становится крайне сложно
  2. При изменении экшна или компонента с большой вероятностью потребуется внести изменения и в редюсер. Если количество файлов велико, скролить IDE вверх/вниз не удобно
  3. Такая структура потворствует копипасте в редюсерах

Не удивительно, что многие авторы(раз, два, три) советуют структурировать приложение по «функциональности» (by feature).
Читать дальше →
Total votes 16: ↑15 and ↓1+14
Comments41

Redux-saga: обзорная экскурсия

Level of difficultyMedium
Reading time9 min
Views17K

Сегодня я бы хотел рассказать о библиотеке redux-saga. Она уже достаточно давно используется во frontend-программировании, но не является интуитивно понятной, что может помешать начинающим разработчикам освоить её быстро и начать применять в своих проектах. В данной статье я максимально просто постараюсь объяснить максимально основные принципы этой технологии и некоторые полезные возможности. Намеренно отказываюсь от сравнительного анализа в пользу одних либо других технологий, т.к. выбор — это личное дело каждого, но чтобы его сделать, необходимо обладать определёнными знаниями.

В статье используются специализированные термины, поэтому предполагается, что вы имеете общее представление о React, Redux, генераторах и итераторах из ES6.

Из официальной документации следует, что redux-saga — это библиотека, которая ориентирована на упрощение и улучшение работы с сайд-эффектами (side-effects, любыми взаимодействиями с внешней средой, например, запрос на сервер) и облегчение их тестирования. В redux сага — это middleware (слой, работающий с момента диспатча (dispatch) экшена (action) и до обработки его редьюсером (reducer)), который может запускаться, останавливаться и отменяться из основного приложения с помощью обычных действий redux. Библиотека использует такое понятие ES6 как генераторы (Generators), и благодаря этому наши асинхронные потоки выглядят как обычный синхронный код.

Читать далее
Total votes 3: ↑2 and ↓1+2
Comments1

Модульное и интеграционное тестирование в Redux Saga на примерах

Reading time9 min
Views4.9K

hero image


Redux — чрезвычайно полезный менеджер состояний. Среди многих "плагинов", Redux-Saga нравится мне больше всего. В проекте на React-Native, над которым я сейчас работаю, мне приходилось сталкиваться с множеством побочных эффектов. Они приносили бы мне головные боли в случае, если я поместил их в компоненты. С помощью этого инструмента создание сложных логических потоков с разветвлениями становится простой задачей. Но как насчет тестирования? Так же это просто, как и использование библиотеки? Хотя я не могу дать вам точный ответ, я покажу вам реальный пример проблем, с которыми я столкнулся.

Читать дальше →
Total votes 6: ↑6 and ↓0+6
Comments3

Разбираемся в redux-saga: От генераторов действий к сагам

Reading time9 min
Views208K


Любой redux разработчик расскажет вам, что одной из самых тяжелейших частей разработки приложений являются асинхронные вызовы — как вы будете обрабатывать реквесты, таймауты и другие коллбэки без усложнения redux действий(actions) и редьюсеров(reducers).

В этой статье я опишу несколько различных подходов к управлению асинхронностью в вашем приложении, начиная от простых подходов как redux-thunk, заканчивая более продвинутыми библиотеками вроде redux-saga.
Читать дальше →
Total votes 13: ↑12 and ↓1+11
Comments22

Sentry удаленный мониторинг багов в фронтенд приложениях React

Reading time4 min
Views11K

Мы изучаем использование Sentry с React.



Эта статья является частью серии, начинающейся с сообщения об ошибках Sentry на примере: Часть 1.

Читать дальше →
Total votes 8: ↑7 and ↓1+6
Comments5

Использование стандарта ES5 в Интернете

Level of difficultyMedium
Reading time12 min
Views3.5K

Что сейчас со стандартом ES5 и нужно ли его поддерживать?

В данной статье рассматривается распространенность транспилирования ES6+ кода в ES5

В 2017 году я написал статью, в которой показал веб-разработчикам, как они могут деплоить код ES6+ (он же ES2015) в продакшен, без необходимости транспилировать его в ES5. Этот метод был выходом для разработчиков веб-сайтов, которые хотели без ограничений писать современный код, не беспокоясь о раздувании транспилера или полифилла.

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

Читать далее
Total votes 11: ↑7 and ↓4+6
Comments3

React + Three.js. Создаём собственный 3D шутер. Часть 1

Level of difficultyMedium
Reading time31 min
Views18K

Привет, дорогие пользователи мира IT!

В эпоху активного развития веб-технологий и интерактивных приложений, 3D-графика становится всё более актуальной и востребованной. Но как создать 3D-приложение, не теряя преимуществ веб-разработки? В этой статье мы рассмотрим, как сочетать мощь Three.js с гибкостью React, чтобы создать собственную игру прямо в браузере.

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

Читать дальше →
Total votes 14: ↑14 and ↓0+14
Comments14

Дайджест киберинцидентов Acronis #1

Reading time5 min
Views1.7K

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

Читать дайджест
Total votes 9: ↑9 and ↓0+9
Comments0

Information

Rating
Does not participate
Location
Россия
Registered
Activity

Specialization

Frontend Developer
Senior
JavaScript
React
HTML
CSS
NextJS
TypeScript
Redux
MobX
SCSS
Jest