2017 년 최고의 JavaScript 프레임 워크 및 학습 주제

웁스! 시간을 거슬러 돌아온 것 같습니다. 빨리! 2019 년으로 돌아 가세요!

JavaScript의 인기로 인해 기술, 프레임 워크 및 라이브러리가 매우 활기차게 생겼습니다. 생태계의 모든 놀라운 다양성과 에너지와 함께 많은 사람들이 혼란을 겪습니다. 어떤 기술에 관심을 가져야합니까?

최대의 이익을 얻으려면 시간을 어디에 투자해야합니까? 회사에서 현재 어떤 기술 스택을 고용하고 있습니까? 어느 것이 가장 성장 잠재력이 있습니까?

지금 알아야 할 가장 중요한 기술은 무엇입니까? 이 게시물은 알아야 할 내용에 대한 개괄적 인 내용으로, 모든 내용을 배울 수있는 링크로 구성되어 있습니다.

실제 코드를 실험하는 법을 배우십시오. Codepen.io에서 대화식으로 코드를 사용할 수 있습니다. 아직도 ES6을 배우고 있다면 Babel REPL을 사용하여 어떻게 번역되는지 확인할 수 있습니다.

이것은 긴 목록이 될 것이지만 낙심하지 마십시오. 당신은 이것을 할 수 있습니다! 이 목록을보고 최신 앱을 구축하기 위해 알아야 할 모든 내용을 어떻게 배울 지 걱정이 되시면“JavaScript 피로에 감사하는 이유”를 읽어보십시오. 그런 다음 버클을 밟아 작업하십시오.

선택적 학습에 대한 참고 사항

이 내용 중 일부는 선택 사항입니다 *. 즉, 관심이 있거나 직업을 알고 있어야하는 경우에는 추천하지만 학습해야 할 의무는 없습니다. 별표 (예 : 예 *)로 표시된 것은 선택 사항입니다.

*로 표시되지 않은 것은 배워야하지만 모든 것에 대해 알아야 할 모든 것을 배워야 할 의무는 없습니다. 선택 사항이 아닌 것을 알고 있어야하지만 반드시 모든 것에 대해 결정적인 주제 전문가 일 필요는 없습니다.

자바 스크립트 및 DOM 기초

JavaScript를 사용하여 작업을 시작하기 전에 JavaScript 기본 사항을 충분히 이해해야합니다.

  • ES6 : 현재 JavaScript 버전은 ES2016 (일명 ES7)이지만 많은 개발자들이 여전히 ES6을 제대로 배우지 못했습니다. 이제 화살표 기능, 휴식 / 확산, 기본 매개 변수, 간결한 객체 리터럴, 구조 해제 등 필수 사항을 배울 시간입니다.
  • 마감 : JavaScript의 기능 범위가 어떻게 작동하는지 알아보십시오.
  • 함수와 순수한 함수 : 아마도 많은 함수를 알고 있다고 생각하지만 JavaScript에는 약간의 트릭이 있으며 함수형 프로그래밍을 처리하려면 순수한 함수에 대해 배워야합니다.
  • 함수형 프로그래밍 기본 사항 : 함수형 프로그래밍은 공유 상태 및 변경 가능한 데이터를 피하면서 수학 함수를 구성하여 프로그램을 생성합니다. 함수형 프로그래밍을 많이 사용하지 않는 프로덕션 JavaScript 앱을 본 지 몇 년이 지났습니다. 이제 기본을 익힐 시간입니다.
  • 부분 적용 및 카레
  • 내장 메소드 : 표준 데이터 유형 (특히 배열, 오브젝트, 문자열 및 숫자)에 대한 메소드를 학습하십시오.
  • 콜백 : 콜백은 결과가 준비 될 때 신호를 보내기 위해 다른 함수에서 사용하는 함수입니다. "일을하고 나면 전화 해."
  • 약속 : 약속은 미래 가치를 다루는 방법입니다. 함수가 약속을 반환하면 약속이 해결 된 후 .then () 메서드를 사용하여 콜백을 첨부 할 수 있습니다. 해결 된 값은 콜백 함수 (예 : doSomething (). then (value => console.log (value)))로 전달됩니다.
  • Ajax 및 서버 API 호출 : 가장 흥미로운 앱은 결국 네트워크와 통신해야합니다. API와 통신하는 방법을 알아야합니다.
  • 수업 (참고 : 수업 상속을 피하십시오. 수업 사용 및 야간 수면 방법 참조)
  • Generators & async / await : 제 생각에는 동기식으로 보이는 비동기 코드를 작성하는 가장 좋은 방법입니다. 학습 곡선이 있지만 일단 배우면 코드를 쉽게 읽을 수 있습니다.
  • 성능 : RAIL — "PageSpeed ​​Insights"및 "WebPageTest.org"로 시작
  • PWA (프로그레시브 웹 응용 프로그램) : "기본 앱이 중단 된"및 "기본 앱이 실제로 중단 된 이유"를 참조하십시오.
  • Node & Express : Node를 사용하면 서버에서 JavaScript를 사용할 수 있으므로 사용자가 클라우드에 데이터를 저장하고 어디서나 액세스 할 수 있습니다. Express는 산사태에 의해 Node에 가장 널리 사용되는 프레임 워크입니다.
  • Lodash : JavaScript를위한 훌륭한 모듈 식 유틸리티 벨트로 기능적 프로그래밍 기능이 풍부합니다. lodash / fp에서 마지막 데이터 모듈을 가져옵니다.

압형

  • Chrome 개발자 도구 : DOM 검사 및 JS 디버거 : 최고의 디버거 인 IMO이지만 Firefox에는 체크 아웃 할 멋진 도구가 있습니다.
  • npm : JavaScript 언어의 표준 오픈 소스 패키지 저장소.
  • git & GitHub : 분산 버전 관리자 — 시간이 지남에 따라 소스 코드 변경 사항을 추적합니다.
  • 바벨 : 오래된 브라우저에서 작동하도록 ES6을 컴파일하는 데 사용됩니다.
  • 웹팩 : 표준 JavaScript에서 가장 많이 사용되는 번 들러는 빠른 실행을위한 간단한 스타터 키트 / 보일러 플레이트 구성 예제를 찾습니다)
  • Atom, VSCode 또는 WebStorm + vim : 편집기가 필요합니다. Atom과 VSCode는 오늘날 가장 인기있는 JS 편집기입니다. 웹 스톰은 고품질 툴링을 매우 강력하게 지원하는 또 다른 솔루션입니다. vim을 배우거나 적어도 치트 시트를 북마크에 추가하는 것이 좋습니다. 조만간 서버에서 파일을 편집해야하며, 가장 쉬운 방법입니다. vim은 모든 유닉스 호환 OS의 거의 모든 버전에 설치됩니다. SSH 터미널 연결을 통해 잘 작동합니다.
  • ESLint : 구문 오류와 스타일 문제를 조기에 잡아냅니다. 코드 검토 및 TDD 후 코드의 버그를 줄이기 위해 수행 할 수있는 세 번째 최선의 방법입니다.
  • Tern.js : 표준 JavaScript 용 형식 유추 도구 및 현재 JavaScript 용으로 선호하는 형식 관련 도구 – 컴파일 단계 나 주석이 필요하지 않습니다. 나는 모든 타이어를 차고 Tern.js는 대부분의 이점을 제공하며 JS에 정적 유형 시스템을 사용하는 데 드는 비용은 거의 없습니다.
  • Yarn * : npm과 유사하지만 설치 동작이 결정적이며 Yarn은 npm보다 빠른 것을 목표로합니다.
  • TypeScript * : JavaScript의 정적 유형입니다. Angular 2 이상을 배우지 않는 한 완전히 선택 사항입니다. Angular 2+를 사용하지 않는 경우 TypeScript를 선택하기 전에 신중하게 평가해야합니다. 나는 그것을 좋아하고 TypeScript 팀의 훌륭한 작품에 감탄하지만 알아야 할 절충안이 있습니다. 필수 자료 :“정적 유형에 대한 충격적인 비밀”및“TypeScript가 필요하지 않을 수 있습니다”.
  • Flow * : JavaScript의 정적 유형 검사기. 이 두 가지에 대한 인상적이고 객관적인 비교는“TypeScript vs Flow”를 참조하십시오. 플로우를 통해 Nuclide를 사용해도 좋은 IDE 피드백을 제공하는 데 어려움을 겪었습니다.

반응

React는 Facebook에서 만든 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 단방향 데이터 흐름이라는 아이디어를 기반으로합니다. 이는 각 업데이트주기마다 다음을 의미합니다.

  1. React는 컴포넌트의 입력을 소품으로 가져오고 DOM의 특정 부분에 대한 데이터가 변경된 경우 DOM 업데이트를 조건부로 렌더링합니다. 이 단계 동안의 데이터 업데이트는 다음 드로잉 단계까지 렌더를 다시 트리거 할 수 없습니다.
  2. 이벤트 처리 단계-DOM이 렌더링 된 후 React는 DOM 이벤트를 DOM 트리의 루트에있는 단일 이벤트 리스너에 자동으로 위임하여 성능을 향상시킵니다. 이벤트를 수신하고 응답으로 데이터를 업데이트 할 수 있습니다.
  3. 데이터를 변경하면 프로세스가 1에서 반복됩니다.

이는 DOM에 대한 변경이 데이터를 직접 업데이트 할 수있는 양방향 데이터 바인딩과 대조적입니다 (예 : Angular 1 및 Knockout의 경우). 양방향 바인딩을 사용하면 DOM 렌더 프로세스 (각도 1에서 다이제스트주기라고 함) 중에 DOM을 변경하면 드로잉이 완료되기 전에 드로잉 단계가 다시 트리거되어 리플 로우 및 다시 그리기가 발생하여 성능이 저하 될 수 있습니다.

React는 데이터 관리 시스템을 규정하지 않지만 Flux 기반 접근 방식이 권장됩니다. React의 단방향 데이터 흐름 접근 방식은 기능적 프로그래밍과 불변의 데이터 구조에서 아이디어를 빌려서 프론트 엔드 프레임 워크 아키텍처에 대한 우리의 생각을 변화 시켰습니다.

React & Flux 아키텍처에 대한 자세한 내용은“코딩을 배우는 가장 좋은 방법은 코딩하는 것 : 앱 구축으로 앱 아키텍처를 배우는 것”을 참조하십시오.

  • create-react-app * : React를 시작하는 가장 빠른 방법입니다.
  • react-router * : React에 대한 간단한 단순 라우팅.
  • Next.js * : Node & React에 대한 죽은 간단한 범용 렌더링 및 라우팅.
  • velocity-react * : Reacts에 대한 애니메이션 — 페이지에서 대화 형 비주얼 모션 디자인을 위해 VMD 책갈피를 사용할 수 있습니다.

리덕스

Redux는 앱에 대한 트랜잭션적이고 결정적인 상태 관리 기능을 제공합니다. Redux에서는 액션 객체 스트림을 반복하여 현재 애플리케이션 상태로 줄입니다. 이것이 중요한 이유를 알아 보려면“더 나은 Redux 아키텍처를위한 10 가지 팁”을 읽으십시오. Redux를 시작하려면 Dan Abramov Redux 제작자가 제공하는 훌륭한 과정을 확인하십시오.

  • “Redux 시작하기”
  • “관용적 Redux를 사용한 반응 형 응용 프로그램 구축”

Redux는 프로덕션 프로젝트에 Redux를 사용하지 않더라도 필수 학습입니다.

왜? 많은 연습을 제공하고 순수한 함수를 사용하는 것의 가치를 가르치고 리듀서에 대해 생각할 수있는 새로운 방법을 가르쳐주기 때문에, 이는 데이터 콜렉션을 반복하고 이들로부터 가치를 추출하기위한 범용 함수입니다. 감속기는 일반적으로 Array.prototype.reduce가 JS 사양에 추가되었으므로 유용합니다.

리듀서는 단순한 어레이 그 이상에 중요하며 리듀서를 사용하는 새로운 방법을 배우는 것만으로도 가치가 있습니다.

  • redux-saga * : Redux를위한 동기식 부작용 라이브러리. 이를 사용하여 I / O를 관리하십시오 (예 : 네트워크 요청 처리).

앵귤러 2 + *

Angular 2+는 Google의 인기 Angular 프레임 워크의 후속 제품입니다. 대단한 인기로 인해 이력서가 멋지게 보일 것입니다. 그러나 먼저 React를 배우는 것이 좋습니다.

Angular 2+보다 React를 선호합니다.

  1. 더 간단하고
  2. 매우 인기가 많고 많은 작업에 사용됩니다 (Angular 2 이상도 마찬가지 임)

이러한 이유로 React를 배우는 것이 좋지만 Angular 2+는 엄격하게 선택 사항입니다 *. Angular 2+를 선호하는 경우 자유롭게 교체하십시오. Angular 2+를 먼저 배우고 React를 선택적으로 고려하십시오. 어느 쪽이든 당신에게 이로움과 이력서가 좋아 보인다.

어느 쪽을 선택하든 최소한 6 개월 (1 년 전)에 집중하여 다른 쪽을 배우십시오. 실력이 뛰어나려면 시간이 걸립니다.

RxJS *

RxJS는 JavaScript를위한 반응 형 프로그래밍 유틸리티 모음입니다. 스트림의 Lodash로 생각하십시오. 반응성 프로그래밍은 공식적으로 JavaScript 장면에 도착했습니다. ECMAScript Observables 제안은 1 단계 초안이며 RxJS 5+는 표준 표준 구현입니다.

RxJS를 좋아하는 한 번에 모든 것을 한꺼번에 가져 오면 번들 크기를 크게 늘릴 수 있습니다 (많은 연산자가 있음). 번들 팽창과 싸우려면 전체를 가져 오지 마십시오. 대신 패치 가져 오기를 사용하십시오.

패치 임포트를 사용하면 번들의 rxjs 종속성 크기를 ~ 200k 줄일 수 있습니다. 정말 큰 일입니다. 앱이 훨씬 빨라집니다.

편집 : 왜 <좋아하는 것>을 나열하지 않았습니까?

여러 사람들이 내가 좋아하는 프레임 워크를 나열하지 않은 이유를 물었습니다. 내가 고려한 중요한 기준 중 하나는 "실제 작업에 유용할까요?"였습니다.

예, 이것은 인기있는 경연 대회이지만, 학습 투자를 어디에 집중할 것인지 결정할 때 프레임 워크를 알 수있는 기회를 고려해야합니다.

그 질문에 답하기 위해 몇 가지 주요 지표를 살펴 보았습니다. 먼저 Google 트렌드입니다. 이 Google 트렌드 그래프를 재현하려면 키워드가 아닌 주제별로 선택해야합니다. 이러한 단어 중 몇 개는 많은 오해를 유발할 수 있습니다. 다시 말해 키워드 검색이 아닌 주제 중심의 트렌드입니다.

Google 트렌드에 대한 JS 주제

이것이 우리에게 말하는 것은 다양한 프로젝트에 대한 상대적 관심입니다. 사람들이 검색하면 옵션을 탐색하거나 도움말이나 문서를 검색 할 가능성이 있습니다. 이는 상대적 사용 수준을 나타내는 적절한 지표입니다.

또 다른 좋은 데이터 소스는 Indeed.com으로, 다양한 소스에서 작업 목록 데이터를 집계합니다. 최근 몇 년 동안 채용 공고 인기가 급격히 떨어졌지만 사람들이 실제로 생산 프로젝트에서 실제로 사용하고있는 프레임 워크를 알려주는 충분한 상대 비교를하기에 충분한 데이터를 수집합니다.

찾은 결과를 재현하려면 javascript를 검색하고 위치를 비워 두십시오. 보다시피,

각도와 반응이 우세합니다. (jPress는 앱 이외의 모든 웹 사이트에서 사용되며 WordPress와 같은 널리 사용되는 CMS 시스템을 포함한 거의 모든 레거시 시스템에서 사용되기 때문에 제외됩니다).

이 목록에서 Angular가 React보다 큰 이점을 가지고 있음을 알 수 있습니다. 왜 먼저 React를 배우는 것이 좋습니다? 때문에:

  1. 더 많은 사람들이 Angular보다 React를 배우는 데 관심이 있습니다
  2. React는 사용자 만족도에서 Angular를 크게 이끈다

다시 말해, React는 마인드 쉐어 및 고객 만족도 경쟁에서 이기고 있으며, 지난 1 년 반 동안 추세가 계속되면 React는 지배적 인 프론트 엔드 프레임 워크로서 Angular를 탈취 할 가능성이 매우 높습니다.

Angular 2+는 그것을 돌릴 수있는 기회를 가지므로 Angular는 컴백을 할 수 있지만 지금까지 React는 정말 좋은 싸움을하고 있습니다.

볼 프레임 워크

  • Vue.js *에는 수많은 GitHub 스타와 다운로드가 있습니다. 상황이 계속 진행된다면 2017 년에는 잘 될 것이지만 내년 쯤에 React 또는 Angular (둘 다 빠르게 성장하고 있음)를 놓지 않을 것이라고 생각합니다. React 또는 Angular를 배운 후에 이것을 배우십시오.
  • MobX *는 훌륭한 데이터 관리 라이브러리로 Redux의 대중적인 대안이되었습니다. 또한 빠르게 성장하고 있으며 2017 년에도 잘 될 것으로 기대합니다. 대부분의 앱에서 Redux를 선호하지만 MobX가 더 나은 선택 인 경우가 있습니다. 예를 들어, 페이지에 수십만 개의 동적 DOM 객체가있는 경우 성능이 향상 될 수 있습니다. 또한 앱 워크 플로가 모두 단순하고 트랜잭션적이고 결정적인 상태가 필요하지 않은 경우 Redux가 필요하지 않을 수 있습니다. MobX는 확실히 더 간단한 솔루션입니다. Redux를 배운 후에 이것을 배우십시오.
EricElliottJS.com에서 무료 레슨을 시작하십시오

Eric Elliott는 "Composing Software"및 "JavaScript Applications 프로그래밍"책의 저자입니다. EricElliottJS.com과 DevAnywhere.io의 공동 창립자로서 개발자에게 필수 소프트웨어 개발 기술을 가르칩니다. 그는 암호화 프로젝트를위한 개발 팀을 구성하고 조언하며 Adobe Systems, Zumba Fitness, The Wall StreetJournal, ESPN, BBC 및 Usher, Frank Ocean, Metallica 등을 포함한 최고의 레코딩 아티스트를위한 소프트웨어 경험에 기여했습니다.

그는 세상에서 가장 아름다운 여성과 함께 외진 생활을 즐깁니다.