6 ms·

What's new in Svelte (Dec 2020)

137 points by krona 6y ago

Tade0 6y ago
One minor nitpick: "strongly typed" is not very meaningful. "statically typed" (or just "typed") conveys the intended meaning much better, since it has a clear definition. Anyway adding proper support for TS sealed the deal for me - Svelte itself might never reach mainstream adoption but the idea of having a framework-compiler is something that I hope will, since it retains all the advantages of alternative approaches without introducing any significant disadvantages.
- malkarouri 6y ago
  https://en.hexlet.io/courses/intro_to_programming/lessons/types/theory_unit https://en.hexlet.io/courses/intro_to_programming/lessons/ty...
  - Tade0 6y ago
    Funny you should mention it, because that's just one of many definitions. Off the top of my head there's also "strong", as in "the type system is sound" or "not allowing pointer arithmetic". It's not that clear cut.
- lucideer 6y ago
  "Strongly typed" and "statically typed" are not synonymous. Yes, SvelteComponentTyped is statically typed, but that's somewhat implicit (and irrelevant) here. What they're referring to in that particular sentence is ease of strong typing. Static typing is a separate thing.
  - vanderZwan 6y ago
    That's true, but GP's point about how nobody really agrees on what "strongly typed" means still holds up. It might be worthwhile to frame it as "static and strongly¹ typed" with a footnote expanding on what "strongly" means to the svelte developers, just to get everyone to agree what we are even talking about in the first place.
    - lucideer 6y ago
      I'm not sure I'd agree that nobody agrees on what "strongly typed" means (yes I understand that sounds like an oxymoron but bear with me). I think the confusion around the term mainly arises from people in computer science having a strong ;) preference for binary definitions. To be able to say "X is strongly typed" and "Y is not strongly typed" is desirable. However, linguistically, "strong" and "weak" are not binary terms. Static is: something is static or is not. But strength/weakness is an assessment on a scale. Defining something as "strong" is always, by definition, relative and somewhat subjective in nature. That isn't to say that the definition of "strongly typed" is subjective; we can find agreement on what scale "strong types" live upon. But the application of the term to any given object is subjective. We cannot say "X is strongly typed", we can only say "X is more/less/very/not very strongly typed".
      - vanderZwan 6y ago
        > That isn't to say that the definition of "strongly typed" is subjective; we can find agreement on what scale "strong types" live upon. We cannot say "X is strongly typed", we can only say "X is more/less/very/not very strongly typed". I agree with your overall argument, but in this conclusion I subtly disagree: it implies that we could come up with some linear quantitative scale from 0 to 1 of how strongly typed something is. I don't think we can, it's a composite of qualitative features that defies that approach. It might even be a somewhat rock-paper-scissors like kind of thing where also we cannot really value each feature because their positive or negative value greatly depends on the presence or absence of other features.
- darksaints 6y ago
  Strongly typed is meaningful and has a real definition, but it is used incorrectly here. Strongly typed means that invalid runtime types result in invalid programs...which can actually be true for both static typed languages (like Rust or OCaml) and dynamic typed languages (like Python, which throws errors on invalid types). Typescript is statically typed but it is also weakly typed. Types are validated at compile time, but they do not prevent you from using invalid types at runtime.
skellera 6y ago
Now that it’s been around for some time, what’s the general thought on it? Anyone use it then go back to the traditional frameworks? Anyone love it and still think it’s the next big thing?
- troquerre 6y ago
  I wouldn’t use it for big commercial projects because the ecosystem isn’t very big (ie I wouldn’t build a b2b saas app with it) but for small projects and side projects it’s great.
- nikivi 6y ago
  Haven't used it personally yet but this recent podcast episode with Rich Harris & Evan You had many interesting thoughts on state of web dev & svelte https://undefined.fm/radio/vue-vs-svelte-with-evan-you-and-rich-harris https://undefined.fm/radio/vue-vs-svelte-with-evan-you-and-r...
- erokar 6y ago
  We've switched to Svelte for new projects at work, from React. It feels like a significant improvement, especially regarding unnecessary complexity and verbosity. The UI component libraries for Svelte are still lacking in maturity, that's the one drawback I can think of.
  - vanderZwan 6y ago
    > It feels like a significant improvement, especially regarding unnecessary complexity and verbosity. > The UI component libraries for Svelte are still lacking in maturity The typical counterargument usually made at this point would be "those two points are related" (to paraphrase Bjarne Stroustrup: "every ship gets barnacles as it ages"). So let's anticipate that: do you have any reasons to believe that Svelte will avoid adding accidental complexity/verbosity to it as it/the surrounding ecosystem matures, and if so, how do you think that will be mitigated?
    - throwaway894345 6y ago
lprd 6y ago
I'm really excited to see further development and use of Svelte. I develop both Vue and React front ends (both have their strengths and weaknesses) and Svelte is a breath of fresh air. I'm not saying Svelte is _better_, but I am enjoying It's approach a bit more.
ehejsbbejsk 6y ago
Can someone explain to me why we have so many front-end frameworks?
- ThaJay 6y ago
  They're all shit in one way or another and they are all based on a language that is constantly evolving and used to be a mess of different interpretations of an unclear standard I guess?
- christophilus 6y ago
  Some people prefer FP. Some prefer OOP. Some need just a sprinkling of interactivity. Some need to build complex UIs. Some need to run on underpowered devices while others don’t. Some dislike too much abstraction. Some prefer it. In short, we have a plethora of frameworks for the same reason we have a plethora of languages, sodas, beers, coffees, tools, products, novels, etc. Humans are messy.
- 1123581321 6y ago
  JS front-end frameworks are born from ad hoc application architecture or from difficulty applying an existing framework to an application. The progenitor applications had different feature and development requirements, which is reflected in the varying frameworks. While it may seem a plethora of frameworks exist, a few have most of the market share. That is not too far from the situation with other programming languages and framework types. There are also old frameworks that have essentially been obsoleted but continue to stick around due to project inertia, the needs of legacy code, or marketing needs of the maintaining organizations.
- madeofpalk 6y ago
  "Can someone explain to me why we have so many programming languages?" Different strokes for different folks. People are trying to make new things that solve what they think are pain points in previous approaches. There really isnt "so many" frontend frameworks. React is the clear leader, with Vue and Angular trailing behind. Svelte is a bit more of an experimental/innovative thing.
- pogorniy 6y ago
vanderZwan 6y ago
> Vippet is a video recording and editing tool for the browser. Wait, is this thing entirely client-side, in only 17.5 KiB? I know browsers can capture video frames, but how does it export it afterwards? [0] https://vippet.netlify.app/ https://vippet.netlify.app/
- longnguyen 6y ago
  You can use MediaStream Recording API[0] for that [0] https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream...
- pimterry 6y ago
  I think this is the source: https://github.com/mattorchard/vippet/ https://github.com/mattorchard/vippet/. Export code is here: https://github.com/mattorchard/vippet/blob/master/src/helpers/exportHelpers.ts https://github.com/mattorchard/vippet/blob/master/src/helper.... Seems like MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder https://developer.mozilla.org/en-US/docs/Web/API/MediaRecord...) is the standard API to record the screen, it takes a video format during setup, and then `recorder.requestData()` will give you the raw bytes for your format of choice when you're done, ready to download and save or do whatever with. Web standards do a lot of heavy lifting for you nowadays!
- ricardobeat 6y ago
  That is the beauty of Svelte. Check out the Timeline component you see at the bottom: https://github.com/mattorchard/vippet/blob/master/src/components/Timeline.svelte https://github.com/mattorchard/vippet/blob/master/src/compon... The entire app bundle [1] is roughly the size of a library adapter like react-redux [2], which is just glue code. [1] https://vippet.netlify.app/build/bundle.js https://vippet.netlify.app/build/bundle.js [2] https://unpkg.com/react-redux@7.2.2/dist/react-redux.min.js https://unpkg.com/react-redux@7.2.2/dist/react-redux.min.js
  - vanderZwan 6y ago
    I don't think your point really applies to my question, which was more about what exactly was doing the heavy lifting of the video exporting. As a point of reference, just this week I saw someone on Observable experiment with WASM-compiled encoder packages for that exact reason[0][1]. Svelte seems really nice and lean though, I do agree with that [0] https://www.npmjs.com/package/h264-mp4-encoder https://www.npmjs.com/package/h264-mp4-encoder [1] https://observablehq.com/@rreusser/h264-mp4-encoder https://observablehq.com/@rreusser/h264-mp4-encoder
tda 6y ago
Can I use svelte as an alternative to nuxt.js? I want to create a simple website where most of the content is written in markdown, that is rendered to static html (that can be hosted on e.g. netlify). As it is kind of a hobby project, might as well learn the next hot thingg? Is Svelte suitable for these kind of applications? Some of the features of nuxt.js that i like: content module (put some markdown files in a folder and the routes, write a template and then all the html rendering etc is all taken care of) extensions for image resizing so images are resized to multiple resolutions as part of the build process, hot reloading in development
- kasbah 6y ago
  I believe you are looking for Sapper, which is the Next/Nuxt equivalent for Svelte. https://sapper.svelte.dev https://sapper.svelte.dev
  - partusman 6y ago
    Be aware Sapper will never reach 1.0, and instead will be replaced by just using Svelte (with SvelteKit). https://svelte.dev/blog/whats-the-deal-with-sveltekit https://svelte.dev/blog/whats-the-deal-with-sveltekit
    - tda 6y ago
      Thanks! Too bad SvelteKit is still in beta, cause I don't feel inclined investing any time in Sapper now I know that that is going to be deprecated. Guess I'll have to be brave and try it out npm init svelte@next
    - yawnxyz 6y ago
      seems like they're trying to make it super simple to go from Sapper to SvelteKit... here's to hoping it doesn't break too many things
- Tade0 6y ago
  My "blog" (HR bait really) is exactly such a thing(using Sapper), but I had to integrate the markdown->html library by myself, I don't resize images and hit reload doesn't work. So basically it's possible, put you have to put the thing together by yourself.
Keats 6y ago
Has anyone used Svelte and https://github.com/ryansolid/solid https://github.com/ryansolid/solid ?
- fuzzythinker 6y ago
  Currently trying it out on a new project. Haven't dive too deep with it yet, but like it so far.
- aabbcc1241 6y ago
  Solid is inspired from s-js and react. (And also ts-liveview is inspired from s-js and Phoenix Liveview)
eecks 6y ago
I enjoy writing in Svelte more than using React. I like the concept that the output doesn't contain the actual library. I think testing tools is a must have though otherwise it will just be for my personal projects. Looking forward to SvelteKit - I don't care for TS though.
- arxpoetica 6y ago
  SvelteKit will not require TS. You'll be able to do with or without.

137 points by krona 6y ago

One minor nitpick: "strongly typed" is not very meaningful. "statically typed" (or just "typed") conveys the intended meaning much better, since it has a clear definition. Anyway adding proper support for TS sealed the deal for me - Svelte itself might never reach mainstream adoption but the idea of having a framework-compiler is something that I hope will, since it retains all the advantages of alternative approaches without introducing any significant disadvantages.

malkarouri 6y ago
https://en.hexlet.io/courses/intro_to_programming/lessons/types/theory_unit https://en.hexlet.io/courses/intro_to_programming/lessons/ty...
- Tade0 6y ago
  Funny you should mention it, because that's just one of many definitions. Off the top of my head there's also "strong", as in "the type system is sound" or "not allowing pointer arithmetic". It's not that clear cut.
lucideer 6y ago
"Strongly typed" and "statically typed" are not synonymous. Yes, SvelteComponentTyped is statically typed, but that's somewhat implicit (and irrelevant) here. What they're referring to in that particular sentence is ease of strong typing. Static typing is a separate thing.
- vanderZwan 6y ago
  That's true, but GP's point about how nobody really agrees on what "strongly typed" means still holds up. It might be worthwhile to frame it as "static and strongly¹ typed" with a footnote expanding on what "strongly" means to the svelte developers, just to get everyone to agree what we are even talking about in the first place.
  - lucideer 6y ago
    I'm not sure I'd agree that nobody agrees on what "strongly typed" means (yes I understand that sounds like an oxymoron but bear with me). I think the confusion around the term mainly arises from people in computer science having a strong ;) preference for binary definitions. To be able to say "X is strongly typed" and "Y is not strongly typed" is desirable. However, linguistically, "strong" and "weak" are not binary terms. Static is: something is static or is not. But strength/weakness is an assessment on a scale. Defining something as "strong" is always, by definition, relative and somewhat subjective in nature. That isn't to say that the definition of "strongly typed" is subjective; we can find agreement on what scale "strong types" live upon. But the application of the term to any given object is subjective. We cannot say "X is strongly typed", we can only say "X is more/less/very/not very strongly typed".
    - vanderZwan 6y ago
      > That isn't to say that the definition of "strongly typed" is subjective; we can find agreement on what scale "strong types" live upon. We cannot say "X is strongly typed", we can only say "X is more/less/very/not very strongly typed". I agree with your overall argument, but in this conclusion I subtly disagree: it implies that we could come up with some linear quantitative scale from 0 to 1 of how strongly typed something is. I don't think we can, it's a composite of qualitative features that defies that approach. It might even be a somewhat rock-paper-scissors like kind of thing where also we cannot really value each feature because their positive or negative value greatly depends on the presence or absence of other features.
darksaints 6y ago
Strongly typed is meaningful and has a real definition, but it is used incorrectly here. Strongly typed means that invalid runtime types result in invalid programs...which can actually be true for both static typed languages (like Rust or OCaml) and dynamic typed languages (like Python, which throws errors on invalid types). Typescript is statically typed but it is also weakly typed. Types are validated at compile time, but they do not prevent you from using invalid types at runtime.

skellera 6y ago

Now that it’s been around for some time, what’s the general thought on it? Anyone use it then go back to the traditional frameworks? Anyone love it and still think it’s the next big thing?

troquerre 6y ago
I wouldn’t use it for big commercial projects because the ecosystem isn’t very big (ie I wouldn’t build a b2b saas app with it) but for small projects and side projects it’s great.
nikivi 6y ago
Haven't used it personally yet but this recent podcast episode with Rich Harris & Evan You had many interesting thoughts on state of web dev & svelte https://undefined.fm/radio/vue-vs-svelte-with-evan-you-and-rich-harris https://undefined.fm/radio/vue-vs-svelte-with-evan-you-and-r...
erokar 6y ago
We've switched to Svelte for new projects at work, from React. It feels like a significant improvement, especially regarding unnecessary complexity and verbosity. The UI component libraries for Svelte are still lacking in maturity, that's the one drawback I can think of.
- vanderZwan 6y ago
  > It feels like a significant improvement, especially regarding unnecessary complexity and verbosity. > The UI component libraries for Svelte are still lacking in maturity The typical counterargument usually made at this point would be "those two points are related" (to paraphrase Bjarne Stroustrup: "every ship gets barnacles as it ages"). So let's anticipate that: do you have any reasons to believe that Svelte will avoid adding accidental complexity/verbosity to it as it/the surrounding ecosystem matures, and if so, how do you think that will be mitigated?
  - throwaway894345 6y ago

lprd 6y ago

I'm really excited to see further development and use of Svelte. I develop both Vue and React front ends (both have their strengths and weaknesses) and Svelte is a breath of fresh air. I'm not saying Svelte is _better_, but I am enjoying It's approach a bit more.

ehejsbbejsk 6y ago

Can someone explain to me why we have so many front-end frameworks?

ThaJay 6y ago
They're all shit in one way or another and they are all based on a language that is constantly evolving and used to be a mess of different interpretations of an unclear standard I guess?
christophilus 6y ago
Some people prefer FP. Some prefer OOP. Some need just a sprinkling of interactivity. Some need to build complex UIs. Some need to run on underpowered devices while others don’t. Some dislike too much abstraction. Some prefer it. In short, we have a plethora of frameworks for the same reason we have a plethora of languages, sodas, beers, coffees, tools, products, novels, etc. Humans are messy.
1123581321 6y ago
JS front-end frameworks are born from ad hoc application architecture or from difficulty applying an existing framework to an application. The progenitor applications had different feature and development requirements, which is reflected in the varying frameworks. While it may seem a plethora of frameworks exist, a few have most of the market share. That is not too far from the situation with other programming languages and framework types. There are also old frameworks that have essentially been obsoleted but continue to stick around due to project inertia, the needs of legacy code, or marketing needs of the maintaining organizations.
madeofpalk 6y ago
"Can someone explain to me why we have so many programming languages?" Different strokes for different folks. People are trying to make new things that solve what they think are pain points in previous approaches. There really isnt "so many" frontend frameworks. React is the clear leader, with Vue and Angular trailing behind. Svelte is a bit more of an experimental/innovative thing.
pogorniy 6y ago

vanderZwan 6y ago

> Vippet is a video recording and editing tool for the browser. Wait, is this thing entirely client-side, in only 17.5 KiB? I know browsers can capture video frames, but how does it export it afterwards? [0] https://vippet.netlify.app/ https://vippet.netlify.app/

longnguyen 6y ago
You can use MediaStream Recording API[0] for that [0] https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream...
pimterry 6y ago
I think this is the source: https://github.com/mattorchard/vippet/ https://github.com/mattorchard/vippet/. Export code is here: https://github.com/mattorchard/vippet/blob/master/src/helpers/exportHelpers.ts https://github.com/mattorchard/vippet/blob/master/src/helper.... Seems like MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder https://developer.mozilla.org/en-US/docs/Web/API/MediaRecord...) is the standard API to record the screen, it takes a video format during setup, and then `recorder.requestData()` will give you the raw bytes for your format of choice when you're done, ready to download and save or do whatever with. Web standards do a lot of heavy lifting for you nowadays!
ricardobeat 6y ago
That is the beauty of Svelte. Check out the Timeline component you see at the bottom: https://github.com/mattorchard/vippet/blob/master/src/components/Timeline.svelte https://github.com/mattorchard/vippet/blob/master/src/compon... The entire app bundle [1] is roughly the size of a library adapter like react-redux [2], which is just glue code. [1] https://vippet.netlify.app/build/bundle.js https://vippet.netlify.app/build/bundle.js [2] https://unpkg.com/react-redux@7.2.2/dist/react-redux.min.js https://unpkg.com/react-redux@7.2.2/dist/react-redux.min.js
- vanderZwan 6y ago
  I don't think your point really applies to my question, which was more about what exactly was doing the heavy lifting of the video exporting. As a point of reference, just this week I saw someone on Observable experiment with WASM-compiled encoder packages for that exact reason[0][1]. Svelte seems really nice and lean though, I do agree with that [0] https://www.npmjs.com/package/h264-mp4-encoder https://www.npmjs.com/package/h264-mp4-encoder [1] https://observablehq.com/@rreusser/h264-mp4-encoder https://observablehq.com/@rreusser/h264-mp4-encoder

tda 6y ago

Can I use svelte as an alternative to nuxt.js? I want to create a simple website where most of the content is written in markdown, that is rendered to static html (that can be hosted on e.g. netlify). As it is kind of a hobby project, might as well learn the next hot thingg? Is Svelte suitable for these kind of applications? Some of the features of nuxt.js that i like: content module (put some markdown files in a folder and the routes, write a template and then all the html rendering etc is all taken care of) extensions for image resizing so images are resized to multiple resolutions as part of the build process, hot reloading in development

kasbah 6y ago
I believe you are looking for Sapper, which is the Next/Nuxt equivalent for Svelte. https://sapper.svelte.dev https://sapper.svelte.dev
- partusman 6y ago
  Be aware Sapper will never reach 1.0, and instead will be replaced by just using Svelte (with SvelteKit). https://svelte.dev/blog/whats-the-deal-with-sveltekit https://svelte.dev/blog/whats-the-deal-with-sveltekit
  - tda 6y ago
    Thanks! Too bad SvelteKit is still in beta, cause I don't feel inclined investing any time in Sapper now I know that that is going to be deprecated. Guess I'll have to be brave and try it out npm init svelte@next
  - yawnxyz 6y ago
    seems like they're trying to make it super simple to go from Sapper to SvelteKit... here's to hoping it doesn't break too many things
Tade0 6y ago
My "blog" (HR bait really) is exactly such a thing(using Sapper), but I had to integrate the markdown->html library by myself, I don't resize images and hit reload doesn't work. So basically it's possible, put you have to put the thing together by yourself.

Keats 6y ago

Has anyone used Svelte and https://github.com/ryansolid/solid https://github.com/ryansolid/solid ?

fuzzythinker 6y ago
Currently trying it out on a new project. Haven't dive too deep with it yet, but like it so far.
aabbcc1241 6y ago
Solid is inspired from s-js and react. (And also ts-liveview is inspired from s-js and Phoenix Liveview)

eecks 6y ago

I enjoy writing in Svelte more than using React. I like the concept that the output doesn't contain the actual library. I think testing tools is a must have though otherwise it will just be for my personal projects. Looking forward to SvelteKit - I don't care for TS though.

arxpoetica 6y ago
SvelteKit will not require TS. You'll be able to do with or without.