ReactJS *

React vs Vue vs Angular. Общее сравнение JavaScript фреймворков

В ходе развития веб-разработки 3 JavaScript-фреймворка стали хорошо известны всем front-end разработчикам: React, Vue и Angular.

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

Все три фреймворка могут использоваться практически взаимозаменяемо для создания компонентных frontend-приложений с расширенными возможностями пользовательского интерфейса. Однако окончательный выбор зависит от требований проекта и предпочтений разработчика.

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

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

В данном туториале я покажу вам самый простой и быстрый, хотя и не очень оптимальный с точки зрения размера сборки, способ рендеринга 3D-объектов и моделей в React.

Мы решим 3 интересные задачи:

• рендеринг самописного 3D-объекта;
• рендеринг готовой 3D-модели;
• совместный рендеринг объекта и модели.

Знание вами основ работы с трехмерной графикой в браузере является опциональным.

Источником вдохновения для меня послужила эта замечательная статья.

Если вам это интересно, прошу под кат.

Сегодня мы рассмотрим процесс написания своего собственного плагина babel и опубликуем его в npm.

Допустим, у вас есть тестовое задание.

В статье мы обсудим, как это тестовое выполнить аккуратно, пошагово. Ну и - побочный эффект - сравнительно быстро.

Стейт-менеджеры уже давно стали своеобразным мемом среди разработчиков. Бытует мнение, что фронтедеры только тем и занимаются, что вместо решения действительно важных и актуальных проблем постоянно переписывают проект с одного стейт-менеджера на другой. Благо их количество и поток новых, выходящих в open source, позволяют. 

Выход есть — Signals. Решение, по словам создателей, сочетает оптимальную производительность для разработчиков и легкое внедрение во фреймворк. Под катом — подробный разбор библиотеки. 

Меня зовут Женя, я все еще фронтенд-разработчик в команде Quick Experiments inDrive. И я тоже не люблю выделяться из толпы, поэтому предлагаю обратить внимание на новое решение от команды Preact — Signals. Во вступительной статье создатели библиотеки заявляют о том, что сегодня создано огромное количество решений по управлению состоянием приложения, но они требуют сложной и долгой интеграции с фреймворком. Это усложняет проектирование, так как нужно постоянно держать в уме особенности стейт-менеджера. Усложняется и разработка, так как нужно тратить много времени и сил на интеграцию стейт-менеджера и библиотеки рендеринга. 

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

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

Репозиторий с кодом проекта

Прим. пер.: автор рассказывает лишь о ключевых особенностях приложения, поэтому я рекомендую клонировать репозиторий, установить зависимости и запустить сервер для разработки, чтобы иметь возможность выполнять необходимые операции при чтении статьи. Обратите внимание: если у вас возникнут проблемы при запуске сервера для разработки с помощью команды npm start, перенесите переменные, определенные в этой команде в файле package.json, в файл .env:

SKIP_PREFLIGHT_CHECK=true
TSC_COMPILE_ON_ERROR=true
ESLINT_NO_DEV_ERRORS=true

И отредактируйте команду start следующим образом:

"start": "react-scripts start"

Руководство по React Query

Настроим Push уведомления при использования EAS.

Факт отсутствия в русскоязычном сегменте интрнета и какого либо примера по настройке пуш уведомлений с использованием лишь инструментов которые предоставляет Expo Go очень расстраивает, поэтому вы сейчас видите сие творение.

Отвечая на вопросы в треде по React Native на StackOverflow я заметил что в той или иной форме люди очень часто интересуются производительностью компонентов списков и в частности FlatList. В этой гайде я решил рассмотреть способы оптимизации производительности на примере приложения для отображения списка вопросов с StackOverflow а во второй части статья я расскажу о новом компоненте FlashList который драматически ускорит работу ваших списков.

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

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

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

• ширина таблицы должна соответствовать ширине слайдера;
• ширина колонки таблицы должна соответствовать ширине слайда;
• слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации;
• таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне);
• при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы — переключение слайдов.

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

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

Пошаговое руководство по настройке сборщика Webpack 5 совместно с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

Effector - менеджер состояния web-приложений.

Новое и удобное решение. Продолжаем серию статей для новичков. Разбираемся, что может упростить работу, как работать с формами и многое другое...

Всем привет, дорогие читатели Хабр. Мы долго думали, чтобы нам сделать такое, что от нас не потребует глубоких знаний бэкенда и базы данных, но все же интересное и обучающее, исключительно ориентированное на конечного пользователя. Так мы пришли к тому, что нам бы хотелось изучить более подробно сферу WebRTC и WebSockets и решили сделать что-то похожее на Google Meet c еë основными фичами, которые более подробно описаны чуть ниже. Но давайте все по порядку :) Приготовьтесь, будет много кода!

Чуть больше года назад я столкнулся с разработкой телеграм-ботов. Будучи профессиональным программистом быстро разобрался и свет увидел мой первый бот - Доктор Знаев. Статью про него выкладывал на vc.ru . Затем от него отпочковался Алкобот Знаева с забавным функционалом - вы ему название лекарства, а он вам скажет через сколько после приёма можно выпивать

Боты это хорошо!

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

Итак, вот мои основные претензии к телеграму (сорян, Паша).

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

Как работать с запросами в useEffect

Как предотвращать лишние запросы в useEffect с помощью useRef и использовать useRef как стабильную переменную

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

Команда Vercel порадовала нас большим релизом популярного фреймворка Next.js, давайте вместе разберёмся, что там изменилось и появилось нового

Redux и MobX больше не нужны ?

Туториал для новичков по EffectorJS - современному и удобному стейт-менджеру. Рассмотрим основные возможности, работу ядра, и какие проблемы решает. На примерах.

Приятно познакомиться, мы битриксоиды. Да-да, те самые которые:
- вообще не модные,
- пишут НЕ на Laravel и Symphony,
- возятся с кучей мягко говоря “неидеального” кода под названием “1С-Битрикс: Управление сайтом”,
- проходят Академию 1С-Битрикс и сдают платные экзамены для подтверждения компетенций,
- умеют дорабатывать обмен с 1С без истерики,
- берут с заказчика "тонну денег" за то что любой php-джун сделает на вордпрессе одной левой,
- но при всем этом почему-то делают сложные проекты переживающие тысячи доработок без потери товарного вида и управляемости.

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

Но сегодня речь не о бекенде. Поговорим мы про переделку нашего собственного сайта на более-менее свежих FRONTEND-технологиях. И одновременно прикинем, а почему бы не делать все сайты/магазины/личные кабинеты на таком стеке.

В этой статье я бы хотел подискутировать о том, насколько хорошо паттерн MVVM подходит для разработки Web приложений на React. Вместе этим, я собираюсь описать какие преимущества могут быть при разработке с использованием MobX с паттерном MVVM в сравнении с Redux. Запаситесь кофе, это будет долгое чтиво.

Использование ref в функциональных компонентах играет две роли:

1. С помощью них можно получить ссылку на dom элементы и react компоненты

2. ref можно использовать как стабильные переменные.

В этой статье сосредоточимся на первой роли, разберем, как с помощью ref получить доступ к dom элементам и компонентам react, включая такие какие способы как createRef, useRef и ref callback. Обсудим для чего нужны forwardRef и useImperativeHandle , и как с их помощью получить ссылку на функциональные компоненты, спойлер: нельзя так просто получить ссылку на функциональный компонент с помощью ref. А уже в следующей статье обсудим роль ref в качестве стабильной переменной, и как это облегчит нам жизнь при использовании useEffect, useMemo, useCallback.