Если вы только начинаете заниматься веб-разработкой, заманчиво изучить наиболее используемые технологии как можно раньше. Все больше и больше младших разработчиков инвестируют в React посредством самообучения или учебных курсов по программированию.

Проблема?

Хотя React — отличный выбор для создания многих типов приложений, важно понимать, что существуют альтернативы. Что еще более важно, React существует для решения ряда проблем, с которыми сталкиваются разработчики. Сначала разберитесь с этими проблемами, а затем изучите React.

Немного истории

Люди, занимавшиеся веб-разработкой с середины 90-х до середины 2000-х, столкнулись с доминированием Internet Explorer, несовместимостью между браузерными движками, медленным продвижением в Интернете и отсутствием передовых методов организации кода.

Создание чего-либо с использованием JavaScript означало беспокойство о таких проблемах, как:

  • Наличие DOM, отражающего состояние приложения.
  • Организация кода и разбиение его на разные файлы.
  • Добавление и удаление прослушивателя событий.

Было предложено несколько решений этих проблем. jQuery упростил работу с DOM. RequireJs дал разработчикам возможность разбивать приложения на несколько файлов и загружать их в браузере. Такие инструменты, как Gulp, Grunt и более поздний Webpack, еще больше улучшили процесс сборки. Фреймворки, такие как BackboneJs, Ember и более поздние версии AngularJ, предлагали способ структурирования приложений и организации кода.

Введите Реагировать

На первый взгляд React выглядит как шаг назад. React фокусируется на уровне представления, а не на полной архитектуре MVC. В отличие от своих предшественников и некоторых аналогов, React не предлагает готовых решений для общих нужд, таких как маршрутизация, управление состоянием или стилизация. Это различие дает React статус библиотеки, а не фреймворка.

Итак, какие проблемы решает реакция? Наличие пользовательского интерфейса, отражающего состояние приложения

Цель React — исключить ручное управление DOM. Вместо того, чтобы запрашивать определенный узел для обновления его атрибутов или дочерних элементов, вы должны описать конечный результат, который вы хотите, а React позаботится обо всем остальном.

Чтобы добиться этого, React отказывается от общепринятой парадигмы разделения HTML и JavaScript. Ваш код JavaScript больше не используется для управления пользовательским интерфейсом, созданным с помощью HTML. Ваш JavaScript — ЭТО ИНТЕРФЕЙС. (React по-прежнему позволяет напрямую манипулировать DOM с помощью refs)

Обновления DOM стоят дорого

React делает обновления DOM менее затратными, сравнивая то, что отображает браузер, с тем, что описывает ваш пользовательский интерфейс. Это должно улучшить взаимодействие с пользователем в браузере.

Управление событиями грязное

React упрощает управление событиями, добавляя один прослушиватель событий в корень документа. Это должно уменьшить утечки памяти, вызванные сложными прослушивателями событий в приложении.

Код неорганизован

React предлагает способ организовать код, разбив его на компоненты. Это способствует тому, чтобы приложение было разбито на простые блоки с соблюдением принципа единой ответственности.

Лучшее из обоих миров

Понимание того, как работает DOM, его ограничений и узких мест, является важным навыком для создания клиентских веб-приложений. Раннее изучение библиотек и фреймворков маскирует эти сложности. Это лишает вас понимания того, что происходит в браузере.

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

Узнайте, как создать приложение, используя только HTML, JavaScript и CSS. Почувствуйте боль управления состоянием, событиями и обновлениями DOM вручную. Узнайте о распространенных ловушках, узких местах производительности и утечках памяти. Переход на MVC-фреймворк. Поймите, что ваш интерфейсный код можно организовать и спроектировать. Выберите старый фреймворк и протестируйте его. Backbone.JS — отличное введение в фреймворки приложений. Наконец, изучите React.

Вывод

Не ограничивайте себя определенной библиотекой или фреймворком. В конце концов, придет следующая большая вещь и сметет их. Вместо этого сосредоточьтесь на том, что меняется медленно. React исчезнет, ​​но браузер не исчезнет.

Первоначально опубликовано на https://maroun-baydoun.com.