Developers March 25, 2020

Have you tried Svelte?

onStack

aka , How I learned to stop worrying and love javascript.

I must say that in the past I have used vanilla js, jQuery, Angular, React on the front end for webdev but I never really liked them too much.,

But, I just went from Flutter (I love dart,It was my escape from js) to writing apps in Svelte as a favorite occupation.

A couple of things I would like to list, why you should try Svelte:

  1. I learned it in one day. I read the docs one night and I was ready to go the next day. Svelte is very simple.

  2. Feels like a natural way to write web apps. I always liked to write the js, css, html in one file before so it's perfect, they all go in one .svelte file.

  3. No boilerplate. Seriously... nothing. It's really like a fresh breath of air.

  4. State management is a breeze., just put $: infront of a variable and just use the assignment operator No more setState().

  5. Makes me feel very productive. I achieve a lot more with less. Probably because there is no boilerplate.

  6. It's fast and small. Since Svelte is not a framework but a Compiler, it's all just tree shaked, compiled vanilla js at the end that directly manipulates the Dom...

  7. If you know how to write html, css, js then you know how to use Svelte. The learning curve is very small. The same cannot be said for React or Angular, since both have big learning curve. So Svelte is great for beginners and great for anyone who learned a js framework before.

  8. Components! Just create a.svelte file, put some markup inside and boom. you have a component. No more @annotations with directives and selectors or classes...
    You name the component when you import it, put a <slot/> inside, and it can contain other components.

  9. Typescript support. It works finally with Svelte 3.0. I haven't used this myself too much yet, cuz if I start writing interfaces to define types, it will feel more boilerplatey, I enjoy my freedom for now, but for larger projects it's awesome!

  10. Scoped CSS!!! This is by far one of the best features of Svelte. Each css you define inside a .svelte file will be only in scope inside that file. This means I don't have to use annoying css selectors like .outer_flexy_container or similar. I just use div{} to style a div, and it will not effect the divs outside the component. And Svelte is so nice it will check for unused css and warn me, so no more long global css styles Im afraid to change or delete because it could break something and I forgot what....

  11. Easy animations, import { fade } from 'svelte/transition'; <div transition:fade> ... and it fades. thats it.
    ..............................
    So Im gonna list a couple of things I didn't like while using Svelte....

  12. Not much Component libraries available online. There is the sveltestrap which is bootstrap (it's awesome) and there is material ui....I didn't find anything else.
    I can of course use any css inside the components, but without Component libraries I have to create my own svelte components.

  13. Svelte Material UI don't always work... I could use the buttons and some dialogs, radio buttons, textfields but, I could not get the Appbar working and I have been trying for 2 days... after configuring Rollup, which is the bundler for svelte to compile scss, it still throws compiler errors....

Thats it. I cant think of anything else. Svelte is really nice. A positive experience!

Try It!!

  1. 2

    I love Svelte! I built the https://plantogether.city frontend with it.

  2. 2

    Yup it's great!

    Two years ago I started on a networks visualization for Python called Netwulf. It's a small package that lets you input a graph/network object and then it launches a webserver running a d3 visualization of that network. It works pretty well and got lots of users pretty fast, but I didn't know the first thing about front end programming so the GUI in version 0.1 was a mess.

    But in my Corona-induces self-isolation I started redoing the entire Netwulf GUI using Svelte. SO AWESOME! Again, I'm a total frontend noob, but Svelte is easy to work with. I see containers a bit like classes that can be reused. Only they are nested hierarchically. Netwulf 0.2 is clean and easy to maintain. And its lightning fast.

  3. 2

    Well I mean if Borat likes it, you pretty much can't go wrong...

  4. 2

    I’m using Svelte on my next project. Such an amazing project! Makes me love frontend development again!

  5. 2

    I'm also a huge fan of svelte, but I want to play devil's advocate here and talk about some of the (non-trivial) pain points I've had while building codernotes.io.

    1. Typescript support - Despite what you mention above, Svelte does not have official Typescript support yet. This is something they are actively working on, but I'm definitely missing types as this app gets more complicated.

    2. Svelte isn't enough - if you want a production-ready app, you're going to want a backend that communicates with your database. That's because you don't want to expose your database to every stranger on the internet. You'll also want blazing-fast loading times, non-hashed-based routing, and other production best practices. You can acheive this with Sapper, the SSR framework for Svelte, but Sapper has a whole suite of issues...

    3. Unit testing is non-existent for Sapper - This is a huge one. If you use sapper, you won't be able to unit test your code. As far as I've discovered (including asking in the support group and in a Github issue), there isn't a single known way to actual test the insides of a component. The closest you can get is svelte-testing-library, which has some compatibility issues with Sapper, and even then testing-library focuses on testing the DOM, and you won't be able to test the internals of the component. To me, this is a huge issue that I found out way too late.

    My personal opinion, after spending a serious amount of time with the framework, is that it's great for simple front-end work. I would highly recommend Svelte if you are a backend-heavy developer, and you want an easy-to-use JS framework for the interaction with the app. Now that I'm deep into Sapper and a full SPA, I don't think it's ready for production yet.

    1. 1

      It seems odd to criticize a front-end framework for needing a back-end. I don't want a framework that forces me to use JavaScript on the server.

      I've only played a bit with svelte but what I like about it is that it plays well with existing apps. It doesn't need to control everything in the app and you can just drop it into most apps without much hassle.

      1. 1

        I'd love it in combination with Elixir, to be fair ;)

        I'm not criticizing Svelte for that - but I think it's something that beginners who are drawn to the framework could definitely misunderstand. What I'm really criticizing there is Sapper, but I think most of my complaints come from the fact that it's still in beta, and I was dumb enough to run this in production :)

    2. 1

      Hi, Kevcon80, Thanks for your opinion, I haven't tried Sapper yet.
      I was just about to ask on Sapper's discord channel if it's ready for production since it's in beta. I guess you answered my question about that :)
      Of course ,server-side development is a must, it didn't occur to me to mention it because I'm already knee deep in Spring boot and server-side dart, so while I have been interested in Sapper, writing back end code in javascript is only gonna happen if somebody hires me to do it.

      The typescript support might not be official because it doesn't work outside the script tags, but if you install the svelte-preprocessor https://github.com/kaisermann/svelte-preprocess , you can use typescript since Svelte 3.0.
      you need to configure your rollup.config.js and then you can use Typescript inside svelte components like this <script lang="typescript">, or you can also import .ts files.

      But you are right, it will not become official till we get typescript support inside markup, which is not possible at the moment,

      So there is no type checking if you have a function click(name:string){}; and you call it like:
      <button on:click={click("a")}
      <button on:click={click(1)} //this will not throw a compiler error or warning

      1. 2

        So I actually had the setup you described above, I ended up discarding it, as you'll get constant "fake" syntax errors in VS Code which were driving me crazy. In the end it was enough hassle for me personally to decide to wait for official support

        1. 1

          Oh okay, I understand. The development experience is still not too great...

          1. 1

            And, to be clear, I actually am a fan of svelte. The DX of svelte itself is great - better than the other js frameworks. At the production level though, personally I've found that Sapper isn't ready yet.

            I still think that it's a fantastic first framework to learn for a new javascript/web developer!

  6. 1

    I’m using Svelte to build the new version of Doka Image Editor and I’m loving every second of it, wonderful framework.

  7. 1

    my only complaint is that sapper is kinda hard to deploy properly compared to other solutions

  8. 1

    I have tried and played around with svelte - amazing tool.

Recommended Posts