ReactJS *

Привет! Меня зовут Айнур, и я frontend-разработчик SimbirSoft. Более 6 лет я работаю над коммерческими проектами, создаю и улучшаю интерфейсы, поэтому в работе достаточно часто использую паттерны проектирования. Неоднократно я обращался за идеями и лайфхаками к книге Patterns.dev, которая содержит очень современный взгляд на шаблоны проектирования, рендеринга и производительности JavaScript.

Авторы Patterns.dev:

Лидия Холли — штатный консультант и преподаватель по разработке программного обеспечения, которая в основном работает с JavaScript, React, Node, GraphQL. Она также занимается наставничеством и проводит личные тренинги.

Эдди Османи — технический менеджер, работающий над Google Chrome. Его команды работают над такими проектами, как Lighthouse, PageSpeed ​​Insights, Chrome User Experience Report и другими.

Материал книги будет полезен не только React-разработчикам, но и всем, кто так или иначе интересуется или сталкивается с frontend-разработкой.

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

Источник: https://www.patterns.dev/
Данный адаптированный материал распространяется на условиях лицензии Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

Привет, друзья!

В этом туториале я покажу вам несколько полезных приемов по работе с таблицами с помощью React Table.

React Table — одна из самых популярных на сегодняшний день библиотек экосистемы React для манипулирования табличными данными. Однако это далеко не самое простое в изучении и использовании решение, поэтому хорошо подумайте, прежде чем добавлять его в свой проект.

Мы последовательно реализуем 5 вариантов таблицы:

• с возможностью сортировки строк;
• с возможностью фильтрации строк;
• с пагинацией;
• с возможностью выбора строк;
• комплексную.

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

Предполагается, что вы имеете некоторый опыт работы с React и TypeScript.

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

NPM-пакет для интернационализации i18n используется на фронтэнде для создания мультиязычных вебсайтов очень часто. Перевод текста в нем содержится обычно в json или в js файлах, и требует дальнейшей обработки, чтобы с ним с комфортом могли работать контент-редакторы. В статье описывается как максимально упростить и сделать удобным хранение и внесение изменений в перевод.

Привет, друзья!

На днях прочитал эту интересную статью, посвященную различным вариантам хранения токена доступа (access token) на клиенте. Мое внимание привлек вариант с использованием сервис-воркера (service worker) (см. "Подход 4. Использование service worker"), поскольку я даже не задумывался о таком способе применения этого интерфейса.

СВ — это посредник между клиентом и сервером (своего рода прокси-сервер), который позволяет перехватывать запросы и ответы и модифицировать их тем или иным образом. Он запускается в отдельном контексте, работает в отдельном потоке и не имеет доступа к DOM. Клиент также не имеет доступа к СВ и хранимым в нем данным. Как правило, СВ используется для обеспечения работы приложения в режиме офлайн посредством кэширования критически важных для работы приложения ресурсов.

В этой статье я покажу, как реализовать простой сервис аутентификации на основе JSONWebToken и HTTP Cookie с хранением токена доступа в сервис-воркере.

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

Устали писать логику для компонентов, которая из раза в раз повторяется?

React Spectrum знает как это решить!

Привет, друзья!

В этой серии статей я расскажу вам о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (точнее, на React) со встроенной поддержкой TypeScript.

Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:

• почти весь код приложения "живет" на сервере;
• приложение остается функциональным даже при отсутствии JS;
• JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).

Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.

Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.

К слову, здесь вы найдете полное руководство по Next.js.

В первой части мы пройдемся по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.

Это часть номер раз.

Часть номер два.

С первой частью рассказа о микрофронтендах в Dodo можно ознакомиться тут

Мы спокойно сидели и пилили новый проект на нашем устоявшемся стеке (React + TypeScript + Webpack + SingleSPA + SystemJS + Jest). Пока одним прекрасным утром не пришел наш техлид и такой: «Чуваки, а давайте затащим Vitest!».

Привет! Это tech-команда СберМаркет. Сегодня кто-то празднует день влюбленных, а для нас с вами это ещё и профессиональный праздник — день компьютерщика. Если совместить два повода, получим день влюблённых в компьютеры. Кто-то любит копаться в железе, кто-то в программах. Кто-то пишет библиотеки, а кто-то их использует. Но все мы не равнодушны, иначе нас бы здесь не было. Эта статья — любовное письмо языкам, фреймворкам и библиотекам, которые крутятся у нас под капотом — Go, Ruby, React, React Native, Redux.

В настоящее время мы все привыкли видеть появление новых фреймворков, которые обещают произвести революцию в сфере веб-разработки. Тем не менее, чаще всего мы остаемся привязанными к конкретной библиотеке пользовательского интерфейса (React, Vue, Svelte и т.д.) для определения наших компонентов и создания пользовательского опыта.

На этот раз ситуация поменялась! Используя возможности Vite.js, мы получили Astro: агностический фреймворк, который может работать как SSG (генератор статических сайтов) и обеспечивать SSR (рендеринг на стороне сервера).

Управление подписками — с первого взгляда несложная тема, которая, однако, вызывает у многих проблемы на фронте. Под катом я собрал собственные наблюдения о том, как грамотно выстроить работу с подписками без утечек памяти, увеличения времени загрузки элементов и колоссальных трат бюджета.

За основу я взял библиотеку RxJs, работающую с фреймворком Angular. Однако любителям остальных фреймворков, возможно, это тоже пригодится.

В 16.8 версии библиотеки React впервые появились хуки (hooks) — функции, которые упрощают работу с компонентами React и переиспользованием какой-либо логики. В экосистеме React уже есть много дефолтных хуков, но также можно создавать и свои. Я Михаил Карямин, фронтенд-разработчик в Учи.ру, расскажу, как и в каких случаях хуки в React облегчают жизнь разработчику и как с ними работать.

Хотя в IT и разработана шкала оценки программистов (Trainee, Junior, Middle, Senior, Tech Lead), с которой более или менее все согласны, единого определения каждого уровня среди работодателей пока нет. В итоге каждая компания устанавливает собственные требования к навыкам на каждом уровне.

Этот тест поможет вам прикинуть, какой бы у вас был грейд, если бы вы собеседовались в МКБ.

Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта. Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.

Одним из простых в реализации, но иногда сложных в использовании инструментов является react-query — мощная библиотека для асинхронного управления состоянием. Простота реализации делает его желанным выбором для написания логики состояния компонентов.

«Микрофронтенды в компании, которая доставляет пиццу? Серьёзно? Зачем? Да и куда? У вас же всего лишь приложенька с каталогом и заказом товара. Какие ещё микрофронтенды?»

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

Во множестве проектов web разработки для улучшения пользовательского опыта используются всплывающие подсказки - tooltips. В статье рассматривается создание переиспользуемого и гибко настраиваемого React компонента для отображения таких всплывающих подсказок.

Да, про эту нейросеть сейчас слышно отовсюду, как она пишет текста песен, сдает экзамены, пишет куски кода, но я подумал, а сможет ли она сама целиком завершить проект под моим руководством?

Создание веб приложения на основе React и Django, с базой данных на postgress, небольшое прощупывание RabbitMQ и чуть-чуть nginx, потом объясню зачем. Ах да! Завернём все в контейнеры и заставим подниматься в три команды!

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

Yandex Maps SDK: использование в React Native-приложении

В этой статье расскажу о том, как я лично столкнулся с Yandex Maps SDK для React Native и опишу базовый инструментарий, который предоставляет эта библиотека с небольшими примерами.