Почему ReactJS берет на себя разработку внешнего интерфейса

Почему ReactJS берет на себя разработку внешнего интерфейса

История JavaScript

Сегодня мы видим, что Javascript работает повсюду. Он работает в браузере, на сервере, в Интернете вещей, на мобильных устройствах и т. д. Но знаете ли вы, как он родился?? Давайте заглянем в историю и узнаем.

Все началось в конце 90-х, когда компания Netscape Communication выпустила Netscape Navigator, первый в истории браузер. В первые дни существования Netscape это была просто программа, способная отображать статические HTML-файлы, но люди хотели, чтобы она делала больше. Netscape считал, что веб-страницы должны быть более динамичными по своей природе. Пользователи должны иметь возможность взаимодействовать с HTML, иначе браузер станет скучным программным обеспечением.

Именно тогда на сцену вышел Брендан Эйх. В 1995 году компания Netscape Communications заключила с ним контракт на разработку языка, который должен иметь низкую кривую обучения, и любой должен уметь писать на нем функциональные возможности. Он разработал язык всего за 10 дней и назвал его Mocha. Рабочий прототип Mocha был интегрирован в браузер Netscape в мае 1995 года, и язык был переименован в LiveScript, а затем в В декабре 1995 года он снова был переименован в JavaScript. Он был назван Javascript, потому что в то время Java был чрезвычайно популярен, поэтому маркетинговая команда Netscape придумала это название. С ростом популярности Netscape Navigator Microsoft также вышла на рынок браузеров и разработала Internet Explorer с языком сценариев JScript. Долгое время не существовало общего стандарта для Javascript, что приводило к огромным проблемам кросс-браузерной совместимости. Итак, наконец, в 1997 году Netscape пригласила ECMA (Европейскую ассоциацию производителей компьютеров) взять на себя ответственность за формирование спецификации для JavaScript.

С тех пор ECMA регулярно выпускает обновленные спецификации для Javascript, и браузеры стараются следовать этим спецификациям при реализации движка JavaScript.

👉🏼 Проверка фактов: Сегодня Брендан Эйх является генеральным директором компании Brave Software, которая создает ориентированный на конфиденциальность браузер на основе хрома под названием Brave.

Потребность в фреймворке

Благодаря спецификациям ECMAScript люди начали делать HTML-страницы более динамичными с помощью JavaScript. Но по-прежнему было очень мало людей, которые хотели писать большой функционал на стороне клиента с помощью JavaScript. Одной из причин этой тенденции была низкая производительность браузеров и движков JavaScript. Или мы можем сказать, что в ту эпоху индустрия больше ориентировалась на производительность на стороне сервера. Но по мере того, как компьютеры становились более мощными, браузеры становились лучше, а механизмы Javascript развивались, люди начали переносить логику на стороне клиента в браузер с помощью JavaScript.

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

Многие фреймворки, такие как Dojo, Backbone, Ember, AngularJS, возникли в сообществе, которое пыталось решать проблемы по-своему, и в совокупности это помогло всему сообществу JS продвинуться вперед к более масштабируемым и управляемым веб-приложениям.

👉🏼 Проверка фактов: Netscape Navigator позже стал основным краеугольным камнем для Mozilla Firefox. Они по-прежнему сохранили то же имя для своего движка JavaScript "Spider Monkey", который был частью навигатора Netscape.

РеактJS

В 2011 году Codebase for Facebook Ads росла. Разработчики начали сталкиваться с проблемами обслуживания. становилось все труднее добавлять новые функции эффективным способом. Поэтому инженер Facebook Джордан Уоке создал прототип эффективного пользовательского интерфейса приложения. Это было рождение ReactJS. изначально он назывался FaxJS. Позже, когда Instagram присоединился к Facebook, они хотели принять эту структуру в Instagram. В этот момент Пит Хант и Джордан Уолке улучшили, отделили библиотеку и сделали ее с открытым исходным кодом как ReactJS в 2013 году. С тех пор ReactJS претерпел множество изменений, и в настоящее время последняя версия ReactJS — 16.13 в 2020 году. ReactJS следует архитектуре на основе компонентов и побуждает разработчиков думать о небольших компонуемых компонентах. Эта методология очень согласуется с эффективным подходом к решению любой жизненной проблемы. Первый шаг к решению большой проблемы — разбить ее на несколько более мелких подзадач. Когда у вас есть решение для каждой подзадачи, добавьте его, чтобы получить общее решение. Это применимо к любому типу больших или малых проблем. ReactJS просит разработчика двигаться в этом направлении для создания любого пользовательского интерфейса. ReactJS также не пытается решить каждую проблему создания веб-приложения. Он ограничил свои возможности решением основной проблемы веб-разработки, связанной с эффективным обновлением пользовательского интерфейса/представлений.

Когда исходный код ReactJS был открыт на JSConf 2013, многим людям не нравились идеи/изменения, которые предлагал ReactJS. Например, двусторонняя привязка была очень популярна, но ReactJS продолжила работу с односторонним потоком данных. Написание HTML внутри JS считалось плохой практикой, но ReactJS хотел использовать JSX. Все эти идеи вызвали много критики со стороны сообщества веб-разработчиков, но постепенно люди начали их использовать и обнаружили, что эффективно создавать компоненты стало проще.

ReactJS решает только проблему обновления представлений, но у нас есть множество проблем, которые нужно решить в веб-разработке. поэтому появилась экосистема для решения других проблем наряду с ReactJS. Воплотились в жизнь ReduxJS, React-Router и многие другие библиотеки, что фактически делает ReactJS полноценным веб-фреймворком. Это также означает большую зависимость от нескольких библиотек. Но простота использования ReactJS на самом деле преодолевает все недостатки ReactJS и делает ее очень популярной библиотекой в ​​веб-разработке. В 2020 году ReactJS имеет более 50 тысяч звезд на Github и загружается 6 миллионов раз в неделю. Экосистема продолжает расти. React Native купил ReactJS для создания приложений для разных мобильных платформ. Такие библиотеки, как Gatsby, NextJS, позволяют ReactJS работать на сервере и обеспечивают преимущества рендеринга на стороне сервера. ReactJS одержал победу в многочисленных опросах разработчиков, таких как состояние Javascript и т. д.

Основные концепции дизайна в ReactJS

Декларативные, компонуемые, повторно используемые компоненты

ReactJS мотивирует разработчиков писать небольшие компоненты и повторно использовать один и тот же компонент в нескольких местах. Возможность повторного использования компонента ускоряет общую разработку и приводит к уменьшению объема кода. Чем меньше кода, тем лучше, потому что он менее подвержен ошибкам.

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

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

Декларативные компонуемые компоненты очень похожи на HTML в JS. вместо стандартных тегов HTML у нас будут компоненты React в качестве тегов. это делает ReactJS несколько знакомым веб-разработчику и похожим на стандартную веб-семантику.

Реактивные обновления

Написание статического HTML — это не весело, поэтому Javascript был создан, чтобы сделать веб-страницы интерактивными. ReactJS помогает разработчику добавлять функциональные возможности в компонент, с которым пользователь может взаимодействовать и видеть результат. ReactJS позволяет разработчикам прикреплять состояние к компоненту, и всякий раз, когда состояние компонентов изменяется, компонент эффективно перерисовывает себя для создания обновленного представления. Теперь состояние компонента можно изменить, нажав кнопку, введя какой-либо текст в поле ввода или любой другой компонент части, вызывающий любое событие. Компонент React прослушивает это событие и действует соответствующим образом. Обновление пользовательского интерфейса всего компонента кажется ужасной идеей, но ReactJS прекрасно реализовал эту ужасную идею, сделав это эффективно.

Представление DOM в памяти

ReactJS обеспечивает эффективное обновление представлений, сохраняя копию реального DOM в памяти. Предстоящие обновления всегда сравнивают новую модель DOM со старой копией модели DOM и на основе различий определяют фактические элементы модели DOM, которые необходимо обновить в пользовательском интерфейсе. Именно это делает ReactJS быстрее за счет уменьшения количества манипуляций с DOM. Это означает, что написание меньшего компонента React будет занимать меньше памяти, чтобы уменьшить размер копии DOM, и в конечном итоге приведет к повышению производительности.

Особенности ReactJS

JSX и зачем он нужен

Когда ReactJS был выпущен, в документации упоминалось, что рекомендуется использовать JSX вместе с ReactJS. Теперь, что такое JSX? и действительно ли мне нужна другая библиотека для использования библиотеки ReactJS? Итак, давайте посмотрим, как выглядит простой компонент ReactJS без JSX:

import React from "react";
function Greeting({ name }) {
  return React.createElement("h1", null, `Hello ${name}`);
}
ReactDOM.render(
  React.createElement("Greeting", { name: "Gully Boy" }, null),
  document.getElementById("root")
);

Вышеприведенный код никак не может выглядеть как декларативный компонент. Правда в том, что JavaScript не понимает HTML или XML, как теги. Вот почему нам нужен кто-то, кто сделает это преобразование за нас. Сюда входит JSX, который также известен как расширение синтаксиса для JavaScript. С JSX вышеприведенный компонент Greeting React будет выглядеть примерно так:

import React from "react";
function Greeting({ name }) {
  return <h1>{`Hello ${name}`}</h1>;
}
ReactDOM.render(<Greeting name="Gully Boy" />, document.getElementById("root"));

JSX действительно делает код ReactJS более читабельным и понятным. Вы можете предположить, что это библиотека шаблонов, которая преобразует синтаксис HTML в JS-код компонента ReactJS.

Виртуальный дом

ReactJS сделал один термин VDOM или виртуальный DOM очень популярным в сообществе Javascript. Веб-браузеры предоставили API для взаимодействия с DOM, чтобы сделать нашу веб-страницу динамичной. Вы можете динамически добавлять или удалять узлы на веб-странице с помощью этих API. Но взаимодействие с этими API происходит очень медленно, так как изменение узла вызывает событие перераскладки и перерисовки для поддерева. Таким образом, React предоставил способ уменьшить количество изменений в DOM с помощью виртуального DOM. Это объект Javascript, который содержит информацию о поддереве DOM. или вы можете сказать, что это объектное представление DOM. React использует этот объект, чтобы сравнить последующие модификации и выяснить, какое минимальное количество модификаций нам нужно сделать в DOM браузера, чтобы получить желаемый результат. ReactJS утверждает, что замечательная производительность их библиотеки связана с алгоритмом, который они используют для сравнения виртуального DOM.

Реагировать на родной

React Native — еще одна популярная библиотека, которая используется для создания кроссплатформенных мобильных приложений с использованием Javascript. До ReactJS Cordova и ionic были очень популярными фреймворками для создания мобильных приложений с использованием Javascript. Но эти приложения были не очень производительными. React Native использует популярные концепции ReactJS, основанные на компонентах, и предоставляет способ создания эффективного мобильного приложения. React Native фактически преобразует JS-код в собственный код платформы для запуска на мобильном устройстве. Такой подход фактически многократно повысил производительность приложения. Благодаря React Native ReactJS стал очень популярной библиотекой для создания пользовательского интерфейса на любой платформе.

Почему ReactJS останется надолго

За последние 10 лет в сообществе javascript произошли огромные изменения в языке и в сообществе разработчиков. Он видел много новых идей и терминов, появившихся в виде библиотек. Люди довольно часто создают и делятся своей работой с остальным миром. Каждый день кто-то открывает исходный код своей реализации на Github. Новые идеи, новое восприятие проблемы помогают экосистеме Javascript двигаться в лучшем направлении. До ReactJS JQuery был очень популярен и стал библиотекой по умолчанию для любого веб-проекта, который включает манипуляции с DOM. Но затем появились AngularJS и другие библиотеки MVC, которые побуждают нас думать о проблеме с точки зрения Modal, View и Controller.

Каждый пытается найти подход, который может решить проблему. Но масштабируемое структурирование решения — не новая проблема. Мы уже реализовали масштабируемые решения на стороне сервера, и они работают достаточно хорошо. ReactJS фактически привносит тот же шаблон во внешний интерфейс. Во Frontend конечным результатом является пользовательский интерфейс. Поэтому, чтобы реализовать это, нам нужно разбить это на более мелкие подзадачи и написать для них решения. Это должно быть основной ментальной моделью для решения проблемы пользовательского интерфейса, и ReactJS фокусируется на том же.

Все новые идеи, возникающие в сообществе Javascript, помогают сообществу двигаться вперед, но в конечном итоге лучшее решение станет частью стандартного JS (ECMAScript). Например, модуль ES, Promises, некоторые утилиты lodash и т. д. Если библиотека движется в том же направлении, что и Интернет, то определенно она будет использоваться большим сообществом. Разработчик будет использовать это решение до тех пор, пока спецификации не будут завершены, а браузеры не примут новую спецификацию, но тем временем люди будут использовать эту функцию в виде сторонней библиотеки.

Итак, ReactJS движется в правильном направлении? Я бы сказал да. ReactJS меняется вместе с развитием стандартов Javascript. Фронтенд-сообщество больше склоняется к концепциям функционального программирования, чем к объектно-ориентированной методологии. В том же направлении ReactJS, похоже, также движется к шаблону функционального программирования. ReactJS представил хуки в версии 16.8, которые побуждают разработчиков создавать все больше и больше функциональных компонентов вместо компонентов, основанных на классах. Хук не работает даже с компонентом, основанным на классе. Они понимают, что иногда становится сложной задачей выяснить, какую библиотеку следует выбрать для управления состоянием, поэтому они представили хуки ContextAPI и useReducer, которые помогают лучше управлять состоянием в небольшом приложении. Сегодня с помощью хуков ContextAPI и useReducer вы можете создавать приложения без использования каких-либо других библиотек, таких как Redux и т. д., хотя это не означает, что вы должны прекратить использовать Redux прямо сейчас. У Redux есть свои преимущества.

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

Многие крупные компании, такие как Facebook, Microsoft, AirBnB и т. д., поддерживают направление и концепции ReactJS и повышают доверие к библиотеке. С большим количеством больших мозгов, поддерживающих библиотеку, кажется, что ReactJS будет использоваться все большим количеством людей в сообществе.

Заключение

В индустрии программного обеспечения не существует идеального решения. Поэтому лучший вариант — осмотреться, найти лучшее решение в сложившейся ситуации и двигаться наедине с ним. В сообществе javascript также люди все еще пытаются найти альтернативы ReactJS, такие как VueJS и Svelte. Возможно, в будущем ReactJS заменят какой-нибудь другой библиотекой, но основная идея создания меньших повторно используемых компонентов останется надолго. Поэтому, когда мы изучаем любой фреймворк, очень важно изучить основную идею библиотеки, потому что идея или шаблон проектирования останутся навсегда. он может появиться перед вами в другой форме и форме, но он останется навсегда.