I am currently working for a company who uses the Svelte framework for their product, I will be posting Svelte concepts and tasks I deal with , so you can learn Svelte faster and better from my posts.

Pls feel free to share questions on Svelte and JS

What language framework

It is JavaScript , but it uses AST to generate JS code for your application. so whatever you write is compiled into JS

AST is analogous to JSX in React

Johnmattee:
AST is analogous to JSX in React

Hmmm you know I have never thought about it that way, but I think I agree, because JSX is broken into token and mapped to function, so definetely something is parsing JSX. I will have to agree, they are somewhat comparable.

This is the Application built in Svelte one thing you need to know about Svelte

1. routes on the browser are mapped to folder like Nuxt.JS
2. Script , Style and template is all that is required for a Svelte Component
3. Stores are observable
4. Svelte runs with Sapper which is SSR in nature
5. Svelte is reactive, it is built with reacitivty in mind
6. Svelte has no VirtualDOM
7. Svelte is not complex as React, by far the easiest framework to get into

Here is a screenshot of what Svelte Code looks like

qtguru:


Hmmm you know I have never thought about it that way, but I think I agree, because JSX is broken into token and mapped to function, so definetely something is parsing JSX. I will have to agree, they are somewhat comparable.

Okay! but how well can you compare it with React in terms of performance and learning curve?

Sorry Bros but I have to ask u I have used react and currently using Vue js and I can tell u I have forgotten most of the things I know when I was working with react but you work with several frameworks and several programming languages how do u even keep up with every thing at the same time

peterincredible:
Sorry Bros but I have to ask u I have used react and currently using Vue js and I can tell u I have forgotten most of the things I know when I was working with react but you work with several frameworks and several programming languages how do u even keep up with every thing at the same time

Good question, every framework has a paradigm, so I try to understand it.

React is written to be Component based, Props and States, Redux for updating state and props globally once you have a basic understanding it is easy to grasp things.

But I have a very strong JavaScript knowledge and also knowledge of how these frameworks compile/transpile to JS.

Once you have that understanding, the rest is just syntax and libraries.

As for other programming languages, the more you code in them, you more you get familiar with them. But I am not an expert at every language, I just remember some syntax and consult the documentation when I need to. no one can cram everything

I wrote a long text, but it had too many grammatical errors,

React 16 creates Error Boundaries,

JavaScript codes are no longer the same type of development; as compared to earlier years of coding. Today's JS code via frameworks usually goes through a form of transpilation, something like babel.

Svelte(node) uses the acorn library to parse your source (The JavaScript section) and generate an efficient and Svelte-ish type of application. When a page is written in traditional HTML and JS, during a reference error, it simply throws an error with the application still functioning. However, in generated codes like React/Svelte, a simple bug is enough to mess up the internal state and bring the application down.

Perfect code is a myth.

Which brings us to our current dilemma, how do I handle this issue?

Attached to the post; is a screenshot of a library that handles the error thrown by the Svelte component.

The first screenshot shows the SvelteComponent as this is what your code written in Svelte files is transformed into. It is very important to the context of the issue at hand. Every logic written in Svelte runs under the context of a SvelteComponent.

An author armed with that knowledge simply extended the internal state of the Svelte component to augment and monkey-patch (refers to augmenting an existing Object, this is possible in JS naturally, as other languages might need some form of Reflection to do this) the render method.

I wanted to share that because the obvious normal thinking process for a surface level Svelte developer is to wrap each function of the code into a try/catch causing a massive duplication in each code.

How does a developer think to extend the internal SvelteComponent ?

Answer

by understanding how the framework works and how the code is generated.

The second screenshot shows the extension of the SvelteComponent to handle errors. It's easier to fix at the compiler level, when each component is generated, it simply returns an extended class of the Component when required in runtime.

Anyway, thanks for reading and I hope you enjoyed the post.

If you want more information about the internals of Svelte I will advise you to read Compile Svelte in your head and look up the source code.


[b]FUN FACT: [/b]If you press the dot button on your keyboard in a git repository, it renders a VSCode environment making it easier to follow the flow of the code.

FIN

@qtguru

Do you use Sveltekit or Sapper?

DrLevi:
@qtguru

Do you use Sveltekit or Sapper?

Sapper there's too much code to migrate to Sveltekit maybe in the future.

Nice to see this thread.

I have been building projects with sveltekit for some time now and it has been amazing.

Sveltekit plus tailwind makes coding flow directly from my brain to the IDE. As i am thinking it, so i am writing it.

I hope more people would adopt svelte gping forward

Cc Qtguru Hello good day. Sorry for calling you out of the blues. I remember you mentioned you used a Samsung galaxy note 9 in one of your posts in your diary. Do you still think its worth it in terms of the camera and video quality ? In fact generally speaking. I would appreciate your input as I plan on getting one. Thank you.

chieni:
Cc Qtguru Hello good day. Sorry for calling you out of the blues. I remember you mentioned you used a Samsung galaxy note 9 in one of your posts in your diary. Do you still think its worth it in terms of the camera and video quality ? In fact generally speaking. I would appreciate your input as I plan on getting one. Thank you.

It is and it shoots 4k Video, the image quality is good, let me share a pix I snapped with it, it also comes with Enterprise Features and Bixby(It can alter Camera Shoot mode based on the subject, it can detect if an item is food, shoe etc).

qtguru:


It is and it shoots 4k Video, the image quality is good, let me share a pix I snapped with it, it also comes with Enterprise Features and Bixby(It can alter Camera Shoot mode based on the subject, it can detect if an item is food, shoe etc).

Alright. Thank you so much for the response.

I took over Svelte-devtool from RedHatter

There is no official Svelte Devtool, and the author has stopped maintaining it, I had to fork it because we need it for work, our debugging workflow is too slow.

Since I forked this Project I have migrated to Manifest Version 3 and re-writing some deprecated API to work against version 3 the only goal is to have it running.

The concept is the same as ContentScript except

Devtool communicates with Background , Content Script talks to Background Worker which talks to Devtools. I will attach some notes here

qtguru:
This is the Application built in Svelte one thing you need to know about Svelte

1. routes on the browser are mapped to folder like Nuxt.JS
2. Script , Style and template is all that is required for a Svelte Component
3. Stores are observable
4. Svelte runs with Sapper which is SSR in nature
5. Svelte is reactive, it is built with reacitivty in mind
6. Svelte has no VirtualDOM
7. Svelte is not complex as React, by far the easiest framework to get into

Here is a screenshot of what Svelte Code looks like

Beta than React.

https://www.youtube.com/watch?v=0xqLj1XwxmE

Still stuck, but I found this video

Please if this extension finally runs , I will need those on sveltekit to test it out. I am still using sapper.

Closed

Read on dojovader.github.io

Good afternoon Sir and welcome back from your leave, please regarding your former intern that just got a new job, will you be needing a new intern? Thank you sir.

qtguru:
Closed

Read on dojovader.github.io

devmek:
Good afternoon Sir and welcome back from your leave, please regarding your former intern that just got a new job, will you be needing a new intern? Thank you sir.

Yes I don't mind, my email is on my website, I don't want to be blocked, send a mail, I don't mind, I have some stuffs. You have basic javascript and React knowledge?

qtguru:


Yes I don't mind, my email is on my website, I don't want to be blocked, send a mail, I don't mind, I have some stuffs. You have basic javascript and React knowledge?

Good afternoon sir
Is the position paid or free

Yes sir, I do, I will send an email attached with my resume. Thank you

qtguru:


Yes I don't mind, my email is on my website, I don't want to be blocked, send a mail, I don't mind, I have some stuffs. You have basic javascript and React knowledge?

qtguru:


Yes I don't mind, my email is on my website, I don't want to be blocked, send a mail, I don't mind, I have some stuffs. You have basic javascript and React knowledge?

Hello Sir,

I sent you a PM, it's regarding your post regarding ui/ux design in your slack.

ajsans:



Hello Sir,

I sent you a PM, it's regarding your post regarding ui/ux design in your slack.

I replied,

Good morning Sir, I sent the email almost immediately yesterday

qtguru:


Yes I don't mind, my email is on my website, I don't want to be blocked, send a mail, I don't mind, I have some stuffs. You have basic javascript and React knowledge?

devmek:
Good morning Sir, I sent the email almost immediately yesterday

I haven't seen any mail, which mail did you send to ? It entered spam, seen

Okay sir, thank you

qtguru:


I haven't seen any mail, which mail did you send to ? It entered spam, seen

devmek:
Okay sir, thank you

I sent you a reply

I have sent a response Sir

qtguru:


I sent you a reply