Методика ефективної реалізації односторінкових веб-додатків



Стаття | Article    

Download

Methodology of efficiently realizing single-page application

Vitalii Drabynko

Faculty of Informatics and Computer Technology Igor Sikorsky Kyiv Polytechnic Institute Kyiv, Ukraine v.drabynko@gmail.com

Anatoliy Doroshenko

Faculty of Informatics and Computer Technology Igor Sikorsky Kyiv Polytechnic Institute Kyiv, Ukraine a-y-doroshenko@ukr.net

Abstract. The paper demonstrates the result of the study of the effectiveness of frameworks and JavaScript libraries in the implementation of single-page web applications. Tools such as React, Vue.js and Angular were considered. Web applications were developed using these tools and their effectiveness was evaluated.

Keywords: single-page web application, Angular, React, Vue.js, framework

Драбинко Віталій Павлович

КПІ ім. Ігоря Сікорського

Київ, Україна

v.drabynko@gmail.com

Дорошенко Анатолій Юхимович

КПІ ім. Ігоря Сікорського

Київ, Україна

a-y-doroshenko@ukr.net

Анотація. В роботі демонструється результат дослідження ефективності фреймворків та бібліотек JavaScript при реалізації односторнікових веб-додатків. Були розглянуті такі інструменти як React, Vue.js та Angular . Було розроблено веб-додатки з використанням даних інструментів і проведено оцінку їх ефективності.

Ключові слова: односторінковий веб-додаток, Angular, React, Vue.js, фреймворк.

Вступ

Хмарові веб-додатки набирають популярності. Багато ІТ-компаній помічають цю тенденцію,і все більше програмних продуктів розвивається на основі віддаленого доступу. Є багато аналогів настільних програм, які пропонують онлайн-версію за невелику щомісячну плату.

Вони надають більшої гнучкості та мобільності. Наприклад, ви можете легко вводити дані в CRM або ERP-системи в хмарі через свій мобільний телефон, і це може відбуватися в любому вигідному для вас місці. Сьогодні веб-сайти все частіше розглядаються як користувальницький додаток, а не як статичні сторінки, які були у нас близько 10 років тому. З одного боку, причинами цього є спроби користувачів отримувати і створювати інформацію на основі їх особистих характеристик і вимог. З іншого боку, власники сайтів хочуть надати користувачам більш зручні інтерфейси для роботи з інформацією.

Односторінкові веб-додатки

SPA або Single Page Application - це односторінковий веб-додаток, який завантажується на одну сторінку HTML. Завдяки динамічному оновленню за допомогою JavaScript, немає необхідності перезавантажувати додаткові сторінки під час використання. На практиці це означає, що користувач бачить увесь основний контент у браузері, а при переході на інші сторінки необхідні елементи просто завантажуються замість всього перезавантаження [1].

Односторінкові веб-додатки дозволяють імітувати роботу настільних додатків. Архітектура призначена для оновлення лише частини вмісту при переході на нову сторінку. Таким чином, вам не доведеться перезавантажувати одні і ті ж елементи. Це дуже зручно для розробників та користувачів. Одна з найпопулярніших мов програмування – JavaScript –використовується для розробки SPA.

Односторінкові сайти запускаються в браузері і не потребують перезавантаження сторінок або додаткових сторінок під час використання. Такі додатки щодня використовують мільйони користувачів, навіть не помічаючи цього. Найпопулярніші приклади - GitHub, Gmail, Google Maps і навіть Facebook.

Крім того, робота з платформою односторінкових додатків вимагає набагато більше досвіду в галузі архітектури та безпеки. Вони характеризуються більш високою частотою оновлень та появою нових платформ порівняно з традиційними веб-додатками. Крім того, робота з односторінковими додатками може ускладнити налаштування автоматизованих процесів збирання та розгортання та використання параметрів розгортання, таких як контейнери, порівняно з традиційними веб-додатками.

У процесі роботи користувачу може здатися, що він використовує не веб-сайт, а настільний додаток, оскільки він негайно реагує на всі свої дії, не затримуючись або «зависаючи».

SPA і PWA - веб-сайти, які поступово витісняють класичні MPA. Це пов’язано з тим, що вони легше розвиваються, працюють швидше і подобаються користувачам. Однак у них є слабкий момент - SEO оптимізація.Не всі браузери все ще можуть нормально працювати з ними, тому для того, щоб такі програми були SEO-дружніми, потрібно вдатися до низки хитрощів. MPA-сайти в цьому плані простіші та надійніші.

Для створення складних проектів рекомендується використовувати фреймворки, такі як React, Angular або Vue. Їх архітектура дозволяє створювати гнучкі веб-додатки, а також вони мають великий набір готових рішень, що значно спрощує процес розробки. Крім того, ви можете створювати повні мобільні додатки на основі цих структур.

Фреймворк Angular

AngularJS - це найсучасніша система Google, яка зазвичай використовується для роботи з односторінковими програмами (SPA). AngularJS є відкритим кодом з ліцензією MIT, і ви можете слідкувати за процесом розробки AngularJS на GitHub.

Важлива відмінність між Angular і іншими фреймами полягає в тому, що він використовує TypeScript. TypeScript - строго типізована мова програмування,яка транспілюється на JavaScript. Тобто, надає для JavaScript розробників нові можливості.

Транспіляція- це процес перетворення коду однієї мови програмування в код іншого (або тієї ж мови, але різних версій). Наприклад, перетворення сучасного JavaScript (EcmaScript 2015 - 2018) в більш старий, що підтримується більшістю браузерів EcmaScript 5. Це дуже корисна можливість даного фреймворка, яка надає багато можливостей.

Подібно перекладу ES2015 - 2018 у EcmaScript 5, TypeScript також перекладається в JavaScript будь-якої версії, починаючи з EcmaScript 3. Таким чином, підтримка також надається в старих браузерах [2-5].

Фреймворк React

React – це бібліотека, яка була створена для надання можливості розробникам створювати інтерфейс користувача. Вона допомагає вирішувати проблеми не повного, а часткового оновлення сторінки. Це дуже важливо при розробці односторінкових веб-додатків. Дана бібліотека розробляється Facebook, Instagram та просто спільнотою, адже вона відкрита. React надає можливість програмістам створювати не лише великі веб-додатки, а й односторінкові, які використовують дані, що можуть змінюватися у часі, при цьому, перезавантаження сторінки не потрібне. Ціль React – бути простим та швидким і він з цим справляється.

Так як React відповідає видові у моделі MVC (model-view-controller), то він відповідає лише за обробку інтрефейсу користувача у додатках. Ця його здатність може бути використана з іншими фреймворками або бібліотеками на базі JavaScript.

Завантажуючи сторінку, скрипт приймає під контроль елемент DOM, який ви передали на нього. Тепер у цьому елементі React панує верховно. Він може стежити за діями користувача та змінювати дерево елементів на будь-якому рівні. Для цього він використовує швидкий віртуальний DOM. Цей компонент може подати будь-який компонент (або дерево компонентів), залежно від поточного стану програми. Деякі дрібниці або навіть весь вміст можуть змінитися [6-7].

У React не відома модель MVC, оскільки компонент включає в себе і перегляд (візуалізацію), і логіку. Це означає, що в компоненті, такому як селектор, ви вказуєте як його зовнішній вигляд, так і поведінку. Для зручності використовується спеціальний синтаксис JSX (JavaScript XML). Це схоже на HTML, але насправді це чистий JavaScript.

Фреймворк Vue.js

Vue – новий фреймворк для створення інтерфейсів користувача. На відміну від інших фреймворків, Vue розроблений з нуля, щоб поступово інтегруватися в середу програмування. Основна бібліотека орієнтована лише на шар перегляду, і її легко підбирати та інтегрувати з іншими бібліотеками або існуючими проектами. З іншого боку, Vue також чудово здатний створювати складні односторінкові веб-додатки, коли використовується в поєднанні з сучасними інструментами та бібліотеками підтримки [8].

Одна з головних переваг Vue – реактивність. Так як моделі –JavaScript об’єкти, то керувати станами дуже просто. Кожен компонент автоматично слідкує за собою і розуміє коли необхідно ре-рендеритися.

Оцінка ефективності методів

Для порівняння ефективності даних підходів до реалізації односторінкових веб-додатків було створено додаток для планування – список задач. Його можна побачити на рис. 1.

Всі підходи показали гарні результати в порівнянні з написанням додатка з використанням лише JavaScript. При підрахунках ефективності було взято кількість рядків коду на JS за 1.

Маємо такі показники ефективності:

  1. Vue.js – 0,321.

  2. Angular – 0,356.

  3. React – 0,413.

Тобто, при використанні фремворків, ми зменшуємо кількість написаного коду в 3 рази. Це значно економить час та затрати на створення односторінкового додатка.

Висновки

У списку бібліографічних посилань наводяться тільки джерела, на які автор посилається у тексті.

В результаті виконання даної роботи були розглянуті методи створення односторінкових веб-додатків і виявлено їх ефективність.

При створенні веб-додатку для списка задач найефективнішим виявився фреймворк Vue.js, трішки менш ефективним Angular та найменш ефективним React. Але у кожного з них є свої плюси і вони ефективніші, ніж простий JS.

Література

  1. Майкл Миковски, Джош Пауэлл. Разработка одностраничных веб-приложений = Single Page Web Applications: JavaScriptEnd-to-end. — ДМК Пресс, 2014. — 512 с.

  2. Фримен А. Angular для профессионалов. — СПб.: «Питер» , 2018. — С. 800.

  3. Дилеман П. Изучаем Angular 2. — СПб.: «ДМК Пресс», 2017. — С. 354.

  4. Brad Green,Shyam Seshadri. AngularJS. — O'Reilly Media,2013. — 196 p.

  5. Холмс С. Стек MEAN. Mongo, Express, Angular, Node. — СПб.: «Питер» , 2017. —С. 496.

  6. Мардан Азат. React быстро. Веб-приложения на React, JSX, Redux иGraphQL. — СПб.: «Питер», 2019. —С. 560.

  7. Бэнкс Алекс, Порселло Ева. React и Redux: функциональнаявеб-разработка. — СПб.: «Питер», 2018. — С. 336.

  8. CallumMacrae. Vue.js:Up and Running. — O’Reilly, 2017. — 219 с.
May 30, 2020