프레임 워크에 대한 많은 JavaScript 옵션 (강점 및 주요 기능)에 대한 분석.

https://opensource.com/article/20/5/open-source-javascript-frameworks 

약 10 년 전에 JavaScript 개발자 커뮤니티는 JavaScript 프레임 워크 사이에서 치열한 전투를 목격하기 시작했습니다. 

이 기사에서는 이러한 프레임 워크 중 가장 잘 알려진 프레임 워크를 소개합니다. 

이 프로젝트는 모두 오픈 소스 JavaScript 프로젝트이므로 오픈 소스 라이센스로 자유롭게 활용하고 소스 코드 및 커뮤니티에 기여할 수 있습니다.

이 프레임 워크를 탐색 할 때 따라 가기를 원하면 내 비디오를 볼 수 있습니다.

그러나 시작하기 전에 프레임 워크를 논의 할 때 JavaScript 개발자가 일반적으로 사용하는 일부 용어를 익히는 것이 좋습니다.

일반적인 용어가 명확해졌으므로 오픈 소스 JavaScript 프레임 워크가 무엇인지 살펴 보겠습니다.

문맥 상, npm 추세로 인해 프레임 워크 당 NPM 패키지 다운로드를 기반으로 인기에 대한 공개 데이터가 있습니다.

ReactJS 

ReactJS는 Facebook에 의해 개발되었으며 현재 Angular 이후에 발명 되었지만 JavaScript 프레임 워크 중에서 확실한 리더입니다. React는 개발자가 프레임 워크 내에서 작업하기 위해 전체 프로젝트를 다시 작성할 필요 없이 개발자가 원하는 ReactJS 기능 만 활용할 수 있는 추상 사본 인 가상 DOM이라는 개념을 도입했습니다. 또한 React 프로젝트를 통해 활발한 오픈 소스 커뮤니티가 성장의 원동력이되었습니다. 다음은 React의 주요 장점 중 일부입니다.

• 합리적인 학습 곡선 —React 개발자는 JavaScript로 전체 코드를 다시 작성하지 않고도 React 구성 요소를 쉽게 만들 수 있습니다. ReactJS의 이점과 그것이 ReactJS의 첫 페이지에서 프로그래밍을 보다 쉽게 ​​만드는 방법을 보십시오.
• 성능에 최적화 된 —React의 가상 DOM 구현 및 기타 기능은 앱 렌더링 성능을 향상 시킵니다. 앱의 성능 측면에서 성능을 벤치 마킹하고 측정하는 방법에 대한 ReactJS의 설명을 참조하십시오.
• 탁월한 지원 도구 —Redux, Thunk 및 Reselect는 잘 구조화되고 디버깅 가능한 코드를 작성하기 위한 최고의 도구 중 하나입니다.
• 단방향 데이터 바인딩 —Reach에 사용 된 모델은 소유자에서 자식으로 이동하여 코드에서 원인과 결과를 추적하는 것이 더 간단합니다. 데이터 바인딩에 대한 ReactJS의 페이지에서 이에 대해 자세히 알아보십시오.

누가 ReactJS를 사용하고 있습니까? 페이스북이 이를 개발 한 이후, 회사 자체는 첫 페이지에 React를 많이 사용하고 있으며, Instagram은 ReactJS 라이브러리를 기반으로 합니다. New York Times, Netflix 및 Khan Academy와 같은 잘 알려진 다른 회사들도 기술 스택에 ReactJS를 구현한다는 사실에 놀랄 것입니다.

놀랍게도 ReactJS 개발자의 작업 가용성은 Stackoverflow가 수행 한 연구에서 아래에서 볼 수 있듯이 입니다. 야, 오픈 소스 프로젝트를 진행하고 돈을 벌 수 있습니다. 꽤 멋지다!

Stackoverflow는 ReactJS 개발자에 대한 엄청난 수요를 보여줍니다 — 출처 : 2017 년 개발자 채용 동향 —Stackoverflow Blog

ReactJS의 GitHub는 현재 오픈 소스 프로젝트에 13K 이상의 커밋과 1,377 명의 기여자를 보여줍니다. 그리고 MIT 라이센스에 따른 오픈 소스 프로젝트입니다.

Angular 

React는 이제 개발자 수 측면에서 최고의 JavaScript 프레임 워크가 될 수 있지만 Angular는 뒤쳐져 있습니다. 실제로 React가 오픈 소스 개발자와 스타트 업 회사 사이에서 가장 인기 있는 선택이지만 대기업은 Angular를 선호하는 경향이 있습니다 (일부는 아래에 나열되어 있음). 주된 이유는 Angular가 더 복잡 할 수 있지만 균일 성과 일관성이 더 큰 프로젝트에 효과적이기 때문입니다. 

예를 들어, 나는 경력 전반에 걸쳐 Angular와 React 모두에서 일했으며, 대기업은 일반적으로 Angular의 엄격한 구조를 강점으로 생각합니다. Angular의 다른 주요 장점은 다음과 같습니다.

• 잘 설계된 명령 행 인터페이스 : Angular는 우수한 명령 줄 인터페이스 (CLI) 도구를 사용하여 쉽게 부트스트랩하고 Angular로 개발할 수 있습니다. ReactJS는 다른 도구 뿐만 아니라 Command Line Interface도 제공하지만 Angular는 이 페이지에서 볼 수 있듯이 광범위한 지원과 훌륭한 문서화를 제공합니다.
• 단방향 데이터 바인딩 —React와 유사하게, 단방향 데이터 바인딩 모델은 프레임 워크를 원하지 않는 부작용에 덜 민감하게 만듭니다.
• TypeScript에 대한 강력한 지원 —Angular는 TypeScript와의 정렬이 매우 뛰어나므로 JavaScript가 더 많은 형식을 적용합니다. 또한 JavaScript로 코드를 컴파일하므로 버그가 적은 코드를 위해 유형을 강제로 적용 할 수 있습니다.

YouTube, Netflix, IBM 및 Walmart와 같은 잘 알려진 웹 사이트는 모두 Angular를 애플리케이션에 구현했습니다. 나는 개인적으로 주제에 대해 교육함으로써 Angular와의 프론트 엔드 JavaScript 개발을 시작했습니다. 

Angular와 관련된 개인 및 전문 프로젝트를 많이 수행했지만 Angular 1.x였습니다. 당시 AngularJS가 호출했습니다. 

Google이 버전을 2.0으로 업그레이드하기로 결정했을 때 프레임 워크가 완전히 개선 된 후 Angular가되었습니다. 새로운 Angular는 이전 AngularJS를 완전히 변형하여 기존 개발자를 몰아 내고 새로운 개발자를 데려 왔습니다.

Angular의 GitHub 페이지는 이 글을 쓰는 시점에 17,781 개의 커밋과 1,133 명의 기여자를 보여줍니다. 또한 MIT 라이센스가 있는 오픈 소스 프로젝트이므로 자유롭게 프로젝트에 사용하거나 기여할 수 있습니다.

VueJS 

VueJS는 매우 흥미로운 프레임 워크입니다. JavaScript 프레임 워크의 새로운 기능이지만 몇 년 동안 인기가 크게 높아졌습니다. VueJS는 Angular 프로젝트에서 일했던 전 Google 엔지니어 인 Evan Yu가 만들었습니다. 이 프레임 워크는 널리 보급되어 많은 프론트 엔드 엔지니어들이 이제 다른 JavaScript 프레임 워크보다 VueJS를 선호합니다. 아래 차트는 시간이 지남에 따라 프레임 워크가 얼마나 빨리 견인력을 얻었는지 보여줍니다.

VueJS의 주요 장점은 다음과 같습니다.

• 손쉬운 학습 곡선 — 앵귤러 또는 리 액트에 비해 많은 프론트 엔드 개발자는 VueJS가 학습 곡선이 가장 낮다고 생각합니다.
• 작은 크기 —VueJS는 Angular 또는 React에 비해 상대적으로 가볍습니다. 공식 문서에서 크기는 약 30KB에 불과한 반면 Angular에서 생성 한 프로젝트는 65KB 이상입니다.
• 간결한 문서 —Vue에는 철저하지만 간결하고 명확한 문서가 있습니다. 공식 문서를 참조하십시오.

VueJS의 GitHub는 3,099 개의 커밋과 239 개의 기여자를 보여줍니다.

MeteorJS 

MeteorJS는 무료 및 오픈 소스 동형 프레임 워크입니다. 즉 NodeJS와 마찬가지로 클라이언트 및 서버 측 JavaScript를 모두 실행합니다. Meteor는 Angular, React, Vue, Svelte 등과 같은 다른 인기 있는 프론트 엔드 프레임 워크와 함께 사용할 수 있습니다.

Meteor는 Qualcomm, Mazda 및 Ikea와 같은 여러 회사와 Dispatch 및 Rocket.Chat과 같은 많은 응용 프로그램에서 사용됩니다. 공식 웹 사이트에서 사례 연구를 참조하십시오.

Meteor의 주요 기능 중 일부는 다음과 같습니다.

• 유선 상의 데이터 — 서버는 HTML이 아닌 데이터를 보내며 클라이언트는 이를 렌더링 합니다. 유선상의 데이터는 대부분 Meteor가 페이지 로드시 서버에 WebSocket 연결을 형성 한 다음 해당 연결을 통해 필요한 데이터를 전송하는 방식을 나타냅니다.
• JavaScript로 모든 것을 개발하십시오. 클라이언트 측, 응용 프로그램 서버, 웹 페이지 및 모바일 인터페이스는 모두 JavaScript로 설계 될 수 있습니다.
• 대부분의 주요 프레임 워크를 지원합니다. Angular, React 및 Vue는 Meteor와 함께 결합하여 사용할 수 있습니다. 따라서 React 또는 Angular와 같은 즐겨 사용하는 프레임 워크를 계속 사용할 수 있지만 Meteor가 제공하는 훌륭한 기능 중 일부를 여전히 활용할 수 있습니다.

현재 Meteor의 GitHub는 22,804 개의 커밋과 428 명의 기여자를 보여줍니다. 그것은 오픈 소스 활동에 상당히 많은 것입니다!

EmberJS 

EmberJS는 Model-view-viewModel (MVVM) 패턴을 기반으로 하는 오픈 소스 JavaScript 프레임 워크입니다. EmberJS에 대해 들어 본 적이 없다면 얼마나 많은 회사가 그것을 사용하고 있는지 놀랄 것입니다. Apple Music, Square, Discourse, Groupon, LinkedIn, Twitch, Nordstorm 및 Chipotle은 모두 EmberJS를 기술 스택 중 하나로 활용합니다. EmberJS의 공식 페이지를 확인하여 EmberJS를 사용하는 모든 애플리케이션과 고객을 찾으십시오.

Ember는 우리가 논의한 다른 프레임 워크와 유사한 이점을 갖지만 다음은 고유 한 차별화 요소 중 일부입니다.

• 컨벤션 오버 컨피규레이션 — 네임 컨벤션을 표준화하고 결과 코드를 자동으로 생성합니다. 이 접근 방식에는 학습 곡선이 조금 더 있지만 프로그래머가 권장하는 모범 사례를 따르도록 합니다.
• 완전한 템플릿 메커니즘 —Ember는 간단한 텍스트 조작에 의존하여 DOM에 대해 전혀 몰라도 HTML 문서를 동적으로 작성합니다.

많은 응용 프로그램에서 사용하는 프레임 워크에서 기대할 수 있듯이 Ember의 GitHub 페이지에는 19,808 개의 커밋과 785 개의 기여자가 표시됩니다. 대단하다!

KnockoutJS 

KnockoutJS는 템플릿과 함께 MVM (Model-View-ViewModel) 패턴을 채택한 독립형 오픈 소스 JavaScript 프레임 워크입니다. Angular, React 또는 Vue와 비교할 때이 프레임 워크에 대해 들어 본 사람이 더 적지 만 프로젝트는 개발 커뮤니티에서 여전히 활발하고 다음과 같은 기능을 활용합니다.

• 선언적 바인딩 —Knockout의 선언적 바인딩 시스템은 데이터를 UI에 연결하는 간결하고 강력한 방법을 제공합니다. 간단한 데이터 속성에 바인딩하거나 단일 바인딩을 사용하는 것이 일반적으로 쉽습니다. KnockoutJS의 공식 문서 페이지에서 자세한 내용을 확인하십시오.
• 자동 UI 새로 고침
• 종속성 추적 템플릿

녹아웃의 GitHub 페이지에는 약 1,766 개의 커밋과 81 명의 기여자가 있습니다. 이 수치는 다른 프레임 워크에 비해 중요하지 않지만 프로젝트는 여전히 활발하게 유지되고 있습니다.

BackboneJS 

BackboneJS는 RESTful JSON 인터페이스를 갖춘 경량 JavaScript 프레임 워크이며 MVP (Model-View-Presenter) 디자인 패러다임을 기반으로 합니다.

이 프레임 워크는 Airbnb, Hulu, SoundCloud 및 Trello에서 사용한다고 합니다. 이 모든 사례 연구는 Backbone의 페이지에서 찾을 수 있습니다.

BackboneJS GitHub 페이지는 3,386 개의 커밋과 289 개의 기여자를 보여줍니다.

Svelte 

Svelte는 프레임 워크 참조를 포함하는 대신 DOM을 조작하는 코드를 생성하는 오픈 소스 JavaScript 프레임 워크입니다. 런타임이 아닌 빌드 타임에 앱을 JavaScript로 변환하는 이 프로세스는 일부 시나리오에서 성능이 약간 향상 될 수 있습니다.

Svelte의 GitHub 페이지는 이 글을 쓰는 시점에서 5,729 개의 커밋과 296 명의 기여자를 보여줍니다.

AureliaJS 

목록의 마지막은 Aurelia입니다. Aurelia는 최신 JavaScript 모듈의 모음 인 프론트 엔드 JavaScript 프레임 워크입니다. 아우렐리아에는 다음과 같은 흥미로운 기능이 있습니다.

• 빠른 렌더링 —Aurelia는 오늘날 프레임 워크가 다른 프레임 워크보다 빠르게 렌더링 할 수 있다고 주장합니다.
• 단방향 데이터 흐름 —Aurelia는 데이터를 모델에서 뷰로 푸시하는 관찰 가능 기반 바인딩 시스템을 사용합니다.
• 바닐라 JavaScript로 구축 — 일반 JavaScript로 웹 사이트의 모든 구성 요소를 구축 할 수 있습니다.

Aurelia의 GitHub 페이지는 이 글을 쓰는 시점에서 788 개의 커밋과 96 개의 기여자를 보여줍니다

이것이 JavaScript 프레임 워크 세계에서 새로운 것을 볼 때 찾은 것입니다. 흥미로운 프레임 워크를 놓쳤습니까? 의견 섹션에서 아이디어를 자유롭게 공유하십시오!