CC BY
131РАЗРАБОТКА КЛИЕНТСКОЙ ЧАСТИ ВЕБ-ПРИЛОЖЕНИЯ С ИСПОЛЬЗОВАНИЕМ ТЕХНОЛОГИЙ SPA
DEVELOPMENT OF THE CLIENT SIDE OF A WEB APPLICATION USING
SPA TECHNOLOGIES
УДК-004
Газизуллин Нафис Инсафович, студент Казанского национального исследовательского технологического университета, Россия, г. Казань Плещинская Ирина Евгеньевна, к.ф.-м.н., доцент Казанского национального исследовательского технологического университета, Россия, г. Казань
Gazizullin Nafis Insafovich, naf.gazizullin@yandex.ru Pleshchinskaya Irina Evgen'evna
АННОТАЦИЯ
Статья посвящена разработке клиентской части веб-приложения с помощью технологии SPA (Single Page Application). Приведена краткая информация о двух крупнейших компаниях, Google и Facebook, предоставляющих технологии в области SPA. Рассмотрены программные продукты данных компаний, перечислены основные преимущества и недостатки указанных программных продуктов. Проведено сравнение программных сред React и Angular. Интернет-технологии развиваются стремительно, и сегодня невозможно представить ни одну компанию без своего веб-сайта. Многие частные лица, оказывающих те или иные услуги, тоже имеют свои сайты. Главное требование к веб-сайту - он должен работать быстро, качественно, надежно и иметь понятный интерфейс.
ANNOTATION
The article is devoted to the development of the client part of the web-application using SPA (Single Page Application) technologies. Brief information on the two largest companies, Google and Facebook, providing technology in the field of SPA is considered. The software products of these companies, their advantages and disadvantages are considered as well. React and Angular software are compared. Internet technologies are developing rapidly, and today it is impossible to imagine any company without its own website. Many individuals who provide certain services also have their own websites. The main requirement for a website is that it should work quickly, efficiently, reliably, and have a clear interface.
Ключевые слова: SPA; JavaScript; React; Angular JS.
Key words: SPA, JavaScript, React, Angular JS.
Интернет-технологии развиваются стремительно, и сегодня невозможно представить ни одну компанию без своего веб-сайта. Многие частные лица, оказывающих те или иные услуги, тоже имеют свои сайты. Главное требование к веб-сайту - он должен работать быстро, качественно, надежно и иметь понятный интерфейс.
Однако, разработка качественного веб-сайта остается непростой задачей. Зачастую это связано с тем, что разработчики используют устаревшие системы разработки, от которых не могут отказаться, потому что они являются привычными и надежными. Технология SPA [1] позволяет использовать современные средства разработки веб-сайтов.
SPA (Single Page Application) — это веб-приложение или веб-сайт, в котором используется только один HTML-документ в качестве оболочки для всех веб-страниц. Этот HTML-документ организовывает взаимодействие с пользователем через динамически подгружаемые HTML-коды, CSS-стили и JavaScript-код посредством технологии AJAX. В результате при обновлении данных веб-страница не перезагружается полностью, и, как следствие, веб-приложения работают быстрее и становятся удобнее [2].
На данный момент несколько крупных компаний предоставляют различные средства и технологии в области SPA. К числу самых крупных и популярных относятся компании Google и Facebook, являющиеся разработчиками таких SPA-продуктов, как Angular JS и React.
Цель данной работы -краткий обзор и сравнение этих программных продуктов.
Библиотека React
React — это JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. Данная библиотека разрабатывается и поддерживается компанией Facebook и сообществом отдельных разработчиков и корпораций. Библиотека React может быть успешно использована для разработки одностраничных и мобильных приложений.
Библиотека React создана разработчиком программного обеспечения Джорданом Валке и впервые была упомянута в новостной ленте Facebook в 2011 году. Исходный код был представлен в 2013 году на конференции «JSConf US» [3].
В основу разработки библиотеки положен компонентный подход, что позволяет создавать инкапсулированные компоненты, которые имеют собственное состояние, и объединять эти компоненты в сложные пользовательские интерфейсы. Поскольку логика самих компонентов
реализована на языке программирования JavaScript, можно передавать данные по всему приложению, не привязываясь к интерфейсу DOM.
Одной из ключевых особенностей библиотеки является возможность использования препроцессора JSX, с синтаксисом, схожим с языком разметки HTML, который преобразуется в код языка программирования JavaScript. Препроцессор JSX позволяет описывать структуру интерфейса. Как правило, при использовании библиотеки React, для построения компонентов используют именно этот препроцессор, но можно использовать так же и чистый JavaScript код.
К особенностям библиотеки также относятся возможность использования однонаправленной передачи данных. Свойства могут передаваться от родительских компонентов к дочерним. Таким образом, компоненты получают свойства как множества постоянных значений, благодаря этому, исключается возможность изменять свойства компонента при передаче данных, но остается возможность изменения свойств через функции обратного вызова. Такой механизм называют «свойства вниз, события наверх» [4].
Библиотека React работает с использованием виртуального интерфейса DOM (Document Object Model). В памяти создается кэш-структура, которая позволяет вычислять разность предшествующего и текущего состояний интерфейса. Таким образом, у разработчика появляется возможность работать со страницей, в предположении, что она полностью обновляется, но какие компоненты обновлять, решает сама библиотека. В свою очередь, компоненты имеют жизненный цикл, для каждого цикла реализованы свои методы, которые позволяют разработчикам запускать код на разных стадиях жизненного цикла компонента. Приведем пример:
• метод shouldComponentUpdate позволяет отменить перерисовку компонента, если она не нужна;
• метод componentDidMount вызывается после первой отрисовки компонента; обычно используется для запроса данных с сервера;
• метод render — самый важный метод жизненного цикла компонента; вызывается каждый раз при изменении данных для перерисовки данных в интерфейсе.
Главной целью библиотеки является предоставление высокой скорости доступа, простоты и масштабируемости. Также она позволяет использовать другие библиотеки для разработки пользовательских интерфейсов, такие, как библиотека для управления состоянием приложения Redux или библиотеки для манипулирования данными GraphQl.
Платформа Angular
Angular — это платформа для разработки веб-приложений, написанная на языке программирования TypeScript. Разработана и поддерживается командой из компании Google, а также сообществом разработчиков из различных компаний. Создавалась как новая версия фреймворка AngularJS, однако, новая версия была полностью переписана на языке программирования TypeScript и обладает другой архитектурой, из-за чего не имеет обратной совместимости с предыдущей версией.
Платформа не только предоставляет инструменты, но и дизайны шаблона, что позволяет создавать обслуживаемый и расширяемый проект. Правильное соблюдение архитектуры приложения, которая предоставляется при создании, позволяет избежать путаницы в классах и методах [5].
Платформа Angular использует разметку HTML для определения пользовательского интерфейса приложения. Разметка HTML является более интуитивным и менее сложным средством, чем процедурное определение интерфейса в языке программирования JavaScript, что позволяет привлечь больше разработчиков.
Манипуляция с объектами интерфейса DOM для представления данных также является частью поведения платформы. Код манипулирования интерфейсом DOM должен быть внутри директив, а не в представлении. Это сильно упрощает работу, в частности, из-за того, что платформа видит представление как страницу с кодом HTML с заполненными данными. Абстрагируясь от манипуляций интерфейса DOM, разработчики могут сосредоточиться на представлении пользовательского интерфейса без этих отвлекающих факторов.
В платформе Angular реализованы контроллеры — простые функции, которые имеют только одно задание — манипулировать областью действия. Например, появляется возможность использовать платформу, чтобы предварительно заполнить данные в области с сервера или реализовать проверку бизнес-логики. В отличие от других сред, контроллеры не являются объектами и не являются потомка ми других объектов.
Модульное тестирование, реализованное в платформе, является ее исключительной особенностью. Модульное тестирование существенно превосходит традиционный способ, потому что позволяет создать отдельную тестовую страницу, в которой проверяет работоспособность компонента.
Платформа Angular или библиотека React?
Платформа Angular и библиотека React являются бесплатными, и обе пользуются популярностью среди программистов в области разработки вебсайтов и веб-приложений. Рассмотрим преимущества и недостатки каждой из платформ.
• При разработке веб-сайта или веб-приложения самым нужным свойством используемого инструмента является его самодостаточность. Библиотека React является основой для разработки пользовательского интерфейса, но нуждается в дополнительных библиотеках, в то время как платформа Angular является полноценным фреймворком, который обычно не требует дополнительных библиотек.
• Порог вхождения является главным фактором при выборе инструмента у начинающих разработчиков. Библиотека React является достаточно простой в использовании: нет внедрения зависимостей, нет классических шаблонов, нет слишком сложных функций. Библиотека довольно проста для освоения, если разработчик уже знаком с языком программирования JavaScript.
• Документация и поддержка также сильно влияет на выбор инструмента у разработчиков. Работая с библиотекой React, вы должны быть постоянным учеником, так как структура часто обновляется. В то время, как сообщество разработчиков старается как можно быстрее продвигать последнюю документацию, идти в ногу со всеми изменениями не так просто. Платформа Angular вызывает большой скептицизм, частично из-за непопулярности первой версии платформы Angular 1.0. Разработчики привыкли отклонять фреймворк как слишком сложный, так как на его изучение уходило много времени. Тем не менее, эта структура разработана компанией Google, что говорит в пользу выбора платформы Angular.[6]
• Структура библиотеки React предоставляет разработчикам свободу выбора. Не существует «единственно правильной структуры» для приложения, разработанной с помощью библиотеки React. В то же время, структура платформы Angular является фиксированной и сложной, более подходящей для опытных разработчиков.
• Наибольшее преимущество платформы Angular заключается в том, что, в отличие от библиотеки React, он поддерживает внедрение зависимостей. Поэтому платформа Angular позволяет иметь разные жизненные циклы для разных компонентов.
• Библиотека React использует виртуальную объектную модель документов, которая позволяет легко реализовывать незначительные изменения данных в одном элементе без обновления структуры всего дерева. В то время, как платформа Angular использует реальную объектную модель документов, который обновляет всю древовидную структуру, даже когда изменения произошли в одном элементе.
• Можно, наверное, считать, что главным признаком любого успешного инструмента является его производительность. Производительность библиотеки React значительно улучшилась с введением виртуальной
объектной модели документов. Поскольку все виртуальные модели легки и построены на сервере, нагрузка на браузер снижается. Платформа Angular работает хуже, особенно в случае сложных и динамичных веб-приложений. На производительность приложений Angular отрицательно влияет двунаправленная привязка данных. Каждой привязке назначается наблюдатель для отслеживания изменений, и каждый цикл продолжается до тех пор, пока не будут проверены все наблюдатели и связанные значения.
Разработка веб-сайтов и веб-приложений с помощью технологии SPA на сегодняшний день очень популярна и стремительно развивается, что мотивирует разработчиков создавать и развивать инструменты, которые работают на технологии SPA. Библиотека React и платформа Angular пользуются большой популярностью среди разработчиков. Они обе хороши в области SPA, и у каждой есть отличительные особенности. Но для начинающих разработчиков, по нашему мнению, более предпочтительна библиотека React, так как, среди прочего, библиотека имеет менее низкий порог вхождения и более понятную документацию.
Литература
1. Medium [Электронный ресурс]. - Режим доступа: https://medium.com/ -(Дата обращения: 25.04.2020).
2. Алекс, Бэнкс React и Redux. Функциональная веб-разработка. Руководство / Бэнкс Алекс. - М.: Питер, 2018. - 458 c.
3. Мэтью, Дэвид HTML5. Разработка веб-приложений / Дэвид Мэтью. - М.: Рид Групп, 2016. - 320 c.
4. Официальная документация по React. [Электронный ресурс]. Режим доступа: https://ru.react.org/ (дата обращения: 25.04.2020).
5. Официальная документация по Angular.js. [Электронный ресурс]. Режим доступа: https://angularjs.org/api/ (дата обращения: 25.04.2020).
6. Национальная библиотека имени Н. Э. Баумана. [Электронный ресурс]. Режим доступа: http://ru.bmstu.wiki/Heroku/ (дата обращения: 09.01.2017).
Literature
1. Medium [Electronic resource]. - Access mode: https://medium.com/ -(accessed: 25.04.2020).
2. Alex, banks React and Redux. Functional web development. Guide / banks Alex. - M.: Peter, 2018. - 458 p.
3. Matthew, David HTML5. Web application development / David Mathew. -Moscow: reed Group, 2016. - 320 p.
4. The official documentation on React. [Electronic resource]. Access mode: https://ru.react.org/ (accessed: 25.04.2020).
5. Official documentation for Angular.js. [Electronic resource]. Mode of access: https://angularjs.org/api/ (accessed: 25.04.2020).
6. National library of a name of N. E. Bauman. [Electronic resource]. Mode of access: http://ru.bmstu.wiki/Heroku/ (accessed: 09.01.2017).
