ReactJS *

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

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

В данной статье мы заглянем "под капот" движка React и увидем, как именно происходит обновление узлов. Параллельно рассмотрим и основные принципы мемоизации и её применение в различных типах компонентов.

Избавьтесь от хаоса модальных окон с useModalControl (React)

Модальные окна - важная часть UI современных веб-приложений. Управление ими в React может вызвать трудности, в частности, когда нужно избежать одновременного появления нескольких окон. Для этого и существует хук useModalControl, который облегчает эту задачу.

@atomazing/eslint-config представляет собой тщательно подобранный набор правил ESLint, направленный на оптимизацию процесса разработки. В этом наборе были исключены или изменены некоторые правила, которые могут негативно сказаться на удобстве работы разработчиков. Например, запретили использовать export default, чтобы проект был в одном стиле , чтобы уменьшить нагрузку на разработчика. Кроме того, некоторые правила были перенесены из категории ошибок (error) в предупреждения (warn), что позволяет более гибко управлять процессом кодирования без строгой необходимости исправления каждой мелкой детали.

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

В этой части я хочу рассказать как проектировал backend & frontend приложения.

Напомню что мы разрабатываем приложения для мерчанта, которое интегрируется в административную панель через iframe. Наше приложение должно иметь доступ к товарам, для того чтобы мерчант мог настроить маркетинговые кампании. Также приложение должно автоматически совершать публикации в Instagram.

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

Прорабатывается ТЗ и задача отдаётся разработчикам. Затем новая версия тестируется и уходит конечным пользователям. На этом жизненный цикл идеи завершён. Теперь остаётся дождаться массива свежей аналитики и отпраздновать…

Однако эта идея изначально была обречена. Она была поддержана лишь схожими с её автором людьми. Однако эти люди не самая подходящая ЦА, а возможно и вовсе её редкие исключения. И есть только один гарантированный способ проверить гипотезу - проверить её именно на аудитории бизнеса. Но, не на всей. Этот способ называется А/Б тестированием.

И именно ему будет посвящена данная статья. От идеи до конкретной реализации тестирования на next.js (которую можно повторить и на других технологиях).

18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).

В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:

- Race condition

- AbortController

- Clean up

- Debounce

Независимо от того, как вы относитесь к React, создавать что-либо с его помощью — это настоящее удовольствие, и с этим трудно не согласиться. Поэтому сегодня я решил создать простой инвентарный список, чтобы объяснить несколько мощных концепций, таких как сложное управление состояниями с помощью useReducer.

А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием.

Звучит интересно? Тогда давайте приступим.

Next.js предлагает широкие возможности для создания высокопроизводительных веб-приложений. Важной частью его функциональности с появлением Next App Router являются серверные и клиентские компоненты, которые позволяют разработчикам управлять рендерингом на стороне сервера и на стороне клиента, в зависимости от требований проекта. Давайте разберемся в этих компонентах более подробно.

Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.

В целом, мне как next.js разработчику большая часть была знакома. Десятки статей на хабре уже рассказали о практически каждой части этого обновления, частично их касался и я рассказывая об обновлениях внесённых в next.js.

Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.

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

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

Hello world!

Представляю вашему вниманию третью и заключительную часть обновленного руководства по Next.js.

• Первая часть
• Вторая часть
• Руководство целиком

На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

Привет, Хабр! Так вышло, что на текущем я попал под сокращение, а значит путь к собеседованиям открыт. Как раз вчера случилось одно (видимо, из многих), на котором зашла речь про useCallback.

По мере того, как я всё больше погружался в библиотеку и окружающее её сообщество, я заметил несколько закономерностей, о которых люди часто спрашивают. Эта статья будет посвящена довольно распространенной и важной задаче: преобразованию данных.

В данной статье рассматриваются особенности, которые связаны с обработкой нативных событий (native events) в React-приложениях. Существует проблема частичной потери контекста функционального компонента при обработке нативных событий, которые навешиваются на элементы с помощью глобальных объектов document, window или через ссылки (refs). В статье рассматривается данная проблема и предлагается способ её решения (один из вариантов).

Hello world!

Представляю вашему вниманию вторую часть обновленного руководства по Next.js.

• Первая часть
• Третья часть
• Руководство целиком

На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

Собираем кроссплатформенное (server-client, static-client, gh-pages, Android, iOS, macOS, Linux, Windows, Chrome extension, Docker, Kubernetes, ...) React приложение. В этой статье я почти не затрону Deep backend, только чуть-чуть в конце. Но рассмотрю Open Source шаблон/заготовку для сборки кроссплатформенных React приложений который мы используем в Deep.Foundation.

На прошлой неделе впервые поучаствовал в конференции по Frontend, где один из докладчиков, расказывал, как удачно его команда переехала с Redux на Mobx. Главным преимуществом он назвал отсутствие бойлерплейта и ускорение разработки в полтора раза.

Я прочитал несколько статей и посмотрел другие доклады, где все как один говорят, что Mobx лучше, чем Redux. Возможно это и так, но почему в сравнение всегда идет Redux, а не Redux-Toolkit, я не понимаю. Попытаемся конструктивно посмотреть действительно ли Mobx настолько хорош как о нем говорят.

Если вбить слово «фронтенд» в поисковую строку, можно найти огромное количество курсов по данному направлению. Проблема в том, что все курсы являются платными и, как правило, имеют ценник в несколько десятков тысяч рублей. 

Чтобы разбавить засилие платных курсов, мы подготовили для вас программу обучения «Frontend-разработчик с нуля», которая состоит только из бесплатных материалов.

Приветствую Вас, дорогие читатели Хабр! В данной статье мы рассмотрим работы DOM на таких библиотеках JavaScript, как Vue, React, Angular. Материал поможет понять принцип работы, конечно, самый лучший способ разобраться в той или иной теме — это практика. В этой статье будут приведены несколько примеров для лучшего понимания материала.