Thoughts on adding javascript without conflicting with web designer

For some project I included Jquery animations in web sites. There are many Jquery scripts on Internet but, of course, not all of them satisfy your requirements.

When creating the animation, the first thing I do is choosing the script animation that can be useful as basis, creating a sort of demo and start to understand the code in order to be changed.

What I don’t see in several scripts is the absence of thinking for web designers, I mean people that know only CSS and html and they are interested on how to modify the classes name or id because they already exist in the website. Usually indeed the names or id have prefix but these variables are spread around the code, instead of being written once.

So I started to use some template system like Dust.js (which has been adopted by Linkedin) or Hogan (adopted by Twitter) to bring the html code and classes/id inside the html and not keeping them in javascript files. For the rest I give the possibility to pass as parameters classes/id to the Jquery script so they can be modified from design point of view.

Still this means that classes and id are duplicated once in the code and once as parameters in the javascript, there must be  a way to reduce the impact. Somebody proposes to use different classes for the style and for the javascript, somebody else uses data-attributes for the javascript which have been introduced by HTML 5 (which seem to be less performant as selectors moreover on IE, see Jsperf comparison and this article).

If I have to introduce some javascript in a website HTML 4 compliant then I would certainly go for 2 classes so the css designer doesn’t touch those for the javascript, even though we still create redundancy.

If have to work with HTML 5, I still don’t know if using data-attributes it is a good idea. In caniuse.com I can see that Internet Explorer 11 doesn’t fully support data attributes and Internet Explorer is still a big player in the browser puzzle, on the other side:

  • Jquery 2.0, which provide support from IE9 onward (major media queries are supported by IE9), has .data or .attr functions.
  • Further there are framework like AngularJS that make use of data attributes, working per injection without add/repeating any css/id which make me think that I should start to explore it since recently they start to make use of animations.

The problem more over is that you start from a built in CMS so adding a javascript which uses the current classes/id is easier that touching the html generated.

Advertisements

Web, javascript e performance

Oggigiorno il web sta assistendo ad una evoluzione dal punto di vista delle performance. Evoluzione che è determinata in parte dall’uso di Javascript (e quindi spostamento del carico dal server al client) e in parte dall’annunciato standard HTML 5 che permette evoluzioni come webgl spingendo i browser a diventare migliori ma anche a fare i conti con le prestazioni.

Possiamo in definitiva avere 3 tipi di evoluzioni dal punto di vista delle performance:

  1. Performance dei client (browser)
  2. Performance del codice scritto per client e server
  3. Performance dei server (dal punto di vista dei client)

Performance dei browser

E’  in questo periodo che con l’uso, magari anche smoderato, di Javascript e con l’implementazione dello standard HTML 5 assistiamo ad una competizione tra i browser per quanto riguarda le performance ed in particolar modo quelle cosi tanto pubblicizzate di Chrome e ora anche di Opera 10.50.

Performance del codice scritto per i browser e per i server

Ovviamente questo campo è molto delicato perchè dipende dalle capacità dei programmatori. Se prima cercavamo di ottimizzare il codice lato server per scrivere perfertte pagine dinamiche ora, poichè esistono librerie come Jquery, che permetto di essere espandibili, la programmazione si è spostata sul fronte Javascript (a tal proposito ho trovato questo articolo dove si suggeriscono metodi per incrementare le performance con il codice JQuery)

Software come Netbeans e Aptana ad esempio permettono ora l’autocompletamento del codice con quindi una relativa facilità nella scrittura.

Performance dei server (dal punto di vista dei client)

In questo campo ci sono molti aspetti da tenere in considerazione. Quando vogliamo che un sito web sia veloce possiamo intendere:

  • numero di connessioni http
  • numero di immagini, javascript, CSS da caricare
  • ordine in cui caricare javascript e CSS

Esistono diverse misure per fare ridurre il carico. Prima di tutto vi consiglio di usare Firebug che con un diagramma temporale vi fa notare come le varie risorse vengono caricate.

Sulla base di Firebug esistono poi Yslow e Page speed che assegnano dei punteggi alle pagine web in base a come sono strutturate e suggeriscono come migliorare il caricamento delle pagine, come ad esempio:

  • combinare diversi javascript se possibile e minimizzare il codice (in pratica il codice javascript risulta su 1 o poco più linee cosi da essere caricato velocemente (ovviamente questo lo rende illegibile)
  • combinare diversi CSS, minimizzare il codice e rimuovere quello non usato; un piccolo aiuto può venire anche da DustMeSelector un plugin di firefox che, stando a quello che dice, tramite il file sitemap permette di analizzare il CSS delle pagine e vedere quello non usato.
  • combinare le immagini e minimizzare le immagini, a tal proposito è possibile talvota che in presenza di piccole immagini è più il tempo sprecato per le connessioni http che quello di caricare una immagine, vi consiglio perciò di dare una occhiata a SpriteMe

C’è da dire che Page Speed nasce dopo Yslow o comunque dopo che Steve Souders, scrittore del libro High Performance Web Sites è passato da Yahoo a Google, consiglio di avere entrambi.

Inoltre si sta facendo strada le reti CDN, che non sono altro che un sistema di load balancing dal punto vista geografico. Prima fra tutte Google che, avendo a disposizione server in tutti il mondo, vi permette di non fare caricare le librerie javascript dal vostro sito ma da uno dei tanti server sparsi, vedete la lista delle librerie nel sito. A voi la scelta se passare da Google o no.

Ora cercate di non diventare troppo maniaci delle performance :-)