JSX (JavaScript XML) дал разработчикам знакомый способ написать интерфейсы, смешивая HTML-подобный синтаксис с силой JavaScript. Но поскольку приложения масштабируют сложность, модель, окружающая JSX, начинает показывать свой возраст.
Проблема не сама JSX, а предположения, запеченные в том, как мы его используем. Чтобы продвинуть фронтальную разработку вперед, нам нужно переосмыслить роль компонентов и структур, которые мы построили вокруг них.
Компоненты разрушаются под весом своих абстракций
React начался с компонентов, которые были маленькими и сфокусированными. Они сделали разметку на основе реквизита, и этого было достаточно. Но со временем компоненты перегружены. Теперь они обрабатывают бизнес -логику, извлечение данных, побочные эффекты, переходы состояния и настройку производительности. Вместо того, чтобы быть чистыми единицами пользовательского интерфейса, многие теперь похожи на миниатюрные применения.
Это создает хрупкость. Небольшое состояние глубоко в дереве может сломать функциональность где -то еще. Проходы производительности. Отладка становится сложнее. И когда каждая проблема находится в одном и том же файле, документация не может быть в курсе сложности, которую разработчики должны держать в своих головах.
Пусть компоненты описывают структуру и внешний вид. Поместите логику в услуги или государственные слои, которые можно использовать повторно и проверить независимо.
Более устойчивый подход означает распущение этих проблем. Пусть компоненты описывают структуру и внешний вид. Поместите логику в услуги или государственные слои, которые можно использовать повторно и проверить независимо. В то же время функции рендеринга должны быть предсказуемыми и декларативными, а не жонглировать оркестровкой наряду с макетом.
Модели пользовательского интерфейса на основе функций борются с государственными, ориентированными на событиями реалий
Идея о том, что пользовательский интерфейс является функцией состояния, звучит элегантно на бумаге. Но веб -приложения не простые трубопроводы данных. Они отвечают на события, ввод пользователя, задержку и время. Обработка компонентов как чистые функции, которые повторно заполняют каждый изменение, создает ненужную работу.
Модель React Render Trams требует, чтобы разработчики вмешались в Usememo, UseCallback и другие инструменты, чтобы избежать отходов. Эти оптимизации наложены поверх реактивной системы, которая не была разработана для мелкозернистых обновлений.
Некоторые современные рамки предпринимают другой маршрут. Вместо того, чтобы пересматривать целые функции, они отслеживают, какие части пользовательского интерфейса зависят от того, какие данные. Когда что -то меняется, только эта конкретная часть обновляет. Эта модель делает гораздо больше, чем улучшить производительность; Это облегчает поведение. Разработчикам больше не нужно предвидеть каждый рендеринг и вместо этого может сосредоточиться на определении того, как данные течет и реагируют.
Этот сдвиг меньше о синтаксисе и больше о том, как обрабатываются обновления. Это отражает растущую осознание того, что точность и ясность имеют большее значение, чем повторяющиеся вызовы функций.
Совместные эффекты с пользовательским интерфейсом создают связь, а не сплоченность
React Hooks позволили легко держать логику рядом с тем местом, где она используется. Некоторое время это было похоже на хороший дизайн. Все было в одном месте. Но со временем это удобство представило новый вид беспорядка. Эффекты для извлечения данных, анимации или подписок теперь находятся рядом с кодом макета.
Проблема относится к запутанности здесь, а не просто видимости. Когда эффекты живут в компонентном теле, они привязаны к жизненному циклу этого компонента. Они становятся все труднее извлекать, проверять и повторно использовать. Небольшие ошибки в массивах зависимостей или асинхронной логике представляют ошибки, которые трудно отслеживать.
Услуги, государственные машины или реактивные магазины могут управлять логикой, освобождая компонент, чтобы сосредоточиться на рендеринге.
Лучшая модель ставит эти обязанности в другом месте. Услуги, государственные машины или реактивные магазины могут управлять логикой, освобождая компонент, чтобы сосредоточиться на рендеринге. Например, конфиденциальные рабочие процессы данных могут быть полностью обработаны в безопасных бэкэнд-службах с использованием хостинга, соответствующего HIPAA, обеспечивая конфиденциальность и регулирующую выравнивание.
Точно так же компоненты становятся легче понять. Они получают состояние в качестве ввода и выводят представление — ничего более. Тестирование становится проще, поведение становится более надежным, и кодовая база становится легче масштабировать.
Структурная композиция не должна полагаться на гнездование деревьев
Гнездование-это стратегия для составления пользовательского интерфейса в JSX. Хотите предоставить тему? Оберните свое приложение в тематическое значение. Добавить маршрутизацию? Добавить еще одну обертку. Вскоре дерево компонентов на десять уровней глубиной, и большинство из этих слоев не делают видимых результатов.
Этот шаблон раскачивает дерево и прячется, откуда исходит логика. Передача данных через реквизиты или контексты создает сеть неявных зависимостей. Отслеживание того, от чего зависит компонент или почему он ведет себя определенным образом, становится игрой догадки.
Современные рамки движутся к более гибкой композиции.
Современные рамки движутся к более гибкой композиции. Вместо того, чтобы обернуть все в дерево, они позволяют реактивным значениям течь независимо. Компонент может подписаться на значение или состояние, не будучи похороненным в определенном структурном контексте. Логика живет вне визуальной иерархии, делая интерфейс плоским и более предсказуемым.
Композиция не должна означать гнездование. Это может означать взаимосвязь между поведением и структурой, которые не связаны друг с другом.
JSX не проблема, но то, как он выполнен, сдерживает его обратно
Понятно, что JSX предлагает четкий и выразительный синтаксис. Это позволяет разработчикам описывать пользовательский интерфейс таким образом, чтобы это читает как HTML и поддерживает выражения JavaScript. Задача не сама синтаксис, а то, как он используется во время выполнения. JSX компилируется в функциональные вызовы, которые перезагружают изменения состояния. Этот подход связывает рендеринг для функционирования выполнения, и именно здесь начинаются проблемы.
Лучшая модель рассматривает JSX как описание, а не процесс.
Лучшая модель рассматривает JSX как описание, а не процесс. Вместо того, чтобы повторять те же функции снова и снова, система может компилировать JSX в статический макет с реактивными привязками. Когда состояние меняется, только соответствующее обновление деталей.
Вот несколько структур, которые переосмысливают, как JSX скомпилируется и выполняется:
- Марко: Скомпилируют JSX-подобный синтаксис в потоковой вывод, позволяя браузеру начать рендеринг до того, как весь JavaScript загрузится. Этот подход уменьшает время к интерактивному и улучшает воспринимаемую производительность.
- Qwik: Возобает выполнение, где оно осталось на сервере, а не повторяет всю функцию на клиенте. Это устраняет необходимость увлажнения и заставляет приложения нагружаться быстрее, пропуская логику избыточного рендеринга.
- Solidjs: Использует мелкозернистую реактивность с оптимизацией времени компиляции, чтобы обновить только части DOM, которые изменяются. Он позволяет избежать виртуального DOM, полностью разнообразного для более быстрой, более предсказуемой модели рендеринга.
- Стройный: Компилируют компоненты в высокоэффективный императивный код, который хирургически обновляет DOM. Сдвиги смены работают от времени выполнения, чтобы построить время, что приводит к небольшим пучкам и приложениям.
JSX может оставаться синтаксисом выбора, но он работает лучше всего в сочетании с моделью, которая уважает стабильность и сводит к минимуму отток.
Компоненты по -прежнему являются основой каждой идеи
Компоненты принесли структуру для разработки фронта, и они все еще играют полезную роль. Но строительство всего вокруг них ограничивает то, как мы моделируем состояние, поведение и рендеринг.
Экосистема frontend созрела. Теперь мы понимаем, что государство должно жить вне взгляда, что обновления должны быть точными и что реакционная способность должна быть независимой от визуальной структуры. Компоненты помогают организовать представления, но они не должны управлять логикой, оркестровки или нести бремя реактивности.
Следующая волна развития фронта уже прибывает.
Когда мы рассматриваем компоненты как часть системы вместо самой системы, мы разблокируем более гибкие конструкции. Управление государством становится более масштабируемым. Просмотры становятся легче тестировать. Интерфейсы становятся более предсказуемыми.
Следующая волна развития фронта уже прибывает. Инструменты и рамки охватывают более тонкую реакционную способность, возобновляемую рендеринг и более четкие границы. JSX и компоненты могут быть частью этого будущего — если мы готовы переосмыслить, как они используются.
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Александр Уильямс — разработчик и технический писатель с полным стеком с опытом работы в качестве независимого ИТ -консультанта и помогая новым владельцам бизнеса создать свои веб -сайты. Подробнее от Александра Т. Уильямса
