Я викладаю розробку на JavaScript уже декілька років, постійно провожу консультації та іноді співбесіди, а також працюю девелопером в компанії. І серед цього всього я помітив одну цікаву штуку: люди(я говорю здебільшого про студентів і кандидатів) не розуміють що таке вебсайт і вебзастосунок і яка між ними різниця. А різниця є, і вона суттєво змінює підхід до розробки цього всього.
Тож давайте розбиратися з цим!
Якщо ви подумали, що це два ідентичних поняття, то я поясню різницю, але спочатку ми розберемося з визначенням кожної з частин:
Вебсайт
Це сторінка або група сторінок, які повʼязані між собою, розміщені на одному сервері і мають спільне доменне імʼя. Переважно це статичні (але можуть бути і динамічні) сторінки з інформаційним вмістом і доволі обмеженою взаємодією з користувачем. Вебсайти містять текст, зображення, відео та інші мультимедійні елементи, які користувач може переглядати за допомогою браузера. Для розробки вебсайтів використовують такі технології, як HTML, CSS, JavaScript. Як приклади таких сайтів можуть бути - вікіпедія, новинні сайти, корпоративні сайти, блоги.
Вебзастосунки
Це програмне забезпечення, яке виконується на вебсервері у веббраузері (який в цій історії є клієнтом). Вебдодатки мають складніший функціонал, який дозволяє користувачу взаємодіяти з даними, наприклад шляхом додавання, редагування та видалення їх. Часто містять в собі всі ті самі види медіа-контенту, що і вебсайти. Для розробки вебдодатків використовують HTML, CSS, JavaScript, і додатково бібліотеки або фреймворки, наприклад React, Angular, Vue, а ще backend технології та системи управління базами даних, що дозволяє створювати не тільки динамічне, а в першу чергу інтерактивне середовище для користувача. Саме це являється важливою частиною вебзастосунків. Як приклади - інтернет-магазини (з особистим кабінетом, сторінкою підтримки і вподобаних товарів тощо) і самі банальні гугл документи, де ви можете взаємодіяти з документом всебічно і редагувати/змінювати його як заманеться.
Відмінності вебсайтів та вебзастосунків
| Вебсайти | Вебзастосунки |
| Надає інформацію, не надаючи можливості користувачу впливати на неї. | Створюється для того, щоб взаємодіяти з користувачем багатьма способами. |
| Майже ніколи не потребує авторизації для користування. | Майже завжди потребує авторизацію для можливості користуватися додатком. |
| Зазвичай статичний і містить в собі текстову інформацію. | Багатофункціональний і закриває собою багато потреб і проблем користувача. |
| Користувач не може проводити маніпуляції з даними. | Користувач може проводити маніпуляції з даними, але обмежений в цьому. |
| Засновані на простих заходах безпеки, таких як HTTPS тощо. | Використовуються складніші заходи безпеки, так як мають доступ до персональних даних користувача. |
Це дуже коротке і наглядне пояснення різниці між цими двома поняттями. Рушаємо далі.
Рекомендуємо курс по темі
Доступність і користувацький досвід
До вебсайтів легко отримати доступ, тому що їх не потрібно завантажуватися і авторизуватися для перегляду. Вони мають бути адаптовані під будь-які пристрої, екрани і режими перегляду. Сайти мають порівняно низький рівень інтерактивності і майже завжди вся взаємодія з користувачем - це перегляд ним інформації,користування внутрішнім пошуком, заповнення форм і натиснути на кнопку.
Вміст вебсайтів можна оптимізувати для пошукових систем, що дозволяє охопити більшу авдиторію.
Вебзастосунок потрібно спочатку встановити, щоб мати змогу користуватися ним, це трохи ускладнює доступність. В той же час, вебзастосунку набагато більш кастомізовані і персоналізовані, чого тільки варті push-сповіщення, де додаток використовує звернення до вас особисто. Вебзастосунку можуть оновлювати інтерфейс без перезавантаження сторінки, що покращує користувацький досвід.
А виглядають вони однаково?
Дизайн сайтів і додатків відрізняється і навіть пересічний користувач зможе відрізнити їх.
Вебсайти майже всі виглядають просто і доступно. На них зручно читати, переглядати матеріали і не загубити місце, де щойно зупинилися, відволікшись на каву. Все робиться для легкості сприйняття всього контенту на сайті. Зачасту сайти виглядають мінімалістично і послідовно, мають інтуїтивну навігацію між сторінками, якщо їх більше, ніж одна.
Тобто якщо ми говоримо про новини - це має бути чітка структура сайту із заголовками, які добре видно, а останні новини будуть прямо перед вами як тільки ви зайдете на сайт.
Вебзастосунки орієнтуються на зручність використання, інтуїтивний інтерфейс і максимально інтенсивний користувацький досвід. Дуже часто застосунки мають згрупований, яскравий дизайн з великою кількістю динамічних елементів та анімацій, навіть непомітних.
В додатках присутня складна навігація, така як сайд-бари з категоріями і фільтрами. Також вони динамічно обробляють ваші дані в режимі реального часу, мають складніші вимоги до адаптивності на різних пристроях.
Для прикладу візьмемо інтернет-магазин: це прості форми, яскраві контрастні кольори, категорії і фільтрація товарів, а також плашки, які вказують потенційному покупцеві на те, що цей товар зараз за зниженою ціною.
Швидкість завантаження
Швидкість завантаження вебсайту залежить від обсягу інформації, яка є на ньому, але зазвичай це дуже швидко при нормальному стабільному інтернеті.
Сайт має працювати так, щоб швидко відображати інформацію на екрані користувача. Контент на ньому має бути оптимізований для пошукових систем, що знову ж таки, впливає на доступність.
Вебзастосунки мають швидке завантаження початкової сторінки, а все інше завантажується в залежності від необхідності. Але саме завантаження інтерактивних інтерфейсів та різних динамічних елементів є складнішим, тому може бути трохи повільнішим, ніж сайти.
Підтримка
Вебсайти, як ви вже могли здогадатися, оновлюють не так часто, тож і особливої підтримки як такої вони зазвичай не потребують. Але якщо зміни все ж таки потрібні, то для цього достатньо просто змінити декілька рядків в html коді.
Вебзастосунки оновлюються частіше з метою додавання нових функцій і усунення проблем в попередніх або теперішніх версіях. Підтримка більш складна, так як для цього потрібно зробити ревью всього коду, а вже потім вписувати те, що потрібно змінити. І робити це потрібно обережно, щоб не “пошкодити” логіку :)
Різновиди
Різновиди, як такі, ми маємо в вебзастосунках, адже це більш складна структура з технічної точки зору. Це можуть бути:
- SPA (Single Page Application) - односторінковий інтерактивний додаток, який дозволяє користувачу, перемикаючись між вкладками, залишатися на одній сторінці. Це працює завдяки тому, що при перемиканні підвантажуються тільки потрібні частини сторінки (ті, які мають змінитися), що підвищує швидкість завантаження і відповідно - рівень експірієнсу користувача.
- MPA (Multi Page Application) - традиційні багатосторінкові вебзастосунки, такі як великі інтернет-магазини. При перемиканні між вкладками завантажуються нові сторінки, що зазвичай знижує швидкість завантаження.
- PWA (Progressive Web Application) - прогресивний вебзастосунок, який є дуже близьким до компʼтерних та мобільних додатків за багатьма параметрами, такими як користувацький досвід, швидкість завантаження, інтерактивність, можливості і вбудовані функції. Їх особливість в тому, що у них є проксі-прошарок, що робить браузер користувача віртуальною машиною і “розділяє” програму на два умовних фронтенди: один - з інтерфейсом, а другий - з логікою. Це все робиться завдяки Service Workerʼам, які пишуться зазвичай на чистому JavaScript.
Що ж обрати?
Якщо ви вже визначилися з цілями вашого проекту, то вважайте, зробили вже половину справи, бо далі залишилася - технічна (І, маю сказати, найцікавіша :)).
Вище ми вже зрозуміли що від цілі залежить що ви оберете - донести інформацію, або взаємодіяти з користувачем на постійній основі, обмінюючись даними з ним.
Тож якщо вам потрібно щось складне, інтерактивне з можливістю обробки даних, то це - однозначно вебзастосунок. Про донесення інформації, зрозуміло - сайт.
Також впливати на вибір може бізнес-модель, а саме: це продажі, контент, або складні бізнес-процеси (вхідний продукт -> зміни складу, ціни і т.д. -> вихідний продукт).
Висновок
З різницею та перевагами ми розібралися, по недолікам - тільки складність в розробці і підтримці, або якщо ви замість розробки сайту обрали розробку вебзастосунку, тобто ускладнили собі життя на рівному місці ;)
Моя задача була в тому, щоб максимально просто і доступно розповісти вам в чому різниця і як правильно обрати в залежності від потреб. Сподіваюся, у мене вийшло, а ви що скажете?