Обновить
64K+

ReactJS *

JavaScript-библиотека для создания интерфейсов

19,38
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Оптимизация сборки веб-приложения

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели10K

По мере того, как ваше приложение растёт и развивается, растут и затраты времени на его тестирование и сборку, достигая нескольких минут при пересборке в dev-режиме и, возможно, десятков минут при «холодной» production-сборке. Что, конечно, совершенно неприемлемо. И если поначалу увеличение временных затрат может казаться незначительным, то впоследствии это непременно ведёт к ухудшению процесса разработки и может негативно повлиять на скорость выкатки важных релизов или хотфиксов. Таким образом, в какой-то момент вопрос оптимизации и ускорения сборки приложения может стать критически важным для разработчика.

Читать далее

Как мы разрабатывали сервис расчета стоимости доставки для ритейлера

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели3.4K

Представьте: вы – крупный производитель и ритейлер товаров для дома, который обрабатывает в сутки тысячи заказов по всей стране. Но при этом у вас нет единого алгоритма расчета стоимости доставки – из-за этого суммы почти всегда разные, иногда завышенные.

Меня зовут Артём Кияшко, я руковожу группой аналитиков в крупной ИТ-компании. В этой статье расскажу о том, как мы разработали и внедрили сервис расчёта стоимости доставки. 

Читать далее

Упрощаем разработку на React Native: чем полезен CocoaPods?

Время на прочтение10 мин
Охват и читатели4.9K

В МойОфис мы создаем продукты для совместной работы и делового общения. В том числе стремимся делать так, чтобы доступ к корпоративной коммуникации был максимально удобным для пользователя. Большинство наших решений — от редакторов документов и почтовых систем до цифрового рабочего пространства Squadus — представлены, помимо десктопа и веба, на основных мобильных платформах.

iOS- и Android-приложения Squadus мы разрабатываем с помощью кроссплатформенного фреймворка React Native. И сегодня расскажем о том, какое значение в iOS-разработке имеет CocoaPods — мощный инструмент управления нативными iOS-зависимостями, который позволяет упростить управление вашим проектом.

Под катом разбираем основы работы с CocoaPods, а также пример его использования в проекте для исправления ошибки.

Читать далее

Next.js и Redux — для чего и как использовать вместе

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели24K

Когда вы пишете просто на 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 и не придётся его каждый раз заново запрашивать.

Читать далее

Архитектура и реактивное программирование

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели41K
reactivity as a pattern for low models coupling

Что такое реактивное программирование? Не Rx. И даже не Excel. Это архитектурный паттерн, позволяющий абсолютно иначе писать код. В статье мы устаканим фундаментальные знания, утвердимся в том, что React.js всё же является реактивным, и подумаем о том, как и когда нужно, а когда не нужно применять паттерны реактивного программирования.
Читать дальше →

Рендеринг на сервере и HTMX — это будущее

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели49K

Современная ситуация с разработкой веб-приложений


Сегодня пользователи ожидают от веб-приложений плавной работы без перезагрузок страниц. К сожалению, эти ожидания обычно реализуются в виде одностраничных приложений (single-page application, SPA), использующих библиотеки и фреймворки наподобие React и Angular. Эти фреймворки очень специализированы и с ними может быть трудно работать.

Новый подход заключается в том, чтобы вернуть возможность реализации этого UX в руки инженеров, разрабатывавших веб-сайты до возникновения безумия SPA, используя готовые наборы инструментов и знания. HTMX — лучший пример такого подхода из тех, что я видел.
Читать дальше →

Детокс для i18n

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели9.1K

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно располнела. В ней много возможностей для локализации дат, чисел, установки нужных склонений, поддержки RTL языков, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".

В то же время часто для локализации сайта нужны очень простые вещи, занимающие всего пару процентов от всего функционала тяжеловеса i18n. Ниже будет описана несложная процедура избавления от i18next-ной зависимости в данном случае.

Читать далее

Как мы используем RTK Query в React-приложениях

Время на прочтение7 мин
Охват и читатели28K

С момента своего первого релиза в 2015 году Redux использовался и продолжает использоваться на множестве клиентских приложений. Несмотря на все достоинства, которые предоставляет данное решение (предсказуемое управление состоянием, удобная отладка с помощью Redux DevTools и др.), некоторые разработчики сетуют на излишнее количество “шаблонного кода” при реализации даже самого просто функционала и предпочитают альтернативные инструменты для управления состоянием в клиентских приложениях.  

Чтобы избежать чрезмерного количества кода при работе с Redux, разработчики применяли различные соглашения (например, ducks-modular-redux), а также создавали свои решения, представляющие собой абстрактный слой над Redux’ом (например, redux-crud, свои оболочки над библиотекой и прочее).   

В конце концов, авторы Redux выпустили свое решение под названием Redux Toolkit, позволяющее минимизировать описанные выше проблемы и которое было тепло встречено разработчиками. Также в состав данной библиотеки было включено решение под названием RTK Query, которое призвано упростить работу с API, а также с кэшированием данных.  

Получение данных с сервера и последующая их визуализация – типовые задачи веб-приложений. Как правило, веб-приложения также вносят изменения в эти данные, отправляют измененные данные на сервер, хранят закэшированные данные на клиенте и при необходимости обновляют их. Помимо этого, они также выполняют множество других задач, например:  

Читать далее

Делаем кастомное модальное окно для React

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели44K

Пишем typescript кастомное модальное окно для React приложения.

А также запилим удобный портал, кратко обсудим смысловое отличие модалки от других видов всплывающих окон и конечно же покроем всё тестами на Jest.

Читать далее

Написание нативных Swift модулей для React Native на примере Yandex Mapkit

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели3.2K

Написание нативных Swift модулей для React Native на примере Yandex Mapkit или коротко о том, куда потратить пару часов свободного времени, если ты React Native разработчик.

Читать далее

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

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели40K

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

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

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

Читать далее

Делаем кастомный RadioGroup в 99 строк для React

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели6.4K

Пишем минималистичный кастомный RadioGroup компонент для React приложения и парочку unit тестов на Jest.

Читать далее

Учимся писать сложные Typescript типы на примере роутинга в React

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели24K

Вы используете TypeScript, но впадаете в ступор перед, когда видите типы в сторонних библиотеках? Generics, generic constraint, infer, rest infer, conditional и recursive types, satisfies вызывают головную боль? Мы постараемся снизить градус сложности и напишем типы для роутинга в React приложении. Данный материал будет полезен как фронтендерам, так и бекендерам.

Хочу писать типы как профессионал

Ближайшие события

Пишем простой docker-compose.yml для контейнеризации приложения (React, Spring Boot, PostgreSQL, pgAdmin)

Уровень сложностиПростой
Время на прочтение21 мин
Охват и читатели85K

В данной статье описан простой пример написания docker-compose.yml файла на примере контейнеризации приложения с использованием Spring Boot на бэкенде, React на фронте, PostgreSQL в качестве базы данных и pgAdmin - для просмотра данных в базе.

Читать далее

Кастомный select для React

Уровень сложностиПростой
Время на прочтение16 мин
Охват и читатели29K

Пишем минималистичный кастомный select компонент для React приложения. Покрываем всё тестами на Jest.

Читать далее

Делаем пагинацию в React приложении

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели34K

Пишем на typescript простой, переиспользуемый пагинатор для React приложения. Покрываем его тестам на Jest.

Читать далее

Удобства и боли рендеринга с React-pdf: опыт использования

Время на прочтение8 мин
Охват и читатели13K
Привет, Хабр! Меня зовут Алексей Сингур, я — фронтенд-разработчик в проекте KICS (Kaspersky Industrial CyberSecurity) for Networks «Лаборатории Касперского». Если коротко, то наш продукт защищает промышленные инфраструктуры и сети от киберугроз: анализирует трафик для выявления отклонений и обнаружения признаков сетевых атак, чтобы обеспечивать предприятию непрерывность процессов.

image

Одной из фичей KICS for Networks является генерация отчетов о сканировании инфраструктуры в формате PDF. При разработке этой фичи пришлось погрузиться в вопрос верстки и рендеринга PDF на Node.js. Речь пойдет об использовании для этих целей библиотеки React-pdf (в нашем проекте мы пока используем версию 2.1.1.), которая может показаться весьма экзотичной, если судить по количеству статей и отзывов в Интернете :)

Пост будет полезен веб-разработчикам для расширения кругозора в области инструментов рендеринга PDF, а также заинтересованным в генерации PDF-документов на стороне клиента или сервера.
Читать дальше →

React: революция использования фигурных скобочек

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели8.9K

Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.

В этой статье хотелось бы обсудить несколько привычек, которые есть у нас всех и которые, возможно, пора переосмыслить.

Начнем с кастомных хуков, которым надо вернуть результат, в частности пару значений. Классическим примером может быть хук для запроса данных по сети и отслеживания в процессе ли этот запрос сейчас, чтобы добавить на страницу лоадер.

Читать далее

Пишем свой хук для отслеживания изменений в LocalStorage

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели14K

В рамках своей работы, я не раз сталкивался с проблемой, что нужно отслеживать изменение в LocalStorage в совершенно независимых компонентах.

Были попытки отслеживания изменений через "window.addEventListener", но и тут меня ждала неудача, так как в этом случае отслеживание будет происходить только в другой вкладке браузера и тем самым я дошел до создания своего хука, назвал его - useLocalStorageEffect. Далее уже будем говорить о нем.

Читать далее

Я хотел улучшить React

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели10K

Я давно пишу код, а React использую более пяти лет.

За это время у меня возникло несколько идей о том, как можно было бы улучшить React.

К реализации этих идей я приступил около трех лет назад. Сначала проверил концепцию, потом решил оформить всё в виде библиотеки.

А о том, что из этого вышло, я бы хотел рассказать в этой статье.

Читать далее