tässä artikkelissa, minä saatan sinut läpi joitakin peruskäsitteitä rakentamiseen yhden sivun sovellukset (SPA) ja jotkut single-page application esimerkkejä luotu käyttämällä Syncfusion Essential JS 2 osia.
mikä on yhden sivun sovellus (SPA)?,
single-page application (SPA) on web-sovellus, jossa yhden root view-sivu on ladattu palvelimelta ja sitten, joka perustuu käyttäjän vuorovaikutusta, sovellus dynaamisesti päivittää sisältöä client-side ilman sivun reload.
Kylpylät ovat enemmän nestettä ja reagoiva kuin perinteiset monisivuinen sovelluksia ja ne ovat parhaiten luoda SaaS (Software as a Service), yrityksen mittaristot ja muut muoto-driven web-sovelluksia.,
SPA: n elinkaari
kylpylän rakentamiseen on useita kehyksiä, mutta kylpylän käsite pysyy joka kehyksessä samana. Nouda koko asiakaspuolen käyttöliittymä tai näkymä palvelimelta alustavan kuormituksen aikana. Sitten, perustuen käyttäjän vuorovaikutuksiin tai navigointiin sovelluksen kautta, käyttöliittymä päivittyy dynaamisesti asiakkaan puolella.
SPA käyttää minimi kaistanleveys yhteyttä palvelimeen ja päivittää tietoja käyttäjän vuorovaikutusta, ja noutaa päivitetyt tiedot kun virkistävä verkkosivun.,
Kuvan lähde : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
Edut SPA
Yhden sivun sovellukset ovat enemmän nestettä ja reagoiva kuin monisivuinen sovelluksia. Tämän vuoksi nämä sovellukset soveltuvat hyvin myös mobiililaitteisiin, eikä erillistä natiivi-mobiilisovellusta tarvitse rakentaa.
SPA tukee näkymäsivulla runsaasti vuorovaikutusta useiden komponenttien, kuten editorien ja ponnahdusikkunoiden kanssa. Näillä komponenteilla voi olla välitiloja, joita voi olla vaikeampi toteuttaa palvelinpuoleisella renderoinnilla.,
alkuperäisen sivukuorman lisäksi SPA käyttää käyttöliittymän päivittämiseen vähemmän kaistanleveyttä. Ei ole sivu päivittyy, kun käyttäjä navigoi sovelluksen, jolloin sovellus lisää mukava käyttää mobiililaitteilla.
view layer ja data layer ylläpidetään erikseen SPA, tämä on paljon helpompi ottaa käyttöön tuotannossa.
Tärkeitä käsitteitä SPA
Reititys
SPA, kaikki sisältö säilyy erillisiä Url-osoitteita ja voi navigoida eri sisältöä nopeasti käyttää näitä Url-osoitteita.,
yksisivuiset Sovellukset ylläpitävät tilaa käyttämällä URL-osoitteita tai ratatiloja sisäisesti käyttäjän navigoidessa sovelluksen kautta.
suurin käyttö-tapaus, jossa sivu reititys SPA on, kun henkilö jakaa URL. Kyseinen henkilö voi olla varma, että kuka tahansa, joka avaa kyseisen linkin, näkee täsmälleen saman sisällön navigoimalla sovelluksen täsmälliseen URL-osoitteeseen.
Data sitova ja synkronointi
SPA käyttää vain vähän kaistaa yhteyttä palvelimelle hakemalla tietoja tai päivittää tiedot malli kun käyttäjä on vuorovaikutuksessa sovelluksen.,
Kun käyttäjä navigoi sovelluksen, tiedot malli palvelin päivitetään samanaikaisesti käyttäen asynkroninen HTTP-pyynnön (AJAX).
käyttäjän vuorovaikutuksen perusteella tiedot päivitetään palvelimessa olevaan datamalliin. Ja nämä tiedon muutokset päivitetään takaisin käyttöliittymään samanaikaisesti, jolloin käyttäjä voi aina tarkastella päivitettyä verkkosivua virkistämättä sitä.
Nopea ja nesteen vasteaika
SPA on tunnettu, nopea ja saumaton vastauksia käyttäjän vuorovaikutusta., Niiden rikkaat rajapinnat käsittelevät käyttäjän toimintaa ja virkistävät käyttöliittymää dynaamisesti ilman viivettä tai pyyntöä palvelimelta. Näin he voivat välttää keskeytyksiä kokemukseen ja saada web-sovelluksen käyttäytymään enemmän työpöytäsovelluksen tavoin.
Erottaminen näkymä ja tietojen kerros
SPA on rakennettu käyttäen Model-View-Controller (MVC) ja Model-View-ViewModel (MVVM) – malleja, mutta voit silti rakentaa sovellusta oman MV* kuvio.,
näytä tiedosto (yhdessä CSS-bundle), joka pitää KÄYTTÖLIITTYMÄ tekee sovelluksen ja tietojen kerros sovellus on hyvin hoidettu erikseen SPA-arkkitehtuuri.
erottaminen näkymä ja tiedot kerros on tarkoitettu käyttäjän uudelleen näytä sivun eri aineistoja tai muuttaa näkymä-sivulla ilman, että se vaikuttaa tietomallin tuotannossa.
näytä ja tietojen kerros erottaminen SPA helpottaa versiointi ja palautus vannoo tuotannossa.,
Yhden sivun sovellus esimerkkejä ja demoja
Nämä ovat joitakin reaalimaailman yhden sivun sovellus esimerkkejä rakennettu käyttäen Olennainen JS 2 valvontaa.
Expense Tracker
Expense Tracker single-page-sovellus, esimerkiksi, esittelee useita Keskeisiä JS 2 valvonta yhdessä seurata ja visualisoida päiväraha suuri UI.,
Expense tracker – SPA –
eri verkkosivut sovellus, Kojelauta, Liiketoimia, ja Noin, käytä DataGrid, Kaavioita, ja muita Keskeisiä JS 2 valvonta visualisointiin tiedot malli. Tämä sovellus käyttää sivun reititysmekanismia sivun siirtymien navigointiin näkymien välillä.
käyttäjät voivat navigoida näiden näkymien joukossa käyttämällä URL-osoitteita, jotka luodaan jokaiselle verkkosivulle reitityksen vuoksi., Koska tämä sovellus on rakennettu SPA-arkkitehtuurilla,kaikki verkkosivut ladataan web-sovelluksen alussa. Sitten sivun siirtymät tapahtuvat täysin asiakkaan puolella pyytämättä palvelimen verkkosivuja. Navigoidessaan eri näkymiin sovelluksen URL päivitetään vastaavasti.
tietojen sitomisella on suuri merkitys SPA: ssa. Koska kaikki verkkosivut Ladataan asiakaspuolella, KÄYTTÖLIITTYMÄKOMPONENTIT on päivitettävä päivitetyillä tiedoilla silloin ja siellä., Suorittaessaan tahansa muokkauksen Tapahtuman www-sivulla, muutokset päivitetään tiedot malli samanaikaisesti. Nämä muutokset näkyvät myös muilla sivuilla käytettävissä olevissa KÄYTTÖLIITTYMÄKOMPONENTEISSA.
Koska SPA soveltuvat hyvin renderöinti sekä työpöydän selaimissa ja mobiili ympäristöissä, tämä sovellus on rakennettu nesteen ja reagoiva muotoilu tekee mobiililaitteisiin.
tämän sovelluksen livedemo löytyy verkkosivuiltamme ja lähde löytyy Githubista täältä.,
Expense Tracker – Mobile tarkastella
Web Mail
Web-Sähköposti on yhden sivun sovellus, esimerkiksi Outlook kaltainen käyttöliittymä, rakennettu hallintaan postilaatikko.
Tämä sovellus on rakennettu runsaasti rajapintoja ja vuorovaikutteisen suunnittelun avulla Syncfusion osia, kuten Harmonikka, ListView, ja Sivupalkissa kuin yhden-näkymä verkkosivun. Sovellus on jaettu kolmeen osaan hallintaan postilaatikko: mail kansiot, sähköposti kohteita, ja sähköpostin sisältö-alueella., Koska sen reagoiva suunnittelu, Tämä sovellus voidaan renderöidä helposti mobiililaitteiden ja työpöydän selaimet.
tietojen sitomisella on tässä sovelluksessa merkittävä rooli postilaatikon päivittämisessä ja postin sisällön näyttämisessä käyttäjän vuorovaikutukseen perustuen. Postiluettelon kohteet päivitetään asianmukaisella sisällöllä käyttäjien valinnan perusteella sähköpostikansioissa. Postialuetta päivitetään päivitetyllä sisällöllä, kun käyttäjä valitsee postiluettelosta postiosoitteen.
tämän sovelluksen livedemo löytyy verkkosivuiltamme ja lähde löytyy GitHubista.,
Web-Mail – SPA –
sovellus käsittelee useita käyttäjän vuorovaikutusta ja virkistää sisältöä vastaavasti ilman mitään sivu päivittyy, jolloin sovellus näyttää työpöydän sovellus.
tämän sovelluksen reagoiva muotoilu tekee helpoksi renderöidä mobiililaitteilla, joissa on paras käyttöliittymä.,
lainalaskuri
Laina Laskin on yhden sivun sovellus esimerkki, joka esittelee komponentit, kuten DataGrid, Kaavioita, Liukusäädintä, ja toiset yhteen-katso sivu laskettaessa lainan maksut perustuvat lainan määrä, korko, ja termi.,
Laina Laskin – SPA –
tiedot sitova tämä sovellus toimii siten, että, kun säädät arvot lainan määrä, korko, ja termi käyttämällä liukusäädintä komponentti, tietoja kartta ja grid osia päivitetään tarvittavat tiedot vastaavasti.
karttasisältöä voi myös päivittää valitsemalla haluamansa kuukauden katsottavaksi DatePicker-ohjauksella. Kun katselukuukautta muutetaan, palautetaan vastaavan kuukauden tiedot mallista., Sama päivittyy myös karttojen ohjaukseen.
tämän sovelluksen livedemo löytyy verkkosivuiltamme ja sen lähde löytyy Githubista.
Terveys Tracker
Terveys Tracker on toinen single-page application esimerkki seurata henkilön terveyttä seuraamalla niiden saanti elintarvikkeiden, kävelty, vettä kulutetaan, ja unen keston.
Tämä sovellus on rakennettu runsaasti rajapintoja ja vuorovaikutteisen suunnittelun avulla Syncfusion säätöjä, kuten Kaavioita ja Kortti kuin yhden-näkymä verkkosivun. Tietojen sitomisella esitellään kaavion tietoja., Näytteen lähde löytyy tästä GitHub-paikasta.
Terveys Tracker – SPA –
Kaavio Rakentaja
Kaavio Builder on sovellus, joka auttaa luoda erilaisia kaavioita eri käyttötapauksia, kuten organisaatiokaavioita, hierarkkinen puita, ja käsitekarttoja.
Tämä sovellus on rakennettu tehokas ja monipuolinen säätöjä, kuten Kaavio, vä, rivalitsin, Dialogi, ja Alue Liukusäädintä. Näytteen lähde löytyy tästä GitHub-paikasta.,
Kaavio Rakentaja – SPA –
Tarina Estimaattori
Tarina Estimaattori on tehokas, Ketterä-pohjainen työkalu, jolla arvioidaan tarina pistettä tarinoita käyttäen Suunnittelu Poker tekniikoita.
Tämä sovellus on rakennettu valvontaa kuten DataGrid, Kaavioita, Input Mask, Button, Radio Button ja CheckBox. Näytteen lähde löytyy tästä GitHub-paikasta.,
Tarina Arviointityökalu – SPA –
Varastossa Chart
Varastossa Chart käytetään seurata ja visualisoida osakekurssi tahansa yritys yli tietyn ajan.
Tämä sovellus on rakennettu Kaavioita, Toolbar, DateTimePicker, Avattavaan, ja Painiketta valvontaa. Sen lähde löytyy GitHubista.,
Varastossa Chart – SPA –
Asset Management
Asset Management sovellus on yhden sivun sovellus esimerkiksi käyttää seurata ja visualisoida ohjelmisto ja laitteisto varat organisaatio.
Tämä sovellus on rakennettu DataGrid, Kaavioita, TreeMap, ja DateRangePicker valvontaa. Sen lähde löytyy GitHubista.,
Asset Management – SPA –
Huomioitavaa SPA
Lisäksi useita etuja yhden sivun sovellus, on olemassa joitakin erityisiä näkökohtia pitää mielessä, SPA:
- Yksi olisi varmistettava, olio-periaatteita luotaessa SPA. Jos sitä ei oteta huomioon, se johtaa selaimen sisällä tapahtuviin muistivuotoihin. Siten aiheuttaa sovelluksen hidastaa, mikä heikentää sen suorituskykyä.
- käsittele selaimen takapainiketta oikein yksisivuisissa sovelluksissa., Jos ei, käyttäjä voi napsauttaa selaimen takaisin-painiketta, mikä johtaa työnkulun menetykseen.
oikeilla tekniikoilla voidaan kuitenkin puuttua kaikkiin näihin kysymyksiin.
Tiivistelmä
tämä blogi, näimme edut yhden sivun sovelluksia yli monisivuinen sovelluksia. Näimme myös reaalimaailman yhden sivun sovellusesimerkkejä rakennettu useita Syncfusion Essential JS 2 valvontaa.
aiemmin keskusteltu yhden sivun sovellus esimerkkejä ovat saatavilla myös Kulma -, JavaScript -, ASP.NET Ydin, ja ASP.,NET MVC alustat, ja löydät live demo näistä sovelluksista sivuillamme. Voit myös tarkistaa muita Syncfusion-komponenteilla rakennettuja reaalimaailman sovelluksia täältä.
suosittelemme tarkistaa lähdekoodia itse, saatavilla GitHub, joka on helposti ajettavissa, nähdä, kuinka yhden sivun sovellukset on rakennettu käyttäen Syncfusion osia.