Progetto RealWorld: confronto di framework front-end
Il materiale che traduciamo oggi per la vostra attenzione è una versione aggiornata dell'articolo sullo studio delle strutture, che è stato pubblicato nel dicembre 2017 , tenendo conto della situazione attuale nel 2018 .
immagine
Durante la ricerca viene utilizzata un'applicazione, le cui varianti sono state create all'interno del progetto RealWorld utilizzando vari framework. Qui non puoi parlare della completa identità delle varie opzioni per l'applicazione, ma sono create su piattaforme diverse, ma questo approccio ti consente di analizzare e confrontare realisticamente le caratteristiche di diversi framework. Se parliamo di questa applicazione, possiamo notare le seguenti caratteristiche:
Compiti reali RealWorld è un'applicazione la cui funzionalità va oltre lo "elenco delle cose da fare" standard. Tali applicazioni sono solitamente molto semplici, non riflettono tutto ciò che è necessario in questi programmi.
Standardizzazione. Ogni versione dell'applicazione soddisfa determinati requisiti. In particolare, questi requisiti descrivono l'API del server, il markup statico e le caratteristiche dell'applicazione.
Supporto di esperti. Le applicazioni sono scritte da specialisti di fascia alta o testate da loro.
Nel preparare questo studio, i commenti sono stati presi in considerazione per la sua versione precedente. In particolare, il framework Vue non è stato studiato prima, ma ora è sulla lista. Vale la pena notare che qui viene utilizzata la versione Angolare, utilizzata per lo sviluppo, ma l'utilizzo della versione di produzione di questo framework nell'applicazione è solo una questione di tempo.
quadri
Lo studio include tutti i framework elencati nella pagina del progetto . Quando si selezionavano i quadri, ad esempio, la loro popolarità non veniva presa in considerazione. Il requisito principale è l'esistenza di un'applicazione sperimentale nel repository RealWorld.
Quadri inclusi nello studio
Caratteristiche analizzate
Nel corso dello studio di applicazioni sviluppate utilizzando vari framework, sono state prese in considerazione le seguenti caratteristiche:
Prestazioni dell'applicazione. Quanto tempo impiega l'applicazione per caricare, visualizzare ed essere pronto a lavorare con esso?
La dimensione dell'applicazione finita. Qual è la dimensione dell'applicazione? Sono state confrontate solo le dimensioni dei file JS compilati. In tutti i casi, sono state utilizzate le stesse regole CSS, i materiali corrispondenti sono stati scaricati dal CDN. Ovunque è stato utilizzato lo stesso markup HTML. Il codice del programma, preparato per mezzo di tutti i framework, è stato compilato o trascritto in JavaScript, di conseguenza sono state confrontate solo le dimensioni del file o dei file JS finali.
Numero di righe del codice dell'applicazione. Quante righe di codice dovrei scrivere per creare un'applicazione RealWorld che soddisfi i requisiti? Qui vale la pena notare che in alcune varianti dell'applicazione sono incluse funzioni aggiuntive secondarie, ma questo non ha molto effetto sul risultato finale. Durante l'analisi, è src/stata esaminata solo la cartella di ciascuna delle applicazioni.
produttività
Qui abbiamo utilizzato una metrica come il primo rendering di pagina significativo ( First Meaningful Paint ) ottenuto con lo strumento Lighthouse fornito con Chrome.
Più velocemente viene visualizzata la pagina dell'applicazione, migliore sarà percepita dagli utenti. Lo strumento Faro consente anche di misurare la prima metrica interattiva , ma è ancora in fase di beta test ed è quasi identica per tutte le applicazioni, quindi qui ci siamo limitati all'indicatore della prima visualizzazione di pagina significativa.
La prima visualizzazione di pagina significativa per diversi framework in millisecondi. Di questo indicatore è inferiore - meglio è.
Se guardi i risultati, puoi dire che sono tutti abbastanza bravi e in pratica notare che la differenza tra loro sarà molto difficile.
Dimensione dell'applicazione
Qui abbiamo analizzato la quantità di dati trasmessi ricevuti tramite la scheda Rete degli strumenti di sviluppo di Chrome. Ha preso in considerazione tutto ciò che viene trasmesso dal server, incluse le intestazioni e il corpo della risposta. Più piccolo è il file dell'applicazione finita, più veloce è il caricamento e meno tempo è necessario per analizzarlo nel browser.
Questo indicatore dipende dalla dimensione del codice framework, dalle dipendenze esterne aggiunte al progetto e dalla qualità dello strumento utilizzato per creare gli assembly.
La dimensione dei dati trasmessi in kilobyte. Meno è, meglio è.
Puoi vedere che i leader di questo indicatore sono Svelte, Dojo 2, AppRun e Crizmas MVC. È ancora difficile dire qualcosa di specifico sull'ELM, soprattutto dati i dati sulla dimensione del codice dei programmi, che considereremo di seguito. Inoltre, sarebbe interessante vedere come Hyperapp si mostrerà in questo confronto. Forse saremo in grado di esplorare questo quadro la prossima volta.
Numero di righe di codice
Il conteggio del numero di righe del codice dell'applicazione è stato eseguito utilizzando cloc . Sono stati elaborati solo i file nella cartella src. Linee vuote e commenti non sono stati presi in considerazione. Perché il numero di righe di codice necessarie per creare un'applicazione è un indicatore importante? Ecco cosa ha detto Edsger Dijkstra al riguardo: "Se il debug è il processo di rimozione degli errori, la programmazione dovrebbe essere il processo per crearli."
Il numero di righe di codice che devi scrivere per creare un'applicazione utilizzando diversi framework. Meno questo indicatore è, meglio è.
Meno linee di codice ti servono per creare un'applicazione - meno è probabile che faccia qualcosa di sbagliato. Inoltre, i progetti rappresentati da una minore quantità di codice sono più facili da gestire.
risultati
Questo articolo presenta i risultati dell'analisi dei framework web per diverse caratteristiche. Naturalmente, la scelta del framework per un determinato progetto è un compito molto più ambizioso rispetto alla velocità di caricamento delle applicazioni scritte utilizzando diversi framework, tenendo conto delle dimensioni dei file compilati e della quantità di codice che deve essere scritta per raggiungere la funzionalità richiesta. Tuttavia, riteniamo che questa ricerca ci consentirà di guardare a vari quadri da un nuovo punto di vista, e quindi di aiutare a prendere decisioni per coloro che sono impegnati a scegliere la piattaforma per il loro progetto.
immagine
Durante la ricerca viene utilizzata un'applicazione, le cui varianti sono state create all'interno del progetto RealWorld utilizzando vari framework. Qui non puoi parlare della completa identità delle varie opzioni per l'applicazione, ma sono create su piattaforme diverse, ma questo approccio ti consente di analizzare e confrontare realisticamente le caratteristiche di diversi framework. Se parliamo di questa applicazione, possiamo notare le seguenti caratteristiche:
Compiti reali RealWorld è un'applicazione la cui funzionalità va oltre lo "elenco delle cose da fare" standard. Tali applicazioni sono solitamente molto semplici, non riflettono tutto ciò che è necessario in questi programmi.
Standardizzazione. Ogni versione dell'applicazione soddisfa determinati requisiti. In particolare, questi requisiti descrivono l'API del server, il markup statico e le caratteristiche dell'applicazione.
Supporto di esperti. Le applicazioni sono scritte da specialisti di fascia alta o testate da loro.
Nel preparare questo studio, i commenti sono stati presi in considerazione per la sua versione precedente. In particolare, il framework Vue non è stato studiato prima, ma ora è sulla lista. Vale la pena notare che qui viene utilizzata la versione Angolare, utilizzata per lo sviluppo, ma l'utilizzo della versione di produzione di questo framework nell'applicazione è solo una questione di tempo.
quadri
Lo studio include tutti i framework elencati nella pagina del progetto . Quando si selezionavano i quadri, ad esempio, la loro popolarità non veniva presa in considerazione. Il requisito principale è l'esistenza di un'applicazione sperimentale nel repository RealWorld.
Quadri inclusi nello studio
Caratteristiche analizzate
Nel corso dello studio di applicazioni sviluppate utilizzando vari framework, sono state prese in considerazione le seguenti caratteristiche:
Prestazioni dell'applicazione. Quanto tempo impiega l'applicazione per caricare, visualizzare ed essere pronto a lavorare con esso?
La dimensione dell'applicazione finita. Qual è la dimensione dell'applicazione? Sono state confrontate solo le dimensioni dei file JS compilati. In tutti i casi, sono state utilizzate le stesse regole CSS, i materiali corrispondenti sono stati scaricati dal CDN. Ovunque è stato utilizzato lo stesso markup HTML. Il codice del programma, preparato per mezzo di tutti i framework, è stato compilato o trascritto in JavaScript, di conseguenza sono state confrontate solo le dimensioni del file o dei file JS finali.
Numero di righe del codice dell'applicazione. Quante righe di codice dovrei scrivere per creare un'applicazione RealWorld che soddisfi i requisiti? Qui vale la pena notare che in alcune varianti dell'applicazione sono incluse funzioni aggiuntive secondarie, ma questo non ha molto effetto sul risultato finale. Durante l'analisi, è src/stata esaminata solo la cartella di ciascuna delle applicazioni.
produttività
Qui abbiamo utilizzato una metrica come il primo rendering di pagina significativo ( First Meaningful Paint ) ottenuto con lo strumento Lighthouse fornito con Chrome.
Più velocemente viene visualizzata la pagina dell'applicazione, migliore sarà percepita dagli utenti. Lo strumento Faro consente anche di misurare la prima metrica interattiva , ma è ancora in fase di beta test ed è quasi identica per tutte le applicazioni, quindi qui ci siamo limitati all'indicatore della prima visualizzazione di pagina significativa.
La prima visualizzazione di pagina significativa per diversi framework in millisecondi. Di questo indicatore è inferiore - meglio è.
Se guardi i risultati, puoi dire che sono tutti abbastanza bravi e in pratica notare che la differenza tra loro sarà molto difficile.
Dimensione dell'applicazione
Qui abbiamo analizzato la quantità di dati trasmessi ricevuti tramite la scheda Rete degli strumenti di sviluppo di Chrome. Ha preso in considerazione tutto ciò che viene trasmesso dal server, incluse le intestazioni e il corpo della risposta. Più piccolo è il file dell'applicazione finita, più veloce è il caricamento e meno tempo è necessario per analizzarlo nel browser.
Questo indicatore dipende dalla dimensione del codice framework, dalle dipendenze esterne aggiunte al progetto e dalla qualità dello strumento utilizzato per creare gli assembly.
La dimensione dei dati trasmessi in kilobyte. Meno è, meglio è.
Puoi vedere che i leader di questo indicatore sono Svelte, Dojo 2, AppRun e Crizmas MVC. È ancora difficile dire qualcosa di specifico sull'ELM, soprattutto dati i dati sulla dimensione del codice dei programmi, che considereremo di seguito. Inoltre, sarebbe interessante vedere come Hyperapp si mostrerà in questo confronto. Forse saremo in grado di esplorare questo quadro la prossima volta.
Numero di righe di codice
Il conteggio del numero di righe del codice dell'applicazione è stato eseguito utilizzando cloc . Sono stati elaborati solo i file nella cartella src. Linee vuote e commenti non sono stati presi in considerazione. Perché il numero di righe di codice necessarie per creare un'applicazione è un indicatore importante? Ecco cosa ha detto Edsger Dijkstra al riguardo: "Se il debug è il processo di rimozione degli errori, la programmazione dovrebbe essere il processo per crearli."
Il numero di righe di codice che devi scrivere per creare un'applicazione utilizzando diversi framework. Meno questo indicatore è, meglio è.
Meno linee di codice ti servono per creare un'applicazione - meno è probabile che faccia qualcosa di sbagliato. Inoltre, i progetti rappresentati da una minore quantità di codice sono più facili da gestire.
risultati
Questo articolo presenta i risultati dell'analisi dei framework web per diverse caratteristiche. Naturalmente, la scelta del framework per un determinato progetto è un compito molto più ambizioso rispetto alla velocità di caricamento delle applicazioni scritte utilizzando diversi framework, tenendo conto delle dimensioni dei file compilati e della quantità di codice che deve essere scritta per raggiungere la funzionalità richiesta. Tuttavia, riteniamo che questa ricerca ci consentirà di guardare a vari quadri da un nuovo punto di vista, e quindi di aiutare a prendere decisioni per coloro che sono impegnati a scegliere la piattaforma per il loro progetto.
Коментарі
Дописати коментар