Pull to refresh
7
0
Send message

Bricks: новый подход к управлению интерфейсами

Level of difficultyEasy
Reading time7 min
Views11K

Создавать удобную разметку страниц и менять интерфейс в зависимости от потребностей продукта без работы с кодом — легко. Об опыте Авито рассказал тимлид команды Bricks Алексей Ивасюта.

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

Как мемоизация влияет на производительность React-приложения

Reading time11 min
Views9K

Почему необдуманное ковровое покрытие проекта мемоизацией хуже, чем её полное отсутствие? Мемоизация не дешёвая! Она замедляет TTI проекта, поэтому её необдуманное использование может навредить. Давайте разберём пять принципов оптимизации и посмотрим, когда от мемоизации будет реальный профит, а когда от её использования лучше воздержаться.

Привет, Хабр! Меня зовут Нугзар Гагулия. У меня 10 лет коммерческого опыта в компаниях различного масштаба, в том числе в Яндекс и Альфа-банк. Я выступаю на Google I/O и Google Dev Fest, пишу статьи на Хабре, контрибьючу и менторю. Эта статья написана по мотивам моего доклада для FrontendConf 2022. Чтобы найти и задать вопросы об этой и других статьях, меня легко можно найти по нику NookieGrey в соцсетях и Телеграм. Я с удовольствием на них отвечу.

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

Pet-проекты — это зло. Вредные советы для фронтендеров

Reading time6 min
Views19K

Привет, Хабр! Меня зовут Александр Водолазских. Я руковожу направлением разработки интерфейсов в СберМаркете и после работы люблю посидеть за кодом, разрабатывая собственные пет проекты. 

Чего я только не кодил по вечерам: писал смарт контракты на Solidity, копался с разными фреймворками и библиотеками, пилил свой убийцу Twitter на react.js... В какой-то момент фронтенд мне поднадоел, и яначал изучать разработку под node, nest, после - на go. А после - начал экспериментировать с мобильной разработкой на Swift.

Недавно я задумался о том, как сделать процесс разработки пет-проектов более полезными для развития и карьеры, взглянул на ситуацию со стороны и скорректировал свой подход. 

Мой сегодняшний текст — о том, как, мне кажется, нужно и нельзя вести пет-проекты. 

У меня получилось семь вредных советов. Надеюсь, вы тоже любили эту книгу Григория Остера в детстве. Если вы с ней не знакомы, концепция состоит в том, что дети часто вредничают и делают всё наоборот, поэтому нужно давать им советы от противного. 

Читать далее
Total votes 31: ↑28 and ↓3+29
Comments23

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний?

Reading time16 min
Views2.8K

Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте? 

Некоторое время назад команда Почты Mail.ru решала задачу управления сложным состоянием приложения с большим количеством фичей и источников данных с помощью конечных автоматов. Нужно было ускорить разработку и тестирование, поддерживая возможность проведения более чем 20 А/В-экспериментов. На тот момент, я работал там над проектами портальной навигации и главной страницы.

Меня зовут Денис Стасьев. В этой статье расскажу о том, как мы внедряли машину состояний в одном из компонентов главной страницы Mail.ru — блоке новостей, что получили на выходе и ещё подробнее о том, почему в итоге остановились на XState.

Читать далее
Total votes 11: ↑11 and ↓0+11
Comments0

Frontend Security: о чем вы хотели бы забыть, но не сможете

Reading time15 min
Views28K

Какие атаки на клиентскую часть веб-ресурсов вы знаете? XSS, CSRF, HTTP Response Splitting, Clickjacking, CSHM, атаки на CORS, следствия других ошибок программистов? В среднем разработчик вспоминает не половину, и даже не треть. Разнообразие атак зависит только от фантазии и любопытства злоумышленников, и все они созданы, чтобы навредить вашим клиентам, а значит — и вам.

Татьяна Новикова — ex-пентестер с опытом в безопасности около четырех лет, а ныне Application Security Engineer. В команде ЦАРКА (Центр анализа и расследования кибератак) она занималась пентестом — полной проверкой веб-ресурсов  на безопасность. В том числе команда работала с white-box, то есть с исходными кодами, и разбирала безопасность не только бэкенда, но и фронтенда. Сейчас Татьяна перешла в Beeline Казахстан и занимается обеспечением процессов безопасной разработки.

На основе своего опыта она выступила на конференции Frontend Conf Live 2020. В одной статье, конечно, невозможно покрыть все уязвимости и потенциальные опасности, поэтому сегодня будет самое актуальное и страшное из доклада — то, что может нанести максимальный ущерб.

Читать далее
Total votes 28: ↑28 and ↓0+28
Comments7

Принцип работы async/await в JavaScript

Level of difficultyMedium
Reading time8 min
Views30K


Если вам доводилось работать с JavaScript, то вы наверняка встречались с синтаксисом async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая тем самым её понимание. Некоторым ветеранам JS известно, что async/await – это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь в данной статье.

Видео от автора на ту же тему.
Читать дальше →
Total votes 41: ↑40 and ↓1+54
Comments19

Натальная травматология фронтенда S1 E1-14

Level of difficultyEasy
Reading time3 min
Views6.7K

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

В этом сезоне ко мне на операционный стол попались разные JS, CSS и тест фреймворки да методологии, менеджеры состояний и потоков исполнения, коллекции виджетов и даже приложений. Приготовьтесь, далее вас ждёт целых 32 часа отборного кринжа!

Погрузится в эпидерсию
Total votes 40: ↑22 and ↓18+9
Comments47

Rematch — Redux без шаблонного кода

Level of difficultyEasy
Reading time7 min
Views3.7K

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

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

Rematch предлагает удобный синтаксис и позволяет избежать написания многочисленных бойлерплейтов, свойственных Redux. С помощью него вы можете быстро создавать и организовывать Redux-хранилище, экономя при этом время и упрощая процесс разработки. Rematch идеально подходит для различных типов проектов, независимо от их размера и сложности.

С помощью Rematch вы можете определить модели (models) и их состояние, эффекты (effects) и редьюсеры (reducers). Он предоставляет удобные инструменты для работы с асинхронными операциями, а также возможность создания селекторов (selectors) для выборки данных из хранилища. Все это помогает организовать логику вашего приложения и управлять его состоянием с минимальными усилиями.

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

Читать далее
Total votes 6: ↑4 and ↓2+3
Comments25

React useReducer, зачем нужен и как использовать

Level of difficultyMedium
Reading time7 min
Views18K

useReducer - это хук для работы с состоянием компонента. Он используется под капотом у хука useState. В этой статье разберемся с api useReducer, когда лучше использовать useReducer вместо useState и поговорим про нестандартный случай использования useReducer.

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments12

Information

Rating
Does not participate
Works in
Registered
Activity

Specialization

Frontend Developer
React
TypeScript
Redux