Ang solong page application (SPA) ay isang web app na ipinakita sa user sa pamamagitan ng iisang HTML page upang maging mas tumutugon at para mas malapit na kopyahin ang isang desktop application o native na app.
Minsan dumarating ang SPA defiisang interface ng pahina (SPI).
Maaaring kunin ng isang application na isang pahina ang lahat ng HTML, JavaScript, at CSS ng application sa panahon ng paunang pag-load, o maaari itong dynamic na mag-load ng mga mapagkukunan para sa pag-update bilang tugon sa pakikipag-ugnayan ng user o iba pang mga kaganapan.
Iba pang mga web application, ipakita sa user ang isang home page na naka-link sa mga bahagi ng application sa hiwalay na mga HTML na pahina, na nangangahulugan na ang user ay kailangang maghintay para sa isang bagong pahina na mag-load sa tuwing gagawa sila ng bagong kahilingan.
Mga Teknolohiya
Gumagamit ang mga SPA ng HTML5 at Ajax (asynchronous na JavaScript at XML) upang paganahin ang tuluy-tuloy at dynamic na mga tugon sa mga kahilingan ng user, na nagbibigay-daan sa content na ma-update kaagad kapag gumawa ng aksyon ang isang user. Kapag na-load na ang page, nagaganap ang mga pakikipag-ugnayan sa server sa pamamagitan ng mga Ajax na tawag at ibinalik ang data, na nakita sa format na JSON (JavaScript Object Notation), upang i-update ang page nang hindi nangangailangan ng mga reload.
SPA sa detalye
Kapansin-pansin ang mga single page na app sa kanilang kakayahang muling idisenyo ang anumang bahagi ng user interface nang hindi nangangailangan ng roundtrip ng server upang kunin ang HTML. Nagagawa ito sa pamamagitan ng paghihiwalay ng data mula sa presentasyon ng data sa isang layer ng modelo na namamahala sa data at isang layer ng view na nagbabasa mula sa mga modelo.
Ang magandang code ay nagmumula sa paglutas ng parehong problema nang maraming beses, o refactoring ito. Karaniwan, ang prosesong ito ay nagbabago sa paulit-ulit na mga pattern, na may isang mekanismo na patuloy na gumagawa ng parehong bagay.
Upang magsulat ng mapanatili na code, kailangan mong magsulat ng code sa isang simpleng paraan. Ito ay isang patuloy na pakikibaka, sa katunayan ito ay madaling magdagdag ng pagiging kumplikado (entlances/dependencies) sa pamamagitan ng pagsulat ng code upang malutas ang isang problema; at madaling lutasin ang isang problema sa paraang hindi nakakabawas sa pagiging kumplikado.
Ang mga namespace ay isang halimbawa nito.
Pinaghahambing ang Mga Single Page Applications (SPA) Multi Page Applications (MPA).
Ang mga multi-page na application (MPA) ay naglalaman ng maraming page na may static na data at mga link sa iba pang mga site. Ang HTML at CSS ay ang mga pangunahing teknolohiyang ginagamit upang bumuo ng mga website ng MPA. Magagamit nila ang JavaScript upang bawasan ang pag-load at pataasin ang bilis. Dapat isaalang-alang ng mga organisasyong nag-aalok ng malawak na hanay ng mga serbisyo, gaya ng mga online na tindahan, ang paggamit ng MPA dahil pinapadali nito ang koneksyon sa iba't ibang database ng user.
Ang mga single-page na application ay naiiba sa mga multi-page na application sa mga sumusunod na paraan:
- Proseso ng pag-unlad: Kapag gumagawa ng mga MPA, hindi mo kailangan ang kasanayan sa JavaScript, hindi katulad ng mga SPA. Gayunpaman, ang pagsasama ng mga front-end at back-end sa mga MPA ay nangangahulugan na ang mga site na ito ay nangangailangan ng medyo mas mahabang oras ng konstruksiyon kaysa sa mga SPA.
- Velocità: Ang mga MPA ay tumatakbo nang medyo mas mabagal, na nangangailangan ng bawat bagong pahina na i-load mula sa simula. Gayunpaman, ang mga SPA ay naglo-load nang mas mabilis pagkatapos ng unang pag-download habang nag-cache sila ng data para magamit sa ibang pagkakataon.
- Search Engine Optimization: Madaling mai-index ng mga search engine ang mga website gamit ang MPA. Ang mga MPA ay may higit pang mga pahina na na-crawl ng mga search engine upang makabuo ng mas mahusay na mga ranggo sa SEO. Ang nilalaman ng bawat pahina ay static din, na ginagawang mas naa-access. Sa kabaligtaran, ang mga SPA ay may isang pahina na may isang natatanging URL (Uniform Resource Locator). Gumagamit din sila ng JavaScript, na hindi maayos na na-index ng karamihan sa mga search engine. Ginagawa nitong mas mahirap ang mga ranking ng SEO para sa mga SPA.
- Katiwasayan: Sa MPA, kailangan mong i-secure ang bawat online na pahina nang paisa-isa. Gayunpaman, ang mga SPA ay mas madaling kapitan ng mga pag-atake ng hacker. Ngunit sa tamang diskarte, mapapabuti ng mga development team ang seguridad ng application.
Habang mas maraming negosyo ang lumilipat upang gumamit ng mga SPA, mag-evolve ang mga crawler at search engine upang mas mai-index ang mga ito. Dahil sa bilis nito, isa lang ang tanong kung kailan ang mga SPA ang magiging go-to na opsyon para sa pagbuo ng web application. Pagkatapos ang mga bentahe ng MPA sa SPA ay magsisimulang maglaho.
Kailan gagamit ng mga single page na application?
Mayroong limang mga sitwasyon kung saan ang mga naturang application ay pinakanauugnay:
- Maaaring gumamit ng mga SPA ang mga user na gustong bumuo ng website na may dynamic na platform at mas mababang volume ng data.
- Ang mga gumagamit na nagpaplanong bumuo ng isang mobile application para sa kanilang website ay maaari ding isaalang-alang ang paggamit ng SPA. Magagamit nila ang backend API (Application Programming Interface) para sa site at sa mobile application.
- Ang arkitektura ng SPA ay angkop para sa pagbuo ng mga social network tulad ng Facebook, SaaS platform at mga saradong komunidad dahil nangangailangan sila ng mas kaunting SEO.
- Ang mga user na gustong mag-alok sa kanilang mga consumer ng tuluy-tuloy na pakikipag-ugnayan ay dapat ding gumamit ng mga SPA. Maa-access din ng mga consumer ang mga live na update para sa live streaming data at mga graph.
- Mga user na gustong maghatid ng pare-pareho, native, at dynamic na karanasan ng user sa mga device, operating system, at browser.
Ang isang mahusay na koponan ay dapat magkaroon ng badyet, mga tool at oras upang lumikha ng isang mataas na kalidad na solong pahina ng application. Titiyakin nito ang isang maaasahan at mahusay na SPA na hindi nakakaranas ng downtime na nauugnay sa trapiko.
Iisang pahina na arkitektura ng application
Nakikipag-ugnayan ang mga app sa isang page sa mga bisita sa pamamagitan ng paglo-load at pagtatrabaho sa kasalukuyang page, na inaalis ang pangangailangang mag-load ng maraming web page mula sa server.
Ang mga website na may SPA ay binubuo ng isang link ng URL. Na-download ang nilalaman at ina-update ang mga partikular na bahagi ng user interface (UI) kapag na-click. Ang karanasan ng gumagamit ay pinabuting dahil ang user ay maaaring makipag-ugnayan sa kasalukuyang pahina habang ang bagong nilalaman ay kinukuha mula sa server. Kapag may naganap na pag-refresh, ang mga bahagi ng kasalukuyang pahina ay ina-update kasama ang bagong nilalaman.
Nilo-load ng paunang kahilingan ng kliyente sa SPA ang application at lahat ng nauugnay na asset nito, gaya ng HTML, CSS at JavaScript. Ang paunang load file ay maaaring makabuluhan para sa mga kumplikadong application at magresulta sa mas mabagal na oras ng pagkarga. Ang isang application programming interface (API) ay kumukuha ng bagong data habang nagna-navigate ang user sa isang SPA. tumutugon lang ang server gamit ang data sa format na JSON (JavaScript Object Notation). Sa pagtanggap ng data na ito, nire-refresh ng browser ang view ng application na nakikita ng user nang hindi nagre-reload ng page.
Kasama sa arkitektura ng application na may isang pahina ang server-side at client-side na mga teknolohiya sa pag-render. Ang site ay ipinapakita at ipinakita sa gumagamit sa pamamagitan ng Client Side Rendering (CSR), Server Side Rendering (SSR), o Static Site Generator (SSG).
- Client Side Rendering (CSR)
Sa pag-render sa panig ng kliyente, humihiling ang browser sa server para sa isang HTML file at tumatanggap ng pangunahing HTML file na may mga nakalakip na script at istilo. Habang isinasagawa ang JavaScript, nakakakita ang user ng blangkong page o larawan ng loader. Kinukuha ng SPA ang data, gumagawa ng mga visualization, at tinutulak ang data sa Document Object Model (DOM). Ang SPA ay inihanda para magamit. Ang CSR ay kadalasang pinakamahaba sa tatlong alternatibo at paminsan-minsan ay maaaring madaig ang browser dahil sa matinding paggamit nito ng mga mapagkukunan ng device kapag tumitingin ng content. Bukod pa rito, ang CSR ay isang mahusay na alternatibo para sa mga website na may mataas na trapiko dahil nagpapakita ito ng impormasyon sa mga mamimili nang walang labis na komunikasyon sa server, na nagreresulta sa isang mas mabilis na karanasan ng user.
- Pag-render sa Gilid ng Server (SSR)
Sa panahon ng pag-render sa gilid ng server, humihiling ang mga browser ng HTML file mula sa server, na kumukuha ng hiniling na data, nagre-render ng SPA, at gumagawa ng HTML file para sa application on the go. Ang naa-access na materyal ay ipapakita sa gumagamit. Ang arkitektura ng SPA ay kinakailangan upang mag-attach ng mga kaganapan, makabuo ng isang virtual na DOM at magsagawa ng mga karagdagang operasyon. Ang SPA ay inihanda para magamit. Ginagawang mabilis ng SSR ang program habang pinagsasama nito ang bilis ng isang SPA sa hindi pag-overload sa browser ng user.
- Static Site Generator (SSG)
Sa loob ng static na tagabuo ng site, ang mga browser ay agad na humiling sa server para sa isang HTML file. Ang pahina ay ipinapakita sa gumagamit. Kinukuha ng SPA ang data, bumubuo ng mga view, at nilalagay ang document object model (DOM). Pagkatapos, ang SPA ay handa nang gamitin. Sa paghihinuha mula sa pangalan, ang mga SSG ay kadalasang angkop para sa mga static na pahina. Nagbibigay sila ng mga static na pahina na may mahusay at mabilis na opsyon. Para sa mga website na may dynamic na nilalaman, pinapayuhan ang mga user na pumili ng isa sa dalawa pang opsyon sa pag-render ng impormasyon.
Mga kalamangan ng mga single page application
Ang malalaking kumpanya tulad ng Meta, YouTube at Netflix ay lumipat mula sa mga multi-page na application patungo sa mga single-page na application. Nag-aalok ang mga SPA ng mas maayos na karanasan ng user, mas mataas na performance at kakayahang tumugon. Nasa ibaba ang mga benepisyo ng paggamit ng mga single page na application.
- Tampok sa pag-cache
Ang isang application na nag-iisang pahina ay gumagawa ng isang kahilingan sa server sa paunang pag-download at nagse-save ng anumang data na natatanggap nito. Maaaring gamitin ng mga mamimili ang natanggap na data upang gumana nang offline kung kinakailangan na ginagawang mas maginhawa para sa mga gumagamit dahil pinapayagan silang kumonsumo ng mas kaunting mapagkukunan ng data. Gayundin, kapag ang isang kliyente ay may masamang koneksyon sa Internet, ang lokal na data ay maaaring i-synchronize sa server kung pinapayagan ng LAN connection.
- Mabilis at tumutugon
Maaaring mapabuti ng paggamit ng mga SPA ang bilis ng isang website dahil nire-refresh lang nito ang hiniling na nilalaman sa halip na i-refresh ang buong page. Naglo-load ang mga SPA ng menor de edad na JSON file sa halip na isang bagong page. Tinitiyak ng JSON file ang mas mabilis na bilis at kahusayan sa paglo-load. Nagreresulta ito sa agarang pag-access sa lahat ng feature at function ng isang page nang walang anumang pagkaantala. Ito ay isang malaking plus, dahil ang oras ng pag-load ng isang website ay maaaring makabuluhang makaapekto sa kita at mga benta.
Nagbibigay-daan ang mga SPA para sa maayos na mga transition sa pamamagitan ng pagbibigay ng lahat ng impormasyon sa page kaagad. Ang website ay hindi kailangang i-update, kaya ang mga proseso nito ay mas mahusay kaysa sa karaniwang mga online na app.
Gayundin, sa mga SPA, mga asset gaya ng HTML, CSS, at mga script Java isang beses lang sila kukunin sa buong buhay ng isang aplikasyon. Ang kinakailangang data lamang ang ipinagpapalit pabalik-balik.
Ang mga page na may SPA ay nagbibigay-daan din sa mga user na mag-navigate nang mas mabilis salamat sa pag-cache at pinababang dami ng data. Tanging ang kinakailangang data ay ipinadala pabalik-balik at ang mga nawawalang bahagi lamang ng na-update na nilalaman ang dina-download.
- Pag-debug gamit ang Chrome
Nakikita at inaalis ng pag-debug ang mga bug, error, at mga kahinaan sa seguridad ng web application na nagpapabagal sa pagganap. Ginagawang madali ang pag-debug sa mga SPA gamit ang mga tool ng developer ng Chrome. Maaaring kontrolin ng mga developer ang pag-render ng JS code mula sa browser, i-debug ang mga SPA nang hindi nagsasala sa maraming linya ng code.
Ang mga SPA ay binuo sa ibabaw ng JavaScript frameworks gaya ng AngularJS at React na mga tool ng developer, na ginagawang mas madali itong i-debug gamit ang mga Chrome browser.
Binibigyang-daan ng mga tool ng developer ang mga developer na maunawaan kung paano hihiling ng data ang browser mula sa mga server, i-cache ito, at kung paano ito magpapakita ng mga elemento ng page. Bukod pa rito, pinapayagan ng mga tool na ito ang mga developer na subaybayan at suriin ang mga elemento ng page, mga pagpapatakbo ng network, at nauugnay na data.
- Mabilis na pagunlad
Sa panahon ng proseso ng pagbuo, ang front-end at back-end ng isang SPA ay maaaring paghiwalayin, na nagpapahintulot sa dalawa o higit pang mga developer na gumana nang magkatulad. Ang pagpapalit ng frontend o backend ay hindi makakaapekto sa kabilang dulo, kaya nagpo-promote ng mas mabilis na pag-unlad.
Maaaring muling gamitin ng mga developer ang server-side code at paghiwalayin ang mga SPA mula sa front-end na UI. Ang decoupled architecture sa mga SPA ay naghihiwalay sa mga front-end na display at back-end na serbisyo. Nagbibigay-daan ito sa mga developer na baguhin ang mga pananaw, bumuo at mag-eksperimento nang hindi naaapektuhan ang content o nababahala tungkol sa back-end na teknolohiya. Ang mga customer ay maaaring magkaroon ng pare-parehong karanasan sa paggamit ng mga application na ito.
- Pinahusay na karanasan ng user
Sa mga SPA, ang mga user ay makakakuha ng access sa mga natingnang page kaagad kasama ang lahat ng nilalaman nang sabay-sabay. Ito ay mas maginhawa dahil ang mga gumagamit ay maaaring mag-scroll nang kumportable at walang putol. Parang gumagamit ng native desktop o mobile app.
Nagbibigay ang mga SPA ng positibong UX na may natatanging simula, gitna, at pagtatapos. Gayundin, maaabot ng mga user ang gustong nilalaman nang hindi nagki-click sa maraming link, tulad ng sa mga MPA. Nakakaranas ka ng mas mababang mga bounce rate kapag nakakuha ang mga user ng agarang access sa impormasyon, hindi tulad ng mga MPA kung saan nadidismaya ang mga user dahil ang mga page ay tumatagal ng mahabang panahon upang mag-load. Mas mabilis din ang pag-navigate dahil muling ginagamit ang mga elemento ng page.
- Conversion sa IOS at Android application
Ang mga developer na gustong lumipat sa iOS at Android na mga application ay dapat gumamit ng mga SPA dahil mas madali silang mag-convert. Maaari nilang gamitin ang parehong code upang lumipat mula sa SPA patungo sa mga mobile application. Dahil ang buong code ay ibinigay sa isang pagkakataon, ang mga SPA ay madaling i-navigate, na ginagawang perpekto ang mga ito para sa mga mobile application.
- Cross-platform compatibility
Maaaring gumamit ang mga developer ng iisang code base upang bumuo ng mga application na maaaring tumakbo sa anumang device, browser, at operating system. Pinapaganda nito ang karanasan ng mamimili dahil magagamit nila ang SPA kahit saan. Nagbibigay-daan din ito sa mga developer at mga inhinyero ng DevOps na bumuo ng mga application na mayaman sa tampok, kabilang ang real-time na analytics, habang bumubuo ng mga application sa pag-edit ng nilalaman.
Mga kabiguan
Sa kabila ng lahat ng mga pakinabang ng mga application na nag-iisang pahina, ang ilang mga disadvantages ay lumitaw kapag gumagamit ng mga framework ng SPA. Sa kabutihang palad, ang trabaho ay isinasagawa upang mapagtagumpayan ang mga problemang ito sa mga SPA. Nasa ibaba ang ilang mga downsides;
- Search Engine Optimization (SEO)
Ito ay malawak na pinaniniwalaan na ang mga application ng solong pahina ay hindi angkop para sa SEO. Karamihan sa mga search engine, tulad ng Google o Yahoo, ay hindi nagawang i-crawl ang mga website ng SPA batay sa mga pakikipag-ugnayan ng Ajax sa mga server nang ilang sandali. Bilang resulta, ang karamihan sa mga SPA site na ito ay nanatiling hindi na-index. Sa kasalukuyan, ang mga Google bot ay itinuro kung paano gumamit ng JavaScript sa halip na regular na HTML upang i-index ang mga website ng SPA, na nakakasama sa mga ranggo.
Ang pagsisikap na ibagay ang SEO sa isang yari na SPA site ay mahirap at mahal. Ang mga developer ay kailangang bumuo ng isang hiwalay na website, na nai-render ng server ng search engine, na hindi mahusay at nagsasangkot ng maraming karagdagang code. Maaari ding gamitin ang iba pang mga diskarte gaya ng feature detection at pre-rendering. Sa mga pasilidad ng SPA, nililimitahan ng isang URL para sa bawat page ang mga kakayahan ng SEO para sa mga SPA.
- Bumalik at pasulong na nabigasyon na button
Ang mga browser ay nagse-save ng impormasyon upang matulungan ang mga web page na mag-load nang mabilis. Kapag pinindot ng mga consumer ang back button, inaasahan ng karamihan na ang page ay nasa estado na katulad ng huling beses na tiningnan nila ito, at mabilis na magaganap ang paglipat. Pinapayagan ito ng mga tradisyonal na arkitektura ng web sa pamamagitan ng paggamit ng mga naka-cache na kopya ng site at mga kaugnay na mapagkukunan. Gayunpaman, sa isang walang muwang na pagpapatupad ng isang SPA, ang pagpindot sa back button ay may parehong epekto gaya ng pag-click sa isang link. Nagdudulot ng kahilingan sa server, tumaas na lag, at nakikitang pagbabago ng data.
Para matugunan ang mga inaasahan ng user at makapagbigay ng mas mabilis na karanasan, dapat gayahin ng mga developer ng SPA ang functionality ng mga native na browser gamit ang JavaScript.
- I-scroll ang lokasyon
Ang mga browser ay nag-iimbak ng impormasyon tulad ng huling posisyon ng pag-scroll ng mga binisita na pahina. Gayunpaman, maaaring makita ng mga user na nagbago ang mga posisyon sa pag-scroll kapag nagna-navigate sa mga SPA gamit ang mga back and forward button ng browser. Halimbawa, sa Facebook, minsan ang mga user ay nag-scroll pabalik sa kanilang mga huling posisyon sa pag-scroll, ngunit kung minsan ay hindi. Nagreresulta ito sa suboptimal na karanasan ng user dahil kailangan nilang manu-manong ipagpatuloy ang pag-scroll pabalik sa dating posisyon ng pag-scroll.
Upang matugunan ang isyung ito, kailangan ng mga developer na magbigay ng code na nagse-save, kumukuha, at nag-uudyok para sa tamang posisyon ng pag-scroll habang nag-i-scroll pabalik-balik ang user.
- Pagsusuri sa website
Sa pamamagitan ng pagdaragdag ng analytics code sa isang page, masusubaybayan ng mga user ang trapiko sa page. Gayunpaman, pinahihirapan ng mga SPA na matukoy kung aling mga pahina o nilalaman ang pinakasikat dahil isa lamang itong pahina. Kailangan mong magbigay ng karagdagang code para masubaybayan ng analytics ang mga pseudo page habang tinitingnan ang mga ito.
- Mga isyu sa kaligtasan
Ang mga SPA ay mas madaling makompromiso sa pamamagitan ng cross site scripting. Pinapayagan nila ang mga consumer na i-download ang buong application, na inilalantad sa kanila ang higit pang mga pagkakataon upang makahanap ng mga kahinaan sa pamamagitan ng reverse engineering. Upang matugunan ang isyung ito, dapat tiyakin ng mga developer na ang lahat ng lohika sa panig ng kliyente na nauugnay sa seguridad ng web application, tulad ng pagpapatunay at pagpapatunay ng input, ay nadoble sa server para sa pag-verify. Gayundin, dapat magbigay ang mga developer ng limitadong access na nakabatay sa tungkulin.
Sa konklusyon
Minarkahan ng Single Page Apps ang susunod na hakbang sa ebolusyon ng mga karanasan sa app. Ang mga ito ay mas mabilis, mas intuitive at maaaring isama sa mga advanced na feature gaya ng pag-customize. Iyon ang dahilan kung bakit ang pinakamahusay na mga kumpanya na may maraming kasabay na mga gumagamit, tulad ng Gmail, Netflix o news feed ng Facebook, ay umaasa sa isang solong arkitektura ng pahina. Sa pamamagitan ng pagpapatupad ng teknolohiyang ito, ang mga negosyo ay makakakuha ng higit na halaga mula sa kanilang mga online na ari-arian at gumawa ng mga bagong pagpasok bilang isang digital na negosyo.
Ercole Palmeri
