re: Svelte is the most beautiful web framework I've ever seen VIEW POST

FULL DISCUSSION
 

It is a very elegant framework.

The main thing keeping me away is the lack of support for TypeScript. I hear they're working on that though.

In the mean time, the net footprint of a bundle with Preact is comparable in size. I know there's a performance difference, but it's not relevant to most everyday applications - I've never had to do real time animations or anything like that, and Preact performs just fine for anything else.

Svelte is always on my radar though. When they sort out type safety, I will definitely take another close look :-)

 

I love Preact too, but Svelte has me even more excited. I don't use Typescript but I understand where you're coming from. One of my viewers suggested checking out github.com/Axelen123/svelte-ts-tem... which might help you?

 

Yea, it’s basically a non-starter for me until it gains TypeScript support (which I can’t imagine coming anytime soon unless TypeScript itself starts supporting .svelte files or some kind of HTMLSX file).

 

Well given TS will perform Type inference and checking on JS (esp good in VSCode) it kinda does have TS support :) but I know what you mean. You could always create some typings.

Creating typings is a whole lot of work when the creators of Svelte could have provided native TypeScript functionality. I mean it’s rather strange since Svelte itself is written in TS. But these are the negatives of the approaching you’re recommending:

  • manually created typings often fall out of sync with the code. So the consumers of your components have code they think is working but it doesn’t actually work.
  • JS-check only checks each file independently of each other (I believe), so you don’t get awareness of the type relationships between your entire app
  • JS-check in an HTML file currently loses a lot of the power you get from TSX because you TSX will tell you if you’ve wired up your HTML properly. As where in Svelte and Vue you don’t have a CLI that will tell you that while your script section is correct... you forgot to pass any props to the Svelte component.

So refactoring becomes challenging because you don’t have he machine to tell you when your modification of the code impacts other code. This ultimately leads to the feeling that you shouldn’t ever refactor because it couple break too many things.

Compare that to working in React + TypeScript. I can refactor anything I want and have confidence that the entire website will still work. I don’t have to worry that renaming a variable in one file will break a distantly related page of the site. It’s that type relationship between pages that Svelte is missing.

Sorry, I dropped the Smiley from my reply :( Typing are definitely a hack, and a 3rd party one at that. I've often hit the sync thing myself.

I agree that if Svelte is itself Written in TS then wit hsome attndtion to details it should provide 1st class TS support. I wonder what the issues are?

I've not used TSX but from what you say it adds a level of utility (I assume as it compiles down to TS, jike JSX does to JS).

Yup, TSX is super helpful.

Let's say you have loginComponent.tsx that defines the following component:

export const LoginButton = (props: {userId: string}): JSX.Element => {
   // ... do something with props.userId and then load the page
};

You can then have a main component (typically called App.tsx) like this:

<section>
    Hello! Welcome! Click this button to Login
    <LoginButton userId={userId} />
</section>

And if you forgot to pass userId in App.tsx then the compiler would let you know that you made a mistake. If someone later refactors LoginButton to add another mandatory property, then the compiler will let you know that you forgot to circle back to App.tsx.

Nice. Better to use the language than the react specifc prop checks IMHO

code of conduct - report abuse