Представьте: вы – крупный производитель и ритейлер товаров для дома, который обрабатывает в сутки тысячи заказов по всей стране. Но при этом у вас нет единого алгоритма расчета стоимости доставки – из-за этого суммы почти всегда разные, иногда завышенные.
Меня зовут Артём Кияшко, я руковожу группой аналитиков в крупной ИТ-компании. В этой статье расскажу о том, как мы разработали и внедрили сервис расчёта стоимости доставки.
В МойОфис мы создаем продукты для совместной работы и делового общения. В том числе стремимся делать так, чтобы доступ к корпоративной коммуникации был максимально удобным для пользователя. Большинство наших решений — от редакторов документов и почтовых систем до цифрового рабочего пространства Squadus — представлены, помимо десктопа и веба, на основных мобильных платформах.
iOS- и Android-приложения Squadus мы разрабатываем с помощью кроссплатформенного фреймворка React Native. И сегодня расскажем о том, какое значение в iOS-разработке имеет CocoaPods — мощный инструмент управления нативными iOS-зависимостями, который позволяет упростить управление вашим проектом.
Под катом разбираем основы работы с CocoaPods, а также пример его использования в проекте для исправления ошибки.
Когда вы пишете просто на React - то используете Redux store как глобальное хранилище - ничего сложного.
Но когда начинаете задумываться о том, чтобы использовать Server-side Rendering - то по началу может возникать некоторая путаница с непривычки.
В React - результаты запросов сохраняем в Redux store - и уже на основании этих данных рендерится страница - всё понятно.
В Next.js же - страница отрендерилась на сервере - и пришла уже в виде html и css. Внимание вопрос: как тогда использовать Redux - если код страницы нам уже пришёл? И для чего вообще в таком случае нужен Redux при использовании Next?
Работает это примерно так: страница рендерится на сервере. Когда пользователь заходит на сайт - он скачивает эту страницу с сервера. На этом этапе серверный рендеринг закончился. Пользователь получил страницу в базовом виде - таком, как её видит весь интернет и роботы поисковиков. В этот момент в Redux store - хранятся исключительно те значения, какие там были при инициализации.
Если после этого сделать запрос к серверу и изменить значения в store - они там сохранятся. И если все ссылки для переходов по страницам сайта были обёрнуты в тег <Link></Link> - то при переходе по ним приложение будет вести себя в плане Redux - как SPA - всё, что загружено в Redux store - останется без изменений.
Например, переходим на главную страницу сайта. Получили эту страницу отрендереной с сервера. После чего залогинились - и информацию о пользователе (например, его имя) - сохранили в Redux. Тогда когда начнёте переходить на другие страницы сайта - его имя уже будет храниться в store и не придётся его каждый раз заново запрашивать.
NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно располнела. В ней много возможностей для локализации дат, чисел, установки нужных склонений, поддержки RTL языков, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".
В то же время часто для локализации сайта нужны очень простые вещи, занимающие всего пару процентов от всего функционала тяжеловеса i18n. Ниже будет описана несложная процедура избавления от i18next-ной зависимости в данном случае.
С момента своего первого релиза в 2015 году Redux использовался и продолжает использоваться на множестве клиентских приложений. Несмотря на все достоинства, которые предоставляет данное решение (предсказуемое управление состоянием, удобная отладка с помощью Redux DevTools и др.), некоторые разработчики сетуют на излишнее количество “шаблонного кода” при реализации даже самого просто функционала и предпочитают альтернативные инструменты для управления состоянием в клиентских приложениях.
Чтобы избежать чрезмерного количества кода при работе с Redux, разработчики применяли различные соглашения (например, ducks-modular-redux), а также создавали свои решения, представляющие собой абстрактный слой над Redux’ом (например, redux-crud, свои оболочки над библиотекой и прочее).
В конце концов, авторы Redux выпустили свое решение под названием Redux Toolkit, позволяющее минимизировать описанные выше проблемы и которое было тепло встречено разработчиками. Также в состав данной библиотеки было включено решение под названием RTK Query, которое призвано упростить работу с API, а также с кэшированием данных.
Получение данных с сервера и последующая их визуализация – типовые задачи веб-приложений. Как правило, веб-приложения также вносят изменения в эти данные, отправляют измененные данные на сервер, хранят закэшированные данные на клиенте и при необходимости обновляют их. Помимо этого, они также выполняют множество других задач, например:
Пишем typescript кастомное модальное окно для React приложения.
А также запилим удобный портал, кратко обсудим смысловое отличие модалки от других видов всплывающих окон и конечно же покроем всё тестами на Jest.
Написание нативных Swift модулей для React Native на примере Yandex Mapkit или коротко о том, куда потратить пару часов свободного времени, если ты React Native разработчик.
Сегодня я бы хотел рассказать о библиотеке redux-saga. Она уже достаточно давно используется во frontend-программировании, но не является интуитивно понятной, что может помешать начинающим разработчикам освоить её быстро и начать применять в своих проектах. В данной статье я максимально просто постараюсь объяснить максимально основные принципы этой технологии и некоторые полезные возможности. Намеренно отказываюсь от сравнительного анализа в пользу одних либо других технологий, т.к. выбор — это личное дело каждого, но чтобы его сделать, необходимо обладать определёнными знаниями.
В статье используются специализированные термины, поэтому предполагается, что вы имеете общее представление о React, Redux, генераторах и итераторах из ES6.
Из официальной документации следует, что redux-saga — это библиотека, которая ориентирована на упрощение и улучшение работы с сайд-эффектами (side-effects, любыми взаимодействиями с внешней средой, например, запрос на сервер) и облегчение их тестирования. В redux сага — это middleware (слой, работающий с момента диспатча (dispatch) экшена (action) и до обработки его редьюсером (reducer)), который может запускаться, останавливаться и отменяться из основного приложения с помощью обычных действий redux. Библиотека использует такое понятие ES6 как генераторы (Generators), и благодаря этому наши асинхронные потоки выглядят как обычный синхронный код.
Пишем минималистичный кастомный RadioGroup компонент для React приложения и парочку unit тестов на Jest.
Вы используете TypeScript, но впадаете в ступор перед, когда видите типы в сторонних библиотеках? Generics, generic constraint, infer, rest infer, conditional и recursive types, satisfies вызывают головную боль? Мы постараемся снизить градус сложности и напишем типы для роутинга в React приложении. Данный материал будет полезен как фронтендерам, так и бекендерам.
В данной статье описан простой пример написания docker-compose.yml файла на примере контейнеризации приложения с использованием Spring Boot на бэкенде, React на фронте, PostgreSQL в качестве базы данных и pgAdmin - для просмотра данных в базе.
Пишем минималистичный кастомный select компонент для React приложения. Покрываем всё тестами на Jest.
Пишем на typescript простой, переиспользуемый пагинатор для React приложения. Покрываем его тестам на Jest.
Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.
В этой статье хотелось бы обсудить несколько привычек, которые есть у нас всех и которые, возможно, пора переосмыслить.
Начнем с кастомных хуков, которым надо вернуть результат, в частности пару значений. Классическим примером может быть хук для запроса данных по сети и отслеживания в процессе ли этот запрос сейчас, чтобы добавить на страницу лоадер.
В рамках своей работы, я не раз сталкивался с проблемой, что нужно отслеживать изменение в LocalStorage в совершенно независимых компонентах.
Были попытки отслеживания изменений через "window.addEventListener", но и тут меня ждала неудача, так как в этом случае отслеживание будет происходить только в другой вкладке браузера и тем самым я дошел до создания своего хука, назвал его - useLocalStorageEffect. Далее уже будем говорить о нем.
Я давно пишу код, а React использую более пяти лет.
За это время у меня возникло несколько идей о том, как можно было бы улучшить React.
К реализации этих идей я приступил около трех лет назад. Сначала проверил концепцию, потом решил оформить всё в виде библиотеки.
А о том, что из этого вышло, я бы хотел рассказать в этой статье.
