Почему Microsoft отказывается от React в браузере Edge

Недавно команда Microsoft Edge написала статью о том, как они улучшают Edge, чтобы браузер стал быстрее. В материале Microsoft сделала выпад в сторону React и объявила, что больше не будет использовать React для Edge.

React произвел революцию в создании веб-приложений, продвигая многократно используемые компоненты, оптимизируя производительность с помощью виртуального DOM, упрощая управление состоянием и рендеринг пользовательского интерфейса.

Скрытый текст

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 заметила, что элементы кода, разделяемые между несколькими компонентами, были слишком большими, что приводило к замедлению работы браузера. Компания назвала две причины этой проблемы.

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

2. Microsoft использовала фреймворк, который полагался на JavaScript для рендеринга пользовательского интерфейса с помощью техники рендеринга на стороне клиента. Microsoft утверждает, что это замедляло работу браузера.

Как было сказано выше, Edge использовал несколько приложений React. Они не инициировали несколько проектов React, а использовали один JavaScript Bundle в разных местах и подключали Bundle ко многим компонентам.

Скрытый текст

JavaScript Bundle — это техника оптимизации, которая объединяет несколько JavaScript-файлов в одну строку для сокращения и эффективной обработки запросов к серверу.

Microsoft часто имеет дело с React, поскольку работает над проектами на основе этой библиотеки, такими как React Native для Windows, MacOS и Xbox. Однако компания по-прежнему не любит ее для Edge.

Несмотря на то, что Microsoft создает React Native, они все равно не используют его для Edge. Edge — это нативное настольное приложение, и React Native был бы идеальным решением, но Microsoft считает иначе.

Это связано с тем, что использование HTML, CSS и JavaScript или React для меню, выпадающих элементов и т. д. является общепринятым шаблоном или техникой, или так было в старые добрые времена. Но ведь есть причина, по которой они меняются?

Меню с каждой кнопкой, перенаправляющей на HTML-файл

Было время, когда меню и их опции представляли собой отдельные 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 — онлайн-школа IT-профессий, часть холдинга РБК с 2023 года. Спасибо, что становитесь лучше вместе с нами!

Вы можете подписаться на нас в Telegram, посмотреть на все наши публикации на Хабре и познакомиться с предлагаемым нами курсом «Frontend-разработчик», где мы подробно рассказываем о JavaScript и React.

А еще мы запустили интерактивную игру «Lead Game», которая позволит прокачать лидерские навыки на реальных кейсах. Хотите занять руководящую должность или уже занимаете? Пришло время оценить ваши soft skills.