CC BY
30
УДК 004.42
Мамбетов Р.А. студент 2 курса факультет «Прикладная информатика» Крымский инженерно-педагогический университет научный руководитель: Москалева Ю.П., к.ф.-м.н.
доцент
Россия, г. Симферополь ПОСТРОЕНИЕ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ ВЕБ-ПРИЛОЖЕНИЙ С ПОМОЩЬЮ БИБЛИОТЕКИ REACT
Аннотация. Обзор библиотеки пользовательских интерфейсов React, созданной одной из крупнейшей социальной сетью в мире компанией Facebook. В мире разработки интерфейсов, а в частности Javascript в настоящее время происходит полный хаос. Каждый день появляются новые фреймворки, разработчики не могут определиться, какие инструменты лучше и эффективнее использовать, а разработка пользовательских интерфейсов испытывает серьезные изменения. Одним из таких инструментов является библиотека React от Facebook, обещающая новый подход в создании пользовательских интерфейсов.
Ключевые слова: пользовательский интерфейс, веб-технологии, библиотека React, Facebook.
Mambetov R.A. - 2nd year student, Faculty of Applied Informatics Crimean Engineering and Pedagogical University
Russia, Simferopol Scientific adviser: Moscaleva Y.P.
senior teacher CONSTRUCTION OF USER INTERFACES OF WEB APPLICATIONS THROUGH REACT LIBRARY
Annotation. An overview of the React user interface library created by one of the largest social networks in the world, Facebook. In the world of development of interfaces, and in particular Javascript, there is currently complete chaos. Every day there are new frameworks, developers can not decide which tools are better and more efficient to use, and the development of user interfaces is undergoing major changes. One such tool is Facebook's React library, which promises a new approach to creating user interfaces.
В мире разработки интерфейсов, а в частности Javascript в настоящее время происходит полный хаос. Каждый день появляются новые фреймворки, разработчики не могут определиться, какие инструменты лучше и эффективнее использовать, а разработка пользовательских интерфейсов испытывает серьезные изменения. Одним из таких инструментов является библиотека React от Facebook, обещающая новый подход в создании
пользовательских интерфейсов. Основной концепцией, React.js являются отдельные компоненты и их состояния. Создание пользовательских интерфейсов по этому принципу может стать будущим уровнем, отвечающим за представление данных, и стоит подумать о том, чтобы начать осваивать и применять это уже сейчас вместе с React.
React — достаточно эффективная и гибкая библиотека JavaScript для создания динамических пользовательских интерфейсов. В марте 2013-го, компания Facebook выпустила первую версию библиотеки, которую и сама использует React-компоненты на страницах своей социальной сети. React также получил применение в Instagram, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal и др. [1]. Согласно мнению разработчиков, React - один из лучших вариантов для создания больших, быстрых и масштабируемых веб-приложений. Одна из отличительных частей React — это то, как вы думаете о приложениях по мере их разработки. Если описывать пошагово этот процесс, то получается следующий путь [2]:
1. Декомпозиция UI в виде компонентов;
2. Отрисовка данных без интерактивности;
3. Определение минимальных состояний для задания интерактивности;
4. Выбор компонентов владеющим и изменяющим состояние;
5. Определение обратного потока данных;
В основе React лежат — компоненты, элементы, Virtual DOM и JSX. Компоненты позволяют разделить UI на независимые друг от друга части и использовать каждый блок отдельно. Концептуально, компоненты подобны Javascript функциям. Они принимают произвольные данные (называемые props) и возвращают React-элементы, описывающие, что должно отрисоваться на экране. Все компоненты обладают свойствами и состоянием.
Элементы — это объекты Javascript, которые представляют HTML-элементы (описывают DOMэлементы). Они являются строительными блоками React. JSX — это препроцессор, упрощающий создание элементов и компонентов React. С ним требуется гораздо меньше усилий по сравнению с классическим Javascript при написании кода. JSX трансформируется в Javascript перед запуском в браузере. Однако JSX не является обязательным при использовании React. React также позволяет работать без JSX, особенно если вы не желаете настраивать компиляцию в своей среде сборки. Каждый элемент JSX является просто синтаксической оболочкой для вызова "React.createElement(component, ...)". Соответственно, всё, что вы можете сделать с помощью JSX, также можно сделать и с помощью обычного JavaScript. Virtual DOM — представляет собой облегченную копию обычного DOM. И отличительной особенностью React является то, что данная библиотека работает не с обычным, а с виртуальным DOM. Если приложению необходимо уточнить информацию о состоянии элементов, то идет запрос к виртуальному DOM. Virtual DOM тем самым увеличивает производительность. React предоставляет декларативный API и это создает
условия, где вам не нужно переживать за изменения, которые происходят. Это значительно облегчает написание приложений.
React предоставляет полный контроль над размером приложения, позволяя включить только те вещи, которые действительно нужны. К примеру, React дает больше гибкости при переходе от одностраничных приложении (SPA) к микросервисам, используя части бывшего приложения. React отлично подойдет для проектов, где важна гибкость при создании больших экосистем, которым свойственно разрастаться. Отлично подходит для командной разработки. UI-код читабельный и прост в сопровождении. Способен полностью взять на себя ответственность за уровень представления в архитектуре MVC (модель, представление, контроллер). Разработка пользовательского интерфейса по этому принципу — это современный подход в сфере предоставления данных.
React - это JavaScript библиотека, поэтому необходимо владеть базовыми знания языка JavaScript. Если ваши знания этого языка недостаточно сильны, рекомендуется освежить их. Это позволит проще продвигаться в освоении данной технологии. Также Facebook позаботились о мобильной разработке и на основе React был создан React Native, который позволяет использовать логику уже существующего веб-приложения, например корпоративного сайта, при создании мобильного приложения. Это позволяет, разработчикам использовать тот же самый код, который был использован в процессе создания веб-приложения вместо того, чтобы начинать с чистого листа. Помимо более быстрой разработки, переиспользование кода позволяет избежать большого количества ошибок. Если вы создаете правильно спроектированные и удобные компоненты, которые планируете использовать в будущем снова, вам нужно будет писать меньше кода, когда вы решите создать с их помощью новый пользовательский интерфейс. Чем меньше нового кода вам нужно, тем меньше вероятность возникновения новых ошибок. К тому же, вы знаете ваши компоненты. Вы уже использовали и тестировали их при работе над реальным проектом, а значит при возникновении ошибок сможете предсказать причину их появления [3]. Соответственно React дает неоспоримые преимущества как для разработчика так и для заказчика, например такие как:
• Virtual DOM способен увеличить производительность высоконагруженных приложений, что в свою очередь снижает риск возникновения проблем и делает пользовательский опыт (User Experience) максимально удобным;
• Использование изоморфного подхода помогает ускорять рендеринг страниц быстрее, тем самым позволяя пользователям чувствовать себя более комфортно во время работы с вашим приложением. Это облегчает работу с SEO, ведь поисковые системы индексируют такие страницы лучше. Поскольку один и тот же код используется, как в клиентской, так и в серверной части приложения, нет необходимости в повторении одного и того
же функционала. В результате сокращается время разработки и снижаются затраты;
• Благодаря переиспользованию кода стало гораздо проще создавать мобильные приложения. Код, который был написан во время работы над сайтом, может быть повторно использован для разработки мобильного приложения. Если вы планируете использовать не только сайт, но и мобильное приложение, нет надобности нанимать две большие команды разработчиков. React развивается как открытый проект, и все сайты библиотеки доступны на "https://github.com/facebook/react". Кроме того, при изучении Reacta также будет полезен сайт с официальной документацией -https://reactjs.org/, где можно найти все необходимые руководства по использованию.
Выводы. Неустанно развиваясь, веб-браузеры постепенно вытесняют настольные приложения, которые тяжелее распространять и поддерживать. Веб уже сегодня является достойной им альтернативой, а современные сайты имеют возможность эксплуатации практически всех ресурсов компьютера пользователя. При этом не остается незамеченным очевидное усложнение веб-приложений, что порождает множество различных фреймворков, создавая головную боль для разработчиков. Одной из таких библиотек является React, которая имеет собственный компонентный подход для веб-разработки.
Кроме компонентов основными частями React являются элементы, Virtual DOM и JSX. На основе проделанного исследования можно сделать следующие выводы: React является достаточно простой, интуитивно-понятной и легкой в использовании библиотекой, которая подходит для разработки даже сложных приложений.
Использованные источники:
1. Стефанов С.Г., React.js. Быстрый старт: Книга. - М.: O'Reilly - Питер, 2017. - 304 с.
2. React без JSX// Learn React JS. - [Электронный ресурс]: URL: https://learn-reactjs.ru/core/react-without-j sx/.
3. Yes, React is taking over front-end development. The question is why. // freecodecamp. - [Электронный ресурс]: URL: https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76.
4. Почему стоит использовать React JS при разработке приложений. // habr -[Электронный ресурс]: URL: https://xbsoftware.ru/blog/pochemu-stoit-ispolzovat-react-js-razrabotke-prilozhenij/.
5. Тиленс Т.М., React in Action: Книга. - М.: Manning - Питер, 2018. - 336 с.
