Всем привет! На связи руководители Frontend‑практики ГК Юзтех. В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году.
Представьте, что бизнесу срочно понадобился небольшой бот, например, для сбора данных или генерации картинок или постов. В голову сразу приходит стандартная идея — пишем бота на бэкенде, дальше со стороны клиента делаем запрос на отправку сообщения и получаем ответ от бота, который показываем пользователю. Но не тут-то было — бизнес говорит, что денег и времени на бэкенд нет, а бот нужен ещё вчера.
Что делать? Логичное решение — максимально упростить бота и написать его на стороне фронтенда с отправкой результата на бэкенд и получением ответа одним запросом. Думаю, многие баловались или могут представить, что это несложно, но нужно писать множество конструкций и условий.
Я же предлагаю в статье посмотреть, как написать бота с помощью простого советского JavaScript‑генератора.
После обсуждения основных принципов нейминга в предыдущей статье, естественным продолжением будет описание случаев, которые выходят за рамки этих принципов.
Речь идет о ситуациях, когда подход к неймингу переменных и функций строго стандартизирован. Следование этим стандартам — это не просто рекомендация, а устоявшаяся практика, которую важно соблюдать для читаемости и согласованности кода.
В этой статье я поделюсь примерами таких случаев, разделив их на категории для удобства и наглядности. Надеюсь, этот материал будет полезен!
Мир React долгое время делился на две «сферы»: серверный рендеринг (SSR) и клиентский рендеринг (CSR). Приложения обычно подгружали часть контента с сервера для быстрого старта, а затем загружали большой бандл JS для полного интерактивного опыта на клиенте. Однако это приводило к дублированию логики и дополнительной головной боли при оптимизации.
Сегодня громко обсуждаются React Server Components (RSC) — новый подход к рендерингу компонентов, при котором логика, которая не должна выполняться на клиенте, может быть полностью «вырезана» до отдачи готовой HTML-структуры. Это обещает уменьшить бандлы, улучшить производительность и упростить архитектуру.
Next.js 13 — фреймворк, который уже предлагает нативную поддержку RSC и новые возможности по маршрутизации, загрузке данных и оптимизации. Почему это важно и как начать?
React v19 теперь доступен на npm!
В нашем руководстве по обновлению React 19 мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 19. В этом посте мы расскажем о новых возможностях React 19 и о том, как их можно использовать.
Привет, друзья!
В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.
На сегодняшний день Convex предоставляет реактивную базу данных смешанного типа, механизм аутентификации/авторизации, файловое хранилище, планировщик задач и инструменты интеллектуального поиска.
Эта вторая часть серии, в которой мы поговорим об аутентификации и авторизации.
Итак, в предыдущем посте мы многое разложили по полочкам и разобрали проблемы кодовой базы. Осталось есть ощущение, будто что-то еще не так. Хочется чего-то более элегантного.
В этом посте подойдем к проблеме пошире и начнем с архитектуры. Вот для примера довольно стандартная архитектура.
Большинство нормально структурированных приложений придерживается ее высокоуровнево, но на деле она вас не особо ограничивает. Есть много сходств со стандартной MVC-архитектурой:
Я вас понимаю. Да – еще один. Но давайте посмотрим, вдруг правда?
Давайте определимся с тем, что такое удобно. Конечно, у нас разные представления об удобстве, поэтому я опишу свои с примерами из api react:
Представьте образ, отражающий содержимое репозитория вашего проекта. Если он похож на захламленный балкон, то, вероятно, вы разработчик среднестатистического проекта. Если вы хотите делать проект, в котором все разложено по полочкам, то нужно следить как за качеством кода каких-то конкретных сущностей, так и всей архитектуры в целом.
Но в основном сначала получается та самая картина с балконом.
Typescript - сложный язык, но большинству разработчиков не нужно знать все его тонкости, чтобы быть эффективными в своей работе.
Это то, что я считаю минимальным набором знаний по тайпскрипту для эффективной разработки продукта на React.
Основные принципы, которые мы здесь используем:
Типизируйте входные данные, предсказывай результат
Минимизируйте шум в кодовой базе
Ошибки должны отображаться как можно ближе к коду, который их вызвал
Начнем с небольшой истории. Как-то раз я с размахом накинулся на проект — в духе нынешних фреймворков всё было обложено компонентами, декларативный стиль царил, все шло идеально… ну почти. Дошел я, значит, до нужды контролировать DOM-узлы напрямую. И что вы думаете? Прямого доступа нет, React закрыл от меня этот мир, сидит и ухмыляется: мол, мы тут за производительность боремся, зачем тебе что-то трогать руками?
Но мы не из тех, кто сдаётся, верно? React предлагает своё решение — рефы, и именно о них сегодня пойдет речь.
Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.
Для работы с проектами существует куча редакторов кода и IDE (VSCode, NeoVim, SublimeText, WebStorm и т.д.). В данный момент наиболее популярны VSCode и Webstorm и у каждого есть свои плюсы и минусы. Webstorm является примером прекрасного IDE от компании JetBrains, где многие вспомогательные модули идут “из коробки”. К сожалению, сейчас нет возможности легально получить доступ к этому продукту гражданам России, поэтому многим приходится искать альтернативу. Такой альтернативой вполне может стать Visual Studio Code от компании Microsoft, который имеет открытую кодовую базу, полностью бесплатный и гибко настраиваемый под ваши нужды. В данной статье мы рассмотрим пример настройки рабочего пространства VSCode для комфортной работы с нашими проектами. Я покажу вам, какими расширениями я пользуюсь для лучшего удобства и продуктивности. Эти расширения я использую давно и они хорошо зарекомендовали себя, но возможно некоторые из них могут не подойти под ваш стиль работы и написания кода. Итак, начнем!
Мы пишем онлайн-компилятор для отладки ИИ-сервисов. И статья — это скорее приглашение к обсуждению. Хочу поделиться практическим подходом, который показался простым и удобным в этом проекте. Ваши комментарии и критика будут очень полезны.
Всем привет. В этом материале я расскажу как создавал беспслатный сервис оптимизации изображений FlashImg.ru
Решаем проблему с тестирование элемента что он виден пользователю или не виден.
Данное решение для reactjs проекта написано, но также работает и для других фреймворков, с которыми работает jest-dom
Эта статья расскажет о восьми инструментах, которые помогут разработчикам упростить рабочий процесс и повысить продуктивность. Вы найдете решения для создания пользовательских компонентов, упрощения работы с кодом, разработки интерфейсов и документации.
Привет, меня зовут Дмитрий, я Middle-React-разработчик с замашками сеньора, поднимающийся с самых низов без мам, пап и ипотек. В последнее время я частенько вижу ситуацию: при использовании MobX в больших проектах у людей появляются сложности с количеством перерисовок или наоборот не обновлением данных со стора. Также могут проявляться проблемы с производительностью в том числе и из-за этого. Я решил поделиться отладочными инструментами MobX, ведь это может кому пригодиться.
После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.
