SvelteKit-JUI

- Posted in blijvend-leren svelte ui web webdev

Ik ben on and off aan het werken aan een UI framework voor Svelte.

Wat mij eigenlijk altijd al gestoord heeft in user interfaces is dat je een laag hebt van gestylede browser UI, en dan een laag custom plugins die helemaal niks van elkaar afweten qua styling en waar je maar in aan het hacken bent om alles bij elkaar te doen passen.

Binnen de logica van progressive enhancement kan dit zeer logisch zijn, maar als je het vanop een afstand bekijkt, of bv. voor een andere context dan web app/mobile web (e.g. een embedded device), is het eigenlijk maar een boeltje.

In Svelte heb je het voordeel dat je een complexe component (bv. color picker) op een beperkt aantal lijnen code kunt maken. Het is ook het eerste framework waar ik in voel dat ik weinig limieten heb om te doen wat ik wil bereiken.

Als je dan een consistente logica hebt voor styling kan je alles goed bij elkaar doen passen.

Vandaag ben ik er eindelijk in geslaagd om het geweldige Layercake te integreren in JUI. Dus nu kan ik charts beginnen documenteren zoals deze: de bar chart en de line area chart (het ziet er nog niet helemaal goed uit – bear with me).

The road to 1.0 voor dit framework is: alles bij elkaar doen passen… en alles toegankelijk maken. En ambitieus genoeg zijn om een heel aantal use cases aan te kunnen. Van mobile web apps tot creatieve apps (genre video editing etc.) tot embedded device apps.

Die 1.0 gaat volgens mij een tijd duren, temeer omdat we dit framework niet gebruiken in productie. SvelteKit zelf is nog in beta, en als bedrijf doen wij de JS-laag veelal niet en focussen we ons op design en propere HTML/CSS.

Dus het gaat vrij traag. Maar ik geloof er wel in, dat dit iets wordt. En het helpt me ook om gewoon voor mezelf een repository te hebben van copy-pastable Svelte componenten.

Als dit je interesseert, voel je vrij om het eens te proberen. Alles staat vrij en open op Github. En ik zoek contributors 😎.

Leave a Reply

Your email address will not be published. Required fields are marked *