벤치 마크를 사용한 프런트 엔드 프레임 워크의 실제 비교

Unsplash에 delfi de la Rua의 사진
업데이트 :이 기사의 최신 버전이 있습니다

지난 몇 년 동안 우리는 프론트 엔드 프레임 워크가 폭발적으로 증가했습니다. 그들 각각은 훌륭한 웹 애플리케이션을 구축 할 수 있습니다. 다음 프로젝트에 어떤 것을 사용할지 어떻게 비교하고 결정합니까?

우선, 의미있는 비교를하려면 몇 가지 사항이 필요합니다.

  1. 실제 응용 프로그램-“할 일”이상의 것. 일반적으로 "할 일"은 실제 응용 프로그램을 실제로 구축하기위한 지식과 관점을 전달하지 않습니다.
  2. 표준화-특정 규칙을 준수하는 프로젝트. 같은 장소에서 호스팅되며 백엔드 API, 정적 마크 업, 스타일 및 사양을 제공합니다.
  3. 전문가에 의해 작성 됨-해당 기술의 전문가가 이상적으로 구축 한 일관된 실제 프로젝트. 적어도 대부분의 경우에 해당됩니다 (아래 참조).

그렇다면 어떻게 그러한 프로젝트를 얻을 수 있습니까? 좋은 소식은 Eric Simons가 이미 RealWorld 프로젝트를 만들었다는 것입니다. Medium 블로그 플랫폼의 복제본입니다. 이 프로젝트의 각 구현은 동일한 HTML 구조, CSS 및 API 사양을 사용하지만 라이브러리 / 프레임 워크는 다릅니다. 전문 지식에 관해서는 대부분 사실입니다. ClojureScript로 구현을 작성하고 다시 프레임을 작성했으며 전문가라고 생각하지 않습니다. 내 방어에서 전문가가 내 코드를 검토했습니다. Daniel Compton에게 감사합니다.

이제 우리는 기준 사양을 가지고 있으며,이를 비교하기 위해 표준 테스트 / 메트릭 세트가 필요합니다.

  1. 공연. 이 앱이 콘텐츠를 표시하고 사용하는 데 얼마나 걸립니까?
  2. 크기. 앱이 얼마나 큽니까? 컴파일 된 JavaScript의 크기 만 비교합니다. CSS는 모든 변종에 공통적이며 CDN (Content Delivery Network)에서 다운로드됩니다. HTML은 모든 변형에 공통입니다. 모든 기술은 JavaScript로 컴파일하거나 변환하므로이 파일의 크기 만 조정합니다.
  3. 코드 라인. 작성자가 사양에 따라 RealWorld 앱을 작성하는 데 몇 줄의 코드가 필요 했습니까? 공정하게하기 위해 일부 앱에는 종과 휘파람이 조금 더 있지만 큰 영향을 미치지는 않습니다. 우리가 수량화하는 유일한 폴더는 각 앱에서 src /입니다.

작성 당시 (2017 년 12 월) RealWorld 프로젝트는 다음 프레임 워크에서 사용할 수 있습니다.

  • 반응 / Redux
  • 느릅 나무
  • 앵귤러 4+
  • 각도 1.5 이상
  • 반응 / MobX
  • Crizmas MVC
  • CLSJ 케 치마
  • AppRun
  • CLJS 프레임 변경 (이것은 내가 한 것입니다. 아직 RealWorld 프로젝트에 표시되지 않았습니다).

메트릭 # 1 : 성능

Chrome과 함께 제공되는 Lighthouse Audit의 첫 번째 의미있는 페인트 테스트입니다.

페인트를 빨리 칠수록 앱을 사용하는 사람의 경험이 향상됩니다. Lighthouse는 First Interactive를 측정하지만 대부분의 앱에서 거의 동일했습니다.

첫 번째 의미있는 페인트 (ms)-낮을수록 좋습니다

측정 항목 # 2 : 크기

전송 크기는 Chrome 네트워크 탭에서입니다. 서버가 제공 한 GZIP 응답 헤더와 응답 본문.

파일 크기가 작을수록 다운로드 속도가 빠르고 구문 분석이 줄어 듭니다.

이는 프레임 워크의 크기, 추가 한 추가 종속성 및 빌드 도구가 작은 번들을 얼마나 잘 만들 수 있는지에 따라 다릅니다.

전송 크기 (KB)-낮을수록 좋습니다

메트릭 # 3 : 코드 라인

cloc를 사용하여 각 repo의 src 폴더에서 코드 줄을 계산합니다. 빈 줄과 주석 줄은이 계산에 포함되지 않습니다. 왜 이것이 의미가 있습니까?

디버깅이 소프트웨어 버그를 제거하는 프로세스 인 경우 프로그래밍은 버그를 처리하는 프로세스 여야합니다-Edsger Dijkstra

코드 줄이 적을수록 오류 가능성이 적고 유지해야 할 코드가 줄어 듭니다.

# 코드 라인-적은 것이 좋습니다

결론

공연

이것은 실제 세계 비교이며 진공에서 벤치 마크가 아닙니다. 테스트는 유럽 (스위스)에서 수행되었습니다. 모든 앱은 Github에서 호스팅되었습니다. 값이 다를 수 있으므로 괜찮습니다. 각 앱에 대해 테스트를 두 번 수행 한 다음 평균화하고 반올림했습니다. 하루 종일 비교했을 때 결과는 매우 선형 적이었습니다. 대부분의 라이브러리 / 프레임 워크는 훌륭하고 우수합니다. 성능면에서 큰 차이는 없습니다.

크기

각 앱의 번들 크기는 항상 동일합니다. 유사한 구현을 비교하고 번들 크기가 어떻게 다른지 살펴 봅니다. AppRun은 미쳤다! 믿을 수 없어서 몇 번이나 봤어요 Elm은 번들 크기와 관련하여 특히 코드 줄을 볼 때 놀라운 일을하고 있습니다.

AppRun 번들 크기 18.7KB

코드 라인

이것은 소프트웨어 개발자로서 귀하에게 가장 큰 영향을 미칩니다. 코드 줄이 많을수록 더 많이 입력하고 유지 관리해야합니다. 여기에는 몇 가지 장단점이 있습니다. 특히 입력 언어와 동적 언어의 경우. 유형은 더 많은 안전을 제공하고 비용이 많이 듭니다.

유형과 동적

유형 : Elm, Angular 4+ 및 AppRun.

동적 : 반응 | Redux, Angular 1.5, 반응 | MobX, Crizmas MVC, CLJS Keechma 및 CLJS 재 프레임.

그래서 어느 것이 더 낫습니까? 낫거나 나쁘지 않습니다. TDD (Test Driven Development)처럼 어떤 사람들은 그것을 좋아하고 어떤 사람들은 그것을 싫어합니다. 소프트웨어를 사용하거나 사용하지 않고 훌륭한 소프트웨어를 개발할 수 있습니다. 더 적합한 소프트웨어를 선택하십시오.

Vue, Preact, Ember, Svelte, Aurelia 등은 어디에 있습니까?

파티에 늦은 것 같지만 걱정하지 마십시오. 우리가 그들을 가질 때 또 다른 라운드를 할 것입니다. 이미 공개 된 문제가 있습니다-기여를 고려하십시오! 또는 처음부터 시작하여 새로운 문제를여십시오.

마지막 단어

이 비교는 그것이 정확히 말하는 것입니다. 실제 세계에서 유사한 실제 웹 응용 프로그램의 다양한 구현을 비교합니다. 완벽하지는 않습니다. 서버로드, 네트워크 트래픽 및 실제 세계에서 발생하는 다른 많은 것들에 따라 다릅니다.

교정을 해준 Daniel Compton에게 감사합니다.

이 기사를 즐기고 비슷한 기사를 릴리스 할 때 알림을 받으려면 매체와 트위터에서 나를 팔로우하십시오.