3 ms·

What's a good frontend setup right now if you want strong static typing? I know Vue 3 supports TypeScript for example but it doesn't look like that's their core

What's a good frontend setup right now if you want strong static typing? I know Vue 3 supports TypeScript for example but it doesn't look like that's their core audience? I don't get the appeal of frameworks introducing template tags like `{#if showFoo}` vs JSX personally. You have the learn new syntax for things you already know how to do in JavaScript but with less expressibility, and JSX can at least be type checked so you don't have runtime problems like an `<input>` sneaking a string in a number field.

TechBro8615 4y ago
React has very good support for TypeScript at this point. Not sure about the other frameworks.
- iainmerrick 4y ago
  Solid does too.
achtung82 4y ago
For Vue 3(at least for the composition api) ts support is very good and handles typing in templates and between components in a way that was a bit lacking in Vue 2. As for the other ones React seems to be pretty good with TS and obviously Angular is TS only. As for using templating logic over JSX, that is of course a matter of taste, but i find code becomes much cleaner when there is a clear separation of templates and logic, and with jsx its a bit too easy to blur that line.
ianpurton 4y ago
You could look at Rust and Dioxus https://dioxuslabs.com/ https://dioxuslabs.com/
dgb23 4y ago
To be pedantic, TS is statically typed but not strongly typed. The React ecosystem has embraced TS it seems. Angular is another obvious candidate, I think it had a strong focus on TS since quite a while. Lit/lit-html is just JS, so there are no surprises if you use TS as far as I know. I agree with the JSX issue though. It's the one thing that React does better than some of these other frameworks except to for example Lit/lit-html which is literally just JS with template literals and doesn't require a build step.
dceddia 4y ago
I don’t know if there was an implicit “besides Svelte” in there, but if you’re open to it, Svelte works well with TypeScript. The types flow into the HTML expressions too. I also like how little boilerplate there is compared to e.g. adding types to React component props. With Svelte, the prop typing is as simple as: export let name: string; export let age: number; FWIW I kinda agree with you about the #if syntax. I like that you can still use a ternary with plain JS values like {Math.random() < 0.5 ‘heads’ : ‘tails’} though, and I would say I very much don’t miss having to use nested ternaries in React.
- seanwilson 4y ago
  In Svlete (which doesn't use JSX?), are your templates type checked? Non-JSX approaches have to reinvent not only JavaScript loops and control-flow, but also the type checking that TypeScript gives? This feels like a big downside to me.
  - dceddia 4y ago
    Yep, templates are type-checked, even though it's not JSX. Svelte is already running a compiler on the components anyway, to figure out the reactive stuff and to generate the minimal code required to update those specific spots in the HTML, so it can pass that code through TypeScript's checks. I'm almost certain they haven't reinvented their own TypeScript compiler here; I believe it's just passing off the type checking work to the existing TS checker. One thing to mention or clarify maybe, is that Svelte's special syntax for {#if}'s and {#each}'s have real JS in the meat of them. Doing something like {#if a === 5}, the `a === 5` is parsed as actual JS. I really appreciated this after having used AngularJS (the 1.x versions) back in the day where it had its own half-baked flavor of JS for those embedded expressions and I was never sure if what I was writing would actually work. I would say, if you've got a handful of minutes to spare, give the first few steps of the Svelte tutorial a try if you haven't (https://svelte.dev/tutorial https://svelte.dev/tutorial). I think it does a good job of giving a feel for how it works. It's written as a series of interactive examples where they teach a concept and you can try it in the editor on the page. I had a lot of aha moments when I initially went through it, having started off skeptical about the whole idea of going backwards to templates after React. There are just a lot of little things that worked "as they should", and moments that made me go "ohhh of course that just works, it's plain JS, I see."
bananapub 4y ago
Eh? Svelte supports TS and integrates it throughout, even type checking your request locals etc.
hbrn 4y ago
"you have the learn new syntax" is a really weird argument. Every approach, be it Vue, Svelte or React introduces a new alien syntax. In my personal opinion React approach is the most alien. React's "it's just Javascript" mantra is a manipulation that only gullible folks will fall for: you can't just add a bunch of stuff to Javascript and then claim "it's just Javascript". If I throw a piece of steak in your coffee, you won't consider it "just coffee" anymore. And certainly you can't claim you're still a vegetarian after consuming that "cup of coffee". I personally find it much harder to reason about the weird condition && <element> syntax, compared to perfectly reasonable {#if condition} <element> {/if} The latter so readable that it can even be understood by a non-engineer. The "new syntax" is as close to natural language as it gets. Understanding the final layout is much harder in React. That said, custom template syntax has indentation issue (you typically want indent both HTML elements and custom template tags, so anything inside conditions/loops has double indentation), so I actually think Vue template syntax (<element v-if="condition">) offers the best tradeoffs. But regardless, at least when I'm looking at all 3 options, I see their tradeoffs and making an informed choice. React folks typically fail to even understand that there are tradeoffs. Even if you buy the "it's just Javascript" mantra, Javascript was never a good option represent a document layout.

TechBro8615 4y ago

React has very good support for TypeScript at this point. Not sure about the other frameworks.

iainmerrick 4y ago
Solid does too.

achtung82 4y ago

For Vue 3(at least for the composition api) ts support is very good and handles typing in templates and between components in a way that was a bit lacking in Vue 2. As for the other ones React seems to be pretty good with TS and obviously Angular is TS only. As for using templating logic over JSX, that is of course a matter of taste, but i find code becomes much cleaner when there is a clear separation of templates and logic, and with jsx its a bit too easy to blur that line.

ianpurton 4y ago

You could look at Rust and Dioxus https://dioxuslabs.com/ https://dioxuslabs.com/

dgb23 4y ago

To be pedantic, TS is statically typed but not strongly typed. The React ecosystem has embraced TS it seems. Angular is another obvious candidate, I think it had a strong focus on TS since quite a while. Lit/lit-html is just JS, so there are no surprises if you use TS as far as I know. I agree with the JSX issue though. It's the one thing that React does better than some of these other frameworks except to for example Lit/lit-html which is literally just JS with template literals and doesn't require a build step.

dceddia 4y ago

I don’t know if there was an implicit “besides Svelte” in there, but if you’re open to it, Svelte works well with TypeScript. The types flow into the HTML expressions too. I also like how little boilerplate there is compared to e.g. adding types to React component props. With Svelte, the prop typing is as simple as: export let name: string; export let age: number; FWIW I kinda agree with you about the #if syntax. I like that you can still use a ternary with plain JS values like {Math.random() < 0.5 ‘heads’ : ‘tails’} though, and I would say I very much don’t miss having to use nested ternaries in React.

seanwilson 4y ago
In Svlete (which doesn't use JSX?), are your templates type checked? Non-JSX approaches have to reinvent not only JavaScript loops and control-flow, but also the type checking that TypeScript gives? This feels like a big downside to me.
- dceddia 4y ago
  Yep, templates are type-checked, even though it's not JSX. Svelte is already running a compiler on the components anyway, to figure out the reactive stuff and to generate the minimal code required to update those specific spots in the HTML, so it can pass that code through TypeScript's checks. I'm almost certain they haven't reinvented their own TypeScript compiler here; I believe it's just passing off the type checking work to the existing TS checker. One thing to mention or clarify maybe, is that Svelte's special syntax for {#if}'s and {#each}'s have real JS in the meat of them. Doing something like {#if a === 5}, the `a === 5` is parsed as actual JS. I really appreciated this after having used AngularJS (the 1.x versions) back in the day where it had its own half-baked flavor of JS for those embedded expressions and I was never sure if what I was writing would actually work. I would say, if you've got a handful of minutes to spare, give the first few steps of the Svelte tutorial a try if you haven't (https://svelte.dev/tutorial https://svelte.dev/tutorial). I think it does a good job of giving a feel for how it works. It's written as a series of interactive examples where they teach a concept and you can try it in the editor on the page. I had a lot of aha moments when I initially went through it, having started off skeptical about the whole idea of going backwards to templates after React. There are just a lot of little things that worked "as they should", and moments that made me go "ohhh of course that just works, it's plain JS, I see."

bananapub 4y ago

Eh? Svelte supports TS and integrates it throughout, even type checking your request locals etc.

hbrn 4y ago

"you have the learn new syntax" is a really weird argument. Every approach, be it Vue, Svelte or React introduces a new alien syntax. In my personal opinion React approach is the most alien. React's "it's just Javascript" mantra is a manipulation that only gullible folks will fall for: you can't just add a bunch of stuff to Javascript and then claim "it's just Javascript". If I throw a piece of steak in your coffee, you won't consider it "just coffee" anymore. And certainly you can't claim you're still a vegetarian after consuming that "cup of coffee". I personally find it much harder to reason about the weird condition && <element> syntax, compared to perfectly reasonable {#if condition} <element> {/if} The latter so readable that it can even be understood by a non-engineer. The "new syntax" is as close to natural language as it gets. Understanding the final layout is much harder in React. That said, custom template syntax has indentation issue (you typically want indent both HTML elements and custom template tags, so anything inside conditions/loops has double indentation), so I actually think Vue template syntax (<element v-if="condition">) offers the best tradeoffs. But regardless, at least when I'm looking at all 3 options, I see their tradeoffs and making an informed choice. React folks typically fail to even understand that there are tradeoffs. Even if you buy the "it's just Javascript" mantra, Javascript was never a good option represent a document layout.