Nette Vite – aneb použití Nette s Vite pro rychlý lokální vývoj

evromalarkey
Nette Blogger | 7
+
+11
-

Ahoj,

připravil jsem example projekt jak použít Nette s Vite (https://vitejs.dev/). Kdo neví tak Vite je next-gen frontend nástroj, kde hlavním cílem je načítání js a css souborů přímo ze zdrojů, bez nutnosti kompilace a za použití moderních standartů.
Kdekoho určitě štve když musí udělat něják úpravu na frontendu a musí něco kompilovat a zbytečně čekat a celkově spouštět kompilaci furt dokola při každý úpravě. S tím je naštěstí díky moderním nástrojům a přístupům konec.

https://github.com/…y/nette-vite – Example je tu, vychází to z tutorial-quickstart. S tím že jsem tam pro lokální vývoj přidal Docker a Vite pro jednoduchou frontend integraci. Takže je potřeba mít jen Docker a Node.js 12+ (vlastně není potřeba mít ani PHP a Composer, doufám že mě tu neukřižujete za kacíře že tu vlastně spouštím PHP přes Javascript :D)

Pokud dáte npm i, tak se po instalaci Node.js balíčků automaticky spustí instalace Composeru přes Docker. Po instalaci stačí dát npm run nette:dev a spustí se lokální server i s Vite. Ty servery se vlastně spustí dva, jeden je přes Docker kde běží PHP a druhý je Vite který má zase na starosti načítání js a css souborů přímo ze zdrojů. Rovněž jsou s Vite využité Web Sockety, takže při jakékoliv změně v .php, .latte nebo .css, .js souborů se prohlížeč automaticky přenačte a načte aktuální data.

Pro produkci se potom pouští npm run vite:build což buildne zdrojové js a css soubory do www/assets a do www přidá manifest.json kde jsou revize jednotlivých souborů.

Je to vlastně hodně obdobný přístup jako má Laravel Vite – https://laravel-vite.innocenzi.dev/

Jediná současná nevýhoda Vite je že se .css soubory musí includovat v .js aby šli buildovat. Ve výsledku se v buildu sice rozdělí zvlášť, ale někomu tenhle zápis může vadit. Proto lze pro build využít alternativně třeba gulp-vite https://github.com/…ey/gulp-vite kde build se může řešit přes Gulp a Esbuild a Vite pak použít na možnost načítání věcí ze zdrojů, Web Sockety apod.

Vím že tohle není úplně PHP věc, a osobně ani nejsem PHP programátor. Ale u nás ve firmě na tohle přecházíme a kombinace Nette s Vite je fakt fajn a backendu se to týká dost. Pokud by problematika frontend nástrojů někoho zajímala tak o tom mám i článek.

https://blog.newlogic.cz/…derni-stack/

Editoval evromalarkey (24. 5. 19:10)

dakur
Člen | 301
+
0
-

Díky za odkaz na článek! Člověku přijde, že je to včera, co instaloval supercool webpack a stejně je pořád pozadu… 🙂

Lumeriol
Generous Backer | 25
+
+2
-

Prijde mi, ze to tu za par dni docela zapadne, nebylo by zajimavejsi prispevek rozsirit a treba zaradit jako clanek na Nette blogu?

David Grudl
Nette Core | 7540
+
0
-

@evromalarkey mám ti udělat přístup do administrace blogu?

evromalarkey
Nette Blogger | 7
+
0
-

@DavidGrudl klidně, můžu to rozšířit a sepíšu článek

Martk
Člen | 609
+
0
-

@evromalarkey Díky za článek! Děsně se mi líbí kombinace nette + stimulus + naja + turbo nebo swup, jak jsi zmiňoval. Zatím používám nette + stimulus + naja. Na turbo nebo swup se teprve chystám, kdybys měl návod na integraci i zbývajícího turba nebo swupa, tak sem s ním! :)

evromalarkey
Nette Blogger | 7
+
+1
-

S turbem osobně taky nemám zkušenost, tam je hlavně nutné to víc provázat s nette jako to mají např. tady ve videu https://hotwire.dev/ s ruby. My u nás ve firmě zatím používáme kombinaci nette + stimulus + naja + swup a prozatím jsme spokojeni. Každopádně nette + stimulus + turbo může být taky dost dobrý, možná až turbo vyjde z bety tak na to u nás mrknem a hodíme nějaký článek :)

Co se týká Swupu, tak integrace je docela jednoduchá, viz. https://swup.js.org/…rted/example

Příklad naší rozšířený implementace v Newlogic UI je tady https://github.com/…ries/Swup.js

David Grudl
Nette Core | 7540
+
0
-

@evromalarkey super, za článek budu rád.

Měl bys mít přístup na https://blog.nette.org/admin/ a můžeš si to zkusit osahat a dát tak článek. Zatím prosím jako ‚draft‘.

evromalarkey
Nette Blogger | 7
+
+1
-

@DavidGrudl Tak je to sepsané a uložil jsem to jako draft, můžeš na to mrknout a publikovat ;)

evromalarkey
Nette Blogger | 7
+
0
-

@DavidGrudl jen se připomínám s tím článkem, jestli se na něj nezapomnělo náhodou :)

David Grudl
Nette Core | 7540
+
0
-

Nezapomněl. Text jsem redakčně upravoval, ale ještě chci upravit ty ukázky kódu, aby v presenterech a šablonách nebylo Tracy\Debugger::$productionMode nebo $_SERVER['DOCUMENT_ROOT'], tedy globální proměnné, a k tomu jsem se ještě nedostal. Pokud bys to dal pryč, bylo by to fajn.

evromalarkey
Nette Blogger | 7
+
0
-

@DavidGrudl Ok $_SERVER['DOCUMENT_ROOT'] jsem odstranil a nahradil za __DIR__ . '/../../www/manifest.json', takhle ok? A Tracy\Debugger::$productionMode popravdě nevím čím nahradit, je to tam pro odlišení debug módu a produkce, nebo existuje vhodnější funkce pro detekci debug módu?

Pavel Kravčík
Člen | 1039
+
0
-

evromalarkey napsal(a):

Kdekoho určitě štve když musí udělat něják úpravu na frontendu a musí něco kompilovat a zbytečně čekat a celkově spouštět kompilaci furt dokola při každý úpravě. S tím je naštěstí díky moderním nástrojům a přístupům konec.

@evromalarkey: Tohle mi štve na webpacku a nedalo mi to spát. Zkusil jsem rozjet Webpack dev server a vypadá to hodně dobře. Když jste se rozhodovali pro Vite, dělali jste nějaké srovnání např. s tím webpack? Pro mě jako totálního laika ta funkčnost vypadá hodně podobně. Tj. píšu CSS a změnu vidím hned (nemusím čekat na –watch kompilaci).

evromalarkey
Nette Blogger | 7
+
+2
-

@PavelKravčík

Vite má podle mě výhodu v tom že je mnohem jednoduší na konfiguraci a hlavně má ten moderní přístup na prvním místě, kde se hlavně cílí na načítání ES modulů ze zdrojů, HMR apod. Webpack vždycky fungoval hlavně jako bundler a nenačítal věci ze zdrojů. Tak něják se tam tyhle věci začali objevovat taky (HMR), ale je to až vedlejší funkce webpack-dev-server kterej se musí doinstalovat. Takže člověk musí všechno hledat, konfiguruvat, povolit, nastavit loadery apod. Takže je tam fakt velká learning curve a nefunguje to jen tak „out of the box“ jako Vite.

Hned na první stránce mají postup jak vytvořit blank projekt kde je všechno https://vitejs.dev/guide/#… a config jen na pár řádků narozdíl od webpacku.

Jediná nevýhoda jak jsem psal je že se .css soubory musí includovat v .js aby šli buildovat (https://github.com/…/src/main.js). Někomu tohle třeba nemusí vůbec vadit a má vyřešeno, ale dá se to řešit i jinak např. přes Gulp viz. https://github.com/…ey/gulp-vite – jen už je to pak trošku složitější

joe
Člen | 308
+
0
-

Vyřešeno: Aha, tak jsem nevěděl, že můžu nalinkovat externí soubor přes <link rel="stylesheet" href="...sass"/> a bude to fungovat.

@evromalarkey Ahoj, taky jsem zkusil přemigrovat projekt na Vite. Asi mi nevadí, že při vývoji jsou CSS v JavaScriptu, trochu dýl teda trvá první refresh stránky díky tomu… ale po načtení to inlinuje všechny styly do DOMu a zdá se, že to je dost náročné pro DevTools, když se tam najednou přidá navíc třeba 10 000 řádků. Neřešili jste to nějak? Další problém je, že u stylů (zatím) nefungují source mapy. Díky tomu výkonostnímu problému a source mapám budeme asi pro styly muset využít něco lepšího.

Editoval joe (8. 10. 5:20)