+38(044) 277-40-42
+38(063) 233-01-83
+38(095) 628-11-32
Войти
+38(044) 277-42-05
+38(063) 233-01-83
+38(095) 628-11-32

Современный JavaScript: чему я научился, используя React.js

Современная веб-разработка становится все более сложным делом из-за осложнения требований пользователей. В противовес, разработчики создают более совершенные инструменты для решения разнообразных проблем. Широкий класс таких инструментов фреймворки и библиотеки. Но одна из главных проблем экосистемы JavaScript сотни библиотек и фреймворков, которые не несут новых идей, а только повторяют существующий функционал на свой лад. Но не React. Он начал новую эру в разработке веб-интерфейсов, введя такие концепции, как виртуальный DOM, архитектура на основе компонентов, однонаправленный поток данных и неизменяемые структуры данных. Рассмотрим их подробнее. Виртуальный DOM Операции с реальным DOM стоят недешево (выполняются долго). Поэтому компания Facebook создала представление DOM, хранящееся в памяти. И когда один из узлов такого виртуального DOM дерева меняется, специальный механизм находит разницу между двумя состояниями дерева и минимальную последовательность операций, преобразующих первое состояние во второе. Эта последовательность действий и применяется к реальному DOM. И интерфейс обновляется. Мы можем использовать эту идею и в собственных целях. Например, я видел парня, который, используя такую же концепцию, показывал видео в окне консоли. Компонентно-ориентированная архитектура Что такое "узел дерева виртуального DOM"? Со стороны разработчика это компонент объявление части интерфейса, которое имеет свою HTML разметку, CSS стили и поведение (JavaScript). Он может получать данные от родительского узла и передавать их дочерним узлам. Со стороны фреймворка это объект, содержащий информацию о приведенных выше вещах разметке, стилях, поведении, данных. И такие компоненты могут использоваться и комбинироваться любым образом. Вместе они образуют приложение с древовидной структурой. Таким образом, разработчик всегда четко представляет структуру приложения и имеет кодовую базу переиспользуемых компонентов. Все это дает возможность строить приложения быстрее, несмотря на сложность требований. Однонправленный поток данных Главное в приложении это данные. Простота ментальной модели приложения зависит от чистоты потока данных. В React данные могут поступать от родительского компонента к дочерним. И только. Если мы хотим изменить данные, мы должны объявить для этого метод у компонента, содержащего данные, и передать этот метод дочерним узлам, как и сами данные. После этого дочерние компоненты смогут использовать метод для изменения данных. Смысл заключается в том, что такая мутация очевидна, поскольку мы всегда знаем, что изменение выполняется компонентом, который и содержит данные. Неизменяемые структуры данных Выше мы говорили про состояние виртуального DOM. Это состояние зависит от состояния приложения (данных в приложении в конкретный момент времени), поскольку виртуальный DOM содержит информацию о данных, проходящих через иерархию компонентов. И когда данные меняются, интерфейс тоже должен меняться. Но как он понимает, что данные изменились? В языке JavaScript все объекты передаются по ссылке. Поэтому есть два возможных пути: глубокое сравнение и сравнение по ссылке. Поскольку для глубокого тратится больше ресурсов, нам нужно сравнение по ссылке. Неизменяемые структуры данных дают нам такую возможность. Неизменяемость подразумевает, что мутация объекта возвращает новый объект с выполненными изменениями, вместо непосредственной мутации существующего. Этот механизм имеет внутреннюю оптимизацию для использования старых участков данных, так что дополнительная память не используется. И он очень хорошо работает с компонентно-ориентированным подходом и однонаправленных потоком данных. Таким образом, сочетание приведенных идей (довольно новых в мире разработки пользовательских интерфейсов) позволяет разработчикам строить сложные веб-приложения легче и быстрее. И главное здесь дух инноваций: взять старые идеи и использовать их в новой сфере, чтобы сделать жизнь проще. Это может каждый. Вот чему я научился, используя React.js.