Не каждому проекту нужно децентрализованное логирование. В моём случае, оказалось проще хранить логи в .json файлах формата Compact Log Event Format (CLEF). Мне нужно было простое и бесплатное решение для просмотра логов.
ReactJS *
JavaScript-библиотека для создания интерфейсов
Книга «React быстро. 2-е межд. изд.»
React предельно упрощает создание привлекательных и надежных интерфейсов для веб-приложений. Эта великолепная библиотека JavaScript имеет модульную архитектуру, что позволяет легко создавать, объединять и тестировать компоненты. React идеально подходит для небольших прототипов, корпоративных сайтов и других подобных решений.
«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.
Книга предназначена для разработчиков, имеющих опыт создания веб-приложений на базе JavaScript.
Typescript Generics
Javascript - крутой язык со своими преимуществами и недостатками. И одно из его свойств - это динамическая типизация, которая одновременно может быть как преимуществом, так и недостатком. Очень много холиварных тредов на этот счет, но по мне так все просто. Для небольших и простых проектов динамическая типизация - это очевидный плюс, так как сильно ускоряет разработку. Однако, когда речь идет о сложных системах, над которыми работает не один человек, сложно отрицать преимущество статической типизации. Ведь статические типы не только регламентируют систему, но и при больших размерах системы начинают ускорять разработку.
Как же это возможно? Ведь приходится постоянно тратить лишнее время на описание, импорт и применение типов. Все дело в размере, хотя многие утверждают, что он не важен. Логику небольшого приложения можно держать в уме, а вот с большим вряд ли это получится. Тут нам типы и помогут, подскажут, что из себя представляет тот или иной объект без необходимости перехода к нему, подсветят ошибку, если мы передали неправильный аргумент в функцию и т.д.
При этом написание типов бывает действительно утомительным, но Typescript предоставляет возможности ускорить и этот процесс. Здесь нам на помощь придут дженерики.
Прежде чем начать, сразу отмечу, что примеры, которые я буду использовать доступны в песочнице, где собран лайтовый проект. Некоторые решения в этом проекте созданы только для демонстрации темы и их не стоит применять в реальных проектах.
Топ-3 причины, почему вы должны использовать Copilot
Всем привет! Меня зовут Анатолий Барцев, я frontend-разработчик в команде Модерации Циан. Я решил протестировать Copilot, чтобы оценить, полезен ли он для реальной разработки. В статье расскажу, какие выделил для себя плюсы использования, а также покажу, как GitHub Copilot помогает в разработке на примере проекта на React/Typescript.
Истории
Django + React. Авторизация с помощью сессий между разными источниками
Всем здравия! Сегодня будет рассмотрена авторизация с помощью сессий между Django и React, которые находятся на разных доменах, т.е случай "cross-origin". Я в двух словах донесу принцип работы, причины появления концепций и технологий описанных здесь, оставлю ссылки на более подробные источники и приведу код конкретной реализации с объяснением своих шагов. Кого интересует полный код, он находится на GitHub.
$mol — лучший мемогенератор во фронтенде
Здравствуйте, меня зовут Дмитрий Карловский и я... ради лулзов создал самый мемный фреймворк в индустрии.
Почему стоит взглянуть на Relay и GraphQL снова
Если вы давно следите за моей работой, то знаете, что одним из моих любимых пристрастий являются сравнения GraphQL, REST, tRPC и других технологий, в которых не упоминаются Relay и Fragments. В этом посте я объясню, почему я считаю Relay переломным моментом, как мы сделали ее в 100 раз проще в использовании и внедрении, и почему вам стоит обратить на нее внимание.
Деструктуризация в React. Очевидно, но важно
Деструктуризация, которая появилась в стандарте ES6, уже не вызывает вопросов у многих из нас, есть много статей, раскрывающих ее возможности. В основном, мы все тесно с ней дружим и пользуемся, многие, как оказалось, пользуются ей, даже не зная названия этой магии.
Казалось бы, что можно рассказать о том, о чем все и так знают? Но практика и чтение статей на Хабре, показали, что есть некоторые нюансы использования деструктуризации в React, которые не все из нас знают или просто не все из нас о них задумываются, хотя они и являются очевидными.
Анализ производительности React Native приложений: как выявить проблемы и улучшить перформанс
Привет, Хабр! Меня зовут Вадим, я мобильный разработчик в СберМаркете. В этой статье расскажу, как провести профилирование (оно же измерение производительности или оценка перформанса) в react native приложениях: как выявить источник проблем и решить их. В русскоязычных источниках не так много информации по данной теме. Я потратил немало времени, чтобы со всем разобраться, поэтому попытаюсь восполнить этот пробел и для вас :)
Как я отрендерил миллион строк в React
Недавно я столкнулся с задачей, известной как one billion row challenge. Два аспекта этого вызова меня заинтриговали:
1. Каковы будут последствия, если я попробую решить этот вызов на фронтенде?
2. Удастся ли мне это?
Хотя я не уверен в возможности визуализировать миллиард строк в таблице, цифра в миллион кажется вполне достижимой. Узнав о таком интересном вызове, я решил заняться маленьким проектом, целью которого было отображение миллиона строк в React.
Давайте я вас подробно ознакомлю с тем, что именно произошло, как это было сделано и по каким причинам.
Представляем Firebolt: Продуктивный React фреймворк
Создание веб-приложений должно быть простым...
К сожалению, современная веб-разработка постепенно становится все более сложной и запутанной. Веб всегда был просто вебом, так почему же он не стал проще? Почему мы не становимся более продуктивными?
Сегодня мы рады публично представить Firebolt: новый вид фреймворка react для создания веб приложений. В Firebolt собрано все, чему мы научились за последние несколько лет, и сведено в крошечный, молниеносно быстрый фреймворк, созданный для того, чтобы вы работали продуктивно и приносили пользу.
Рецензия на книгу Владимира Дронова «Node.js, Express, MongoDB и React. 23 урока для начинающих», есть промокод
В мире инструментов веб‑разработки особое место занимают технологии, объединенные аббревиатурой MERN (MongoDB, Express, React, Node.js), представляющие собой комплексное решение для разработки современных веб‑приложений. Книга Владимира Дронова «Node.js, Express, MongoDB и React. 23 урока для начинающих» представляет собой полезный ресурс для тех, кто хочет освоить этот стек технологий. И еще важно — это мощная книга на 600+ страниц, а не проходная брошюрка.
Путь развития Frontend разработчика (Вторая часть)
Это вторая часть roadmap frontend разработчика, Если вы не читали первую часть, то настоятельно рекомендую ознакомится, Первая часть. В этой статье я продолжу вам рассказывать про мое представление современной карты развития frontend разработчика.
Ближайшие события
Использование кастомных шаблонов и конфигов для swagger-typescript-api
swagger-typescript-api - это мощный инструмент для генерации кода на основе OpenApi-контактов, о процессе работы с которым я рассказывал в предыдущей статье. Там же я упомянул, что его можно кастомизировать под нужды конкретного проекта с помощью своих шаблонов.
Именно кастомные шаблоны и бонусом, кастомная конфигурация, будут раскрыты в текущей статье. Поехали!
Кеширование next.js. Дар или проклятие
В 13 версии команда next.js представила новый подход к проектированию приложения - так называемый App Router. В 14 версии его сделали стабильным и основным для новых приложений.
App Router значительно расширяет функционал next.js - частичный пререндеринг, шаблоны, параллельные и перехватываемые роуты, серверные компоненты и многое другое. Однако, даже несмотря на все эти улучшения - далеко не все решили перейти на App Router. И на это есть свои причины.
О преимуществах и проблемах нового роутера я уже рассказывал в предыдущей статье. Дальше же речь пойдёт не о новых абстракциях или их особенностях. На самом деле ключевым и самым спорным изменением является именно кеширование. В этой статье будет рассказано что, зачем и как кеширует самый популярный фронтенд фреймворк - Next.js.
className убивает ваш UI kit
UI kit играет важную роль в разработке веб-интерфейсов. Он представляет собой набор компонентов и стилей. Основная ценность его использования - это экономия времени. Вместо того, чтобы создавать каждый элемент с нуля, разработчики могут использовать уже готовые элементы, что ускоряет процесс разработки.
Гибкое API у UI kit компонентов является преимуществом. Однако возможность повлиять на стили ваших компонентов в конкретном месте является большим искушением. Разработчику выгодно внести изменение здесь и сейчас, а не думать на перспективу. Такое поведение постепенно разрушает вашу систему переиспользования.
Мемоизация в React: я почитал документацию вместо вас
В статье рассмотрены три инструмента мемоизации в React: useMemo, useCallback, memo. Главный источник информации: документация React. Не всем комфортно работать напрямую с документацией, так что если вы постоянно откладываете погружение в документацию React - я сделал это за вас, постарался выделить самое важное, и дать ссылки для углубленного погружения.
Так как мы будем рассматривать не самые базовые вещи, касающиеся React, то я не буду останавливаться на таких основах как хуки, состояние, свойства, чистые функции и чистые компоненты, ожидая, что вы ознакомитесь с ними за пределами статьи. А также все рассмотренное ниже относится в первую очередь к React 18.
Работа с REST API при помощи swagger-typescript-api
Прежде чем начать писать данную статью, я озадачился интересным вопросом. А кто как вообще работает с API в 2024 году? Для меня наличие Swagger-контракта или OpenAPI-контракта уже несколько лет как must have. И откровенно говоря, мне сложно представить, что люди не используют этот фреймворк для работы c REST API. Однако, если среди читателей таковые есть, и вам до сих пор скидывают «дтоошки», то вперед осваивать и продвигать OpenApi.
Для понимания работы swagger-typescript-api я сначала кратко опишу основные моменты спецификации OpenAPI. Читатели, которые уже знакомы с этим, могут сразу перейти к части про swagger-typescript-api.
Web3 приложение Twitter на React.js + Solidity | часть 2
Hello, в первой части был подготовлен проект, подключены кошельки и написан backend на Solidity, значит пришло время писать frontend на React.
Проект далёк от продакшена и является простым примером для новичков, предназначенным для демонстрации взаимодействия с смарт‑контрактом через веб‑приложение.
Web3 приложение Twitter на React.js + Solidity | часть 1
Hello, в этой статье постараюсь подробно показать процесс создания dApp приложения на примере Twitter. Проект написан на ReactJS и Solidity. Контракт развернут в частной сети с помощью truffle
и ganache
.
В первой части мы подготовим проект, напишем смарт-контракт и развернем его в частной сети, а также подключим кошельки в MetaMask.
Во второй части будет написано web-приложение для взаимодействия с контрактом.
Вклад авторов
ru_vds 1186.4aio350 489.5jarvis394 375.0artalar 265.0MrCheater 199.4varanio 191.0EFS_programm 168.0maxfarseer 163.8comerc 161.6kashey 155.0