Какво е Single Page Application?

Най-старият начин за създаване на уебсайтове е статичният. Нарича се така, защото уебсайтът (HTML файловете му) “живее“ на сървър и когато някой клиент се опита да го посети, трябва да „почука“ на вратата на сървъра, който да извика уебсайта. Този пример е крайно опростен и не описва редица други процеси, но дава добра представа за основния принцип на комуникация между клиент и сървър.

Следващият начин е динамичният. При него, сървърът е този, който „създава“ съдържанието. Тук в употреба влизат програмните езици, с помощта на които сървърът е научен да отскочи до няколко бази данни и да събере информацията, която клиентът търси. След което генерира проверената и обновена информация в HTML код и я предава на клиента. Това, разбира се, не се случва от само себе си, а е предварително написано, зададен е шаблон и тн. Динамичният начин е значително по-удобен при страници, които претърпяват чести промени, като онлайн магазините.

Третият и най-модерен начин е създаването на едностранично приложение (single page application). Той е вдъхновен от мобилните приложения и там нещата се случват моментално, без да се налага да чакаш зареждането на нови страници. В този сценарий сайтът отново „живее“ на сървъра, но този път е еволюирал и със себе си носи JavaScript. Когато клиентът „почука“ на вратата на сървъра, уебсайтът излиза, но с раница, пълна с JavaScript. Всеки път, когато клиентът поиска да види нещо, убесайтът просто бърка в раницата си и го показва, без да се налага да се връща обратно до сървъра и да рови по шкафовете. Казано на нормален език, сайтът се генерира в браузъра на клиента, защото JavaScript работи там. Това значително намалява времето за заявки и отговори до сървъра и от него.

Примери

Single page application (SPA) уебсайтовете са изключително популярни. За да добиеш по-ясна представа за това къде се използват и колко често се сблъскваш с тях, може да разгледаш тези уебсайтове и (ако ти е любопитно) кода им:

Gmail – когато кликнем на някой от имейлите си, страницата не се променя, но това което виждаме вече е различно.

Twitter – социалната мрежа също е SPA, като изключим момента, в който кликнеш на определен вид URL, който води до изображение.

Facebook – тук повечето неща са създадени на този принцип, но понеже сайтът включва много разнообразни функционалности, не всичко е изцяло едностранично. Въпреки това, последните актуализации карат хората да вярват, че мрежата върви изцяло към SPA.

Netlfix – тук SPA функционалността ти дава възможност да видиш трейлъра на някой филм, след което да се върнеш обратно там, където си бил, без да се налага да преминаваш през дългия списък със заглавия отново и отново, докато не разбереш, че вече е станало прекалено късно, за да гледаш цял филм.

Вероятно вече разбра как точно изглежда един single page application уебсайт и можеш сам да идентифицираш поне още 3 такива. В предстоящия ни курс ReactJs ще научиш още повече за този тип страници и как се правят с помощта на една от най-известните софтуерни рамки в света - React. Курсът е подходящ за всички, които имат абстрактно и алгоритмично мислене, могат да боравят с по-сложни функции и са усвоили концепциите на JavaScript. Също така е строго препоръчително участващите в курса да имат умения за работа с REST API-та, асинхронно програмиране, DOM и HTML/CSS. Надгради знанията си и се запиши сега, стартираме на 1 март!