정보실

웹학교

정보실

javascript Svelte vs React : 첫인상

본문

0*_uJb2fuCWjniWe2r 


https://medium.com/javascript-in-plain-english/svelte-vs-react-first-impression-1ce5d3ee6889 


3 년 전 Rich Harris는 Svelte라는 프레임 워크를 만들었습니다. 새로운 프레임 워크에 대한 가장 큰 영향은 ReactJS, VueJS 또는 AngularJS와 같은 Virtual DOM에서 작동하지 않는다는 것입니다.


Svelte와 React에서 정확히 동일한 할 일 목록 응용 프로그램을 만들었습니다. 내가 정확히 의미하는 것은 기능이나 가시성 뿐만 아니라 타사 라이브러리를 사용하지 않았으며 내부 API를 사용하여 작동 중인 응용 프로그램을 관리하는 것입니다.


우리의 할일 응용 프로그램은 항목을 추가하고 제거하는 목록을 가지고 있습니다. 각 항목은 전역 상태로 저장됩니다. 또한 글로벌 스토어를 구독하고 변경 될 때마다 현재 값을 표시하는 구성 요소가 있습니다.


Svelte와 React 소스 코드는 모두 github에 있습니다.

1*tu3_hjnpehxepgiReL9spA.gif 


SvelteJS 


$ npx degit sveltejs/template svelte-todo-list 


Svelte에 대한 간략한 정보 

  • 가상 DOM이 아닌 DOM에서 작동
  • Svelte 파일의 확장자는 .svelte입니다.
  • svelte 파일로 작성된 각 <style> </ style>의 범위는 CSS입니다.
  • 내부 상점(store) API를 사용할 수 있습니다. 외부 라이브러리를 설치할 필요가 없습니다
  • 기본 구성으로 롤업으로 빌드합니다. 그러나 Parsel 및 Webpack을 사용할 수도 있습니다.
  • 모든 변수를 쉽게 구독 할 수 있지만 배열 변이를 탐지하는 해키 방법이 있습니다. (내가 싫어했던 것)
  • html 파일을 작성하는 것처럼 svelte 파일에 javascript, html 및 style을 모두 작성할 수 있습니다. (약간의 차이가 있습니다)
  • <button on:click = {} />와 같이 on : 접두사를 사용하여 DOM 이벤트에 액세스합니다.
  • 자녀에서 부모에게 콜백을 전달할 필요가 없습니다. createEventDispatcher를 사용할 수 있습니다.
  • {#}으로 블록을 시작하고 {#if}… {/if}와 같은 {/}로 끝납니다

ReactJS 


$ npx create-react-app react-todo-list 


ReactJS에 대한 간단한 정보 

  • 가상 DOM과 함께 작동
  • Context API라는 React의 내부 글로벌 상태 관리를 사용할 수 있습니다
  • 당신은 순수하게 자바 스크립트를 작성합니다, 당신은 Svelte (#if, #each…)처럼 React에 특별한 블록 요소 구문을 가지고 있지 않습니다
  • DOM 이벤트는 자바 스크립트 이벤트 일 뿐이므로 순수 자바 스크립트로 작성된 방식과 마찬가지로 onClick을 사용할 수 있습니다.
  • 파일 확장자는 .js입니다

일부 코드 비교 


Svelte와 React의 주요 요점을 비교해 봅시다.


App.svelte 


<script>
import TodoHeader from "./TodoHeader.svelte";
import TodoList from "./TodoList.svelte";
import { itemStore } from "./store";
</script>


App.js 


import React from 'react';
import './App.css';
import { TodoHeader } from './TodoHeader';
import { TodoList } from './TodoList';
import { TodoListProvider } from './store';
import { Total } from './Total';


앱 파일은 두 프레임 워크 모두의 진입 점입니다. 둘 사이에는 큰 차이가 없으며 렌더링 할 구성 요소가 있습니다.

유일한 차이점은 여기서 글로벌 스타일 바인딩입니다.

React에서 React.ContextAPI의 래퍼 구성 요소는 모든 자식의 부모인 반면 Svelte에서는 전역 상태에 대한 래퍼가 필요하지 않습니다.


svelte/store.js 


import { writable } from "svelte/store";


react/store.js 


import React, { useState } from 'react';


이 두 store는 같은 일을 합니다. store 데이터를 변경하는 두 가지 조치 방법이 있습니다. 그러나 React에서 Context API를 사용하고 Svelte와 같은 구조를 만드는 것은 다소 고통스럽습니다. 위의 예에서 볼 수 있듯이 처음에는 createContext에서 Context를 만들었으며 Provider에서 후크를 사용하여 값을 로컬로 저장해야 했습니다. Svelte에서는 상황이 더 간단합니다. 쓰기 가능한 저장소를 만들고 값을 초기화하고 동작으로 값을 반환하면 됩니다.


svelte/TodoList 


<script>
import { itemStore } from "./store";
const handleRemoveItem = item => {
itemStore.removeItem(item);
};
</script>


react/TodoList 


import React, { useContext } from 'react';
import { TodoListContext } from './store';


첫 번째 Svelte 응용 프로그램을 작성하게 된 것은 구성 요소에서 조건과 루프를 사용하는 것이었습니다. 루프 또는 조건에 대해 또 다른 순수한 자바 스크립트 구문을 사용하면 내가 싫어하는 것입니다. 그러나 가져오기 만으로 store 항목에 액세스하고 글로벌 store에 액세스하기 위해 외부 후크 또는 계층이 필요하지 않은 것은 Svelte와 React의 주요 차이점입니다.


svelte/TodoHeader 


<script>
import { onMount } from "svelte";
import { itemStore } from "./store";
let value;
onMount(() => {
value = "";
});
const handleAddItem = () => {
itemStore.addItem(value);
value = "";
};
</script>


react/TodoHeader 


import React, { useContext, useState } from 'react';
import { TodoListContext } from './store';


Svelte에서는 입력 값을 외부 상태로 저장할 필요가 없습니다. Svelte를 사용하면 기존 속성에 키워드를 쉽게 바인딩 할 수 있으며, 값에 대한 추가 노력 없이도 배열 선언이 아닌 반응형 선언으로 prop 변경 사항을 추적 할 수 있는 추가 기능을 제공합니다.


결과 


또한 개발 과정에서 직면 한 건축 과정, 어려움 및 편의성에 대한 몇 가지 결과를 공유하겠습니다.


둘 다 개발하면서 정확히 동일한 패턴을 따랐습니다. 외부 라이브러리를 사용하지 않았으며 내부 API의 두 프레임워크 지원만 사용했습니다. 전역 상태에 연결된 구성 요소가 있습니다. 전역 상태 변수에 가입 한 구성 요소가 있습니다.


Svelte ❤️에서 내가 좋아하는 것 


  • 건물은 정말 빠릅니다. 그러나 이것은 롤업을 번들러로 사용하기 때문일 수도 있습니다 .Webpack과의 번들링을 테스트하는 것이 좋습니다.
  • 다시 번들 크기는 React에 비해 작습니다. 그러나 이것은 롤업의 트리 쉐이킹 성능 때문일 수도 있습니다.
  • store 사용이 정말 유연합니다. store 내에서 구성 요소를 적용하고 store 값을 쉽게 구독 또는 변경하기 시작할 수 있습니다. ❤️
  • 구성 요소로 작성된 모든 스타일의 범위는 CSS였습니다.
  • 조건부 스타일을 바인딩하면 구문이 간단하여 클래스 바인딩을 위한 논리를 만들 필요가 없습니다. (클래스 : disabled = variable)

내가 Svelte에서 싫어하는 것 💔 


  • #each, #if와 같은 파일에 템플릿을 쓰는 것을 정말로 좋아하지 않습니다. JavaScript로 순수하게 할 수 있는 새로운 접근 방식을 선호하지 않습니다.
  • 반응형 선언을 사용하여 변수 변경을 구독하면 Svelte는 배열에서 변이를 탐지 할 수 없습니다. Svelte는 그러한 상황에 해킹 방법을 제공합니다.
  • 일부 개발자는 구성 요소에 템플릿을 작성하는 것을 좋아할 수 있지만 여전히 내가 싫어하는 것입니다. 또한 이 접근법은 항목 1에서 언급 한 루프, 조건 등에 대한 템플릿을 사용합니다.
  • 목록의 각 항목에 대해 고유 한 ID를 제공해야 합니다. 그렇지 않으면 목록의 항목에 대해 조치를 취하려고 할 때마다 잘못된 항목이 적용될 수 있습니다.
  • on : click과 같은 DOM 이벤트의 사용 스타일은 내가 싫어하는 것 중 하나 입니다. onClick을 일반적인 DOM 이벤트로 사용하는 것을 선호합니다.

생산 빌드 비교 


SvelteJS는 기본적으로 Rollup 및 ReactJS Webpack을 사용하며 구성을 건드리지 않았습니다. 기본 구성이 모두 있습니다. 단절된 건설 시간은 1.40 초이며 React는 5.49 초입니다. 여기에 Svelte가 이깁니다! ❤️


1*B3qoFX4_7GL8b8tk7ZII7g.png 


두 응용 프로그램은 npm 패키지를 제공하여 서버입니다. Svelte는 번들을 공용 폴더로 내보내고 React 앱은 빌드 폴더에 번들을 넣습니다.

serve -s build // this is for react app
serve -s public // this is for svelte app 


네트워크 탭을 확인하면 Svelte의 번들은 gzip 이후 2.9KB에 불과하지만 React의 번들은 gzip 이후 42.1KB에 불과합니다. 여기 다시 생산에 번들 크기와 함께 날씬한 ❤️


1*iXVrLdeuUspHq7tcCaFhgA.png 



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 14회 ]  작성일19-10-30 20:27

웹학교