Svelte Proposal
We are in active conversation with the Iris devs, on switching Iris to Svelte or minimum Typescript 🥳
I actually said: "But if not Svelte, then it should be minimum Typescript and markup seperated. Oh wait, such a coincidence, the last part was just Svelte i described" 😅
Follow the conversation here https://github.com/irislib/iris-messenger/issues/113
Can you code in Javascript/Typescript? Do you want Vanilla JS code at the end without learning it? 🥳
You can just drop your JS/Typescript file in the red box, and your HMTL file into the green box. (or split your js page's code into js and html and drop them into the boxes)
I just drop you the screenshot of my typical desktop as a visual helper, because you can just test in Typescript whatever you want, to get a first touch with Svelte instant!
Modify the server, test a new script, test the build and load the static files to a cdn maybe?...
Its a fresh npm create vite@latest, nothing touched but App.svelte and npm install gun https://github.com/worldpeaceenginelabs/FORM-GUN
I would love to read your feedbacks on how you liked to code in Svelte your first time?
Framework as a Compiler: The Future of Web Development? https://naturaily.com/blog/why-svelte-is-next-big-thing-javascript-development
I made you guys some example screenshots of my CesiumJS project (not Metaverse-Gun) in VS Code, to let you see, how simple and nicely ordered everything gets with Svelte. 😍
Every file is basically a page/view/component at the same time. (no router/vDOM necessary) You basically navigate with imports, exports and modals.
The code of each file is seperated into logic (JavaScript), the structure (HTML), and the style (CSS) in the same file.
//file Example.svelte
<script>here goes your logic</script>
<div>here goes your HTML</div>
<style>here goes your style</style>
CesiumJS is a good example, because on first glance, even professionals say "ugh, looks complicated".
But its not! At least not with Svelte (again, i am a html, css beginner, coding 4-6 weeks in js)
Imagine what long experienced coders like you could achieve, without all the bloated boilerplate you safe 😉
Notice that you are in control of the css style for every Svelte file seperatly (page/view/component)
This is the App.svelte file, your start view, or most upper layer of abstraction.
You can basically just drop everything here with <Component/>
See? Everything that belongs too the Cesium globe, i just dropped in the file Cesium.svelte
This is the topbar (a picture and some text) (Sdgtopbar.svelte)
This is the "Coming Soon" text. (Comingsoontext.svelte)
This is the modal logic btw (Modalmain.svelte)
Have a liveview of it: https://cloudatlas.club
A word on the bundler:
I prefer Vite, since it is basically a lightspeed fast rollup. 500ms startup time and hot reload. npm run dev
Static output for CDN with npm run build
WITHOUT any further configuration, right from the start!
So when i start a new Svelte project, i start like npm create vite@latest, follow the prompt and choose "svelte", then "svelte-ts" and thats it.
https://vitejs.dev/guide/#scaffolding-your-first-vite-project
So fresh and so clean, you can just start to code in Typescript whats in your head from here 😍