Frontend Weekly
Published in

Frontend Weekly

Svelte 3 — New Vue killer, but not today.

Svelte vs vue and react

This article will be useful for people like us, who decided to try Svelte in a live project. Our small team got some work on Frontend development of small web admin panel with MongoDB Stitch as a backend.

Last few years we are creating a frontend on React and Vue (depends on the project size and necessity of ReactNative for the mobile application).

But we all heard about how Svelte is cool and beautiful, so we decided to try it out. Maybe we will even use it instead of Vue or React? Let’s see…

Who is Svelte?

In a few words — this is the new js framework (but it doesn’t consider itself as a framework), that think it will kill Vue and maybe even React in the near future. In this article, we’ll see how Svelte is in a real-world web application.

As a web developer, we don’t want to reinvent a bicycle - we want to ride it out, because we have short development terms and evil customers who don’t want to wait.

Tutorial

When you begin to learn something new, the first thing that you need — is a tutorial on the language or framework web site.

Svelte has its own Svelte.dev/Tutorial. It’s a pity, but part of the tutorials doesn’t work at all in preview. So we can not understand, are we are wrong or something going with the tutorials.

And it takes a lot of time to find out.

UI Kits and Styles

Searching for UI Kits for Svelte was an certain pain for all of us. We just want to exclaim: “Hey, maybe Material Design Lite? Bootstrap?…at last something?”.

We found only sveltematerialui.com and svelteui.js.org, and we would say they are looking very raw at this time. Even in simple import <Button/> from them, we have an error in UIKit’s package. We don’t have time to resolve those errors, because we have terms.

Looking fast on the documentation I’ve decided to reject them and use “old-style vanilla” imports from Material CDN. Using javascript without UI Kit back me 10 years back in time ) Long long classes and good nostalgia…

Svelte works with DOM in a “different way”, and we have some problems with MaterialUI components. MaterialUI js script adds some elements on document load event, but Svelte adds its components on document load too, and we have some race condition.

For example, simple spinner works occasionally:

This problem solved by triggering upgradeDom() on every time when Svelte adds new component or element. So we’ve solved this by adding this code to parent component afterUpdate() event:

afterUpdate(() => {
componentHandler.upgradeDom();
});

Styles

In case of Styling elements — all clear. We do it like in Vue. You create some style, then create some UI component that gets some props, for example, width and height. And do it this way:

<script>
export let width = '20px';
export let height = '20px';
</script>
<style>
.loader {
width: { width },
height: { height },
}
</style>

And you got… an error. No, you can’t include variables in styles. You can solve this by “React way” and create dynamic styles as variables or functions that return some style, but this adds complexity.

As a result, we got a mess: part of our styles in <styles> and another part in <script>. You can write a clean code only if you don’t have dynamic style properties or you have only dynamic styles and write them as functions.

Routers and routing

Without a router, you can’t create even one-page web app. React and Vue at project scaffolding include some routers (or ask you for include it). But like all things in Svelte — that is not an easy road.

You need to choose the Router by yourself. There are only two routers available github.com/EmilTholin/svelte-routing and github.com/kazzkiq/svero. They are bit similar, but I choose one that got more stars on Github (Yes I know, I am a bad person).

Let’s include it into our MDL template layout. Wrap parent component into <Router url=”{url}”> and add <Link/> for links in navigation.

Let’s check what we’ve got. And we’ve got “new community project” problems. In this case, we can’t pass style class to <Link /> to stylize it. And how can we do this, guys? I think this issue exists in the project’s GitHub. Fortunately, we still can add a router link to <a href=”” /> by adding “use:link”.

Svelte extremely need a naming convention

You will get this problem very often — Svelte doesn’t have a naming convention in the documentation, and juniors will make a lot of bad coding things.

Venegret

It’s like a disassembling strange salat.

For example, let’s back to our Router. We have some imports:

import { Router, link, Link ,Route } from "svelte-routing";

What are Link and link? Even in a small project like we have, we got confused in import names.

In comparison with“React way”, this will look like:

import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing";

Svelte has a similar thing like “ref” to React. This is a pointer to DOM element or component. Svelte tutorial says that we can do this like:

<script>
let dialog;
</script>
<dialog bind:this={dialog} class="mdl-dialog» />

Let’s imagine, if we have 15 variables in our component?

<script>
let loading;
let pins;
let dialog;
let stitch;
</script>
<dialog bind:this={dialog} class="mdl-dialog» />

How can we figure out which variables are really variables and which are pointers on DOM elements or components?

Svelte tutorial must be edited first for beginners developers because most of the beginners will try Svelte and make those mistakes. Examples must include variables naming convention (see React tutorial for example). It also would be nice if linter and bundler throw an error on such bad coding as golang compilator does.

<script>
let dialogElement;
</script>
<dialog bind:this={dialogElement} class="mdl-dialog» />

One more real-life example. You have some function that returns some data and you need to bind the result to some UI component. That will look like this:

async function ReloadPins() {
loading = true;
pins = await getAllPins();
status = 0;
}

When you see this code, you will immediately understand which one is a “state” variable and which is our UI component property pointer.

I am kidding )) No, you don’t. You don’t even know where accessory variables are. In React, there is a “state”, which divides global states from accessory variables, and you can change them only from “setState” or “hooks” to track changes.

What has changed and who did that?

Variables inside Svelte are globals and they can be changed from anywhere and anyone. You can reduce coding time instead of code quality. Because you don’t mind which variable will be ‘state’ and which are just accessory.

As a result, you or your team can create components very fast, but after some time you can’t understand what your junior software engineer wrote in that code (Juniors can even forget them names after time :) ).

That’s why you can't support your Svelte project without strict naming and project structure convention. Because of Svelte doesn’t learn you this from its tutorials.

Including Stitch

Stitch — very cool thing and I am definitely will write about it (with performance tests and comparison with other such solutions).

If you need to use Stitch in your Svelte project, you must go by the “vanilla” js way and include it:

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script>

Because if you use npm and packet import you will get “buffer” errors.

I don’t know if it was a Svelte problem or a bundler problem, but I don’t have time to figure this out.

This is the main problems which we have in creating a project with Svelte. And you know what? We don’t like it… at last for now.

Why you should use Svelte:

  • If you work alone and you need to create MVP or small web-admin vary fast.
  • If you care about bundle size. Personally I don’t think it is a problem for most counties right now. We have expensive programmers and cheap internet rates.
  • If you just started to write your first JS frontend code. Svelte let you full freedom of coding, variables, no conventions, states and etc. You don’t need to learn complicated JSX or TS, you just write and see what you got.

Depend from the last, I personally don’t understand why Svelte maintainers want to add TypeScript support? We love Svelte for freedom.

Working with Svelte I just realized how JS changed in last years. Now JS, not JS anymore, its JSX, TS, Flow… And Svelte just gives you an ability to work with pure “old-style” JS.

What do I like in Svelte:

  • Great readability of “if” and “else” in components code. That’s a Vue’s problem in my opinion.
  • You can create your own components “events”. That is a really cool feature! You don’t need callback functions in your child -> parent communication.

Why you should not use Svelte:

  • You will not find any working out of the box UI Kit.
  • Errors from time to time can be implicit.
  • If you think your project will need a mobile app in the future. You don’t have some “Svelte Native”. For now Svelte has its own Native Script generator but it works not so good and you will get a lot of work with it.
  • You should care about writing strict naming and code convention for your team because Svelte tutorials don’t do this for you and you will get very complicated codebase as a result.

--

--

--

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Recommended from Medium

A lesson about React, D3, and animation performance

7 Component Communications in Vue 3

Easy Waypoints: Just Add jQuery

DevSecOps applied: Setting up automated security auditing of a node.js app with Bitbucket pipelines

Recursion and DOM Nodes

Deploy your iOS App on App Store without a Mac

A deep-ish dive into React Context

Resolving issues with zone-flags after upgrading to Ionic 5 with Angular 9

Samsung Phone displaying the time

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Max Geek

Max Geek

Startup’er, polyglot full stack software engineer and traveler.

More from Medium

Ref() vs Reactive() in Vue 3 — what’s the right choice?

How to Debug js/ts jest

How to Use a Javascript Reporting Tool with Ruby on Rails

People You Should Follow If You Are Working With Vue