Svelte를 학습하여 응용 프로그램에 사용해야 하는 이유입니다.
20407 단어 developmentfrontendsveltejavascript
"새로운 JavaScript 프레임워크가 갑자기 생기는 날이 없어요". 누군가일 수도 있어요.
새로운 개발자로서 어떤 틀을 배워야 할지 결정하기 전에 당신은 매우 어려움을 느낄 수 있습니다.하지만 나를 믿어라, 예전에는 상황이 더 나빴다.
이제 세 가지 주요 프레임워크만 실행되지 않습니다.
Angular(구글 개발)
React(Facebook에서 개발)
Vue(커뮤니티 드라이브)
...날씬하지 않아요.
"Svelte는 새로운 사용자 인터페이스 구축 방법입니다. React와 Vue 등 전통적인 프레임워크의 대부분 작업은 브라우저에서 이루어지지만, Svelte는 이러한 작업을 컴파일 절차로 전환합니다. 이것은 응용 프로그램을 구축할 때 발생합니다."Official Svelte Website
Svelte는 자신이 "전통적인"JavaScript 프레임워크라고 생각하지 않는다. 이것은 충분한 이유가 있다.
Svelte는 컴파일러입니다.
이것은 코드를 일반적인 JavaScript로 변환하여 브라우저에서 실행합니다. 다른 의존 항목이 없습니다.이로 인해 Svelte는 React, Vue, Angular와 다른 프레임워크와 근본적으로 다르다.
(Svelte의 창시자) 지금부터 프레임워크는 어떻게 구축해야 한다고 생각합니다.
컴팩트한 어플리케이션은 실행 속도가 빠르고 로드 속도가 빠르며 번들 크기가 매우 작습니다.
..아이고, 책을 많이 읽었네.이제 원인 목록으로 넘어가서 예쁜 코드를 읽어봅시다:)
1. 날씬하고 배우기 쉽다.
다음 예제를 고려하십시오.
<script>
let count = 0;
const increment = () => count += 1;
const decrement = () => count -= 1;
</script>
<div class="counter-component">
<p>The count is {count}!</p>
<button on:click={increment}>Increment +</button>
<button on:click={decrement}>Decrement -</button>
</div>
<style>
.counter-component {
font-family: Arial;
padding: 15px;
}
</style>
슬림형 구성 요소는 다음과 같습니다.
코드는 표현력이 뛰어나고 노력을 많이 하지 않아도 그 기능을 이해할 수 있다.
2. 견본이 부족하다.
이것은 첫 번째 원인과 밀접한 관계가 있다.위의 예에서 보듯이 우리 어셈블리에는 템플릿 파일이 절대 없습니다.
스웨트가 엔진 뚜껑 아래에서 한 일 때문에, 모든 것이 신기하게 일했다.
다음은 React의 동일한 예입니다.
import React, { useState } from "react";
const Counter = () => {
const [ count, setCount ] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return(
<div style={{
padding: "15px",
fontFamily: "Arial"
}} className="counter-component">
<p>The count is {count}!</p>
<button onClick={increment}>Increment +</button>
<button onClick={decrement}>Decrement -</button>
</div>
);
}
export default Counter;
어떤 견본 문서도 처리할 필요가 없기 때문에 개발자의 체험을 크게 향상시킬 수 있다.
이것은 당연히 Vue와 Angular에 적용됩니다.Vue의 템플릿은 Svelte의 기본 설정과 유사하지만 특정 구문을 사용하여 방법, 도구, 상태를 정의하도록 강제합니다.이것이 바로 나의 다음 점을 끌어냈다.
3. 날씬한 것은 자신의 의견을 고집하지 않는다.
방법을 정의하는 방법, 상태를 업데이트하는 방법 등에서 Svelte는 특별한 문법을 사용하지 않습니다.
Svelte는 소수의 구문 규칙만 있고 일반적인 JavaScript일 뿐입니다.
<script>
let name = 'John Doe';
</script>
<p>Hello {name}!</p>
<script>
// The "name" property can now be passed down from a parent component.
export let name = 'John Doe'; // We can also optionally assign a default value.
</script>
<p>Hello {name}!</p>
<script>
let count = 0;
const reset = () => count = 0;
</script>
<p>The count is {count}</p>
<button on:click={reset}>Reset Counter</button>
<script>
let count = 0;
$: count_squared = count * count;
</script>
<p>The count is {count}</p>
<p>The count squared is {count_squared}</p>
4. Svelte는 깔끔한 템플릿 문법이 있습니다.
날씬한 틀은 읽기 쉽다.예전의 경험이 없어도 무슨 일이 일어났는지 알 수 있다.
<script>
let name = 'John Doe';
</script>
<p>Hello {name}!</p>
<script>
let name = 'John Doe';
</script>
<!-- My Epic Comment -->
<p>Hello {name}!</p>
<script>
let condition = 1;
let name = 'John Doe';
</script>
{#if condition === 1}
<p>Hello {name}!</p>
{:else if condition === 2}
<p>Hi {name}!</p>
{:else}
<p>Howdy {name}!</p>
{/if}
<script>
let users = [
{
name: 'John Doe',
age: 53,
},
{
name: 'John Does',
age: 55,
},
{
name: 'John Does Not',
age: 60,
},
];
</script>
{#each users as user, i}
<p>{user.name} is {user.age} years old.</p>
{/each}
<script>
const clickHandler = (e) => alert('I was cliked!');
</script>
<button on:click={clickHandler}>Click to Alert</button>
<script>
let text_value = '';
const clickHandler = (e) => alert(text_value);
</script>
<input type="text" bind:value={text_value} />
<button on:click={clickHandler}>Click to Alert Value</button>
5, 작은 크기로 매우 빠른 어플리케이션 속도.
앞에서 보듯이 Svelte는 하나의 프레임워크가 아닙니다.이것은 컴파일러다.이것은 코드를 컴파일한 후에 그것과 아무런 관계가 없다는 것을 의미한다.
코드는 독립적이며 다른 의존항은 포함되지 않는다.
React, Angular, Vue에 비해 슬림한 어플리케이션은 매우 작습니다.
개인적으로 묶음 규모에 대해 기준 테스트를 한 경험에 의하면...
규모와 기능이 모두 큰 응용 프로그램에서 나는 약 8배의 축소를 겪었다.
물론 프로젝트의 수량은 다르지만 소형 응용 프로그램은 보통 다른 프레임워크의 총 묶음 규모의 일부분에 불과하다.
캡처 맨
조작/초는 날씬한 확정 지표를 더 잘 고려하는 것은 아니지만 여전히 매우 중요하고 사용자 체험을 현저하게 개선시켰다.그러나 위의 기준에서 더 재미있는 것은 점수 아래에 열거된 라이브러리 크기이다.
Stone.co 같은 회사, 많은 러시아와 인도 회사, 스마트 텔레비전 제조업체 및 기타 회사들이 바로 이 때문에 Svelte를 사용한다.
그들이 생산하는 저전력 제품은 React, Angular, Vue 등 프레임워크를 실행할 능력이 없다.인상적인 속도 때문에 날씬하고 빛나는 곳이다.
저전력 설비는 날씬함의 유일한 하이라이트가 아니다.그것은 매우 작은 사이즈로 사용자 체험을 크게 개선했고 그 속도 때문에 응용 프로그램이 어떠한 하드웨어에서도 민감하고 민첩하며 민첩함을 확보할 수 있었다.
GoDaddy와Sucuri 같은 미국 회사들은 그들의 기술 창고에도 작은 회사들이 있다.시간의 추이에 따라 이 목록은 점점 커질 뿐이다.
6. Svelte는'진정한 반응형'
React에서 이 옵션을 사용합니다.setState () 또는useState () 의 적당한 setter로 상태를 업데이트하고 다른 프레임워크는 유사한 문법을 사용합니다.
상태를 업데이트할 프레임워크를 고의로 지정해야 한다면 이것은 반응성이 아닙니다.
말 그대로반응은 매우 나쁜 반응이다.
Svelte는 모든 유형의'상태 업데이트'중간부품을 삭제함으로써 이 문제를 해결하고 분배에만 의존하여 상태 변화를 측정합니다.
상태 변수에 새 값을 할당할 때마다 업데이트가 자동으로 트리거되므로 진정한 반응성입니다.
7. 날씬함을 배우기 전에 기억해야 할 것.
날씬함은 하나의 틀이니, 나는 모두가 공부하도록 격려한다.
제 개인적인 경험에 의하면 대부분의 프로젝트에 있어서는 React, Vue 또는Angular보다 더 좋습니다.
Svelte의 형 Sapper를 사용하여 라우팅, 서버 측 렌더링, 코드 분할 등의 기능을 통해 "군사급 웹 응용 프로그램"대형 웹 응용 프로그램을 구축할 수 있습니다.이제 어떡하지?js가 반응할 것이다.
만약 네가 취직을 배우고 있다면, 날씬함은 아마도 가장 좋은 선택이 아닐 것이다.지금까지
앞서 말씀드린 바와 같이 시장은 현재 React, Vue, Angular가 주도하고 있습니다.
이 프레임들은 다음과 같은 이유로 더 오래 머무를 것이다.
하지만 우리만 개발자가 최종적으로 무엇을 결정하는 것이 가장 중요합니까?따라서 Svelte를 배우고 다음 기회에 응용 프로그램을 만드는 것이 좋습니다.
8. 날씬한 자원을 배우기
날씬함을 배우는 데는 좋은 자원이 많다.만약 다른 프런트엔드 프레임워크에 대한 경험이 있다면, 오후에 Svelte를 배울 수 있습니다.네, 정말 간단해요.
Offical Svelte Tutorial-Svelte의 공식 강좌는 모든 것을 설명하고 실시간 코드 편집기를 포함한다.
The Svelte Documentation - 프레임에 대한 모든 내용입니다.
- 기초 지식을 습득하여 30분 안에 기본 응용 프로그램을 구축합니다.
- 날씬한 개념은 빠르게 해석된다.
<script>
let count = 0;
const increment = () => count += 1;
const decrement = () => count -= 1;
</script>
<div class="counter-component">
<p>The count is {count}!</p>
<button on:click={increment}>Increment +</button>
<button on:click={decrement}>Decrement -</button>
</div>
날씬해. 진짜.날씬했어
읽어주셔서 감사합니다!
Reference
이 문제에 관하여(Svelte를 학습하여 응용 프로그램에 사용해야 하는 이유입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/demonicious_/why-you-should-choose-svelte-for-your-application-a-basic-introduction-275f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
