XI Международная студенческая научная конференция Студенческий научный форум - 2019

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

Главным этапом разработки веб-приложений является верстка страниц. Ее производят с помощью HTML.

HTML – унифицированный язык разметки документов в Интернете. «HTML (HyperText Markup Language - язык разметки гипертекста) – стандартный язык разметки, используемый для создания веб-страниц. Прародителем HTML является SGML. Приемником HTML является язык XHTML» [1]. Язык HTML читается браузерами; полученный в результате интерпретации текст отображается на экране монитора компьютера или мобильного устройства.

История языка HTML начинается со второй половины 80-х годов прошлого столетия. К этому привело принятие Международной организацией по стандартизации (ISO) ISO-8879-стандарта StandardGeneralizedMarkupLanguage (SGML). Он сопровождался описанием, в котором говорилось, что цель SGML – структурная разметка текста. Разработкой HTML занимался британский учёный Тим Бернерс-Ли в стенах Европейской организации по ядерным исследованиям в Женеве (Швейцария). HTML предназначался для обмена научной и технической документацией. Предполагалось, что этот язык могут использовать люди, которые не являются специалистами в области вёрстки.

К элементам разметки относятся заключённые в угловые скобки (< и >) дескрипторы-тэги (tags) и их атрибуты. Последовательность открывающего дескриптора (<>) и закрывающего дескриптора (< / >) составляет контейнер. Элементы HTML делятся на структурные (организуют текст) и форматирующие (задают стиль).

Последняя версия стандарта HTML – HTML5. Под этим термином понимают:

- новую версию языка HTML с новыми элементами и атрибутами;

- совокупность технологий, позволяющую создавать разнообразные сайты и вэб-приложения [2].

Что нового дает HTML5?

- новый алгоритм парсинга для создания структуры DOM;

- добавление новых элементов и тегов, как например, элементы video, audio и ряд других;

- переопределение правил и семантики уже существовавших элементов HTML.

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды Интернет.

Как правило, HTML 5 применяется в двух значениях:

- HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4;

- HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3 [3].

Разработка веб-приложений на основе HTML включает в себя не только разработку его структуры, но и его функционала. Для этого применяются различные языки программирования: Java, PHP, Ruby, Python, JavaScriptи т.д.

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

Библиотека – это структурированный набор полезного функционала. Стандартная библиотека должна содержать функции для работы со строками, датами, DOM-элементами, событиями, cookie, анимацией, запросами, и многим другим. Каждая функция возвращает значения вызывающему ее приложению, которое может в дальнейшем использовать их в зависимости от логики разработчика. Это можно сравнить с подбором запчастей для автомобиля: вы свободны в выборе любого варианта, с которым машина будет работать, но логика целиком на вашей совести. Библиотека обычно сокращает время разработки примерно на 20% [4].

React (иногда React.js или ReactJS) – JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. React был создан Джорданом Уокером, разработчиком программного обеспечения из Facebook. React может использоваться для разработки одностраничных и мобильных приложений. Его цель – предоставить высокую скорость, простоту и масштабируемость [5].

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

Самое главное в этой концепции то, что и большие, и маленькие компоненты можно использовать повторно и в текущем, и в новом проекте.

React содержит язык шаблонов и некоторые callback-функции для отрисовки. Весь результат работы React – это HTML. Cвязки HTML/JavaScript, называемые компонентами, занимаются тем, что хранят свое внутреннее состояние в памяти, но в итоге просто выдается HTML.

Библиотека React имеет ряд преимуществ по сравнению с другими библиотеками или фреймворками:

- всегда можно сказать, как компонент будет отрисован, глядя на исходный код;

- связывание JavaScript и HTML в JSX делает компоненты простыми для понимания;

- можно преобразовывать React на сервере [6].

Результаты статистических опросов свидетельствуют о том, что популярность рассматриваемой библиотеки постоянно растёт. Хотя, если рассмотреть данные StackOverflow (популярной системы вопросов и ответов о программировании, разработанной Джоэлем Спольски и Джеффом Этвудом в 2008 году) по самым популярным технологиям, React уступает Angular, но при этом лидирует в списке самых любимых разработчиками технологий (Рис. 1) [7].

Рисунок 1– Рейтинг библиотек JavaScript

Говоря о возможностях этой библиотеки, можно отметить технологию Virtual DOM и возможность декларативного описания пользовательских интерфейсов, а также возможность моделирования состояния интерфейсов и доступность React для JS-разработчиков. Одной из уникальных характеристик библиотеки React является ее компонентная модель. Компоненты позволяют разбивать пользовательский интерфейс на независимые фрагменты, подходящие для повторного использования, и рассматривать эти фрагменты как изолированные сущности.

Рассмотрим применение библиотеки ReactJS на примере создания части мотивационного приложения, отражающего разные сферы человеческой жизни (в нашем случае – «Здоровье», «Семья», «Работа») (Рис. 2).

Рисунок 2– Сферы жизнедеятельности

Приведенный ниже код отвечает за отображение указанных сфер в браузере и функционал, позволяющий отображать, запоминать и изменять параметры данных (Рис. 3).

Рисунок 3 – Фрагмент кода для отображения сфер жизнедеятельности

Как видим, код включает в себя элементы HTML (например, тэг <h2>) и элементы библиотеки ReactJS (JSX, states, props).

Литература

1. Словарь компьютерных терминов [Электронный ресурс] // Javascript, CSS, HTML в примерах и статьях. URL: https://tiei.ru/wp-content/uploads/skachat-slovar-4.pdf (дата обращения: 23.12.2018).

2. HTML5 [Электронный ресурс] // MDN web docs. URL:https://developer.mozilla.org/ru/docs/HTML/HTML5(дата обращения: 18.12.2018).

3. Введение в HTML5. Что такое HTML [Электронный ресурс] // Сайт о программировании metanit.com. URL: https://metanit.com/web/html5/1.1.php(дата обращения: 18.12.2018).

4. Лучшие JavaScript фреймворки, библиотеки и инструменты в 2017 [Электронный ресурс] // proglib. URL:https://proglib.io/p/best-javascript-frameworks-2017/(дата обращения: 18.12.2018).

5. React [Электронный ресурс] // Википедия. URL: https://ru.wikipedia.org/wiki/React(дата обращения: 18.12.2018).

6. ReactJS для глупых людей [Электронный ресурс] // habr.URL: https://habr.com/post/249107/ (дата обращения: 18.12.2018).

7. 11 библиотек (наборов компонентов) для React, о которых стоит знать в 2018-м [Электронный ресурс] // habr.URL: https://habr.com/company/ruvds/blog/346090/(дата обращения: 18.12.2018).

Код для цитирования: Скопировать