Роман Липски

Светът на софтуера сега се развива с огромна скорост. Само преди няколко години настолните компютри и лаптопите бяха основните устройства за уеб разработка. Днес нещата съвсем не стоят така.

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

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

Ако обмисляте да разработите уеб приложение за вашата компания, вероятно вече знаете, че има два основни подхода за разработка: можете да създавате както едностранични приложения (SPA), така и многостранични приложения (MPA).

Както всичко в нашия живот, и двата варианта на дизайн имат своите предимства и недостатъци. Преди да започнете да реализирате идеите си, трябва да вземете няколко важни решения.

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

Следователно най-важните въпроси на първия етап са какъв вид съдържание искате да популяризирате на вашата целева аудитория и какво е най-важно за тях да си сътрудничат с вас.

Както споменахме по-горе, както SPA, така и MPA имат своите плюсове и минуси. Нека разберем разликата между двата типа приложения и се опитаме да намерим правилното решение за уеб разработка за вашата компания.

За целта ще помолим директора на уеб отдела на BLAKIT Виталий Озерски да даде своите експертни коментари по темата. Надяваме се, че заедно можем да улесним този избор за вас.

Приложения с една страница

Приложенията с една страница се изпълняват в браузъра и не изискват презареждане на страници или зареждане на допълнителни страници по време на употреба. Такива приложения се използват ежедневно от милиони потребители, без дори да го забележат. Най-популярните примери: GitHub, Gmail, Google Maps и дори Facebook.

Виталий Озерски: приложенията с една страница, като правило, са възможно най-интерактивни, дотолкова, че потребителят получава усещането, че работи с настолно приложение: отговорът на приложението на действията на потребителя е незабавен в повечето случаи. По този начин SPA се отличават благоприятно от многостраничните сайтове, където с всяко действие потребителят трябва да изчака зареждането на нова страница.

Приложенията с една страница са проектирани специално, за да осигурят на потребителите страхотен UX, който наподобява „естествена“ среда на браузър без презареждане на страници и следователно без забавяне при изпълнение на действия.

Типично приложение с една страница изглежда като уеб страница, която зарежда и актуализира съдържание без презареждане с помощта на JavaScript. SPA изисква оформлението и съдържанието на страницата и след това създава окончателния изглед на страница директно в браузъра. Този ефект може да бъде постигнат благодарение на усъвършенствани JavaScript рамки като AngularJS, Ember.js, Meteor.js, Knockout.js.

В: В допълнение към основните популярни рамки, разработчиците на BLAKIT също могат да разработват приложения с една страница, използвайки ReactJS.

Основното предимство на React е неговият нисък праг за влизане. React е доста лесен за използване; Почти всеки разработчик, запознат с HTML, може да създава React приложения.

Друго предимство е възможността за писане на приложения за уеб и мобилни платформи с помощта на един технологичен стек.

Ние използваме React заедно с библиотеката Redux, което ни позволява да очертаем правилната архитектура и да създадем сложни уеб приложения, които са лесни за мащабиране.

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

Предимства на едностраничните приложения:

• SPA се характеризират с отлична производителност, тъй като повечето от ресурсите, които използват (HTML + CSS + скриптове), се зареждат само веднъж по време на сесия на използване на приложението. След извършване на действия на страницата се променят само данните.
• Разработката на уеб приложения обикновено е по-бърза и по-ефективна. Няма нужда да пишете отделен код за изобразяване на страницата от страната на сървъра. Освен това е много по-лесно да започнете да разработвате такива приложения, защото можете да започнете да пишете код от file://URI, без да използвате сървър.
• SPA са оптимизирани за отстраняване на грешки в Chrome, което позволява на разработчиците да проследяват мрежовата активност и да изследват елементите на страниците и данните, свързани с тях.
• Ако вече имате SPA, ще можете да създадете мобилно приложение със същия бекенд.
• SPA са по-ефективни при кеширане на данни на локални медии. Приложението изпраща една заявка, събира всички необходими данни и от този момент нататък може да работи дори офлайн.

Недостатъци на едностраничните приложения:

• SEO оптимизацията за едностранични приложения по очевидни причини не е много лесна. Съдържанието на приложението се зарежда с помощта на AJAX (асинхронен JavaScript и XML), метод за обмен на данни и актуализиране на приложението без презареждане на страницата, докато SEO оптимизацията се основава на постоянството на съдържанието на всяка отделна страница.Популяризирането на уебсайта ви в търсачките обаче не е невъзможно. Много промени в SEO могат да бъдат направени от страна на сървъра и компании като Google продължават да измислят нови решения, за да улеснят живота както на собствениците на спа центрове, така и на техните потребители.
• Те отнемат доста дълго време за зареждане, тъй като тежките рамки от страна на клиента трябва първо да се заредят в браузъра.
• SPA изискват JavaScript да е активен в браузърите на потребителите. Ако някой от вашите клиенти деактивира ръчно JavaScript, той няма да може да се възползва напълно от вашето приложение.Дори ако кеширате и изобразявате страниците си от страната на сървъра (което вече е възможно), все още рискувате да не доставите всички функции на едностраничното си приложение в правилната форма на потребители, които не използват JS.
• В сравнение с традиционните приложения, SPA са малко по-малко сигурни. Благодарение на междусайтовия скрипт (XSS), атакуващите могат да инжектират допълнителни скриптове от страна на клиента.
• Някои течове на памет на JavaScript могат да причинят влошаване на производителността дори на мощни системи

Също така е полезно да знаете, че всички проблеми, свързани с използването на едностранични приложения, постепенно се решават, тъй като много компании, включително технологични корпорации, насърчават тази форма на връзка с клиентите в Интернет.

В: SPA са подходящи за всеки бизнес, който трябва да автоматизира своите процеси. Но за корпоративни уебсайтове и онлайн директории, например, е по-добре да използвате по-традиционни уебсайтове.

Многостранични приложения

Многостраничните приложения работят по по-традиционен начин, така да се каже. Всяка значителна промяна на данни или качване на информация обратно на сървъра води до изобразяване на нова страница в браузъра. Многостраничните приложения очевидно са по-тежки от тези с една страница и обикновено имат за цел да показват повече съдържание.

Сложността и разходите за разработване на MPA са по-високи и също така изискват многопластов дизайн на потребителския интерфейс. За щастие, това вече не е толкова голям проблем, тъй като AJAX ви позволява да актуализирате само определени части от приложението, вместо да прехвърляте куп данни между сървъри и браузъри.

Предимства на многостраничните приложения:

• Това е най-подходящият вариант за потребители, които искат по-ясен интерфейс и позната навигация в приложението. MPA обикновено се създават с многостепенни менюта и други инструменти за навигация.
• Значително опростено SEO. Можете да оптимизирате всяка отделна страница на приложението за ключовите думи, от които се нуждаете.

Недостатъци на многостраничните приложения:

• Frontend и backend разработката в този случай са много тясно комбинирани.
• Разработката на MPA е доста сложна, тъй като изисква използването на рамки както от страна на клиента, така и от страна на сървъра. Времето за разработка и разходите, съответно, не са толкова приятни за много компании.

SPA или MPA?

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

Ако търсите максимална функционалност в кондензирано уеб пространство, уеб приложение с една страница е правилният избор. И ако SPA функционалността ви устройва, но дори не можете да си представите как да поберете цялото си съдържание на една страница, трябва да помислите за хибриден сайт.

Все още не сме споменали тази форма на уеб разработка в статията. Хибридното приложение има за цел да вземе най-доброто от двата свята, като минимизира недостатъците.

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

Уведомете ни, ако искате да научите повече за хибридните приложения, ще напишем отделна статия за тях.

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

Според нашите данни много видове бизнеси вече преминават към този модел в своите стратегии за онлайн промоция. Въпреки това, някои видове проекти просто не могат да бъдат изпълнени като SPA: те просто имат твърде много съдържание. Следователно, поне в обозримо бъдеще, моделът MPA все още има място.

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

Приложение за една страницаили SPA - едностранично приложение - уебсайт или уеб приложение, базирано на един HTML документ. Обикновено в такова приложение JavaScript рамки („рамки“ за разработка) като AngularJS, BackboneJS, Ember.js и др. са свързани с HTML страница. Тези рамки ви позволяват да показвате различно съдържание на страницата в зависимост от потребителя действия и/или състоянието на URL адреса на страницата. Промени в състоянието могат да настъпят, когато се кликне върху връзки, hrefкойто се състои от URL фрагмент, започващ със знака „#“.. Понякога с няколко знака "#!", В случай на популяризиране на този сайт в търсачките (в Yandex).

Съдържанието на такъв сайт се зарежда от сървъра чрез AJAX – асинхронен JavaScript и XML. За да реализирате работа чрез AJAX, трябва също да внедрите част от приложението от страната на сървъра. Често се използват скриптови езици. За по-лесна работа и мащабиране на системата, изберете ПОЧИВКА(архитектура на взаимодействие между частите на приложението).

Едностранично приложение и JavaScript рамки

Различни рамки се използват за изграждане на едностранични приложения:

• backbone.js (руски) - лека библиотека, написана от CoffeeScript и използвана за разработване на SPA страници с поддръжка на REST архитектура
• ember.js (руски) - също безплатна JavaScript рамка, базирана на модули Model-View-Controller (модел за разработка - MVC)
• angular.js (руски) - рамка, MVC. Един от авторите продължава да работи върху рамката, докато работи в Google.

Уеб сайт с една страница html

Може да се изгради с помощта на селектори по идентификатор и целеви селектор :цел, CSS свойства за контрол на видимостта на съдържанието (показване, видимост и поле). Шаблоните за едностранични уебсайтове включват цялото необходимо съдържание, за да работи посетителят. В този най-прост случай няма нужда да свързвате JS рамки.

Псевдокласът:цел ви позволява да избирате HTML елементи на страницата, чийто id атрибут съвпада с хеш стойността от адресната лента. Например, ако URI присъства в адресната лента: http://site/test-po-html#result, тогава елемент с идентификатор #result ще бъде намерен на HTML страницата и към него ще бъдат приложени CSS стилове .

Рамката на такава страница може да изглежда така (внимание! За по-лесно се използва еднаква височина за всички страници. На практика обемът на съдържанието ще бъде различен)

Контейнер (шрифт: 1em sans-serif; ширина:600px; min-height:500px; margin:auto; border:1px solid #000; position: relative; ) h1,h2,h3,h4,h5,h6 (марж: 0 ;).page( width:600px; height:430px; position: absolute; top:60px; display: none; background-color: #fff; ) div:first-of-type( display:block; z-index: 1 ; ) div:target( display:block; z-index: 2; )

Вижте пример за работа. Със страници, използващи JS рамки, работата се извършва по различен начин.

, , Коментари: 0

Актуализацията на Web Tools 2012.2 за ASP.NET MVC 4 проекти добави нов шаблон - Приложение за една страница (SPA). Този шаблон е предназначен за бързо изграждане на интерактивни клиентски уеб приложения.

„Приложение с една страница“ (SPA) е основният термин за уеб приложения, които зареждат една страница и след това я актуализират динамично, без да зареждат други страници. Основната страница се зарежда и след това приложението комуникира със сървъра чрез AJAX заявки.

AJAX не е новост, но днес има Javascript библиотеки, които улесняват разработването и поддържането на големи, сложни приложения с една страница. А HTML5 и CSS3 помагат за създаването на красив потребителски интерфейс.

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

Създайте ново едностранично приложение

За да създадете приложение, ще ви трябва:

• Visual Studio 2012 или Visual Studio Express 2012 за уеб
• Актуализация на ASP.NET Web Tools 2012.2, можете да я инсталирате от тук.

В главното меню на приложението Visual Studio отворете Файл->Нов -> Проект. От предложените шаблони за проекти ще изберем Уеб приложение ASP.NET MVC 4.

Да стартираме приложението. Ще се отвори форма за вход.

Да се ​​регистрираме.

След като влезете в приложението, се създава списък със задачи по подразбиране с два елемента и се появява бутон „Добавяне на списък със задачи“ за добавяне на нов списък.

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

Диаграмата показва основните блокове на приложението.

От страната на сървъра ASP.NET MVC генерира HTML и също така управлява удостоверяването на формуляри. ASP.NET Web API обработва всички заявки за списъци със задачи и елементи от списък със задачи. Това са получаване, създаване, актуализиране и изтриване. Клиентът обменя данни с Web API във формат JSON.

Entity Framework е слой ORM (object relational mapping), който свързва обектно-ориентираната архитектура на приложението с базата данни. Използваната база данни е локална (LocalDb), но можете също да свържете своя собствена във файла web.config. Обикновено за локална разработка се използва локална база данни и след това с помощта на миграция на EF код, тя се прехвърля към SQL сървър.

21 май , 2017

Сайтовете с една страница или приложенията с една страница (SPA) са готини. Основното им предимство е, че SPA е по-бърз и по-отзивчив към действията на потребителя. Това се постига чрез прехвърляне на работната логика към клиентската страна и активно взаимодействие със сървъра чрез ajax.

Има мнение, че SPA са мощни приложения в Angular или React, преместващи тонове данни в някакъв контролен панел или в сложна услуга. И като цяло това е вярно. Но съм убеден, че има смисъл да се пишат едностранични приложения не само за такива услуги, но и за обикновени корпоративни сайтове за визитки.

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

И така, защо е тази глезотия?

Най-важното е скоростта на работа.

Разбира се, когато разработваме уеб сайт с визитка от една страница, ще срещнем някои проблеми:

• 1. Как да подходя, откъде да започна?
• 2. Как да се справя с хронологията на браузъра, с History API?
• 3. Коя рамка или библиотека трябва да изучавам: Angular, React? И не познаваме нито един...
• 4. Как да принудите търсачките да индексират сайт от една страница?

Отговори на тези въпроси:

• 1. Нека да го разгледаме в същата статия, използвайки примера на прост уебсайт
• 2. Също така ще ви кажа по-долу, това са дузина редове код
• 3. Няма, ще се справим с родния javascript и jQuery като помощник
• 4. Следващата статия от тази серия ще бъде за търсачките.

Защо без angular-react?
Разбира се, това са много необходими теми, препоръчвам да ги изучавате.

Но за нашия пример те няма да са необходими; трябва само да имаме минимални познания по javascript.

Едностраничните страници са тема на повече от една статия.

Това ще бъде цял проект, поредица от статии от поне три броя.

И ще обхваща различни теми.

Но нека поясня. Ще изградим прост админ панел с взаимодействие със сървъра чрез REST API (поне в самото начало).

В първите уроци нашият уебсайт от една страница ще бъде обикновена визитна картичка от дузина страници.

Но сайтът ще работи без презареждане на страници и ще зарадва нашите потребители със скоростта и отзивчивостта на интерфейса.

Идеята на сайта, как работи

Да вземем най-обикновения корпоративен уебсайт: начална страница, раздел „За проекта“, контакти и блог.

Разделът на блога ще има няколко връзки към вътрешни страници.

• На всяка страница ще добавим малко съдържание и ще вмъкнем някои кръстосани препратки.
• Всяка страница в даден сайт обикновено има повтарящо се съдържание.
• За нас това ще бъде заглавка и меню.
• И има основното съдържание на страницата, което се променя.
• Ще направим следното: ще заредим страницата само веднъж и след това, като кликнем върху връзките, ще заредим динамично необходимото съдържание с помощта на Ajax.
• В същото време ще променим заглавието на страницата в раздела на браузъра, URL адреса в адресната лента и ще запомним хронологията в браузъра, така че навигацията през бутоните Назад/Напред на браузъра да работи.
• Съдържанието за всяка отделна страница ще се съхранява в отделен html файл.
• — прост - Project Simple
• — контакти - Контакти

Съответно папката pages ще съдържа 9 html файла.

Можете да намерите всички маркировки за съдържанието в .

Като пример ще дам съдържанието само на един файл - simple.html

Проектът Simple израсна от блог сайт.

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

Както можете да видите, тук няма глава, тяло, html, скрипт - само маркиране, свързано с конкретна страница.

index.php и .htaccess

Защо не index.html?
Факт е, че на нашия сайт ще има една единствена физическа страница - индекс.

Но ние също се интересуваме от такива адреси като site.ru/about, site.ru/contacts и т.н.

Но в основата на нашия сайт няма страници за информация и контакти.

Просто обърнете внимание на data-menu и data-link="ajax" атрибутите на връзките.

Те са въведени, за да се разграничат навигационните връзки от обикновените външни връзки, които също ще бъдат на нашия уебсайт.

data-link="ajax" означава, че когато щракнете върху тази връзка, ние ще прихванем стандартното поведение на браузъра и ще поемем работата с връзката в свои ръце.

А менюто с данни означава кой елемент от главното меню ще бъде маркиран, когато щракнете върху тази връзка.

Тук менюто с данни се дублира с атрибута href, но са възможни и други опции.

Например, когато отидем в предния раздел на блога, ще посочим data-menu="blog".

2 примера за яснота:

simple.ru Начална страница simple.ru

main.css стилове

Нека бързо превъртите и копирате и поставите най-скучната част - файла css/main.css.

Тяло ( позиция: относителна; семейство шрифтове: "Helvetica Neue Light", "Helvetica Neue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; размер на шрифта: 1em; тегло на шрифта: 400; цвят: #333 ; ) a, a: visited ( цвят: steelblue; ) a: hover ( цвят: тъмносин; ) .wrapper ( ширина: 80%; поле: 0 10%; ) .spa-title (размер на шрифта: 1.2em; текст - подравняване: център;) меню ( марж-отгоре: 2em; подплата: 0; подравняване на текст: център; ) меню a (дисплей: вграден блок; марж-дясно: 10px; подложка: 5px 15px; текст-декорация: няма ; ) menu a: hover, menu a.active ( background-color: steelblue; colour: white; ) .page-title (text-align: center; ) ul li (list-style-type: circle; )

Сега идва най-интересната част - javascript кодът, който ще превърне нашия набор от отделни файлове в уебсайт от една страница.

javascript Общ код и конфигурации

Нека зададем рамката на js кода.

Var config = ( siteTitle: "Webdevkin SPA", mainPage: "main", страници: ( main: ( title: "Main", menu: "main" ), about: ( title: "About the project", menu: " относно " ), блог: ( заглавие: "Webdevkin-a Blog", меню: "блог"), просто: ( заглавие: "Прост проект", меню: "просто"), контакти: ( заглавие: "Контакти", меню : "контакти" ), магазин: ( заглавие: "Онлайн магазини", меню: "блог"), frontend: ( заглавие: "Статии за frontend", меню: "blog"), mysql: ( заглавие: "Mysql база данни ", меню: "блог" ), джаджи: ( заглавие: "Вградени javascipt джаджи", меню: "блог" ) ) );

siteTitle: "Webdevkin SPA" - заглавие на сайта, използвано на няколко места.
mainPage: "main" - посочете началната страница на сайта, тази, която ще се отвори, когато въведете site.ru.

Сега това е основната страница, но лесно може да ви хрумне да поставите началната страница, например „За проекта“ - около.

Най-важното нещо в цялата конфигурация е обектът pages.

Всяко поле за обект описва една страница от сайта.

Сега се нуждаем само от 2 елемента: заглавието на страницата и менюто, към което принадлежи тази страница.

Обектните ключове, тоест страниците, съответстват на имената на файловете в pages/*.html и атрибутите href във вътрешните връзки.

И накрая, ще напишем кода, за който започнахме всичко.

Може да се изненадате, но кодът, който директно изпълнява работата по поддръжката на сайта, е много по-малко от подготовката за написването му.
Зареждане на съдържание чрез ajax. API за история
Да вървим по ред. Нека поработим върху функцията init, която съдържа обвързването на необходимите събития _bindHandlers
// Функция за свързване на събития _bindHandlers() ( ui.$body.on("click", "a", _navigate); window.onpopstate = _popState; )

В първия ред улавяме кликвания върху вътрешни връзки a и ги изпращаме на функцията _navigate.

// Щракнете върху функцията за връзка _navigate(e) ( e.stopPropagation(); e.preventDefault(); var page = $(e.target).attr("href"); _loadPage(page); history.pushState( (страница: страница), "", страница); // Функция на бутоните Назад/Напред _popState(e) ( var page = (e.state && e.state.page) || config.mainPage; _loadPage(page); )

Когато се случи изрично щракване върху връзката _navigate, ние спираме бълбукането на събитието за щракване и отменяме поведението по подразбиране на браузъра (следвайки връзката).

След това идентифицираме страницата, която искаме да заредим (разбираема от атрибута href) и извикваме новата функция _loadPage.

Тя ще свърши цялата основна работа по зареждане на съдържание, промяна на заглавието и т.н.

И накрая, използвайки history.pushState, добавяме нов запис в историята на браузъра. Да, ние сами изрично създаваме хронологията на браузъра.
Тогава, когато преценим, че е необходимо. И запазваме данните за заредената страница в обект (страница: страница).

Тези данни ще ни бъдат полезни в следващата функция _popState.

В _popState идеята е подобна: търсим желаната страница и стартираме същата _loadPage.

Той изглежда съвсем обикновен.

Първо формираме url-то, тоест пътя, откъдето ще изтеглим html-а за страницата.
След това изваждаме заглавието на страницата и елемента от менюто, който трябва да бъде избран от конфигурацията.
След това получаваме html съдържанието на страницата чрез баналния jQuery.get и извършваме редица прости действия.
а) Актуализирайте заглавието на страницата

b) В 2 реда изберете желания елемент от менюто

в) Променете заглавието на самата страница, в html кода

d) Заредете действителното html съдържание на страницата, получено от URL адреса

Почти всичко! Остава малък момент.

Ако сега отидем например на страницата site.ru/blog и я актуализираме, тогава няма да се зареди блогът, а празна страница.

Тъй като по време на инициализация не извикваме _loadPage.

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

// Инициализиране на функцията на приложението init() ( var page = document.location.pathname.substr(1) || config.mainPage; _loadPage(page); _bindHandlers(); )

Това вече е сигурно!

Нека обобщим и припомним връзките

И така, написахме прост, но напълно функционален уебсайт с една страница и също така научихме малко за това как работи API на History. Честно казано, чувствам се като режисьор на лош филм, в който 80% от времето води до някаква грандиозна развръзка, а накрая всичко се оказва много по-лесно от очакваното.От една страна, почти целият код е просто подготовка, окабеляване, писане на конфигурации и други скучни неща. Но наистина полезният код, който върши действителната работа, отнема 2 дузини реда.). Уеб приложение е уебсайт, чиято работа е прехвърлена възможно най-пълно към клиентската страна. Такъв уебсайт „комуникира“ със сървъра само с чисти данни, без да зарежда html съдържание. Обработват се всички бутони, форми и др javascript'om, всички списъци, таблици, блокове и други елементи на страницата се изобразяват с помощта на JavaScript, когато се променят. Тоест сървърът изпраща само данни, обикновено в json формат, а клиентската страна самостоятелно генерира страницата на сайта, всички шаблони, списъци, връзки, таблици и други актуализирани елементи.

Основни правила за едностранично приложение

1. Всички обекти на уеб приложение са базирани на модели и обекти (работата с DOM елементи на страницата е капсулирана в обекти).
2. HTML шаблоните се съхраняват в скриптове (доколкото е възможно).
3. Всякакви промени в страницата.
4. Директното зареждане на който и да е URL трябва да показва съответната страница с данни.
5. Историяназад (бутон за връщане назад в браузъра) трябва да се обработи правилно и да върне страницата в предишното състояние.
6. Кеширане на модели на данни от страна на клиента.

Горните точки, от моя гледна точка, са основните. Разбира се, за да се оптимизира работата или да се избегне усложняването на системата, ще трябва да се пожертва нещо.

Последователност на работа с уеб приложението

1. Индексната страница е заредена (шаблонът е напълно показан и попълнен с данни).
   1. Всички необходими обекти са инициализирани и всички слушатели на събития са инсталирани.
2. Потребителят щраква върху връзка/бутон/всеки интерактивен елемент.
3. Приложението прихваща събитието щракване.
4. Ако щракването върху обект предполага промяна в състоянието на уеб приложението ->
5. Ние формираме нов URI за новото състояние на страницата.
6. Променете текущия URI с помощта на javascript (промяна на URI без презареждане на страницата).
7. Събитие е прихванато URI промени.
8. Анализираме новия си адрес и получаваме всички ключ-стойности.
9. Нека проверим какво се е променило в ключовете.
10. Изпращаме заявка до сървъра за получаване на нови данни.
11. Приемаме отговора и извикваме функцията за обратно извикване за успешно зареждане на данни.
12. Преначертайте необходимите секции на страницата.

При тази последователност възниква въпрос относно точки 5-10 (и искане на данни), защо да не поискате веднага данни при промяна на адреса? Отговорът е прост: създаваме една входна точка за обработка на промяната на URI и една входна точка за обработка на новия адрес и данни за заявка. Ако правите това всеки път с дузина метода, това ще бъде лош код, тъй като ще има много копиране и поставяне. По горния начин ще има две входни точки и, като следствие, точки за разширяване за тези секции уеб приложения.

Внедряване на едностранично приложение

И накрая, като използвате последователността / щракнете върху активния елемент -> променете uri -> обработете новия uri -> заявете данни -> изобразете нови елементи на страница / можете да създадете напълно функционални приложения на една страница. В работата си използвах и разпределих почти всичко в класове, всеки от които контролираше собствената си област.

Основният е създаден javascriptфайл за инициализация, който стартира приложението. Основният клас също се създава (напр. единично приложение), който управлява състоянието на приложението, инициализира необходимите събития, работи с исторически обект, обработва и променя URL адреса и други функции. URL адресът се генерира с поддръжка на SEO (/category/tech/page/2) с помощта на концепцията /key/value/. В моето приложение също използвах, което ми позволи да намаля броя на грешките, да минимизирам сближаването на класовете и да улесня работата с функциите за обратно извикване, върху които изградих Но наистина полезният код, който върши действителната работа, отнема 2 дузини реда..