37 ms·

Svelte is the most beautiful web framework I've seen

334 points by bhalp1 7y ago

caiocaiocaio 7y ago
I like playing with different web frameworks, but the article had a bad hype:information ratio, so I googled the Svelte homepage, which I think is really well presented: https://svelte.dev/ https://svelte.dev/
- notus 7y ago
  I get a 404
  - davideg 7y ago
    Go directly to https://svelte-website-mrf26sti4q-uc.a.run.app/ https://svelte-website-mrf26sti4q-uc.a.run.app/ and it seems to be working fine.
  - rich_harris 7y ago
    The site is hosted on Google Cloud Run, which seems to have been having some intermittent problems for the last couple of days. EDIT: some other people have had the same issue and the Cloud Run team are investigating
    - ernsheong 7y ago
      Looks like this issue: https://issuetracker.google.com/issues/136539678 https://issuetracker.google.com/issues/136539678
      - rich_harris 7y ago
        Yep — I added our details to it. I mentioned the problems we were having on Twitter and a Cloud Run PM came to help immediately! So I'm hopeful we'll get a resolution before long. (Aside from this glitch, Cloud Run has been great for us, and we're looking forward to it coming out of beta)
      - tedunangst 7y ago
        Not visible without signing in to google.
    - thefounder 7y ago
      Sounds like a very Google-cloud/appengine issue. Maybe it's time to rewrite a bunch of things(very appengine again)
  - eeeeeeeeeeeee 7y ago
    I was getting this intermittently an hour or so ago, too.
- dewey 7y ago
  > the article had a bad hype:information ratio That'd be 95% of all these dev.to articles
  - benatkin 7y ago
    It's also on the author's blog: https://www.thefutureoftheweb.com/blog/svelte-is-the-most-beautiful-framework-ive-ever-seen https://www.thefutureoftheweb.com/blog/svelte-is-the-most-be...
    - dang 7y ago
      Ok, we've changed to that from https://dev.to/jesseskinner/svelte-is-the-most-beautiful-web-framework-i-ve-ever-seen-325f https://dev.to/jesseskinner/svelte-is-the-most-beautiful-web..., since the preference here is for original sources.
- deleted 7y ago
  [deleted]
- jgwil2 7y ago
  Code examples on the Svelte website look jacked... all I see is an alert icon + "loading svelte compiler"
  - thirdsun 7y ago
    Same here on Firefox 68.0b14.
s_y_n_t_a_x 7y ago
My main gripes are no TypeScript support and going to mustache-like templates after working with JSX/TSX is a step back for me. Also losing React Native, which is non-issue if you're just developing a web app.
- yodon 7y ago
  Agreed, JSX/TSX feels so incredibly natural it's hard to imagine giving it up, and starting a significant JS project in 2019 or 2020 without using TypeScript would feel professionally negligent to me.
  - _0o6v 7y ago
    Using JS ternaries for conditional rendering doesn't feel natural to me at all
    - yodon 7y ago
      Ok, I should probably edit my comment to "JSX/TSX feels so incredibly natural except for needing to use JS ternaries for conditional rendering" because seriously what were they thinking there?
      - steinuil 7y ago
        This is more of an issue with JS than React. ReasonML also has JSX support and since `if` is an expression rather than a statement you can do this: <div> {if (cond) { <Comp1 /> } else { <Comp2 /> }} </div> Or even: <div> {switch (expr) { | A => <CompA /> | B => <CompB /> | _ => <CompC /> }} </div>
      - ducaale 7y ago
        maybe do-expression proposal could help https://github.com/tc39/proposal-do-expressions https://github.com/tc39/proposal-do-expressions
    - manigandham 7y ago
marcus_holmes 7y ago
I get a 500 error on the second page of the "getting started", so... nope, not the most beautiful I've seen.
- mfatica 7y ago
  if they use cloudflare that's the reason why. all of cloudflare was down today
- davideg 7y ago
  Go directly to https://svelte-website-mrf26sti4q-uc.a.run.app/ https://svelte-website-mrf26sti4q-uc.a.run.app/ and it works fine. Someone posted a link to the Google Cloud Run issue above[1] that links to the non-vanity URL. [1] https://issuetracker.google.com/issues/136539678 https://issuetracker.google.com/issues/136539678
- MattBearman 7y ago
  I'm getting the same, which is a shame, as I'm genuinely intrigued by Svelte
- rich_harris 7y ago
  Yep, having some problems this week with Google Cloud Run (which hosts the site). I guess that's what happens when you use a platform that's still in beta...
bin0 7y ago
Svelte is so great... so were react, angular, ember, meteor, and vue. I'm sorry, but I've got trouble seeing how having one more framework to learn is going to help any thing. There's a webcomic of some sort to which I can't find the link, which talks about this. Some one is sick of the bloat of x framework/tool/whatever, and decides to build it better. He works hard, and finally version 1.0 is released to dramatic music. But there's a problem - it hits the real world and starts running into edge cases, bugs, and other things that can't be predicted in design and testing, necessarily. Features creep, and over time, it becomes just as bad as that which it sought to replace. Then, some bright young soul gets the idea that he can do it better... This is not to discourage innovation. It doesn't appear it's been battle-tested like other frameworks, and I don't see many major operations on the list of users. If it ends up better, great, but I can't say I'm optimistic.
- manigandham 7y ago
  It's just more options. Svelte is new in that it actually compiles the components and logic into plain low-level JS code instead of having a "runtime". It's something most of these frameworks should have already done by now considering they need build steps but maybe it needed a new project to make it happen. It's a brand new release though so it'll take more time for uptake, and by people who think the opposite of what you typed.
  - bin0 7y ago
    You're right that it's more options, but it's also one more box a "competent JS dev" is expected to tick. One of the best and worst things about the JS ecosystem is the plethora of choices available. On compilation, nope. Riot.js did it first, and this is literally the entire premise of typescript (I know typescript is a different language, but I see little difference here as it can mix with JS between writing only some stuff in TS). You're right, they probably should have done it, and I'm excited to see it. But I also don't see why they couldn't have submitted a PR to react/angular/ember/meteor/vue.
    - rich_harris 7y ago
deleted 7y ago
[deleted]
jbverschoor 7y ago
This is not a web-framework. It is an frontend app framework for html/javascript
- tantalor 7y ago
  Okay I'll bite: what's the difference?
  - nhooyr 7y ago
    I think he thinks a Web framework would be the backend or full stack.
- http-teapot 7y ago
  This is not a car. It is an electricity-powered four-wheel vehicle. So yeah, it's a car. This is not a PC. It is a Mac. So yeah, it's a personal computer. A framework that powers the web, isn't it a web framework? It's just a very broad category that also includes backend framework.
  - jbverschoor 7y ago
    Nah, it does not power the web in any way. It is a html/java script application framework. Nginx powers the web. Chrome powers the web. Rails powers the web.
fasterdom 7y ago
I have a table of 100 rows x 10 columns mostly of numbers which change 10 times a second (think trading). The source data sits in an array of objects. On each update, I need to update the table cells with the latest values from the source array. The content of each cell can change, possibly it's css class too (from red it become blue for example). I'm using Vue/Bootstrap-Vue table at the moment, but it's quite slow. Is Svelte suitable for this? Other options to quickly update a <table> from data in an array of objects, one object per row?
- armandososa 7y ago
  I had a similar issue on an app. I solved it with an event bus.
- gaze 7y ago
  Seems to me that you'd want to update the part of the table that's viewable.
  - twic 7y ago
    For a 100 x 10 table i would think you can get away with updating all of it.
- deaddodo 7y ago
  No matter which framework you describe, this is an iterative approach and will be inefficient. The optimized (or, at least faster) way to handle this would be to have a unique ID attached to a cell and offer a direct callback to it via the data. E.g. the symbol for "GOOG" stored in a hash table, when GOOG updates; call that hash directly: "symbols[symbol].update(data)" then re-render the cell DOM element.
  - nickthemagicman 7y ago
    Studying cracking the code interview at the moment and neat seeing this as is an actual use case for some of the array/hashmap interview questions.
  - 7y ago
larvaetron 7y ago
It's kind of funny that the styling example is literally just plain-old CSS and HTML, not sure if that was intentional?
CharlesW 7y ago
I watched Rich Harris's "Rethinking reactivity" presentation (https://www.youtube.com/watch?v=AdNJ3fydeao https://www.youtube.com/watch?v=AdNJ3fydeao) and was incredibly impressed. Has anyone with React/Vue experience used Svelte for a significant project? I'd love to hear about your experience with it.
- wirahx 7y ago
  Yeah - I wrote https://www.beyonk.com https://www.beyonk.com in Nuxt first, and I've now rewritten it in Svelte (Sapper). There are some things which weren't ready when I started, but I worked around them. The overall experience is that Svelte results in faster pages, less code, more predictability, faster builds... overall, it's a better experience.
  - vimota 7y ago
    Other than performance, was the developer experience any different? Just curious!
  - exclipy 7y ago
    Nice. I like the SSR and that subsequent page loads are basically just a 5KB fetch of pure content in JSON. But if I go to a content page (eg. https://www.beyonk.com/uk/6Gb_Kj/guided-ascent-of-curved-ridge https://www.beyonk.com/uk/6Gb_Kj/guided-ascent-of-curved-rid...), I see that the response is a 286KB blob, mostly consisting of CSS. If I reload the page, I redownload that 286KB blob. Wouldn't it be better to serve the CSS separately so it can be cached across sessions?
benatkin 7y ago
Interesting that the custom element appears to just take a single JavaScript object as a parameter: <Board {game} /> In JSX this would be either: <Board game={game} /> or: <Board {...{game}} /> This is almost as ergonomic as JSX except for attributes like checked where the value is omitted. It might encourage some refactoring, compared with React, because the thought of putting attributes in a variable and adding them as a spread might occur more often when seeing an object being passed in. At any rate, I recommend looking at the code example linked in the post, or watching the video. Otherwise the post is pretty low in information, as the top comment at the time of writing this suggested. https://github.com/jesseskinner/svelte-tic-tac-toe https://github.com/jesseskinner/svelte-tic-tac-toe
- mkishi 7y ago
  In Svelte, <Board {game} /> Is just a shorthand for: <Board game={game} /> Spreading also works, although it's not nearly as used: <Board {...{game}} /> Boolean HTML attributes like "checked" can be used with boolean variables as-is: <input type="checkbox" {checked}> <input type="checkbox" checked={someBoolean}> I highly recommend anyone to go through the tutorial (at least once Google Cloud Run issues are solved) to get a feel of how things work together.
  - benatkin 7y ago
    Oh, I see. Looking further into the docs, I see that a JavaScript expression can be added inside an attribute string: <a href="page/{p}">page {p}</a> https://svelte.dev/docs#Attributes_and_props https://svelte.dev/docs#Attributes_and_props It seems like a neat design.
- ScottFree 7y ago
  Am I the only one who would rather write the following instead of JSX? Board.draw(game) or drawBoard(game)
  - hombre_fatal 7y ago
    Not sure how that's a preference without any further context about how you plan on writing the rest of the client. For all we know, both of those functions return <Board {game} />.
beardedman 7y ago
Let the "soap box brigade" commence! I got introduced to Rich Harris via a podcast (not personally), but am a big fan of his perspective on JS. I think we can all agree that; if you don't like Svelte, then fine. If you love JSX/TSX - then great! If you're a Vue person, then awesome - its exactly what makes this community great - the diversity & innovation. Not the soap-boxing antics, polarised opinions & vilification of opinions that aren't congruent with your own. As someone much wiser than me once said - "always bet on Javascript".
- shados 7y ago
  Totally agreed that the diversity of technical innovation is how we got here and its fantastic. Hopefully we keep up with more innovations (such as npm alternatives :cough:). Its easy to see why some folks would get riled up over this crap though. Like, if you don't like React right now, but want to do frontend development professionally, your job prospects get slashed in half or more. Really like Vue? That's awesome! But you might have a small fraction of the options your peers do when interviewing. Like a more exotic solution like Svelte or Elm? Hope you like working remote or are okay with relocating for that, because there's probably not that many places to work at in your area. So people will try really hard to get the community to rally around their favorite choices. And the tools without cheerleader squads often fade away and die. Rock and a hard place.
- draw_down 7y ago
  At a job I had years back, we built our application with Ractive, it was really nice to use.
  - cmpolis 7y ago
    I had a similar experience. I wish Ractive would have gained more traction; it was a good balance of "enough functionality that a web UI requires" and "simple enough to avoid cognitive overload and allowed for quick ramp up".
    - DonnyV 7y ago
tthisk 7y ago
The idea behind svelte is neat, i wonder though what the impact of its approach will be on a developers ability to understand what is happening under the hood. In my experience opaque abstraction layers can really hamper your ability to properly understand what is going on. Traditionally the JS ecosystem has been a frontrunner in this area (e.g. sourcemaps). But I have had terrible experiences in the Java ecosystem, with all its aspect weaving and annotation magic.
- mfatica 7y ago
  I think svelte compiling to native javascript is lightyears more understandable than whatever the hell react is doing
  - thiht 7y ago
    > whatever the hell react is doing Being JavaScript?
    - shados 7y ago
      I'm a huge React fanboy, but if you try and step through the React code with a debugger, we're kind of a far cry from the days of Backbone and even Angular. For the common mortal, it has to be treated as a black box. Fortunately, its fairly stable, so it's rare you have to care, but...
      - acemarke 7y ago
        Yeah, the ability to step into Backbone code and back out of it into my own code was one of the things I liked about Backbone. That said, React's mental model is so powerful that I've almost never needed to actually debug into it to see what's going on. If you've got an issue, tracing the dataflow in your own code is generally sufficient. So, I'm okay treating it as a black box. (Hiya, Shados!)
  - s_y_n_t_a_x 7y ago
    I think it's the reverse. If you write pure functional components, React is very understandable. It's easily testable, you know that you'll have the same output if you pass it the same props. Svelte templates just take us back where we've been, with the twist of compiling the templates, which I believe some templating libraries already did.
knubie 7y ago
There was a really interesting discussion recently in r/Clojure about Svelte, and how its ideas relate to and can be translated to Clojurescript. https://www.reddit.com/r/Clojure/comments/bqh0z4/virtual_dom_is_pure_overhead/ https://www.reddit.com/r/Clojure/comments/bqh0z4/virtual_dom...
anderspitman 7y ago
Svelte looks really cool. Has anyone compared it in-depth to imba[0]? [0] http://imba.io/ http://imba.io/
- onemoresoop 7y ago
  I really like the demo video, you can select the code, scroll up and down, see different files. This is really neat!
  - anderspitman 7y ago
    Oh cool I didn't realize it was interactive. I'm pretty sure this is their scrimba platform[0], which is what they built imba for in the first place. [0] https://scrimba.com/ https://scrimba.com/
    - theturtletalks 7y ago
      I also read that Imba can be used with other frameworks like React and Vue. That’s why Scrimba has courses on those where you can edit code while learning. Imba can also be used to make desktop applications it seems. The team behind it also released GitSpeak, a Github client that works really well.
Layvier 7y ago
How would it scale for a bigger app ? Shipping a library with the app like react creates poor performance for small components for sure, but abstractions must become worth it beyond a certain scale no ? I guess the compiler could also create abstractions when it becomes worth using them ?
- lsalvatore 7y ago
  So how did you construct this claim that React delivers poor performance for small components? Browsing hacker news?
- arve0 7y ago
  Rich Harris addresses scale in the Changelog podcast, and claims it to scale better than regular frameworks. https://changelog.com/news/a-ui-framework-without-the-framework-0PzO https://changelog.com/news/a-ui-framework-without-the-framew...
prashnts 7y ago
It does look great. I’m concerned though, few years ago I used to use rivets [1] for two-way data binding in html. It worked very well. Unfortunately, it’s abandoned. Same fate as coffeescript, backbonejs, etc. Now I primarily use react. Vue looks great, but I don’t want to introduce yet another framework. I could use some insights/view points from hn. I don’t feel using/learning the now-abandoned frameworks is useless though — the things I built are still working. But good luck to anyone who’d want to maintain that codebase (unlikely in my case). [1]: http://rivetsjs.com/ http://rivetsjs.com/
- altmind 7y ago
  Same experience for me - rivets was great, very simple inside and the resulting applications were clean.
- pier25 7y ago
  Someone forked Rivets and made TinyBind which seems to be maintained and has new features such as WC support. https://github.com/blikblum/tinybind https://github.com/blikblum/tinybind I haven't used it though.
- machiaweliczny 7y ago
  Rivets is kinda simiar to Vuejs(although has some pain points). I have code that automatically ports templates to React with jscodeshift. I was able to port "logic" to MobX easily.
hamilton 7y ago
As someone who has built a number of data products w/ React, I decided to give Svelte a try a few months ago. At this point I am using it on some internal projects to great success & ease and probably wouldn't go back to React for newer projects unless there was a compelling reason to (eg collaboration w/ other React devs). As a disclaimer, I admire the React community + devs and think React has made a lot of hard things much, much easier. A few unvarnished takeaways from a data science / viz point of view that I was thinking of writing up, but will use HN as a sketchpad: 1. I don't really miss the React 3rd party ecosystem as much as I thought I would. Since most of what I do is data viz / data presentations, I really just need a few d3 helper functions, and most other things I can build myself w/ svelte's affordances. The biggest downside, however, is that there aren't any good accessible UX component libraries for Svelte, so I have built my own. This all said, I'm productively code-homesteading and I love it. Animating component lifecycles, component style scoping, and state management are 1st-class citizens, so these pieces are pretty high-quality, usable, and thoughtfully built. 2. my "time to first meaningful render" metric was at an all-time low with Svelte. Getting started on a new idea or project is far, far easier than w/ any React project I've ever done. Substantially less boilerplate means I can get much, much more done in the same amount of time. I feel this every time I jump back into the React projects I work on & maintain. 3. as my apps have grown in complexity, I've found that Svelte really holds up beautifully. The style/layout/behavior colocation strategy keeps the cognitive overhead of working on all the parts of multiple components to a minimum. The performance gains of Svelte, even with complex components and interactions, feels magical. Bundle sizes are bizarrely small. 4. as someone who feels CSS will absolutely outlive all of these frameworks, I think the design of Svelte really feels like the best of both worlds. And that's how it should be – css + markup should be first-class citizens. 5. the testing story isn't fully there yet, so I would say to that end, proceed with caution. I typically try to compartmentalize JS logic from presentation as much as possible, but perhaps you don't. 6. the reactivity parts shine everywhere and are fairly easy to reason about in all cases, but they REALLY shine when you're building complex visualizations. 7. this is an important one to me – building something in Svelte really tickles the same part of the pleasure centers of the brain that JQuery did for a previous generation (and d3 did for early data scientists). You just SEE the thing work, effortlessly, at a low cognitive cost, and everything fits together so nicely. I often start svelte-powered experiments and end with a great, reusable component. I think there is a large group of engineers who remember the JQuery days and sat out the React era because it just seemed like way too much to do simple things. I think Svelte is especially for them. In sum, really highly recommended to at least try it. I wanted to find evidence to discount Svelte, but haven't found any at this point, despite my best efforts. There is probably a certain class of dev that should be trying it – one without a ton of organizational constraints, probably. But if you do data science and want to level up your data presentation skills, you should be using Svelte imo.
Exuma 7y ago
I feel like I'm watching Martin Shkreli code an app
langitbiru 7y ago
So I just read about "Choosing Boring Technology" before coming into this thread. I guess React.js is the boring technology (already 5-6 years) one and Svelte is the new and exiting one! :)
- deleted 7y ago
  [deleted]
- bnt 7y ago
  I’ve been holding off from React for a long time, but also after reading the “boring technology”, I came to realize React is in fact - here to stay.
  - ScottFree 7y ago
    It'll be gone in 5 years. It's getting too big and too slow. Also, the react team managed to add hooks and useEffect in a way that makes it very easy to accidentally send your app into an infinite loop and not know why.
    - tomnipotent 7y ago
      > It'll be gone in 5 years. It's getting too big and too slow Funny, that's what everyone said 5 years ago. I'll bet on React to be here for another decade, no problem - there's just way too much momentum. In a way, it's Rails all over again (that's a positive).
      - ScottFree 7y ago
        Rails burned out in under 10 years. The reason I say React will be gone in another 5 years is because it's already been popular for 5 and the muttering has started. Do you remember Adobe Flex? React is following a shockingly similar path and timeline.
        srgpqt 7y ago
        Still writing Rails today, nothing seems to come close, except maybe Phoenix sortof
atrilumen 7y ago
Man, I keep thinking "just keep on chugging with Choo", but I'm really tempted by Svelte. ( https://choo.io https://choo.io )
pkstn 7y ago
Also try RE:DOM, very close to Svelte but RE:DOM does not need a compiler and is faster than Svelte: https://redom.js.org https://redom.js.org https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html https://rawgit.com/krausest/js-framework-benchmark/master/we...
zaiste 7y ago
Svelte is strikingly similar to Marko.js [1] which predates it by few good years I believe. Sadly the latter is still under the radar despite bringing in many interesting innovations to the space: its server-side approach being one of my favorite features. [1]: https://markojs.com/ https://markojs.com/
AliAdams 7y ago
If you are getting a 404 trying to view the main Svelte site (https://svelte.dev/ https://svelte.dev/), there seems to be an intermittent issue with Google Cloud Run. You can view the site directly at the uglier url: https://svelte-website-mrf26sti4q-uc.a.run.app/ https://svelte-website-mrf26sti4q-uc.a.run.app/
mvolkmann 7y ago
If you want to get up to speed on Svelte quickly, read this! https://objectcomputing.com/resources/publications/sett/july-2019-web-dev-simplified-with-svelte https://objectcomputing.com/resources/publications/sett/july...

334 points by bhalp1 7y ago

I like playing with different web frameworks, but the article had a bad hype:information ratio, so I googled the Svelte homepage, which I think is really well presented: https://svelte.dev/ https://svelte.dev/

notus 7y ago
I get a 404
- davideg 7y ago
  Go directly to https://svelte-website-mrf26sti4q-uc.a.run.app/ https://svelte-website-mrf26sti4q-uc.a.run.app/ and it seems to be working fine.
- rich_harris 7y ago
  The site is hosted on Google Cloud Run, which seems to have been having some intermittent problems for the last couple of days. EDIT: some other people have had the same issue and the Cloud Run team are investigating
  - ernsheong 7y ago
    Looks like this issue: https://issuetracker.google.com/issues/136539678 https://issuetracker.google.com/issues/136539678
    - rich_harris 7y ago
      Yep — I added our details to it. I mentioned the problems we were having on Twitter and a Cloud Run PM came to help immediately! So I'm hopeful we'll get a resolution before long. (Aside from this glitch, Cloud Run has been great for us, and we're looking forward to it coming out of beta)
    - tedunangst 7y ago
      Not visible without signing in to google.
  - thefounder 7y ago
    Sounds like a very Google-cloud/appengine issue. Maybe it's time to rewrite a bunch of things(very appengine again)
- eeeeeeeeeeeee 7y ago
  I was getting this intermittently an hour or so ago, too.
dewey 7y ago
> the article had a bad hype:information ratio That'd be 95% of all these dev.to articles
- benatkin 7y ago
  It's also on the author's blog: https://www.thefutureoftheweb.com/blog/svelte-is-the-most-beautiful-framework-ive-ever-seen https://www.thefutureoftheweb.com/blog/svelte-is-the-most-be...
  - dang 7y ago
    Ok, we've changed to that from https://dev.to/jesseskinner/svelte-is-the-most-beautiful-web-framework-i-ve-ever-seen-325f https://dev.to/jesseskinner/svelte-is-the-most-beautiful-web..., since the preference here is for original sources.
deleted 7y ago
[deleted]
jgwil2 7y ago
Code examples on the Svelte website look jacked... all I see is an alert icon + "loading svelte compiler"
- thirdsun 7y ago
  Same here on Firefox 68.0b14.

s_y_n_t_a_x 7y ago

My main gripes are no TypeScript support and going to mustache-like templates after working with JSX/TSX is a step back for me. Also losing React Native, which is non-issue if you're just developing a web app.

yodon 7y ago
Agreed, JSX/TSX feels so incredibly natural it's hard to imagine giving it up, and starting a significant JS project in 2019 or 2020 without using TypeScript would feel professionally negligent to me.
- _0o6v 7y ago
  Using JS ternaries for conditional rendering doesn't feel natural to me at all
  - yodon 7y ago
    Ok, I should probably edit my comment to "JSX/TSX feels so incredibly natural except for needing to use JS ternaries for conditional rendering" because seriously what were they thinking there?
    - steinuil 7y ago
      This is more of an issue with JS than React. ReasonML also has JSX support and since `if` is an expression rather than a statement you can do this: <div> {if (cond) { <Comp1 /> } else { <Comp2 /> }} </div> Or even: <div> {switch (expr) { | A => <CompA /> | B => <CompB /> | _ => <CompC /> }} </div>
    - ducaale 7y ago
      maybe do-expression proposal could help https://github.com/tc39/proposal-do-expressions https://github.com/tc39/proposal-do-expressions
  - manigandham 7y ago

marcus_holmes 7y ago

I get a 500 error on the second page of the "getting started", so... nope, not the most beautiful I've seen.

mfatica 7y ago
if they use cloudflare that's the reason why. all of cloudflare was down today
davideg 7y ago
Go directly to https://svelte-website-mrf26sti4q-uc.a.run.app/ https://svelte-website-mrf26sti4q-uc.a.run.app/ and it works fine. Someone posted a link to the Google Cloud Run issue above[1] that links to the non-vanity URL. [1] https://issuetracker.google.com/issues/136539678 https://issuetracker.google.com/issues/136539678
MattBearman 7y ago
I'm getting the same, which is a shame, as I'm genuinely intrigued by Svelte
rich_harris 7y ago
Yep, having some problems this week with Google Cloud Run (which hosts the site). I guess that's what happens when you use a platform that's still in beta...

bin0 7y ago

Svelte is so great... so were react, angular, ember, meteor, and vue. I'm sorry, but I've got trouble seeing how having one more framework to learn is going to help any thing. There's a webcomic of some sort to which I can't find the link, which talks about this. Some one is sick of the bloat of x framework/tool/whatever, and decides to build it better. He works hard, and finally version 1.0 is released to dramatic music. But there's a problem - it hits the real world and starts running into edge cases, bugs, and other things that can't be predicted in design and testing, necessarily. Features creep, and over time, it becomes just as bad as that which it sought to replace. Then, some bright young soul gets the idea that he can do it better... This is not to discourage innovation. It doesn't appear it's been battle-tested like other frameworks, and I don't see many major operations on the list of users. If it ends up better, great, but I can't say I'm optimistic.

manigandham 7y ago
It's just more options. Svelte is new in that it actually compiles the components and logic into plain low-level JS code instead of having a "runtime". It's something most of these frameworks should have already done by now considering they need build steps but maybe it needed a new project to make it happen. It's a brand new release though so it'll take more time for uptake, and by people who think the opposite of what you typed.
- bin0 7y ago
  You're right that it's more options, but it's also one more box a "competent JS dev" is expected to tick. One of the best and worst things about the JS ecosystem is the plethora of choices available. On compilation, nope. Riot.js did it first, and this is literally the entire premise of typescript (I know typescript is a different language, but I see little difference here as it can mix with JS between writing only some stuff in TS). You're right, they probably should have done it, and I'm excited to see it. But I also don't see why they couldn't have submitted a PR to react/angular/ember/meteor/vue.
  - rich_harris 7y ago

deleted 7y ago

[deleted]

jbverschoor 7y ago

This is not a web-framework. It is an frontend app framework for html/javascript

tantalor 7y ago
Okay I'll bite: what's the difference?
- nhooyr 7y ago
  I think he thinks a Web framework would be the backend or full stack.
http-teapot 7y ago
This is not a car. It is an electricity-powered four-wheel vehicle. So yeah, it's a car. This is not a PC. It is a Mac. So yeah, it's a personal computer. A framework that powers the web, isn't it a web framework? It's just a very broad category that also includes backend framework.
- jbverschoor 7y ago
  Nah, it does not power the web in any way. It is a html/java script application framework. Nginx powers the web. Chrome powers the web. Rails powers the web.

fasterdom 7y ago

I have a table of 100 rows x 10 columns mostly of numbers which change 10 times a second (think trading). The source data sits in an array of objects. On each update, I need to update the table cells with the latest values from the source array. The content of each cell can change, possibly it's css class too (from red it become blue for example). I'm using Vue/Bootstrap-Vue table at the moment, but it's quite slow. Is Svelte suitable for this? Other options to quickly update a <table> from data in an array of objects, one object per row?

armandososa 7y ago
I had a similar issue on an app. I solved it with an event bus.
gaze 7y ago
Seems to me that you'd want to update the part of the table that's viewable.
- twic 7y ago
  For a 100 x 10 table i would think you can get away with updating all of it.
deaddodo 7y ago
No matter which framework you describe, this is an iterative approach and will be inefficient. The optimized (or, at least faster) way to handle this would be to have a unique ID attached to a cell and offer a direct callback to it via the data. E.g. the symbol for "GOOG" stored in a hash table, when GOOG updates; call that hash directly: "symbols[symbol].update(data)" then re-render the cell DOM element.
- nickthemagicman 7y ago
  Studying cracking the code interview at the moment and neat seeing this as is an actual use case for some of the array/hashmap interview questions.
- 7y ago

larvaetron 7y ago

It's kind of funny that the styling example is literally just plain-old CSS and HTML, not sure if that was intentional?

CharlesW 7y ago

I watched Rich Harris's "Rethinking reactivity" presentation (https://www.youtube.com/watch?v=AdNJ3fydeao https://www.youtube.com/watch?v=AdNJ3fydeao) and was incredibly impressed. Has anyone with React/Vue experience used Svelte for a significant project? I'd love to hear about your experience with it.

wirahx 7y ago
Yeah - I wrote https://www.beyonk.com https://www.beyonk.com in Nuxt first, and I've now rewritten it in Svelte (Sapper). There are some things which weren't ready when I started, but I worked around them. The overall experience is that Svelte results in faster pages, less code, more predictability, faster builds... overall, it's a better experience.
- vimota 7y ago
  Other than performance, was the developer experience any different? Just curious!
- exclipy 7y ago
  Nice. I like the SSR and that subsequent page loads are basically just a 5KB fetch of pure content in JSON. But if I go to a content page (eg. https://www.beyonk.com/uk/6Gb_Kj/guided-ascent-of-curved-ridge https://www.beyonk.com/uk/6Gb_Kj/guided-ascent-of-curved-rid...), I see that the response is a 286KB blob, mostly consisting of CSS. If I reload the page, I redownload that 286KB blob. Wouldn't it be better to serve the CSS separately so it can be cached across sessions?

benatkin 7y ago

Interesting that the custom element appears to just take a single JavaScript object as a parameter: <Board {game} /> In JSX this would be either: <Board game={game} /> or: <Board {...{game}} /> This is almost as ergonomic as JSX except for attributes like checked where the value is omitted. It might encourage some refactoring, compared with React, because the thought of putting attributes in a variable and adding them as a spread might occur more often when seeing an object being passed in. At any rate, I recommend looking at the code example linked in the post, or watching the video. Otherwise the post is pretty low in information, as the top comment at the time of writing this suggested. https://github.com/jesseskinner/svelte-tic-tac-toe https://github.com/jesseskinner/svelte-tic-tac-toe

mkishi 7y ago
In Svelte, <Board {game} /> Is just a shorthand for: <Board game={game} /> Spreading also works, although it's not nearly as used: <Board {...{game}} /> Boolean HTML attributes like "checked" can be used with boolean variables as-is: <input type="checkbox" {checked}> <input type="checkbox" checked={someBoolean}> I highly recommend anyone to go through the tutorial (at least once Google Cloud Run issues are solved) to get a feel of how things work together.
- benatkin 7y ago
  Oh, I see. Looking further into the docs, I see that a JavaScript expression can be added inside an attribute string: <a href="page/{p}">page {p}</a> https://svelte.dev/docs#Attributes_and_props https://svelte.dev/docs#Attributes_and_props It seems like a neat design.
ScottFree 7y ago
Am I the only one who would rather write the following instead of JSX? Board.draw(game) or drawBoard(game)
- hombre_fatal 7y ago
  Not sure how that's a preference without any further context about how you plan on writing the rest of the client. For all we know, both of those functions return <Board {game} />.

beardedman 7y ago

Let the "soap box brigade" commence! I got introduced to Rich Harris via a podcast (not personally), but am a big fan of his perspective on JS. I think we can all agree that; if you don't like Svelte, then fine. If you love JSX/TSX - then great! If you're a Vue person, then awesome - its exactly what makes this community great - the diversity & innovation. Not the soap-boxing antics, polarised opinions & vilification of opinions that aren't congruent with your own. As someone much wiser than me once said - "always bet on Javascript".

shados 7y ago
Totally agreed that the diversity of technical innovation is how we got here and its fantastic. Hopefully we keep up with more innovations (such as npm alternatives :cough:). Its easy to see why some folks would get riled up over this crap though. Like, if you don't like React right now, but want to do frontend development professionally, your job prospects get slashed in half or more. Really like Vue? That's awesome! But you might have a small fraction of the options your peers do when interviewing. Like a more exotic solution like Svelte or Elm? Hope you like working remote or are okay with relocating for that, because there's probably not that many places to work at in your area. So people will try really hard to get the community to rally around their favorite choices. And the tools without cheerleader squads often fade away and die. Rock and a hard place.
draw_down 7y ago
At a job I had years back, we built our application with Ractive, it was really nice to use.
- cmpolis 7y ago
  I had a similar experience. I wish Ractive would have gained more traction; it was a good balance of "enough functionality that a web UI requires" and "simple enough to avoid cognitive overload and allowed for quick ramp up".
  - DonnyV 7y ago

tthisk 7y ago

The idea behind svelte is neat, i wonder though what the impact of its approach will be on a developers ability to understand what is happening under the hood. In my experience opaque abstraction layers can really hamper your ability to properly understand what is going on. Traditionally the JS ecosystem has been a frontrunner in this area (e.g. sourcemaps). But I have had terrible experiences in the Java ecosystem, with all its aspect weaving and annotation magic.

mfatica 7y ago
I think svelte compiling to native javascript is lightyears more understandable than whatever the hell react is doing
- thiht 7y ago
  > whatever the hell react is doing Being JavaScript?
  - shados 7y ago
    I'm a huge React fanboy, but if you try and step through the React code with a debugger, we're kind of a far cry from the days of Backbone and even Angular. For the common mortal, it has to be treated as a black box. Fortunately, its fairly stable, so it's rare you have to care, but...
    - acemarke 7y ago
      Yeah, the ability to step into Backbone code and back out of it into my own code was one of the things I liked about Backbone. That said, React's mental model is so powerful that I've almost never needed to actually debug into it to see what's going on. If you've got an issue, tracing the dataflow in your own code is generally sufficient. So, I'm okay treating it as a black box. (Hiya, Shados!)
- s_y_n_t_a_x 7y ago
  I think it's the reverse. If you write pure functional components, React is very understandable. It's easily testable, you know that you'll have the same output if you pass it the same props. Svelte templates just take us back where we've been, with the twist of compiling the templates, which I believe some templating libraries already did.

knubie 7y ago

There was a really interesting discussion recently in r/Clojure about Svelte, and how its ideas relate to and can be translated to Clojurescript. https://www.reddit.com/r/Clojure/comments/bqh0z4/virtual_dom_is_pure_overhead/ https://www.reddit.com/r/Clojure/comments/bqh0z4/virtual_dom...

anderspitman 7y ago

Svelte looks really cool. Has anyone compared it in-depth to imba[0]? [0] http://imba.io/ http://imba.io/

onemoresoop 7y ago
I really like the demo video, you can select the code, scroll up and down, see different files. This is really neat!
- anderspitman 7y ago
  Oh cool I didn't realize it was interactive. I'm pretty sure this is their scrimba platform[0], which is what they built imba for in the first place. [0] https://scrimba.com/ https://scrimba.com/
  - theturtletalks 7y ago
    I also read that Imba can be used with other frameworks like React and Vue. That’s why Scrimba has courses on those where you can edit code while learning. Imba can also be used to make desktop applications it seems. The team behind it also released GitSpeak, a Github client that works really well.

Layvier 7y ago

How would it scale for a bigger app ? Shipping a library with the app like react creates poor performance for small components for sure, but abstractions must become worth it beyond a certain scale no ? I guess the compiler could also create abstractions when it becomes worth using them ?

lsalvatore 7y ago
So how did you construct this claim that React delivers poor performance for small components? Browsing hacker news?
arve0 7y ago
Rich Harris addresses scale in the Changelog podcast, and claims it to scale better than regular frameworks. https://changelog.com/news/a-ui-framework-without-the-framework-0PzO https://changelog.com/news/a-ui-framework-without-the-framew...

prashnts 7y ago

It does look great. I’m concerned though, few years ago I used to use rivets [1] for two-way data binding in html. It worked very well. Unfortunately, it’s abandoned. Same fate as coffeescript, backbonejs, etc. Now I primarily use react. Vue looks great, but I don’t want to introduce yet another framework. I could use some insights/view points from hn. I don’t feel using/learning the now-abandoned frameworks is useless though — the things I built are still working. But good luck to anyone who’d want to maintain that codebase (unlikely in my case). [1]: http://rivetsjs.com/ http://rivetsjs.com/

altmind 7y ago
Same experience for me - rivets was great, very simple inside and the resulting applications were clean.
pier25 7y ago
Someone forked Rivets and made TinyBind which seems to be maintained and has new features such as WC support. https://github.com/blikblum/tinybind https://github.com/blikblum/tinybind I haven't used it though.
machiaweliczny 7y ago
Rivets is kinda simiar to Vuejs(although has some pain points). I have code that automatically ports templates to React with jscodeshift. I was able to port "logic" to MobX easily.

hamilton 7y ago

As someone who has built a number of data products w/ React, I decided to give Svelte a try a few months ago. At this point I am using it on some internal projects to great success & ease and probably wouldn't go back to React for newer projects unless there was a compelling reason to (eg collaboration w/ other React devs). As a disclaimer, I admire the React community + devs and think React has made a lot of hard things much, much easier. A few unvarnished takeaways from a data science / viz point of view that I was thinking of writing up, but will use HN as a sketchpad: 1. I don't really miss the React 3rd party ecosystem as much as I thought I would. Since most of what I do is data viz / data presentations, I really just need a few d3 helper functions, and most other things I can build myself w/ svelte's affordances. The biggest downside, however, is that there aren't any good accessible UX component libraries for Svelte, so I have built my own. This all said, I'm productively code-homesteading and I love it. Animating component lifecycles, component style scoping, and state management are 1st-class citizens, so these pieces are pretty high-quality, usable, and thoughtfully built. 2. my "time to first meaningful render" metric was at an all-time low with Svelte. Getting started on a new idea or project is far, far easier than w/ any React project I've ever done. Substantially less boilerplate means I can get much, much more done in the same amount of time. I feel this every time I jump back into the React projects I work on & maintain. 3. as my apps have grown in complexity, I've found that Svelte really holds up beautifully. The style/layout/behavior colocation strategy keeps the cognitive overhead of working on all the parts of multiple components to a minimum. The performance gains of Svelte, even with complex components and interactions, feels magical. Bundle sizes are bizarrely small. 4. as someone who feels CSS will absolutely outlive all of these frameworks, I think the design of Svelte really feels like the best of both worlds. And that's how it should be – css + markup should be first-class citizens. 5. the testing story isn't fully there yet, so I would say to that end, proceed with caution. I typically try to compartmentalize JS logic from presentation as much as possible, but perhaps you don't. 6. the reactivity parts shine everywhere and are fairly easy to reason about in all cases, but they REALLY shine when you're building complex visualizations. 7. this is an important one to me – building something in Svelte really tickles the same part of the pleasure centers of the brain that JQuery did for a previous generation (and d3 did for early data scientists). You just SEE the thing work, effortlessly, at a low cognitive cost, and everything fits together so nicely. I often start svelte-powered experiments and end with a great, reusable component. I think there is a large group of engineers who remember the JQuery days and sat out the React era because it just seemed like way too much to do simple things. I think Svelte is especially for them. In sum, really highly recommended to at least try it. I wanted to find evidence to discount Svelte, but haven't found any at this point, despite my best efforts. There is probably a certain class of dev that should be trying it – one without a ton of organizational constraints, probably. But if you do data science and want to level up your data presentation skills, you should be using Svelte imo.

Exuma 7y ago

I feel like I'm watching Martin Shkreli code an app

langitbiru 7y ago

So I just read about "Choosing Boring Technology" before coming into this thread. I guess React.js is the boring technology (already 5-6 years) one and Svelte is the new and exiting one! :)

deleted 7y ago
[deleted]
bnt 7y ago
I’ve been holding off from React for a long time, but also after reading the “boring technology”, I came to realize React is in fact - here to stay.
- ScottFree 7y ago
  It'll be gone in 5 years. It's getting too big and too slow. Also, the react team managed to add hooks and useEffect in a way that makes it very easy to accidentally send your app into an infinite loop and not know why.
  - tomnipotent 7y ago
    > It'll be gone in 5 years. It's getting too big and too slow Funny, that's what everyone said 5 years ago. I'll bet on React to be here for another decade, no problem - there's just way too much momentum. In a way, it's Rails all over again (that's a positive).
    - ScottFree 7y ago
      Rails burned out in under 10 years. The reason I say React will be gone in another 5 years is because it's already been popular for 5 and the muttering has started. Do you remember Adobe Flex? React is following a shockingly similar path and timeline.
      - srgpqt 7y ago
        Still writing Rails today, nothing seems to come close, except maybe Phoenix sortof

atrilumen 7y ago

Man, I keep thinking "just keep on chugging with Choo", but I'm really tempted by Svelte. ( https://choo.io https://choo.io )

pkstn 7y ago

Also try RE:DOM, very close to Svelte but RE:DOM does not need a compiler and is faster than Svelte: https://redom.js.org https://redom.js.org https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html https://rawgit.com/krausest/js-framework-benchmark/master/we...

zaiste 7y ago

Svelte is strikingly similar to Marko.js [1] which predates it by few good years I believe. Sadly the latter is still under the radar despite bringing in many interesting innovations to the space: its server-side approach being one of my favorite features. [1]: https://markojs.com/ https://markojs.com/

AliAdams 7y ago

If you are getting a 404 trying to view the main Svelte site (https://svelte.dev/ https://svelte.dev/), there seems to be an intermittent issue with Google Cloud Run. You can view the site directly at the uglier url: https://svelte-website-mrf26sti4q-uc.a.run.app/ https://svelte-website-mrf26sti4q-uc.a.run.app/

mvolkmann 7y ago

If you want to get up to speed on Svelte quickly, read this! https://objectcomputing.com/resources/publications/sett/july-2019-web-dev-simplified-with-svelte https://objectcomputing.com/resources/publications/sett/july...