2020 년 프런트 엔드 개발을위한 상위 5 개의 In-Demand JavaScript 프레임 워크

최신 JavaScript 프런트 엔드 개발을위한 상위 JavaScript 프레임 워크의 심층 분석 및 순위 지정

Unsplash에 Judi Neumeyer의 사진

오래 전에 소프트웨어 엔지니어는 JSP / JSF, Ruby On Rails, PHP Laravel, Django 와 같은 서버 측 MVC 웹 프레임 워크 를 사용하여 웹 애플리케이션을 개발했습니다. 이 표는 JavaScript 기반 클라이언트 측 웹 개발 프레임 워크 인 Knockout.js , Backbone.js 및 특히 AngularJS 가 시나리오에 등장 했을 때 2010 년에 전환되었습니다 . 현재 JavaScript 기반 웹 프레임 워크가 프런트 엔드 개발 환경을 지배하고 있으며 추세는 계속 될 것입니다.

프론트 엔드 개발에서 경력을 시작하고 싶거나 숙련 된 JavaScript 개발자이고 이제 기술 능력을 높이고 싶다면 어떤 프레임 워크를 배워야합니까? 또는 조직이 마침내 프런트 엔드 스택을 현대화 할 계획이라면 어떤 JavaScript 프레임 워크를 선택할까요?

대답은 까다 롭습니다. 첫째, 시장에 자바 스크립트 기반 웹 개발 프레임 워크가 너무 많습니다. 매년 새로운 자바 스크립트 프레임 워크가 많은 팡파르와 함께 시장에 합류하고있는 반면 다른 자바 스크립트 프레임 워크는 앞으로 나오고 있습니다. 1 년 안에 새로운 자바 스크립트 프레임 워크가 눈에 띄는 것은 내년에 사라질뿐입니다.

여기에서는 주로 현대적인 프런트 엔드 개발에 진입하려는 구직자 및 JavaScript 개발자 를 위한 5 가지 JavaScript 프레임 워크를 나열 합니다. 또한 조직이 단일 페이지 애플리케이션 프로젝트에 적합한 프레임 워크를 선택할 수 있도록 이러한 프레임 워크의 개요와 순위를 제공합니다 . 목록과 순위를 매기는 데 사용한 기준은 다음과 같습니다.

  • 프레임 워크는 이미 업계에서 확립되어 있으며 기업과 커뮤니티에서 채택하고 있습니다.
  • 그들이 매우 인기있는 잘 설립과 평판이 소식통에 따르면 (GitHub의, NPM 동향)
  • 그들은되는 백업 일부 대기업이나 산업.
  • 그들은 크고 활기찬 커뮤니티를 가지고 있습니다 .
  • 그들은 훌륭한 도구와 라이브러리를 가지고 있습니다.
  • 그들은 취업 시장에서 높은 수요를 가지고 있습니다 (Indeed.com).
  • 프레임 워크는 수명주기끝나지 않고 느린 죽음을 기다리고 있습니다 (예 : jQuery, AngularJS, Knockout.js)
  • Preact, Next.js, Nuxt.js와 같은 메타 프레임 워크아닙니다.
출처 : React

서버 측 프런트 엔드 프레임 워크는 AngularJS와 같은 초기 JavaScript 프런트 엔드 프레임 워크에 큰 영향을 미쳤습니다. 이 모든 프레임 워크는 MVC (Model-View-Controller) 패턴 또는 그 변형 (MVVM, MVW)을 사용했습니다 .

2013 년에 Jordan Walke 가 이끄는 젊은 Facebook 엔지니어 그룹은 프런트 엔드 개발에서 MVC 프레임 워크와 양방향 데이터 바인딩에 의문을 제기했습니다. 그들은 단방향 데이터 흐름 을 사용하는 컴포넌트 기반 웹 프레임 워크 로 프런트 엔드 라이브러리 React를 개발했습니다 . 또한 이벤트 소싱, 선언적 프로그래밍, 불변 상태 와 같은 프런트 엔드 개발에 몇 가지 다른 백엔드 패턴을 도입했습니다 .

React의 또 다른 주요 참신함은 Virtual DOM 을 도입하는 것이 었습니다 . DOM 조작은 무거운 작업이므로 메모리에 가상 DOM을 유지하고 Batch에서 Virtual DOM과 실제 DOM 간의 차이 만 업데이트합니다. 따라서 React는 고도로 상호 작용하는 웹 페이지에서 훨씬 더 나은 사용자 경험을 제공했습니다.

React는 현재까지 가장 파괴적인 프런트 엔드 프레임 워크 이며 다른 JavaScript 기반 프런트 엔드 프레임 워크에 큰 영향을 미쳤습니다.

오늘날 React는 프론트 엔드 프레임 워크 중 800 파운드짜리 Gorilla 와 같습니다 . 또한 이전 기사 중 하나에서 React를 최고의 JavaScript 기반 웹 개발 프레임 워크로 꼽았습니다.

5 가지 주요 기능 :

  • React-Core는 View 레이어를위한 컴포넌트 기반 라이브러리입니다 . 비즈니스 애플리케이션을 구현하기 위해 라우팅, 상태 관리, 스타일링, 개발에 추가 반응 라이브러리가 사용됩니다. 이 목록에서 가장 의견이없는 프레임 워크입니다.
  • 모든 성공으로 React는 정체되지 않고 항상 개선하려고 노력하고 있습니다. Facebook은 더 나은 동시성을 위해 React-Fiber 프로젝트를 도입하여 React-Core를 개편했습니다 . React는 개선 된 렌더링 을 위해 상용구 코드를 제거하는 React hooksSuspense 를 도입했습니다 .
  • Facebook은 모든 힘을 다해 React를지지하고 있습니다 . Angular가있는 Google과 달리 Facebook은 모든 애플리케이션에서 React를 사용하고 있습니다. 결과적으로 Facebook 기능은 테스트를 거쳤습니다. 또한 탁월한 툴링 지원을 제공합니다.
  • React는“한 번 배우고 어디서나 쓸 수 있습니다.” 라는 모토가 있습니다. Facebook의 크로스 플랫폼 모바일 앱 개발 플랫폼 인“ React Native” 는 React를 기반으로합니다. React는 데스크톱 앱 (Electron 사용) 및 백엔드 개발 (Node.js 사용)에도 사용할 수 있습니다. 따라서 개발자는 웹, 모바일, 데스크톱 및 백엔드에서 동일한 React 구성 요소를 사용할 수 있습니다.
  • React는 우수한 SEO 지원과 함께 동급 최고의 SSR ( Server-Side Rendering)을 제공 합니다.
  • 번호 하나의 웹 개발 프레임 워크 아래로 손.
  • React는 웹, 모바일, 데스크톱 및 백엔드 개발에서 사용할 수 있습니다.
  • 기술 대기업 Facebook이 지원하는 React 기능은 2 억 3700 만 명의 Facebook 사용자를 대상으로 먼저 테스트되었습니다 .
  • React는 종단 간 프레임 워크가 아닙니다. 적절한 유형의 애플리케이션에 적합한 유형의 라이브러리를 선택하려면 팀에 React 전문가가 필요합니다.
  • React 번들 크기는 상대적으로 크고 DOM 렌더링 성능은 다른 프레임 워크에 비해 상대적으로 느립니다.
  • 많은 함수형 프로그래밍 패러다임으로 인해 학습 곡선이 보통입니다.

React는 NPM 다운로드 트렌드에서 볼 수 있듯이 가장 인기 있고 가장 많이 사용되는 프런트 엔드 프레임 워크입니다.

출처 : NPM 동향

GitHub에 따르면 두 번째로 많은 기여자가있는 두 번째로 많은 별표를받은 웹 프레임 워크입니다.

출처 : GitHub

StackOverflow 개발자 설문 조사에서는 React를 두 번째로 많이 사용되는 웹 프레임 워크로 선정했습니다.

출처 : StackOverflow 개발자 설문 조사, 2019 년

“The State of JavaScript”설문 조사에 따르면 React는 만족도와 인식 측면에서 1 위를 차지했습니다.

출처 : The State of JavaScript, 2019

StackOverflow 개발자 설문 조사에 따르면 React는 가장 사랑받는 프런트 엔드 프레임 워크입니다.

출처 : StackOverflow 개발자 설문 조사, 2019 년

React의 1 위 위치는 여전히 React에 대한 관심이 증가함에 따라 정당화됩니다.

출처 : Google 트렌드

인력 시장

인기있는 구직 포털 인디 드 (Indeed) 를 사용하여 JavaScript 프레임 워크의 채용 공고 를 찾습니다. 또한 저는 미국에서만 채용 정보를 보여주고 있습니다. 따라서이 수치는 전 세계를 반영하지는 않지만 현재로서는 여전히 프런트 엔드 프레임 워크에 대한 수요를 보여줍니다.

인기와 마찬가지로 React는 아래와 같이 USA Job 시장을 지배합니다.

출처 : Indeed

오탐을 제거하고 정확한 수치를 얻기 위해 " 반응 (프로그래밍 또는 개발자 또는 프런트 엔드 또는 소프트웨어 또는 ux 또는 ui) -reactive -reactor jobs"라는 검색어를 사용했습니다.

2. Vue.js

출처 : Vue.js

Facebook이 React를 출시했을 때 즉각적인 히트작이었습니다. 갑자기 Google은 Angular JS (Angular 1)가 React에 비해 구식이고 잘못 설계되었음을 발견했습니다. 그런 다음 Google은 AngularJS를 버리고 Angular (Angular 2)를 출시했습니다. 그러나 한 Google 소프트웨어 엔지니어 Evan You 는 다르게 생각하고 AngularJS (뷰 레이어)의 좋은 부분과 React (Virtual DOM)의 좋은 부분을 결합 하여 2014 년에 새로운 JavaScript 프레임 워크 인 Vue.js를 만들었습니다 .

두 개의 가장 큰 테크 자이언트 인 구글과 페이스 북 에 도전하는 것은 쉬운 일이 아니 었습니다 . 하지만 그 이후로 Evan You는 훌륭한 일을했습니다. 현재 Vue.js는 가장 인기 있고 사랑받는 JavaScript 프레임 워크 중 하나입니다. 또한 Angular, React 및 혁신의 많은 좋은 부분을 성공적으로 결합했습니다.

여러면에서 Vue.js는 Angular와 React 사이의 중간 경로를 제공합니다 . React와 같은 뷰 레이어로만 사용하거나 라우팅, 상태 관리를 사용하는 End-to-End 프레임 워크로 사용할 수 있습니다. 또한 데이터 바인딩 (반응성 포함)과 같은 Angular 및 Virtual DOM을 사용한 렌더링과 같은 React를 제공합니다.

거대한 커뮤니티 지원과 많은 혁신, 특히 버전 3에서 Vue.js는 더 강해지고 React와 함께 최고의 자리를 차지할 것입니다.

5 가지 주요 기능

  • Vue.js의 주요 디자인 목표는 진보적 인 앱 개발을 제공하고 동급 최고의 문서를 제공 하여 JavaScript 프런트 엔드 개발의 장벽낮추는 것이 었습니다 . 대규모 JavaScript 코드베이스가있는 경우 Vue.js를 사용하여 코드베이스를 점진적으로 현대화 할 수 있습니다.
  • Angular 또는 Ember.js와 마찬가지로 Vue.js는 Vue.js CLI를 사용한 엔드 투 엔드 애플리케이션 개발도 제공합니다. 또한 외부 데이터 흐름 및 상태 관리와 함께 컴포넌트 기반 프레임 워크와 같은 React를 제공합니다. 의심 할 여지없이 가장 유연한 JavaScript 프레임 워크입니다 .
  • 반응 형 양방향 데이터 바인딩 (예 : Angular) 및 Virtual Dom, Event Sourcing (예 : React)을 지원 합니다.
  • Vue.js는 업계에서 6 년이 지났으며 수많은 라이브러리, 도구 및 프레임 워크를 보유하고 있습니다. 예를 들어 Vuex 는 상태 관리에 사용되고 nuxt.js 는 애플리케이션 프레임 워크로 사용됩니다. JavaScript와 TypeScript동등하게 지원 하는 드문 JavaScript 프레임 워크 중 하나입니다 .
  • 웹은 매우 빠르게 변화하고 있으며 Vue.js도 지속적으로 진화하고 있습니다. 최근 Vue.js는 성능이 크게 향상되어 곧 출시 될 Vue.js 3.0에서 TypeScript의 핵심 라이브러리를 완전히 다시 작성했습니다 .
  • Vue.js는 독자적인 엔드-투-엔드 프레임 워크와 상태 관리 기능이있는 뷰 레이어로 작동합니다 .
  • 더 빠른 로딩 시간과 더 작은 번들.
  • Vue.js는 진입 장벽을 최소화 한 훌륭한 문서를 가지고 있습니다.
  • 업계, 특히 대기업에서 여전히 대량 채택이 부족합니다.
  • Angular 또는 React와 같은 Tech Giant가 지원하지 않습니다.
  • 모바일 앱 개발에서는 광범위하게 사용되지 않습니다.

GitHub에서 Vue.js는 가장 인기있는 JavaScript 프레임 워크입니다.

출처 : GitHub

StackOverflow 개발자 설문 조사는 Vue.js를 모든 웹 프레임 워크 중 7 위로 선정했습니다.

출처 : StackOverflow 개발자 설문 조사, 2019 년

“The State of JavaScript”설문 조사에 따르면 Vue.js는 관심 분야에서 1 위를 차지했습니다.

출처 : The State of JavaScript, 2019

NPM 다운로드 측면에서 Vue.js는 3 위를 차지했으며 Angular와의 격차를 좁혔습니다.

출처 : NPM 동향

또한 2019 년 StackOverflow 개발자 설문 조사에서 두 번째로 사랑받는 웹 프레임 워크입니다.

출처 : StackOverflow 개발자 설문 조사, 2019 년

Google 트렌드는 또한 Vue.js에 대한 강한 관심을 반영합니다.

출처 : Google 트렌드

인력 시장

미국에서 Vue.js는 Indeed에 따르면 세 번째로 가장 까다로운 JavaScript 프레임 워크입니다.

출처 : Indeed

Vue.js가 가장 지배적 인 프레임 워크 인 아시아에서는 상황이 달라졌을 것입니다.

3. 각도

출처 : Angular

Google이 AngularJS를 출시했을 때 , 특히 양방향 데이터 바인딩 에서 엄청난 히트를 쳤습니다 . Facebook이 2013 년에 React를 출시하자 사람들은 즉시 AngularJS를 떠나 React의 악 대차에 뛰어 들었습니다 . 그런 다음 Google은 AngularJS를 완전히 재 설계했습니다. 그들은 오랜 시간이 걸렸고 2016 년에 Angular라는 이름으로 개편되고 재 설계된 프레임 워크를 출시했습니다.

Angular는 감시자를 통한 양방향 데이터 바인딩을 사용 하는 엔드-투-엔드 프레임 워크입니다 . 또한 Virtual Dom을 사용하는 대신 Model과 View를 동기화하기 위해 Dirty 검사를 사용합니다. Angular는 처음부터 Reactive JavaScript 플랫폼 RxJS를 사용하며 Functional Reactive Programming을 훌륭하게 지원합니다.

Angular의 또 다른 큰 공헌은 웹 개발에 TypeScript를 도입하는 것인데, 이는 대규모 애플리케이션에서 추가적인 이점을 제공합니다. 오늘날 다른 모든 주요 프레임 워크도 TypeScript로 이동하고 있습니다.

Angular는 React, Vue.js 또는 Svelte와 같이 많은 견인력을 얻지 못합니다. 그러나 여전히 성숙하고 견고한 프레임 워크 이며 대기업에 적합한 선택입니다.

5 가지 주요 기능

  • Angular는 독단적 인 엔드 투 엔드 프레임 워크입니다. 에서 각도 CLI , 그것은 자바 스크립트 풍경에서 최고의 CLI 중 하나입니다. Angular CLI에서 하나의 명령을 사용하면 라우팅, 양방향 데이터 바인딩, HTML 클라이언트, 유효성 검사 등을 지원하는 엔터프라이즈 급 애플리케이션을 개발하기 위해 모든 라이브러리를 설치할 수 있습니다.
  • 또한 많은 Javascript 복잡성을 숨기는 점에서 가장 마법 같은 프레임 워크입니다. 데코레이터, 종속성 주입, TypeScript를 사용하면 JavaEE / ASP.NET에 대한 경험이있는 사람에게 완벽한 프레임 워크입니다.
  • 보안 측면 에서 가장 안전한 JavaScript 프레임 워크입니다. DOM 삭제를 통해 Cross-Site Scripting 공격을 제거합니다.
  • Angular가 정체되어 느린 죽음에 직면하고 있다는 오해가 있습니다. Google과 커뮤니티 모두 Angular를 개선하기 위해 열심히 노력하고 있습니다. 최근에는 모듈의 로딩 시간을 개선하기 위해 Lazy Loading, Differential loading을 추가했습니다 .
  • Angular는 부피가 큰 번들 크기, 느린 시작 시간 및 느린 응답 시간으로 악명이 높습니다. 다행히도 새로운 렌더링 엔진 Ivy (Angular 9에서 출시됨) 를 통해 Angular는 이러한 모든 문제를 개선했습니다.
  • 엔터프라이즈 애플리케이션 개발을위한 즉각적인 지원이 포함 된 종단 간 의견 프레임 워크입니다 .
  • TypeScript를 사용하고 템플릿을 스타일 및 비즈니스 로직에서 분리하여 특히 엔터프라이즈 급 대규모 코드베이스에 적합합니다 .
  • Angular는 웹, 모바일 및 데스크톱 응용 프로그램 을 개발하는 데 사용할 수 있습니다 .
  • 복잡성과 고급 기능으로 인해 Angular에 진입하는 장벽은 특히 JavaScript 개발자와 신규 개발자에게 매우 높습니다.
  • Angular의 무거운 특성 때문에 작은 응용 프로그램에는 적합하지 않습니다.
  • Angular는 기능이 풍부하지만 무겁습니다. 번들 크기 측면에서 가장 무거운 JavaScript 프레임 워크이며 렌더링 성능 측면에서 가장 느립니다.

GitHub에서 Angular는 네 번째로 별표가 많은 JavaScript 웹 프레임 워크입니다.

출처 : GitHub

StackOverflow Developer Survey는 Angular를 모든 웹 프레임 워크 중에서 3 위로 선정했습니다.

출처 : StackOverflow 개발자 설문 조사, 2019 년

"The State of JavaScript"설문 조사에 따르면 Angular는 인식 측면에서 2 위를 차지했습니다.

출처 : The State of JavaScript, 2019

NPM 다운로드 측면에서 Angular는 Vue.js가 2 위를 차지했습니다.

출처 : NPM 동향

Google Trends에 따르면 Angular는 꾸준히 견인력을 높이고 있습니다.

출처 : Google 트렌드

인력 시장

Angular는 미국에서 두 번째로 가장 까다로운 JavaScript 프레임 워크로, 대기업이 여전히 다른 인기있는 프레임 워크보다 Angular를 선호한다는 대중의 믿음을 확인시켜줍니다.

출처 : Indeed

저는 "Angular (프로그래밍 또는 개발자 또는 프런트 엔드 또는 소프트웨어 또는 ux 또는 ui) -AngularJS 작업"이라는 검색어를 사용하여 AngularJS를 명시 적으로 제외하여 Angular의 채용 공고 만 가져 왔습니다.

4. Ember.js

출처 : Ember

2010 년에 Apple 은 MVVM (Model-View-ViewModel) 패턴을 기반으로 SproutCore 라는 JavaScript 기반 웹 프레임 워크 개발을 시작했습니다 . 나중에 Apple 은 2011 년에 Ember.js 로 SproutCore 2.0을 오픈 소스로 공개 했습니다. Ember.js 의 창시자 인 Yehuda KatzRuby on Rails Core 팀의 일원이었습니다 . 그는 Ember.js 에서 Ruby on Rails의 " Convention over Configuration" 원칙을 광범위하게 사용했으며, 가장 의견이 많은 JavaScript 프레임 워크입니다.

Ember.js는 AngularJS 또는 React와 같은 하룻밤 사이에 성공하지 못했습니다. 또한 React 또는 Svelte와 같은 획기적인 개념을 도입하지 않았습니다. Ember.js의 가장 큰 칭찬은이 목록에서 가장 오래된 프레임 워크라는 것입니다.

같은 시대의 다른 프레임 워크가 줄어들거나 (Backbone.js, Knockout.js) 완전히 재 작성된 경우 (AngularJS) Ember.js는 주요 변경 사항을 도입하지 않고 지속적으로 발전했습니다 .

개발 속도가 빠른 웹 전용 JavaScript 프레임 워크를 배우고 싶다면 Ember.js는 강력하고 우수한 프레임 워크입니다.

주요 특징들

  • Ember.js는 "컨벤션에 대한 컨벤션"에 중점을 둔 가장 독보적 인 JavaScript 프레임 워크입니다. 그것은 제공 오브 - 박스 아웃과 응집력있는 프레임 워크 구성에 약간의과를.
  • Ember CLI 는 JavaScript 프레임 워크 중 최고의 CLI이며 개발자 경험 측면에서 Ruby on Rails CLI와 비교할 수 있습니다. 몇 가지 명령만으로 모든 종속성을 포함하여 올바른 구조로 필요한 모든 코드를 스캐 폴딩하고 생성합니다.
  • Ember의 이전 버전과호환성은 전설 적이고 동급 최고입니다. Ember는 JavaScript 클래스, 모듈과 같은 많은 최신 기능이 부족한 ES3 시대에 출시되었습니다. 수년에 걸쳐 Ember는 최신 기능을 추가하고 발전했지만 이전 버전과의 호환성과 API를 엄격하게 유지하고 있습니다.
  • Ember.js는 기존 응용 프로그램과의 상호 운용성을 깨지 않고 최신 릴리스 Ember Octane 을 대대적으로 개편했습니다 . 상태 관리 및 반응에 대한 지원이 개선HTML 우선 및 구성 요소 우선 접근 방식을 도입했습니다 .
  • Ember는 한 회사 또는 한 사람이 개발하지 않고 다른 회사의 개발자 커뮤니티에서 개발합니다. Ember의 커뮤니티는 프레임 워크의 변경 / 향상을 위해 RFC 프로세스 (예 : Rust)를 사용하는 가장 활기차고 환영합니다.
  • " 구성 에 대한 관습 "에 크게 초점을 맞춘 종단 간 독단적 인 응집력있는 프레임 워크 .
  • 하나의 Tech Giant 대신 Ember는 Linkedin, Yahoo와 같은 여러 Tech Giant의 지원을받습니다. 결과적으로 그것은 한 기업의 요구에 의해 주도되지 않습니다 .
  • Ember의 데이터 라이브러리 는 한 번에 여러 소스의 데이터에 액세스하고 비동기 관계를 설정하는 데 가장 적합합니다.
  • 당신의 필요가 Ember의 방식에 맞지 않는다면, 당신은 조정해야합니다 .
  • 다른 많은 프레임 워크와 달리 웹만을 대상으로합니다. 따라서 웹, 모바일 및 데스크톱간에 코드 공유가 없습니다.
  • 그것은 jQuery 와 밀접하게 결합되어 있습니다.

GitHub에서 Ember.js는 7 번째로 별표를 많이받은 JavaScript 프레임 워크입니다.

출처 : GitHub

“The State of JavaScript”설문 조사에 따르면 Vue.js는 관심 분야에서 1 위를 차지했습니다.

출처 : The State of JavaScript, 2019

NPM 다운로드 측면에서 Ember.js는 주당 100000 회 이상의 다운로드가 있습니다.

출처 : NPM 동향

Google 트렌드는 또한 Vue.js에 대한 강한 관심을 반영합니다.

출처 : Google 트렌드

인력 시장

Ember.js 개발자에 대한 수요는 상당히 높지만, 미국의 채용 공고에서 분명한 것처럼 다른 프레임 워크처럼 많은 견인력을 얻지는 못합니다.

출처 : Indeed

5. 날씬한

출처 : Svelte

JavaScript 프런트 엔드 개발의 첫 번째 획기적인 혁신은 프런트 엔드 개발에 많은 기존 백 엔드 기능을 도입 한 React를 통해 이루어집니다.

소프트웨어 엔지니어로 변신 한 저널리스트 인 Rich Harris 는 그의 오픈 소스 JavaScript 컴파일러 Svelte에서 또 다른 획기적인 아이디어를 소개했습니다. 기존 프레임 워크 (React, Vue.js, Angular)는 컴파일 된 코드와 함께 브라우저에서 프레임 워크 별 런타임을 제공합니다. 이 런타임은 프레임 워크 별 작업 (예 : Angular Routing)을 수행하는 데 도움이됩니다. 그러나 Svelte는 모든 작업을 컴파일 타임에 처리하고 추가 런타임없이 브라우저에서 컴파일 된 코드 만 제공합니다 .

컴파일 단계에서 반응 자바 스크립트 코드를 생성합니다. 런타임 동안 Svelte는 가상 DOM이나 더티 검사를 사용하지 않고 엄청나게 빠른 렌더링을 제공합니다. 다음은 Svelte의 반응성에 대한 Rich Harris의 훌륭한 강연입니다.

최근 Svelte는 많은 관심을 받고 있으며 웹 개발에서 다음으로 큰 성공을 거둘 수 있습니다 .

5 가지 주요 기능

  • 컴파일하는 동안 Svelte는 코드를 반응 형 JavaScript 코드로 변환하고 프레임 워크 별 런타임이 필요하지 않습니다. 모든 프레임 워크 중에서 번들 크기가장 작습니다 .
  • Svelte는 반응 형 프로그래밍을 통해 DOM 렌더링을 수행하는데, 이는 대부분의 경우 Virtual DOM보다 빠릅니다 . 결과적으로 Svelte는 모든 프레임 워크 중에서 가장 빠른 렌더링을 제공합니다.
  • Svelte는 React-Core와 같은 뷰 레이어입니다. 그러나 Sapper 에는 종단 간 애플리케이션 개발 프레임 워크가 있습니다.
  • Sapper를 사용하면 애플리케이션을 SPA 또는 탁월한 SEO 지원과 함께 SSR (Server-Side Rendering)로 개발할 수 있습니다.
  • Svelte는 JavaScript 프런트 엔드 개발에서 미지의 영역 을 열었습니다 . 크로스 플랫폼 앱 개발 또는 데스크톱 앱 개발에서 유사한 컴파일 시간 최적화가 가능합니다.
  • 혁신적인 컴파일 단계로 인해 작은 번들 크기로 놀라 울 정도로 빠릅니다 .
  • Svelte는 탁월한 SEO 지원으로 클라이언트 측 및 서버 측 렌더링을 모두 지원합니다.
  • 템플릿은 다른 프레임 워크에 비해 HTML에 더 가깝습니다.
  • 아직 진행 중이며 성숙도, 도구 지원 및 라이브러리 지원이 부족합니다.
  • TypeScript에 대한 공식적인 지원이 없습니다 .
  • 런타임 부족은 다른 프레임 워크가 제공하는 많은 추가 기능을 제공 할 수 없음을 의미합니다 (예 : Angular의 데이터 유효성 검사, 라우팅).

GitHub에서 Svelte는 5 번째로 많은 스타를받은 JavaScript 프레임 워크이며 이미 Backbone.js 및 Ember.js와 같은 베테랑 JavaScript 프레임 워크를 능가했습니다.

출처 : GitHub

“The State of JavaScript”설문 조사에 따르면 Svelte는 관심 분야에서 1 위를 차지했습니다.

출처 : The State of JavaScript, 2019

Svelte는 아직 업계에서 광범위하게 사용되지 않았으며 NPM 다운로드에서 분명합니다. NPM 추세에 따라 마지막으로 순위가 매겨진 프레임 워크입니다.

출처 : NPM 동향

2018 년 Svelte 3가 출시 된 후 Svelte는 Google 트렌드에서 많은 관심을 받고 있습니다.

출처 : Google 트렌드

인력 시장

Svelte는 2016 년 (Angular와 동시에) 출시되었지만 지난 몇 년 동안 만 주목을 받고 있습니다. 현재 미국에서 Svelte 개발자를위한 채용 공고는 22 개뿐입니다.

출처 : Indeed

유사한 기사 :

2021 년에 가장 많이 사용되는 10 가지 JavaScript 라이브러리

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.