Как стать автором
Поиск
Написать публикацию
Обновить
26.91

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Руководство по Convex. Часть 2

Уровень сложностиСредний
Время на прочтение27 мин
Количество просмотров1.6K


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


В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.


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


Эта вторая часть серии, в которой мы поговорим об аутентификации и авторизации.


Читать дальше →

Многослойная архитектура FrontEnd-приложений на основании SOLID, часть 2

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров11K

Итак, в предыдущем посте мы многое разложили по полочкам и разобрали проблемы кодовой базы. Осталось есть ощущение, будто что-то еще не так. Хочется чего-то более элегантного.

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

Большинство нормально структурированных приложений придерживается ее высокоуровнево, но на деле она вас не особо ограничивает. Есть много сходств со стандартной MVC-архитектурой:

Читать далее

Observable – удобный state-manager

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров7.7K

Я вас понимаю. Да – еще один. Но давайте посмотрим, вдруг правда?

Давайте определимся с тем, что такое удобно. Конечно, у нас разные представления об удобстве, поэтому я опишу свои с примерами из api react:

Читать далее

Многослойная архитектура FrontEnd-приложений на основании SOLID, часть 1

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров9.1K

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

Но в основном сначала получается та самая картина с балконом.

Читать далее

Typescript для React

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров8.7K

Typescript - сложный язык, но большинству разработчиков не нужно знать все его тонкости, чтобы быть эффективными в своей работе.

Это то, что я считаю минимальным набором знаний по тайпскрипту для эффективной разработки продукта на React.

Основные принципы, которые мы здесь используем:

Типизируйте входные данные, предсказывай результат

Минимизируйте шум в кодовой базе

Ошибки должны отображаться как можно ближе к коду, который их вызвал

Читать далее

Всё под контролем: сила useRef и forwardRef в React

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров7.9K

Начнем с небольшой истории. Как-то раз я с размахом накинулся на проект — в духе нынешних фреймворков всё было обложено компонентами, декларативный стиль царил, все шло идеально… ну почти. Дошел я, значит, до нужды контролировать DOM-узлы напрямую. И что вы думаете? Прямого доступа нет, React закрыл от меня этот мир, сидит и ухмыляется: мол, мы тут за производительность боремся, зачем тебе что-то трогать руками?

Но мы не из тех, кто сдаётся, верно? React предлагает своё решение — рефы, и именно о них сегодня пойдет речь.

Читать далее

Ошибки при работе с tailwindcss

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров3.8K

Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.

Читать далее

Расширения VSCode для комфортной работы с проектами

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров43K

Для работы с проектами существует куча редакторов кода и IDE (VSCode, NeoVim, SublimeText, WebStorm и т.д.). В данный момент наиболее популярны VSCode и Webstorm и у каждого есть свои плюсы и минусы. Webstorm является примером прекрасного IDE от компании JetBrains, где многие вспомогательные модули идут “из коробки”. К сожалению, сейчас нет возможности легально получить доступ к этому продукту гражданам России, поэтому многим приходится искать альтернативу. Такой альтернативой вполне может стать Visual Studio Code от компании Microsoft, который имеет открытую кодовую базу, полностью бесплатный и гибко настраиваемый под ваши нужды. В данной статье мы рассмотрим пример настройки рабочего пространства VSCode для комфортной работы с нашими проектами. Я покажу вам, какими расширениями я пользуюсь для лучшего удобства и продуктивности. Эти расширения я использую давно и они хорошо зарекомендовали себя, но возможно некоторые из них могут не подойти под ваш стиль работы и написания кода. Итак, начнем!

Читать далее

Как организовать сериализацию в Redux и избежать ошибки: non-serializable value

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров1.4K

Мы пишем онлайн-компилятор для отладки ИИ-сервисов. И статья — это скорее приглашение к обсуждению. Хочу поделиться практическим подходом, который показался простым и удобным в этом проекте. Ваши комментарии и критика будут очень полезны.

Читать далее

Как я создавал бесплатный сервис оптимизации изображений FlashImg.ru

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.6K

Всем привет. В этом материале я расскажу как создавал беспслатный сервис оптимизации изображений FlashImg.ru

Читать далее

Тестирование фронтенд компонентов с jest-dom на видимость пользователю

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1K

Решаем проблему с тестирование элемента что он виден пользователю или не виден.

Данное решение для reactjs проекта написано, но также работает и для других фреймворков, с которыми работает jest-dom

Читать далее

8 инструментов для разработчиков, которые стоит попробовать

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров11K

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

Читать далее

Отладка и мониторинг в MobX: trace, introspection и spy

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров2K

Привет, меня зовут Дмитрий, я Middle-React-разработчик с замашками сеньора, поднимающийся с самых низов без мам, пап и ипотек. В последнее время я частенько вижу ситуацию: при использовании MobX в больших проектах у людей появляются сложности с количеством перерисовок или наоборот не обновлением данных со стора. Также могут проявляться проблемы с производительностью в том числе и из-за этого. Я решил поделиться отладочными инструментами MobX, ведь это может кому пригодиться.

Читать далее

Ближайшие события

CI/CD для начинающих: деплой React-приложения без боли

Время на прочтение5 мин
Количество просмотров14K

Следующий шаг после разработки веб-приложения — размещение его на сервере. Независимо от сложности проекта или используемой инфраструктуры, общий процесс остается одинаковым: нужно «упаковать» код в CI/CD-конвейер и отправить на сервер. В тексте рассмотрим, как это происходит на примере простого приложения to-do list на React. Подробности под катом!
Читать дальше →

React Native полностью переделан

Время на прочтение3 мин
Количество просмотров15K

После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.

Читать дальше →

Front-end глазами back-end разработчика

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.5K

Всем привет! После учебы попал на ферросплавный завод в 2005 году, сначала "киповцем" в цех КИПиА, а позже меня перевели в службу АСУТП. Там относительная свобода в сравнении с цехом АСУП, потому что у них там были разные корпоративные стандарты безопасности, Active Directory и другие ограничения на разработку. В нашем же цехе, хоть и была проблема с Интернет, все сервера были на тот момент ограничены внутренней сетью, но на тот момент дома почти у всех был ADSL и дома можно было искать информацию, а потом на работе ее использовать.

В итоге практика написания скриптов на VBScriptSCADA Cimplicity был на тот момент только этот язык для написания сценариев, как и во многих других пакетах), с использованием Win32API, проект на Delphi с использованием Mutex и Semaphore, первый проект и вроде даже не один на Visual C++ MFC, поддержка и отладка проектов на Borland C++ и С++ Builder, с нуля созданный портал на PHP (спасибо коллеге Антону - это была его идея, чтобы не дописывать проект на умирающем уже на тот момент Delphi, хотя он вроде функционирует до сих пор), ну и самое главное, что появился опыт работы с MS SQL (почему-то нам его даже в университете не преподавали).

На следующем месте работы было более глубокое погружение в MS SQL, так как вся бизнес-логика была реализована на нём, и знакомство с Visual C# и .NET Framework, так как на нем был клиент написан на WinForms. Так же не первый опыт работы с OPC.

Но проект заканчивался, а новых пока там не планировалось, поэтому в следующей организации было знакомство с ASP.NET WebForms и, помимо MS SQL, уже и с Oracle DB. Всё было на примитивном уровне, опять сбор данных, хранение, отображение. Там было реализовано своеобразное хранение и отображение данных по сменам рабочих с помощью рекурсий на T-SQL.

Читать далее

Family Frontend Meetup #3

Время на прочтение3 мин
Количество просмотров754

Автогенерация функций выборки данных с помощью Orval, переработка логики оптимизации изображений с заменой нашего компонента Picture, обновления Next.js 15 и небольшой бонус – наш топ библиотек, которые упростят поддержку и разработку вашего проекта, а также сэкономят время на его инициализацию.

Читать далее

Как Vercel микрофронтенды внедрила

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров3.5K

Узнайте, как Vercel сократил время сборки и повысил скорость разработки, сохранив при этом удобство работы с микрофронтендами.

Основной веб-сайт Vercel, некогда являвшийся единым крупным сайтом Next.js приложение, обслуживающее как посетителей нашего веб-сайта, так и панель управления для входа в систему. Но по мере того, как компания Vercel росла, в этой системе появились возможности для совершенствования. Время сборки росло, управление зависимостями становилось все более сложным, а рабочие процессы требовали оптимизации. Незначительные изменения привели к полномасштабным сборкам, повлияв на изолированную разработку и конвейеры CI.

Читать далее

Циклические импорты на фронтенде

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров4.6K

Хочу рассказать о том, какие проблемы при разработке создают рекурсивные зависимости на фронте.

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

Рассмотрим способы разрешения циклических зависимостей и их обнаружение.

Читать далее

Next.js v15 — Что Нового (под Капотом)

Время на прочтение12 мин
Количество просмотров21K

Привет! Это ставшая уже регулярной рубрика о релизах next.js (читайте релизы по v11, v12, v13, v14). Каждый релиз - набор нового, интересного и спорного. Новая версия не станет исключением. Но всё же новая версия интересна не столько новым функционалом, сколько изменением приоритетов и организации в next.js. И да, как вы уже догадались из названия, в значительной части релиз ценен проработкой ошибок и доработками.

В данной статье я не буду останавливаться на том что такое App Router или серверные компоненты - про это подробно расписано в предыдущих статьях. Только про новую версию и только про новые изменения.

Примечание: в статье отражены самые интересные изменения с призмы автора. Здесь разобраны коммиты и PR в ядро next.js, сообщения разработчиков и задачи, поэтому статья отражает больше изменений, чем представлено официально.

Читать далее

Вклад авторов