Personal tools

Jun 04, 2013

Front-end frameworks, presente e futuro delle interfacce utente

Una breve introduzione a questi nuovi strumenti per il web design agile e alla loro integrazione con il nostro amato cms Plone

Spend your time innovating, not replicating (cit. Blueprint framework)

Per chiarire cosa sia il front-end development si potrebbe usare una metafora automobilistica (come nella migliore tradizione dei venditori): costruire una web app è come costruire una macchina, il front-end developer è chi si occupa di montare i sedili in pelle, le finiture in radica, il volante, i pedali ecc., mentre il back-end developer è chi si occupa di montare il motore, i freni e la trasmissione. Quindi il front-end development è tutta la parte di sviluppo che, una volta piazzati i componenti strutturali, si occupa di rendere il prodotto davvero utilizzabile e più confortevole.

Il front-end development coinvolge principalmente 3 tecnologie: html, css e javascript. Negli anni queste tre tecnologie hanno mostrato i loro difetti: l'html e il javascript sono vecchi e "brutti" e, anche se il css non è brutto di per sé, è totalmente anti-DRY (don't repeat yourself!). Per contro, il web di oggi impone design ogni giorno più complessi e richiede la compatibilità non solo con tutti i possibili browser, ma anche con un numero sempre maggiore di dispositivi hardware come smartphone, tablet, desktop, ecc.

Per affrontare queste nuove sfide, il front-end design ha fatto balzi in avanti come pochi altri rami dell'informatica ed è nata una miriade di nuovi strumenti, come appunto i front-end framework. Oggi non si parla più solo di fogli di stile css "artigianali" e di qualche pezzo di codice javascript qua e là, ma di veri e propri framework per il design di user interface sempre più accattivanti.
Alcuni di questi framework si limitano a fornire le fondamenta, come ad esempio Skeleton, mentre altri arrivano a coprire ogni aspetto di un'interfaccia utente come ad esempio Bootstrap.

Pro e contro dei framework

Come sempre sulle scelte tecnologiche, sul web si aprono crociate e contro-crociate (certa gente ha troppo tempo libero) quindi ecco la mia personale e per niente esaustiva lista di pro e contro all'utilizzo dei front-end frameworks.

Contro:

  • codice non scritto da noi, quindi bisogna imparare a conoscerlo
  • rischio di design simili fra loro (ormai i siti "bootstrap" si riconoscono a colpo d'occhio)
  • si rischia di aggiungere un nuovo livello di complessità e astrazione.

Pro:

  • design più veloce e agile, non c'è bisogno di partire da zero
  • la web app è già pronta per il mobile
  • l'organizzazione dei file e del codice è ben studiata e "ingegnerizzata".

Frameworks a confronto

Dei tanti front-end framework disponibili ho deciso di portare i due esempi di maggior successo con due brevi schede tecniche: Bootstrap by Twitter e Foundation by Zurb.

Twitter Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Twitter Bootstrap

 

- sviluppato da: Twitter
- primo rilascio: Agosto 2011
- licenza: Apache v2.0
- supportato da tutti i maggiori browser (IE>7)
- scritto in less (the dynamic stylesheet language)
- supporto al mobile: desktop, tablet e smartphone
- Il progetto più popolare su github.

Zurb Foundation

The most advanced responsive front-end framework in the world.

Foundation framework
- sviluppato da: Zurb, azienda attiva nel web design
- primo rilascio: Settembre 2011
- licenza: MIT Licence
- scritto in sass
- 16esimo progetto più popolare su github
- supporto al mobile: desktop, tablet e smartphone.

Per un confronto più puntuale sulle caratteristiche, consiglio queste due ottime fonti:

And the winner is...?

Tra i tanti framework open source disponibili, la mia scelta è al momento per Twitter Bootstrap per l'eccellente qualità e la quantità di features, e secondariamente per un fenomeno detto esternalità di rete.

Integrazioni con Plone

Vediamo ora come la comunità Plone ha integrato questi front-end framework (per ora solo Bootstrap) nel nostro cms.

plonetheme.bootstrap:

Questo prodotto è un tema "vecchio stile" iniziato da Nathan van Gheem e Mikel Larreategi. L'approccio di questo tema è quello di riscrivere molti template di Plone per aderire alle specifiche di Bootstrap. L'effetto, come potete vedere dall'immagine, è notevole e l'integrazione è quasi perfetta. L'unico dubbio che rimane è sulla velocità di customizzazione di questa soluzione.

 

plonetheme.bootstrap

diazotheme.bootstrap:

Un'altra ottima integrazione di Bootstrap in Plone è fatta da Izhar Firdaus di Inigo Consulting. Questo tema è basato sulla nuova tecnologia per la scrittura dei temi di Plone, cioè Diazo. L'integrazione del framework è per forza di cose meno spinta della soluzione precedente, ma l'effetto finale è comunque notevole. Al contrario del precedente tema, qui non ci sono dubbi sulla velocità di customizzazione che è sicuramente più agile.

diazotheme.bootstrap

"This is the end..."

Hold your hats and stay tuned!

Nonostante il primo prodotto abbia un ottimo livello qualitativo, la mia scelta al momento va sul secondo per la maggiore agiltià e facilità di customizzazione. In ottica futura questa soluzione permetterà anche a designer agnostici di Plone di entrare nei progetti con pochissimo overhead e di trovarsi a loro agio con gli strumenti che già utilizzano (ad es. Node.js + Plone mockups + bootstrap). Ma di questo parleremo più approfonditamente nelle prossime puntate.

comments powered by Disqus