Framework UI a confronto. Chi vince la sfida.

07 May 2019 | M.A.D.R.

Un framework per lo sviluppo front end non è altro che un’insieme di strumenti utili per velocizzare la creazione di siti web e siti web responsive.

Ed eccoci qui a dover far i conti con un nuovo progetto web, quale framework UI di supporto utilizzare?

Come anticipavo nel post precedente ho già espresso la mia solidarietà a Bootstrap, ma non è l’unico framework (in realtà è una raccolta di librerie) esistente con una serie di plugin (per non dire una valanga), da scaricare implementare ed utilizzare in un batter d’occhio, il nostro amato ha dei degni rivali e in alcuni casi sono più performanti, più facili da gestire e più completi, non nego di aver utilizzato 4 su 5 per diversi progetti e diverse esigenze.

Come potete immaginare ogni framework ha dei pro e contro, e naturalmente sono più o meno specializzati in diverse sezioni, ma qualcosa in comune esiste?

Certo, tutti utilizzano la filosofia mobile-first, hanno la gestione a griglia e flex grid, gestiscono in modo autonomo le posizioni, alcuni elementi base (presenti in tutti vedi es. “modal, notify, tooltip, etc") sono pronti per essere utilizzati senza aver bisogno di installare librerie esterne, hanno dei template pronti all’uso e pienamente configurabili, includono files HTML, CSS, JS per agevolare la creazione di un sito web. Visto e considerato che la maggior parte dei siti web ha la struttura molto simile, un framework può aiutare gli sviluppatori in modo tale da non dover inizare un progetto da zero, risparmiando molto tempo.

Detto ciò la domanda sorge spontanea: quindi sono equipollenti?

No, assolutamente no. La risposta dipende molto da cosa occorre per realizzare il progetto e quali specifiche bisogna seguire.

Farei subito una premessa “non precludiamo l’uso di altri tool  perchè ne conosciamo solo uno":

Se il progetto è importante, deve essere innovativo, necessita di manutenzione e revisione del codice multiutente, la scelta non può che ricadere su Bootstrap… Ma se il progetto è originale, i collaboratori sono disposti ad migrare verso altri framework, la scelta diventa più ampia e la forbice di differenze diventa talmente piccola tale da far diventare indolore la scelta di framework meno conosciuto ma molto più validi.

Bootstrap

  1. Mobile – Tablet – Desktop
  2. Elementi Estendibili
  3. Lavora in Pixel (non in %) “is Good"
  4. Less / SASS
  5. Prototipizzazzione facile e veloce

Foundation

  1. Mobile – Tablet – Desktop
  2. Elementi Estendibili (non sempre)
  3. Lavora in EM  “no Good"
  4. Solo in SASS
  5. Approccio di lavoro definito dall’utente

UiKit

  1. Mobile – Tablet – Desktop
  2. Elementi Estendibili
  3. Lavora in Pixel in % e in EM “is VERY Good"
  4. Less / SASS / CSS
  5. Editor di temi
  6. É veramente poco conosciuto ma ne vale la pena!

Semantic

  1. Mobile – Tablet – Desktop
  2. Elementi Estendibili
  3. Oltre 3000 classi semantiche (…. qui iniziano i problemini…)
  4. Gestione area di lavoro definita dall’utente
  5. Less / SASS
  6. Eccellenti possibilità di integrazione (React, Ember, Meteor, PHP-Paketmanager, Gulp)
  7. Abbastanza difficile
  8. Alcuni CSS funzionano solo se implementati da JS

Bulma (no quella di Dragon Ball)

  1. Mobile – Tablet – Desktop
  2. Elementi Estendibili
  3. Pesa solo  21 KB
  4. SASS e 39 parziali
  5. Eccellenti possibilità di integrazione
  6. Nuovo (fine 2017)
  7. É diventata l’alternativa più valida di tutti gli altri framework per semplicità e rapidità di caricamento

Soluzioni complete per ogni esigenza