Μια Σύγκριση RealWorld των Front-End Frameworks με Benchmark (ενημέρωση 2019)

Διατίθεται επίσης σε:

Τουρκικά - χάρη στο @erdenizZz,

Πορτογαλικά - χάρη στο @felipefialho

Για τρίτη φορά, συγκρίνουμε τα πλαίσια Front-End χρησιμοποιώντας παραδείγματα εφαρμογών Real World. Η εφαρμογή RealWorld για παράδειγμα μας δίνει:

Εφαρμογή RealWorld

Κάτι περισσότερο από ένα «todo». Συνήθως τα «todos» δεν μεταφέρουν αρκετές γνώσεις και προοπτικές για να δημιουργήσουν πραγματικά πραγματικές εφαρμογές.

Τυποποιημένο

Ένα έργο που συμμορφώνεται με ορισμένους κανόνες. Παρέχει ένα back-end API, στατική σήμανση, στυλ και προδιαγραφές.

Γράφτηκε ή αναθεωρήθηκε από έναν ειδικό

Ένα συνεπές, πραγματικό έργο, το οποίο, ιδανικά, θα είχε κατασκευαστεί ή αναθεωρηθεί ένας ειδικός στην τεχνολογία αυτή.

Ποιες βιβλιοθήκες / πλαίσια συγκρίνουμε;

Από τη γραφή, υπάρχουν 18 υλοποιήσεις του Conduit στο RealWorld παράδειγμα repo app.

Δεν έχει σημασία αν έχει μεγάλη παρακολούθηση ή όχι. Το μόνο προσόν είναι ότι εμφανίζεται στη σελίδα repo του RealWorld.

Τι μετρήσεις εξετάζουμε;

Εκτέλεση

Πόσος χρόνος χρειάζεται για να δείξει το περιεχόμενο και να μπορεί να χρησιμοποιηθεί;

Μέγεθος

Πόσο μεγάλη είναι η εφαρμογή; Θα συγκρίνουμε μόνο το μέγεθος των μεταγλωττισμένων αρχείων JavaScript. Το CSS είναι κοινό σε όλες τις παραλλαγές και λαμβάνεται από ένα CDN (Content Delivery Network). Ο HTML είναι κοινός και σε όλες τις παραλλαγές. Όλες οι τεχνολογίες μεταγλωττίζονται ή μεταδίδονται σε JavaScript, επομένως το μέγεθος αυτού του αρχείου μόνο.

Γραμμές κώδικα

Πόσες γραμμές κώδικα χρειάστηκε ο δημιουργός για να δημιουργήσει την εφαρμογή RealWorld με βάση τις προδιαγραφές; Για να είμαστε δίκαιοι, ορισμένες εφαρμογές έχουν λίγο περισσότερα κουδούνια και σφυρίγματα, αλλά δεν θα πρέπει να έχουν σημαντικό αντίκτυπο. Ο μόνος φάκελος που ποσοτικοποιούμε είναι src/σε κάθε εφαρμογή.

Μέτρηση # 1: Απόδοση

Θα ελέγξουμε τη βαθμολογία απόδοσης από το Lighthouse Audit που συνοδεύει το Chrome. Το Lighthouse επιστρέφει βαθμολογία απόδοσης μεταξύ 0 και 100. Το 0 είναι το χαμηλότερο δυνατό σκορ.

Ρυθμίσεις ελέγχου

Η απόδοση είναι μια συνδυασμένη βαθμολογία από τις ακόλουθες μετρήσεις

  • Πρώτη ικανοποιητική βαφή
  • Πρώτο νόημα βαφής
  • Δείκτης ταχύτητας
  • Πρώτη CPU σε αδράνεια
  • Ώρα για διαδραστικό
  • Εκτιμώμενος λανθάνων χρόνος εισαγωγής

Για περισσότερες πληροφορίες, ανατρέξτε στον Οδηγό βαθμολογίας Lighthouse.

Απόδοση TL; DR

Όσο πιο γρήγορα ζωγραφίζετε και όσο πιο γρήγορα κάποιος μπορεί να κάνει κάτι, τόσο καλύτερη είναι η εμπειρία για το άτομο που χρησιμοποιεί την εφαρμογή.

Σημείωση: Το PureScript παραλείφθηκε λόγω έλλειψης εφαρμογής επίδειξης.

συμπέρασμα

Οι περισσότερες εφαρμογές βαθμολογούν πάνω από 90. Πιθανότατα δεν θα αισθανθείτε μεγάλη διαφορά όσον αφορά την απόδοση.

Μέτρηση # 2: Μέγεθος

Το μέγεθος μεταφοράς προέρχεται από την καρτέλα δικτύου Chrome. Οι κεφαλίδες απόκρισης GZIPed συν το σώμα απόκρισης, όπως παραδόθηκε από τον διακομιστή.

Αυτό εξαρτάται από το μέγεθος του πλαισίου σας, καθώς και από τυχόν επιπλέον εξαρτήσεις που προσθέσατε και πόσο καλά το εργαλείο κατασκευής σας μπορεί να εξαλείψει τον αχρησιμοποίητο κώδικα από το πακέτο σας.

Μέγεθος TL; DR

Όσο μικρότερο είναι το αρχείο, τόσο πιο γρήγορη είναι η λήψη και λιγότερη ανάλυση.

συμπέρασμα

Υπάρχουν πολλά εντυπωσιακά πράγματα σε αυτόν τον τομέα. Svelte - Το μαγικό πλαίσιο UI που εξαφανίζεται - ισχύει πραγματικά για τη γραμμή διάτρησης. Το Stencil είναι το νέο παιδί σε αυτό το σημείο αναφοράς και επίσης αποδίδει αρκετά καλά. Και τα δύο είναι σχετικά νέα και ωθούν τα όρια του δυνατού όσον αφορά το μέγεθος.

Μέτρηση # 3: Γραμμές κώδικα

Χρησιμοποιώντας το cloc μετράμε τις γραμμές κώδικα στον φάκελο src κάθε repo. Οι κενές γραμμές και τα σχόλια δεν αποτελούν μέρος αυτού του υπολογισμού. Γιατί είναι αυτό σημαντικό;

Εάν ο εντοπισμός σφαλμάτων είναι η διαδικασία αφαίρεσης σφαλμάτων λογισμικού, τότε ο προγραμματισμός πρέπει να είναι η διαδικασία τοποθέτησής τους - Edsger Dijkstra

Γραμμές κώδικα TL; DR

Αυτό δείχνει πόσο σύντομη είναι δεδομένη βιβλιοθήκη / πλαίσιο / γλώσσα. Πόσες γραμμές κώδικα χρειάζεστε για να εφαρμόσετε σχεδόν την ίδια εφαρμογή (μερικές από αυτές έχουν λίγο περισσότερες ζώνες και σφυρίγματα) ανάλογα με τις προδιαγραφές.

Σημείωση Imba: Το Imba παραλείφθηκε λόγω του ότι ο cloc δεν ήταν σε θέση να επεξεργαστεί .imbaαρχεία.

Σημείωση Elm: Οι προγραμματιστές Elm γράφουν τον κώδικα λίγο πιο κάθετα, επομένως ο υψηλός αριθμός LoC - τουλάχιστον αυτό είναι που μου έχουν πει.

Σημείωση Angular + ngrx: Ο υπολογισμός LoC γίνεται μόνο με /libsφάκελο συμπεριλαμβανομένων .tsκαι .htmlαρχείων. Εάν πιστεύετε ότι αυτό είναι λάθος, ενημερώστε με ποιος είναι ο σωστός αριθμός και πώς τον υπολογίσατε.

Σημείωση Hyperapp: Το LoC δεν ήταν σωστό κατά τη δημοσίευση του άρθρου, χάρη στον Mateusz Kwasniewski που επεσήμανε τον σωστό τρόπο υπολογισμού του LoC.

συμπέρασμα

Το ClojureScript με το re-frame σας δίνει το μεγαλύτερο bang; για τη LoC. Το Clojure είναι γνωστό ότι είναι ασυνήθιστα εκφραστικό. Εάν σας ενδιαφέρει το LoC, θα πρέπει να δείτε τα ClojureScript, AppRun και Svelte.

Περίληψη

Λάβετε υπόψη ότι δεν πρόκειται ακριβώς για σύγκριση μήλων-μήλων. Ορισμένες εφαρμογές χρησιμοποιούν διαχωρισμό κώδικα και μερικές όχι. Μερικά από αυτά φιλοξενούνται στο GitHub, μερικά στο Now και μερικά στο Netlify. Θέλετε ακόμα να μάθετε ποιο είναι το καλύτερο; Το καλύτερο είναι αυτό που ταιριάζει στις ανάγκες σας.

Ε: Σας αρέσουν οι τύποι;

Α: Εξετάστε τα Elm, PureScript και TypeScript - Angular, AppRun, Dojo.

Ε: Θέλετε να έχετε πολύ μικρό αποτύπωμα;

Α: Ρίξτε μια ματιά στα Svelte, Stencil και AppRun.

Ε: Θέλετε να διατηρήσετε τη μικρότερη βάση κώδικα για συντήρηση;

Α: Ελέγξτε το ClojureScript με εκ νέου πλαίσιο, AppRun και Svelte.

Ε: Θέλετε να μάθετε κάτι νέο;

Α: Διαλέξτε αυτό που δεν γνωρίζετε!

Συχνές ερωτήσεις

# 1 Γιατί δεν περιλαμβάνονται τα πλαίσια X, Y και Z σε αυτήν τη σύγκριση;

Επειδή η υλοποίηση δεν έχει ολοκληρωθεί στο RealWorld repo. Σκεφτείτε να συνεισφέρετε! Εφαρμόστε τη λύση στην αγαπημένη σας βιβλιοθήκη / πλαίσιο επιλογής και θα την συμπεριλάβουμε την επόμενη φορά!

# 2 Γιατί το ονομάζεις πραγματικό κόσμο;

Επειδή είναι λίγο περισσότερο από μια εφαρμογή εκκρεμών εργασιών. Από την RealWorld δεν εννοούμε ότι θα συγκρίνουμε τους μισθούς, τη συντήρηση, την παραγωγικότητα, τις καμπύλες μάθησης κ.λπ. Υπάρχουν άλλες έρευνες που απαντούν σε μερικές από αυτές τις ερωτήσεις. Αυτό που εννοούμε με το RealWorld είναι μια εφαρμογή που συνδέεται με έναν διακομιστή, επικυρώνει και επιτρέπει στους χρήστες να CRUD - όπως θα έκανε και μια πραγματική εφαρμογή.

# 3 Γιατί δεν συμπεριλάβατε το αγαπημένο μου πλαίσιο;

Παρακαλώ δείτε το # 1 παραπάνω, αλλά για κάθε περίπτωση, έρχεται και πάλι: επειδή η υλοποίηση δεν έχει ολοκληρωθεί στο RealWorld repo. Δεν κάνω όλες τις υλοποιήσεις - είναι μια κοινοτική προσπάθεια. Σκεφτείτε να συνεισφέρετε εάν θέλετε να δείτε το πλαίσιο σας στη σύγκριση.

# 4 Ποια έκδοση της βιβλιοθήκης / πλαισίου συμπεριλάβατε;

Αυτό που είναι διαθέσιμο κατά τη στιγμή της καλωδίωσης (Μαρ 2019). Οι πληροφορίες προέρχονται από το RealWorld repo. Είμαι βέβαιος ότι μπορείτε να το βρείτε από το repo GitHub.

# 5 Γιατί ξεχάσατε να συμπεριλάβετε ένα πλαίσιο που είναι πιο δημοφιλές από αυτό στη σύγκριση;

Και πάλι, δείτε παραπάνω. Η υλοποίηση δεν έχει ολοκληρωθεί στο RealWorld repo. είναι τόσο απλό.

Ευχαριστώ τους Rich Harris και Richard Feldman που ρίχνουν μια ματιά πριν από τη δημοσίευση.

Ενημερώσεις:

Όταν δημοσιεύτηκε αυτό το άρθρο, το TL, το DR LoC είχε την ακόλουθη περιγραφή:

Όσο λιγότερες γραμμές κώδικα έχετε, τότε η πιθανότητα εύρεσης σφάλματος είναι μικρότερη. Έχετε επίσης μια μικρότερη βάση κώδικα για συντήρηση. Εάν σας αρέσει αυτό το άρθρο, θα πρέπει να με ακολουθήσετε στο Twitter. Γράφω / tweet μόνο για τον προγραμματισμό και την τεχνολογία.