REACT.JS: эпоха нового Таноса с его камнями бесконечности

REACT.JS: эпоха нового Таноса с его камнями бесконечности

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

Бесспорно, JavaScript продолжает навязывать себя во многих аспектах. История JavaScript была известна только во внешнем интерфейсе, но теперь она распространяется и на бэкэнд благодаря среде выполнения NodeJS и даже не говоря о машинном обучении и разработке мобильных приложений. Теперь, когда мир интерфейса быстро меняется ежедневно, трудно посвятить время изучению нового фреймворка; особенно когда эта структура может в конечном итоге стать тупиком.

Многие фреймворки и библиотеки увидели свет в последние десятилетия. Среди них AngularJS, EmberJS, VueJS и ReactJS. Но среди этих библиотек и фреймворков ReactJS выделяется по многим причинам. Это не означает, что другие недостаточно хороши, но в зависимости от потребностей вашего проекта каждый из них имеет свои преимущества и недостатки. Но без предвзятого мнения я искренне думаю, что вы, скорее всего, выберете React. Ну, мы увидим, почему. «почему» — та самая причина, по которой React можно рассматривать как Танос среди всех других интерфейсных библиотек и фреймворков. Последние фактически стали Мстителями современной разработки приложений. Итак, давайте засучим рукава и посмотрим на это.

Внешние библиотеки/фреймворки и Мстители

Мстители Marvel считались героями, пришедшими на помощь выдающемуся уничтожению человечества. Точно так же существуют некоторые шаблоны проектирования и библиотеки, которые могут быстро превратить ваш код в нечитаемый, сложный в обслуживании и, что еще хуже, в кошмарный спагетти-код. Говоря об этом, мы все помним наших дорогих друзей jQueryJS и BackboneJS. Это очень классные библиотеки, которые служили нам годами. Я смиренно полагаю, что в прошлом активно использовал эти библиотеки, но использование их для больших проектов или отсутствие лучших инженерных практик может легко превратить код в спагетти-версию. Ну, это может быть потому, что, глядя на их архитектурный дизайн, многие не совсем понимают, как использовать эти библиотеки, чтобы их тысячи строк кода были хорошо структурированы, организованы, производительны и, что более важно, под контролем с чистым потоком данных. Однако это не означает, что это невозможно сделать с прежними библиотеками. Но было бы здорово, если бы фреймворк или библиотека, исходя из самой своей архитектуры, предлагали очевидные способы повышения производительности приложения и сохранения организованного, хорошо структурированного кода с чистой архитектурой потока данных. Вот где появляются Мстители.

Независимо от того, признаем мы это или нет, AngularJS, EmberJS и VueJS являются мстителями наших дней для разработки современных приложений. Они пришли на помощь разработчикам, чтобы помочь им создавать сложные, но элегантные и производительные пользовательские интерфейсы в чистом, удобочитаемом и удобном для сопровождения виде. Они мстят всем разработчикам, страдающим от проблем с производительностью, чистой архитектурой потока данных и неочевидным способом организации и структурирования своего кода. Судя по их архитектуре, эти библиотеки предлагают то, что нужно разработчикам, а именно надежную и согласованную структуру и организацию. Любой новичок, желающий изучить любой из них, быстро поймет, насколько легко организовать и повысить производительность своего кода. Для любого проекта эти Мстители предлагают такие вещи, как Производительность, Модульность, Повторное использование, Тестируемость, Эффективная DOM. Манипуляции, Эффективное использование памяти, Эффективная обработка состояний, Однонаправленный и Двунаправленный поток данных. Не все библиотеки/фреймворки предлагают такой роскошный банкет. Но ReactJS делает это. ДА НА САМОМ ДЕЛЕ. Вот почему мы можем рассматривать ReactJS больше, чем Avenger. На самом деле он скорее… барабанная дробь… Танос. Хм Почему? 😅

React и Танос

Мы здесь!. Простая демонстрация того, как работает ReactJS и его экосистема, позволит вам сделать выводы самостоятельно. Но прежде всего давайте уточним, что ReactJS здесь не суперзлодей. Хотя это просто библиотека просмотра, мы сравниваем ее с Таносом только с точки зрения влияния, скорости, мощи и силы. Этот подход такой же, как мы сравнили AngularJs, VueJS и EmberJS с The Avengers с точки зрения разработки современных приложений.

Мы уже знаем, что у Таноса нет личных причин сражаться с мстителями. Они просто оказались камнем преткновения на пути к его целям. Он хотел доказать, что он достоин высшей власти. Точно так же ReactJS доказал, что достоин огромной силы, несмотря на все эти конкурентные среды. Несмотря на то, что это всего лишь View Library, он стоит среди ведущих фреймворков JavaScript и пользуется среди них большим уважением. Таким образом, его можно увидеть больше, чем Мстителя. У него отличное Сообщество, Популярность, Архитектура, Гибкость, Простота и Производительность. Я знаю, что многие не согласятся со мной, что это на самом деле лучше, чем AngularJS. Я частично согласен, так как Танос на самом деле не больше Тора, но в то же время Танос легко справляется с ним 😄. Но здесь нас интересует наилучший способ работы, нам нужна производительность, легкость и чистая архитектура потока данных, которая дает нам полный и лучший контроль над нашим приложением. Это лишь некоторые из них. Ниже приведены причины, по которым мы должны рассматривать ReactJS как новый Thanos среди всех других библиотек Frontend.

Понимание того, что такое React

ReactJS — это облегченная библиотека JavaScript для внешнего интерфейса, созданная Джорданом Уоке. В настоящее время он разрабатывается технологическим гигантом Facebook. Он предназначен для того, чтобы разработчики могли создавать эффективные, сложные и интерактивные веб-интерфейсы и мобильные интерфейсы. Он представляет только V (представление) в архитектуре MVC. Ради повторного использования он следует подходу, основанному на компонентах, который помогает создавать повторно используемые компоненты пользовательского интерфейса. Он имеет четко определенный жизненный цикл и использует простой JavaScript, смешанный с HTML, известный как JSX. В отличие от AngularJs и EmberJS, он не называется языком предметной области, так как его легко освоить и с его помощью можно создавать любые высокопрофессиональные веб-сайты и даже корпоративные приложения.

В React состояния — это сердце компонентов React. Они просто представляют собой источник данных и должны быть максимально простыми. По сути, это объекты, которые определяют повторный рендеринг и поведение компонента. Они изменяемы и доступны через this.setState(). Когда они находятся в React, они называются Локальное состояние компонента, но когда они находятся вне React, они помещаются в Глобальное состояние, обрабатываемое Redux, MobX и т. д. Они текут в одном направлении: только от родительского компонента к дочернему. При обработке автономным менеджером состояний уровень представления отделяется от уровня состояния. Тем не менее, вот лучшие части; они также являются частью сердца React:

Поток данных

ReactJS основывает некоторые из своих методов на функциональном реактивном программировании, поскольку следует правилу однонаправленного потока данных. Таким образом, он не поощряет двунаправленную привязку данных, чтобы убедиться, что вы следуете чистой архитектуре потока данных. Основным преимуществом этого подхода является то, что данные проходят через ваше приложение в одном направлении, что позволяет лучше контролировать их. В отличие от AngularJS, который является двунаправленным, при изменении состояния в ReactJS это никак не может привести к каскадным обновлениям и непредсказуемости потока данных. Скорее данные передаются только в одном направлении от родителя к дочернему, а не наоборот, что делает его гораздо более предсказуемым.

Архитектура

Для поддержки первого правила однонаправленного потока данных React (которое можно противопоставить двунаправленному потоку AngularJS), он был построен на архитектуре (Flux/Redux), которая представляет собой альтернативу популярной архитектуре Mode-View-Controller. При переходе на новый проект React вам придется адаптироваться к другой структуре проекта. Это просто потому, что основные концепции React/Redux больше нигде не существуют. Структура его проекта на первый взгляд кажется чрезмерно сложной, но довольно простой и понятной, если вы получите общее представление о ней. Так что же такое архитектура Flux/Redux?

Архитектура Flux: это прежняя архитектура, которая использовалась в React. Он не был автономным, так как не был отделен от представления, а был напрямую связан с ним. Основное правило React было однонаправленным и состояло из 4 основных компонентов: Просмотр, Действия, Диспетчер и Хранилище( с):

View → Actions → Dispatcher → Store(s)

Архитектура заключалась в том, что представление запускает действие (щелчок или любую другую манипуляцию пользователя). Далее Действия собирают всю необходимую информацию для обновления состояния в магазине(ах). Но это было бы невозможно без Диспетчера, который делегирует Действия Хранилищам. Затем, как только состояние обновляется в магазине (ах), представление в конечном итоге меняется. Обратите внимание, что магазинов может быть много. Ниже приведено представление диаграммы:

Архитектура Redux: это текущая архитектура, используемая в React, когда вы разделяете два уровня (представление и состояние). В него было внесено множество улучшений для решения проблем, возникающих в архитектуре Flux. Реализации Redux и логика, полученные из архитектуры Flux. Название Redux произошло от сочетания слов Reduce и Flux. Но в отличие от Flux, это сложный или автономный контейнер/система управления состоянием; это означает, что он полностью независим от реакции и может использоваться с AngularJs, EmberJS и даже с ванильным JavaScript, с одним Store и без Dispatcher. Он также развивается вокруг строгого однонаправленного потока данных. Как было показано ранее, это означает, что все данные в приложении следуют одному и тому же шаблону жизненного цикла, что делает логику вашего приложения более предсказуемой и понятной. Он состоял из 3 основных компонентов: Действия, Редукторы и Хранилище:

View → Actions → Reducers → Store → View

Логика этой архитектуры довольно проста для понимания. Представление отправляет действие, затем это действие проходит через каждый редюсер, который будет использован заинтересованным редюсером, затем редуктор переводит его в новое состояние в хранилище, и, наконец, представление подписывается обратно в хранилище, чтобы соответствующим образом изменить или повторно отобразить. к обновлению состояния. Ниже приведено представление диаграммы:

ПРИМЕЧАНИЕ: действие — это просто объект JavaScript, который содержит тип и необязательную полезную нагрузку (данные для хранения). Часто мы используем Actions Creators в качестве передового опыта. Это просто чистые функции, которые возвращают объект. Что они делают, так это инкапсулируют тип действия и необязательную полезную нагрузку в повторно используемую функцию. Это дает гибкость, поскольку мы можем передать любую полезную нагрузку действию в качестве аргументов. Редукторы — это просто чистые функции. Они принимают 2 параметра (предыдущее состояние или объект глобального состояния, поступающий из хранилища, и тип действия), чтобы вернуть новое состояние. Чистая функция не имеет побочных эффектов. Поскольку между чистой функцией нет промежуточного слоя для изменения вывода, она возвращает тот же результат, если дается тот же ввод; который идеально подходит для наших редукторов и создателей действий.

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

В отличие от AngularJS, который использует реальный DOM, ReactJS использует виртуальный DOM. Виртуальный DOM — это абстракция реального DOM. Другими словами, это легкий объект JavaScript, который является просто копией реального DOM. Это дерево узлов, в котором перечислены элементы, их атрибуты и содержимое как объекты. Это дерево обновляется в ответ на изменения в модели данных, вызванные различными действиями пользователя или системы. Как это работает?

Во-первых, всякий раз, когда изменяются базовые данные, весь пользовательский интерфейс повторно отображается в виртуальном представлении DOM. Затем он сравнивает/вычисляет разницу между предыдущим представлением виртуального DOM и новым. Затем, если он видит разницу после сравнения/вычисления, реальный DOM обновляется только теми вещами, которые действительно изменились; этот процесс называется: Примирение (Нет, это не тот, который происходит, когда вы расстаетесь со своей половинкой 😃). Таким образом, это означает, что он не обновляет непосредственно HTML, а обновляет JSX только при обновлении элементов, не вызывая потери памяти. Это то, что делает рендеринг React очень быстрым.

На основе React Virtual DOM EmberJS попытался воссоздать нечто подобное. Именно здесь родился движок рендеринга Glimmer, который фактически различает статические и динамические компоненты, тем самым уменьшая количество элементов, которые необходимо проверять при поиске изменений.

AngularJS, наоборот, поскольку он использует Real DOM, обновляет непосредственно HTML и создает новый DOM всякий раз, когда изменяются данные, что делает манипуляции с DOM очень дорогими, что приводит к слишком большому расходу памяти и медленному обновлению.

Рендеринг в ReactJS

Обычно AngularJS использует рендеринг на стороне клиента, а ReactJS использует рендеринг на стороне сервера. Рендеринг на стороне сервера — популярный метод для рендеринга обычно только одностраничного приложения (SPA) на стороне клиента на сервере с последующей отправкой полностью обработанной страницы клиенту. Затем клиентский пакет JavaScript может вступить во владение, и SPA может работать в обычном режиме. Другими словами, компоненты React отображаются на сервере, а затем отправляются в браузер в виде вывода HTML.

Одно из основных преимуществ, которые React предлагает для использования рендеринга на стороне сервера, заключается в наличии приложения, которое можно сканировать на предмет его содержимого даже для сканеров, которые не выполняют код JavaScript. Это помогает с SEO и с предоставлением метаданных каналам социальных сетей. Рендеринг на стороне сервера также способствует повышению производительности, поскольку, как было показано ранее, полностью загруженное приложение может быть отправлено с сервера по первому запросу. С помощью этой техники небольшое изменение может легко сделать приложение изоморфным. В этом отношении VueJS тоже преуспевает.

Это самые важные функции в React. Тем не менее, кое-что нужно сказать, когда речь заходит о его сторонниках, сообществе, будущем и т. д. Они представляют то, что я хотел бы назвать: Камни Бесконечности React, которые дают React силу быть тем, чем он является сегодня.

Камни Бесконечности React

Вы знаете, что у нас есть шесть камней бесконечности. Каждый из этих камней имеет свое значение в реальной жизни. Я использовал надежный и проверенный источник, чтобы понять каждый из этих камней, чтобы показать вам, насколько хорошо они связаны с ReactJS в реальном мире. Следовательно, мы имеем:

Facebook: камень силы

Так много людей говорят, что React популярен, потому что он разработан Facebook. Что ж, отчасти они правы. Но вы согласитесь со мной, что испорченное яйцо нельзя употреблять в пищу, даже если его рекламировал самый искусный маркетолог. Может это? Тем не менее, React — это золотое яйцо, которое продолжает развиваться с надеждой на светлое будущее в руках технологического гиганта Facebook. У них есть необходимые средства и ресурсы. Виртуальная реальность с React 360, Приложения для настольных компьютеров с NW.JS, Виртуализация данных и библиотеки диаграммс реагированием и многие другие проекты создаются и протестировано в Facebook и других крупных технологических компаниях, что дает React больше возможностей для дальнейшего экспоненциального роста.

Сообщество: Камень души

В фильме «Мститель» этот камень позволяет владельцу контролировать и отсекать души живых и мертвых. В реальном мире это означает Интеллект, Мужество, Решительность и Энтузиазм. Я пишу эту статью с большим энтузиазмом. Если оставить меня одного, я бы не стал заканчивать эту статью так скоро, так как очень хочу рассказать здесь о тщательном и полноценном использовании и лучших практиках React.

Сообщество вокруг React не просто представляет, но воплощает душу React. Именно они сохранят Reactживым или мертвым. Их огромное количество, и их количество увеличивается с каждым днем, потому что кривая обучения ниже, чем, например, у AngularJS. Кроме того, как мы видели ранее, архитектура реакции не похожа ни на одну из предыдущих библиотек. По мере того, как все больше и больше людей думают о React и осваивают его архитектуру с помощью статей, руководств, учебных курсов, а также стремления и решимости узнать больше, сообщество продолжает расти как никогда.

Бесчисленное количество разработчиков и технологических компаний переходят с AngularJS, BackboneJS, jQuery и т. д. на ReactJS, в то время как многие другие выбрали React как путь. Этот камень хорошо связан с Камнем силы, поскольку именно сообщество расширяет возможности библиотеки, делая ее такой, какая она есть сегодня и какой она будет в будущем.

Проекты React: камень времени

У React большое будущее, спонсоры и сообщество предоставляют все необходимое для дальнейшего стремительного роста. Мы уже видели некоторые из величайших проектов, таких как виртуальная реальность и виртуализация данных. Uber, Microsoft, Airbnb, Netflix, Yahoo Mail и браузер Vivaldi являются одними из немногих крупных технологических компаний, которые неустанно работают над тем, чтобы библиотека оставалась более живой с большим использованием, чем когда-либо. Посмотрите, что последние 3 компании говорят о библиотеке здесь.

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

Архитектура React: камень разума

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

Прежде всего, спасибо создателям Мстителей; то есть AngularJS, EmberJS и VueJS. Но еще больший респект создателю ReactJS. Как видно выше, архитектура React является единственной в своем роде. Это действительно камень разума, так как он повлиял на многие другие библиотеки. EmberJS и VueJS — живое тому доказательство. Размышляя о его стеке разработки (разработка и сборка, проверка типов, тестирование), управлении состоянием, потоке данных, промежуточном программном обеспечении, компонентах, стилях и темах, не забывая при этом об использовании виртуального DOM, мы можем четко сделать вывод, что это мудрость, поскольку ее простота делает React процветающим каждый божий день. В этой современной разработке, я действительно думаю до дальнейшего уведомления, это недостающая часть головоломки, которая наконец была найдена.

Производительность React и конкуренты: камень пространства и реальности

Камень Пространства в фильме позволяет владельцу модифицировать/изменять форму людей или объектов, в то время как Камень Реальности в реальном мире улучшает реальную силу концентрации. Здесь оба камня вместе представляют производительность React и конкурентов. Это поможет сообществу ReactJS принять меры по улучшению библиотеки до вершины. По состоянию на 2020 год для React уже существует более дюжины альтернатив. Некоторые из них не только реализуют то, что может предложить React (не полностью), но и пытаются сконцентрировать свои усилия на определенной области своей библиотеки. Svelte, Aurelia, Preact, React-Lite, EmberJS и VueJS — это лишь некоторые из них. Некоторые из них используют саму концепцию JSX, Virtual DOM, однонаправленного потока данных и рендеринга на стороне сервера. Как было показано ранее на примере Mind Stone of React, многие библиотеки и фреймворки находились под влиянием React, концентрируясь на чем-то одном, но делая это хорошо. Таким образом, это отличная возможность для React увидеть области, в которых ему нужно будет изменить или изменить себя, чтобы работать лучше, и держать разработчиков в себе.

Однако я признаю, что некоторые из этих библиотек неплохо справляются со своей задачей, особенно когда речь идет о проблемах с производительностью. Многие говорят, что ReactJS не идеален. Да, но и другие библиотеки тоже (на самом деле они очень далеко). Но ReactJS предлагает вам уникальный способ просмотра вашего приложения, которого никогда не было ни в одной другой библиотеке. Он уже внес серьезные изменения в свою архитектуру благодаря дизайну Redux и решил проблему быстрого рендеринга данных в соответствии с требованиями современного современного Программы. Он продолжает меняться каждый день для лучшей производительности, чем у любого другого конкурента. Даже если он еще не достиг своей высшей цели, давайте будем реалистами и посмотрим, как он крадет сердца всех разработчиков по всему миру и в то же время наживает все больше ненавистников. Так что маленькая отвертка еще не договорила о себе. Пока нет 😜

Куда идти теперь?

React — неотъемлемая часть современного сценария веб-разработки интерфейса JavaScript. Для тех, кто хочет работать с JavaScript во внешнем интерфейсе, обязательно нужно уметь работать с React.

Многие другие фреймворки и библиотеки действительно конкурентоспособны, но ReactJS предлагает множество преимуществ, которые дают именно то, что вам нужно для создания приложения любого размера. Facebook, Instagram, Netflix, Airbnb, Uber и Twitter лидируют в использовании React. Так что, если вы занимаетесь JavaScript и хотите узнать больше о ReactJS, добро пожаловать в нашу семью. Вот несколько замечательных и полезных ресурсов, которые помогут вам начать работу с React сегодня и не отставать от экосистемы:

Лично я настоятельно рекомендую книги и статьи Робина Вируха. Он один из величайших инструкторов, которых я встречал. Он заставляет вас осваивать React и Redux безболезненным и захватывающим способом. Его книги и статьи следующие:

• Путь к реакции. Эта книга научит вас простому React от базовых до продвинутых концепций.
• Укрощение состояния в React. Эта книга поможет вам освоить Redux. Вы можете выпить шампанского, чтобы поздравить себя в конце этого 😅
• Путь к React и Firebase. Это поможет вам изучить Firebase, одновременно практикуя свои знания React с помощью полноценного приложения.
• Дорога к GraphQL. Эта книга сделает из вас мастера GraphQL и в то же время отточит ваши навыки работы с ReactJS и NodeJS со многими приложениями, которые позволят вам создать собственное полноценное приложение с полным стеком. Свяжитесь со мной после прочтения этой книги, чтобы начать крутой стартап 😆

Вы думаете о создании собственного стартапа или поиске работы своей мечты? Тогда вышеперечисленные книги просто необходимы. Вы поблагодарите автора позже. Эй, подождите, я спрошу его, можете ли вы отправить ему кружку «I Love CSS» после одного из этих курсов 😸 . Я думаю, вы все еще хотели бы иметь другие полезные ресурсы? Также хороши следующие:

• Библиотеки React в 2020 году. Это золотая жила, которая дает вам потрясающие библиотеки, с которыми вам понравится работать в React. Вы также можете ознакомиться со многими выдающимися статьями на основном сайте.
• Мастера фронтенда. Эта замечательная платформа помогает развивать ваши навыки с помощью углубленных курсов по современному JavaScript и интерфейсной инженерии. Следовательно, есть много курсов React.JS, созданных замечательными инструкторами, на которые вы можете записаться уже сегодня.
• Отличный ответ. Здесь перечислены все последние и самые горячие новости о React, исчерпывающий обзор лучших ресурсов для начала, потрясающие плейлисты, доклады с конференций и многое другое.
• Полное руководство по ресурсам React. Помогает вам найти учебные пособия по React, разработчиков, которым нужно следовать, лучшие книги для изучения и мероприятия, которые нужно посетить, в полном руководстве по ресурсам React от X-Team.
• Острый сайт
• Умник

Резюме

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

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