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

evromalarkey

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. 2021 19:10)

dakur

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

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

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

evromalarkey

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

Martk

@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

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

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

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

evromalarkey

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

evromalarkey

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

David Grudl

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

@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

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

@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

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. 2021 5:20)

evromalarkey

https://github.com/…z/nette-vite

trošku jsem to updatoval, nyní vychází z https://github.com/…/web-project a navíc jsem do projektu přidal jako starter Tailwind, Stimulus a Turbo

Tailwind – utility třídy na všechno
Stimulus – na bindování eventů a controllerů
Turbo – automatická navigace mezi stránkama bez refreshe, dál se tím dá řešit live načítání obsahů nebo překreslování snippetů

https://youtu.be/mpWFrUwAN88?… – hodně pěkná ukázka Turba je zde, kde už mají hodně easy backend integraci v ruby

evromalarkey

https://github.com/…17cac2b15dd5

Přidal jsem nově také rozšíření do Tracy, tz. že Vite se z Tracy dá kdykoliv zapnout / vypnout. Funguje dokonce i na remote serveru, klidně i produkčním. Lze tak rychle třeba upravit CSS/JS live, protože se načítají z localhostu.

@DavidGrudl vše upravuju i v tom draftu článku, kdyby si měl čas projít, případně říct co upravit aby se mohl publikovat tak budu rád :)

Václav Pávek

Ahoj @evromalarkey, kdy lze očekávat vydání článku?

David Grudl

@evromalarkey Čau. Zkusil jsem tam upravit způsob, jak se načítá ten manifest a pracuje s vývojovým režimem, tím že jsem to zabalil do nové třídy. Je to samozřejmě delší než tvé původní přímočaré řešení, ale řeší se tím ty zadrátované věci v presenteru a dává to možnost konfigurovat z konfigu. Akorát nevím, jestli to funguje správně :)

Jan Tvrdík

@David Grudl Opravil jsem tam překlepy a trochu to učesal ať to nevypadá tak děsivě.

evromalarkey

@DavidGrudl super, dneska se na to podívám, měl jsem i v plánu přepsat to načítání manifestu jako latte filtr, tak ještě zkusím vyžkoušet co bude vhodnější způsob

@JanTvrdík díky za opravy!

evromalarkey

@DavidGrudl tak to funguje ok, jen jsem tam ošetřil stavy kdy chybí css nebo manifest.json

Přidal jsem to i do example projektu a rozšířil o latte filtr pro alternativní způsob zápisu – https://github.com/…f1d3d58736ac

Můžeme to teda publikovat, jestli tomu už nic nebrání? Jinak příští sobotu o tom budu mluvit víc do podrobna v posobotě, díky za pozvání @chemix ! – https://forum.nette.org/…am-29-1-2022

David Grudl

Parádní, publikuju!

David Grudl

Ještě překlad https://blog.nette.org/…-development

evromalarkey

Super, díky!

Radek Pašta

@evromalarkey Zdravím, prosím o radu, jak zapnout podporu napovídání tříd Tailwind CSS v souborech latte (nette). Testuji nette-vite + tailwind z https://github.com/…z/nette-vite. Vše funguje, kromě napovídání v latte souborech. Když založím html soubor, tam napovídání funguje. PhpStorm 2021.3.2

Editoval Radek Pašta (21. 2. 2022 16:40)

evromalarkey

@RadekPašta dlouho to nefungovalo, ale teď už by mělo – viz. https://youtrack.jetbrains.com/…te-templates#…