Newlogic Core & UI - nový moderní stack

Mezi vývojářskou komunitou vzniklo za posledních 10 let spoustu nástrojů, bundlerů, taskovacích systémů a kompletních řešení. Některé jsou aktivní dodnes, jiné už tak moc ne. Uveďme si nejprve pár těch nejznámějších.

• Grunt - task systém - 2011
• Gulp - task systém - 2013
• Webpack - kompletní řešení, bundler - 2012
• Browserify - kompletní řešení, bundler - 2012
• Rollup - js bundler - 2015
• Parcel - kompletní řešení, bundler - 2017

A co si budeme namlouvat, většinu z nich nakonfigurovat a použít v produkci je zkrátka peklo. Prvotní přístup byl totiž psát moderní kód a kompilovat ho do starého kódu. Tomuto tématu se také věnuje článek na web.dev, zejména doporučijeme zhlédnout přiložené video.

Teď si pojďme však ukázat nějaká ta novější a méně známá, ale za to opravdu moderní řešení.

• ESbuild - js & css bundler - 2020
• Snowpack - kompletní řešení, bundler - 2019
• Vite - kompletní řešení, bundler - 2020

Zaměření těchto nástrojů od samého začátku je primárně na moderní vstup i výstup. ESbuild je jako bundler 🔥🔥, dokáže bundlovat js i css s neuvěřitelnou rychlostí. Snowpack a Vite potom používají ESbuild k transformaci CommonJS a UMD syntaxe do ESM, takže se při vývoji načítají zdroje přímo bez nutnosti bundlování a pro vývoj je to neuvěřitelně rychlé. Bundless vývojové nástroje jsou zkrátka budoucnost.

Jedinou obrovskou nevýhodou je to, že tato kompletní řešení byla dělaná primárně pro vývoj single page aplikací. Pro použití s PHP server side aplikacema je to trošku složitější. Už existuje například Laravel Vite, ale není to úplně ono - jako vstup jde použít jen javascript a jsou zde určité limitace. Další nevýhodou je že Vite nepodporuje šablonovací systémy, takže kdo je zvyklý na workflow tvorby front-end šablon bokem mimo PHP aplikaci, tak má prozatím smůlu. Už se sice objevily nějaké pluginy jako vite-plugin-handlebars nebo @marko/vite, ale zatím je to hodně v začátcích a jsou zde pořád jisté limitace přímo ve Vite.

Newlogic Core

U nás v Newlogic jsme chtěli přejít na moderní stack a používat výhradně moderní vstup i výstup - moderní javascript, moderní css. Orientovat se primárně na moderní prohlížeče - Chrome, Firefox, Edge, Safari. Internet Exploreru nám fakt není líto, je čas ho nadobro pohřbít - i Microsoft už od něj dává kompletně ruce pryč. 🪦RIP

Naše weby jsou orientované spíše jako PHP server side a Nette. A single page aplikace děláme většinou ve Vue, mobilní aplikace přes Capacitor a tak podobně. V současnosti jsme u nás používali interní ui framework s Gulpem o 2 tisíce řádků (🤭), jo to není úplně ideální. Proto jsme se koukali po moderním řešením jako Vite, ale způsob jakým je řešený vstup js a css souborů se nám prostě nelíbil.

Starším nástrojům jsme se chtěli vyvarovat, nechceme mít u každého projektu config o 368 řádcích, jako je to třeba nutné u Webpacku a sice to lze řešit lépe např. s Laravel Mix, ale stále to není ono.

Vlastní řešení

Napsali jsme si proto něco vlastního a skončili jsme opět u Gulpu, tentokrát napsaném ve třídách a v moderním ES zápisu. Gulp je jako taskovací systém skvělý. Jediná nevýhoda je v tom, že už není tak aktivně udržovaný a verze 5 je v nedohlednu. Takže použití gulpu zpětně trochu litujeme, ale prozatím to splnilo účel. Teď bychom se asi spíše vydali cestou použít ESbuild jako bundler na všechno a Gulpu se zkusit vyhnout úplně. Právě této myšlenky jsme se nemohli zbavit, takže jsme zkusili napsat jednoduchý prototyp na https://github.com/evromalarkey/tuum a rychlost buildu je opravdu znatelně rychlejší (javascript až 15x rychlejší než přes Rollup).

Core není univerznální bundler, který lze všelijak rozšířit. Je to spíš sada nástrojů pro tvorbu moderních aplikací. To znamená že spousta důležitých věcí je už součástí - PostCSS (se základnímy pluginy), TailwindCSS, PurgeCSS, Clean CSS, Rollup, Terser, Importmapy. I díky tomu je výsledký config opravu minimální.

PHP programátoři nesnáší kompilování

Proto je primární zaměření na vývoj bez kompilace a bundlování, javascripty se načítají přímo ze zdrojů a využívají se moderní vlastnosti jako Importmapy a moduly se načítají z esm.sh nebo esm.run s automatickým generováním do Importmap. Moduly se potom definují standartně v package.json - tenhle způsob je bez buildování, bez nutnosti, aby běžel jakýkoliv lokální server, prostě to funguje. Jediný co se builduje je importmapa, ale i to se dá zautomatizovat, například automatickým generování přes PHP.

Při tomto použití je nutné psát Javascript dle specifikace a nepoužívat pseudo zápisy jako načtení css přes import, nic takového dle specifikace zatím není možné. Do budoucna jsou plánované způsoby jak toto dělat dle specifikace, ale je to zatím vzdálené.

Všechno moderní CSS v prohlížečích používat nejde, ale chceme se držet PostCSS a moderní syntaxe která by šla v budoucnu načíst podobně v prohlížečích bez nutnosti kompilace jako v případě javascriptu.

Rozdělení typů tasků

• dev - nic se nebuilduje, všechno se načítá ze src (jen templates se musí buildovat)
• build - základní minimální build, bez minifikace a optimalizací
• production - celkový build, minifikace, optimalizace, generování manifsetů a hashů do názvu souborů

SPA - Vue, React apod.

Core lze využít i na tvorbu single page aplikací, Vite lze využít kompletně i pro build a bez Importmap. Z Core pak lze využít jen dodatečné fukcionality jako auto generování importů do souborů v rámci složek, iconfont apod. Nebo si zautomatizovat některé procesy napsaním nových tasků v gulpfile.js. Příklad použití je zde - https://core.newlogic.cz/vite/

Proč s tím jít ven na Github a NPM?

Myslíme si, že jde o zajímavou myšlenku a způsob použití moderních nástrojů a postupů, tak proč se nepodělit. Není to žádný vymakaný Vite v typescriptu, a vývoj je ještě hodně v "plenkách". Celé to zaslouží rozsáhlou refaktorizaci, zjednodušení a lepší rozšířitelnost - ale současná myšlenka nám přijde zajímavá. Třeba se v budoucnu objeví další podobné a lepší projekty jako tento, kde hlavní zaměření je pro PHP na prvním místě a SPA na druhém. Možná taky to, co šlo špatně řešit ve Vite, půjde v budoucnu řešit lépe a tento projekt se spíš přeorientuje na takový starter pack pro vývoj moderních aplikací.

Vyzkoušejte si to

Pozor je nutná minimální verze NodeJS 14+ a NPM 7+ nebo Yarn 2 se starším npm a yarnem to nebude fungovat, jelikož ty neumí instalovat peerDependencies.

Jako minimální příklad lze vyzkoušet https://github.com/newlogic-digital/core-starter, Core je opravdu minimální takže lze použít tasky pouze na to, co máte v src, není potřeba používat vestavěný šablonovací systém.

Jako celkový příklad doporučuju vyzkoušet Newlogic UI viz niže.

Instalace je jednoduchá, stačí nainstalovat přes npm do projektu a vytvořit gulpfile.js s configem.

Kompletní dokumentaci prozatím v češtině naleznete na core.newlogic.cz

A proč zrovna jméno Core? Trošku interní joke 😀

Newlogic UI

Dlouhodobě u nás využíváme interní UI framework a říkáme mu Newlogic UI. Ten obsahuje základní ui komponenty, javascript funkcionality a původně byl celý postavený na Gulpu se starším stackem - až donedávna Less pro pro styly a ES5 pro javascript a Hbs jako šablonovací systém. Naše interní verze je nyní ve verzi 2.6.0 a už používá Newlogic Core a jako stack Less, Javascript s ESM moduly a Hbs. Proto jsou v Newlogic Core (zatím) fallbacky pro rozšířitelnost o Less a Hbs. Potřebovali jsme přechodnou verzi než jsme náš UI framework přepracovali do verze 3 na kompletně novém stacku.

Což už se nyní stalo a tuto verzi jsme se i s Newlogic Core rozhodli vydat na Githubu a NPM.

Newlogic UI je moderní a modulární CSS framework s nejlepšími principy a jednoduchou syntaxí. Je inspirován oblíbenými frameworky jako Boostrap a Bulma. Další velkou inspirací bylo mimochodem Latte UI. Pro utility třídy se používá Tailwind. Moderní přístup je na prvním místě.

Zdrojový kód je psaný tak, že jej lze použít i s jinými nástroji nebo i se zcela jiným prostředím než NodeJS, jako třeba Deno. Obecně platí pravidlo, že by zdrojový kód měl být spustitelný v současných nebo budoucích prohlížečích, aby nebylo potřeba jej kompilovat při vývoji. Je napsaný v současných nebo budoucích W3C a CSSWG standardech. Takže pokud vezmete celý zdrojový kód např. do vanilla Vite a přidáte pár PostCSS pluginů, tak to bude fungovat bez problému.

Framework je modulární a lze z něj využít opravdu jen to, co je potřeba pro Váš projekt.

Tailwind CSS

Někomu se Tailwind možná nelíbí, protože psát úplně všechno v utility třídách je trošku "magořina". Avšak na užití utilit tříd ke standadním komponentovým třídám je prostě super, protože obsahuje opravdu všechny potřebné varianty a včetně těch responzivních.

A když se tohle zkombinuje s moderníma css proměnýma, tak se s tím dají dělat neuvěřitelný věci. Dark mode je např. otázka 5 řádků v CSS.

Stimulus

O této knihovně jsme už psali minulý rok ve článku Stimulus, Swup, Locomotive a tady se mnoho nezměnilo. Stimulus stále považujeme jako nejlepší knihovnu pro interakci na frontendu u PHP server side aplikací a webů. A v kombinaci se Swupem (také součástí Newlogic UI) nebo Turbem je to super. Hotwire přístup je prostě fajn.

Podpora v prohlížečích

Je to moderní framework, takže podpora do budoucna je jen Chrome, Firefox, Edge a Safari. Pro Internet Explorer budeme naše nové weby přesměrovávat na stránku https://support.microsoft.com/cs-cz/topic/we-recommend-viewing-this-website-in-microsoft-edge-160fa918-d581-4932-9e4e-1075c4713595

Vyzkoušejte si to

(Ne)kompletní dokumentaci, prozatím v češtině nalezente zde - https://ui.newlogic.cz/

Instalace s Newlogic Core je opravdu jednoduchá.