Друзья, всем привет! Меня зовут Игорь Карелин, я 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.
Допустим, у вас есть тестовое задание.
В статье мы обсудим, как это тестовое выполнить аккуратно, пошагово. Ну и - побочный эффект - сравнительно быстро.
Стейт-менеджеры уже давно стали своеобразным мемом среди разработчиков. Бытует мнение, что фронтедеры только тем и занимаются, что вместо решения действительно важных и актуальных проблем постоянно переписывают проект с одного стейт-менеджера на другой. Благо их количество и поток новых, выходящих в 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"
Настроим Push уведомления при использования EAS.
Факт отсутствия в русскоязычном сегменте интрнета и какого либо примера по настройке пуш уведомлений с использованием лишь инструментов которые предоставляет Expo Go очень расстраивает, поэтому вы сейчас видите сие творение.
Отвечая на вопросы в треде по React Native на StackOverflow я заметил что в той или иной форме люди очень часто интересуются производительностью компонентов списков и в частности FlatList. В этой гайде я решил рассмотреть способы оптимизации производительности на примере приложения для отображения списка вопросов с StackOverflow а во второй части статья я расскажу о новом компоненте FlashList который драматически ускорит работу ваших списков.
Привет, друзья!
В данном туториале я хочу поделиться с вами опытом решения одной интересной практической задачи.
Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:
Если вам это интересно, прошу под кат.
Всем привет! Меня зовут Никита Русанов, я лид команды фронтенда в компании, где мы создаем продукт, упрощающий переезд. В данной предметной области много задач по взаимодействию с гео данными. Сегодня я расскажу, каким образом можно работать с картами в браузере. В этой части мы с вами поговорим про используемые технологии.
Пошаговое руководство по настройке сборщика Webpack 5 совместно с такими инструментами как Pug, Sass, JavaScript, React и Markdown.
Effector - менеджер состояния web-приложений.
Новое и удобное решение. Продолжаем серию статей для новичков. Разбираемся, что может упростить работу, как работать с формами и многое другое...