Single Page Application: как работает сайт-приложение

Эта ста­тья для тех, кому инте­рес­ны тех­но­ло­гии веба и кто хочет рабо­тать в серьёз­ной веб-разработке. 

Обыч­ный сайт состо­ит из мно­же­ства HTML-страниц. Вы кли­ка­е­те по ссыл­кам, бра­у­зер загру­жа­ет новые стра­ни­цы по этим ссыл­кам, у вас появ­ля­ет­ся ощу­ще­ние дви­же­ния от одной стра­ни­цы к дру­гой. Стра­ни­цы могут лежать как фай­лы на каком-то сер­ве­ре или гене­ри­ро­вать­ся под ваш запрос какой-то сер­вер­ной про­грам­мой. Но, услов­но гово­ря, каж­дый «экран» сай­та — это отдель­ная тех­ни­че­ская сущ­ность, отдель­ный доку­мент. И мы меж­ду ними перемещаемся. 

Мобиль­ные при­ло­же­ния, наобо­рот, как буд­то сто­ят на месте. В них загру­жа­ют­ся дан­ные, сме­ня­ют­ся экра­ны, но у нас ощу­ще­ние, что мы все­гда внут­ри это­го приложения. 

В нача­ле 2010-х появи­лась новая кон­цеп­ция — нечто сред­нее меж­ду сай­том и при­ло­же­ни­ем. Такую архи­тек­ту­ру назы­ва­ют SPA — Single Page Application. Если вы поль­зо­ва­лись VK.com или Facebook.com, вы уже стал­ки­ва­лись с таки­ми продуктами.

Коротко главное

SPA рабо­та­ет так: когда поль­зо­ва­тель откры­ва­ет стра­ни­цу, бра­у­зер загру­жа­ет сра­зу весь код при­ло­же­ния. Но пока­зы­ва­ет толь­ко кон­крет­ный модуль — часть сай­та, кото­рая нуж­на поль­зо­ва­те­лю. Когда поль­зо­ва­тель пере­хо­дит в дру­гую часть при­ло­же­ния, бра­у­зер берёт уже загру­жен­ные дан­ные и пока­зы­ва­ет ему. И, если нуж­но, дина­ми­че­ски под­гру­жа­ет с сер­ве­ра нуж­ный кон­тент без обнов­ле­ния страницы.

С одной сто­ро­ны, такие при­ло­же­ния рабо­та­ют быст­ро и мень­ше нагру­жа­ют сер­вер. С дру­гой сто­ро­ны, они тре­бу­ют боль­шей загруз­ки на старте.

Объясним на квадратах

Допу­стим, у вас есть сер­вис, на кото­ром поль­зо­ва­те­ли смот­рят цвет­ные квад­ра­ты. В интер­фей­се есть кноп­ки с цве­та­ми, в кото­рые мож­но покра­сить фигу­ры. Вы сде­ла­ли для сер­ви­са и ста­ти­че­ский сайт, и одно­стра­нич­ное приложение:

Single Page Application: вы сделали для сервиса и статический сайт, и одностраничное приложение

На пер­вый взгляд, раз­ни­цы меж­ду сай­том и при­ло­же­ни­ем нет. Что­бы её заме­тить, нажмём на кноп­ку с дру­гим цветом. 

Single Page Application: на первый взгляд, разницы между сайтом и приложением нет

Здесь ста­но­вит­ся замет­но, что сайт и одно­стра­нич­ное при­ло­же­ние ведут себя по-разному:

Сайт-приложение: сайт и одностраничное приложение ведут себя по-разному
Сайт-приложение: сайт и одностраничное приложение ведут себя по-разному
Сайт-приложение: сайт и одностраничное приложение ведут себя по-разному
Сайт-приложение: сайт и одностраничное приложение ведут себя по-разному

Стра­ни­ца сай­та обно­вит­ся цели­ком. Полу­ча­ет­ся, мы гово­рим сер­ве­ру: «При­вет, сделай-ка квад­ра­ты зелё­ны­ми». Он гово­рит: «Хоро­шо. Но ещё вот вам сно­ва шап­ка сай­та и под­вал, а так­же кноп­ки и мета­дан­ные». И отда­ёт цели­ком новый HTML-файл.

В одно­стра­нич­ном при­ло­же­нии обно­вит­ся толь­ко цвет квад­ра­тов. Бра­у­зер отправ­ля­ет сер­ве­ру запрос, тот воз­вра­ща­ет нуж­ный пара­метр, квад­ра­ты кра­сят­ся, всё осталь­ное оста­ёт­ся неизменным.

Теперь пред­ставь­те, что у вас не про­стые квад­ра­ты, а интернет-магазин. Поль­зо­ва­тель пере­хо­дит с одно­го това­ра на дру­гой, но стра­ни­ца при этом не пере­за­гру­жа­ет­ся, а дина­ми­че­ски под­тя­ги­ва­ет фото, назва­ние, опи­са­ние и цену. Так и рабо­та­ют SPA.

Зачем нужны SPA

Одно­стра­нич­ные при­ло­же­ния чаще все­го исполь­зу­ют в сер­ви­сах, где поль­зо­ва­тель про­во­дит на одной стра­ни­це мно­го вре­ме­ни или совер­ша­ет с ней какие-то дей­ствия, например:

  • про­смат­ри­ва­ет почту и отме­ча­ет пись­ма как спам;
  • пишет посты и ком­мен­ти­ру­ет чужие;
  • смот­рит сериалы;
  • выби­ра­ет квартиру;
  • раз­гля­ды­ва­ет кар­тин­ки и соби­ра­ет их в тема­ти­че­ские доски.

Веб-версии Gmail, Facebook Netflix, AirBnB и Pinterest — одно­стра­нич­ные при­ло­же­ния. Тех­но­ло­гия настоль­ко рас­про­стра­не­на, что её исполь­зу­ют даже для сай­тов ком­па­ний. Посмот­ри­те, напри­мер, на стра­ни­цу Digital Agency London. Из рус­ско­языч­ных про­ек­тов — Meduza.

SPA может обме­ни­вать­ся дан­ны­ми с сер­ве­ром без пере­за­груз­ки стра­ни­цы, с помо­щью ajax-запросов. Бла­го­да­ря это­му напол­не­ние стра­ни­цы может менять­ся дина­ми­че­ски. Напри­мер, рань­ше в соци­аль­ной сети нуж­но было пере­за­гру­зить стра­ни­цу, что­бы про­ве­рить, нет ли новых сооб­ще­ний, теперь они появ­ля­ют­ся автоматически.

Обра­ти­те вни­ма­ние, напри­мер, как рабо­та­ет пере­клю­че­ние меж­ду раз­де­ла­ми в интер­фей­се Фейс­бу­ка: если открыть глав­ную, а потом перей­ти в «Груп­пы», то содер­жа­ние стра­ни­цы изме­нит­ся, но шап­ка оста­нет­ся на сво­ём месте — пере­за­груз­ки стра­ни­цы не происходит.

Преимущества SPA

SPA быст­рые. Пере­ход меж­ду моду­ля­ми в при­ло­же­нии про­ис­хо­дит быст­рее: нуж­ные ресур­сы уже загру­же­ны, нуж­но про­сто под­ста­вить дан­ные, кото­рые запро­сил поль­зо­ва­тель. Часто при этом сер­вер воз­вра­ща­ет не тяже­ло­вес­ный HTML, а лёг­кий JSON или XML.

Ещё исполь­зо­ва­ние JSON упро­ща­ет раз­ра­бот­ку при­ло­же­ния для раз­ных плат­форм. Если для веб-версии раз­ра­бо­тать обыч­ный сайт, кото­рый при­ни­ма­ет от сер­ве­ра HTML, то для мобиль­но­го при­ло­же­ния при­дёт­ся писать дора­бот­ку, так как там HTML не подой­дёт. JSON дела­ет ответ сер­ве­ра универсальным.

SPA гиб­кие. Раз поль­зо­ва­тель всё вре­мя рабо­та­ет с одной стра­ни­цей, про­ще делать инте­рес­ные пере­хо­ды и ани­ма­цию эле­мен­тов. Мож­но рабо­тать с состо­я­ни­ем кно­пок, вкла­док и пере­клю­ча­те­лей. Таким обра­зом, интер­фейс SPA может быть похож ско­рее на пол­но­цен­ное при­ло­же­ние, а не на про­стой сайт.

SPA рабо­та­ют вез­де. Всё, что нуж­но для SPA — под­держ­ка JavaScript. Такие сай­ты хоро­шо рабо­та­ют и на деск­то­пе, и в вебе, могут отча­сти заме­нить пол­но­цен­ные мобиль­ные приложения.

Недостатки SPA

Про­бле­мы с SEO. По умол­ча­нию у при­ло­же­ний напря­жён­ные отно­ше­ния с поис­ко­вы­ми маши­на­ми: те натре­ни­ро­ва­ны индек­си­ро­вать отдель­ные стра­ни­цы, у каж­дой из кото­рых есть заго­ло­вок, опи­са­ние и осталь­ные мета­те­ги. В SPA при­хо­дит­ся выкручиваться.

Похо­жая про­бле­ма с неко­то­ры­ми систе­ма­ми ана­ли­ти­ки. Вот что про SPA гово­рит Google-аналитика: «Стан­дарт­ный тег Google Ана­ли­ти­ки хоро­шо под­хо­дит для обыч­ных сай­тов, посколь­ку его код выпол­ня­ет­ся при каж­дой загруз­ке новой стра­ни­цы. Одна­ко при рабо­те с одно­стра­нич­ным при­ло­же­ни­ем такой код будет выпол­нен лишь один раз». То есть что­бы кор­рект­но соби­рать ана­ли­ти­ку, при­дёт­ся само­сто­я­тель­но настро­ить отсле­жи­ва­ние нуж­ных событий.

Зави­си­мость от интер­не­та. Для запус­ка веб-приложения нуж­на связь с сер­ве­ром, так что в боль­шин­стве слу­ча­ев без интер­не­та не обой­тись, как и с обыч­ны­ми сай­та­ми. Этим SPA про­иг­ры­ва­ют обыч­ным приложениям.

Хотя здесь есть исклю­че­ние — если во вре­мя пер­вой загруз­ки бра­у­зер полу­ча­ет все дан­ные и боль­ше ниче­го под­гру­жать не нуж­но, то мож­но рабо­тать и без интернета.

SPA не для нович­ков. Напи­сать такое при­ло­же­ние на про­стом HTML и CSS не полу­чит­ся, нуж­но знать JS. Часто для это­го исполь­зу­ют фрейм­вор­ки — React, Angular, Vue, Ember и дру­гие. В любом слу­чая для про­ек­та нуж­ны более ком­пе­тент­ные разработчики.

Этот мате­ри­ал мы под­го­то­ви­ли по моти­вам интер­вью с Алек­сан­дром Шты­ко­вым — руко­во­ди­те­лем фронтенд-команд в Дело­вой Сре­де. У Дело­вой Сре­ды есть обра­зо­ва­тель­ная плат­фор­ма, кото­рая рабо­та­ет как SPA.

👉 Почи­тай­те, какие тех­но­ло­гии Алек­сан­дру при­шлось осво­ить и какой путь прой­ти, что­бы раз­ви­вать её.

Что дальше?

Если хоти­те сде­лать своё веб-приложение, посмот­ри­те инструк­цию, как запу­стить при­ло­же­ние на React и репо­зи­то­рий на GitHub.Что­бы раз­ра­ба­ты­вать SPA, не поме­ща­ет хоро­шо раз­би­рать­ся в JS, его фрейм­вор­ках и дру­гих веб-технологиях. На Прак­ти­ку­ме есть курс «Как стать веб-разработчиком» и «Как стать мидл фронтенд-разработчиком».

Экс­перт:
Алек­сандр Штыков

Текст и иллю­стра­ции:
Сла­ва Уфимцев

Редак­тор:
Мак­сим Ильяхов

Кор­рек­тор:
Ири­на Михеева

Худож­ник:
Даня Бер­ков­ский

Вёрст­ка:
Мария Дро­но­ва

Соц­се­ти:
Олег Веш­кур­цев

Во имя:
рабо­ты без перезагрузки