Опыт создания приложения c использованием JS для мониторинга солнечной панели и управления электрической нагрузкой.
ReactJS *
JavaScript-библиотека для создания интерфейсов
React Query: стейт-менеджер для любителей кэша
Всем привет! Меня зовут Андрей Демьянов. Я тимлид и разработчик в МТС Travel. Совместно с другими командами мы создаем сервис по бронированию отелей в России и всему миру. Развиваемся с нуля, поэтому прямо на себе испытываем необходимость в новых библиотеках, подходах и изменениях, которые связаны с расширением и улучшением возможностей.
В этой статье я хотел бы рассказать о нашем опыте работы с библиотекой React Query (ныне TanStack Query, дальше RQ) и почему мы остановились именно на ней. А еще как она помогает нам упростить и ускорить доступ к страницам и данным, сэкономить ресурсы на однотипных запросах, упростить визуализацию работы с данными и распутать код. Глубоких технических подробностей не будет, но статья может быть интересна тем, кто хочет узнать об опыте применения RQ в условиях продуктовой разработки.
Кеширования в React — все ли так однозначно?
Все мы знаем про useCallback()
, useMemo()
, и memo
, которые используются для оптимизации производительности в React-приложениях. В этой статье я углублюсь в их работу и создам краткую шпаргалку, чтобы использовать их осмысленно и эффективно.
Начнем издалека...
Вопросы к собеседованию React (Junior level)
Сегодня я покажу вам подборку из популярный вопросов для React разработчиков. В этой статья я подробно разберу 10 вопросов для начинающего разработчика, но не проходите мимо если вы давно уже не Junior, возможно вы сможете подчеркнуть для себя какие-то тонкости.
Истории
Не изобретайте велосипед! Или наборы утилит для Vue и React приложений
Многие разработчики, когда дело заходит о стандартном веб функционале, например: хранение boolean значений, отлавливания нажатия клавиш или создания stepper, часто идут гуглить как сделать ту или иную функцию и чаще находят способ с реализацией функционала с полного нуля.
Как сделать Infinite Scroll на хуках в React приложении
Infinite Scrolling - это популярный метод загрузки данных по мере необходимости (on-demand quests). При начальном рендере приложение запрашивает только часть контента (только ту, которую он сможет увидеть) и динамически подгружает следующие части по мере прокрутки страницы пользователем, обеспечивая бесшовный user experience.
В этой статье описан самый простой способ реализации - на хуках.
Playwright и Allure как хорошая практика для разработки веб-приложения
Разработчики вечно ищут баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Наш рабочий рецепт – это фронты + e2e-тесты. Рассказываю, как мы используем автотесты и визуализируем их результаты.
Next.js и революционные изменения в React
React.js — это сейчас одна из самых популярных библиотек для создания современных веб-приложений. React славится гибкостью и богатством экосистемы. Одним из значительных достоинств этой экосистемы является Next.js — и то, как он успешно развивается. С этим фреймворком стало значительно удобнее разрабатывать приложения на основе React, их возможности расширились. В этой статье мы рассмотрим, как Next.js улучшил React, затронем его особенности, преимущества, и что из них вытекает.
Полный гайд по UI-китам: как их создавать, подключать и ничего не бояться
Привет! Я Леша Кузьмин, главный про фронтенду в AGIMA. Мы с коллегами решили суммировать наш опыт по подготовке UI-китов и сделать большую и внятную инструкцию для новичков. Во-первых, это удобно — будем давать эту статью нашим стажерам и падаванам. Во-вторых, нам не жалко — читайте, делитесь опытом, задавайте вопросы в комментариях.
Ниже разбираем всё с самого начала: от «зачем это вообще нужно» до «как использовать на реальном проекте». А в самом конце найдете репозиторий с фрагментами кода, которые можно использовать в своей работе. Статья для начинающих и не только начинающих Frontend-разработчиков. За помощь в ее подготовке благодарю мою коллегу Ангелину Николаеву.
Фабричный метод в React: эффективное создание компонентов. Часть 1
Привет всем! Я Мыльников Кирилл, frontend-разработчик в компании Usetech. Сегодня хочу поделиться примером реализации фабричного метода во фронтенде и объяснить, когда и где его следует применять. Освежим память о паттернах и роли, которую они играют в проектах.
Я готовлю серию статей о паттернах в React. Первая статья будет посвящена фабричному методу. Все примеры мы с вами разберем на реальных сценариях, с которыми вы могли бы столкнуться в проекте.
Давайте по классике начнем с определений, вспомним, что такое паттерны и фабричный метод.
Frontend. Поток данных
Здравствуйте :)
Коротко о чем тут, чтобы вы могли понять нужно ли оно вам или нет.
Тут я описываю то к чему пришел в проектировании глобальных сторов и потока данных в приложении.
Материал может быть полезен как для новичков, так и для более опытных.
Примеры будут на React и Effector, но это не важно, потому что тут важна идея, а не реализация. К тому же это везде будет примерно одинаково выглядеть.В конце будут так же ссылки на примеры с svelte + effector
и react + redux thunk
Преобразования данных React Query
Привет, на связи KOTELOV! Мы перевели эту статью, чтобы понять, как эффективно преобразовывать данные при работе с REST API и библиотекой react-query.
Давайте посмотрим правде в глаза: большинство из нас не используют GraphQL. А если кто-то использует, то ему крупно повезло, потому что получает уникальную возможность запрашивать данные в том формате, в котором ему хочется.
Но если вы работаете с REST, вы довольствуетесь тем, что возвращает бэкэнд. Так где лучше всего преобразовывать данные при работе с react-query? Универсальный ответ в разработке ПО применим и здесь: «Это зависит от обстоятельств».
Разберем три подхода к преобразованию данных, их плюсы и минусы.
Как я развиваю свое приложение для хранения прочитанных книг?
Всем привет! Полгода назад я выпустил свое приложение для хранения прочитанных книг BookDesk: Читательский дневник. В этом материале хочу поделиться с вами своими мыслями, статистикой и, в целом, как обстоят дела с приложением.
Ближайшие события
Организация структуры папок и файлов в React/Next по MVC-архитектуре
В этой статье я делюсь своим способом упорядочивания папок и файлов для проектов на React/Next. Я fullstack разработчик с 10+ лет опыта коммерческой разработки, множество стартапов разработал в различных командах, и несколько стартапов разработал в одиночку, в т.ч. своих собственных.
В средних и крупных проектах присутствует огромное количество самописных модулей и компонентов, и важно оптимизировать их хранение, сделать файловую структуру простой и понятной для самого себя и других программистов, которые будут работать над проектом. Но как обеспечить хранение множества самых разнообразных компонентов, скриптов и модулей, чтобы дерево файлов не превращалось в кашу, и поиск нужного компонента происходил быстро, чтобы не приходилось искать его в длинном списке файлов?
Tramvai — фреймворк для создания веб-приложений
30 августа 2021 года на GitHub прошел первый релиз исходного кода фреймворка Tramvai. При этом свою историю фреймворк начал гораздо раньше и долгое время был внутренней разработкой компании.
Tramvai предназначен для создания универсальных (SSR) React-приложений наряду с Next.js, Remix и SvelteKit. Фреймворк служит основой для десятков приложений и решает проблемы наших разработчиков с помощью более чем 150 библиотек и модулей, разработанных специально для tramvai-приложений.
В статье расскажу про принципы работы фреймворка, его преимущества и основные возможности. Для тех, кто сразу хочет опробовать фреймворк, доступен базовый шаблон приложения на Codesandbox.
На чем разработать свой стартап или с чего начать хакатон в 2024? (часть 1)
Попробуем собрать свой идеальный boilerplate для full-stack разработки в 2024 году. В этой статье мы будем постепенно собирать свой шаблон для быстрого запуска стартапов.
Сразу предупреждаю, что статья будет холиварной, всех хейтеров прошу в комменты, предлагайте решения со ссылкой на публичные кейсы.
Освоение программирования за 2 года с нуля или как я пытался автоматизировать реальное производство
Моя профессия далека от IT технологий. Я работаю на производстве кажется всю жизнь довольно давно. Тематика - производство и ремонт металлообрабатывающих станков. Производим станки как новые, так и ремонтируем. Стараемся все делать локализировано (импортозамещение ж)- все железки точим, шлифуем, собираем и т.д
Подключаем библиотеку к проекту с помощью npm/yarn link
Привет! Меня зовут Света, я фронтенд-разработчик отдела спецпроектов в KTS.
Наш отдел разрабатывает и запускает около 100 проектов в год. При такой загрузке мы постоянно ищем новые способы ускорить и автоматизировать работу.
У нас много библиотек: с общими утилитами и хуками, стилями, классами базовых сторов, с утилитами для ВК- и ОК-приложений. Во всех этих библиотеках нужно постоянно дополнять и заменять какие-то элементы, а после этого тестировать библиотеки на работоспособность.
Подключение библиотеки к проекту не такой простой процесс — особенно для новичков. В первый раз нам потребовались пять статей и десять часов времени на ошибки, проверку и сбор наработок для команды. После этого мы решили написать статью-подсказку, чтобы сделать жизнь других разработчиков проще, а работу — быстрее.
Поясняю за React Сompiler
В 2024 году команда React готовит множество нововведений, приуроченных к выходу React 19.
Одним из таких нововведений является React Сompiler — новый JavaScript-компилятор для оптимизации вычислений. Главной целью разработчиков была оптимизация и автоматизация мемоизации в React-приложениях. Если раньше фронтендерам приходилось использовать такие хуки, как useCallback
и useMemo
, то вскоре React сам возьмёт на себя ответственность за мемоизацию, чтобы избежать повторных вычислений при каждом рендеринге.
Не будем затягивать со вступлением и сразу перейдём к пересказу.
Web APIs, которые функционально приближают веб-приложения к нативным
Исходные данные: мы с командой делаем банковское приложение. Веб-приложение. Не все поверят, но сегодня реально реализовать на вебе такой пользовательский опыт, от которого люди не будут скрипеть зубами и умолять вернуть им натив. Расскажу, какие Web API мы используем, раскрою тонкости и покажу примеры кода.
Вклад авторов
ru_vds 1186.4aio350 530.1jarvis394 375.0artalar 265.0MrCheater 199.4varanio 191.0EFS_programm 168.0maxfarseer 163.8comerc 161.6kashey 155.0