Всем привет!
Все мы прекрасно знаем что построить полноценный стор на react context достаточно тяжело, а оптимизировать его ещё тяжелее.
А что если я расскажу как это можно сделать быстро и просто?
Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors.
Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и применит соответствующий код css класса.
Приложение React/Redux представляет собой односторонний цикл потока данных. Пользователь взаимодействует с пользовательским интерфейсом, который производит действия Redux, которые отправляются в функции reducer, которые обновляют объект состояния приложения, который передается обратно в React для повторного отображения пользовательского интерфейса.
Разговор с ChatGPT также представляет собой односторонний цикл. Человек посылает запрос (действие), который передается языковой модели (редуктор), которая обновляет разговор (состояние) своим ответом.
Можем ли мы использовать последнюю модель ChatGPT для этих целей? Спойлер: да, можем!
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи.
Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо!
Преимущества изучения TS могут быть сведены к следующему:
Эта статья представляет собой минимальное введение по использованию TS в React.
Антигероем нашей истории будет Пэт — очень неприятный технический директор.
Привет! Меня зовут Илья Никитин, я по-прежнему фронтенд-разработчик в Авито, работаю в кластере BuyerX. В прошлом году я писал о том, как сложно было перевести кнопки контактов на странице объявления с Twig-шаблонизатора на React. Мы переживали, получится ли перезапуск и станет ли он последним. В итоге A/B-тест мы не раскатили, но перезапуск действительно был последним, мы учли все ошибки и пошли дальше. За прошедший год мы полностью переписали страницу объявления. Рассказываю, как это было и с какими трудностями нам пришлось столкнуться.
Наш Альфа-Банк прекрасен. Мы его очень любим, но он такой большой-большой, разнообразный и сложный. Думаю, никого не удивил :) Наш ИТ-ландшафт содержит великое множество всякой «флоры и фауны», с которой необходимо считаться. То тут, то там, из глубоких Enterprise джунглей нам улыбаются и игриво подмигивают орды легаси-систем, каждая из которых живет своей собственной жизнью и поддерживается разными командами. Например, HR-вопросы — это SAP HCM, со своими потоками и фронтами, написанными на SAP UI5, Fiori, вопросы учета — SAP ERP, а есть ещё IBM Lotus Notes, системы документооборота и пр., и пр.
Для организации и упорядочивания различных бюрократических процедур, в банке есть такой инструмент, как электронная заявка. По задумке, он должен быть удобным: открываешь сервис, выбираешь тип, заполняешь, отправляешь. Нюанс в том, что есть примерно 1000 видов разных заявок, и в каждой родительской системе заявки создаются по своему, в разных местах, а согласуются своим инструментарием. Сотрудники страдают, а новые коллеги ужасаются, когда окунаются в этот зоопарк систем: непонятно куда бежать, что нажимать и как это всё работает.
Всем привет, меня зовут Олег Кругляков, я руководитель направления в одной из команд клиентского пути сотрудника Alfa People. В статье хочу поделиться опытом создания сервиса, который объединяет все эти заявки в одном месте без «беготни» по разным системам. При всем при этом, он весело работает в браузере и весело работает в мобильном приложении, нордически выдерживая единый дизайн. Ну, приятно, чего греха таить ?
Здравствуйте, меня зовут Дмитрий Карловский и я.. большой любитель физики высоких энергий. Сталкиваешь такой совершенно разные вещи между собой, и смотришь на бабахи, уплетая поп-корн.
Так как в Реакте всё очень плохо с архитектурой, а страдают от него многие, то к настоящему времени появилось уже очень много так называемых менеджеров состояний. И каждый наперебой уверяет, что он самый быстрый, самый надёжный, самый компактный, самый выразительный и вообще самый правильный.
Что ж, давайте возьмём их всех и столкнём лбами друг с другом и с суровой реальностью, чтобы узнать кто же на самом деле тут батя!
Друзья, всем привет! Меня зовут Игорь Карелин, я frontend-разработчик в компании Домклик. В прошлой части мы разобрали, как создать аутентификацию с помощью библиотеки Passport, а сегодня мы рассмотрим такие манипуляции, как добавление, редактирование, удаление и получение задач. Для начала давайте разберём HTTP и некоторые типы запросов.
Библиотека Unified и экосистема плагинов для работы с Markdown и HTML позволит очень просто создать конвертер и подключить компоненты React. Unified преобразует контент в синтаксическое дерево, и имеет набор утилит для работы с деревом, но даже без набора утилит это простая задача, достаточно уметь перебирать свойства объекта javascript. Все это будет продемонстрировано и объяснено.В статье есть пример создания плагина и демо проект.
Привет! Сегодня поговорим про стандартные способы оптимизации web-приложения в экстремистской библиотеке React. Мотивацией послужило некоторое количество кода, который я видел. Связан он с использование API React не по назначению или без учета каких-то очевидных проверок на производительность и тонкостей (с натяжкой).
В предыдущей статье вы узнали, как разрабатывать переупорядочиваемые drag-and-drop компоненты, теперь пришло время их протестировать. В этой части вы покроете приложение юнит тестами с помощью BDD подхода.
Карты на стол! Поговорим начистоту, почему во фронтенде всё так плохо. Пришла пора подраться, обняться, и вместе двинуться сворачивать горы. Пройдёмся по единству и борьбе интересов, влиянию больших компаний и маленьких людей, причинам попадания в эти порочные круги, и стратегиям их разрыва. А на привалах потравим байки из жизни.
Доклад должен заставить нас посмотреть на реальную разработку с другой стороны и задуматься о том, как мы можем исправить подходы и отношение к некоторым вещам, чтобы фронтенд стал чуточку лучше.
Предполагаемая аудитория: Бесстыжие программисты и наивные руководители. Одних пристыдим, другим раскроем глаза. И наоборот.
Разработка и тестирование сортируемых компонентов Drag and Drop. Часть 1.
В этой серии статей мы рассмотрим задачу разработки и тестирования сортируемых компонентов Drag-and-Drop.
Redux Toolkit Query — это мощный инструмент для взаимодействия с API, который из коробки реализует такие полезные фишки, как отображение состояния загрузки, кэширование, дедупликацию запросов, полинг, ревалидацию при различных условиях, а также весьма удобна в использования за счёт готовых хуков.
Привет, меня зовут Антон Степанов, я — frontend-разработчик в Альфа-Банке. В статье расскажу какие задачи при работе с API frontend-разработчику приходится решать чаще всего, к каким идеям рано или поздно это может привести, и как их можно реализовать в RTK query, собственно.
Под катом много кода и убеждений.
В своей прошлой статье я рассуждал о том, как использование паттерна MVVM позволяет упростить процесс разработки. Паттерн был реализован с применением библиотеки MobX. Эту библиотеку я считаю в разы удобнее Redux, аргументы в пользу чего я также привел в статье. Однако, у нее имеется серьезный недостаток - излишняя свобода действий, в следствие наличия которой разработчики не всегда знают как писать код "хорошо". Паттерн MVVM же диктует несколько простых правил по использованию MobX, благодаря которым разработчики могут реже наступать на грабли. Однако, он не решает всех проблем. И в этой статье я бы хотел показать, как можно дополнить паттерн MVVM и сделать процесс разработки ещё приятнее.
React vs Vue vs Angular. Общее сравнение JavaScript фреймворков
В ходе развития веб-разработки 3 JavaScript-фреймворка стали хорошо известны всем front-end разработчикам: React, Vue и Angular.
React считается библиотекой пользовательского интерфейса, Angular - полномасштабным front-end фреймворком, предоставляющим собственные инструменты для всех связанных с разработкой веб-приложений функций, а Vue - прогрессивным фреймворком, реализованным как дополнительная разметка для HTML.
Все три фреймворка могут использоваться практически взаимозаменяемо для создания компонентных frontend-приложений с расширенными возможностями пользовательского интерфейса. Однако окончательный выбор зависит от требований проекта и предпочтений разработчика.
Каждый фреймворк имеет различную архитектуру, производительность в различных сценариях, экосистему и инструменты, которые мы постараемся рассмотреть в этой статье, чтобы лучше понять их удобство использования.
Привет, друзья!
В данном туториале я покажу вам самый простой и быстрый, хотя и не очень оптимальный с точки зрения размера сборки, способ рендеринга 3D-объектов и моделей в React.
Мы решим 3 интересные задачи:
Знание вами основ работы с трехмерной графикой в браузере является опциональным.
Источником вдохновения для меня послужила эта замечательная статья.
Если вам это интересно, прошу под кат.
Сегодня мы рассмотрим процесс написания своего собственного плагина babel и опубликуем его в npm.
