Use Svelte?

[mmalmi]

Forked as a new issue:

Originally posted by @worldpeaceenginelabs in #108 (comment)

Hey Guys, you just speak from my soul 🙏

I just started a fork of Iris https://github.com/worldpeaceenginelabs/METAVERSE-GUN

Iris Messenger is just such a good base to start something like this. Look at all the green checkboxes in readme.md (this is what the iris-community has already accomplished) 🙏 just wow! 🤯

I would love to have the codebase of Iris in Svelte!

Since Svelte isnt a language but a compiler, which compiles into Vanilla JS, its like writing in react or vue for instance, but saving the framework typical boilerplate. (You dont need to learn anything new) Like i transfered js code from react projects to Svelte with just cutting off the uneccasary bs surrounding the actual code 😅 (and i code active for just about 4-6 weeks)

Its source code is easy to understand for developers. Svelte.js gathers the logic (JavaScript), the structure (HTML), and the style (CSS) in the same file. This makes the code easy to read and maintain. Guillermo Rauch, Vercel founder & CEO, has even said Svelte, in his opinion, is a lot easier to learn than React - an environment he’s known perfectly for ages.

Svelte does even safe you the DOM/router stuff. So its basically connecting components via imports, exports and modals only.
Less code, better readability, less bugs, less space, faster execution!

This video hitted me. So simple. And since it is clean, typed js, its easier to reuse code or get a snippet from stackexchange.
https://youtu.be/J5x3OMXjgMc Gun Svelte Chat App

Iris definitly needs a makeover to get more code contributions.

But if not Svelte, then minimum Typescript and markup seperated.
Oh wait, such a coincidence, the last part was just Svelte i described 😅

Originally posted by @worldpeaceenginelabs in #108 (comment)

[trosel]

I'd like to hear more about this

Iris definitly needs a makeover to get more code contributions.

A makeover in terms of UI / design? If so, I could see that. But it just hasn't been a priority yet

A makeover in terms of framework / technology? There are way more React developers and designers in the world than Svelte ones. Why would changing to Svelte attract more?

[worldpeaceenginelabs]

I am sooo happy that you take Svelte into consideration 🥳🙏

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 😍

[worldpeaceenginelabs]

A makeover in terms of framework / technology? There are way more React developers and designers in the world than Svelte ones. Why would changing to Svelte attract more?

yes. we can optimize the UI anyway, but as you said, it has no priority.

There are way more React developers and designers in the world than Svelte ones, aggree.
But as i said: You can switch instant from React to Svelte, just saving the boilerplate.
Anything else is like you used to. (except some Svelte specifics of course, bindings, exports, but that makes your day easier, not worse) 😉👍

[worldpeaceenginelabs]

I love the Iris UI btw, maybe some cosmetics here and there, but nothing drastic.
You guys did an awesome work already!!! 🙏

[worldpeaceenginelabs]

I made you another example, closer to your decentralization stack 😁👍

This is about making Gun a back-end for your websites user inputs, like a subscription form for instance.

All nicely in just one file!
(not working yet properly, but due to my own inexperience with Gun only😅)

[trosel]

@worldpeaceenginelabs there is already a guide for using svelte with gun on the original gun github wiki.

but i gun also works nicely as the backend data layer for react as well. there is a guide for that too

[worldpeaceenginelabs]

@worldpeaceenginelabs there is already a guide for using svelte with gun on the original gun github wiki.

but i gun also works nicely as the backend data layer for react as well. there is a guide for that too

thx.🙏 yes i saw them, and I am about to figuring it out with their help (i actually guess i just miss the right var scope here 😅)

let me clarify that i'm not against react 😇
but even as a beginner, i was just able to use the JS code from react apps, with the same result at the end, but minus the boilerplate.

Whats my point here?
I am convinced every dev should switch to Svelte, since it is Typescript without the framework agnostic, useless code surrounding react.

React and other frameworks were a great helper on the way to today, but there is something new on the horizon.

And the only thing you need to know and understand, to make use of it, is JS/Typescript.

You know JS/Typescript, arent you? ✌️😜

[worldpeaceenginelabs]

Ive got it working! Had two times gun.get invoked before. 🤦‍♂️

Svelte Compiler Tutorial with Gun

I am starting to offer 30-60min courses on Fiverr, as of today.

For Svelte js beginners and js professionals who want to switch to Svelte, or want to come back to good "old" JS/Typescript.

A decision which gets even rewared with Vanilla JS code at the end🤩

But i am not teaching a language to others, after just 6 weeks of coding actively, of course, even though everybody will come with this expectation into that course.

The course i will offer is a compiler course, because thats what Svelte is. A Compiler!

And i understand the compiler very well, just not JS yet 😅

So I am not asking you, to change your favourite language. I actually just ask you to change your compiler for iris-messenger eventually? 😉 (i had to grasp that myself a few times)

Since the other options you are thinking of seems to be Typescript anyway, you can just drop your Typescript file in the red box, and your html file into the green box.

I just drop you the screenshot of my typical desktop as a visual helper and the repo, 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?

[sascha1337]

YES. just YES. i am investigating svelte since longer now, daily, i prefer it 50x more than (p)react

[worldpeaceenginelabs]

YES. just YES. i am investigating svelte since longer now, daily, i prefer it 50x more than (p)react

btw: i prefer Svelte in general, but i found a way to use svelte and preact at the same time.

Svelte (and any other framework) can be compiled to webcomponents(with a simple edit of the compile config file, in case of Svelte its svelte.config.js, example here: https://blog.logrocket.com/build-web-components-svelte/ ), which can be used in Preact (and any other framework) as a component.

This way a transition of Iris from Preact to Svelte could go easy, by adding only new Iris features in Svelte, but update the whole Iris code to Svelte step by step with time, if needed/wanted...

Here a video from Fireship.io which shows how to cross use webcomponents: https://youtu.be/SJeBRW1QQMA

Here another one, more detailed: https://youtu.be/RbTM785zhG4

Two things to take a look on
https://docs.astro.build/en/getting-started/
and
https://github.com/fireship-io/flamethrower (which is in meme status for now)

[petrikaj]

Iris is a nostr client now.