Аднастаронкавае прыкладанне (SPA) - гэта вэб-прыкладанне, якое прадстаўляецца карыстальніку праз адну старонку HTML, каб быць больш спагадным і больш дакладна паўтарыць настольнае прыкладанне або ўласнае прыкладанне.
СПА бывае часам defiаднастаронкавы інтэрфейс (SPI).
Аднастаронкавае прыкладанне можа атрымліваць увесь HTML, JavaScript і CSS прыкладання падчас першапачатковай загрузкі або можа дынамічна загружаць рэсурсы для абнаўлення ў адказ на ўзаемадзеянне карыстальніка або іншыя падзеі.
Іншыя вэб-праграмы прадстаўляюць карыстальніку галоўную старонку, звязаную з часткамі прыкладання на асобных старонках HTML, што азначае, што карыстальнік павінен чакаць загрузкі новай старонкі кожны раз, калі робіць новы запыт.
Тэхналогіі
SPA выкарыстоўваюць HTML5 і Ajax (асінхронны JavaScript і XML), каб уключыць плыўныя і дынамічныя адказы на запыты карыстальнікаў, што дазваляе неадкладна абнаўляць кантэнт, калі карыстальнік выконвае дзеянне. Пасля таго, як старонка загрузілася, узаемадзеянне з серверам адбываецца праз выклікі Ajax, і даныя вяртаюцца, выяўленыя ў фармаце JSON (JavaScript Object Notation), каб абнавіць старонку без неабходнасці перазагружаць.
SPA ў дэталях
Аднастаронкавыя прыкладанні адметныя сваёй здольнасцю перабудоўваць любую частку карыстальніцкага інтэрфейсу, не патрабуючы абыходу сервера для атрымання HTML. Гэта дасягаецца шляхам аддзялення даных ад прадстаўлення даных з дапамогай узроўня мадэлі, які кіруе дадзенымі, і ўзроўню прагляду, які чытае з мадэляў.
Добры код атрымліваецца з рашэння адной і той жа праблемы некалькі разоў або яе рэфактарынгу. Звычайна гэты працэс развіваецца па перыядычных схемах, калі адзін механізм пастаянна робіць адно і тое ж.
Каб напісаць прыдатны для абслугоўвання код, вам трэба напісаць код простым спосабам. Гэта пастаянная барацьба, насамрэч лёгка ўскладніць (уваходжанні/залежнасці), пішучы код для вырашэння праблемы; і лёгка вырашыць праблему спосабам, які не памяншае складанасць.
Прыкладам гэтага з'яўляюцца прасторы імёнаў.
Параўнанне аднастаронкавых праграм (SPA) і шматстаронкавых праграм (MPA).
Шматстаронкавыя прыкладанні (MPA) змяшчаюць некалькі старонак са статычнымі дадзенымі і спасылкамі на іншыя сайты. HTML і CSS - асноўныя тэхналогіі, якія выкарыстоўваюцца для распрацоўкі вэб-сайтаў MPA. Яны могуць выкарыстоўваць JavaScript, каб паменшыць нагрузку і павялічыць хуткасць. Арганізацыі, якія прапануюць шырокі спектр паслуг, такіх як інтэрнэт-крамы, павінны разгледзець магчымасць выкарыстання MPA, паколькі яны дазваляюць лёгка падключацца да розных баз дадзеных карыстальнікаў.
Аднастаронкавыя прыкладанні адрозніваюцца ад шматстаронкавых наступным чынам:
- Працэс распрацоўкі: Пры стварэнні MPA вам не трэба ведаць JavaScript, у адрозненне ад SPA. Тым не менш, спалучэнне ўваходных і бэк-эндаў у MPA азначае, што гэтыя сайты патрабуюць адносна большага часу будаўніцтва, чым SPA.
- хуткасць: MPA працуюць адносна павольней, патрабуючы, каб кожную новую старонку загружалі з нуля. Аднак SPA загружаюцца значна хутчэй пасля першапачатковай загрузкі, паколькі яны кэшуюць даныя для наступнага выкарыстання.
- Пошукавая аптымізацыя: Пошукавыя сістэмы могуць лёгка індэксаваць вэб-сайты з MPA. У MPA ёсць больш старонак, сканаваных пошукавымі сістэмамі, каб стварыць лепшы рэйтынг SEO. Змест кожнай старонкі таксама статычны, што робіць яго больш даступным. Наадварот, SPA маюць старонку з адзіным унікальным URL (Uniform Resource Locator). Яны таксама выкарыстоўваюць JavaScript, які не індэксуецца належным чынам большасцю пошукавых сістэм. Гэта робіць рэйтынг SEO для SPA больш складаным.
- бяспеку: У MPA вам трэба абараняць кожную інтэрнэт-старонку асобна. Аднак SPA больш схільныя хакерскім атакам. Але пры правільным падыходзе каманды распрацоўшчыкаў могуць палепшыць бяспеку прыкладанняў.
Па меры таго як усё больш прадпрыемстваў пераходзяць на выкарыстанне SPA, сканеры і пошукавыя сістэмы будуць развівацца, каб лепш іх індэксаваць. Улічваючы яго хуткасць, гэта толькі пытанне, калі SPA стануць асноўным варыянтам для распрацоўкі вэб-прыкладанняў. Тады перавагі MPA над SPA пачнуць знікаць.
Калі выкарыстоўваць аднастаронкавыя праграмы?
Ёсць пяць сцэнарыяў, дзе такія прыкладанні найбольш актуальныя:
- Карыстальнікі, якія хочуць распрацаваць вэб-сайт з дынамічнай платформай і меншым аб'ёмам даных, могуць выкарыстоўваць SPA.
- Карыстальнікі, якія плануюць стварыць мабільнае прыкладанне для свайго сайта, таксама могуць разгледзець магчымасць выкарыстання SPA. Яны могуць выкарыстоўваць бэкэнд API (інтэрфейс прыкладнога праграмавання) для сайта і мабільнага прыкладання.
- Архітэктура SPA падыходзіць для стварэння сацыяльных сетак, такіх як Facebook, платформы SaaS і закрытыя супольнасці, паколькі яны патрабуюць менш SEO.
- Карыстальнікі, якія хочуць прапанаваць сваім спажыўцам бесперашкоднае ўзаемадзеянне, таксама павінны выкарыстоўваць SPA. Спажыўцы таксама могуць атрымаць доступ да жывых абнаўленняў для жывых струменевых дадзеных і графікаў.
- Карыстальнікі, якія хочуць забяспечыць паслядоўны, родны і дынамічны карыстацкі досвед на розных прыладах, аперацыйных сістэмах і браўзерах.
Добрая каманда павінна мець бюджэт, інструменты і час для стварэння высакаякаснага аднастаронкавага прыкладання. Гэта забяспечыць надзейны і эфектыўны SPA, які не будзе адчуваць прастоі, звязаныя з трафікам.
Аднастаронкавая архітэктура прыкладання
Аднастаронкавыя прыкладанні ўзаемадзейнічаюць з наведвальнікамі, загружаючы бягучую старонку і працуючы на ёй, пазбаўляючы ад неабходнасці загружаць некалькі вэб-старонак з сервера.
Вэб-сайты з SPA складаюцца з адной спасылкі URL. Змесціва спампоўваецца і пэўныя кампаненты карыстальніцкага інтэрфейсу (UI) абнаўляюцца пры націску. Карыстальніцкі досвед паляпшаецца, паколькі карыстальнік можа ўзаемадзейнічаць з бягучай старонкай, калі новы кантэнт атрымліваецца з сервера. Калі адбываецца абнаўленне, часткі бягучай старонкі абнаўляюцца новым зместам.
Першапачатковы запыт кліента ў SPA загружае прыкладанне і ўсе яго адпаведныя актывы, такія як HTML, CSS і JavaScript. Першапачатковы файл загрузкі можа быць важным для складаных прыкладанняў і прывесці да больш павольнага часу загрузкі. Інтэрфейс прыкладнога праграмавання (API) атрымлівае новыя даныя, калі карыстальнік перамяшчаецца па SPA. сервер адказвае толькі дадзенымі ў фармаце JSON (JavaScript Object Notation). Пасля атрымання гэтых даных браўзер абнаўляе выгляд прыкладання, які бачыць карыстальнік без перазагрузкі старонкі.
Аднастаронкавая архітэктура прыкладання ўключае ў сябе тэхналогіі візуалізацыі на баку сервера і на баку кліента. Сайт адлюстроўваецца і прадстаўляецца карыстальніку з дапамогай візуалізацыі на баку кліента (CSR), візуалізацыі на баку сервера (SSR) або генератара статычнага сайта (SSG).
- Візуалізацыя на баку кліента (CSR)
Пры рэндэрынгу на баку кліента браўзер робіць запыт на сервер для файла HTML і атрымлівае асноўны файл HTML з далучанымі сцэнарыямі і стылямі. Падчас выканання JavaScript карыстальнік бачыць пустую старонку або выяву загрузніка. SPA атрымлівае даныя, стварае візуалізацыі і перамяшчае даныя ў аб'ектную мадэль дакумента (DOM). Затым SPA рыхтуецца да выкарыстання. CSR часта з'яўляецца самай доўгай з трох альтэрнатыў і часам можа перагрузіць браўзер з-за інтэнсіўнага выкарыстання рэсурсаў прылады пры праглядзе кантэнту. Акрамя таго, CSR з'яўляецца выдатнай альтэрнатывай для вэб-сайтаў з вялікім трафікам, паколькі ён прадстаўляе інфармацыю спажыўцам без празмернай сувязі з серверам, што прыводзіць да больш хуткага карыстання.
- Візуалізацыя на баку сервера (SSR)
Падчас візуалізацыі на баку сервера браўзеры запытваюць файл HTML з сервера, які атрымлівае запытаныя даныя, адлюстроўвае SPA і стварае файл HTML для прыкладання на хаду. Затым карыстачу прадстаўляецца даступны матэрыял. Архітэктура SPA патрэбна для далучэння падзей, стварэння віртуальнага DOM і выканання далейшых аперацый. Затым SPA рыхтуецца да выкарыстання. SSR робіць праграму хуткай, паколькі яна спалучае ў сабе хуткасць SPA і не перагружае браўзер карыстальніка.
- Генератар статычнага сайта (SSG)
У канструктары статычных сайтаў браўзеры неадкладна робяць запыт на сервер для файла HTML. Карыстальніку паказваецца старонка. SPA атрымлівае даныя, стварае прагляды і запаўняе аб'ектную мадэль дакумента (DOM). Затым SPA гатовы да выкарыстання. Зыходзячы з назвы, SSG у асноўным падыходзяць для статычных старонак. Яны забяспечваюць статычныя старонкі з добрым і хуткім варыянтам. Для вэб-сайтаў з дынамічным кантэнтам карыстальнікам рэкамендуецца выбраць адзін з двух іншых варыянтаў адлюстравання інфармацыі.
Перавагі аднастаронкавых прыкладанняў
Такія буйныя кампаніі, як Meta, YouTube і Netflix, перайшлі ад шматстаронкавых да аднастаронкавых. SPA прапануюць больш плаўны карыстацкі досвед, высокую прадукцыйнасць і хуткасць рэагавання. Ніжэй прыведзены перавагі выкарыстання аднастаронкавых прыкладанняў.
- Функцыя кэшавання
Аднастаронкавае прыкладанне робіць адзіны запыт на сервер пры першапачатковай загрузцы і захоўвае ўсе атрыманыя даныя. Спажыўцы могуць выкарыстоўваць атрыманыя дадзеныя для працы ў аўтаномным рэжыме, калі гэта неабходна, што робіць яго больш зручным для карыстальнікаў, паколькі дазваляе ім спажываць менш рэсурсаў дадзеных. Акрамя таго, калі ў кліента дрэннае падключэнне да Інтэрнэту, лакальныя даныя можна сінхранізаваць з серверам, калі гэта дазваляе падключэнне да лакальнай сеткі.
- Хуткі і спагадны
Выкарыстанне SPA можа павысіць хуткасць вэб-сайта, паколькі ён абнаўляе толькі запытаны кантэнт, а не ўсю старонку. SPA загружаюць нязначны файл JSON, а не новую старонку. Файл JSON забяспечвае больш высокую хуткасць і эфектыўнасць загрузкі. Гэта прыводзіць да імгненнага доступу да ўсіх функцый і функцый старонкі без якіх-небудзь затрымак. Гэта велізарны плюс, бо час загрузкі вэб-сайта можа істотна паўплываць на прыбытак і продажы.
SPA забяспечваюць плаўныя пераходы, імгненна прадастаўляючы ўсю інфармацыю на старонцы. Вэб-сайт не мае патрэбы ў абнаўленні, таму яго працэсы больш эфектыўныя, чым звычайныя інтэрнэт-праграмы.
Акрамя таго, з SPA, такія актывы, як HTML, CSS і скрыпты ява яны будуць атрыманы толькі адзін раз за час існавання прыкладання. Толькі неабходныя дадзеныя абменьваюцца туды і назад.
Старонкі з SPA таксама дазваляюць карыстальнікам перамяшчацца хутчэй дзякуючы кэшаванню і памяншэнню аб'ёмаў даных. Толькі неабходныя даныя перадаюцца наперад і назад і загружаюцца толькі адсутныя часткі абноўленага кантэнту.
- Адладка з Chrome
Адладка выяўляе і выдаляе памылкі, памылкі і ўразлівасці вэб-прыкладанняў, якія зніжаюць прадукцыйнасць. Адладка SPA становіцца лёгкай з дапамогай інструментаў распрацоўшчыка Chrome. Распрацоўшчыкі могуць кіраваць візуалізацыяй кода JS з браўзера, адладжваць SPA, не прабіраючы шмат радкоў кода.
SPA пабудаваны на фрэймворках JavaScript, такіх як AngularJS і інструменты распрацоўшчыка React, што палягчае іх адладку з дапамогай браўзераў Chrome.
Інструменты распрацоўшчыка дазваляюць распрацоўшчыкам зразумець, як браўзер будзе запытваць дадзеныя з сервераў, кэшаваць іх і як ён будзе адлюстроўваць элементы старонкі. Акрамя таго, гэтыя інструменты дазваляюць распрацоўшчыкам кантраляваць і аналізаваць элементы старонкі, сеткавыя аперацыі і звязаныя з імі дадзеныя.
- Імклівае развіццё
Падчас працэсу распрацоўкі інтэрфейс і сервер SPA могуць быць падзелены, што дазваляе двум або больш распрацоўшчыкам працаваць паралельна. Змена інтэрфейсу або бэкэнда не ўплывае на іншы канец, што спрыяе больш хуткаму развіццю.
Распрацоўшчыкі могуць паўторна выкарыстоўваць серверны код і аддзяляць SPA ад інтэрфейснага інтэрфейсу. Развязаная архітэктура ў SPA падзяляе інтэрфейсныя дысплеі і серверныя службы. Гэта дазваляе распрацоўшчыкам змяняць перспектывы, будаваць і эксперыментаваць, не ўплываючы на змест і не турбуючыся аб бэкэнд-тэхналогіях. У такім выпадку кліенты змогуць карыстацца гэтымі праграмамі стабільна.
- Палепшаны карыстацкі досвед
З SPA карыстальнікі атрымліваюць імгненны доступ да прагледжаных старонак з усім змесцівам адначасова. Гэта больш зручна, бо карыстальнікі могуць зручна і бесперашкодна пракручваць. Такое адчуванне, што вы выкарыстоўваеце роднае настольнае або мабільнае прыкладанне.
SPA забяспечваюць пазітыўны UX з выразным пачаткам, сярэдзінай і канцом. Акрамя таго, карыстальнікі могуць перайсці да жаданага кантэнту, не націскаючы на некалькі спасылак, як у MPA. Вы адчуваеце меншы паказчык адмоваў, калі карыстальнікі атрымліваюць імгненны доступ да інфармацыі, у адрозненне ад MPA, дзе карыстальнікі расчароўваюцца, бо загрузка старонак займае шмат часу. Навігацыя таксама хутчэй, таму што элементы старонкі выкарыстоўваюцца паўторна.
- Пераўтварэнне ў праграмы IOS і Android
Распрацоўшчыкі, якія жадаюць перайсці на прыкладанні для iOS і Android, павінны выкарыстоўваць SPA, паколькі іх адносна лягчэй канвертаваць. Яны могуць выкарыстоўваць адзін і той жа код для пераходу з SPA на мабільныя праграмы. Паколькі ўвесь код прадстаўлены ў адным экзэмпляры, SPA простыя ў навігацыі, што робіць іх ідэальнымі для мабільных прыкладанняў.
- Кросплатформенная сумяшчальнасць
Распрацоўшчыкі могуць выкарыстоўваць адзіную кодавую базу для стварэння прыкладанняў, якія могуць працаваць на любой прыладзе, браўзеры і аперацыйнай сістэме. Гэта паляпшае спажывецкі вопыт, паколькі яны могуць выкарыстоўваць SPA дзе заўгодна. Гэта таксама дазваляе распрацоўшчыкам і інжынерам DevOps ствараць шматфункцыянальныя прыкладанні, уключаючы аналітыку ў рэальным часе, адначасова распрацоўваючы праграмы для рэдагавання кантэнту.
Недахопы
Нягледзячы на ўсе перавагі аднастаронкавых прыкладанняў, пры выкарыстанні SPA-фреймворкаў узнікаюць некаторыя недахопы. На шчасце, вядзецца работа па пераадоленні гэтых праблем з SPA. Ніжэй прыведзены некаторыя недахопы;
- Пошукавая аптымізацыя (SEO)
Шырока распаўсюджана меркаванне, што аднастаронкавыя прыкладанні не падыходзяць для SEO. Большасць пошукавых сістэм, такіх як Google або Yahoo, некаторы час не маглі сканаваць вэб-сайты SPA на аснове ўзаемадзеяння Ajax з серверамі. У выніку большасць такіх SPA-сайтаў засталіся неіндэксаванымі. У цяперашні час ботаў Google вучаць выкарыстоўваць JavaScript замест звычайнага HTML для індэксацыі вэб-сайтаў SPA, што шкодзіць рэйтынгу.
Спрабаваць змясціць SEO ў гатовы сайт SPA складана і дорага. Распрацоўшчыкам даводзіцца ствараць асобны вэб-сайт, які адлюстроўваецца серверам пошукавай сістэмы, што неэфектыўна і патрабуе вялікай колькасці дадатковага кода. Могуць быць выкарыстаны і іншыя метады, такія як выяўленне функцый і папярэдні рэндэрынг. У аб'ектах SPA адзін URL для кожнай старонкі абмяжоўвае магчымасці SEO для SPA.
- Кнопкі навігацыі назад і наперад
Браўзеры захоўваюць інфармацыю для хуткай загрузкі вэб-старонак. Калі спажыўцы націскаюць кнопку "Назад", большасць чакае, што старонка будзе ў стане, падобным да таго, калі яны праглядалі яе ў апошні раз, і што пераход адбудзецца хутка. Традыцыйныя вэб-архітэктуры дазваляюць гэта з дапамогай кэшаваных копій сайта і звязаных з ім рэсурсаў. Аднак у наіўнай рэалізацыі SPA націсканне кнопкі "Назад" мае той жа эфект, што і націск на спасылку. Выклікае запыт сервера, павелічэнне затрымкі і бачныя змены даных.
Каб задаволіць чаканні карыстальнікаў і забяспечыць больш хуткі вопыт, распрацоўшчыкам SPA неабходна імітаваць функцыянальнасць уласных браўзераў з дапамогай JavaScript.
- Размяшчэнне пракруткі
Браўзэры захоўваюць такую інфармацыю, як апошняя пазіцыя пракруткі наведаных старонак. Аднак карыстальнікі могуць выявіць, што пазіцыі пракруткі змяніліся пры навігацыі па SPA з дапамогай кнопак браўзера "назад" і "наперад". Напрыклад, у Facebook часам карыстальнікі пракручваюць назад да сваіх апошніх пазіцый пракруткі, а часам не. Гэта прыводзіць да неаптымальнага ўзаемадзеяння з карыстальнікам, паколькі яны павінны ўручную аднаўляць пракрутку да папярэдняй пазіцыі пракруткі.
Каб вырашыць гэтую праблему, распрацоўшчыкі павінны прадаставіць код, які захоўвае, здабывае і запытвае правільную пазіцыю пракруткі, калі карыстальнік пракручвае наперад і назад.
- Аналіз сайта
Дадаючы аналітычны код на старонку, карыстальнікі могуць адсочваць наведвальнасць старонкі. Аднак SPA ўскладняюць вызначэнне таго, якія старонкі або змесціва найбольш папулярныя, паколькі гэта толькі адна старонка. Вам трэба прадаставіць дадатковы код для аналітыкі, каб адсочваць псеўдастаронкі падчас іх прагляду.
- Пытанні бяспекі
Спа-цэнтры больш схільныя да пагрозы праз міжсайтавы сцэнарый. Яны дазваляюць спажыўцам спампоўваць усё прыкладанне, падвяргаючы іх больш магчымасцям знайсці ўразлівасці з дапамогай зваротнага праектавання. Каб вырашыць гэтую праблему, распрацоўшчыкі павінны пераканацца, што ўся кліенцкая логіка, звязаная з бяспекай вэб-прыкладанняў, такая як аўтэнтыфікацыя і праверка ўводу, падвойваецца на серверы для праверкі. Акрамя таго, распрацоўшчыкі павінны забяспечыць абмежаваны ролевы доступ.
У заключэнне
Аднастаронкавыя праграмы азначаюць наступны крок у эвалюцыі выкарыстання праграм. Яны больш хуткія, больш інтуітыўна зразумелыя і могуць быць інтэграваныя з пашыранымі функцыямі, такімі як налада. Вось чаму лепшыя кампаніі з вялікай колькасцю адначасовых карыстальнікаў, такія як Gmail, Netflix або стужка навін Facebook, разлічваюць на архітэктуру адной старонкі. Укараняючы гэтую тэхналогію, прадпрыемствы могуць атрымаць большую карысць ад сваёй інтэрнэт-аб'ектаў і зрабіць новыя шляхі ў якасці лічбавага бізнесу.
Ercole Palmeri
