Как да не завинтвате UX в приложение с една страница

Ако имаше клетва на Хипократ за уеб разработчици, това със сигурност ще включва обещание, че всяка промяна на уеб страница ще осигури нетно подобрение на потребителския опит.

И все пак, има много сайтове, които имат пакети с много мегабайтови кодове, нарушават функциите на родния браузър като историята на страниците или карат потребителите да чакат твърде дълго, преди да покажат съдържанието на страницата. Най-често първопричината за тези нарушения е лоша или ненужна реализация на архитектурата на едностраничното приложение (SPA).

В тази статия ще разгледаме как са проектирани СЗЗ и общите клопки, които нарушават потребителското изживяване.

Забележка: Тази статия първоначално е публикувана тук в блога за разработчици на Vue.js на 2017/12/18

Архитектура на приложение на една страница

Повечето уебсайтове са разделени на страници, за да направят информацията, която съдържат, по-лесна за консумация. Традиционната архитектура е да се даде на всяка страница уникален URL адрес. За да преминете към страница, браузърът изпраща GET заявка до URL адреса на страницата. Сървърът ще изпрати обратно страницата и браузърът ще разтовари съществуващата страница и ще зареди новата.

За средната интернет връзка навигационният процес вероятно ще отнеме няколко секунди, през които потребителят трябва да изчака да се зареди новата страница.

С JavaScript и уеб API, като XMLHttpRequest, е възможен различен модел: браузърът може да зареди начална страница, но при навигацията до нови страници няма да е необходимо браузърът да разтовари страницата и да зареди нова. Вместо това съдържанието на страницата може да се зарежда от API асинхронно с AJAX и след това да се запише в текущата страница с JavaScript.

От гледна точка на потребителя, изглежда, че такъв уебсайт има страници като всеки друг, но от техническа гледна точка този сайт наистина има само една страница. Оттук и името, приложението за една страница.

Маршрутизаторите

Рутера библиотека е двигателят на SPA архитектурата. Той ще имитира навигация в браузъра чрез JavaScript и различни уеб API, така че потребителят да получи опит, подобен на този на традиционно приложение за много страници.

Рутерите обикновено включват функционалност за:

  • Работете с навигационните действия от страницата
  • Съпоставете части от приложението с URL адреси
  • Управление на адресната лента
  • Управление на историята на браузъра
  • Управление на поведението на лентата за превъртане

Подобряване на UX

Намерението на архитектурата на едностраничните приложения е да подобри UX и това го прави по следните начини:

  1. СЗЗ могат да осигурят по-продължително изживяване за потребителя, тъй като навигацията вече не изисква опресняване на страницата. Данните за новите страници все още трябва да бъдат извлечени и следователно ще създадат малко прекъсване на потока на потребителя, но това прекъсване е сведено до минимум, тъй като извличането на данни може да се извърши асинхронно и JavaScript може да продължи да се изпълнява.
  2. След като SPA се зареди, навигацията между страниците е по-бърза, тъй като SPAs ще използват повторно елементите на страницата и следователно няма да е необходимо да продължавате да изтегляте едно и също повторно маркиране. Въпреки това, трябва да се добави библиотека на маршрутизатор към вашия пакет JavaScript, така че имайте това предвид, когато правите счетоводство.

Клопките

По ирония на съдбата приложенията за една страница могат да навредят на UX, ако не се избегнат определени клопки:

  1. СПА нарушават естествената навигационна функционалност. например позиция за превъртане, история, бутон за връщане и т.н. След като рутер е отвлек навигацията по страниците, тези функции може да не работят както се очаква. SPA трябва да възстанови функционалността с JavaScript и уеб API, като history.pushState. Повечето добри библиотеки на рутери ще ви помогнат да направите това, но все пак ще се изисква ръчно внедряване.
  2. СЗЗ имат голям начален размер на изтегляне. Тъй като рутерът и многоцелевите елементи на страницата трябва да бъдат изтеглени първо, за да работи приложението, СЗЗ изискват предварително изтегляне, преди да се стартират. Инструменти за изграждане като Webpack могат да помогнат чрез мързеливо зареждане на всеки код, който не е необходим преди първото визуализиране.
  3. СЗЗ ще се нуждаят от персонализирани състояния за зареждане и съобщения за грешки. Браузърите визуално подсказват, че дадена страница се зарежда и уеб сървърът може да върне 404 страница. Резултатът от AJAX заявка, от друга страна, е скрит от потребителя по дизайн. СЗЗ трябва да намерят начин да уведомят потребителите дали приложението е отговорило успешно на действията им или не.
  4. С наивна реализация на SPA архитектурата съдържанието на страницата може да не е включено в първоначалното изтегляне на страницата, което означава, че на потребителя може да се наложи да изчака да стартира JavaScript и да завърши AJAX повикванията. Предаването или предпредаването от страна на сървъра е решение за това, но често изисква сложна настройка.

заключение

Целта на SPA архитектурата е да осигури превъзходно потребителско изживяване, но ако не се полагат подходящи грижи, това може да има обратен ефект!

Ето основните неща, които трябва да имате предвид, ако изберете SPA архитектурата:

  • Конфигурирайте софтуера на вашия рутер, така че функциите за естествена навигация да не са нарушени
  • Използвайте инструменти за изграждане на инструменти като разделяне на кода и мързеливо зареждане, за да се гарантира, че първоначалният пакет от кодове не е твърде голям
  • Реализирайте състояния за зареждане и съобщения за грешки, така че потребителят да знае, че страницата отговаря на техните действия
  • Използвайте предварително изобразяване или визуализация от страна на сървъра, за да гарантирате, че вашият SPA показва съдържание възможно най-рано

Преди всичко, уверете се, че сте планирали допълнителната работа, необходима за изграждане, тестване и поддържане на SPA.

Вземете безплатен въвеждащ курс Vue.js! Научете какво представлява Vue, какви приложения можете да изградите с него, как се сравнява с React & Angular и още в това 30-минутно видео представяне. Запишете се безплатно!