콘텐츠
2020 년에는 웹 개발에 도움이되는 여러 프레임 워크와 라이브러리가 제공됩니다. 하지만 항상 그렇게 다양하지는 않았습니다. 2005 년에 Mocha라는 새로운 스크립팅 언어는 Brendan Eich라는 사람에 의해 만들어졌습니다. LiveScript로 이름이 변경된 지 몇 개월 후 이름이 다시 JavaScript로 변경되었습니다. 그 이후로 JavaScript는 먼 길을 왔습니다.
2010 년에는 최초의 JavaScript 프레임 워크로 Backbone과 Angular가 도입되었으며 2016 년에는 모든 웹 사이트의 92 %가 JavaScript를 사용했습니다. 이 기사에서는 세 가지 주요 JavaScript 프레임 워크 (Angular, React 및 Vue)와 향후 10 년으로 향하는 상태를 살펴 보겠습니다. 나만의 사이트를 만들고 싶습니까? 이 웹 사이트 빌더 목록을 사용해보십시오.
몇 가지 훌륭한 리소스를 보려면 최고의 웹 디자인 도구 목록, 웹 호스팅 서비스 모음 및이 우수한 사용자 테스트 소프트웨어 목록도 확인하십시오.
01. 각도
AngularJS는 2010 년에 출시되었지만 2016 년에는 완전히 다시 작성되어 Angular 2로 출시되었습니다. Angular는 Wix, Upwork, The Guardian, HBO 등에서 사용되는 Google에서 개발 한 완전한 웹 프레임 워크입니다.
장점 :
- TypeScript에 대한 탁월한 지원
- MVVM을 통해 개발자는 동일한 데이터 세트를 사용하여 동일한 앱 섹션에서 작업을 분리 할 수 있습니다.
- 우수한 문서
단점 :
- 약간의 학습 곡선이 있습니다.
- 이전 버전에서 마이그레이션하는 것은 어려울 수 있습니다.
- 업데이트는 꽤 정기적으로 도입되므로 개발자는 이에 적응해야합니다.
무엇 향후 계획?
Angular 9에서는 Ivy가 기본 컴파일러입니다. 성능 및 파일 크기와 관련된 많은 문제를 해결하기 위해 배치되었습니다. 응용 프로그램을 더 작고 빠르고 간단하게 만들어야합니다.
이전 버전의 Angular를 React 및 Vue와 비교할 때
Angular를 사용할 때 최종 번들 크기가 훨씬 더 컸습니다. Ivy는 또한 Angular 팀이 I / O 2019에서 선보인 Progressive Hydration을 가능하게합니다. Progressive Hydration은 Ivy를 사용하여 서버와 클라이언트에 점진적으로로드합니다. 예를 들어 사용자가 페이지와 상호 작용하기 시작하면 런타임과 함께 구성 요소의 코드를 하나씩 가져옵니다.
Ivy는 Angular의 큰 초점으로 보이며 모든 앱에서 사용할 수 있도록하는 것이 희망입니다. Angular 10에 이르기까지 버전 9에는 옵트 아웃 옵션이 있습니다.
02. 반응
React는 2013 년 Facebook에서 처음 출시되었으며 대화 형 웹 인터페이스를 구축하는 데 사용됩니다. Netflix, Dropbox, PayPal 및 Uber에서 사용됩니다.
장점 :
- React는 성능에 긍정적 인 영향을 미치는 가상 DOM을 사용합니다.
- JSX는 작성하기 쉽습니다.
- 업데이트는 안정성을 손상시키지 않습니다.
단점 :
- 주요 장애 중 하나는 더 복잡한 앱을 만들기 위해 타사 라이브러리가 필요하다는 것입니다.
- 개발자는 개발을위한 최선의 방법에 대해 어둠 속에 남겨져 있습니다.
무엇 향후 계획?
React Conf 2019에서 React 팀은 그들이 작업해온 여러 가지에 대해 언급했습니다. 첫 번째는 Selective Hydration으로, React는 사용자가 상호 작용하는 구성 요소의 우선 순위를 지정하기 위해 작업중인 모든 작업을 일시 중지합니다. 사용자가 특정 섹션과 상호 작용할 때 해당 영역에 수분이 공급됩니다. 팀은 또한 코드, 데이터 및 이미지로드를 조정하기위한 React의 시스템 인 Suspense를 개발하고 있습니다. 이를 통해 구성 요소는 렌더링하기 전에 무언가를 기다릴 수 있습니다.
선택적 하이드 레이션과 서스펜스는 모두 사용자 입력에 응답하는 것과 같이 우선 순위가 높은 작업에 집중하기 위해 React가 낮은 우선 순위 작업의 큰 블록을 입력 할 수있는 기능을 제공하여 앱의 응답 성을 높일 수있는 동시 모드로 가능합니다. 팀은 또한 포커스 및 입력 인터페이스 관리라는 두 가지 특정 주제에 초점을 맞추면서 그들이 살펴본 또 다른 영역으로 접근성을 언급했습니다.
03. Vue
Vue는 Google 직원 인 Evan You가 2014 년에 개발했습니다. Xiaomi, Alibaba 및 GitLab에서 사용합니다. Vue는 주요 브랜드의 지원없이 짧은 시간 내에 개발자로부터 인기와 지원을 얻었습니다.
장점 :
- 매우 가벼운 크기
- 초보자 친화적 – 배우기 쉬움
- 훌륭한 커뮤니티
단점 :
- React with Facebook 및 Angular with Google과 같은 거대 회사의 지원을받지 않음
- 실제 구조 없음
무엇 향후 계획?
Vue는 더 빠르고, 더 작고, 더 유지 관리가 용이하고 개발자가 네이티브를 더 쉽게 타겟팅 할 수 있도록 목표를 설정했습니다 (유지 관리에 문제가있는 경우 웹 호스팅 서비스를 고려하십시오). 다음 릴리스 (3.0)는 향상된 TypeScript 지원과 함께 더 나은 성능을위한 가상 DOM 재 작성을 포함하는 2020 년 1 분기에 예정되어 있습니다. 또한 구성 API가 추가되어 개발자에게 구성 요소를 만들고 작업 대신 기능별로 구성하는 새로운 방법을 제공합니다.
Vue를 개발하는 사람들은 또한 Suspense 작업에 바빴습니다.이 작업은 구성 요소 렌더링을 중단하고 조건이 충족 될 때까지 대체 구성 요소를 렌더링합니다.
Vue 업데이트의 가장 큰 장점 중 하나는 이전 버전과의 호환성을 유지한다는 것입니다. 그들은 당신이 이전 Vue 프로젝트를 망가 뜨리는 것을 원하지 않습니다. API의 90 %가 동일했던 1.0에서 2.0으로의 마이그레이션에서이를 확인했습니다.
프레임 워크 구문은 어떻게 비교됩니까?
세 가지 프레임 워크 모두 출시 이후 변경되었지만 이해해야 할 중요한 사항은 구문과 그 차이점입니다. 간단한 이벤트 바인딩과 관련하여 구문이 어떻게 비교되는지 살펴 보겠습니다.
Vue : 그만큼 v-on 지시문은 Vue 인스턴스에서 메서드를 호출하는 이벤트 리스너를 연결하는 데 사용됩니다. 지시문 앞에는 V- Vue에서 제공하는 특수 속성임을 나타 내기 위해 렌더링 된 DOM에 특수 반응 동작을 적용합니다. 이벤트 처리기는 인라인으로 제공되거나 메서드의 이름으로 제공 될 수 있습니다.
template> button v-on : click =”clickHandler”> Click me / button> / template> script> export default {name :“HelloWorld”, methods : {clickHandler : function () {console.log (“I was clicked! ”); }}}; / 스크립트>
반응 : React는 JavaScript의 구문 확장 인 JS와 JSX에 마크 업과 로직을 넣습니다. JSX를 사용하면 함수가 이벤트 핸들러로 전달됩니다. React 요소로 이벤트를 처리하는 것은 DOM 요소에서 이벤트를 처리하는 것과 매우 유사합니다. 그러나 몇 가지 구문상의 차이가 있습니다. 예를 들어, React 이벤트는 소문자가 아닌 camelCase를 사용하여 이름이 지정됩니다.
function Button () {function clickHandler (e) {console.log ( "I was clicked"); } return button onClick = {clickHandler}> Click me! / button>; }
모난: 이벤트 바인딩 구문은 등호 왼쪽에있는 괄호 안의 대상 이벤트 이름과 오른쪽에 인용 된 템플릿 문으로 구성됩니다. 또는 다음을 사용할 수 있습니다. 의 위에- 표준 형식으로 알려진 접두사.
@Component ({selector : "app-click-me", template :`button (click) = "onClickMe ()"> Click me! / button>`}) export class ClickMeComponent {onClickMe () {console.log ( " 당신이 나를 클릭했습니다!”); }}
인기와 시장
W3Techs의 통계를 검토하여 나머지 웹과 관련된 세 가지 프레임 워크의 전체적인 그림을 살펴 보겠습니다. Angular는 현재 모든 웹 사이트의 0.4 %에서 사용되고 있으며 JavaScript 라이브러리 시장 점유율은 0.5 %입니다. React는 모든 웹 사이트의 0.3 %, JavaScript 라이브러리 시장 점유율 0.4 %, Vue는 둘 다 0.3 %를 차지하고 있습니다. 이것은 매우 균일 해 보이며 숫자가 증가 할 것으로 예상 할 수 있습니다.
Google 트렌드 : 지난 12 개월 동안 React는 검색어에서 가장 인기가 있었고 Angular가 그 뒤를이었습니다. Vue.js는 상당히 뒤쳐져 있습니다. 그러나 기억해야 할 한 가지는 Vue가 다른 두 가지에 비해 아직 젊다는 것입니다.
구직 : 글을 쓰는 시점에서 React와 Angular는 Indeed의 구인 목록과 Vue가 훨씬 뒤처져 있습니다. 그러나 LinkedIn에서는 Vue 개발자에 대한 수요가 더 많은 것 같습니다.
스택 오버플로: 2019 년 Stack Overflow 개발자 설문 조사 결과를 보면 React와 Vue.js가 가장 사랑 받고 원하는 웹 프레임 워크입니다. Angular는 가장 사랑 받고 있지만 세 번째로 가장 많이 원한 사람에게는 9 위입니다.
GitHub : Vue는 153k로 가장 많은 별을 가지고 있지만 기여자 수가 가장 적습니다 (283). 반면 React에는 14 만 개의 별과 1,341 명의 기여자가 있습니다. Angular는 별 59.6k 개에 불과하지만 1,579 개로 3 개 중 가장 많은 기여자가 있습니다.
NPM 동향 : 위의 이미지는 지난 12 개월 동안의 통계를 보여줍니다. 여기서 React는 Angular 및 Vue에 비해 월별 다운로드 수가 더 많은 것을 볼 수 있습니다.
모바일 앱 개발
3 대 기업의 주요 초점 중 하나는 모바일 배포입니다. React에는 React Native가 있으며, React 사용자뿐만 아니라 광범위한 앱 개발 커뮤니티에서도 iOS 및 Android 앱을 빌드하는 데 인기있는 선택이되었습니다. Angular 개발자는 네이티브 앱에 NativeScript를 사용하거나 하이브리드 모바일 앱에 Ionic을 사용할 수 있지만 Vue 개발자는 NativeScript 또는 Vue Native를 선택할 수 있습니다. 모바일 애플리케이션의 인기로 인해 이는 여전히 핵심 투자 영역입니다.
2020 년에 주목해야 할 기타 프레임 워크
2020 년에 새로운 것을 시도하고 싶다면이 JavaScript 프레임 워크를 확인하세요.
타다 남은 것: MVVM 패턴을 기반으로 작동하는 웹 애플리케이션을 빌드하기위한 오픈 소스 프레임 워크입니다. Microsoft, Netflix 및 LinkedIn과 같은 여러 대기업에서 사용합니다.
유성: 최신 웹 및 모바일 애플리케이션 개발을위한 풀 스택 JavaScript 플랫폼입니다. 배우기 쉽고 매우 지원적인 커뮤니티가 있습니다.
결론
세 가지 프레임 워크 모두 지속적으로 개선되고 있으며 이는 고무적인 신호입니다. 모든 사람은 자신이 사용해야하는 관점과 선호하는 솔루션을 가지고 있지만 실제로는 프로젝트의 크기에 따라 다르며 더 편안하게 느끼게합니다.
가장 중요한 점은 커뮤니티의 지속적인 지원입니다. 따라서 새 프로젝트를 시작할 계획이고 이전에 세 가지 중 하나를 사용해 본 적이 없다면 모두와 함께 안전하게 보호받을 수 있다고 믿습니다. 아직 세 가지 프레임 워크 중 어느 것도 배울 기회가 없다면 학습을 시작하기위한 새해 결심으로 삼는 것이 좋습니다. 미래는이 세 가지를 중심으로 돌아갈 것입니다.
이 내용은 원래 넷 매거진에 실 렸습니다.
