Рубрика «react.js»

в 10:21, , рубрики: javascript, React, react.js, TypeScript, UI, ui kit, uikit, Программирование, фронтенд

Практический разбор создания и развития собственной UI-библиотеки

Коротко: Собственная UI-библиотека — это не только набор React-компонентов. После появления нескольких проектов-потребителей на первый план выходят API, состояние, совместимость, зависимости, тестирование, документация и версионирование.

С чего всё начиналось

Когда в проекте начинает появляться всё больше одинаковых элементов интерфейса, рано или поздно возникает вопрос: зачем каждый раз создавать один и тот же Button, Input или Select?

Читать полностью »

в 13:30, , рубрики: react.js, TypeScript

Когда продукт должен работать и на телефоне, и на планшете, и на ПК, и на маке, путей два. Первый по учебнику: нативка под iOS, нативка под Android, отдельный веб под десктоп, и дальше живёшь с тремя кодовыми базами, тремя релизными циклами и модерацией в сторах. Второй: одно сайт-приложение (SPA плюс PWA), которое ставится на домашний экран и работает везде одинаково.

В своём проекте, агрегаторе нейросетей, я сознательно выбрал второй путь. Дальше разберу на этом примере, почему так, что выиграл, что честно потерял, и три грабли из прода, которые этот выбор подсветил. С кодом.

Если коротко

Читать полностью »

в 8:12, , рубрики: frontend-разработка, react.js, архитектура приложений, архитектурные паттерны

Представьте ситуацию: вы открываете какой-нибудь файл в проекте, которому уже года три (чаще всего это форма). И в голове всплывает мысль:  «А что тут вообще происходит?». Причём не в смысле «кто виноват», а в смысле «как мы вообще сюда пришли?».

Я фронтенд-разработчица, и за шесть лет в разработке такое случалось почти на каждом проекте, где мне удалось побывать. Я хочу сразу оговориться: это не статья из серии «как надо жить». Это скорее разговор по типу «смотрите, как все мы иногда делаем и даже не замечаем».

Читать полностью »

в 14:12, , рубрики: frontend-разработка, mobx, mvvm, oop patterns, React, react.js, ReactJS, ооп
MobX или приправа реактивности для JS - 1

Привет!

Меня зовут Сергей Волков, я фронтенд-разработчик в компании VK. Мы используем MobX для работы с реактивными значениями в веб-приложениях, поэтому я хочу познакомить вас с этим инструментом и показать, почему на него стоит обратить внимание.

Читать полностью »

в 11:15, , рубрики: front-end, front-end разработка, frontend-разработка, javascript, React, react.js, reactive programming, ReactJS, TypeScript

Всем привет! Думаю, что не ошибусь если скажу, что почти каждому фронтендеру приходится заниматься разработкой сложных форм. Те, кто уже имеют такой опыт знают, что работа с формами доставляет боль и страдания. Необходимо держать в голове все правила валидации и заполнения форм, связи между зависимыми полями, нужно как-то связывать данные формы с UI, при этом избегая лишних ререндеров.

На большом проекте мы писали формы через MobX + MVC, думаю, что это не самый плохой подход для написания форм, однако можно выделить следующие недостатки:

Многое пишем руками

Читать полностью »

в 6:26, , рубрики: commit, fiber, javascript, React, react.js, render, rerender, браузер, фронтенд

Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit. Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

Render-фаза: вычисление изменений

Render-фаза — это не обновление DOM. Это вычисление того, каким DOM должен стать.

React рекурсивно обходит дерево компонентов, вызывает их функции (или render()Читать полностью »

в 6:15, , рубрики: babel, jsx, React, react.js, TypeScript, автоматизация

Привет! Меня зовут Нияз, frontend тимлид из Казахстана. Это мой первый пост — делюсь скриптами, которые сэкономили неделю работы.

Проблема

HR-платформа, 8000+ TypeScript файлов, весь текст захардкожен на русском. Бизнес хочет английский и казахский.

<Button>Сохранить</Button>
<span>Привет, {userName}!</span>
const error = "Произошла ошибка";

Руками — это неделя копипасты и сотни пропущенных строк. Решил написать скрипты.

Результат

Читать полностью »

Метрика

Значение

Ключей перевода

9,823

в 9:31, , рубрики: frontend собеседование, mvp, next.js, notion, react.js, собеседование, собеседование в IT, собеседование вопросы, собеседования

Интро

Меня зовут Михаил, я frontend разработчик и занимаюсь менторством. Одним из самых частых запросов от учеников является подготовка к техническому интервью, поэтому я и решил создать продукт именно на эту тему.

В этой статье я расскажу:

  • как родилась идея

  • какие найдены варианты решения

  • что за проблемы возникли в ходе реализации MVP

  • какие подводные камни скрываются за найденными решениями

  • как я обходил ограничения.

Я набил достаточно шишек, чтобы быть в праве поделиться личным опытом: возможно знакомство с ним облегчит кому-то жизнь.

В этой статье не будет:

Читать полностью »

в 19:15, , рубрики: animation, css, html, javascript, React, react 19, react conf 2025, react.js, view transitions, view transitions api

Всем привет. Я Артем Курочкин, frontend разработчик компании DD Planet.

Сегодня я расскажу об одном из ключевых нововведений в React, представленных на React Conf 2025. Прошу любить и жаловать ViewTransition - нативная поддержка view transition api в экосистеме реакта.

Что это значит для React-разработчиков и как нам всем это поможет, мы и разберем в этой статье.

Что за зверь такой View Transition API

The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).

Читать полностью »

в 16:31, , рубрики: architecture, javascript, microfrontends, react.js, архитектура, микрофронтенды, монолит, фронтенд

История о том, как наша команда смогла ускорить релизы, снизить затраты и построить масштабируемую архитектуру без хаоса. В статье вы узнаете, подходят ли вам микрофронтенды.

Микрофронтенды: прихоть разработчиков или реальная польза для бизнеса - 1

Читать полностью »

123...10...16
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js