Багатосторінкові та односторінкові додатки, їх переваги та недоліки

Анотація. В даній статті розглянуто що таке багатосторінкові (Multiple Page Application — далі MPA) та односторінкові (Single Page Application — далі SPA) додатки, їхні основні переваги та недоліки.

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

Аналіз останніх досліджень і публікацій. Протягом усього часу стрімкого розвитку веб-технологій було випущено велику кількість книг та публікацій, зокрема дослідженням переваг та недоліків створення MPA та SPA займались Васцо Феррейра та Пауль Шерман.

Постановка завдання. Основним завданням, яке поставлене при написанні статті, є дати визначення, багатосторінкових та односторінкових додатків, визначити переваги та недоліки кожного з них.

Виклад основного матеріалу

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

Давайте подивимося, як ми можемо побудувати інтерфейсну частину веб-сайтів. Існує два основних способи побудови веб-сайтів сьогодні: більш сучасний спосіб — це багатосторінковий додаток (MPA) — більш традиційний спосіб, а також односторінковий додаток (SPA). Почнемо з багатосторінкового підходу.

Багатосторінковий додаток (MPA) складається з декількох сторінок із статичною інформацією (текстом, зображеннями тощо) та посиланнями на інші сторінки з тим самим вмістом. Під час переходу на іншу сторінку браузер робить новий запит до сервера і знову завантажує всі ресурси, навіть ті компоненти, які повторюються на всіх сторінках (наприклад, заголовок, нижній колонтитул). Таким чином, продуктивність витрачається на завантаження тих самих елементів. Відповідно, це впливає на швидкість і продуктивність. Основними технологіями для такого типу веб-сайту є HTML та CSS. Дані технології використовувались для розробки найперших веб-сайтів, та продовжують використовуватись сьгодні, для створення сучасних веб-сайтів. Принцип роботи даного підходу зображено на рисунку 1.

Рисунок 1. Принцип роботи багатосторінкового додатку

Під час розробки веб-сайту може виникати потреба в більш складних інтерактивних компонентах (наприклад, у формах). У цьому випадку ви все ще можете використовувати традиційний спосіб розробки, але ви будете обмежені стандартними функціями HTML технології. Проте існують більш підходящі технології для нестандартних, складних та інтерактивних речей, такі, як JavaScript та AJAX. Розвиток Web 2.0 став можливим завдяки еволюції цих технологій. На сьгоднішній день, за допомогою цих технологій, можна створювати складні форми, різні анімації, діаграми та графіки з динамічним оновленням, не перезавантажуючи всіє сторінки, а лише ту частину сторінки, в якій відбулися зміни.

Недоліки багатосторінкових додатків

• Розробка як десктопної, так і мобільної версії веб-сайту займає значно більше часу;
• Збільшує вартість змін при додаванні нових функціональних можливостей в додатку.

Переваги багатосторінкових додатків

• Багатосторінкова (MPA) архітектура дозволяє легко оптимізувати кожну сторінку для пошукових систем. Розробник може додати мета-теги для будь-якої сторінки;
• Як правило, для розробки багатосторінкової програми потрібен менший стек технологій, таким чином вартість таких додатків виходить дешевшою.

Односторінкова програма (SPA) — це додаток, що працює в браузері з метою забезпечити користувачу досвід близький до користування настільною програмою. Його архітектура побудована таким чином, що при переході на нову сторінку оновлюється лише частина вмісту. Таким чином, немає необхідності повторно завантажувати ті самі елементи. Це дуже зручно для розробників та користувачів. Прикладом технології SPA є реалізований сервіс Gmail компанією Google. Для розробки SPA використовується одина з найпопулярніших мов програмування — JavaScript. На рисунку 2 наведено принцип роботи односторінкових додатків.

Рисунок 2. Принцип роботи односторінкового додатку

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

Недоліки односторінкових додатків

• Погана SEO оптимізація. SPA працює на основі JavaScript і завантажує інформацію за запитом від клієнтської частини. Пошукові системи навряд чи можуть імітувати цю поведінку. Оскільки більшість сторінок просто недоступні для сканування пошуковими роботами.
• Продуктивність та оптимізація. Необхідно пам’ятати про мобільні пристрої та пристрої з низькою продуктивністю, оскільки в односторінкових програмах використання JavaScript який має великий розмір. Також слід пам’ятати про розмір пакету, якщо проект великий, то його слід розбити на окремі компоненти з динамічним завантаженням, щоб покращити швидкість загрузки додатку.

Переваги односторінкових додатків

• Висока швидкість. Оскільки SPA не оновлює всю сторінку, а лише необхідну частину, це значно підвищує швидкість роботи додатку.
• Висока швидкість розробки. Готові бібліотеки та фреймворки забезпечують потужні інструменти та велику кількість готових рішень для розробки веб-програм.
• Мобільні додатки. SPA дозволяє створювати мобільні додатки, оскільки розробник може повторно використати той же код бекенда для веб-додатка та власної мобільної програми.
• SPA може ефективно кешувати будь-які дані. Програма надсилає лише один запит, кешує всі дані, після чого може їх використовувати і навіть працювати у режимі офлайн.

MPA чи SPA?

Кожна архітектура має свої переваги та недоліки і добре підходить для конкретного типу проекту. SPA відрізняється своєю швидкістю і здатністю розробляти мобільні програми на основі готового коду. Але в той же час, SPA має погану SEO оптимізацію під пошукові системи. Таким чином, ця архітектура є відмінним підходом для соціальних мереж, закритих спільнот, де оптимізація пошукових систем не має значення. MPA більше підходить для інтернет-магазинів, бізнес-сайтів, каталогів тощо. Добре оптимізований MPA має високу швидкість, але все одно не дозволяє легко розробляти мобільний додаток. MPA та SPA з правильною архітектурою добре підходять для розробки масштабованих веб-додатків.

На даному етапі розвитку WEB, односторінкові додатки швидко витісняють класичні додатки і є великим внеском у розробку масштабних, швидких, динамічних веб — систем. Однак технології реалізації front end частини web-додатків потребують додаткового дослідження в контексті вибору кращих альтернатив для реалізації систем під конкретні вимоги користувачів чи замовників продукту.