loading...

JAVASCRIPT: SVELTE: WHAT IS SVELTE and my basic experiment with Svelte

inspire99 profile image Ganesh Swamypillai ・3 min read

Originally published at https://gansai.blogspot.com/2020/05/javascript-svelte-what-is-svelte.html

The svelte project code is published at Github: https://github.com/inspire99/svelte-app

JAVASCRIPT: SVELTE : WHAT IS SVELTE ?

SVELTE

Before you scroll down, check out my svelte code deployed to surge ( I used very basic components )

My hosted svelte project

http://bettercallsaul.surge.sh

is svelte a ui framework like react or vue?

is svelte a compiler, something like babel: which transcompiles ES2015 featured into old versions of javascript so as to support old javascript engines ( supporting browsers which have not yet upgraded to support latest features of js )?

is svelte a language - like: is it something like typescript which then gets transcompiled to javascript?

its kind of all three of the above.

so, one thing which is unique to svelte is that, it is a compiler,

svelte is a compiler

what are the benefits to being a compiler?

-- smaller bundle size - no need to ship whole framework to your browser/ client, with your webpage.

small bundle size

-- no virtual dom -- virtual dom is a slight overhead and svelte has got rid of it. ( i guess now we might question how it actually works, since most of other javascript frameworks do support virtual dom )

-- its extendable - in the sense, features can be added to svelte without adding to the bundle size.

Courtesy: https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

-- why is svelte special for devs?

--> less code -- very little code required for same result

--> reactivity

--> simple - good dev experience, easy to write code quickly , making it maintainable

Anatomy of a svelte component.

Any svelte component has 3 parts:

  • scripts

  • style

  • html

From below code, we can see App.svelte component.


<script>
    import Face from './Face.svelte';
    let text = 'Hello world';
    setTimeout(()=>{
        text='I am ganesh ';
        console.log('updating name to '+ name);
    },2000)
    setTimeout(()=>{
        text='Welcome to https://gansai.blogspot.com'
    },3000)

</script>

<h1> {text}!</h1>
<div id='mydiv'>

</div>
<Face/>

<style>
    h1{
        color:blue;
        background:yellow;
    }
</style>

From below code, I have defined Face.svelte component - This is just a smiley component.


<div>
    =)
</div>

<style>
    div{
        color:black;
        background: pink;
    }
</style>

My suggestion for any newbie is to do their coding in REPL playground provided by Svelte, that is, you can go to :

https://svelte.dev/repl/hello-world?version=3

I did some coding and got this:

https://svelte.dev/repl/201d93f9d8f34df8bf3def8c49a3eee4?version=3.21.0

The output of this svelte code, I found in 3 places:

  1. I downloaded the svelte project to my machine and saw output in my localhost, by running: npm install and then npm run dev

  2. In the REPL playground hosted by svelte website itself

And this is: https://svelte.dev/repl/201d93f9d8f34df8bf3def8c49a3eee4?version=3.21.0

  1. Using surge, I have deployed my code into internet, where anyone can access and check

And the website where my code is deployed is:

http://bettercallsaul.surge.sh/

The reason for the naming is that I am currently actively watching this series.

Do let me know your feedback. The website is just a basic attempt with Svelte code and the components.

Surge is very easy to start with .

npm install surge --global

This will install surge on your machine.

Once you have svelte code in your machine, you can run

npm run build

This will create a public folder, which is a deployable asset.

Now use surge to deploy your code to internet.

Then in your terminal just run below command

surge public givesomedomainname.surge.sh

Above command will deploy your code to this domain and you can access it and check.

Surge

Surge

Discussion

pic
Editor guide
Collapse
juancarlospaco profile image
Juan Carlos

Interesting post!, I feel the same that Compiler are the future. If you liked Svelte, try Nim.