When the other day, in our cozy @sveltejs chat room, they sent a telegram link to the next “revealing” article about Svelte, I was very happy, anticipating an interesting technical battle or at least an interesting reading of someone else's practical experience. Besides the fact that it is always interesting and useful, a certain set of circumstances - a planned vacation and quarantine - make me bored at home, and a similar article could somewhat diversify my day. Imagine my disappointment, you can’t even imagine ... but let's get down to business.
To clarify again, this article is a response to the publication "Svelte, a disappearing framework that still did not disappear . "Disclaimer, , -, . , - — , , « ».
Despite the fact that the author of the original article, dear action52champion, is clearly in a depressed state, probably caused by self-isolation and the global crisis, which he directly writes about:action52champion : Paranoia, you say, and you're right. But my therapist is busy supporting coronavirus victims. They need it. Therefore, I have to pronounce yourself.
I still try to make the response publication as useful, interesting and most importantly NOT evil, presenting everything as a kind of interview of the author of the original article with me. Along the way, I will try to answer some frequently asked questions about the choice of Svelte as a tool, how exactly it was implemented in our country and what is happening to it today. I'll tell you a couple of stories. So in order.Interview
About me
action52champion: . : Angular, React, Vue. , - Svelte production-ready .
Hi Action Champion, I am very pleased to be here, thanks for inviting me! My name is Pavel Malyshev, I am the author of all those wonderful articles (even though most of them are translations) that so overwhelm you. At this point in time, I lead the development in a small Nizhny Novgorod studio in the areas of web and Smart TV.Even if one of our readers does not follow Svelte, maybe they can know me from my reports at the largest IT conferences in Russia and the CIS, such as HolyJS, RIT ++, FrontendConf, DUMP, CSS-Minsk-JS, Yandex events and all kinds of mitaps in different cities of the Russian Federation.I also happened to be a hero of the issues of RadioJS No. 54-55, Web Standards No. 170, Devshahty No. 94 and some others. Besides Svelte, I like to talk about isomorphic web applications with SSR, PWA, Web components and SmartTV., Svelte
action52champion: , , , .
Great question! The fact is that I was lucky to be able to make decisions individually regarding some of the technologies that will be used on a particular project within the development areas that I oversee. In addition, my technical level and experience (over 13 years) allow, it seems to me, to make this choice as balanced as possible.Unfortunately, in IT companies, the person making such decisions is often very divorced from the development process and technologies, therefore, it is not guided even by the opinion of its developers, but by some generally accepted decision options and hype. That is, they reason about the same as you: “there is the Big Three and it’s full of ready-made solutions for it, why think that.”Since our studio is very small, and I directly participate in the development of projects and write code, I approach the process of choosing technologies as scrupulously as possible, and solutions are implemented gradually and systematically, but at the same time boldly.Speaking specifically about Svelte, the first project for which I selected it in 2017 is an embedded widget for sites. In fact, the choice was not great - either vanilla, or what compiles into vanilla. Even our beloved Vue at that moment in its pure form weighed ~ 25Kb gzip, which is monstrous for such a project.The choice turned out to be extremely successful, and in the end we came to the conclusion that if we had stopped on pure vanilla and wrote everything from scratch, then we most likely missed the deadlines and possibly lost money. But we were lucky to find Svelte, although at that moment no one really knew about him.In the same year, after we finished the project, I wrote my first article about Svelte on the Habr “Magically Disappearing JS Framework” to share a new and promising tool with the community. Naturally, the article was greeted rather coolly, which can be proved even by the fact that a more or less technical article with code examples and good design then collected 3 times less pluses than your profane “vyser” today. In fact, it was one of the first articles about Svelte in general and not only Russian-speaking.About paid articles and what is the “profit”
action52champion : The next time I was haunted by the feeling that someone was just scribbling custom posts.
Suddenly I thought that part of the time I spend on community development for Svelte is actually paid for by my work. Not sure if my materials should be considered custom-made?It seems that in an interview I said that in addition to promoting a decent tool that I use in my work and helping his community / developers, my indirect interest is in the fact that Svelte programmers, vacancies for them appear on the market, and customers are more loyal to use of this technology. And of course it’s not just that, the fact is that using Svelte makes our work easier and saves us time and money.Okay, I’ll tell you how it works. Customers are generally divided into 2 categories:- - React/Vue/Angular/Ember/{ } — ,
- , .
Unfortunately, often the first decisions are imposed on the basis of hype / PR, which, of course, is stronger for those tools that are behind corporations (React / Angular) and / or strong communities (Vue + Chinese).There is no point in hiding that we wanted the tool that we consider to be the best in the list of “those frameworks that I heard about” of our customers. Not because we are some kind of masochists or villains and we want to do everything around badly, but because it is a really worthy tool, in our humble opinion. Svelte solutions are simple and efficient. Most often, I look with horror at React projects, which sometimes come to us for completion. Even a very beautiful and beloved Vue by myself already looks bulky.In general, I think that the “ice has broken” and we have achieved our goal. If in 2017-18 it was possible to do a project on Svelte only for customers of the 2nd type, then in 2019-2020 many people have heard about Svelte and are ready to use it in their projects. Almost every day, people, representatives of various companies, including large services, write to me in a Telegram in a personal chat and Svelte chat, and ask about Svelte and its ecosystem. I'm glad that you, dear Action, have given me the opportunity to tell about this.About specific flaws
action52champion : I do not want to compare Svelte and other frameworks and go through its specific shortcomings. You can read this article for specifics.
Here you are disingenuous. As I understand it, you have no experience with Svelte. It seems to me that you didn’t even go through the Tutorial on its official website in order to reason on the subject. Therefore, I believe that you simply could not do this. If I am mistaken, write to me about this and I am ready to test it in practice, for example, by concluding something like a bet with you.In turn, I would love to consider a specific case, and I already mentioned the main disadvantages of Svelte at the end of this article . In addition, a lot of material and real reviews can be found in our telegram chat . We do not have censorship there and you can write any questions on the subject.About the Big Three
action52champion: : , , — ( ) .. , , . . -. - 5 . . . . . .
You know, you raised an interesting topic. Are the Big Three projects so “mature”? Can they cover absolutely all web development cases, answer all “new challenges”? The obvious answer is “No,” because otherwise we would not have watched the emergence of more and more new solutions.Is it good that new solutions appear? Definitely “Yes”, because time goes on and new tasks, new challenges appear. 10 years ago, we only thought about desktops and a donkey, 5 years ago we thought about mobiles, today IoT, embedded and wearable devices come to the fore.I understand that as a developer prone to depressive conditions, you would like progress to stop or even slow down. To make your picture of the world as simple as felt boots - there are Big Three frameworks, as it were, for every taste and color, and you know exactly what to do. But dear Action, it doesn’t.So it was not with the first wave of frontend frameworks, it will not be with the current leaders. By the way, in this sense, I do not say at all that Svelte is necessarily a new wave tool. He really rethought a lot, but at the same time, much anchored him to existing solutions. Whether he will occupy a leading position in the new pantheon of front-end technologies or is he just a harbinger of their appearance, I do not know, although I do not exclude such an opportunity.About Vue
action52champion : I remember how Vue took off and gained popularity against the background of a react with an angular. Yes, there was PR, but Vue just did not need PR. He solved the real problems of bloat and complexity of other frameworks. He took what was realized in others and realized in a minimalistic form. He solved a specific problem - the complexity and monstrosity of two other frameworks. What real problem does Svelte solve I don’t know. What is written on their website is a statement of good intentions.
I really love this story. About how the noble Vue, with a beautiful design, unexpectedly burst into the framework pantheon for everyone, illuminating it with its simplicity and conciseness. I like everything in this story, except that it is nothing more than a myth. Here's a look:This is the Vue (2014) code:var app = new Vue({
el: '#app',
data: function() {
return {
greeting: 'Hello',
firstName: '',
lastName: ''
};
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
});
And this is the Ractive (2012) code:var app = new Ractive({
el: '#app',
data: function() {
return {
greeting: 'Hello',
firstName: '',
lastName: ''
};
},
computed: {
fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}
}
});
As you can see, in addition to minor cosmetic differences, the rest of the code is almost identical.Perhaps you will say that this is an old school and everyone writes on Vue in SFC (2015):<template>
<p>{{greeting}} {{fullName}}</p>
</template>
<script>
export default {
data: function() {
return {
greeting: 'Hello',
firstName: '',
lastName: ''
};
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
};
</script>
<style scoped>
p { color: red; }
</style>
And I will answer you that "nothing is new under the moon" (c) - Ractive (2014):<p>{{greeting}} {{fullName}}</p>
<script>
component.exports = {
data: function() {
return {
greeting: 'Hello',
firstName: '',
lastName: ''
};
},
computed: {
fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}
}
};
</script>
<style>
p { color: red; }
</style>
And also that Virtual DOM, or Parallel DOM ? I hope I have not completely confused you. I skimmed through the comments on the original article and realized that you do not understand the difference between the Virtual DOM and the Shadow DOM, which clearly follows from this comment:action52champion : Shadow DOM was introduced into the framework not from a good life. Its lack means that Svelte will certainly be slower, where there will be many updates.
Apparently you haven’t heard about Web components either, but you don’t even imagine why you need a Virtual DOM. Nothing, but you are a good interviewer, and for this you are loved.But I will continue. One of the reasons why we moved to Vue in 2015 was because the Ractive we used since 2013, due to the lack of “aggressive evangelists,” simply could not break out and build up mass. At the same time, the young Vue, similar to him as 2 drops of water, in the wake of support from a very cohesive and nationally oriented Chinese community, has already begun to hype in the Middle Kingdom. The move turned out to be practically free, although we lost some of the cool features of Ractive, which Vue still does not have.This was a lesson that you should learn as well - not always the best technology is at the top. There are many more factors than the quality and innovativeness of ideas. There must be a growth driver, be it corporate support or a cool community. Just like that, a diamond does not become a diamond.I really like Vue and I think that this is the most suitable instrument for me from the Big Three, but I objectively understand that I do not like it myself, but those ideas that it reflects. The ideas from Ractive that we lost.Svelte, in many respects, is a follower of Ractive ideas combined with the ideas embodied in Rollup (eg minimalism, tree-shaking, etc.) and this is not surprising, because all of these tools have one author .More recently, Angular introduced AoT template compilation similar to Svelte. Do you know where I saw (and even used) something similar for the first time and this allowed us in 2013 to throw out that part of the runtime that worked with templates? Well, you get the point.Why so long
action52champion : From a practical point of view, one thing is important - how well the framework solves real business problems. And from this point of view, if you take 2 frameworks that solve the problems in the same way, but one of them has more community and ecosystem, it is reasonable to choose the latter. Svelte was released in 2016. Vue was released in 2014. The difference is 2 years. Those. Svelte could take into account all the mistakes of Vue and become the best, win back the audience and the market. But he is still the uttermost marginality known mainly for his laudatory articles.
Before answering the question, I will slightly correct your statement. In fact, Svelte was released in 2017. Its author, Rich Harris, spoke about him in his “Frameworks without the framework: why didn't we think of this sooner?” only at the very end of 2016.In addition, Svelte 1 was more likely a proof-of-concept, which was discussed more than once in the community and in communicating with the author. Despite this, it was Svelte 1 that I used on the first project with a widget and for this task it worked perfectly. At that moment, we continued to write on Vue and support projects on Ractive. The first more or less serious project was already developed on Svelte 2, the release of which occurred only in mid-2018, which I immediately wrote about in the corresponding article .I would say that only starting with the second version of Svelte, in principle, I began to somehow advance. Prior to this, neither I, nor the author, nor other ruffles from the community made any special attempts to talk about him. Therefore, since you so want to consider the year, it would be more appropriate to consider the release date of Svelte mid-2018.Some ripples in the comments suggested that Svelte's release date be the appearance of Svelte 3, which generally came out only a year ago and achieved amazing results this year. On this subject, you can recall Angular and AngularJS - two different frameworks under the same name. Personally, I consider all these calculations to be nothing more than stupid populism.You might want to know why we did not write more projects on Svelte 1, since it was so beautiful. It seems the answer is obvious - at that moment it was really damp and was suitable only for projects such as widgets. I can’t say that we abandoned it at all. Several internal projects were also written on Svelte 1, and parts of old applications were also rewritten on Ractive. Those components that were the bottlenecks in Virtual DOM performance were successfully rewritten to Svelte 1 and implemented in projects, doubling the performance of these components. It was also a very positive experience.About stupid and greedy front-ends
action52champion : This is especially true for those who just enter the frontend. He often drives in for money. So: there is no money in Svelte. There is no work on it either. And the most interesting - there will be no experience on it either.
Very emotional wording. For some reason, I thought that you were just one of those who “moved into the front-end for money,” and it seems quite recently.If I am mistaken, and you are a seasoned front-end, then perhaps you remember that a couple of years ago, work for the same Vue was also not completed. Jobs were piecemeal and offered less money than React, Angular, or even Ember to developers. At the same time, now we see that Vue has already taken a worthy position. For Svelte, it is also inevitable whether you want it or not.About the ecosystem
action52champion: « » « , ». , , . ! 2020 — .
As for Svelte and its ecosystem. It is worth noting immediately that, despite the apparent simplicity and minimalism, Svelte is very fullfeatured right out of the box. As a solid UI framework, it has absolutely everything that is needed to create a modern UI. Here is a diagram of the built-in features that I prepared for one of my reports:
For example, in React, there’s nothing at all. Although React is the most popular UI framework, it’s nothing more than a template engine in terms of functionality.Of course, the external ecosystem is still much more modest. However, Svelte already has a rather extensive list of ready-made solutions and all kinds of sets of components that you can find hereand it moves in that direction exactly the same way as other frameworks before. It is a pity that people like you are thoughtlessly trying to take this chance from him. On the other hand, I remember how a couple of years ago everyone wrote the same thing about Vue, and about 6 years ago about React and nothing, they broke through. The ignoramus always remains only ignoramus.About the "holy"
action52champion: , , — - . , 3 , . , , , , , . Svelte .
I would not like to go deeper into that question so as not to offend anyone. I can only say that often the same React is often criticized precisely for being “sharpened” by the particularities of Facebook’s corporate development problems. It is understandable, Facebook makes React primarily for itself, and not all decisions that are good for Facebook are good for your projects, but there is no one to complain about.React is generally a good framework that fits many projects, especially when you need excellent Typescript support. But he is far from perfect and he definitely needs alternatives.About all sorts of different things
action52champion: , Svelte . JS VueJS, Svelte. Vanilla JS , ? , ? - ? Virtual DOM, ? Write less code? ? , , , Vuejs React - , .
Blitz question, excellent.- Minimalism is achievable. Problems with this arise when a different principle is laid in the very foundation of the solution. For example, Reduh in its essence cannot be minimalistic due to the abundance of a boilerplate embedded in it. At the same time, Storeon, working essentially on the same principles, remains minimalistic. In general, all modern frameworks tend to split their components as the smallest possible units. In addition, you need to understand how to write the most declarative and state-driven code.
- This is not a choice between Vanilla JS and Svelte. Svelte - this is Vanilla JS, which you do not need to write and which is many times easier to maintain and develop.
- Typescript + — « », -. . TS. , Vue ? TS ± Svelte.
- , Virtual DOM. Svelte , change detection . .
- . . React Vue. 1.5 , .
- Since you don't like the examples from the Svelte documentation. Can you suggest more serious cases from the documentation of other frameworks?
Usually, to briefly explain how Svelte works, I use this wording:Svelte allows you to write high-level declarative code in the sources that is easy to develop and maintain, and get low-level imperative, high-performance code that works fine in runtime.
And this approach is very different even from Vue, in which SFC is nothing more than a more convenient way to write Vue.extend.About community
action52champion : Svelte is said to have a large Russian-speaking community. I do not see him, I see only evangelists, each of whom preaches for ten.
Glad you asked about this. The Russian-speaking community is represented by the main chat in telegrams ( @sveltejs ), a separate chat for the Sapper framework ( @sapperjs ), a channel with vacancies ( @sveltejs_jobs ) and news ( @sveltejs_public ), as well as a VK group ( @sveltejs_ru ).The main movement is in a chat in which there are already more than 1.5K people and a rather peppy skeleton of active comrades.
There were more than 170 people at our first offlan rally on February 22 in Moscow, and almost 1K visitors watched the online broadcast. The next mitap was supposed to be in St. Petersburg in April-May, but the pandemic made adjustments to our plans. I hope that everything will work out soon and we will continue. You can follow our meetups on the official page of Svelte Russian Meetups .Let's see who else is talking about Svelte. For example, here is the respected Andrei Melikhov (Devshakhta) tells how Yandex.Money uses Svelte:
Here, a literal quote from Andrei Sitnik (author of PostCSS / Autoprefixer / etc) at last year's HolyJS Piter :“Svelte is, frankly, the best invention in the world of Javascript frameworks that has been. We should not talk about hooks, we should talk about Svelte. ”
And although, most likely it was a scenic exaggeration, his constant tweets and retweets about Svelte do not give any doubt about his sincerity.
Of course, I have no doubt that my respected interviewer is smarter than all of us ... although no, I doubt it. Sorry, thoughts out loud.Pro (NOT) awareness
action52champion : Level counterarguments - you just couldn't figure out Svelte - it's generally beyond humor. People who work with angulars and reacts can't figure out a little simple Svelte? Probably the point here is in Svelte itself. Or that there is basically nothing to understand, because there is nothing worthwhile.
It seems I already answered a similar question, but I’m ready to repeat it, since you provided me with such an opportunity. One of the problems that I personally see in terms of promoting Svelte is that visually it is too similar to the Big Three frameworks, although conceptually it differs quite a lot. This was especially felt in Svelte 1/2, when people came to the community and comments of Habr and sincerely did not understand how Svelte differs from Vue. And indeed, at that moment both were too similar to Ractive. With the release of Svelte 3, the differences became brighter, but this did not solve the problem completely.That is why people who come to Svelte most often drag in the same approaches that they used in other frameworks, not realizing that Svelte can offer more elegant solutions to the same problems. You can’t even imagine how many such cases we consider in our chat literally every day and most often people leave with the comment “How could this be done?”Pro (NOT) popularity
action52champion: « , 3 ?», . , . 5 , . - , . . , ( ). — , .
And you are a provocateur, however! ))) Although many would consider it an interviewer's dignity, I still think that you need to at least a little understanding of the subject, so as not to look stupid in their provocations."You overslept again, darling." (c) See StateOfJS 2018 - Svelte in the top 1 among “Other libraries”, and in the last 2019 it steadily entered the main pool of frontend frameworks, while it is leading by the criterion of “interest” in it:
So there is progress. However, an absolute misunderstanding of the simplest laws of the market is also evident. When the market is “empty”, it is also called the “blue ocean”, then it is easy to occupy it, especially when Facebook is behind you. When the market is competitive (the scarlet ocean), then entering it is much more difficult. Therefore, it is logical that over time, becoming a leader begins to take longer, but this also indicates the opposite - if you could break out into a leader in a highly competitive market, and even without money and PR, then your product is really worthy.In the end, look at how many frameworks / libraries / platforms / $ mol there are and not all of them are on a par with the Big Three. Yes, at least they just have their own hub on a popular IT resource and highlight custom syntax on Github.Svelte already has all this, but of course not just like that, but thanks to the work of the community. It is already popular enough to have a bunch of articles on Medium and Dev.to , a bunch of training and other videos on Youtube and a lot of all kinds of ready-made solutions. Do not reproach yourself, everyone is mistaken.About OSS
action52champion: Svelte . Svelte, , Svelte . , ? , . ? Who's using Svelte?.. - ? , , VueJS ?
As we have already found out, for 2 years since the beginning of the popularization of Svelte and / or for 1 year since the release of its popular version, a lot has happened around it, so I think this question is vocal.However, it is important to mention one more thing: Svelte is a purely community driven project and the community does not want to be engaged and affiliated with any corporation. Just recently, someone from the community started talking about Patreon for the author of the framework, but the author himself even stopped these discussions. I understand that many are used to using the benefits of OSS for nothing and even presenting their business requirements to them. But in fact, people who do OSS do not owe you anything, dear, but many of us could participate in OSS projects, and not stupidly make money on other people's decisions.Regarding Svelte, those same “different” corporations help us differently. For example, Mail.Ru helped us a lot with the first Russian metapom on Svelte. We provided our beautiful office with equipment, cookies, took care of the organization of broadcasting and recording. Thanks Mail.Ru!About the fact that
action52champion : Are you sure that the right to recommend this framework is so categorical? The frontend is an area where new people come without experience every day. They are not able to appreciate the scale of the unnecessaryness of Svelte. They will see laudatory articles where clever guys with a serious look talk about what a wonderful forwarding of events, a compiler, etc. What is interesting from an academic point of view, but not from a practical one. They will think that it’s worth contacting, they will spend their time and will be left with nothing. And giving out bundles of articles about how wonderful it is possible to do some crap on Svelte, which can also be done on normal frameworks, you add a huge pig to novice people.
My favorite question! Almost like a cherry on a cake.Yes, I’m sure that I am in the right and that’s why:- I know what I'm talking about. I use Svelte in my work and post solutions in OSS.
- I am the decision maker for the choice of technology and responsible for the success of the projects.
- I have something to compare. In addition to Svelte, I have experience with many frameworks now and in the past (Backbone, AngularJS, Ractive, Riot, Vue / Nuxt, React, LitElement).
- I communicate a lot with those who also use Svelte and often help those who want to learn it. I hear their problems and try to always offer solutions.
- I read reports about Svelte and am ready to substantively answer questions.
Thank you, dear Action Champion, for inviting me and giving me the opportunity to tell you again about such a wonderful framework like Svelte! Thank you for your thoughtful, well-formulated questions and raised topics. All the best to you and have a nice day!
P / s
The interview is over, and now Alaverdi. And you, dear @ action52champio, are sure that you have the right to blame for an instrument that you have not only not used, and have not really seen in your eyes? What is your practical experience with Svelte, and does it even have at least one of the frameworks? You do not like React, you do not understand Vue. Angular? No I do not think so.It seems to me, before you write at least something on a technical resource, it makes sense to properly figure it out, and not just litter the hubs, suffering from a lack of attention from your psychotherapist. Call him better, you need it.UPDATE:
I take this opportunity to invite everyone to an online meeting with the author of Svelte, where he will answer the most interesting questions that have been collected from the community:sveltesociety.dev