Недавно я в очередной раз столкнулся с типичной проблемой: для создания нового функционала фронтенд и бэкенд нужно было реализовывать параллельно. Но как делать фронт, не имея 100% рабочих эндпойнтов на бэкенде? Сегодня я расскажу о том, какие подходы применял, и разберу их плюсы и минусы.
Читая документацию по react-redux v7, вы могли обратить внимание на предупреждение о проблеме устаревших пропсов и дочерних зомби-элементов. Этот раздел может показаться слегка запутанным, если читатель ещё не сталкивался с проблемой сам. Цель данной статьи — как следует разобраться с проблемой устаревших пропсов и её решением в react-redux.
Статья является переводом материала «Stale props and zombie children in Redux», впервые опубликованного в блоге Кай Хао, и, хотя автор скромно отзывается о себе как об исследователе-любителе и просит не считать себя экспертом, статья является одним из самых подробных материалов по теме. Кроме того, ссылка на оригинал уже включена в официальную документацию по react-redux.
Дисклеймер: статья предполагает, что читатель уже имел дело с React, Redux и react-redux. Мы не будем подробно останавливаться на описании API этих библиотек и оставим это дело официальной документации. Совершенно не обязательно читать это, чтобы использовать Redux, однако никогда не будет лишним разобраться как работают твои инструменты под капотом — не говоря о том, что это просто интересно.
Всем привет, меня зовут Иван, я – разработчик ПО в Orion Innovation. Сейчас много публикаций по фронтенд-разработке, в которых начинающему специалисту легко потеряться и упустить неочевидные вещи.
Данная статья позволит структурировать информацию об особенностях изучения ReactJS, подскажет, на что стоит обратить внимание. Она подойдет тем, кто делает первые шаги во фронтенд разработке, верстальщикам, углубляющим знания, или тем, кто переходит с другого веб-фреймворка.
React Router — это не то же самое, что маршрутизатор, направляющий сетевые данные — к счастью! Однако между сетевым маршрутизатором и React Router есть много общего. React Router помогает нам направлять пользователей к нужному компоненту. Например, мы можем использовать маршрутизацию на стороне клиента для создания одностраничного приложения (SPA), которое позволяет перемещаться между различными страницами без обновления браузера.
Другими словами, React Router поддерживает синхронизацию пользовательского интерфейса с URL. Он имеет простой API с такими мощными функциями, как ленивая загрузка кода, динамическое сопоставление маршрутов и обработка перехода между локациями.
Но есть еще много интересного. В этой статье мы рассмотрим хуки React Router. Они позволяют разработчикам писать гораздо более чистый код, так как не нужно писать всю его шаблонную часть, как в компонентах класса. Из коробки мы можем получить доступ к нескольким хукам, таким как useHistory, useLocation, useParams и useRouteMatch. Например, хук useHistory дает нам доступ к объекту history для обработки изменений маршрута.
Конфиденциальность это очень важная часть в современном мире. Снимая видео на своей телефон в общественном месте, не всегда, люди, которые попадают в кадр, будут довольны этим и можно получить "по жопке" за это. Для избежания этого лица рамывают или пикселизируются.
Сегодня я хочу поделиться реализацией такого блюра/пикселизации видео (изображения) в вебе.
За последний год в нашем мире так много изменилось, и React Native не исключение. Мы приветствовали новых членов в нашей команде (с которыми мы очень рады встретиться лично!), наши проекты созрели, и появились новые возможности. Мы рады поделиться всем этим с вами в этой публикации!
В Facebook наша команда работает полугодиями. Каждое полугодие мы пересматриваем нашу стратегию, устанавливаем планы и делимся ими внутри компании. Сегодня мы хотим поделиться с вами, нашим комьюнити, нашими планами на второе полугодие 2021 года.
Вторая половина года - захватывающая для React Native. Наши основные направления включают развитие сообщества, начало развертывания новой архитектуры с открытым исходным кодом и продвижение технологии.
Перед использованием memo попробуйте сначала два других подхода. И если их вам будет не хватить, то переходите к memo
Привет, Хабр! Несколько месяцев назад Wrike публично объявил об отказе дальнейшей разработки на Dart и переходе на новый стек.
Это было сложное решение. И, как это часто бывает во времена больших перемен, нам захотелось сравнить и провести параллели. А как происходила миграция у других компаний? Чем она была вызвана, и удалось ли завершить процесс перестройки без серьезных потерь? Мы попросили коллег поделиться своим опытом миграции на фронтенде, рассказать о всех сомнениях и трудностях, что встретились на этом пути.
В этом тексте мы подведем итоги панельной дискуссии в виде небольшого конспекта: тезисно и с цитатами. Полную видеозапись встречи вы найдете в конце статьи.
В интернете немало публикаций на тему реализации Dependency Injection (далее - DI) в React, также существует немало сторонних npm-пакетов, таких как inversify-react, react-simple-di и других. Но, по моему мнению, DI настолько просто реализуется средствами самого React, без дополнительных выкрутасов и boilerplate-кода, что никакая сторонняя библиотека во многих случаях попросту не нужна. В данной небольшой статье я постараюсь обосновать это свое мнение. Примеры кода будут приведены на TypeScript.
Известно, что одним из признаков хорошего архитектурного дизайна является слабая связанность между отдельными модулями приложения. Достичь этого можно разными способами: Dependency Injection, с помощью паттернов проектирования Mediator, Publish-Subscribe и некоторыми другими, многие из которых так или иначе реализуют принцип инверсии зависимостей, ответственных за уменьшение связанности. Об одном из таких паттернов, а именно о Publish-Subscribe (далее PubSub) мы сегодня и поговорим. А заодно, предлагаю рассмотреть мою собственную реализацию на TypeScript, построенную на декораторах - люблю я декларативный подход, ничего тут не сделаешь.
Привет! Я Илья, фронтенд-разработчик. Я приоткрою мир разработки на React Native, а тем, кто с ним знаком, расскажу о встреченных болях. Статья поможет вам, если вы смотрите на этот фреймворк и если вы уже начали с ним работать.
В начале 2020 года в ЮMoney мы решили создать продукт для расчетно-кассового обслуживания. Одним из требований бизнеса было запустить мобильное приложение. Это самый удобный путь обслуживания счетов. Мы рассматривали два варианта: задействовать отдел мобильной разработки или воспользоваться новыми технологиями, которые позволяют фронтендерам самостоятельно создавать приложения, используя JavaScript.
Почему мы выбрали React Native?
Сегодня я расскажу о том, как мы можем с помощью типов написать простое расширение для ExpressJS.
А если вы в своём приложении/приложениях используете только решения на TypeScript(JavaScript), то у вас отпадёт необходимость в Swagger.
Вообще, одно из главных преимуществ разработки серверного кода на NodeJS — это один язык программирования с Web-интерфейсом/React/Vue-Native. Это даёт возможность написать общий код в одном месте только один раз и использовать его затем везде.
Именно это мы сейчас с вами и попытаемся сделать.
Это вторая часть статьи о применении комбинации технологий nest.js и NEXT.js. В первой части был создан и настроен проект, а также выбран способ отправки данных для SSR, в результате чего проект уже удовлетворял большинство потребностей при разработке простого сайта. В этой части можно узнать о том, как выжать максимум пользы из nest-next: Hot Module Replacement, CDN, удобный SSR и разворачивание "за слешом".
Это первая часть статьи о применении комбинации технологий nest.js и NEXT.js, где будет рассмотрено создание проекта, подключение фреймворков и выбор эффективного способа работы с SSR. Во второй части можно узнать о HMR, использовании данных при SSR и разворачивании "за слешом".
Я хотел бы поговорить о том, что мне редко попадалось на глаза в статьях о MobX, о тех неприятных моментах, что портят впечатление от использования, а так же о способах решения этих моментов. И не обойдусь без описания плюсов, чтобы оправдать собственный выбор. Начнем.
MobX – менеджер состояния, к этому времени 6 версии, которая работает благодаря Proxy. Далее мнение основано на использовании MobX v6 в связке с библиотекой React при разработке мобильных (React Native) и веб-приложений. Стоит уточнить, что я пользовался в прежних проектах MobX v4, react-easy-state, Redux, Zustand, а также ознакомлен с десятком альтернативных менеджеров состояния на уровне чтения их документации. Так же замечу, что все приведенные далее плюсы и минусы не полны и выведены в сравнении с другими менеджерами состояния.
Мы в KTS делаем проект для Пятерочки – новый личный кабинет сотрудника. Продукт объединяет уже существующие сервисы и автоматизирует бизнес-процессы, которые раньше выполнялись вручную.
Над личным кабинетом работает много команд, поэтому нужен удобный механизм параллельной разработки модулей-микрофронтендов. Мы попробовали три способа встраивания: iframe, NPM-пакеты и Webpack Module Federation. В статье анализируем преимущества и недостатки каждого из них и рассказываем, почему переходили от одной технологии к другой.
React самая популярная библиотека для построения пользовательских интерфейсов. Мы знаем про виртуальное дерево, движок fiber, процедуру reconcilation, хуки и другие прекрасные возможности react. Но как это работает на уровне исходного кода? Ответить на этот вопрос смогут очень небольшое количество программистов.
В этой статье, я стараюсь дать начальное понимание как разобраться в исходниках, отлаживать react и как сделать первые шаги в становлении контрибьютором.
Надеюсь это введение станет для кого-то отправной точкой и рассеет страхи, связанные с тем что разобраться в исходниках популярной библиотеки слишком сложно и "это не для меня".
Обычно, в подобных статьях я выступаю на позитивной стороне и говорю, что не все так плохо, что умелыми руками можно делать прекрасные вещи. Однако, недавно со мной произошло несколько историй, которые заставили меня пересмотреть некоторые вещи.
В этой статье я перескажу истории с некоторыми техническими деталями и порассуждаю, что делать дальше.
