현재 JavaScript 개발자 수에 비해 JavaScript 프레임워크, 라이브러리 및 도구의 수가 더 많은 것 같습니다. 2017년 5월 현재 GitHub에서 빠르게 검색하면 110만 개가 넘는 JavaScript 프로젝트가 있는 것으로 나타났습니다. npmjs.org에는 500,000개의 사용 가능한 패키지가 있으며 매달 거의 100억 건의 다운로드가 이루어집니다.
이 기사에서는 가장 널리 사용되는 클라이언트 측 JavaScript 프레임워크, 라이브러리 및 도구와 이들 간의 기본적인 차이점에 대해 설명합니다. 아마도 이 기사에서는 어느 것이 가장 좋은지 말할 수 없지만 프로젝트에 가장 적합한 것이 가장 좋습니다.
클래스 라이브러리는 함수를 체계적으로 모아 놓은 것입니다. 일반적인 클래스 라이브러리에는 문자열 처리, 날짜, HTML DOM 요소, 이벤트, 쿠키, 애니메이션, 네트워크 요청 및 기타 기능이 포함됩니다. 함수를 직접 구현하여 함수가 호출될 때 값을 반환해야 하는지 여부를 선택할 수 있습니다.
클래스 라이브러리는 일반적으로 프로젝트의 세부 사항을 원활하게 구현하는 데 도움이 되는 높은 수준의 추상화 방법을 제공합니다. 예를 들어, Ajax는 일반적으로 XMLHttpRequest API를 사용하는데, 이는 함수를 구현하는 데 몇 줄의 코드만 필요하지만 브라우저마다 미묘한 차이가 있습니다. 클래스 라이브러리는 개발자가 더 높은 수준의 비즈니스 로직에 집중할 수 있도록 더 간단한 ajax() 기능을 제공합니다.
클래스 라이브러리는 개발 시간을 20% 단축할 수 있으며 개발자는 구현 세부 사항에 대해 걱정할 필요가 없습니다.
그러나 단점도 있습니다.
클래스 라이브러리의 버그는 찾아 수정하기 어렵습니다.
개발팀은 패치의 빠른 릴리스를 보장할 수 없습니다
패치가 API를 변경하여 변경해야 할 엄청난 양의 코드
학습 과정에서 문제가 발생하거나 학습 리소스를 얻고 싶다면 학습 교류 그룹에 가입하세요
343599877, 프론트엔드를 함께 배워보아요!
Framework는 애플리케이션의 뼈대입니다. 특정 방식으로 소프트웨어를 설계하고 특정 노드에 자체 로직을 구현해야 합니다. 프레임워크는 일반적으로 이벤트, 저장소, 데이터 바인딩과 같은 기능을 제공합니다.
프레임워크는 일반적으로 클래스 라이브러리보다 높은 수준의 추상화를 제공하여 프로젝트의 처음 80%를 빠르게 구축하는 데 도움이 됩니다.
프레임워크의 단점:
응용 프로그램이 프레임워크의 범위를 벗어나면 마지막 20%가 어려울 수 있습니다.
프레임워크 업데이트가 어렵습니다.
핵심 프레임워크 코드와 개념이 거의 업데이트되지 않습니다.
도구는 개발 작업에 도움이 되지만 프로젝트의 필수적인 부분은 아닙니다. 도구에는 빌드 시스템, 컴파일러, 트랜스파일러, 코드 분할기, 이미지 압축기, 배포 메커니즘 등이 포함됩니다.
도구는 개발 프로세스를 더 쉽게 만드는 데 도움이 됩니다. 예를 들어, 많은 코더는 코드 분리, 중첩, 렌더링 시간 변수, 루프 및 기능을 제공하기 때문에 CSS보다 Sass를 선호합니다. 브라우저는 Sass/SCSS 구문을 이해하지 못하므로 테스트 및 배포 전에 적절한 도구를 사용하여 코드를 CSS로 컴파일해야 합니다.
라이브러리, 프레임워크 및 도구의 차이는 매우 작습니다. 프레임워크에는 클래스 라이브러리가 포함될 수 있으며, 클래스 라이브러리는 프레임워크와 유사한 메서드를 구현할 수 있습니다. 따라서 라이브러리, 프레임워크, 도구를 명확하게 구분할 필요가 없습니다.
인기순 순위는 다음과 같습니다.
| jQuery | |
| Types | Libraries |
| 웹사이트 | jquery.com |
| Knowledge Base | github.com/jquery/jquery |
| 현재 버전 | 3.2.1 |
| Developers | jQuery Team |
| 릴리스 날짜 | 2006년 8월 |
| 크기 | 최소 30kb |
| 사용 | 범용 |
| 사용률 | 웹사이트의 72.4% |
WordPress, ASP.NET 및 기타 프레임워크가 출시된 후에도 jQuery는 여전히 가장 일반적으로 사용되는 JavaScript 라이브러리입니다. 이는 이벤트 핸들러, 애니메이션 및 Ajax 호출을 적용하기 위해 DOM 노드 검색 및 연결에 CSS 선택기를 도입함으로써 클라이언트 측 개발에 혁명을 일으켰습니다.
jQuery는 최근 몇 년 동안 인기를 얻었으며 여전히 소량의 JavaScript 기능이 필요한 프로젝트에 좋은 선택입니다.
장점:
작은 배포 규모
평탄한 학습 곡선, 풍부한 온라인 도움말
간결한 구문
확장이 용이함
단점:
추가됨 기본 API에 대한 속도 오버헤드
나쁜 브라우저 호환성, 개선됨
플랫 사용
일부 업계에서는
| Lodash | |
| type | 클래스 라이브러리 |
| website | lodash.com/ |
| 지식 기반 | github.com/lodash/lodash/ |
| 현재 버전 | 4.17.4 |
| 개발자 | John-David Dalton |
| 출시 날짜 | 2012년 4월 |
| Size | 최소 4kb – 24kb |
| Usage | Universal |
| 사용량 | 낮음 |
| 밑줄 | |
| Type | 클래스 라이브러리 |
| Website | underscorejs.org/ |
| Knowledge Base | github.com/jashkenas/underscore |
| 현재 버전 | 1.8.3 |
| 개발자 | Jeremy Ashkenas |
| 릴리스 날짜 | 2009년 10월 |
| Size | 최소 6kb |
| Usage | Universal |
| 사용 등급 | 낮음 |
이 섹션에서는 Lodash와 Underscore에 대해 함께 이야기합니다. 기본 문자열, 숫자, 배열 및 기타 기본 개체 메서드를 보완하기 위해 수백 가지 기능적 JavaScript 유틸리티를 제공합니다. 두 라이브러리 사이에 일부 겹치는 부분이 있지만 동일한 프로젝트에서 두 라이브러리가 모두 사용될 가능성은 없습니다.
클라이언트 측에서는 이 두 클래스 라이브러리의 사용률이 매우 낮지만, 서버 측의 Node.js 애플리케이션에서는 이 두 클래스 라이브러리를 사용할 수 있습니다.
장점:
작고 간단함
배우기 쉬운 좋은 문서
대부분의 라이브러리 및 프레임워크와 호환 가능
내장 객체를 확장하지 않음
사용 가능 클라이언트 측에서 또는 서버에서
을 사용하십시오. 단점:
일부 메소드는 ES2015 이상의 JavaScript 버전에서만 사용할 수 있습니다.
| 현재 버전 | |
| 개발자 | |
| 출시 날짜 | |
| 크기 | |
| Use | |
| Usage | |
| 버전 2(현재 버전 4!)가 출시되었지만 Angular 1.x는 아직 개발 중입니다. | 장점: |
| 일부 대기업에서 사용하는 널리 사용되는 프레임워크 | |
| 최신 웹 애플리케이션 개발을 위한 솔루션 |
에서 사용할 수 있는 많은 기사와 튜토리얼이 있습니다:
학습 곡선 가파른 코드 라이브러리
Angular
github.com/angular /angular. js| 4.1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2016년 9월 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 최소 4 50kb | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 단일 페이지 신청 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 낮음 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Knowledge Base | |
| 현재 버전 | |
| 개발자 | |
| 릴리스 날짜 | |
| 크기 | |
| 사용 | |
| Usage | |
| React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리로, 작년에 가장 인기 있는 클래스 라이브러리이기도 했습니다. 이는 MVC(Model-View-Controller) 개발의 "뷰" 부분에 중점을 두고 있으며 이를 사용하여 상태 보존 UI 구성 요소를 쉽게 만들 수 있습니다. 가상 DOM을 구현하는 데 선호되는 클래스 라이브러리 중 하나입니다. 해당 메모리 구조는 차이점을 효율적으로 계산할 수 있으며 페이지 업데이트가 더 효율적입니다. | |
| 장점: | |
| 작고 효율적이며 빠르고 유연함 |
좋은 문서 및 온라인 리소스
서버 측 렌더링 가능
현재 인기가 있고 경험이 풍부함 급속한 성장
DOM 수정 코드 및 기타 라이브러리와 호환되지 않습니다
React the ES6 Way에 대해 자세히 알아보세요
Types
| Knowledge Base | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 현재 버전 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Developers | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 출시 날짜 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 크기 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Usage | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Usage | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Vue.js는 사용자 인터페이스 구축을 위한 가볍고 진보적인 프레임워크입니다. 강력한 단일 페이지 애플리케이션을 구축하기 위해 다른 클래스 라이브러리와 통합할 수 있는 React와 유사한 가상 DOM 기반 뷰 레이어를 제공합니다. 프레임워크는 이전에 AngularJS에서 작업했으며 AngularJS에서 자신이 가장 좋아하는 부분을 추출한 Evan You가 만들었습니다. Vue.js는 HTML 템플릿 구문을 사용하여 DOM을 인스턴스 데이터에 바인딩합니다. 모델은 데이터가 변경될 때 뷰를 업데이트하는 순수한 JavaScript 개체입니다. 장점 : ant ant ant가 빠르게 사용될 수 있으며 점점 인기가 높아질 수 있습니다.
Backbone.js
Website
풍부한 파일 Trello, WordPress.com, LinkedIn 및 Groupon
Ember.js
website js.com |
| 지식 기반 | github .com/emberjs/ember.js | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 현재 버전 | 2.15.0 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Developer | Ember 팀 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 릴리스 날짜 | 2011년 12월 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 크기 | 최소 95kb | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 사용 | 단일 페이지 신청 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 사용률 | 낮음 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Ember.js는 MVVM(Model-View-ViewModel) 패턴을 기반으로 하는 프레임워크 중 하나입니다. 단일 패키지에 템플릿, 데이터 바인딩 및 클래스 라이브러리를 구현합니다. 장점:
단점:
Knockout.js
Knockout.js는 템플릿 및 종속성 추적을 통해 UI가 기본 데이터와 동기화를 유지하도록 보장하는 최초의 MVVM 프레임워크 중 하나입니다. 장점:
단점:
더 많은 프레임워크 및 라이브러리다음 프로젝트는 특별히 인기가 없지만 고려할 가치가 있습니다.
도구: 일반적인 작업 수행빌드 도구는 전처리, 컴파일, 이미지 최적화, 축소와 같은 다양한 웹 개발 작업을 자동화합니다. 코드, 코드 분석, 테스트 실행 등 작업은 실행 가능한 패키지에서 균일하게 관리될 수 있습니다. 현재 가장 인기 있는 도구는 다음과 같습니다. Gulp.js
Gulp는 최초의 작업 실행 도구는 아니었지만 빠르게 가장 인기 있는 도구가 되었습니다. 읽기 쉬운 JavaScript 코드를 사용하여 Gulp는 소스 파일을 스트림으로 로드하고 빌드 폴더에 출력하기 전에 다양한 플러그인을 통해 데이터를 관리합니다. 다른 옵션보다 먼저 Gulp.js를 확인하는 것은 쉽고 빠르며 재미있습니다. NPM |
| NPM | |
| Website | npmjs.com |
| 지식 Base | github.com/npm/npm |
| 현재 버전 | 4.5.0 |
| 월 다운로드 | 3백만 |
npm은 Node.js 패키지 관리자이지만 스크립팅 도구를 사용하여 일반적인 작업을 실행할 수 있습니다. 이는 몇 가지 종속성이 있는 간단한 프로젝트에 적합한 선택입니다. 그러나 더 복잡한 작업에는 적용 가능성이 낮아질 수 있습니다.
| Grunt | |
| Website | gruntjs.com |
| 지식 기반 | github.com/g runtjs /grunt |
| 현재 버전 | 1.0.1 |
| 월 200만 다운로드 |
Grunt는 대량 채택을 본 최초의 JavaScript 작업 실행 도구 중 하나였지만 속도와 복잡한 JSON 구성으로 인해 Gulp가 등장했습니다. 이제 이러한 문제가 해결되었으므로 Grunt는 여전히 인기 있는 선택입니다.
여러 JavaScript 파일을 관리하는 것이 지루한 일이 되었습니다. 기본적으로 브라우저 파일은 컴파일되지 않으므로 해당 종속성을 적절한 순서로 로드하거나 연결해야 합니다. ES6 모듈 및 CommonJS와 같은 옵션이 있지만 브라우저 지원은 제한되어 있으므로 모듈 바인딩이 중요해집니다.
| WebPack | |
| Website | webpack.js.org |
| 지식 기반 | github.com/webpack/ webpack |
| 현재 버전 | 2.5 .1 |
| 월 6백만 다운로드 |
Webpack은 모든 인기 있는 모듈 옵션을 지원하며 React 개발의 대명사가 되었습니다. Webpack은 모듈 번들러라고 주장하지만 이미 범용 작업 실행기로 사용될 수 있습니다.
| Browserify | |
| Website | browserify.org |
| 지식 기반 | github.com/subst ack/node-browserify |
| 현재 버전 | 14.3 .0 |
| 월간 다운로드 | 2.6백만 |
Browserify는 Node.js에서 사용되는 CommonJS 모듈을 지원하며 모든 모듈을 단일 브라우저 호환 파일로 컴파일합니다.
| RequireJS | |
| Website | requirejs.org |
| 지식 기반 | github.com/jr burke /r.js |
| 현재 버전 | 2.3 .3 |
| 월간 다운로드 수 백만 건 |
RequireJS는 Node.js에서도 작동하는 브라우저 내 모듈 로더입니다.
코드 분석 도구는 코드에서 잠재적인 오류나 구문 표준의 편차를 분석하는 데 사용됩니다. 닫히지 않은 괄호나 선언되지 않은 변수는 항상 감지됩니다.
| ESLint | |
| Website | eslint.org |
| 지식 기반 | github.com/eslin t/es lint |
| 현재 버전 | 3.19. 0 |
| 월간 다운로드 | 6백만 |
ESLint는 플러그형 코드 분석 도구입니다. 각 규칙은 플러그인이므로 개인 취향에 맞게 구성할 수 있습니다.
| JSHint | |
| Website | jshint.com |
| 지식 기반 | github.com/jshin t/j 신트 |
| 현재 버전 | 2.9. 4 |
| 월 다운로드 | 2백만 |
JSHint는 실제 오류와 이전 구문의 균형을 잘 맞추는 유연한 JavaScript 코드 분석 도구입니다.
| JSLint | |
| Website | jslint.com |
| 지식 기반 | github.com/reid /no de-jslint |
| 현재 버전 | 0.10 .3 |
| 월별 다운로드 | 50000 |
JSLint는 엄격한 기본 규칙 세트를 구현하는 최초의 코드 분석 도구 중 하나입니다.
테스트 중심 개발 작업을 수행하려면 코드를 작성하여 자신의 코드를 테스트해야 합니다. Ava, Tape 및 Jest를 포함하여 다양한 옵션이 있지만 현재 가장 인기 있는 세 가지 도구는 다음과 같습니다.
기술 자료 github.com/mochajs/mocha
| 월별 다운로드 | |
| Jasmine | |
| Jasmine | |
| Website |
| 월별 다운로드 2백만 건 | |
| QUnit | |
| QUnit | |
| Website |
| 1.0.0 | |
| 25000 |
위 내용은 최신 프런트엔드 프레임워크, 라이브러리 및 도구 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
