안녕하세요 탁입니다. GitHub에서 가장 인기있는 라이브러리를 랭킹 표시 해주는 bestofjs.org 라는 사이트가 있는데요. 매년 그 해 가장 핫했던 라이브러리를 발표 하고 있습니다.
선발 기준은 심플해서 당해년에 늘어난 "스타의 수" 입니다. 참고로 2016 년 종합 순위 1 위는 Vue.js 2017 년 종합 순위 1 위는 Vue.js 2018 년 종합 순위 1 위는 Vue.js였습니다..
이하 2019년 순위, 2019 JavaScript Rising Stars 의 한국어 번역입니다. 프런트엔드를 둘러싼 최신 트랜드를 확인해 보세요.
JavaScript 라이징 스타 2019
4 번째 JavaScript 라이징 스타에 오신 것을 환영합니다! 2019 년 GitHub에서 가장 주목을받은 프로젝트를 숫자로 살펴 봅시다.
다음 차트는 2019 년 한 해 동안 GitHub에서 증가한 스타의 수를 비교 한 것입니다. Web 플랫폼 모범 프로젝트를 모은리스트 인 Best of JavaScript 에서의 분석입니다. 각 프로젝트를 클릭하면 프로젝트의 세부 사항을 볼 수 있습니다.
종합 랭킹
1 위 : Vue.js
2 위 : VS Code
3 위 : React
4 위 : Vue Element Admin
5 위 : Svelte
6 위 : Axios
7 위 : Ant Design
8 위 : TypeScript
9 위 : Puppeteer
10 위 : Create React App
4 년 연속 Vue.js 가 종합 우승을 장식 해, 2019 년에 30000 스타를 늘렸습니다. 이어 React 과 VSCode 가 작년처럼 계속되고 있습니다.
종합 랭킹에서 가장 큰 성장을 보인이 Vue Element Admin 이었습니다. 이것은 Vue.js 구성 요소를 사용한 뛰어난 대시 보드를 구축 할 수있는 솔루션으로 당당히 4 위를 획득했습니다.
Svelte 몇 년 전부터 존재하는 프로젝트이며, 2019 년 마침내 비상 5 위를 차지했습니다. TypeScript 이 베스트 텐 진입이 성공은 지난 몇 년 JavaScript 변화의 집대성 중 하나입니다.
Node.js의 저자가 새로 만든 JavaScript 런타임 Deno 은 2018 년에 새롭게 등장했습니다. 이것은 13 위로 여전히 트렌드에 들어 있습니다.
프런트 엔드 프레임 워크
1 위 : Vue.js + 31.4k
2 위 : React + 22.9k
3 위 : Svelte + 20.0k
4 위 : Angular + 12.0k
5 위 : Omi + 3.8k
2019 년 Svelte 가 약진하고 Angular 를 제치고 Vue.js 과 React 를 위협?하며 3위로 올랐습니다. 이것은 지금까지의 BIG-3가 BIG-4가 된 것을 의미하는 것일까 요?
Svelte 다른 프레임 워크와 크게 차이가 실제로는 프레임 워크가 아니라 빌드시에 모든 것을 구축하는 컴파일러와 같은 것입니다.
React과 Vue 마찬가지로, 데이터가 변경 될 때 화면을 갱신하는 응용 프로그램을 개발자가 작성할 수 있습니다. 그러나 가장 큰 차이점은 프레임 워크가 브라우저에서 실행되는 것이 아니라 컴파일시에 실행됩니다.
컴파일러는 개발자가 만든 구성 요소를 DOM을 직접 조작하는 명령형 코드로 변환합니다. 따라서 브라우저에 전달 된 코드는 작아지고, 매우 빠르게 실행됩니다.
예를 들어 임베디드 디바이스 용 애플리케이션 등에 적합 할 것이다. 그 성능뿐만 아니라, 까다로운 CSS 전환도 쉽게 제어 할 수 있습니다.
버전 3 리 활성 구조도 강화되고 있습니다. UI를 트리거 할뿐만 변수까지 업데이트 해줍니다. Svelte가 지금까지 BIG-3만큼 성공이라고 단정하기는 시기상조이지만 2020 년은이를 따라 해 둘 가치가있을 것입니다.
Node.js 프레임 워크
1 위 : Nest + 11.5k
2 위 : Next.js + 10.6k
3 위 : Strapi + 10.2k
4 위 : Nuxt + 7.4k
5 위 : Express + 5.1k
Node.js에 새로운 챔피언 Nest 가 탄생했습니다. Nest는 Angular에서 많은 개념을 도입 한 풀 스택 프레임 워크입니다.
2018 년 우승자였던 Next.js 은 그 자리야말로 양보했지만 당당히 2 위입니다. 프런트 엔드를 React에서 백엔드를 Node.js로 구축 할 때 최적의 솔루션 중 하나입니다.
3 위에 올랐다 Strapi 는 오픈 소스의 헤드리스 CMS에서 API 엔드 포인트를 신속하게 생성하고 관리 할 수 있습니다.
"4가지 명령만으로 시작" 가 모토. API 엔드 포인트는 REST 혹은 GraphQL에 대응하고 있습니다.
4 위는 Nuxt 에서 프런트 엔드에 Vue.js를 사용할 때 최적의 풀 스택 프레임 워크입니다. 서버 사이드 렌더링 클라이언트 측 또는 정적 만 등 다양한 전략에 대응하고 있습니다.
Express 는 Node.js에 대한 낡은 프레임 워크이지만, 여전히 톱 5에 남아 있습니다. 거대한 에코 시스템이 존재하고 많은 Node.js 개발자에게는 익숙 할 것입니다 만, 마지막 커밋에서 이미 반년 이상 경과하고있는 것에주의가 필요합니다.
시대는 변화하고 있나요?
React 에코 시스템
1 위 : Ant Design + 14.6k
2 위 : Create React App + 13.5k
3 위 : Gatsby + 11.5k
4 위 : Next.js + 10.6k
5 위 : Material UI + 10.2k
1 위를 Ant Design , 5 위에 Material UI 가 React 용 구성 요소로 입상했습니다. 2 위의 Create React App 은 React 응용 프로그램을 새로 시작할 때의 사실상의 사실상의 표준입니다. 올해 주목할 것은 TypeScript입니다.
올해 React 세계에서 가장 큰 변화는 후크 의 도입입니다.
React는 뷰 계층 밖에 제공하지 않기 때문에 구성 요소간에 로직을 공유하는 방법은 항상 논쟁의 대상이되고 있습니다.그 진화는 대체로 4 단계로 나눌 수 있습니다.
· 2013 년 : Mixin
· 2015 년 : 고차 구성 요소
· 2017 년 : Render Props 패턴
· 2019 년 : Hooks
올해는 후크의 힘을 사용하여 문제를 해결 한 라이브러리가 다수 나타났다.
· Redux
· React Router
· React Hook Form
Hooks 진화의 마지막 단계에 도달한 것일까요?
Vue 에코 시스템
1 위 : Vue Element Admin + 22.7k
2 위 : Element + 9.4k
3 위 : Vuetify + 7.5k
4 위 : Nuxt + 7.4k
5 위 : vue-cli + 5.8k
2 연패 한 Vue Element Admin 은 Element 를 사용하여 아름다운 대시 보드를 구축 Vue.js 구성 요소입니다. 2 위의 Element 는 많은 요소를 가지는 UI 라이브러리입니다.
재료 컴포넌트 프레임 워크인 Vuetify 은 7 월에 버전 2가 출시 된 급상승하고 선정했습니다. Nuxt 는 Vue.js 응용 프로그램을 구축하는 Web 프레임 워크이며, 3 년 연속으로 랭크되어 있습니다.
5 위는 강력한 GUI를 갖춘 프로젝트의 출시를 가속 공식 도구 키트, vue-cli 가 들어갔습니다.
Angular 에코 시스템
1 위 : ngx-admin + 4.8k
2 위 : Material Design for Angular + 2.4k
3 위 : Angular CLI + 2.1k
4 위 : NG-ZORRO + 1.7k
5 위 : NgRx + 1.3k
Angular 프로젝트에서 가장 인기인 ngx-admin 관리 대시 보드를 구축하기위한 템플릿을 제공합니다. 2 위의 Material Design for Angular 는 Angular CDK와 비슷한 재질 디자인 Angular 공식 구성 요소입니다.
React과 Vue뿐만 아니라 디자인 구성 요소 인 NG-ZORRO 가 4 위를 차지했습니다. Angular는 2019 년 5 월에 버전 8 의 주요 릴리스가 이루어졌습니다.
새로운 기능의 하나로서 Angular CLI 는 현대 용과 레거시 용으로 번들을 분리해서 번들 크기를 20 % 감소시키는 데 성공했습니다.
또한 기존 CLI 명령을 변경하거나 새로운 명령 추가 할 수있는 새로운 Builders API도 존재합니다.
Angular 버전 9도 RC가 있고, 2020 년 상반기에 출시 될 예정입니다. 버전 9의 주요 변경 사항은 Ivy라는 새로운 컴파일러에서 구축 시간 단축 및 번들 크기의 감소가 기대되고 있습니다.
테스트
1 위 : Puppeteer + 13.9k
2 위 : Cypress + 7.8k
3 위 : Jest + 6.5k
4 위 : React Testing Library + 5.7k
5 위 : Puppeteer Recorder + 2.2k
올해는 카테고리 테스트 프레임 워크에 한정하는 것이 아니라 E2E 테스트 및 브라우저 자동화 도구 등을 대상으로했습니다.
Puppeteer 는 매우 인기있는 헤드리스 Chrome 제어 도구입니다. Chrome 확장의 Puppeteer Recorder 도 5 위에 랭크되어 있습니다.
Cypress 는 E2E 테스트를위한 솔루션이며, 사용자 작업 및 Web 페이지의 관련을 설명하는 뛰어난 UI를 제공합니다.
3 위 Jest 프런트 엔드와 백엔드의 두 프로젝트에서 사용되는 가장 인기있는 테스트 프레임 워크입니다.
React Testing Library 는 Kent C. Dodds에 따르면 DOM Testing Library 를 랩 한 React 앱 테스트 솔루션입니다. 구현 세부 사항을 테스트하는 것이 아니라 응용 프로그램의 동작을 테스트하는 데 도움 패턴과 추상화를 제공합니다.
모바일
1 위 : React Native + 11.3k
2 위 : Quasar + 5.0k
3 위 : Ionic + 3.6k
4 위 : Expo + 3.5k
5 위 : cube-ui + 2.6k
컴파일러
1 위 : TypeScript + 13.9k
2 위 : Babel + 4.2k
3 위 : Flow + 1.7k
4 위 : Reason + 1.3k
5 위 : Sucrase + 1.1k
빌드 도구
1 위 : Webpack + 6.3k
2 위 : Parcel + 5.4k
3 위 : Rollup + 2.7k
4 위 : Microbundle + 1.3k
5 위 : Gulp +841
CSS in JavaScript
1 위 : Styled Components + 6.0k
2 위 : Emotion + 3.3k
3 위 : Linaria + 2.8k
4 위 : styled-system + 2.4k
5 위 : CSS Modules + 1.8k
GraphQL
1 위 : Gatsby + 11.5k
2 위 : Hasura GraphQL Engine + 8.1k
3 위 : Prisma + 4.5k
4 위 : Gridsome + 3.8k
5 위 : Apollo client + 3.4k
학습 자원
1 위 : You Do not Know JS + 20.1k
2 위 : 30 seconds of code + 18.1k
3 위 : JS Algorithms & Data Structures + 17.8k
4 위 : Node.js Best Practices + 16.1k
5 위 : Tech Interview Handbook + 13.0k
정리
Svelte은 앞으로도 지속적으로 성장할까요? 앞으로도 Web 구성 요소 등 Web 표준의 채택이 늘어날까요? 프런트 엔드의 변화하는 트렌드는 매우 흥미롭습니다.
2019 년 가장 흥미로운 이야기 중 하나는 Apple이 Web Components를 사용하는 음악 앱을 출시 한 사실이며, UI 프레임 워크 중 하나 인 Stencil 에서 컴파일되어 있습니다.
이것은 Web Components가 실제 응용 프로그램에 사용 된 예입니다. 네이티브 모듈을 사용하는 응용 프로그램 을 출시 할 수 있다는 사실은 큰 개선입니다.
백엔드에서는 Node.js는 등장부터 10 년 지났 습니다만 지금도 새로운 기능을 적극적으로 추가하고 있습니다. v13.2.0의 시점에서 Node.js는 ES 모듈을 그대로 지원하고 WebAssembly 모듈을 가져올 수 있습니다. Workers Threads API를 사용하면 무거운 프로그램도 실행할 수 있습니다.
브라우저에서도 Node.js에서도 플랫폼은 계속 진화하고 있으며, 이것이 JavaScript 개발을 매우 흥미롭게 해 주고 있는 것 같습니다.