today we are going to talk about Svelte. Svelte is a tool to build interactive websites that was chosen as the most loved web framework in last year's Stack Overflow developer survey. So today we are going to find out what it is and how does Svelte work, what makes it different

from React, what makes it faster than React, what makes people like it so much, and who should learn it. We will also take a look at how does Svelte code look like by making a couple of tiny examples. Let's get started. As I said, Svelte is a tool that helps you make

interactive websites just like React does, but it does it in a very different way. Unlike React.js or Vue.js, Svelte is not really a library or a framework. Svelte is more like a compiler which makes it very, very different from its competition. If we build our applications

using React, for example, after we finish the application and we publish it to the world, when a user comes to our website they will have to download two pieces of code. The first one is the code that we wrote, all the logic that makes up our application. The second code is a copy of

the React.js code. This is because the code that we wrote uses React.js, so it makes sense that to be able to run our application our users are going to need to download React as well. React is not alone in this, this is like a standard practice. For example, if you use jQuery

in your code, the user is going to have to also download the jQuery so they can be able to run your code, which makes sense. But this is not what Svelte does. When I first tried Svelte a long time ago, and they had the version one of their

website they were marketing Svelte as the magic UI framework that disappears. This is because it kind of does; it sort of disappears after you write your application using Svelte and when you are ready to publish it to the world, Svelte analyzes and compiles or translates your

code into normal JavaScript code that the browser will be able to understand by itself. There is no need to explain to the browser what Svelte is. This means that when the user comes to our website and if we are using Svelte, we are going to give to the user only the code

required to make our application run and we are not going to also give to the user a framework on top of that. This makes the size of Svelte apps to be much, much, much smaller than apps created with React or Vue.js. This to-do application implemented in

Svelte only weighs 3.6 kilobytes. The same to-do application implemented in React.js weighs more than 45 kilobytes. Svelte applications are also faster than Vue and React applications as you can see here; they are almost as fast as raw

vanilla JavaScript. As this Svelte website says, Svelte is basically as fast as vanilla JS, which makes sense because it is vanilla JS, just vanilla that you did not have to write. It's also because of this compiler that Svelte doesn't use something called

virtual DOM. Virtual DOM is a representation of the UI of your application that React.js keeps on memory and that is synced from time to time with the real UI that the user is looking at. And this allows React.js to find the elements that need to be

refreshed to show the changes in the UI back when React.js was released. Keeping a copy of the UI in memory to check for state changes was something that no other frameworks were doing back then. Whereas, according to Svelte, there is no need to use virtual DOM anymore since

the compiler can generate more optimized JavaScript code that can refresh the UI in a faster way. I personally don't think that virtual DOM versus no virtual DOM is something we should focus on. There are some frameworks out there that are faster than Svelte, like for example

Inferno, and they use virtual DOM. So instead, let's move on to our next point: why do people like Svelte so much? I can't speak for everyone, but based on my own experience between using Svelte and React.js, and by reading the comments online, I would say that the biggest

reason for the love is the developer experience. I actually enjoyed working with Svelte compared to React.js or Vue.js. I can really say that it feels like the people making Svelte actually care about the developers using Svelte. They care about the developer experience, which is

super nice to feel. Also, it's very intuitive and very easy to learn if you already come from React or Vue.js. I would say the feeling is very similar to what you might feel if you are a Java developer and you are used to all these

rules and all these concepts and all those things, and then you come to Python and you see the syntax and how clean it is and how few rules there are. To show you what I mean, let's build a tiny click counter with Svelte as well. The component is

composed of three parts: one is the script tag, the other one is the style tag, and below those you can write whatever HTML you want. If you're a view developer, I am sure that this will look familiar to you. Now in the style tag, of course, we write the styles of our

components. As you can see, it's pretty intuitive already. We know where to put our logic, we know where to put our styles, we know where to put our HTML. Now it's time for the logic. I want to make a variable that will hold the value of the

amount of clicks, and I want to show that value to the user. So we create a normal JavaScript variable inside of the script tag, and we also include it in our HTML, making use of curly braces. Now I want to make a function that increases the number of clicks every time it runs. Now

we have to say that we want this function to run every time our user clicks on the button in our HTML, and we do this by doing this. And we are done! We just built a counter with Svelte. As you can see, the code is super easy to read. Anyone with a basic

level of HTML, CSS, and JavaScript is going to understand what is going on. And unlike with React, we didn't have to learn concepts like hooks or state beforehand to show you what I mean by nice developer experience. Let's now modify our example a little bit to only

allow the user to click one time. Right now, the user can click an unlimited amount of time. So to fulfill the requirements, we might be inclined to write some code on the script tag, but in Svelte, we don't have to. Instead, we just add the 'once' event modifier to our

button and just by doing this as Svelte will run the increase click function just once and never again. This is what I mean when I say nice developer experiences; Svelte is full of these tiny little things that will save you time as a developer. Another example of these are

bindings. They make it super easy for you to get input from the user. To build a simple Hello World with the name of the user, all we have to do is create a variable on the script tag along with an input and an h2. And then in our input, we

bind or connect, which is what binding sort of means, the value of the variable with the value of the input. And that's it. That's how easy it is to capture input and show it to the user using Svelte. As you can see in our example, if

the user doesn't write anything on the input, it just says hello with an exclamation mark. It looks kind of weird. Why don't we instead hide the text using if/else to add the if/else in Svelte? All we have to do is this. Now, as you can

see, the syntax looks a little bit different, but it's pretty easy to read. As you can see, Svelte has these tiny little things like bind or ones that save us time in doing tasks that we would usually implement just doing code by hand in React.js.

Tasks so common as getting input from the user, as you can see, don't take as much time to build as if it was in React. Also, as you can see, the code is very readable, even for somebody looking at it for the first time. So now it's time to

Talk about who should learn Svelte. I think that if you are a React.js or a Vue developer and you don't really enjoy your work anymore, you're tired of React, you're tired of Vue, and you want something more simpler to use and more

different, and you want something to refresh your eyes, then I think Svelte is a very good choice. If you are already productive in React.js or Vue.js, I am sure that just by following the tutorial on the Svelte website, which by the way is

an amazing tutorial, it will take you less than a couple of days to feel productive in Svelte. But if you are a beginner and you're looking for something that will give you a job, I think that in this area React.js wins. Per week, React.js has been downloaded more

than 14 million times, this compared with Vue.js that is downloaded more than 3 million times, compared with Svelte that is downloaded only 200,000 times. I'm not saying that you should learn something because it's popular. What I'm saying is that

sometimes popularity also means a big community, more packages, more frameworks, more tools, more best practices, and more importantly, more jobs. I think that React is so stable and so widely used, and this is why we have frameworks now built on top of React like Next.js and Gatsby, which are a

complete joy and pleasure to use. They also have super huge communities behind them and are used by some of the biggest companies in the world like, for example, TikTok web is built using Next.js, which by the way, this just reminds me that we just finished recording

uploading and subtitling in Hangul a free two and a half hour course in Next.js for beginners. So if you're wondering what I mean when I say Next.js is awesome and so enjoyable to use, then please take that course. It's for free.

And you are going to find out what makes Next.js so special that makes developers and big companies like it and use it so much. This Svelte also has its own framework and it's called SvelteKit which I tried and I really liked, but it's still

in beta and even though people are already using it in production, this shows you a little bit about how young this Svelte community is. Now as you can see, so far my problems with Svelte are not problems with Svelte as a tool. I think the tool is great and I like using

it and as you saw before it makes doing things very, very simple. It's good, but my problems are basically with the context or the point in time where the tool is. All these things can change. The community can grow. There can be more jobs. Maybe companies will adopt Svelte.

Maybe they're going to be more tutorials, more packages, more tooling, who knows? But it's also important to remember that the JavaScript ecosystem has stabilized a lot. Developers have mostly settled down with their own tools and what they like, and companies also don't really change

libraries or frameworks that often, or almost never. But there is something that sort of bothers me about recommending Svelte for beginners, and that is how magical it is. As usual, before Svelte has these nice things like $ or bind that are literal magic, or you see that the

way that they handle if and else are very spell specific they are not syntax that we are used to and we have seen before one of the reasons why I like and recommend React so much is that by learning and working with React and the tools in the ecosystem I became a better

JavaScript developer overall React in my opinion has less magic than Svelte and I think that when learning to code magic can hurt you more than it can help you for example when showing a list of items to a user in React you would use a function called map which is not

specific to React and if you learn it it will help you everywhere you go in the JavaScript world in Svelte to do the same thing you will have to write something like this which is not ugly I understand it is very readable and I would say is more

clear than map is and I'm not saying that one is better than the other but I'm saying that one is more pure functional JavaScript and the other isn't and I personally prefer to be as close to the language as possible I feel like if the tools that we use are again as

close to the language as possible if that tool that we are using goes away tomorrow we are not going to lose as much knowledge as we would do if we learn specific syntax if we learn specific magic tricks and then if that tool goes away all that is lost Picasso

said that you have to learn the rules like a pro so you can break them like an artist now he clearly learned the rules like a pro if you look at some of his early work you can tell that he knew the rules very very well I feel like

React.js is a tool that puts food on the table and I really feel like Svelte is art. I just don't think that beginners should start with Svelte. I feel like we have to learn the rules first so then we can break them now I

know what you think on the comments, let me know what are your opinions on Svelte. Have you seen it before? Have you tried it? Was this the first time? Are you curious? Are you going to look into it? Let me know everything I want to know.

I'm going to be reading the comments right now. Thank you as always for watching this video and don't forget if you want to learn Next.js and see why so many people like Next.js, including this guy right here, then please check the link on the description. It's a free two

hour and a half Next.js course that's going to show you the best and most shiny parts about this awesome framework. Thank you for watching. Stay happy, stay free, eat kimchi, come see me, stay healthy, bye.

앞으로 대세는 스벨트? 10분 완벽 정리해드림.

한국인 린과 콜롬비아인 니꼴라스의 프로젝트 "노마드 코더" 입니다.
2015년 떠나, 현재까지 원하는 곳에서 일하며, 살고 있습니다.
📌 니콜라스와 무료로 코딩 공부하기 : https://nomadcoders.co


노마드 코더 Nomad Coders

스벨트는 스택 오버플로 설문조사에서 가장 사랑받는 웹 프레임워크로 선정된 대화형 웹사이트 구축 도구입니다.

이 동영상에서는 Svelte가 무엇인지, 어떻게 작동하는지, React에 비해 어떤 장점이 있는지, 누가 배워야 하는지 살펴봅니다.

React나 Vue.js와 달리 Svelte는 라이브러리나 프레임워크가 아닌 컴파일러입니다.

React 및 유사한 프레임워크는 사용자가 애플리케이션 코드와 함께 프레임워크 코드를 다운로드해야 합니다.

Svelte는 코드를 일반 JavaScript로 컴파일하므로 사용자가 별도의 프레임워크를 다운로드할 필요가 없습니다.

스텔스 앱은 바닐라 자바스크립트에 비해 React 또는 Vue.js로 빌드된 앱보다 훨씬 더 작고 빠릅니다.

Svelte의 속도는 컴파일러와 가상 DOM이 없기 때문입니다.

연사는 가상 DOM이 없는 경우와 가상 DOM이 있는 경우의 중요성을 경시합니다.

Svelte의 인기의 주된 이유는 긍정적인 개발자 경험입니다.

Svelte는 직관적이고 배우기 쉬운 것으로 간주되며, 특히 React 또는 Vue.js에 익숙한 개발자에게 적합합니다.

Svelte 구성 요소는 스크립트, 스타일 및 HTML 섹션으로 구성됩니다.

간단한 클릭 카운터는 Svelte 컴포넌트 내에서 자바스크립트 변수와 이벤트 처리를 사용하여 생성됩니다.

'한 번' 이벤트 수정자를 사용하여 한 번만 클릭할 수 있도록 카운터를 수정합니다.

간편한 사용자 입력 처리를 위한 Svelte의 바인딩 예시입니다.

Svelte에서 if/else 문을 사용한 조건부 렌더링.

더 간단한 대안을 찾는 React/Vue 개발자에게는 Svelte를 추천합니다.

React.js는 더 큰 커뮤니티, 더 많은 직업 기회, 더 폭넓은 채택으로 인해 초보자에게 권장됩니다.

발표자는 Next.js와 같은 React 기반 프레임워크의 인기와 장점에 대해 언급합니다.

Svelte의 프레임워크인 SvelteKit은 아직 베타 버전입니다.

발표자는 '마법 같은' 측면 때문에 초보자에게 스벨트를 추천하는 것에 대해 우려를 표명합니다.

React(지도 함수 사용)와 Svelte의 처리 목록 비교.

발표자는 Svelte에 대한 자신의 의견을 요약하고 시청자에게 자신의 의견을 공유하도록 독려하며 마무리합니다.

무료 Next.js 강좌를 홍보합니다.