CC BY
125
Список литературы / References
1. Ньюмен Сэм. Создание микросервисов. СПб.: Питер, 2016. 304 с.: ил. (Серия «Бестселлеры O'Reilly»).
2. Таненбаум Э., Стеен М. ван. Распределенные системы. Принципы и парадигмы. СПб.: Питер, 2003. 877 с.: ил. (Серия «Классика computer science»).
3. Martinfowler. [Электронный ресурс]: Mcroservices. a definition of this new architectural term. Режим доступа: https://martinfowler.com/articles/microservices.html/ (дата обращения: 22.05.2018).
4. Хабрахабр. [Электронный ресурс]: Microsoft Azure - Azure Service Fabric и архитектура микросервисов. Режим доступа: https://habrahabr.ru/company/mailru/blog/320962/ (дата обращения: 06.05.2016).
5. MSDN Magazine Blog. [Электронный ресурс]: Архитектура микросервисов. Режим доступа: https://msdn.microsoft.com/ru-ru/magazine/mt595752.aspx/ (дата обращения: 22.05.2018).
СОВРЕМЕННЫЕ ИНТЕРАКТИВНЫЕ ВЕБ-ПРИЛОЖЕНИЯ -ПОСТРОЕНИЕ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА С REACT Бондаренко С.О. Email: [email protected]
Бондаренко Сергей Олегович — студент, кафедра автоматизации обработки информации, Томский государственный университет радиоэлектроники и систем управления, г. Томск
Аннотация: обзор веб-технологии React от крупнейшей социальной сети в мире и одноименной компании Facebook. Мир Java Script в настоящее время находится в большой беспорядочности. Новые фреймворки всплывают ежедневно, разработчики не могут решить, какие инструменты лучше использовать, а создание пользовательских интерфейсов испытывает значительные изменения. К счастью, на помощь приходит «React от Facebook», обещающий новый подход к созданию пользовательских интерфейсов. Основная концепция React-а отдельные компоненты и их состояния. Разработка пользовательского интерфейса по этому принципу — это настоящее и будущее уровня, отвечающего за представление данных, и вы должны начать осваивать и применять это уже сейчас вместе с React. Ключевые слова: пользовательский интерфейс, веб-технологии, React.
MODERN INTERACTIVE WEB APPLICATIONS - BUILDING A USER INTERFACE USING THE REACT Bondarenko S.O.
Bondarenko Sergei Olegovich — Student, DEPARTMENT OF DATA PROCESSING AUTOMATION, TOMSK STATE UNIVERSITY OF CONTROL SYSTEMS AND RADIOELECTRONICS, TOMSK
Abstract: review of web technologies React from the largest social network in the world and the Facebook company of the same name. The world of Java Script is currently in great disorder. New frameworks pop up daily, developers can not decide which tools to use better, creating user interfaces is experiencing a change. Fortunately, "React from Facebook" comes to the rescue, promising a new approach to creating user interfaces. The main concept of the React is the individual components and their states. The development of a user interface by this principle is the present and future levels that are responsible for viewing data and you must begin to master and apply it now together. Keywords: user interface, web technology, React.
УДК 004.428.4
Мир Java Script в настоящее время находится в большой беспорядочности. Новые фреймворки всплывают ежедневно, разработчики не могут решить, какие инструменты лучше использовать, а создание пользовательских интерфейсов испытывает значительные изменения.
К счастью, на помощь приходит «React от Facebook», обещающий новый подход к созданию пользовательских интерфейсов.
React — эффективная и гибкая библиотека JavaScript для генерации динамических пользовательских интерфейсов. С марта 2013-го, React разработан и поддерживается 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. С ним требуется гораздо меньше усилий по сравнению с классическим Java Script при написании кода. JSX трансформируется в JavaScript перед запуском в браузере. Он не является обязательным при использовании React. Работа с React без JSX комфортна и удобна, особенно если вы не желаете настраивать компиляцию в своей среде сборки.
Каждый элемент JSX является просто синтаксическим сахаром для вызова "React.createElement(component, ...)". Поэтому, всё, что вы можете сделать с помощью JSX, также можно сделать и с помощью обычного JavaScript.
Virtual DOM — представляет легковесную копию обычного DOM. И отличительной особенностью React является то, что данная библиотека работает именно с виртуальным DOM, а не обычным.
Если программе необходимо уточнить информацию о состоянии элементов, то она обращается к виртуальному DOM. За счет Virtual DOM должна увеличиваться производительность.
React предоставляет декларативный API и это создает условия, где вам не нужно переживать за изменения, которые происходят. Это значительно упрощает написание приложений.
React предоставляет полный контроль над размером приложения, позволяя включить только те вещи, которые действительно нужны. Он дает больше гибкости при переходе от односторонних приложений (SPA) к микросервисам, используя части бывшего приложения.
React отлично подойдет для проектов, где важна гибкость при создании больших экосистем, имеющие тенденцию разрастаться. Отлично подходит для командной разработки. UI-код читабельный и прост в сопровождении. Способен полностью взять на себя ответственность за уровень представления в архитектуре MVC (модель, представление, контроллер). Разработка пользовательского интерфейса по этому принципу — это современный подход в сфере предоставления данных.
React - это JavaScript библиотека, поэтому необходимо владеть базовыми знания языка JavaScript. Если ваши знания этого языка недостаточно сильны, рекомендуется освежить их. Это позволит проще продвигаться в освоении данной технологии.
React Native позволяет использовать логику уже существующего веб-приложения, например корпоративного сайта, при создании мобильного приложения. Это означает, что разработчики могут использовать этот же самый код, который был использован в процессе создания сайта вместо того, чтобы начинать с чистого листа.
Помимо более быстрой разработки, переиспользование кода позволяет избежать большого количества ошибок. Если вы создаете правильно спроектированные и удобные компоненты, которые планируете использовать в будущем снова, вам нужно будет писать меньше кода, когда вы решите создать с их помощью новый пользовательский интерфейс. Чем меньше нового кода вам нужно, тем меньше вероятность возникновения новых ошибок. К тому же, вы знаете ваши компоненты. Вы уже использовали и тестировали их при работе над реальным проектом, а значит при возникновении ошибок сможете предсказать причину их появления [3].
Заказчик также может извлечь пользу из данной технологии, например:
• Virtual DOM способен увеличить производительность высоконагруженных приложений, что в свою очередь снижает риск возникновения проблем и делает пользовательский опыт максимально комфортным;
• Использование изоморфного подхода помогает производить рендеринг страниц быстрее, тем самым позволяя пользователям чувствовать себя более комфортно во время работы с вашим приложением. Поисковые системы индексируют такие страницы лучше. Поскольку один и тот же код может быть использован, как в клиентской, так и в серверной части приложения, нет нужды в повторении одного и того же функционала. В результате время разработки и затраты снижаются;
• Благодаря переиспользованию кода стало гораздо проще создавать мобильные приложения. Код, который был написан во время работы на сайтом, может быть повторно использован для разработки мобильного приложения. Если вы планируете использовать не только сайт, но и мобильное приложение, нет необходимости нанимать две большие команды разработчиков.
React развивается как открытый проект, и все сайты библиотеки доступны на "https://github.com/facebook/react". Кроме того, при изучении Reacta также будет полезен сайт с официальной документацией - https://reactjs.org/, где можно найти все необходимые руководства по использованию.
Список литературы / References
1. Новиков Сергей. Angular vs. React vs. Vue: Сравнение, 2017. [Электронный ресурс], 2018. Режим доступа: https://habr.com/post/338068/ (дата обращения: 19.05.2018).
2. Тюшкевич Сергей. Полное руководство по ReactJS. [Электронный ресурс], 2018. Режим доступа: https://learn-reactjs.ru/ (дата обращения: 19.05.2018).
3. Почему стоит использовать React JS при разработке приложений. [Электронный ресурс], 2018. Режим доступа: https://xbsoftware.ru/blog/pochemu-stoit-ispolzovat-react-js-razrabotke-prilozhenij/ (дата обращения: 19.05.2018).
