Personal tools

javascript

Jul 05, 2013

Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

In vacanza più leggeri... anche i nostri siti!

Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

Filed Under:

Introduzione a Conditioner.js, una libreria che ti permette di caricare i moduli js del tuo sito solo alla presenza di un determinato stato che potrai definire tu

Non è una novità: più aggiungiamo funzionalità sotto forma di librerie JavaScript, più i nostri siti si appesantiscono. Se però le funzionalità aggiunte sono necessarie, quello che possiamo fare è ottimizzare le risorse e limitarne le dimensioni, quindi il tempo necessario a scaricarle.

Non sarebbe bello avere a disposizione una sintassi che ci permetta di caricare codice JavaScript in base a condizioni verificate runtime, analizzando lo stato della pagina? Caricare lo snippet di codice solo se richiesto e se predeterminate condizioni sono realizzate?

Un caso estremamente familiare a tutti i front-end developer: quando progettiamo il nostro sito per dispositivi mobile tendiamo a rimuovere i componenti che non sarebbero utili all'utente (solitamente per le limitazioni dello spazio disponibile), allo scopo di rendere meglio fruibili i contenuti web più importanti. Se gli elementi che vogliamo rimuovere utilizzano funzionalità JavaScript, però, questi ultimi vengono comunque scaricati. Non vale forse la pena evitare che ciò succeda (risparmiando così anche un'inutile chiamata al server)?

Conditioner.js è esattamente quello che ci serve. E' una libreria JavaScript che si occupa di fornire un linguaggio che permetta la definizione di condizioni per caricare funzionalità solo se necessario.

Siamo noi a definire i requisiti affinché il modulo js venga caricato.

Inoltre Conditioner.js consente di gestire il caricamento di più risorse JavaScript. I vari moduli js vengono caricati separati l'uno dall'altro impedendo loro di andare in contrasto.

read more

Jun 20, 2013

Leaflet: un framework per mappe interattive leggero e performante

Leaflet web maps

Leaflet: un framework per mappe interattive leggero e performante

Filed Under:

Leaflet è un framework JavaScript veramente interessante, sicuramente la scelta giusta per l'integrazione di mappe interattive HTML5 su applicazioni web per mobile

Recentemente ho avuto l'occasione di lavorare ad un progetto per lo sviluppo di un'applicazione web per mobile, che mi ha dato l'opportunità di approfondire la conoscenza di un framework JavaScript decisamente interessante: Leaflet.

Esistono decine di framework per l'integrazione di mappe interattive disponibili in rete, ma a mio avviso Leaflet è veramente degno di nota.

Paragonabile in termini di funzionalità ad altri framework, quale per esempio OpenLayer, Leaftet sorprende per leggerezza e facilità d'uso.

Il core di questa libreria JS ha un peso veramente ridotto (circa 100KB).
Il codice è attuale: i namespaces sono brevi, fa buon uso di tecniche come method chaining ecc., insomma in linea con lo stile di importanti librerie JavaScript come per esempio jQuery.

L'interfaccia è moderna e fluida, compatibile con la maggior parte dei browser in circolazione.

 

Compatibilità mobile:
- Safari for iOS 3/4/5/6+
- Android browser 2.2+, 3.1+, 4+
- Chrome Android 4+, iOS
- Firefox for Android
- Other webkit-based browsers
- IE10 for Win8-based devices

Leaflet è un progetto Open Source creato da Vladimir Agafonkin. Gratuitamente scaricabile direttamente dal sito ufficiale leafletjs.com, è ospitato anche su github.com, dove grazie alla comunità che lo supporta, si piazza tra i migliori 40 progetti open source con ben 5000 star.

Interessante la possibilità di utilizzare come sistema di riferimento (CRS), le dimensioni in pixel di immagini non georeferenziate, utile nei casi in cui si ha la necessità di sviluppare mappe interattive a partire da immagini di grandi dimensioni, come per esempio per un videogioco.

Rimando a questa lettura per approfondimento:

Nutrita la lista dei plugin disponibile online, che ne estendono le funzionalità http://leafletjs.com/plugins.html.
Per esempio, io ho trovato interessante Leaflet.TextPath, che permette di aggiungere del testo direttamente agli oggetti disegnati dinamicamente nella mappa.

Nota per gli sviluppatori Python, su Pypi è presente una versione pacchettizzata per l'installazione su CMS Plone.

Conclusioni

"Divertente", penso sia il primo aggettivo che mi viene in mente se penso a Leaflet.
Decisamente un'ottima libreria adatta per il web, non troppo complessa e di grande effetto. Particolarmente indicata per il mobile.

read more

Feb 18, 2013

Sviluppo Front-End: ottimizzare le prestazioni

Migliorare l'esecuzione delle risorse di front-end

Sviluppo Front-End: ottimizzare le prestazioni

Alcuni trucchi e consigli per migliorare la velocità dei siti web

Per quanto riguarda lo sviluppo front-end, c'è sempre più attenzione alle performances, dato che favorendo la velocità dell'esperienza utente c'è un ritorno diretto in termini di soddisfazione da parte di chi fruisce il progetto web.

E' uscito da poco un articolo molto curato sull'argomento che ha attratto la mia attenzione:

Front-end performance for web designers and front-end developers di Harry Roberts.

Nell'articolo vengono illustrati e sintetizzati molti degli argomenti relativi all'ottimizzazione dello sviluppo front-end.

read more

Jan 30, 2013

Caution: in 2013 a "Meteor" will impact the World (Wide Web)

MAYDAY, MAYDAY, MAYDAY

Caution: in 2013 a "Meteor" will impact the World (Wide Web)

Meteor is a very powerful Javascript framework: this short article demonstrate how to install, configure and create your first application using "Meteor"

Nothing to do with the Mayan prophecies, quiet!

Some time ago I came across a tweet that talked about Meteor and, as usual, I tried to investigate the simple reading.

I knew of the potential offered by Node.JS but I never tried something, so I took the opportunity to understand more. Also, these types of frameworks are increasingly directing a new way to write web applications (interesting this article). Furthermore, here you can find a lot of examples of application made with Meteor.
Meteor runs on Node.js. Has it's own server
Without spending a lot of time, I will try to reproduce steps how to create from scratch the environment and a simple application.
read more

Jan 22, 2013

jQuery.DataTables.js: tabelle per tutti i gusti

Quando mostrare un dato non basta!

jQuery.DataTables.js: tabelle per tutti i gusti

Se una semplice tabella non rende merito ai dati mostrati, ci si rivolge a Javascript/css per avere di più. Vediamo come usare DataTables per avere molto di più!

Tante volte abbiamo il compito di mettere in mostra tramite tabelle una serie di dati e le (più che giustificate) richieste sono sempre le stesse: fare batching dei dati visualizzati; permettere l'ordinamento delle singole colonne; poter fare ricerca sulle righe della tabella filtrandone il testo.

Cercando sul web, vi renderete conto che i plugin Javascript disponibili sono molti, ma uno mi ha colpito in particolare: jQuery.DataTables.js. Semplice da usare, funzionalità di base estese, molti plugin aggiuntivi e, non da ultimo per un plonista, esiste una versione già "pacchettizzata" per Plone su pypi.

read more