venerdì 29 aprile 2011

La cicala e la formica: CKeditor vs TinyMCE


Rammentate la favola de “la cicala e la formica” di Esopo? Forse ricordate quella adattata da Jean de La Fontaine, ma sicuramente non conoscete la variante 2.0.



C'era una cicala che cantava:
It's fast! Faster than ever!
Since the very beginning, we always have considered performance as the basis for our development. The final results are amazing, bringing yet another unique feature that you'll find only with CKEditor.

...e una formica che raccoglieva mattoni per l'inverno.


Un bel giorno...

L'inverno arrivò: Benchmark di comparazione tra CKeditor e TinyMCE

Raccogliete tutta la legna da ardere, i flame zampillano.

Per questo tecnicissimo benchmark ho utilizzato le ultime release disponibili dei due famosi Javascript WYSIWYG Editor:
TinyMCE - release 3.4.2
CKeditor - release 3.5.3

NOTE: Per entrambi non ho utilizzato tool aggiuntivi di compressione, framework javascript (jquery), classi PHP per istanziare gli oggetti, ecc... insomma li ho presi così come papà li ha fatti, e ho caricato gli editor JS in un'identica pagina HTML personalizzando la toolbar in modo da renderli, a livello funzionale, identici.


Prima le conclusioni

Ecco i miei personalissimi giudizi elaborati dal benchmark:
CKeditorTinyMCE
Spazio su disco01
Installazione1 0
Aspetto10
Velocità0 1
Output 01
Totale AND0 0
Totale OR1 1
Totali calcolati secondo una logica binaria, per un'altra logica fate vobis ;-)

..volete continuare a leggere?

Spazio disco: quando lo spazio non basta mai

Soprattutto quando tale spazio ci viene centellinato da un servizio di hosting. I sorgenti salvati sul disco dicono che i due editor vestono taglie differenti:

TinyMCE: 2.1 Mb (samples esclusi)
CKeditor: 6.3 Mb (samples esclusi)

Spezzando una lancia in favore a CKeditor, possiamo dire che esso offre la comodità di includere “on the box” il supporto per tutte le lingue, mentre il suo rivale TinyMCE ha optato per una soluzione più snella includendo soltanto la lingua inglese e dando l'opportunità, attraverso un pratico servizio online, di scaricare le ulteriori ed eventuali lingue di cui potremmo aver bisogno.

Tuttavia, pur rimuovendo dal calcolo dello spazio il supporto a tutte le lingue, la prova bikini per CKeditor rimane comunque deludente:

TinyMCE: 2 Mb (samples e languages esclusi)
CKeditor: 4 Mb (samples e languages esclusi)

Installazione: il fai-da-te del webmaster

L'obeso CKeditor si prende una piccola rivincita, per personalizzare la toolbar dell'editor nella pagina HTML di test, esso si dimostra più leggero, intuitivo e a prova di RTFM ("Leggiti il fottuto manuale”). Già, TinyMCE, per quanto concerne la personalizzazione della toolbar, ha una sintassi opulenta e meno flessibile, infatti prima o poi ci si scorna con il fatto che per visualizzare alcuni pulsanti bisogna configurare anche il plugin relativo... ed eccoci a spulciare la ricca documentazione per scoprire il nome dell'oscuro plugin da scrivere.

Righe del codice di test per l'init di TinyMCE:
tinyMCE.init({
            mode : "textareas",
            theme : 'advanced',
            theme_advanced_toolbar_location : 'top',
            theme_advanced_toolbar_align : 'left',
            plugins : 'paste,table,searchreplace',
            theme_advanced_buttons1 : 'code,pastetext,|,undo,redo,|,bold,italic,strike,sub,sup,|,bullist,numlist,|,charmap',
            theme_advanced_buttons2 : 'search,replace,|,blockquote,link,unlink,tablecontrols',
            theme_advanced_buttons3 : 'formatselect,anchor,hr,image',
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true
        });

Righe del codice di test per l'init di CKeditor:
 CKEDITOR.replace( 'Editor',
        {
            fullPage : false,
            toolbar :
            [
                ['Source','PasteText'],
                ['Undo','Redo','-', 'Bold', 'Italic', '-', 'BulletedList', 'NumberedList', '-', 'SpecialChar' ],
                '/',
                ['Find','Replace','-','Blockquote','-','Link','Unlink','Anchor', '-','Table'],
                '/',
                ['Format', 'HorizontalRule', 'Image'],
            ]
        });


Per le pagine test che ho realizzato, il peso dell'inizializzazione dei due editor è così ripartito (uhè, son briciole ;-) )

TinyMCE: 543 byte (inline)
CKeditor: 343 byte (inline)

Aspetto: l'abito non fa il monaco?

Non ho mai sentito parlare di un benchmark che prende in esame l'aspetto di un software, bene, ecco perché sento il dovere tecnico di considerare anche questo punto. Ovviamente non è un'analisi oggettiva e ci sarà chi dirà “basta installare un tema differente”... già.
L'adiposo CKeditor ha un aspetto paffuto e morbido, mentre il suo rivale è noiosamente piatto e asciutto.

Nel contempo, il paffuto CKeditor porta in seno delle icone a "dente di sega" mentre l'asciutto TinyMCE nutre meglio la definizione delle sue icone.

(Clicca per ingrandire)
Infine, la dialog che si apre premendo il pulsante “link”, spezza il mio indugio a favore di CKeditor.
CKeditor utilizza una "finestra" disegnata con una div sovrapposta all'interno della pagina html, risultato così più ordinata e funzionale (non si perde nella barra delle applicazioni aperte) rispetto l'antica soluzione del pop-up utilizzata da TinyMCE; inoltre il contenuto della dialog per l'inserimento del  link di CKeditor è più chiaro e completo del suo rivale.



La sensazione di “paffuto” trasmessa da CKeditor, di fatto risulta essere anche un gonfiore reale: il peso dei CSS e relative immagini che il mio browser si è dovuto succhiare dalla pagina test è:

TinyMCE: 29,6 Kb
CKeditor: 44,7 Kb

Veloce? Ascoltiamo la banda municipale

La velocità di caricamento di una pagina remota dipende essenzialmente dal binomio: quanti chili pesa la pagina e quanti chili l'utente scarica al secondo. Dato che il secondo parametro è relativo e vincolato per ciascun navigatore, il webmaster può soltanto (o quasi, l'equazione non è così lineare) agire sul peso della pagina remota per influire sulle velocità di caricamento. Pertanto possiamo semplificare affermando che più una pagina è leggera più essa sarà veloce ad essere caricata, nelle medesime condizioni, sul browser dell'utente.


Ebbene, taccio il mio cicaleccio e vi lascio questa esplicativa e silenziosa carrellata di screenshot comparativi dei report di Yslow sulla pagina test:


 
In queste statistiche sono stati considerati i componenti compressi (GZip) in quanto il mio server web ha quest'opzione predefinita

In questa tabella la lista dei file e i loro pesi per i due editor, notare il peso nel caso in cui non si usasse la compressione GZip


Con quest'ultima foto vediamo il Giudizio complessivo attribuito dall'analisi  di YSLOW (A: giudizio ottimo - Z: giudizio pessimo)






Output: licenza poetica o errore?

Copiando velocemente un semplice testo formatto da OpenOffice sui due editor caricati con lo stesso browser (Chromium), si nota una differenza di sintassi nel codice HTML di output.

Questo è il testo campione incollato nei due editor da una pagina di OpenOffice:
normale
bold
corsivo
font
sottolineato
colore

  1. punto elenco
     

E questo è l'output ottenuto con CKeditor:


Mentre questo è l'output ottenuto con TinyMCE:

Ho evidenziato le parti del codice di output che differiscono tra i due editor.
In HTML5 non c'è alcun errore nell'utilizzare il tag B o STRONG, cambia però la valenza del testo racchiuso. Lo stesso discorso vale per i tag I e EM.


Più "poetico" ma meno corretto invece è l'utilizzo del deprecato tag U per il sottolineato e del tag FONT per lo stile del font.

Diciamo, quindi, che, dall'elaborazione di questo semplice testo formattato,  TinyMCE risulta essere più attento alla sintassi del codice.



Considerazioni riassuntive

Se siete arrivati a leggere fin qui vi fate più scrupoli di quanti me ne faccio io (e son tanti), ma ricordatevi che la scelta di un Javascript WYSIWYG Editor non è una strada senza ritorno, anche se doveste scegliere un editor dal nome inquietante come MooRTE.

Informazioni utili

Non dimentichiamoci che esistono centina di Javascript WYSIWYG Editor; qui, ad esempio, trovate un ricco elenco: www.htmlarea.com

Eventualmente, da "very dirty developer", possiamo sempre crearcene uno noi, con pochi byte e poco sforzo: http://javascript.html.it/articoli/leggi/2269/costruire-un-web-editor-wysiwyg/

Nessun commento:

Posta un commento