Laravel Inertia: Zjednodušenie vývoja frontendu…

Inertia slúži ako zmena hry v oblasti vývoja Laravel, ktorá ponúka integrovanejší a efektívnejší prístup k budovaniu moderných webových aplikácií.

Inertia with Laravel ponúka známy pracovný postup pre vývojárov, ktorí sú už zvyknutí na prácu s Laravelom. Výrazne znižuje krivku učenia, ktorá je zvyčajne spojená s prechodom na úplne samostatný frontendový rámec.

Táto jednoduchá integrácia umožňuje vývojárom využiť svoje existujúce zručnosti Laravel a ťažiť zo schopnosti Inertia modernizovať frontend bez potreby kompletnej zmeny architektúry aplikácie.

Používanie Inertia s Laravelom ponúka mnoho výhod, od výhod zjednoteného zásobníka až po zvýšenú efektivitu, čím sa vytvára hladší a pre vývojárov prijateľnejší zážitok.

V tomto blogovom príspevku sa ponoríme do dôvodov používania Inertia s Laravelom, preskúmame jeho funkčnosť a prevedieme vás procesom, ako začať s Laravel Inertia na DreamHost.

Tablet Obsahu

Prečo používať zotrvačnosť s Laravelom?

Inertia.js je výkonný nástroj, ktorý hladko spája moderné možnosti frontendu s rámcami na strane servera, ako je Laravel. Jeho integrácia s Laravelom ponúka podstatné vylepšenie tradičných serverových webových aplikácií.

Primárna výhoda spočíva v jeho schopnosti vytvárať dynamickejšie a interaktívnejšie používateľské rozhrania pri zachovaní robustných backendových funkcií, ktorými je Laravel známy.

Zdieľaná štruktúra kódu medzi frontend a backend operáciami nielen zvyšuje produktivitu vývojárov, ale prispieva aj k lepšej údržbe a škálovateľnosti aplikácie.

Aký problém rieši Laravel Inertia?

Zotrvačnosť s Laravelom zefektívňuje proces vývoja uľahčením a jednostránková aplikácia (SPA) pocit bez úplného prechodu na plnohodnotnú architektúru SPA. To umožňuje vývojárom vytvárať reaktívne, dynamické rozhrania pomocou moderných frontendových rámcov, ako sú Vue.js alebo React, a zároveň využívať možnosti vykresľovania na strane servera Laravel.

Inertia navyše zjednodušuje dátový tok medzi frontendom a backendom pomocou ovládačov Laravel na spracovanie logiky frontendu aj backendu. Táto súdržnosť zefektívňuje proces vývoja, eliminuje potrebu vytvárať samostatné koncové body API a zabezpečuje koherentnejšiu kódovú základňu.

Čítať:  Ako napísať titulky na Instagrame, ktoré upútajú pozornosť (v dobrom zmysle!)

Ako funguje zotrvačnosť?

Inertia.js zásadne mení spôsob, akým frontend a backend interagujú v rámci webovej aplikácie. Inertia vo svojom jadre poskytuje moderný frontendový zážitok pri zachovaní tradičnej serverom riadenej backendovej architektúry Laravel. Dosahuje to vytvorením mosta, ktorý bezproblémovo spája backend a frontend.

Keď používateľ interaguje s frontendom, namiesto tradičných celostránkových požiadaviek, Inertia využíva XHR (XMLHttpRequest) alebo Fetch API na komunikáciu s backendom. Táto komunikácia prenáša iba nevyhnutné údaje potrebné pre konkrétnu akciu.

Pracovné mechanizmy

  • Po kliknutí používateľa klient odošle požiadavku na server pomocou tohto mechanizmu, čím spustí príslušnú metódu ovládača Laravel.
  • Kontrolér spracuje požiadavku a vráti odpoveď zotrvačnosti, ktorá obsahuje potrebné údaje na aktualizáciu stránky bez úplného opätovného načítania.
  • Klient Inertia na frontende dostane túto odpoveď, použije údaje na aktualizáciu obsahu stránky a bez problémov upraví používateľské rozhranie na základe prijatých informácií.

Jednoducho povedané, takto funguje Inertia.

Prečo používať s jednostránkovou aplikáciou (SPA)?

Zotrvačnosť s architektúrou Single Page Application (SPA) ponúka účinnú kombináciu, ktorá využíva silné stránky oboch prístupov.

SPA svojim dizajnom ponúkajú vysoko citlivú a plynulú používateľskú skúsenosť načítaním jedinej HTML stránky a následnou dynamickou aktualizáciou jej obsahu, keď používatelia interagujú s aplikáciou.

  • Vylepšená používateľská skúsenosť: SPA vynikajú v poskytovaní bezproblémových skúseností podobných aplikáciám, znižovaní opätovného načítavania stránok a dynamickom poskytovaní obsahu. Zotrvačnosť to dopĺňa tým, že umožňuje SPA zachovať si túto vysokú úroveň interaktivity a zároveň ťažiť z backendovej štruktúry Laravel.
  • Zjednodušený vývoj: Kombinácia Inertia s SPA znižuje zložitosť správy smerovania frontendu, stavu a integrácií API. Prístup Inertia umožňuje vývojárom využiť silu SPA a zároveň zachovať priamu komunikáciu na backende a frontende.

Konzistentný vývojový pracovný postup: Inertia udržiava pracovný postup, ktorý je v súlade so štruktúrou Laravelu, čo uľahčuje vývojárom, ktorí už poznajú Laravel, prechod na modernejší prístup založený na SPA bez toho, aby sa museli učiť úplne nové front-end technológie.

Začíname na Laravel Inertia With DreamHost

Aby sme pochopili Inertia a ako ju integrovať s Laravelom, vytvoríme blogovú webovú aplikáciu s názvom CW Blog pomocou najvýkonnejšej kombinácie Laravel pre backend, Vue.js pre JavaScript frontend a Tailwind CSS pre styling.

Predpoklady

Aby ste z tohto návodu vyťažili maximum, mali by ste sa oboznámiť s nasledujúcim:

  • Základy Laravelu (inštalácia, databáza, migrácia databáz, Eloquent Models, ovládače a smerovanie)
  • Základy Vue.js (inštalácia, štruktúra a formuláre)

Krok 1: Nainštalujte základné prvky

  • Začneme vytvorením jednostránkovej aplikácie.
  • Vytvorte komponent Blade na zobrazenie domovskej stránky blogu a jedného článku na blogu ako „/resources/views/index.blade.php“.

< meta name="viewport" content="width=device-width, initial-scale=1" /> Blog CW

Blog CW

Prečítajte si naše najnovšie články

< /section>

Pripojte sa k nášmu bulletinu

Krok 2: Nastavenie Blade File

  • Teraz je čas vytvoriť nový súbor s príponou .blade.php.
  • Ak to chcete urobiť, vo svojom blogu projektu Laravel/resources/views prejdite na „/resources/views/show.blade.php“:

< meta name="viewport" content="width=device-width, initial-scale=1" /> Blog CW

Názov blogu

Obsah článku ide tu

Pripojte sa k nášmu bulletinu

  • Vytvorte novú lokálnu databázu MySQL s názvom CW_blog a pripojte ju k svojmu projektu:.env“:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=CW_blog DB_USERNAME=root DB_PASSWORD=

  • Spustite databázový model, migrácie a továrne vo svojej aplikácii laravel: “app/Models/Article.php“:

  • Spustite migráciu databázy a exportujte ukážkové články do svojej databázy na „database/migrations/create_articles_table.php“:
  • id(); $table->string(‘title’); $table- >text(‘excerpt’); $table->text(‘body’); $table->timestamps(); }); } public function down() { Schéma::dropIfExists(‘články’); } };

    • Spustite nasledujúci kód a vytvorte novú triedu ArticleFactory, ktorá bude ukladať naše demo články do našej databázy.

    To je všetko, čo potrebujeme, aby sme mohli začať! Poďme na vec a predstavme Inertia.js nášmu projektu.

    Nainštalujte Inertia

    Proces inštalácie Inertia je rozdelený do dvoch hlavných fáz: na strane servera (Laravel) a na strane klienta (VueJs).

    Oficiálna inštalačná príručka v dokumentácii Inertia je trochu zastaraná, pretože Laravel 9 teraz štandardne používa Vite, ale prejdeme si to tiež.

    Krok 1: Nastavenie na strane servera

    Prvá vec, ktorú musíme urobiť, je použiť terminál na inštaláciu adaptérov Inertia na strane servera pomocou Composer. Ak chcete použiť InertiaJS s Laravel, musíte nainštalovať požadovaný balík spustením „composer required inertiajs inertia-laravel“.

    • Teraz nastavte súbor koreňovej šablóny v Blade, ktorý načíta vaše súbory CSS a JS a koreň zotrvačnosti na spustenie vašej aplikácie JavaScript. Je dôležité aktivovať funkčnosť Vite v spojení s Laravel 9 v9.31 jej pridaním do našich značiek v /resources/views/app.blade.php:

    < meta name="viewport" content="width=device-width, initial-scale=1" /> {{ config(‘app.name’, ‘Laravel ‘) }} @vite(‘resources/js/app.js’) @inertiaHead @inertia

    • Ďalej vytvoríme middleware HandleInertiaRequests a zverejníme ho v našom projekte.
    • Môžeme to urobiť spustením nižšie uvedeného príkazu terminálu v koreňovom adresári nášho projektu:

    php remeselná zotrvačnosť:stredný softvér

    • Po dokončení prejdite na „App/Http/Kernel.php“ a zaregistrujte HandleInertiaRequests ako poslednú položku vo vašom webovom middleware:

    ‘web’ => [
    // …
    App\Http\Middleware\HandleInertiaRequests::class,
    ],

    Krok 2: Nastavenie na strane klienta

    Ďalej musíme nainštalovať naše frontendové závislosti Vue.js 3 rovnakým spôsobom ako na strane servera:

    npm install @inertiajs/inertia @inertiajs/inertia-vue3

    • Ďalej musíte stiahnuť Vue.js 3:

    npm install vue@next

    • Aktualizujte svoj primárny súbor JavaScript na inicializáciu Inertia.js pomocou Vue.js 3, Vite a Laravel:

    import “./bootstrap”; importovať “../css/app.css”; import { createApp, h } z “vue”; import { createInertiaApp } z “@inertiajs/inertia-vue3”; import { resolvePageComponent } z “laravel-vite-plugin/inertia-helpers”; createInertiaApp({ title: (title) => `${title} – ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob( “./Pages/**/*.vue”) ), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) ) .mount(el); }, });

    • Používame zásuvný modul resolvePageComponent od Laravelu a inštruujeme ho, aby vyriešil naše komponenty z adresára ./Pages/$name.vue.
    • Toto slúži na uloženie našich komponentov Inertia do tohto adresára neskôr v našom projekte a tento doplnok nám pomôže automaticky načítať tieto komponenty zo správneho adresára.
    • Zostáva len nainštalovať vitejs/plugin-vue:

    npm a @vitejs/plugin-vue

    • A aktualizujte súbor vite.config.js:

    import { defineConfig } z “vite”; importovať laravel z “laravel-vite-plugin”; importovať vue z “@vitejs/plugin-vue”; exportovať defaultdefinConfig({ plugins: [
    laravel({
    input: [“resources/css/app.css”, “resources/js/app.js”]refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], });

    • Posledným krokom je inštalácia našich závislostí a kompilácia našich súborov:

    npm install npm run dev

    Toto je to. Máte fungujúcu aplikáciu Laravel 9 s Vue.js 3 a Vite.

    Vytváranie zotrvačných stránok

    • Teraz vytvoríme priečinok s názvom „Stránky“ a presunieme tam vaše súbory.
    • Potom transformujeme komponent blade „.blade.php“ na „.vue“, pričom prvé písmeno ich mien dáme na veľké a jeho obsah zmeníme na štandardný komponent Vue.js.
    • Všetky značky presunieme spolu s komponentmi, pretože sú už zahrnuté v hlavnom koreňovom komponente blade.

    Nastavenie show.vue

    Teraz nastavíme stránku „resources/js/Pages/Show.vue“, ktorá bude predstavovať rozloženie našej aplikácie.

    Baliace komponenty

    • Vytvorte priečinok s názvom „Layouts“ v „/resources/js“. V tomto priečinku vytvorte súbor s názvom „CWLayout.vue“.
    • Súbor bude obsahovať samostatné časti pre hlavičky a päty, pričom hlavná časť je navrhnutá tak, aby obsahovala ďalšie komponenty.

    Tento súbor by mal vyzerať takto:

    Vytvára sa Index.vue:

    Teraz naimportujeme nové rozloženie na naše stránky a zabalíme doň celý obsah HTML.

    import CWLayout z “../Layouts/CWLayout.vue”;

    Show.vue:

    Spustite nasledujúci skript, aby ste zobrazili rozloženie, ktoré sme vytvorili v predchádzajúcom skripte.

    import CWLayout z “../Layouts/CWLayout.vue”;

    Laravel Routes a Inertia Render

    Je načase vložiť nejaké články do našej databázy, ktorú sme vytvorili na začiatku tohto návodu.

    create(); } }

    Spustite nasledujúci príkaz na migráciu tabuliek a nasadenie falošných údajov z tovární:

    php artisan migrate:fresh –seed

    V databáze sa tak vytvorí 10 ukážkových článkov, ktoré budeme musieť odovzdať do nášho zobrazenia pomocou smerovania Laravel.

    Volanie „routes/web.php“:

    Keďže na zobrazenia používame zotrvačnosť, vytvorte trasu zotrvačnosti Laravel v „routes/web.php“ a vráťte zobrazenie domovskej stránky z „/resources/js/Pages/Index.vue“.

    meno(‘domov’);

    Prejdite do súboru Index a vložte informácie, ktoré ste získali, ako rekvizitu. Potom použite v-for na zobrazenie výsledkov v slučke. V rámci značiek skriptu nastavte prijaté dáta ako rekvizitu.

    Inertia potrebuje vedieť, aký druh informácií chcete, napríklad zoznam článkov.

    import CWLayout z “../Layouts/CWLayout.vue”; defineProps({ články: Objekt, });

    Urobme slučku:

    Používanie Tailwind CSS s Inertia.js

    • Keďže Tailwind je už v počiatočnom bode nainštalovaný v našom projekte, všetko, čo musíme urobiť, je povedať mu, aby si prečítal naše komponenty Inertia. To sa dá dosiahnuť úpravou súboru „tailwind.config.js“ takto:

    /** @type {import(‘tailwindcss’).Config} */ module.exports = { content: [
    “./storage/framework/views/*.php”,
    “./resources/views/**/*.blade.php”,
    “./resources/js/**/*.vue”,
    ]téma: { extend: {}, }, pluginy: []};

    • Potom sa uistite, že sme importovali náš súbor CSS do „resources/js/app.js“:

    importovať “../css/app.css”;

    • A teraz sme pripravení na štýl našich komponentov v „resources/js/Pages/Index.vue“:

    import CWLayout z “../Layouts/CWLayout.vue”; defineProps({ články: Objekt, });

    • Pridajte nové komponenty štýlu do „resources/js/Layouts/CWLayout.vue“:

    • Je to tu! Máte fungujúce SPA s 10 ukážkovými blogmi pomocou Laravel Inertia

    Laravel Inertia verzus tradičný vývoj frontendu

    Laravel Inertia predstavuje integrovanejší a efektívnejší prístup kombináciou backendových a frontendových technológií, čím sa znižuje zložitosť správy samostatných kódových báz.

    Tu je podrobná porovnávacia tabuľka, ktorá načrtáva rozdiely medzi Laravel Inertia a Tradičným vývojom frontendu;

    Aspekt Laravel Inertia Tradičný vývoj frontendu
    Zásobník technológií Kombinuje backend (Laravel) s Vue.js alebo React na frontende Používa samostatné frontendové rámce (React, Vue.js)
    Rýchlosť vývoja Urýchľuje vývoj znížením prepínania kontextu Môže vyžadovať časté prepínanie kontextu medzi backendom a frontendom
    Vykresľovanie a smerovanie Vykresľovanie na strane klienta so smerovaním riadeným serverom Vykresľovanie na strane servera so smerovaním spravovaným klientom
    Požiadavky API a načítanie údajov Zjednodušené požiadavky API so zdieľateľnými trasami Laravel Manuálne spracovanie požiadaviek API a načítanie údajov
    Integrácia šablóny motora Integruje sa s Blade pre serverom vykreslené šablóny Spolieha sa na šablónovacie motory, ako sú riadidlá, EJS
    Štátny manažment Zjednodušuje správu stavu pomocou serverom riadeného stavu Manuálna správa stavu pomocou nástrojov ako Redux
    SEO a výkonnosť načítania stránky Vylepšené SEO vďaka vykresľovaniu na strane servera SEO môže vyžadovať ďalšie konfigurácie
    Krivka učenia Skrátená doba učenia pre vývojárov, ktorí poznajú Laravel Vyžaduje si odbornosť v samostatných frontendových rámcoch
    Podpora ekosystémov a komunity Rastúca podpora komunity v rámci ekosystému Laravel Vybudované komunity okolo frontendových rámcov
    Údržba a aktualizácie Zjednodušená údržba s jednotnou kódovou základňou Aktualizácie môžu vyžadovať synchronizáciu samostatných backendových a frontendových kódov
    Jednoduchosť a čitateľnosť kódu Podporuje jednoduchšiu štruktúru kódu a lepšiu čitateľnosť Môže zahŕňať zložité oddelenie a správu kódu
    Testovanie Jednoduchšia integrácia backend/frontend na testovanie Oddelené testovacie prostredia pre frontend a backend

    Záver

    Laravel Inertia rieši odvekú výzvu vytvárania bezproblémových, dynamických a pohotových webových aplikácií zjednodušením komunikácie medzi backendom a frontendom.

    Tradičné prístupy často zahŕňajú zložité nastavenia, žonglovanie medzi rôznymi jazykmi šablón a manuálnu synchronizáciu údajov medzi serverom a klientom.

    Bezproblémová integrácia Inertia s Laravelom ponúka výhody z hľadiska rýchlosti vývoja, údržby a jednoduchosti kódu.

    Okrem toho zjednodušuje správu a testovanie stavu, čo vedie k efektívnejšiemu a súdržnejšiemu vývoju v porovnaní s tradičným prístupom k vývoju frontendu.

    Nové Publikácie:

    ODPORÚČANIE