![](https://habrastorage.org/getpro/habr/upload_files/6a0/38c/39c/6a038c39ce6b9feb89ce8799825de3ae.png)
Недавно команда Microsoft Edge написала статью о том, как они улучшают Edge, чтобы браузер стал быстрее. В материале Microsoft сделала выпад в сторону React и объявила, что больше не будет использовать React для Edge.
React произвел революцию в создании веб-приложений, продвигая многократно используемые компоненты, оптимизируя производительность с помощью виртуального DOM, упрощая управление состоянием и рендеринг пользовательского интерфейса.
Что такое React (с примером кода)
React — это JavaScript-библиотека с открытым исходным кодом для создания пользовательских интерфейсов. Она используется для создания одностраничных и мобильных приложений, обеспечивая высокую скорость разработки, простоту и масштабируемость.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
Вот простой пример компонента React, использующего JSX и объект. Компонент Counter отображает кнопку и счетчик количества нажатий на нее.
В статье мы рассмотрим, как решение Microsoft влияет на React и JavaScript-разработчиков в целом и каковы истинные намерения команды Edge.
История
Браузер Microsoft Edge создан на основе Chromium, проекта веб-браузера с открытым исходным кодом от Google, а пользовательский интерфейс Edge по умолчанию заимствован из Chromium.
Microsoft не хочет, чтобы их браузер был похож на Chrome (это очевидно), поэтому в Edge есть компоненты и элементы пользовательского интерфейса, разработанные Microsoft. Эти компоненты созданы с помощью React.
Множество мелких компонентов во всем Edge создаются с помощью React, которые в совокупности создают браузер, но весь Edge не является приложением React. Он объединяет несколько компонентов, используя HTML-страницы с React. Меню, выпадающий список и вкладка «Избранное» — все это мини-приложения React.
Это неэффективно, верно? Особенно для данных пользовательского интерфейса, которые никогда не меняются динамически. Все это заставило Microsoft усомниться в React.
Проблемы
Microsoft утверждает, что React неэффективен, поэтому они внесли улучшения и объявили об этом в статье.
Microsoft заметила, что элементы кода, разделяемые между несколькими компонентами, были слишком большими, что приводило к замедлению работы браузера. Компания назвала две причины этой проблемы.
В коде пользовательского интерфейса была проблема модульности. Команды, работающие над разными компонентами, использовали общие пакеты, файлы и т. д. Это приводило к тому, что одна часть пользовательского интерфейса замедляла работу другой части за счет совместного использования ненужных вещей.
Microsoft использовала фреймворк, который полагался на JavaScript для рендеринга пользовательского интерфейса с помощью техники рендеринга на стороне клиента. Microsoft утверждает, что это замедляло работу браузера.
Как было сказано выше, Edge использовал несколько приложений React. Они не инициировали несколько проектов React, а использовали один JavaScript Bundle в разных местах и подключали Bundle ко многим компонентам.
Что такое JavaScript Bundle?
JavaScript Bundle — это техника оптимизации, которая объединяет несколько JavaScript-файлов в одну строку для сокращения и эффективной обработки запросов к серверу.
Microsoft часто имеет дело с React, поскольку работает над проектами на основе этой библиотеки, такими как React Native для Windows, MacOS и Xbox. Однако компания по-прежнему не любит ее для Edge.
![](https://habrastorage.org/getpro/habr/upload_files/d13/111/dd5/d13111dd503e08fb5994c70acc8a604b.png)
Несмотря на то, что Microsoft создает React Native, они все равно не используют его для Edge. Edge — это нативное настольное приложение, и React Native был бы идеальным решением, но Microsoft считает иначе.
Это связано с тем, что использование HTML, CSS и JavaScript или React для меню, выпадающих элементов и т. д. является общепринятым шаблоном или техникой, или так было в старые добрые времена. Но ведь есть причина, по которой они меняются?
![Меню с каждой кнопкой, перенаправляющей на HTML-файл Меню с каждой кнопкой, перенаправляющей на HTML-файл](https://habrastorage.org/getpro/habr/upload_files/fde/66a/9a4/fde66a9a461137752fc31aebc888f969.png)
Было время, когда меню и их опции представляли собой отдельные HTML-файлы. Каждая кнопка или ссылка для выполнения определенного действия перенаправляла на HTML-файл.
Этот старый шаблон использовался только для таких компонентов, как меню. Но Microsoft явно этого не понимала. Компания использовала HTML-файл с React для каждого простого компонента. Каждый HTML-файл требовал JavaScript. И они делились этим JavaScript-кодом с каждой командой в виде пакетов кода.
Microsoft встраивала множество HTML-страниц (в приложениях React) в браузер, чтобы управлять всем пользовательским интерфейсом. И теперь они ищут решение этих проблем.
Решение
Начнем с того, что проблема была не в React. Microsoft реализовала его неправильно. Пакет должен работать для конкретной веб-страницы и выполнять свою задачу независимо. Каждая страница может иметь свой отдельный бандл или коллекцию.
Однако, когда вы используете один и тот же пакет или файлы в работе разных команд, вы должны ожидать хаоса. Каждая команда получает доступ к одним и тем же пакетам и изменяет их.
Результат был ожидаем. React не был предназначен для того, что Microsoft с ним делала. React не медленный, но нельзя ожидать от него молниеносной скорости, когда вы создаете десятки экземпляров.
Microsoft придумала решение проблемы, которую сама же и создала. Они пришли к созданию собственного фреймворка.
Microsoft анонсировала WebUI 2.0 (не Web 2.0) — архитектура, ориентированная на разметку. Она решает проблему больших пакетов кода, минимизируя их размер и количество JavaScript, запускаемого на пути инициализации.
Microsoft использовала React не по назначению, забыла, что существует React Native, и решила проблему на производстве.
Сначала они использовали отдельные HTML-файлы для каждого компонента с React внутри. Затем они выгрузили JavaScript-код, необходимый для каждого HTML-файла, в один пакет, общий для десяти других команд.
А теперь они больше не используют React.
Перевод материала выполнен редакцией ProductStar специально для Хабра
ProductStar — онлайн-школа IT-профессий, часть холдинга РБК с 2023 года. Спасибо, что становитесь лучше вместе с нами!
Вы можете подписаться на нас в Telegram, посмотреть на все наши публикации на Хабре и познакомиться с предлагаемым нами курсом «Frontend-разработчик», где мы подробно рассказываем о JavaScript и React.