So sánh thế giới thực về các khung công tác Front-End với điểm chuẩn

Ảnh của delfi de la Rùa trên Bapt
CẬP NHẬT: Có phiên bản mới hơn của bài viết này

Trong vài năm qua, chúng ta đã chứng kiến ​​sự bùng nổ của các khung công tác mặt trước. Mỗi người trong số họ đều có khả năng xây dựng các ứng dụng web tuyệt vời. Vậy làm thế nào để bạn so sánh và quyết định sử dụng cái nào cho dự án tiếp theo của bạn?

Trước hết, để làm một so sánh có ý nghĩa, chúng ta cần một vài điều:

  1. Ứng dụng Real World - Một cái gì đó còn hơn cả một bản todo làm. Thông thường, các trò chơi khác được truyền tải và kiến ​​thức để thực sự xây dựng các ứng dụng thực tế.
  2. Tiêu chuẩn hóa - Một dự án phù hợp với các quy tắc nhất định. Được lưu trữ tại cùng một nơi, cung cấp API back-end, đánh dấu tĩnh, kiểu và thông số kỹ thuật.
  3. Được viết bởi một chuyên gia - Một dự án thực tế, nhất quán, lý tưởng mà một chuyên gia về công nghệ đó sẽ xây dựng. Điều này là đúng, ít nhất là hầu hết thời gian (xem bên dưới).

Vậy làm thế nào để chúng ta có được một dự án như vậy? Tin vui là Eric Simons đã tạo ra một dự án RealWorld. Nó là một bản sao của nền tảng blog trung bình. Mỗi triển khai của dự án này sử dụng cùng một cấu trúc HTML, CSS và thông số API, nhưng một thư viện / khung khác nhau. Khi nói đến kiến ​​thức chuyên môn, nó rất đúng lúc. Tôi đã viết một triển khai trong ClojureScript và tái lập khung và tôi không coi mình là một chuyên gia. Để bảo vệ tôi, một chuyên gia đã xem lại mã của tôi - cảm ơn Daniel Compton.

Bây giờ chúng tôi có một thông số cơ bản, chúng tôi cần một bộ kiểm tra / số liệu tiêu chuẩn để so sánh chúng.

  1. Hiệu suất. Ứng dụng này mất bao lâu để hiển thị nội dung và có thể sử dụng được?
  2. Kích thước. Ứng dụng này lớn như thế nào? Chúng tôi sẽ chỉ so sánh kích thước của JavaScript được biên dịch. CSS là chung cho tất cả các biến thể và được tải xuống từ CDN (Mạng phân phối nội dung). HTML là chung cho tất cả các biến thể. Tất cả các công nghệ biên dịch hoặc dịch mã sang JavaScript, do đó chúng tôi chỉ kích thước tệp này.
  3. Dòng mã. Tác giả cần bao nhiêu dòng mã để tạo ứng dụng RealWorld dựa trên thông số kỹ thuật? Để công bằng, một số ứng dụng có nhiều tiếng chuông và còi hơn, nhưng nó không có tác động đáng kể. Thư mục duy nhất chúng tôi định lượng là src / trong mỗi ứng dụng.

Tại thời điểm viết (tháng 12 năm 2017), dự án RealWorld có sẵn trong các khung sau:

  • Phản ứng / Redux
  • Cây du
  • Góc 4+
  • Góc 1,5+
  • Phản ứng / MobX
  • Mô-đun MVC
  • CLSJ Keechma
  • Ứng dụng
  • CLJS tái lập khung (Đây là cái tôi đã làm. Nó chưa được liệt kê tại Dự án RealWorld).

Số 1: Hiệu suất

Thử nghiệm sơn có ý nghĩa đầu tiên với Ngọn hải đăng Kiểm tra đi kèm với Chrome.

Bạn vẽ càng sớm, trải nghiệm tốt hơn cho người đang sử dụng Ứng dụng. Ngọn hải đăng cũng đo lường tương tác đầu tiên, nhưng điều này gần như giống hệt nhau cho hầu hết các ứng dụng.

Sơn có ý nghĩa đầu tiên (ms) - thấp hơn là tốt hơn

Số liệu 2: Kích thước

Kích thước chuyển là từ tab mạng Chrome. Các tiêu đề phản hồi GZIPed cộng với phần thân phản hồi, được phân phối bởi máy chủ.

Tệp nhỏ hơn = tải xuống nhanh hơn và ít phân tích cú pháp hơn.

Điều này phụ thuộc vào kích thước khung của bạn, bất kỳ phụ thuộc bổ sung nào bạn đã thêm và công cụ xây dựng của bạn có thể tạo ra một gói nhỏ như thế nào.

Kích thước chuyển (KB) - thấp hơn là tốt hơn

Số liệu 3: Dòng mã

Sử dụng cloc, chúng tôi đếm các dòng mã trong mỗi thư mục src repo. Các dòng trống và bình luận không phải là một phần của tính toán này. Tại sao điều này có ý nghĩa?

Nếu gỡ lỗi là quá trình loại bỏ lỗi phần mềm, thì lập trình phải là quá trình đưa chúng vào - Edsger Dijkstra

Càng ít dòng mã bạn có xác suất lỗi nhỏ hơn và cơ sở mã nhỏ hơn để duy trì.

# Dòng mã - ít hơn là tốt hơn

Phần kết luận

Hiệu suất

Đây là So sánh RealWorld và không phải là điểm chuẩn trong chân không. Các xét nghiệm đã được thực hiện ở châu Âu (Thụy Sĩ). Tất cả các ứng dụng đã được lưu trữ trên Github. Giá trị có thể khác nhau đối với bạn, đó là tốt. Các thử nghiệm được thực hiện vài lần cho mỗi ứng dụng, sau đó tính trung bình và làm tròn. Kết quả khá tuyến tính khi so sánh trong suốt cả ngày. Hầu hết các thư viện / khung là trong phạm vi xuất sắc và tốt. Bạn đã thắng được rất nhiều sự khác biệt khi nói đến hiệu suất.

Kích thước

Kích thước gói cho mỗi Ứng dụng luôn giống nhau. Chúng tôi đang so sánh các triển khai tương tự và xem xét kích thước bó khác nhau như thế nào. AppRun là điên rồ! Tôi đã nhìn một vài lần bởi vì tôi không thể tin vào điều đó. Elm đang làm một công việc tuyệt vời khi nói đến kích thước bó và đặc biệt là khi bạn nhìn vào các dòng mã.

Kích thước gói AppRun 18,7KB

Dòng mã

Điều này có tác động lớn nhất đối với bạn là một nhà phát triển phần mềm. Càng nhiều dòng mã, bạn càng cần phải nhập và nhiều hơn để duy trì. Có một số đánh đổi ở đây. Đặc biệt là khi nói đến gõ so với ngôn ngữ động. Các loại cung cấp cho bạn an toàn hơn và có chi phí - nhiều thứ để gõ.

Gõ so với động

Gõ: Elm, Angular 4+ và AppRun.

Năng động: Phản ứng | Redux, góc 1,5, phản ứng | Khung lại của MobX, Crizmas MVC, CLJS Keechma và CLJS.

Vậy cái nào tốt hơn? Nó không tốt hơn hay tệ hơn, nó khác. Giống như TDD (Test Driven Development), một số người thích nó, một số ghét nó. Bạn có thể phát triển phần mềm tuyệt vời có hoặc không có phần mềm - chọn phần mềm phù hợp với bạn hơn.

Vue, Preact, Ember, Svelte, Aurelia và những người khác ở đâu?

Có vẻ như họ đến bữa tiệc muộn, nhưng đừng lo lắng. Tôi sẽ làm một vòng khác khi chúng tôi có chúng. Đã có những vấn đề mở - xem xét đóng góp! Hoặc bắt đầu từ đầu và mở một vấn đề mới.

Từ cuối cùng

So sánh này là chính xác những gì nó nói. So sánh các triển khai khác nhau của các ứng dụng web trong thế giới thực tương tự trong một thế giới thực. Tôi biết, nó không hoàn hảo. Nó khác nhau dựa trên tải máy chủ, lưu lượng mạng và nhiều thứ khác xảy ra trong thế giới thực.

Cảm ơn Daniel Compton đã đọc bằng chứng.

Nếu bạn thích bài viết này, và muốn được thông báo khi tôi phát hành bài viết tương tự, hãy cân nhắc theo dõi tôi trên phương tiện và twitter.