18 ms·

Web Development Simplified with Svelte

254 points by gavreh 7y ago

urthen 7y ago
I'm a primarily React-based developer, but have taken to using Svelte on side projects. Don't get me wrong, I still like React, but Svelte is phenomenally easy to get started and wrap your head around. I've started suggesting it instead of React to people looking to learn front-end JS.
- skinnymuch 7y ago
  How long did it take to get semi comfy with Svelte (from recent React background)?
  - spoiler 7y ago
    For me, it didn't take long. I was initially confused by some "repurposed" syntax in svelte, and kinda felt negatively about it, but I grew to accept it, and even appreciate it (it's a hack, but on the elegant side). There's quite a bit of "repurposing" going on (probably so svelte can work with existing linters and other tooling), but you get used to it. Svelte has more often "magic" stuff, but the good thing is the magic is simple, and it easy to understand (especially since you can easily look at the compiled output, if you want to double check)
    - cpfohl 7y ago
      I _left_ Svelte because it was headed in a direction I didn't believe in (all the repurposed syntax). But I gave it a try and had to apologize for disappearing. It is extremely well executed. One of the primary directives in Svelte is that it all has to be valid HTML so that the tooling can simply treat Svelte like HTML for syntax highlighting. Some of the repurposing is explicitly because of that directive.
- treggle 7y ago
  How is it different and what’s so good about it?
  - GoToRO 7y ago
    From what I know it's a compiler, so it check all the things at compile time and not waste time at run time.
    - spoiler 7y ago
      That's partially true. The other benefit is that there's no vDOM, the way things change is reactive (kinda like in react), but there's no such thing as a no-op change. if you set something to what it was, it would trigger a partial rerender so you have to check before setting. With react you get those checks for free (provided you comply to certain restrictions).
  - rmilejczz 7y ago
    The main draw is that Svelte apps have no dependencies at runtime, instead it compiles a pure vanilla js bundle that relies on existing web APIs to do updates. This is attractive to a lot of people, me included, but imo Svelte isn’t quite production ready yet (at least for complex apps). It’s great for small projects though and I highly recommend checking it out
- mellosouls 7y ago
  I read the main article which took some time to reach the conclusion a small footprint was the main point. So I googled, found the Svelte homepage, and I'm still none the wiser as to why it might be an easy intro to web development. Honestly, if Svelte is as easy as you suggest to get your head around, somebody needs to work on the presentation of that.
  - treggle 7y ago
    Agreed. Lots of praise, no explanation.
    - nailer 7y ago
      Svelte is: - smaller (it compiles your app, and doesn't include itself in the results) - faster (no virtual DOM, the data to elements are mapped at compile time) - simpler - `age = 30` no boring state management. You're right about the web page - I wanted them to drop 'Cybernetically enhanced web apps' for 'smaller faster simpler' - there was a GitHub issue for it: https://github.com/sveltejs/svelte/issues/3269 https://github.com/sveltejs/svelte/issues/3269
  - spoiler 7y ago
    I feel like like saying svelte is an "easy intro to web development" is misleading. The svelte compiler "abuses" (I don't mean it in a bad way) existing technology so it doesn't have to create special tooling and works with existing tools. I think that's okay _only if_ you're aware of this as a developer. If I was hiring a JS dev, and someone _only_ had svelte on their CV, I'd be a bit reluctant to hire them, only because the svelte compiler hides a lot of JS warts (which I think people should be aware of).
    - cpfohl 7y ago
      Genuine question: where does the svelte complier hide JS warts? I've used Svelte for some production tools and personally in a few projects. My experience thus far is that if you don't have at least a base-level understanding of JS you really can't use Svelte to its fullest. I can back up that intuition by having observed the svelte support channel on discord, where many of the questions really wind up being questions about javascript rather than Svelte.
- _eric 7y ago
  Are you using Svelte for SPAs? If so, what are you using for routing?
  - felideon 7y ago
    I use Svelte with Sapper, which takes care of routing for me. From the FAQ: > Is there a router? > You can use any router lib you want. A lot of people use page.js. There's also navaid, which is very similar. If you prefer a declarative HTML approach, there's svero and svelte-routing. > If you need hash-based routing on the client side, check out svelte-spa-router, or abstract-state-router, a mature router for business software. > For an official solution, there's nothing that's simply a routing library. There is, however, the official Sapper framework, a Next.js-style application framework built on Svelte, which includes its own filesystem-based routing.
  - nailer 7y ago
    I use Svero. Sapper is alpha and still in flux - I'll check out Sapper again once it's stable though.
- vcoelho 7y ago
  I felt the same way when I discovered Vue after a long time using React.
Bantros 7y ago
This is a framework I've been interested in for while. Need to find an excuse to use it
onion2k 7y ago
The fact you can easily make yet another To Do list app isn't very useful. If you can't easily make a very simple app then something is seriously wrong with the framework. A much more useful question is whether or not a framework makes it easier (or faster, or better, or something) to write a complex app. In the case of Svelte, all the hard stuff (eg state management, sync'ing data from APIs, etc) is outside of the scope framework. That make Svelte much smaller and simpler, but it makes writing a complex app harder (because you need to glue some other libraries together yourself; the framework isn't doing it for you).
- rimliu 7y ago
  This is not different from React, which is just a view library.
  - myrryr 7y ago
    Except it isn't, it's a compiler rather than just a view library. The point is it ain't just a view library, and once you have your own compiler you can get more done.
    - rimliu 7y ago
      My point was more about the problem it solves not the nature of the tool, i.e. that it does not concern itself with data store or routing.
- cpfohl 7y ago
  State Management is a first-class part of svelte, check out their `Store` implementation. https://svelte.dev/tutorial/writable-stores https://svelte.dev/tutorial/writable-stores It only took me a few hours to fully appreciate what a tidy solution Svelte's store implementation was. As far as syncing data from APIs: I am pretty sure that it should be out of scope for _any_ view layer. APIs vary widely, and it wouldn't be appropriate for a view tool (Svelte, React, Vue, etc) to have an opinion. It's really up to the developer, and for the most part (and I may have a controversial opinion here?) should be a pretty simple set of wrappers around `fetch`). Where's Vue or React's API consumption tooling?
mrtksn 7y ago
I've been distanced from web development for a year and you now have a cool new framework, ReactJS is surpassed by VueJS and probably some other packaging tools did something interesting and new opinions about how the same old things should be built are on the rise. But I have a serious question: Why the web dev is still a relevant thing? Don't get me wrong, I won't argue that the web is dead and all should move into AI or VR or something but I am under the impression that most of the problems that can be solved through a Web UI are mostly solved. Sure people come up with interesting business ideas all the time but they usually don't require innovative Web UI tech and can be built just fine with 10-year-old frameworks. How is the web world doing? Why would anyone keep creating cool new frameworks?
- treggle 7y ago
  No vuejs did not surpass reactjs. In fact reactjs found an even simpler programming model and is leading with this new approach ... it is called hooks. Vuejs is copying the same concept and in fact wanted to dump it’s old way to fully embrace react hooks style programming but that angered the vuejs community.
  - nailer 7y ago
    I don't think React is really competing with Vue as much anymore. Solving the problems of a virtual DOM in a better way is a minor improvement compared to not having a virtual DOM at all. The older virtual DOM frameworks are competing with Svelte.
  - spoiler 7y ago
    Don't get me wrong, I love hooks because I know how to use them, but there's so many easy pitfalls with them, and I constantly have to pester people about them in code reviews, if so many people in my company (and wider) misuse them by accident, it makes me me doubt how well thought out they are. I know some people have a thing for arcane programming (for a lack of better word), but in my opinion it just makes code harder to write, understand, and even statically analyse. Not to mention, the official lining for hooks leaves a lot to be desired for, especially because some internal React return values are treated magically by the linter (useState, useReducer to name a few) when it comes to hook dependency management.
deleted 7y ago
[deleted]
pzmarzly 7y ago
I'm migrating one of my sites from jQuery (+ server-generated HTML) to Svelte. I like how Svelte+rollup make it easy to replace just a part of a website (take HTML from a file, put it into Foo.svelte, back in the original file insert <script>new App.Foo({target: document.body, props: { /* data */ }})</script> [0]). Instead of generating HTML, server-side scripts now generate JSON, which could be used later to make a proper API. I don't like handling of "undefined" and "null" values in properties[1]. It would also be nice to have optional properties so that warnings wouldn't get emitted to JS console. Also, someone should investigate iOS bugs[2]. It would be bad if someone made complex site in Svelte+Sapper and only later discovered it lags on iOS. Overall performance is okay, but it's visible to a naked eye that Svelte parts render later than the rest of the website. All in all, I would recommend giving Svelte devs few more months before moving to it. But definitely keep an eye on it, it has great ergonomics (maybe except for styling subcomponents, but some say it's a code smell anyway). [0] assuming you set output { format: "iife", name: "App" } in rollup.config.js, imported bundle.js in the original file, and put export { Foo } in main.js [1] https://svelte.dev/repl/f1f2bf4c50cf4a75ba6ea38c3390af5b?version=3.12.1 https://svelte.dev/repl/f1f2bf4c50cf4a75ba6ea38c3390af5b?ver... [2] https://github.com/sveltejs/svelte/issues/3581 https://github.com/sveltejs/svelte/issues/3581
- pzmarzly 7y ago
  Update: I take back my words about optional parameters - I didn't notice docs saying "To squelch this warning, ensure that a default is specified, even if it is undefined"[0] [0] https://svelte.dev/docs#1_export_creates_a_component_prop https://svelte.dev/docs#1_export_creates_a_component_prop
- wirahx 7y ago
  I couldn't actually figure out what you were trying to do here, but there are a few points I do understand, and can answer: 1. If you want to bind a property it needs to be declared. This is the method of least surprise. 2. I've been running three Svelte sites in production for more than a year now, and 80% of our traffic is iOS. The sites work fine, it's the tutorials specifically, probably because of the embedded REPLs which have an iOS issue. 3. You claim that the Svelte code runs later than the server-generated HTML. This makes sense, since the DOM from Svelte components is built using Javascript. If you wanted to generate Svelte code on the server-side so that it renders at the same time, you would use { ssr: true } in your rollup config and generate code for both server and client side. 4. Not sure what the notion of lag is or where it comes from, Svelte outperforms everything else (when I last checked benchmarks), and is likely to, since it has the immediate advantage of not requiring a client-side runtime to download before it starts execution.
deleted 7y ago
[deleted]
chrshawkes 7y ago
I've been writing React professionally for 5 years straight and I'm absolutely sick of it. I haven't spent enough time with Svelte but I'm sick of React and all the noobs who swear by it. I'm sick of it spinning around in circles and nobody getting anywhere. I'm sick of terrible SPA's consisting of a pile of bandaids stacked on top of one another. I'm sick of testing it with tools like Enzyme. If React were so great, I'd expect to see better things coming out of Facebook. They do one thing well, steal and sell users data. Everything else was bought. Honestly, just sick of Facebook. I was more productive writing stateful apps using C# and ASP.NET with jQuery. In fact, 9/10 we don't need stateful UI's nor React. GraphQL sucks too. Good luck setting up caching. For instance, hey we forgot caching is important, now that the architecture doesn't allow for it since it uses a single api endpoint... the talked about solution is to use localStorage or sessionStorage. JS is a huge noobfest and those that think React is the answer to everything, probably haven't been in this game long enough.
- bavell 7y ago
  I too have been using react professionally for the last 5 years and I have the opposite take on it - I still love it as much as when I started using it. I'm a solo dev so I get to control quality end-to-end, perhaps this is where our difference in opinion stems from. I have no doubt there is tons of awful react code out there written by noobs but the same can be said for practically any software engineering endeavor. I'll concede that it takes time + effort to understand how to best use react but it's merely a tool and you need experience and insight to understand how best to use your tools. I try to use as little state as possible and use functional components everywhere I can. Hooks have been a big help. I agree about having reservations with GraphQL, it doesn't seem ready for primetime to me although I'm keeping a close eye on it because I like the underlying concept. JS is a "huge noobfest" imo because webdev is so accessible and prevalent. But today's noobs are tomorrow's professionals ;) Typescript has been a very welcome development to encourage better dev practices.
  - Phillips126 7y ago
    > I too have been using react professionally for the last 5 years and I have the opposite take on it... I'm with you mostly. When I started React close to 5 years ago it was PAINFUL. Coming from mostly jQuery (single library and I'm on my way) to trying to figure out gulp, bower, webpack, babel, etc. The tooling has much improved with the release of `create-react-app`. I can't exactly say the tooling has become better as much as it has been hidden away and the defaults are mostly ideal. Yesterday I had a huge headache trying to figure out why my treeshaking wasn't working (it was bundling 1.5mb of icons into my app). Turns out I was using an old version of `react-scripts` and with it an older webpack which I may have noticed sooner had I hand-built the tooling like the old days of React. It has become impressively complex with all of the moving parts that are required for a React app these days. Webpack alone is not for the faint of heart with all of the configuration and babel-hell that code (and other files) has to flow through. Without `create-react-app`, I would probably have left React long ago, which would be disappointing because I enjoy the syntax, hooks, readability. I've tried Angular and absolutely hated it, perhaps Svelte would be interesting to me.
sadlion 7y ago
Looks interesting. Is there a list of libraries that are productions ready that can be used with it? I'm looking for Formik and ReactRouter equivalents at least.
chiefalchemist 7y ago
Whoa. Sounds interesting and promising. If anyone from Svelte is here listening I'd like to point out that this isn't quite correct. WCAG actually specifies that __decorative__ images have no alt= or use alt=''. But yeah, a warning can't hurt. Kudos! Svelte provides runtime warnings for accessibility issues. For example, <img> elements that have no alt attribute are flagged.
- fredleblanc 7y ago
  Having no alt and having alt="" do not produce the same results to the audiences relying on those attributes to perceive images. The W3C's tutorial on decorative images (found at https://www.w3.org/WAI/tutorials/images/decorative/ https://www.w3.org/WAI/tutorials/images/decorative/) says to use alt="" to mark an image decorative, as some (prominent) screen readers will read the image's file name when no alt attribute is set. But hey, that Svelte is providing these warning is great for accessibility!
  - chiefalchemist 7y ago
    Yeah. Thanks. Maybe you'll know this? Is it kosher to user aria-hidden=true for decorative images? I'm asking because it's not easy convincing a client that alt="" is ok. They've read so many times "also have a value for alt-=. This is especially true of clients who are SEO-centric. It seems to me there should be an easy and obvious way have a decorative image with a non-blank alt=.
    - fredleblanc 7y ago
      In my experience, aria-hidden will effectively accomplish the same ends for accessibility purposes. That article mentions using role="presentation" but with the caveat that not all screen readers and such understand that well enough to then not try to start reading the filename. I guess the question is if SEO crawlers still read alt text for images marked as aria-hidden="true" or not. I have no idea on this one, but I'm very curious about it. I've been pushing the folks I work with to consider SEO as a second-class citizen within alt text. If you can reasonably use a keyword in a natural, useful way, definitely use it. Otherwise, from what I can tell, an image's alt text doesn't seem to have any greater SEO value than the rest of the content on the page. Write better on-page content with better keyword use, with alt text being informative extra content. And clarification on when alt text is needed: 1) if the image contains informative content that adds to the surrounding content, but also 2) a linked image where the image is the ONLY thing within the link, in which case the alt text should describe the destination of the link, not the contents of the image. I just recently learned this, but it makes sense when you think about it.
JTenerife 7y ago
Does anyone know what's the status of Typescript support in Svelte is? This thread is understandably locked: https://github.com/sveltejs/svelte/issues/1639 https://github.com/sveltejs/svelte/issues/1639 Still I'm curious. Typescript and RxJS (or MobX) with Svelte as the afterthought (https://michel.codes/blogs/ui-as-an-afterthought https://michel.codes/blogs/ui-as-an-afterthought) would be a nice combo.
- nailer 7y ago
  Pretty much as you can see. A lot of people want it. It's not done yet. Obviously Svelte is a JS to JS transformative compiler - you need to make a TS to JS transformative compiler. I'm hacking on my next app using TypeScript on the backend (particularly around the data layer) and JS/Svelte on the frontend. I would like TS on Svelte, but the rest of Svelte is compelling enough I'd still use it over older tech like React.
- moogly 7y ago
  Yeah, I love the concepts, philosophy and the simplicity of Svelte, but sadly I can't consider using it until it has proper TS support.
- cies 7y ago
  I'm afraid Svelte with typescript will loose some of its charm. Typescript is a little more verbose and explicit, also it cannot be directly executed by the browser (so you need to compile it, yet it is intermingled with HTML at times — there's JSX for that but Svelte kinda wants to NOT go the JSX/ShadowDOM route) Internally Svelte uses TS though, the author claims to love TS also! It just does not mix very well with Svelte. Stencil.js and lit-element are better picks in this regard IIRC.
maitredusoi 7y ago
Svelte is a real good shot vs the angularjs (v1) I used in 2015, but still, I will stick to imba ;)
choward 7y ago
> Svelte has not yet received the attention it deserves. When it is mentioned, the focus is typically on its ability to produce bundled code that is significantly smaller than the alternatives. However, Svelte makes many tasks easier, including defining components, managing component state, managing application state, and adding animation. Under the "Why Consider Svelte?" it only mentions bundle size and performance.
- mister_hn 7y ago
  Which is perfectly fine
  - rat9988 7y ago
    It is not, I can already do that directly with the DOM. It's a huge asset, but not enough. Ease of use, development velocity or something along these lines should be mentioned.
  - felideon 7y ago
    For me, that's icing on the cake. Why I truly like and recommend Svelte is its ergonomics. Paired with Sapper, building a fast website is a breeze and feels like you're just writing plain HTML and (supercharged) JS.
    - choward 7y ago
      Cool, but how does it help me reason about my code and maintain large projects? It doesn't even support typescript. Sure, the components look okay in isolation, but what about the big picture?
      - s_y_n_t_a_x 7y ago
        It doesn't and it won't. Advocates for Svelte seem to prefer it over the complicated (I do not agree) React patterns. Those patterns are there for a reason and help the code stay maintainable and predictable. Not supporting TypeScript is also a big blow. Small projects / websites = use the DOM SPAs = use React Why would you use Svelte for small websites when it requires JS? All of my "websites" are made w/ pure HTML/CSS/JS and the JS is optional. All of my "apps" are made w/ React (Web, Electron) & React Native (Windows, iOS, Android) I'm working on a stack that sets all this up for you so you can get started on deploying for every platform. I already use it in production. Don't cheat yourself, use React and take advantage of the progress and ecosystem. If you don't need that, then use vanilla.
ConcernedCoder 7y ago
You want simple? Try HTML, CSS, and JavaScript.
- felideon 7y ago
  Ergonomically, that is exactly what Svelte feels like.
- NotATroll 7y ago
  You, I like you.
- mvolkmann 7y ago
  HTML/CSS/JavaScript has no builtin state management and no two-way binding between state and form controls. Svelte makes those things very easy.
Kye 7y ago
One of the more popular Mastodon frontends uses Svelte. https://pinafore.social/ https://pinafore.social/
sharmi 7y ago
Does Svelte have a prebuilt set of components like ant.design?
turtlebits 7y ago
Svelte really resonates with me - as a previous AngularJS dev, tried to get into React and VueJS several times, but I did not want to learn a build system (grunt, gulp, webpack) and always have to stay up the date with the "best" ways to build. And I don't have the time to invest in learning another tool. The nice thing about Svelte isn't necessarily the syntax. It's the fact that out of the box it builds without me having to learn how to build it. That and the small bundle sizes and single file components sealed the deal for me.
jcmontx 7y ago
Looks like early Vue to me
ifthenelseend 7y ago
Svelte is great, but I will probably use the new Blazor framework from Microsoft that compiles to WebAssembly. The benefit is that I can use C# instead of JavaScript.
- cjblomqvist 7y ago
  Unfortunately with the downside that your bundle will be quite large. Hopefully that'll get better, but most likely, due to fundamental reasons (you need to pass along a C# runtime), I doubt it'll be even remotely close to something like Svelte.
_benj 7y ago
I recently started a project using svelte and the difference from React and Vue is so drastic for me that it isn't even funny! Now, I know how opinionated we all are and how the best thing is what we already know, but after working with Vue and React extensively (the company I currently work for uses Vue/TS for a huge app, think over 1000+ .vue files) the particularity about svelte is that you hardly notice that you are using it! Vue has the Vue way and React has prophet Abramov to light the way, but svelte is completely out of your way. You wanna follow MVC? go ahead, DDD? why not? I have learned more HTML5 and CSS3 using svelte than any of the other frameworks because it encourages you to use it, because the wheel has been invented already. Again, everybody has their opinion but for me svelte is the framework that has the least magic of all, the you can set it up without a incredibly complicated webpack config or obscure 'create-react-app' that makes it very easy to start a project but you don't really know what's happening underneath. And it just HTML and probably 5 or 6 extra JS things like $: and a different use for export in a component. If you are already religious about your framework, good for you, but if you are open to ideas, take a look a svelte!
- JMTQp8lwXL 7y ago
  If you really want something that will get of your way, use Web Components. They're a web standard, after all.
  - _benj 7y ago
    I read an article about them recently. I love the idea of an standard but it feels so "committee design" with a lot of good ideas but completely throwing out the window simplicity. The older I get as a developer the more I realize that simple is not easy to accomplish. That's probably why I like svelte :)
  - csande17 7y ago
    Svelte has an option to output Web Components, so it might be a good option if you want to use them while still writing your code in a React-y "declarative UI" style.
    - 7y ago
vfc1 7y ago
I just prefer batteries-included and fewer decisions. Angular already compiles components at build-time using the Angular CLI, and the new upcoming (November) Ivy engine is going to produce bundles that will rival in size with any framework. The webpack build that the Angular CLI uses internally is completely transparent, you don't have to know Webpack at all. Just do ng build --prod and you have your optimized bundles will all the bell and whistles. Webpack is even going to be replaced by Bazel but we won't even notice it, all we have to do is ng update and live goes on the next day after the release. The Angular ecosystem with the Angular CLI is just so stable and complete, with hardly any API changes in years, it's just a joy to work with. The CLI even integrates with Sass and other CSS processors. You can really focus on the application, and forget tooling. I think the take of Angular on batteries-included tooling & their take on incremental upgrades are such a huge advantage over other ecosystems, AFIK nothing else comes even close.
- izelnakri 7y ago
  There is something close, even better, when overall API design/architecture is considered, that is ember.js. Check ember-cli/embroider which angular-cli initially forked from. I give it 1.5 years for ember to pretty much dominate SPA development, In the last two years some people were laughing at me, now Im laughing at them.
  - davidpolberger 7y ago
    That appears unlikely: https://trends.google.com/trends/explore?date=today%205-y&q=ember%20javascript,react%20javascript,angular%20javascript,vue%20javascript https://trends.google.com/trends/explore?date=today%205-y&q=...
    - izelnakri 7y ago
      I dont care about fashion too much, I care about code, maintenance and community quality more. It is in my opinion the only way to build good and sustainable development teams in the current environment. Contrarian opinion I know..
brainzap 7y ago
The template syntax is a bit weird. Not sure what would have been better but thats just a gut feeling.
matmo 7y ago
So for small apps, the final bundle size is significantly smaller since there's no framework "runtime" code included. What about large apps though?
sunseb 7y ago
Svelte is great. It's a shame we need a framework to do that and that the standard HTML/CSS/JS platform can't do that natively.
wintorez 7y ago
I've never been so excited about a library since the React itself.

254 points by gavreh 7y ago

I'm a primarily React-based developer, but have taken to using Svelte on side projects. Don't get me wrong, I still like React, but Svelte is phenomenally easy to get started and wrap your head around. I've started suggesting it instead of React to people looking to learn front-end JS.

skinnymuch 7y ago
How long did it take to get semi comfy with Svelte (from recent React background)?
- spoiler 7y ago
  For me, it didn't take long. I was initially confused by some "repurposed" syntax in svelte, and kinda felt negatively about it, but I grew to accept it, and even appreciate it (it's a hack, but on the elegant side). There's quite a bit of "repurposing" going on (probably so svelte can work with existing linters and other tooling), but you get used to it. Svelte has more often "magic" stuff, but the good thing is the magic is simple, and it easy to understand (especially since you can easily look at the compiled output, if you want to double check)
  - cpfohl 7y ago
    I _left_ Svelte because it was headed in a direction I didn't believe in (all the repurposed syntax). But I gave it a try and had to apologize for disappearing. It is extremely well executed. One of the primary directives in Svelte is that it all has to be valid HTML so that the tooling can simply treat Svelte like HTML for syntax highlighting. Some of the repurposing is explicitly because of that directive.
treggle 7y ago
How is it different and what’s so good about it?
- GoToRO 7y ago
  From what I know it's a compiler, so it check all the things at compile time and not waste time at run time.
  - spoiler 7y ago
    That's partially true. The other benefit is that there's no vDOM, the way things change is reactive (kinda like in react), but there's no such thing as a no-op change. if you set something to what it was, it would trigger a partial rerender so you have to check before setting. With react you get those checks for free (provided you comply to certain restrictions).
- rmilejczz 7y ago
  The main draw is that Svelte apps have no dependencies at runtime, instead it compiles a pure vanilla js bundle that relies on existing web APIs to do updates. This is attractive to a lot of people, me included, but imo Svelte isn’t quite production ready yet (at least for complex apps). It’s great for small projects though and I highly recommend checking it out
mellosouls 7y ago
I read the main article which took some time to reach the conclusion a small footprint was the main point. So I googled, found the Svelte homepage, and I'm still none the wiser as to why it might be an easy intro to web development. Honestly, if Svelte is as easy as you suggest to get your head around, somebody needs to work on the presentation of that.
- treggle 7y ago
  Agreed. Lots of praise, no explanation.
  - nailer 7y ago
    Svelte is: - smaller (it compiles your app, and doesn't include itself in the results) - faster (no virtual DOM, the data to elements are mapped at compile time) - simpler - `age = 30` no boring state management. You're right about the web page - I wanted them to drop 'Cybernetically enhanced web apps' for 'smaller faster simpler' - there was a GitHub issue for it: https://github.com/sveltejs/svelte/issues/3269 https://github.com/sveltejs/svelte/issues/3269
- spoiler 7y ago
  I feel like like saying svelte is an "easy intro to web development" is misleading. The svelte compiler "abuses" (I don't mean it in a bad way) existing technology so it doesn't have to create special tooling and works with existing tools. I think that's okay _only if_ you're aware of this as a developer. If I was hiring a JS dev, and someone _only_ had svelte on their CV, I'd be a bit reluctant to hire them, only because the svelte compiler hides a lot of JS warts (which I think people should be aware of).
  - cpfohl 7y ago
    Genuine question: where does the svelte complier hide JS warts? I've used Svelte for some production tools and personally in a few projects. My experience thus far is that if you don't have at least a base-level understanding of JS you really can't use Svelte to its fullest. I can back up that intuition by having observed the svelte support channel on discord, where many of the questions really wind up being questions about javascript rather than Svelte.
_eric 7y ago
Are you using Svelte for SPAs? If so, what are you using for routing?
- felideon 7y ago
  I use Svelte with Sapper, which takes care of routing for me. From the FAQ: > Is there a router? > You can use any router lib you want. A lot of people use page.js. There's also navaid, which is very similar. If you prefer a declarative HTML approach, there's svero and svelte-routing. > If you need hash-based routing on the client side, check out svelte-spa-router, or abstract-state-router, a mature router for business software. > For an official solution, there's nothing that's simply a routing library. There is, however, the official Sapper framework, a Next.js-style application framework built on Svelte, which includes its own filesystem-based routing.
- nailer 7y ago
  I use Svero. Sapper is alpha and still in flux - I'll check out Sapper again once it's stable though.
vcoelho 7y ago
I felt the same way when I discovered Vue after a long time using React.

Bantros 7y ago

This is a framework I've been interested in for while. Need to find an excuse to use it

onion2k 7y ago

The fact you can easily make yet another To Do list app isn't very useful. If you can't easily make a very simple app then something is seriously wrong with the framework. A much more useful question is whether or not a framework makes it easier (or faster, or better, or something) to write a complex app. In the case of Svelte, all the hard stuff (eg state management, sync'ing data from APIs, etc) is outside of the scope framework. That make Svelte much smaller and simpler, but it makes writing a complex app harder (because you need to glue some other libraries together yourself; the framework isn't doing it for you).

rimliu 7y ago
This is not different from React, which is just a view library.
- myrryr 7y ago
  Except it isn't, it's a compiler rather than just a view library. The point is it ain't just a view library, and once you have your own compiler you can get more done.
  - rimliu 7y ago
    My point was more about the problem it solves not the nature of the tool, i.e. that it does not concern itself with data store or routing.
cpfohl 7y ago
State Management is a first-class part of svelte, check out their `Store` implementation. https://svelte.dev/tutorial/writable-stores https://svelte.dev/tutorial/writable-stores It only took me a few hours to fully appreciate what a tidy solution Svelte's store implementation was. As far as syncing data from APIs: I am pretty sure that it should be out of scope for _any_ view layer. APIs vary widely, and it wouldn't be appropriate for a view tool (Svelte, React, Vue, etc) to have an opinion. It's really up to the developer, and for the most part (and I may have a controversial opinion here?) should be a pretty simple set of wrappers around `fetch`). Where's Vue or React's API consumption tooling?

mrtksn 7y ago

I've been distanced from web development for a year and you now have a cool new framework, ReactJS is surpassed by VueJS and probably some other packaging tools did something interesting and new opinions about how the same old things should be built are on the rise. But I have a serious question: Why the web dev is still a relevant thing? Don't get me wrong, I won't argue that the web is dead and all should move into AI or VR or something but I am under the impression that most of the problems that can be solved through a Web UI are mostly solved. Sure people come up with interesting business ideas all the time but they usually don't require innovative Web UI tech and can be built just fine with 10-year-old frameworks. How is the web world doing? Why would anyone keep creating cool new frameworks?

treggle 7y ago
No vuejs did not surpass reactjs. In fact reactjs found an even simpler programming model and is leading with this new approach ... it is called hooks. Vuejs is copying the same concept and in fact wanted to dump it’s old way to fully embrace react hooks style programming but that angered the vuejs community.
- nailer 7y ago
  I don't think React is really competing with Vue as much anymore. Solving the problems of a virtual DOM in a better way is a minor improvement compared to not having a virtual DOM at all. The older virtual DOM frameworks are competing with Svelte.
- spoiler 7y ago
  Don't get me wrong, I love hooks because I know how to use them, but there's so many easy pitfalls with them, and I constantly have to pester people about them in code reviews, if so many people in my company (and wider) misuse them by accident, it makes me me doubt how well thought out they are. I know some people have a thing for arcane programming (for a lack of better word), but in my opinion it just makes code harder to write, understand, and even statically analyse. Not to mention, the official lining for hooks leaves a lot to be desired for, especially because some internal React return values are treated magically by the linter (useState, useReducer to name a few) when it comes to hook dependency management.

deleted 7y ago

[deleted]

pzmarzly 7y ago

I'm migrating one of my sites from jQuery (+ server-generated HTML) to Svelte. I like how Svelte+rollup make it easy to replace just a part of a website (take HTML from a file, put it into Foo.svelte, back in the original file insert <script>new App.Foo({target: document.body, props: { /* data */ }})</script> [0]). Instead of generating HTML, server-side scripts now generate JSON, which could be used later to make a proper API. I don't like handling of "undefined" and "null" values in properties[1]. It would also be nice to have optional properties so that warnings wouldn't get emitted to JS console. Also, someone should investigate iOS bugs[2]. It would be bad if someone made complex site in Svelte+Sapper and only later discovered it lags on iOS. Overall performance is okay, but it's visible to a naked eye that Svelte parts render later than the rest of the website. All in all, I would recommend giving Svelte devs few more months before moving to it. But definitely keep an eye on it, it has great ergonomics (maybe except for styling subcomponents, but some say it's a code smell anyway). [0] assuming you set output { format: "iife", name: "App" } in rollup.config.js, imported bundle.js in the original file, and put export { Foo } in main.js [1] https://svelte.dev/repl/f1f2bf4c50cf4a75ba6ea38c3390af5b?version=3.12.1 https://svelte.dev/repl/f1f2bf4c50cf4a75ba6ea38c3390af5b?ver... [2] https://github.com/sveltejs/svelte/issues/3581 https://github.com/sveltejs/svelte/issues/3581

pzmarzly 7y ago
Update: I take back my words about optional parameters - I didn't notice docs saying "To squelch this warning, ensure that a default is specified, even if it is undefined"[0] [0] https://svelte.dev/docs#1_export_creates_a_component_prop https://svelte.dev/docs#1_export_creates_a_component_prop
wirahx 7y ago
I couldn't actually figure out what you were trying to do here, but there are a few points I do understand, and can answer: 1. If you want to bind a property it needs to be declared. This is the method of least surprise. 2. I've been running three Svelte sites in production for more than a year now, and 80% of our traffic is iOS. The sites work fine, it's the tutorials specifically, probably because of the embedded REPLs which have an iOS issue. 3. You claim that the Svelte code runs later than the server-generated HTML. This makes sense, since the DOM from Svelte components is built using Javascript. If you wanted to generate Svelte code on the server-side so that it renders at the same time, you would use { ssr: true } in your rollup config and generate code for both server and client side. 4. Not sure what the notion of lag is or where it comes from, Svelte outperforms everything else (when I last checked benchmarks), and is likely to, since it has the immediate advantage of not requiring a client-side runtime to download before it starts execution.

deleted 7y ago

[deleted]

chrshawkes 7y ago

I've been writing React professionally for 5 years straight and I'm absolutely sick of it. I haven't spent enough time with Svelte but I'm sick of React and all the noobs who swear by it. I'm sick of it spinning around in circles and nobody getting anywhere. I'm sick of terrible SPA's consisting of a pile of bandaids stacked on top of one another. I'm sick of testing it with tools like Enzyme. If React were so great, I'd expect to see better things coming out of Facebook. They do one thing well, steal and sell users data. Everything else was bought. Honestly, just sick of Facebook. I was more productive writing stateful apps using C# and ASP.NET with jQuery. In fact, 9/10 we don't need stateful UI's nor React. GraphQL sucks too. Good luck setting up caching. For instance, hey we forgot caching is important, now that the architecture doesn't allow for it since it uses a single api endpoint... the talked about solution is to use localStorage or sessionStorage. JS is a huge noobfest and those that think React is the answer to everything, probably haven't been in this game long enough.

bavell 7y ago
I too have been using react professionally for the last 5 years and I have the opposite take on it - I still love it as much as when I started using it. I'm a solo dev so I get to control quality end-to-end, perhaps this is where our difference in opinion stems from. I have no doubt there is tons of awful react code out there written by noobs but the same can be said for practically any software engineering endeavor. I'll concede that it takes time + effort to understand how to best use react but it's merely a tool and you need experience and insight to understand how best to use your tools. I try to use as little state as possible and use functional components everywhere I can. Hooks have been a big help. I agree about having reservations with GraphQL, it doesn't seem ready for primetime to me although I'm keeping a close eye on it because I like the underlying concept. JS is a "huge noobfest" imo because webdev is so accessible and prevalent. But today's noobs are tomorrow's professionals ;) Typescript has been a very welcome development to encourage better dev practices.
- Phillips126 7y ago
  > I too have been using react professionally for the last 5 years and I have the opposite take on it... I'm with you mostly. When I started React close to 5 years ago it was PAINFUL. Coming from mostly jQuery (single library and I'm on my way) to trying to figure out gulp, bower, webpack, babel, etc. The tooling has much improved with the release of `create-react-app`. I can't exactly say the tooling has become better as much as it has been hidden away and the defaults are mostly ideal. Yesterday I had a huge headache trying to figure out why my treeshaking wasn't working (it was bundling 1.5mb of icons into my app). Turns out I was using an old version of `react-scripts` and with it an older webpack which I may have noticed sooner had I hand-built the tooling like the old days of React. It has become impressively complex with all of the moving parts that are required for a React app these days. Webpack alone is not for the faint of heart with all of the configuration and babel-hell that code (and other files) has to flow through. Without `create-react-app`, I would probably have left React long ago, which would be disappointing because I enjoy the syntax, hooks, readability. I've tried Angular and absolutely hated it, perhaps Svelte would be interesting to me.

sadlion 7y ago

Looks interesting. Is there a list of libraries that are productions ready that can be used with it? I'm looking for Formik and ReactRouter equivalents at least.

chiefalchemist 7y ago

Whoa. Sounds interesting and promising. If anyone from Svelte is here listening I'd like to point out that this isn't quite correct. WCAG actually specifies that __decorative__ images have no alt= or use alt=''. But yeah, a warning can't hurt. Kudos! Svelte provides runtime warnings for accessibility issues. For example, <img> elements that have no alt attribute are flagged.

fredleblanc 7y ago
Having no alt and having alt="" do not produce the same results to the audiences relying on those attributes to perceive images. The W3C's tutorial on decorative images (found at https://www.w3.org/WAI/tutorials/images/decorative/ https://www.w3.org/WAI/tutorials/images/decorative/) says to use alt="" to mark an image decorative, as some (prominent) screen readers will read the image's file name when no alt attribute is set. But hey, that Svelte is providing these warning is great for accessibility!
- chiefalchemist 7y ago
  Yeah. Thanks. Maybe you'll know this? Is it kosher to user aria-hidden=true for decorative images? I'm asking because it's not easy convincing a client that alt="" is ok. They've read so many times "also have a value for alt-=. This is especially true of clients who are SEO-centric. It seems to me there should be an easy and obvious way have a decorative image with a non-blank alt=.
  - fredleblanc 7y ago
    In my experience, aria-hidden will effectively accomplish the same ends for accessibility purposes. That article mentions using role="presentation" but with the caveat that not all screen readers and such understand that well enough to then not try to start reading the filename. I guess the question is if SEO crawlers still read alt text for images marked as aria-hidden="true" or not. I have no idea on this one, but I'm very curious about it. I've been pushing the folks I work with to consider SEO as a second-class citizen within alt text. If you can reasonably use a keyword in a natural, useful way, definitely use it. Otherwise, from what I can tell, an image's alt text doesn't seem to have any greater SEO value than the rest of the content on the page. Write better on-page content with better keyword use, with alt text being informative extra content. And clarification on when alt text is needed: 1) if the image contains informative content that adds to the surrounding content, but also 2) a linked image where the image is the ONLY thing within the link, in which case the alt text should describe the destination of the link, not the contents of the image. I just recently learned this, but it makes sense when you think about it.

JTenerife 7y ago

Does anyone know what's the status of Typescript support in Svelte is? This thread is understandably locked: https://github.com/sveltejs/svelte/issues/1639 https://github.com/sveltejs/svelte/issues/1639 Still I'm curious. Typescript and RxJS (or MobX) with Svelte as the afterthought (https://michel.codes/blogs/ui-as-an-afterthought https://michel.codes/blogs/ui-as-an-afterthought) would be a nice combo.

nailer 7y ago
Pretty much as you can see. A lot of people want it. It's not done yet. Obviously Svelte is a JS to JS transformative compiler - you need to make a TS to JS transformative compiler. I'm hacking on my next app using TypeScript on the backend (particularly around the data layer) and JS/Svelte on the frontend. I would like TS on Svelte, but the rest of Svelte is compelling enough I'd still use it over older tech like React.
moogly 7y ago
Yeah, I love the concepts, philosophy and the simplicity of Svelte, but sadly I can't consider using it until it has proper TS support.
cies 7y ago
I'm afraid Svelte with typescript will loose some of its charm. Typescript is a little more verbose and explicit, also it cannot be directly executed by the browser (so you need to compile it, yet it is intermingled with HTML at times — there's JSX for that but Svelte kinda wants to NOT go the JSX/ShadowDOM route) Internally Svelte uses TS though, the author claims to love TS also! It just does not mix very well with Svelte. Stencil.js and lit-element are better picks in this regard IIRC.

maitredusoi 7y ago

Svelte is a real good shot vs the angularjs (v1) I used in 2015, but still, I will stick to imba ;)

choward 7y ago

> Svelte has not yet received the attention it deserves. When it is mentioned, the focus is typically on its ability to produce bundled code that is significantly smaller than the alternatives. However, Svelte makes many tasks easier, including defining components, managing component state, managing application state, and adding animation. Under the "Why Consider Svelte?" it only mentions bundle size and performance.

mister_hn 7y ago
Which is perfectly fine
- rat9988 7y ago
  It is not, I can already do that directly with the DOM. It's a huge asset, but not enough. Ease of use, development velocity or something along these lines should be mentioned.
- felideon 7y ago
  For me, that's icing on the cake. Why I truly like and recommend Svelte is its ergonomics. Paired with Sapper, building a fast website is a breeze and feels like you're just writing plain HTML and (supercharged) JS.
  - choward 7y ago
    Cool, but how does it help me reason about my code and maintain large projects? It doesn't even support typescript. Sure, the components look okay in isolation, but what about the big picture?
    - s_y_n_t_a_x 7y ago
      It doesn't and it won't. Advocates for Svelte seem to prefer it over the complicated (I do not agree) React patterns. Those patterns are there for a reason and help the code stay maintainable and predictable. Not supporting TypeScript is also a big blow. Small projects / websites = use the DOM SPAs = use React Why would you use Svelte for small websites when it requires JS? All of my "websites" are made w/ pure HTML/CSS/JS and the JS is optional. All of my "apps" are made w/ React (Web, Electron) & React Native (Windows, iOS, Android) I'm working on a stack that sets all this up for you so you can get started on deploying for every platform. I already use it in production. Don't cheat yourself, use React and take advantage of the progress and ecosystem. If you don't need that, then use vanilla.

ConcernedCoder 7y ago

You want simple? Try HTML, CSS, and JavaScript.

felideon 7y ago
Ergonomically, that is exactly what Svelte feels like.
NotATroll 7y ago
You, I like you.
mvolkmann 7y ago
HTML/CSS/JavaScript has no builtin state management and no two-way binding between state and form controls. Svelte makes those things very easy.

Kye 7y ago

One of the more popular Mastodon frontends uses Svelte. https://pinafore.social/ https://pinafore.social/

sharmi 7y ago

Does Svelte have a prebuilt set of components like ant.design?

turtlebits 7y ago

Svelte really resonates with me - as a previous AngularJS dev, tried to get into React and VueJS several times, but I did not want to learn a build system (grunt, gulp, webpack) and always have to stay up the date with the "best" ways to build. And I don't have the time to invest in learning another tool. The nice thing about Svelte isn't necessarily the syntax. It's the fact that out of the box it builds without me having to learn how to build it. That and the small bundle sizes and single file components sealed the deal for me.

jcmontx 7y ago

Looks like early Vue to me

ifthenelseend 7y ago

Svelte is great, but I will probably use the new Blazor framework from Microsoft that compiles to WebAssembly. The benefit is that I can use C# instead of JavaScript.

cjblomqvist 7y ago
Unfortunately with the downside that your bundle will be quite large. Hopefully that'll get better, but most likely, due to fundamental reasons (you need to pass along a C# runtime), I doubt it'll be even remotely close to something like Svelte.

_benj 7y ago

I recently started a project using svelte and the difference from React and Vue is so drastic for me that it isn't even funny! Now, I know how opinionated we all are and how the best thing is what we already know, but after working with Vue and React extensively (the company I currently work for uses Vue/TS for a huge app, think over 1000+ .vue files) the particularity about svelte is that you hardly notice that you are using it! Vue has the Vue way and React has prophet Abramov to light the way, but svelte is completely out of your way. You wanna follow MVC? go ahead, DDD? why not? I have learned more HTML5 and CSS3 using svelte than any of the other frameworks because it encourages you to use it, because the wheel has been invented already. Again, everybody has their opinion but for me svelte is the framework that has the least magic of all, the you can set it up without a incredibly complicated webpack config or obscure 'create-react-app' that makes it very easy to start a project but you don't really know what's happening underneath. And it just HTML and probably 5 or 6 extra JS things like $: and a different use for export in a component. If you are already religious about your framework, good for you, but if you are open to ideas, take a look a svelte!

JMTQp8lwXL 7y ago
If you really want something that will get of your way, use Web Components. They're a web standard, after all.
- _benj 7y ago
  I read an article about them recently. I love the idea of an standard but it feels so "committee design" with a lot of good ideas but completely throwing out the window simplicity. The older I get as a developer the more I realize that simple is not easy to accomplish. That's probably why I like svelte :)
- csande17 7y ago
  Svelte has an option to output Web Components, so it might be a good option if you want to use them while still writing your code in a React-y "declarative UI" style.
  - 7y ago

vfc1 7y ago

I just prefer batteries-included and fewer decisions. Angular already compiles components at build-time using the Angular CLI, and the new upcoming (November) Ivy engine is going to produce bundles that will rival in size with any framework. The webpack build that the Angular CLI uses internally is completely transparent, you don't have to know Webpack at all. Just do ng build --prod and you have your optimized bundles will all the bell and whistles. Webpack is even going to be replaced by Bazel but we won't even notice it, all we have to do is ng update and live goes on the next day after the release. The Angular ecosystem with the Angular CLI is just so stable and complete, with hardly any API changes in years, it's just a joy to work with. The CLI even integrates with Sass and other CSS processors. You can really focus on the application, and forget tooling. I think the take of Angular on batteries-included tooling & their take on incremental upgrades are such a huge advantage over other ecosystems, AFIK nothing else comes even close.

izelnakri 7y ago
There is something close, even better, when overall API design/architecture is considered, that is ember.js. Check ember-cli/embroider which angular-cli initially forked from. I give it 1.5 years for ember to pretty much dominate SPA development, In the last two years some people were laughing at me, now Im laughing at them.
- davidpolberger 7y ago
  That appears unlikely: https://trends.google.com/trends/explore?date=today%205-y&q=ember%20javascript,react%20javascript,angular%20javascript,vue%20javascript https://trends.google.com/trends/explore?date=today%205-y&q=...
  - izelnakri 7y ago
    I dont care about fashion too much, I care about code, maintenance and community quality more. It is in my opinion the only way to build good and sustainable development teams in the current environment. Contrarian opinion I know..

brainzap 7y ago

The template syntax is a bit weird. Not sure what would have been better but thats just a gut feeling.

matmo 7y ago

So for small apps, the final bundle size is significantly smaller since there's no framework "runtime" code included. What about large apps though?

sunseb 7y ago

Svelte is great. It's a shame we need a framework to do that and that the standard HTML/CSS/JS platform can't do that natively.

wintorez 7y ago

I've never been so excited about a library since the React itself.