Привет, меня зовут Феликс Пискунов. Разрабатываю веб-приложения уже 16 лет. Решил поделиться своими размышлениями по поводу выбора фреймворка и что меня подвигло оставить Angular и уйти без оглядки в React
В одном переданном проекте на NextJs и typescript, попалась “интересная” ошибка при использовании библиотеки react-svg-worldmap. Для решения ошибки, пришлось обращаться к разработчику библиотеки.
Казалось бы такая простая тема как написание css-классов не должна быть проблемой, однако я встречал довольно много проектов, где допускаются ошибки, что приводит к проблемам и плохо читаемому коду.
Где проблема актуальна? В экосистеме React, и где мы пользуемся замечательным синтаксисом под названием JSX.
В данной статье мы рассмотрим, почему стоит использовать библиотеку clsx практически в каждом React-проекте.
Привет, друзья!
В этой статье я покажу вам, как разработать приложение для совершения аудио/видео звонков с помощью WebRTC.
Функционал нашего приложения будет следующим:
WebRTC для обеспечения возможности совершения нового звонка.Основной источник вдохновения.
Если вам это интересно, прошу под кат.
Мы разрабатываем ati.su, это площадка где грузоотправитель находит грузоперевозчика. Между собой они общаются заявками. Заявка — это карточка с множеством полей. Так мы её и зовём — «Карточка груза». Поиск таких заявок по сложным фильтрам — то, зачем к нам приходят сотни тысяч пользователей.
Эта статья о том, как мы с нуля переписали карточку груза и этого почти никто не заметил. И это хорошо, так и было задумано.
Сначала я поведаю о проекте. Опишу боль, которую он вызывал. Потом расскажу, что и как мы переписали. И напоследок немного размышлений о том, что можно было сделать лучше.
Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.
Сегодня я хочу поговорить про цену, которую мы платим, используя определенные свойства TypeScript. Использования каких возможностей TypeScript стоит избегать? Это перевод оригинальной статьи.
Мы в *instinctools организовали и провели серию онлайн-дискуссий с разработчиками и экспертами в области IT. Проект «Техпора» – это возможность обсудить темы, которые затрагивают основные точки роста в IT. Мы не накладывали на беседу приглашенных гостей ограничения, а специально для «Хабра» выбрали из разговора яркие моменты, чтобы их можно было обсудить.
В разговоре приняли участие Денис Радин, организатор JSNation и React Summit, Виталий Фридман, сооснователь Smashing Magazine, Андрей Кучеренко, Chief Software Engineer, EPAM Systems, и Ира Левина, драйвер Frontspot сообщества. Целиком дискуссию можно посмотреть на YouTube, а согласиться или не согласиться с приглашенными экспертами лучше всего в комментариях.
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}class Checkbox extends React.Component {
state = { isOn: true };
// ...
}class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}
В данной статье мы рассмотрим текущее состояние экосистемы React, а также какие инструменты и библиотеки нам необходимы чтобы покрыть все основные кейсы для успешной разработки приложения.
Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.
Сегодня я хочу поговорить про React и JSX. Почти в каждом проекте мы пишем JSX шаблоны, которые рендерятся в зависимости от условий. Делаем ли мы это правильно? Это перевод оригинальной статьи.
Привет, друзья!
В этом небольшом туториале я покажу вам, как разработать простой редактор кода на React.
Обратите внимание: туториал рассчитан, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в нем что-нибудь интересное для себя.
Функционал нашего приложения будет следующим:
HTML, CSS и JavaScript, соответственно;iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.Если вам это интересно, прошу под кат.
"Ух-ты! Какая интересная задача! И оценка времени на разработку хорошая! ..."
2 часа спустя: "Какой же это ужас, ещё 10 редьюсеров создать, ещё 10 раз описать зависимости состояний. Типы, компоненты... Сколько же бесполезной рутины... Вот бы можно было писать только декларативную логику, всегда."
Если вам хоть отчасти близок текст выше, не переживайте, вы не одни такие. Я - человек который не один раз произнес сказаное выше.
Поэтому сегодня я поделюсь своими мыслями о том, как в моих глазах можно многое упростить, чтобы наконец начать получать хороший Developer Experience.
Сегодня я хочу рассказать про один не очень популярный но очень классный паттерн в написании React приложений - Compound components.
Что это вообще такое
Compound components это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым. Это как в BEM нельзя использовать E - элемент, отдельно от B - блока.
Самый наглядный пример такого подхода, который знают все фронты - это select с его option в обычном HTML.
Привет, друзья!
Продолжаю исследовать возможности по работе с медиа, предоставляемые современными браузерами, и в этой статье хочу рассказать вам о возможности захвата и записи медиаданных в процессе воспроизведения аудио и видеофайлов.
Мы разработаем простое приложение для сведения аудио и видео со следующим функционалом:
WebM — превью сведенного контента и ссылка для его скачивания.В качестве фреймворка для фронтенда я буду использовать React, однако все функции по работе с медиа будут автономными (сигнатура этих функций будет framework agnostic), так что вы можете использовать любой другой фреймворк или ограничиться чистым JavaScript.
О том, как разработать приложение для создания аудиозаметок, можно прочитать в этой статье, а о том, как разработать приложение для захвата и записи экрана — в этой.
Если вам это интересно, прошу под кат.
В данном цикле статей мы рассмотрим задачу синхронизации состояния react-приложения между окнами. В качестве подопытного у нас будет приложение на Electron, работающее в offline/online-режимах, которое также может запускаться в PWA-режиме.
Выучить React недостаточно для профессиональной разработки больших приложений. Для этого есть две основные причины. Первая, у React есть огромная экосистема модулей, в которой необходимо разбираться. Вторая, эта экосистема меняется каждый год. Поэтому может быть не просто разобраться во всех тонкостях применения React, и эта статья может стать путеводителем в увлекательный мир современного React.
К этой статье прилагается GitHub репозиторий и Демо приложение, которые демонстрируют работу упомянутых в этой стать модулей (и некоторых других). GitHub репозиторий можно использовать в качестве boilerplate для вашего следующего профессионального приложения.
Привет, друзья!
На днях, бороздя просторы Сети в поисках вдохновения, наткнулся на Zustand, инструмент для управления состоянием React-приложений, наиболее полно (среди более чем многочисленных альтернатив) отвечающий моим представлениям о, если не идеальном, то адекватном современному React state manager (см., например, эту статью).
Рассказу о нем и будет посвящена данная статья. Сначала немного теории, затем немного практики — по традиции, "запилим" простую "тудушку".
Если вам это интересно, прошу под кат.
В приложениях с REST архитектурой существует ряд проблем:
• повторяющийся код при работе с состоянием приложения;
• костыли и велосипеды при обработке результатов и состояний запросов;
• отсутствие стандартного механизма кеширования полученных на клиенте данных;
• одновременные запросы за одними и теми же данными;
• сложности реализации pessimistic/optimistic обновления состояний.
В клаудных микросервисах Netcracker мы решаем эти проблемы с помощью GraphQl & apollo. Однако есть изрядное количество приложений, использующих классический REST подход для общения с сервером. Хорошим решением для них является Redux Toolkit Query.
Сейчас существует широкий спектр кроссплатформенных технологий, среди которых Flutter, React Native и, конечно же, Kotlin Multiplatform Mobile (KMP). Какую технологию стоит выбрать и почему именно ее? Давайте попробуем разобраться!
В компании SDVentures мы часто используем на проектах связку React + RxJS. Это довольно таки нетрадиционная связка, так что о ней мало что можно найти в интернете. Поэтому постараюсь рассказать о том, почему мы с командой стали её использовать и чем это может быть полезно вам.