회사에 적합한 프론트 엔드 프레임 워크를 선택하는 방법

프론트 엔드 프레임 선택의 핵심 사항

규모, 유연성, 오프라인 지원, 서버 측 렌더링 및 프레임 워크의 성숙을 고려하여 적절한 엔터프라이즈 레벨 프론트 엔드 프레임 워크를 선택합니다. 실제 경험이 중요하며 저자 팀은 Aurelia를 사용하고 평가를 위해 인증 페이지를 구축하기 위해 반응했습니다. 반응의 최종 선택은 주로 성숙도, 지역 사회 지원 및 채용 용이성에 기초합니다. 대부분의 선택 기준을 충족하지 못하도록 Angular 2는 제거되었습니다. Vue와 Aurelia는 성과를 잘 수행하고 요구 사항을 충족했지만 경험이 풍부한 개발자를 고용하는 것이 궁극적 인 결정적인 요소였습니다.

싱가포르의 직원 복지 스타트 업 CXA 그룹의 핵심 네트워크 플랫폼을 평가할 때, 우리는 기존 아키텍처를 포기하고 프론트 엔드를 처음부터 재건하기로 결정했습니다. 플랫폼이 직면 한 과제 중 하나는 CXA 그룹이 아시아 전역의 12 개 국가에서 잘 작동하는 웹 응용 프로그램을 만드는 것입니다.

프로젝트 전달의 엄격한 마감일을 고려할 때, 나는 다양한 프론트 엔드 JavaScript 프레임 워크의 평가를 주도했습니다. 대기업 프로젝트에서 이러한 수준의 변화에 ​​대한 기회는 거의 없으므로 평가 과정에서 가능한 한 철저하게 노력합니다.

이 결정은 중요합니다. 비즈니스가 기하 급수적으로 성장함에 따라 실수를 할 여유가 없습니다. 또한 팀의 어느 누구도 우리가 고려하고있는 프레임 워크에 대한 중요한 경험이 없다고 생각해야합니다.

범위를 좁 힙니다

새로운 프론트 엔드 프레임 워크는 매일 출시되는 것처럼 보이므로 우리는 우리가 고려한 프레임 워크의 범위를 줄이기 위해 메타 분석을 수행했습니다. 우리가 들었거나 추천 한 프레임 워크를 포함하여, 우리는 Angular 2 (들), Aurelia (들), vue.js (권장) 및 React (권장)를 선택하게되었습니다.

우리는 주요 요구 사항 목록을 기반으로 각 결선 참가자 프레임의 순위를 측정합니다. 일부 요구 사항은 프로젝트에 필요한 것이 무엇인지 알고있는 반면, 다른 요구 사항은 우리가하고 싶은 일을 기대합니다.

유연성 우리가 선택한 프레임 워크에는 다양한 구성 옵션이 필요하며 사용자 정의하기 쉽습니다. 이것은 건축 철학에 크게 의존하는 것으로 보입니다. 귀하를 대신하여 건축 결정을 내리거나 완전히 개방적인지 여부.

Angular 2는이쪽에 위치하고있어 모든 선택 (상태 서버, 라우터, 핸들러)을 선택합니다. 이것의 장점은 빨리 시작하기 쉽고 잠재적 비용은 모듈이 필요에 따라 작동 할 수없고 갈 곳이 없다는 것입니다.

반응, vue 및 aurelia는 스케일의 다른 쪽 끝에 위치하여 필요에 따라 구성 요소를 교환 할 수있는 기능을 제공합니다. Aurelia와 Vue는 초기 설정에 구성 가능한 보일러 플레이트가 있으며, 이는 React보다 중요한 이점이 있습니다.

Vue와 같은 반응 자체는 무언가를 만들기 위해 필요한 것의 작은 부분 만 제공합니다. 거기에서 많은 결정이 내려져야합니다. React가 처음 출시 된 이후, 도입 프로세스를 단순화하기 위해 다양한 보일러 플레이트 (React Boilerplate 및 Create React App 포함)가 만들어졌습니다.

테스트 반응 프로젝트의 경우 특정 보일러 플레이트를 포기하고 직접 파기로 결정했습니다. 우리는 여전히 참조 코드를 위해서도 일부를 설치했습니다. 이 접근법은 확실히 어렵지만 React 스택의 각 구성 요소에 대해 많은 것을 배웠으며 최종 결과에 대해 더 자신감이있었습니다.

Vue와 Aurelia는 학습 곡선과 모듈 식 구조가 줄어들면서 라운드에서 우승했습니다. React는 초기 설정이 훨씬 어려운 경우에도 유연성 포인트를 얻습니다.

오프라인 지원

서비스 작업자와 같은 API를 사용하면 실시간 또는 안정적인 인터넷 연결없이 웹 애플리케이션이 실행될 수 있습니다. 우리는 이와 관련하여 우리 팀에서 많은 경험이 없으며, 평가 된 모든 프레임 워크가 어떤 형태의 오프라인 지원을 제공한다는 것을 확인하는 것 외에는 그것을 탐구하지 않았습니다.

경량 클라이언트에게 전송 된 코드의 바이트 크기는 대역폭 및 프로세서 시간을 포함하여 브라우저 성능에 큰 영향을 미칩니다. 사용자 정의 코드와 타사 라이브러리가 추가되면 바이트 크기가 점점 커지므로 작게 시작하는 것이 중요합니다. CXA 그룹의 대상 시장은 대역폭이 매우 가치있는 국가로 확장되므로 고객에게 가능한 한 적은 코드를 제공하는 것이 중요합니다.

프로덕션 구성을 반영하는 하드 데이터가 없기 때문에 핵심 라이브러리의 크기를 살펴보고 적어도 우리가 직면 할 내용을 알았습니다. 실제 생산 크기는 여기에 표시된 것보다 큽니다.

Vue의 개발자들은 핵심 라이브러리를 인상적인 23 KB로 좁히기 위해 최선을 다했습니다. React 및 Aurelia는 중간에 있으며 (각각 약 42KB 및 64KB), Angular 2는 143KB (국가 관리를위한 RXJ 포함)를 가진 헤비급으로 유지됩니다.

실제로 VUE, AURELIA 및 REACT의 생산 버전은 서로 매우 가깝고 고려 될 수 있습니다. Angular 2는 다시 잘못된 방식으로 돋보입니다.

서버 측 렌더링 초기 단일 페이지 응용 프로그램 (SPA) 프레임 워크는 모든 코드를 클라이언트에게 전송하는 모델을 따랐습니다. 이는 페이지의 초기 렌더링이 클라이언트에게 맡겨져 있고 초기 페이지의로드가 느리게 발생 함을 의미합니다. SPA에서 서버 측 렌더링의 개념은 서버에 초기 렌더링의 부담을 주어서 렌더링 후 다른 모든 컨텐츠를 지연시킬 수 있습니다.

vue and React 사용 플러그인을 사용하여 서버 측 렌더링을 추가합니다. Angular 2는 현재 Vue 또는 React가 제공하는 내용과 일치하지 않지만 현재 보편적 기능을 핵심으로 결합하는 과정에 있습니다. Aurelia는 서버 측 렌더링을 개발의 기능으로 표시하지만 다른 성능 팁이 있더라도 구현 타임 라인이 부족합니다.

성숙도

기업 수준 웹 사이트를위한 프레임 워크를 선택할 때 광범위한 커뮤니티 지원, 안정성 및 채용 기능은 매우 중요한 요소입니다. 3 년이 지난 후에도 모든 프레임 워크가 여전히 뒷받침되는지 여부를 추측하기는 어렵지만, 우리는 결정을 내리기 위해 각 프레임 워크의 현재 건강을 살펴보기로 결정했습니다.

프레임 워크의 초기 공개 날짜를 보면 각 프레임 워크의 견고성에 대한 아이디어가 제공됩니다. 구형 라이브러리는 적어도 이론적으로는 더 나은 범위의 기능과 주요 버그가 적어야합니다.

React는 쉽게 우승했으며 첫 번째 공개는 2013 년 3 월에있었습니다. VUE는 원래 2015 년 10 월에 출시되었지만 2016 년 9 월 릴리스까지는 최고점에 도달하지 못했습니다. Aurelia는 초보자이며 2016 년 8 월에 1.0 버전에 도달했습니다.

Angular 2는 흥미 롭습니다. 버전 1과는 매우 다르며 실제로 2016 년 9 월에 처음 출시되었습니다.

이 평가의 일부는 릴리스 날짜 자체뿐만 아니라 각 라이브러리의 개발 기록을 탐구하는 것입니다. 길고 안정적인 개발의 역사 (베타에도 불구하고) 물론 자신감도 높아집니다.

다양한 팀원들이 후보 프레임 워크의 개발에주의를 기울이고 있으며, 이는 각 프레임 워크의 전반적인 안정성을 최소한 이해하게합니다. Angular 2의 문제가있는 개발 이력은 우리가 검토 한 모든 프레임 워크 중에서 눈에 띄고 상당한 변화와 릴리스 날짜가 불분명합니다. 프레임 워크는 결국 최종 버전으로 출시되었지만 그 과정에서 정말 지저분했습니다.

성숙도의 궁극적 인 핵심 측면 (위에서 언급 한 바와 같이)은 숙련 된 직원을 모집하는 능력입니다. 우리 팀의 평가 프레임 워크 및 우리가 직면 한 급진적 인 타임 라인에서 제한된 경험을 감안할 때, 우리는 숙련 된 개발자를 모집하고자합니다.

그러나 특정 경험을 가진 사람들을 고용하는 것은 제한적 일 수 있지만, 우리와 같은 더 큰 프로젝트에 영향을 미칩니다. 우리는 이전 요구 사항을 충족시키지 못했기 때문에이 단계에서 Angular 2를 제거했습니다.

나머지 프레임 워크의 경우 먼저 다른 구직 웹 사이트를 검색하고 각 프레임 워크에 대해 별도의 구인 광고를 게시했습니다. 우리는 Aurelia 또는 VUE에 대한 구인 광고를 찾지 못했으며 응용 프로그램을받지 않았습니다. 대조적으로, 우리는 여러 React 작업을 발견했으며 많은 고품질 응용 프로그램을 받았습니다.

기타 함수 나머지 목록 (개발자 도구 및 단위 테스트 지원)은 우리가 보는 모든 프레임 워크에서 사용할 수 있습니다. 신뢰할 수있는 개발자 도구 없이는 디버깅이 거의 불가능하며, 단위 테스트는 당사와 같은 엔터프라이즈 급 응용 프로그램에 거의 필수적입니다.

실무 경험

이론은 실제 경험과 비교할 수 없습니다. 이를 염두에두고 대부분의 요구 사항을 충족하는 두 가지 프레임 워크 (Arelia 및 React)를 선택하고 병렬로 코딩을 시작했습니다. 이 단계에서 Vue를 생략할만한 충분한 이유는 없습니다.

주어진 작업은 기존 응용 프로그램의 기본 기능과 일치하는 인증 화면을 작성하는 것입니다. 로그인, API에 전화하여 세션을 설정하십시오. 두 팀원에게는 프레임 워크가 별도로 배정되었고, 그들이 무엇을 구축 할 수 있는지 확인하기 위해 캘린더 주를 받았습니다.

Aurelia 데모는 부분적으로 더 간단한 설정 프로세스로 인해 더 완전합니다. 각 섹션에서 수행 된 작업을 선택한 후에는 React 스택 내부의 내용을 더 잘 이해하고 있다고 생각합니다. Aurelia는 초기 설정의 용이성 측면에서 여전히 쉽게 승리합니다.

우리는 실질적인 코딩만을 바탕으로 중요한 결론을 도출 할 수 없습니다. 아마도 코드가 얼마나 유사한 지에 대한 유일한 놀라움은 다음과 같습니다. 이것은 주로 ECMAScript 6에 도입 된 구조적 변화에 기인합니다.

결과

궁극적으로 우리의 선택은 가장 중요한 것은 성숙도, 지역 사회 지원 및 채용의 용이성을 선택합니다. React는 표준의 명확한 승자이지만, 이러한 고품질 프레임 워크가 우리가보고있는 경쟁 프레임 워크에 존재하는 것을 보는 것이 좋습니다.

vue와 Aurelia는 뒤에 가까운 것으로 판명되었습니다. Vue는보다 완전한 기능 목록으로 약간 이어 지지만 요구 사항이 주어지면 어느 쪽이든 잘 섬길 것입니다. 시간 압력이 없다면 채용은 덜 중요하며 VUE를 포함하도록 실습 작업을 확장 할 것입니다.

Angular 2는 대부분의 선택 기준을 충족시키지 못했고 실망했습니다. 많은 장점에도 불구하고 분명히 우리에게 적합하지 않습니다. React를 선택하고 프로젝트 구축을 시작한 후 곧 다시이 작업을 수행 할 것 같지 않습니다. 당신에 관해서는, 우리 목록에 어떤 기준을 추가 하시겠습니까? 우리는 무엇을 놓쳤습니까? 우리는 더 잘할 수 있었습니까? 귀하의 의견과 제안을 기대합니다. 이 기사는 Stuart Mitchell, Ralph Mason 및 Vildan Softic이 동료 검토했습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!

회사에 적합한 프론트 엔드 프레임 워크 선택에 대한 FAQ

회사에 적합한 프론트 엔드 프레임 워크를 선택할 때 어떤 주요 요소를 고려해야합니까?

회사를위한 프론트 엔드 프레임 워크를 선택할 때 고려해야 할 몇 가지 주요 요소. 먼저 프로젝트 요구 사항을 고려하십시오. 다른 프레임 워크마다 장단점이 다르므로 프로젝트의 요구에 맞는 것을 선택하는 것이 중요합니다. 둘째, 학습 곡선을 고려하십시오. 일부 프레임 워크는 다른 프레임 워크보다 배우기 쉽기 때문에 개발 속도에 영향을 줄 수 있습니다. 셋째, 커뮤니티와 지원을 고려하십시오. 강력한 커뮤니티는 문제가있을 때 귀중한 자원을 제공하고 도움을 줄 수 있습니다. 마지막으로 프레임 워크의 성능과 크기를 고려하십시오. 가볍고 고성능 프레임 워크는 더 나은 사용자 경험을 제공 할 수 있습니다.

프론트 엔드 프레임의 크기가 성능에 어떤 영향을 미칩니 까?

프론트 엔드 프레임의 크기는 성능에 심각한 영향을 미칩니다. 더 큰 프레임 워크에는 일반적으로 더 많은 기능과 기능이 제공되지만로드하고 느리게 실행할 수도 있습니다. 이로 인해 특히 인터넷 연결이 느리거나 약한 장치가 약한 사용자 경험이 나빠질 수 있습니다. 반면에 작은 프레임은 일반적으로 더 빠르고 효율적이지만 특정 기능이나 기능이 부족할 수 있습니다. 따라서 프로젝트 요구 사항에 따라 프레임 워크의 크기와 성능의 균형을 맞추는 것이 매우 중요합니다.

인기있는 프론트 엔드 프레임 워크와 그 장점은 무엇입니까?

각각 고유 한 장점이있는 많은 인기있는 프론트 엔드 프레임 워크가 있습니다. 예를 들어, React는 가상 DOM과 고성능으로 유명하여 복잡한 동적 웹 응용 프로그램에 적합합니다. 반면에 Angular는 웹 애플리케이션을 구축하는 데 필요한 모든 것을 포함하는 완전히 기능적인 프레임 워크로 대규모 프로젝트에 적합한 선택입니다. Vue.js는 단순성과 사용 편의성으로 유명하여 소규모 프로젝트 또는 프론트 엔드 프레임 워크의 새로운 개발자에게 적합한 선택입니다.

프론트 엔드 프레임 워크를 선택할 때 커뮤니티 지원은 얼마나 중요합니까?

프론트 엔드 프레임 워크를 선택할 때 커뮤니티 지원이 매우 중요합니다. 강력한 커뮤니티는 질문을하고 도움을받을 수있는 튜토리얼, 문서 및 포럼을 포함한 풍부한 리소스를 제공 할 수 있습니다. 또한 대기업은 종종 프레임 워크가 인기 있고 널리 사용되며, 이는 더 자주 업데이트와 개선으로 이어질 수 있음을 보여줍니다.

단일 프로젝트에서 여러 프론트 엔드 프레임 워크를 사용할 수 있습니까?

기술적으로 다중 프론트 엔드 프레임 워크를 단일 프로젝트에서 사용할 수 있지만 일반적으로 권장되지는 않습니다. 각 프레임 워크에는 고유 한 일을하는 방식이 있으며 혼합하면 혼란과 복잡성이 발생할 수 있습니다. 대신, 일반적으로 프로젝트의 요구에 가장 적합한 프레임 워크를 선택하고이를 고수하는 것이 가장 좋습니다.

프론트 엔드 프레임 워크의 학습 곡선은 프로젝트 개발에 어떤 영향을 미칩니 까?

프론트 엔드 프레임 워크의 학습 곡선은 프로젝트 개발에 심각한 영향을 미칩니다. 가파른 학습 곡선이있는 프레임 워크는 마스터하는 데 시간이 더 걸릴 수 있으며, 이는 개발 시작을 지연시킬 수 있습니다. 반면에, 부드러운 학습 곡선이있는 프레임 워크를 통해 개발을 더 빨리 시작할 수 있습니다. 그러나 학습의 용이성이 프레임 워크를 선택하는 유일한 요소는 아니어야합니다. 또한 프레임 워크의 기능과 프로젝트 요구 사항과 얼마나 잘 일치하는지 고려해야합니다.

웹 개발에서 프론트 엔드 프레임 워크의 역할은 무엇입니까?

프론트 엔드 프레임 워크는 웹 개발에 중요한 역할을합니다. 코드가 쉽게 유지 관리하고 확장 할 수 있도록 코드의 구조를 제공합니다. 또한 일반적인 작업에 대한 사전 작성된 코드를 제공하여 개발 프로세스 속도를 높입니다. 또한 프론트 엔드 프레임 워크에는 종종 테스트 및 디버깅을위한 도구가 포함되어있어 코드의 품질을보다 쉽게 ​​보장 할 수 있습니다.

사용하는 프론트 엔드 프레임 워크를 얼마나 자주 업데이트해야합니까?

프론트 엔드 프레임 워크를 최신 상태로 유지하는 것이 매우 중요합니다. 업데이트에는 일반적으로 버그 수정, 성능 향상 및 새로운 기능이 포함됩니다. 그러나 프레임 워크를 업데이트하면 기존 코드를 중단하는 변경 사항을 도입 할 수 있으므로 업데이트 후 응용 프로그램을 철저히 테스트하는 것이 중요합니다. 일반적으로 새로운 안정 버전이 출시 된 직후 프레임 워크를 업데이트해야합니다.

모 놀리 식과 마이크로 프론트 엔드 프레임 워크를 결정하는 방법은 무엇입니까?

모 놀리 식과 마이크로 프론트 엔드 프레임 워크 사이의 결정은 프로젝트 요구 사항에 따라 다릅니다. 모 놀리 식 프레임 워크는 하나의 패키지로 필요한 모든 것을 제공하여 개발을 단순화 할 수 있지만 불필요한 기능도 포함 할 수도 있습니다. 반면, 마이크로 프레임 워크는 기본 만 제공하여 필요한 기능 만 추가 할 수 있습니다. 이로 인해 더 가볍고 효율적인 응용 프로그램으로 이어질 수 있지만 설정 및 유지 관리를 위해 더 많은 작업이 필요할 수도 있습니다.

프론트 엔드 프레임 워크에 대해 더 많이 배우기 위해 어떤 리소스가 있습니까?

프론트 엔드 프레임 워크에 대해 자세히 알아볼 수있는 많은 리소스가 있습니다. 온라인 튜토리얼, 문서 및 코스는 시작하기에 좋은 곳입니다. Stack Overflow 및 Github와 같은 웹 사이트는 귀중한 통찰력과 예를 제공 할 수 있습니다. 또한 많은 프레임 워크에는 다른 개발자로부터 질문을하고 배울 수있는 자체 커뮤니티가 있습니다.

위 내용은 회사에 적합한 프론트 엔드 프레임 워크를 선택하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!