Iepazīstinām ar Inertia.js

Tīmekļa lietojumprogrammu izveide var būt ļoti biedējošs process. Pirms izvēlēties no daudzajiem ietvariem un bibliotēkām, jums ir jāpadomā, vai tā būs tradicionāla servera puses renderēta lietotne (SSR) vai vienas lapas lietojumprogramma (SPA).

Lai gan gan servera, gan klienta puses renderēšanai ir savi plusi un mīnusi, Inerce apvieno labāko no abām pasaulēm.

Kas ir Inertia.js?

Inertia ir bibliotēka, kas apvieno labāko no servera puses renderēšanas (SSR) un klienta puses renderēšanas (CSR), ļaujot izstrādātājiem izveidot SPA, izmantojot servera puses maršrutēšanu un kontrolierus.

Saskaņā ar tās oficiālā dokumentācija :

Inertia ir jauna pieeja klasisko serveru vadītu tīmekļa lietotņu izveidei. Mēs to saucam par mūsdienu monolītu. Inerce ļauj jums izveidot pilnībā klienta pusē renderētas vienas lapas lietotnes bez īpašas sarežģītības, ko nodrošina mūsdienu SPA. Tas tiek darīts, izmantojot esošās servera puses sistēmas.

---

Daži varētu jautāt, vai šī ir vēl viena JavaScript sistēma? The dokumentācija ir ko teikt:

sonāra mašīnraksts lcov reportpaths

Inerce nav ietvars, ne arī jūsu esošo servera vai klienta puses ietvaru aizstājējs. Drīzāk tas ir paredzēts darbam ar viņiem. Padomājiet par inerci kā līmi, kas savieno abus.

Problēma Inertia.js atrisina

Inerce atrisina daudzas problēmas, ar kurām saskaras izstrādātāji, veidojot modernas lietojumprogrammas. Problēmas, piemēram:

SPA sarežģītības— modernu SPA celtniecība ir saistīta ar zināmām grūtībām. Izstrādātājiem vienmēr ir bijušas problēmas ar efektīvu lietotnes stāvokļa pārvaldību, lietojumprogrammas maršruta noteikšanu, navigācijas aizsargu iestatīšanu un autentifikāciju. API izveide— Izmantojot Inertia.js, jums nav jāveido REST vai GraphQL API, jo Inertia tika izveidots, lai strādātu ar jūsu klasiskajiem servera puses ietvariem, piemēram, Laravel, Ruby on Rails vai Django Pārlūkprogrammas problēmas— Inertia ir iebūvēti pakalpojumi, kas atrisina pārlūkprogrammas problēmas, ar kurām saskaras, veidojot ĪAT, piemēram:
• Pārlūka vēstures pārvaldība un ritināšanas pozīcija — tas nodrošina |_+_| , |_+_| un |_+_| rekvizītus, lai kešatmiņā saglabātu vietējo komponentu stāvokļus
• Ielādes indikācija — tā kā Inertia pieprasījumi tiek veikti, izmantojot AJAX zvanus, nav noklusējuma pārlūkprogrammas ielādes indikatora, tāpēc Inertia ietver NProgress.js , progresa joslas bibliotēka. Iekraušanas indikators tiek rādīts tikai tad, ja pieprasījums ilgst vairāk nekā 250 m
• Līdzekļu pārlādēšana un versiju izveide — Inertia nodrošina iespēju izsekot un saglabāt jūsu vietnes aktīvu pašreizējo versiju

Kāpēc jums vajadzētu izmantot Inertia.js?

GraphQL priekšrocības, neizmantojot GraphQL

Inerce nodrošina pilnīgu piekļuvi konkrētu vaicājumu izpildei datu bāzē, lai iegūtu lapai nepieciešamos datus, vienlaikus izmantojot servera puses ORM kā datu avotu.

Ierobežoti AJAX zvani

Tradicionālajos SPA AJAX zvani tiek veikti katrā lapas apmeklējumā, lai iegūtu datus. Inerciā tiek veikts AJAX izsaukums, lai palaistu lietotni, pēc tam tā uztur pastāvīgu Vue.js instanci, un katrs nākamais lapas apmeklējums tiek veikts, izmantojot XHR ar īpašu |_+_| galvene iestatīta uz |_+_|. Tas aktivizē serveri, kas nosūta Inertia atbildi kā JSON, nevis veic visas lapas apmeklējumu.

Tas arī izveido pretatteices komponentu, kas aptver standarta enkura saiti, pārtver klikšķu notikumus un novērš pilnas lapas atkārtotu ielādi.

Drošība

Veidojot API darbināmas lietotnes, mums mūsu lietotnei ir jāpievieno CORS atbalsts, lai varētu piekļūt resursiem no citiem avotiem.

Izmantojot Inertia, jums nav jāuztraucas par CORS iestatīšanu, jo jūsu dati tiek nodrošināti, izmantojot jūsu kontrolleri un atrodas tajā pašā domēnā, kur jūsu JavaScript komponenti.

Varat iestatīt autorizāciju servera pusē un veikt autorizācijas pārbaudes, apejot marķierus kā lapas komponentu rekvizītus. Tas palīdz samazināt svarīgas informācijas atklāšanas risku, jo tiek apstrādāta informācija. klienta autorizācijas var pakļaut XSS uzbrukuma riskam (vairāku vietņu skriptēšana).

Ietvara agnostiķis

Inerce ir gan servera, gan klienta puses sistēmas agnostiķis. Varat izmantot Inertia ar jebkuru servera puses sistēmu, kā arī jebkuru klienta puses sistēmu, kas atbalsta dinamiskos komponentus.

Inertia adapteri ir pakalpojumi (paketes), kas palīdz Inertia labi darboties ar noteiktiem ietvariem. Oficiālais adaptera atbalsts pašlaik ir ierobežots līdz Sliedes , Laravels aizmugurē, un Reaģēt , View.js , Svelte priekšgalā.

Ir neoficiāli adapteri dažiem citiem ietvariem, piemēram, Symfony , Django , KūkaPHP , un Adonis .

Vai Inercijai ir nākotne?

Tīmeklis nepārtraukti attīstās, un mēs esam redzējuši pāreju no tradicionālajām servera pusē iebūvētām monolītām lietotnēm uz API darbināmām lietotnēm. Vai ar šo pašreizējo tendenci Inercijai ir nākotne?

Protams, atbilde uz jautājumu ir atkarīga no lietošanas gadījuma un vēlmēm.

Inertia ir paredzēts cilvēkiem, kuri vēlas veidot monolītas lietojumprogrammas — viņi parasti dod priekšroku ciešai saiknei starp kontrolieriem un saviem skatiem, taču vēlas arī veidot savas lietotnes, izmantojot modernus klienta puses ietvarus. Lielākā daļa izstrādātāju joprojām ietilpst šajā kategorijā, bet ar pieaugums un nozares atbalsts API darbināmām lietotnēm , mēs varētu redzēt, ka tā lietojums samazinās.

Protams, ir gadījumi, kad Inertia lietošana var nebūt vislabāk piemērota. Situācijas, piemēram, kad jums ir nepieciešams vairāku klientu atbalsts, klientiem paredzētas/mārketinga lapas un uz SEO balstītas vietnes. Inerces izmantošana, iespējams, nav laba ideja. Taču ir ļoti noderīgi izveidot tīmekļa lietojumprogrammas, kas nodrošina informācijas paneļus un citas funkcijas.

Vai ar Inertia ir iespējama servera puses renderēšana?

Inertia pašlaik neatbalsta servera puses renderēšanu, taču ir rīki Inertia vietņu iepriekšējai renderēšanai. Tie ģenerē un saglabā kešatmiņā statiskas HTML versijas par konkrētiem jūsu vietņu maršrutiem un pēc tam apkalpo šo saturu.

Sāciet izmantot Inertia.js savā projektā

Priekšnoteikumi

Šajā instalēšanas procesā tiek izmantota Laravel servera pusei un Vue.js klienta pusei. Šajā sadaļā ir jāievēro tālāk norādītais.

• Node.js 10x vai augstāks un Dzija / Instalēta npm 5.2 vai jaunāka versija datorā
• PHP >= 7.2.0, Komponists un Laravels instalēta jūsu datorā
• Vue un Laravel pamati

Izveidojiet jaunu Laravel projektu:

Vai izveidojiet ar komponistu:

|_+_| projektā:

ugunskura monētu cenas prognoze

Instalējiet Inertia servera puses adapteri, izmantojot komponistu:

Pārdēvējiet |_+_| fails atrasts jūsu |_+_| mapi uz |_+_|.

Aizstājiet sava |_+_| saturu ar šo:

|_+_| direktīva ir palīgs, kas izveido bāzi |_+_| ar |_+_| no |_+_| kas satur lapas informāciju, tas norāda Laravel, ka skati tiek ģenerēti, izmantojot inerci.

Pēc tam iestatiet klienta puses adapteri, terminālī izpildot šo komandu:

Atveriet savu |_+_| fails atrasts |_+_| un aizstājiet sava |_+_| saturu failu ar šādu:

|_+_| atzvanīšana norāda Inertia, kā ielādēt lapas komponentu. Tas saņem virkni kā lapas nosaukumu un atgriež lapas gadījumu.

Dinamiskais imports

Lai iespējotu koda sadalīšanu, dinamiskai importēšanai izmantojam spraudni babel.

Vispirms instalējiet to, izpildot šo komandu:

Pēc tam izveidojiet |_+_| failu savu projektu saknes direktorijā ar šādu:

Visbeidzot atjauniniet |_+_| atzvanīšana jūsu lietotnes inicializācijā, lai izmantotu |_+_| vietā |_+_|. Atzvanīšana atgriež solījumu, kas ietver komponenta gadījumu, piemēram:

kur nopirkt taco

Secinājums

Inertia ir lieliska bibliotēka hibrīdu SPA veidošanai. Šajā rakstā mēs apskatījām tā dzīvotspēju tuvākajā nākotnē, tā priekšrocības un to, kā to izmantot Laravel un Vue projektā.

Izrakstīšanās inerce ieslēgta Github un Šis raksts sarakstījis Džonatans Reininks lai uzzinātu vairāk. Amatpersona dokumentācija ir arī labi uzrakstīts un ir lielisks resurss, lai sāktu ar to.