Skip to content

Svelte Proposal

Bo edited this page Jun 20, 2022 · 2 revisions

Hello Everybody!

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" 😅




UPDATE!!!

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" Typescript.

A decision which gets even rewarded 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 already very well, just not JS yet 😅

So its not about to change your favourite language. Its actually just about changing your compiler for JS/Typescript eventually? 😉 (i had to grasp that myself a few times)

Since the other options are Vanilla JS, or Typescript anyway, you can just drop your JS/Typescript file in the red box, and your HMTL file into the green box.

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?

image


This is Svelte

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)

image This is the App.svelte file, your start view, or most upper layer of abstraction. You can basically just drop everything here with <Component/>

image See? Everything that belongs too the Cesium globe, i just dropped in the file Cesium.svelte

image This is the topbar (a picture and some text) (Sdgtopbar.svelte)

image This is the "Coming Soon" text. (Comingsoontext.svelte)

image 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

image

So fresh and so clean, you can just start to code in Typescript whats in your head from here 😍

Clone this wiki locally