What Should You Know Before Using SVELTE? (PART: 2)

In the previous part, we’ve covered what Svelte is and what it consists of (main features). Now let’s try to analyze what is possible cons and pros, and actual risks of using Svelte for your next project as a product owner or a developer.

In modern web/mobile development we often rely on existing solutions like libraries, packages, frameworks. When starting a new project we want to be sure that there are some patterns and best practices that we can follow to save our time, money, and mental powers.

1. No settled ecosystem

In the case of React we know we are covered: React has been already a long time on the market, the community is huge, package base on npm too. There is a caveat that choosing Svelte You will be forced to write your own implementation of the required library. Let’s compare the number of packages on npm for the most popular frameworks/libraries:

We see that Svelte has a pretty low number of packages comparing to its competitors. But let’s keep in mind that as everywhere there is a small set of useful information and the rest doesn’t deserve too much attention. Community is growing, but there are not too many tools and UI libraries that have passed the time check for Svelte.

2. No type checking

In 2020 we are used to having types in our applications, cause it provides us pretty much benefits: less errors during writing the code, faster development flow, and code and functions being already documented (if you are doing everything right). For these purposes, we used several well-known solutions: TypeScript, Flow, PropTypes. What about typing in Svelte?

Unfortunately, there is no from the box solution. No TS, no included React-liked PropTypes. There are issues and discussions about it in Svelte issues sections on GitHub, so feel free to check and find out the relevant info there: Working TS compiler & AST type checker, TypeScript support.

Of course, we have several third-party solutions that can party cover your needs, but use it on your own risk (or don’t: to avoid more pain in the neck in future):

• https://github.com/kaisermann/svelte-preprocess#typescript
• https://github.com/dafn/svelte-typescript-parcel
• https://github.com/dafn/svelte-typescript-rollup

3. Confusion in variable names and syntax

When you are writing code in Svelte you have to remember that it is a new language and you have to switch in Svelte syntax thinking and patterns and if you come from React (as I am). Sometimes it could be hard to understand what is the variable, is it a property or not, and what it does. To understand what I mean, just check out how many link variables and methods do we have in the navigation library and tell me: is it clear to you or not?

4. Difficulties that come with a compiler-like framework

What do I mean here? Because Svelte is a compiler, it has to be build before, if you inject Svelte into your app, first a compiler will be added, what is less performant approach comparing to other libraries/frameworks (in case of existing project structure).

Another thing is that Svelte will allow you to compile your project with error (absence of imports/exports etc.), React in this case will inform you about it in the phase of writing code.

5. No direct career opportunities

Because Svelte is pretty fresh on the market, it should pass a stress test and a real-world-usage test first. That’s why you probably won’t find direct propositions for Svelte Developer on the market. For some time at least knowledge of Svelte framework will be just a benefit, but not a final condition for acceptance.

Pros of using Svelte

1. Good SSR

Svelte framework has its SSR implementation called Sapper. We have analogies to other solutions like Next.js for React and Nuxt.js for Vue. You can compare it to Next.js and read about its specification here.

In short: 

• each page is a component
• code-splitting
• offline support
• server-rendered views with client-side hydration

To learn more read introductory blog and post tutorial.

2. Easy to find dev team from another FE framework

Although there are no direct job vacancies for Svelte developer, there is a huge plus of Svelte, because it has similar parts like to other, well-known frameworks & libraries, such as template syntax, state, reactivity, directives, or component approach. Because of that, the framework has a calm and slight learning curve which brings great experience for junior developers and fast switch for more advanced ones. This is a huge benefit because you don’t need to look for a new team of developers, but just give a bit time to your existing team to read the documentation and you are good to go.

3. Fast development and small bundle size

Because of the learning curve and simplicity of the language, we can create prototyping fast with less code. It’s a good start to check your idea and estimate future problems and caveats with low costs.

4. Friendly community

Language is young and there are many enthusiasts who are sharing their experience and meetings where you can find an answer to your question. To know what I mean I invite you to join this amazing discord server (link) dedicated to Svelte. Community is growing and the future of the language is optimistic :)

5. Mobile implementation

It hasn't been with there from the beginning, but recently Svelte creators finally gave us the mobile implementation of the framework: Svelte Native. From the technological standpoint it works in the similar to the web app Svelte, like no virtual DOM. Keep in in mind while planning where you want your app to be present - now you can build it both for web and for mobile!

Conclusion

Well, all tools have their own proses and cons - the only difference is how we use it. Svelte is a good example of something fresh for you and, if you ask me, it is definitely worth your attention. Of course, you should read and analyze a bit more before diving deep into it. 

But I hope I put some more light there for you. Take into account all info from above and keep abreast of Svelte!

And let me know if you like it :)

(If you, by any chance didn’t read the first part, you can find it here.)