[PrimeFaces&jQuery] Letture consigliate su PrimeFaces e jQuery

Ho finito di leggere due libri ben fatti e molto pratici su PrimeFaces e jQuery, editi da Packt Publishing, e che consiglio a chi vuol imparare ad utilizzare queste due tecnologie web attualmente molto in voga.

Learning jQuery Learning jQuery

 

 

 

 

 

 

Sono corredati ovviamente anche da esempi scaricabili. Le versioni eBook sono economicamente accessibili, ma per Learning jQuery esiste anche una versione online free (disponibile QUI).

Il livello non è sicuramente avanzato, ma penso siano ottimi per chi sta approcciando ad un primo studio di questi framework. Sicuramente occorrono conoscenze di base di Javascript, CSS e, in generale, JSF (o tecnologie simili).

 

[JSF] PrimeFaces: una tecnologia di front-end che si sta imponendo nel mercato Enterprise

Logo Prime FacesMi è capitato di leggere un pò di articoli interessanti su PrimeFaces, tecnologia JSF che si sta imponendo in modo esponenziale nello scenario delle tecnologie web lato presentation. Ho utilizzato il suo antagonista Rich Faces, ma devo dire che Prime mi ha colpito particolarmente per tutta una serie di motivi che spiegherò in questo post.

In generale, i pregi delle tecnologie Java Server Faces (JSF) si possono riassumere nei seguenti punti:

  • rispetto del pattern architetturale Model-View-Controller (MVC), per separare la logica di presentazione dei dati da quella di business;
  • supporto alla realizzazione di una Rich Internet Application (RIA), in grado di offrire una user experience tipica di una Desktop application;
  • velocità nella presentazione dei dati e nella risposta alle interazioni utente, grazie al supporto asincrono AJAX di chiamata ai servizi e all’aggiornamento di porzioni di pagina (refresh parziale);
  • dinamicità ed interattività delle componenti grafiche, con possibilità di interazioni utente complesse, come, ad esempio, drag&drop, ridimensionamento e trascinamento;
  • facilità e velocità nello sviluppo dell’interfaccia utente, grazie al riuso di componenti già distribuite nel framework e alla semplicità nella loro customizzazione;
  • accessibilità delle pagine web generate e supporto alla presentazione su dispositivi mobile;
  • compatibilità con gli attuali web browser, ma anche supporto per quelli più datati.

Sulla base dei punti su riportati, ho provato il seguente set di tecnologie, tra loro compatibili, per lo sviluppo di un front-end di una Rich Internet Application:

  • Prime Faces: implementazione dello standard Java Server Faces – JSF 2.2;
  • JQuery/JQuery UI: framework javascript per la facile implementazione di componenti grafiche dinamiche ed interattive. Sono supportati nativamente da Prime Faces;
  • HTML 5: nuovo linguaggio di markup per l’implementazione di pagine web (in corso di standardizzazione);
  • CSS 3: evoluzione di CSS 2 per la definizione dello stile delle pagine web e della struttura dell’interfaccia utente.

Prime Faces è una implementazione dello standard “server-side” Java Server Faces (JSF 2.2). Fornisce un approccio “component-centric” per lo sviluppo di interfacce utente in tecnologia JEE, facilmente manutenibili, con modello di progettazione architetturale Model-View-Controller (MVC). Prime Faces permette di aggiungere funzionalità AJAX, sfruttandone le sue potenzialità come il meccanismo di chiamata asincrona a servizi, il refresh parziale delle pagine, le notifiche push, ecc. Esistono diverse implementazioni di JSF e le più diffuse sono le seguenti: Rich Faces, Ice Faces, MyFaces e Prime Faces. Quest’ultima sta riscontrando grande successo nella comunità di sviluppatori di front-end JEE, come si evidenzia dal seguente grafico di Google Trends:

Google Trend Prime Faces

Ecco i vantaggi che si traggono dall’utilizzo di Prime Faces:

  • Ricca suite di componenti. Prime Faces offre una suite open source di componenti UI avanzate (widget) per l’integrazione di funzionalità Ajax in applicazioni RIA (Rich Internet Application). Esistono, ad esempio, componenti per la realizzazione di tabelle con funzionalità avanzate (ordinamento, filtraggio, drag&drop, ecc.), menù ad albero, finestre a comparsa, calendar, picklist, widget per il file upload multiplo e tante altre (vedi Prime Faces – ShowCase);
  • Struttura multi-layout. Si può implementare in modo agevole una struttura multi-colonna con Prime Faces, utilizzando e customizzando i temi di cui dispone il framework e personalizzandone i fogli di stile, con l’utilizzo dei flexible box in CSS 3 (aree della pagina web con dimensioni flessibili).
  • Navigazione dinamica tra le pagine e finestre multiple con sessioni separate di lavoro. Grazie a JSF è possibile definire in modo semplice la navigazione tra le pagine, sia in modo predefinito che attraverso logiche di business. Inoltre, attraverso la definizione di opportuni “scope” si può rendere possibile la lavorazione su finestre multiple del browser, ciascuna con una sessione separata di lavoro.
  • Performance e supporto. Prime Faces è una libreria leggera e ciascuna componente in esso distribuito è piuttosto semplice da customizzare. Essendo una tecnologia piuttosto recente, è ottimizzata per il funzionamento sui browser di nuova generazione. Il grado di maturità delle componenti grafiche è alto, essendo il framework arrivato alla versione stabile 4.0. Inoltre, esistono una ricca documentazione e una attiva community online, per la risoluzione di comuni problematiche.
  • Compatibilità con i web browser recenti. Prime Faces garantisce la compatibilità con i browser più recenti, come Internet Explorer 9+, Google Chrome 17+  e Firefox 13+. Si dichiara il supporto anche per browser meno recenti, come Internet Explorer 7/8, sui quali viene rispettata l’interattività delle componenti (non di tutte però!), ma non il “look-and-feel” (per cui occorrerà agire manualmente modificando i CSS).
  • Notifiche push. Prime Faces consente di aggiungere funzionalità di push notification, utili per esempio per notificare cambiamenti di stato o aggiornamenti delle informazioni, in modo automatico ed asincrono, senza il refresh manuale delle pagine web.
  • Predisposizione al mobile. Grazie all’utilizzo di JQuery Mobile, è possibile realizzare, con l’estensione Prime Faces Mobile, pagine web con un “look-and-feel” simile alle app native (come quelle per iOs o Android)
  • Accessibilità e grafica responsive. Contrariamente ad altri framework AJAX-based, Prime Faces implementa le linee guida ARIA (Accessible Rich Internet Application) del W3C, garantendo per le componenti più comuni (tabelle, accordion, menù ad albero, componenti di input, …) la piena accessibilità. Inoltre, con l’ausilio di librerie Javascript (come BootStrap.js), è possibile realizzare con Prime Faces anche pagine in grafica “responsive”, ossia adattabile ai vari dispositivi (anche mobile).
  • Supporto a HTML 5. La maggior parte delle nuove componenti di Prime Faces sono sviluppate con HTML 5. Comunque, lo standard JSF 2.2 dichiara la possibilità di integrazione con tag HTML 5, utile per inserire nuove feature nelle pagine web, come i tag semantici.

 

Altri riferimenti utili:

 

[LinkedOpenData&Graph] Il Linked Open Data Graph in tempo reale

Ho trovato un interessante progettino su GitHub che utilizza Protovis, libreria JavaScript ed SVG per la web-native visualizations (vedete anche questo interessante studio, A Scalability Study of Web-Native Information Visualization). Questo progetto permette di visualizzare su un grafo tutta la rete dei LOD (Linked Open Data) aggiornata direttamente dal portale CKAN, diventato il punto di riferimento per la registrazione dei datasets “LOD-compliant”.

Il progetto è stato scritto da Ed Summer ed è disponibile a questo link: https://github.com/edsu/lod-graph

Una anteprima dei LOD attualmente disponibili nella rete CKAN, visualizzati sul grafo Protovis di Ed Summer, la potete vedere anche qui: http://inkdroid.org/lod-graph/

Linked Open Data Graph

Se vi volete divertire a generare il grafo sui vostri pc, basta scaricare il progetto da GitHub e lanciare il comando da terminale:

./ckan.py

Lo script Python si connette alle API REST di CKAN, scarica i dati ed aggiorna un file locale ckan.log in cui potrete vedere lo stato di avanzamento delle operazioni (ci mette un po’…). Quando la procedura è ultimata (“finished ckan load” sul log), lo script vi genera un file lod.js in locale, con il JSON contenente tutte le informazioni sui dataset LOD aggiornati (titolo, url, rating, ecc.). Basta aprire la pagina index.html per visualizzare il Linked Open Data Graph su browser.

 

Altri riferimenti utili:

[Javascript] Un nuovo modo di scrivere il front-end con Backbone.js + CoffeeScript

Ultimamente sto usando il framework Backbone.js per scrivere il front-end di una web app, con un linguaggio molto minimale, e non proprio immediato, che è CoffeeScript. Non condivido appieno le implementazioni “massicce” lato front-end in Javascript, forse perché sono un convinto “accessibilista”, e forse perché non ho ancora compreso appieno quanto sia accessibile lo stesso Javascript. Comunque, sono contrario ad avere troppa logica spostata sul client e la struttura delle stesse pagine mi piace averla ben organizzata e semplice.

Tuttavia, questo Backbone, che implementa una “logica MVC” lato front-end, ho visto che è parecchio utilizzato in parecchie web app importanti.

Vi allego un ottimo tutorial, oltre al link della documentazione ufficiale e un ebook (a pagamento):

Da quanto si legge su HTML.it, per la sua architettura, Backbone.js rientra nella categoria delle librerie MV*, in quanto implementa Model e View, ma non ha un componente Controller tradizionale, delegandone i compiti alle View e ad un componente di routing. Questo approccio è abbastanza diffuso in ambito JavaScript, dove la diversa e più complessa gestione dell’interazione utente e dello stato dell’applicazione non si adattano bene ai compiti di un controller.

 

I componenti base di Backbone.js sono:

  • Backbone.Model: modelli
  • Backbone.Collection: liste di modelli
  • Backbone.View: view
  • Backbone.Router: routing e gestione centralizzata dello stato dell’applicazione

CoffeeScript, invece, non è altro che una riscrittura sintattica di Javascript, che si rifà a Ruby e Python. E’ simbioticamente legato, ma non necessario, a Backbone.js, visto che l’ha creato lo stesso Jeremy Ashkenas  (insieme ad Underscore.js ed Handlebars.js, librerie Javascript di utility, che è buono e consigliato conoscere per usare Backbone).

Eccovi un rapido tour nella sintassi CoffeeScript: CoffeeScript – perchè amarlo?

L’accoppiata Backbone+CoffeeScript ha un bel pò di vantaggi che ho potuto apprezzare:

  • semplicità e pulizia nella scrittura del codice, grazie ad una sintassi molto minimale (si richiede una conoscenza di base della sintassi Python)
  • il paradigma MVC crea una struttura di progetto ben organizzata, dove ogni cosa è al suo posto
  • propagazione di eventi e dell’aggiornamento “automatico” dello stato dei modelli e delle viste collegate
  • modalità di testing con fixture molto semplice e veloce
  • librerie di utility Javascript che implementano logiche anche complesse
  • realizzazione di Single-Page Application e di web app per il mobile (Using backbone.js with jQuery Mobile)
  • Backbone+REST=GRAVY: integrazione “nativa” di Backbone con le API REST (Vedi l’articolo sulla filosofia REST su questo blog)
  • possibilità di utilizzare tutto ciò che è Javascript (anche librerie come jQuery)
Gli svantaggi, a mio parere, sono:
  • troppa logica Javascript lato front-end
  • troppi modelli e viste possono rendere difficile la lettura e complicare la “navigazione” del progetto
  • se non si definisce un “modus operandi” e una struttura di progetto con relative “regole” e “convenzioni” prima dell’inizio della fase di sviluppo, risulta difficile lavorare in gruppo e scrivere software “manutenibile”
  • tecnologia molto evoluta e complessa, con una curva di apprendimento bassa
  • scarsa compatibilità con browser “datati”

Scritto ciò, se siete smanettoni Javascript, Backbone+CoffeeScript dovete assolutamente conoscerli ed usarli.

Vi allego un file di testo con delle note mie estratte dalla documentazione ufficiale di Backbone.

Backbonejs Notes
Titolo: Backbonejs Notes (0 click)
Etichetta:
Filename: backbones.txt
Dimensione: 25 kB

[DWR] Direct Web Remoting: Easy AJAX for Java

DWR (Direct Web Remoting) è una libreria Java open-source (Apache Software License v2) che permette a Java (lato back-end) e JavaScript (lato front-end) di interagire e chiamarsi a vicenda nel modo più semplice possibile.
DWR si integra con Spring, Struts, Hibernate e altri framework.

 

Ecco lo slogan di DWR: “DWR is Easy Ajax for Java“.

Ecco il sito ufficiale di DWR: http://directwebremoting.org

Cosa fa DWR? DWR permette di generare codice JavaScript che permetta ai web browser di chiamare in sicurezza codice Java come se venisse eseguito localmente. Effettua una operazione di marshalling virtuale che include collections, POJOs, XML e binary data (come immagini e file PDF).
Mette a disposizione anche una funzionalità di Reverse Ajax, che permette a codice Java in esecuzione sul server di utilizzare/richiamare API lato client per pubblicare aggiornamenti su determinati gruppi di browser.

Questo tipo di interazione è, dunque, bidirezionale – browser che chiama il server e server che chiama il browser.
DWR supporta Comet, Polling e PiggyBack (spedendo i dati in una normale request) come modalità per la notifica da server a browser.

Come funziona? Il meccanismo di interazione bidirezionale avviene tramite chiamate RPC (Remote Procedure Call).
Nella seguente figura, viene mostrato un primo diagramma che rappresenta come DWR altera il contenuto di una select HTML con il risultato di un evento JavaScript (il client chiama il server per farsi restituire i risultati):


Il Reverse Ajax di DWR (disponibile dalla versione 2.0) permette a codice Java in esecuzione sul server di intercettare quali client stanno visualizzando determinate pagine, in modo da inviare loro (tramite JavaScript) dei risultati (meccanismo di comunicazione inverso – da server a client):


DWR è composto da due parti principali:

  • una servlet Java in esecuzione sul server che processa le richieste e manda le risposte indietro al browser
  • JavaScript in esecuzione sul browser che manda le richieste e può dinamicamente aggiornare il contenuto della pagina

DWR genera dinamicamente codice JavaScript da classi Java ed effettua il marshalling dei dati scambiati in modo bidirezionale, eseguendo il tutto lato server.
Il metodo di remoting functions (Reverse Ajax) da Java a JavaScript fornisce un meccanismo RPC molto simile a RMI o SOAP, con il vantaggio che l’esecuzione avviene su un browser senza necessità di plugin addizionali.

Download di DWR: http://directwebremoting.org/dwr/downloads/index.html

Installazione di DWR: http://directwebremoting.org/dwr/introduction/getting-started.html#fiveSteps

Continua la lettura

[JSON] Introduzione al diffuso formato di scambio dei dati

JSON (JavaScript Object Notation) è un semplice formato per lo scambio di dati. Per le persone è facile da leggere e scrivere, mentre per le macchine risulta facile da generare e analizzarne la sintassi. Si basa su un sottoinsieme del Linguaggio di Programmazione JavaScript, Standard ECMA-262 Terza Edizione – Dicembre 1999.

JSON è un formato di testo completamente indipendente dal linguaggio di programmazione, ma utilizza convenzioni conosciute dai programmatori di linguaggi della famiglia del C, come C, C++, C#, Java, JavaScript, Perl, Python, e molti altri. Questa caratteristica fa di JSON un linguaggio ideale per lo scambio di dati.

JSON è basato su due strutture:

  • Un insieme di coppie nome/valore. In diversi linguaggi, questo è realizzato come un oggetto, un record, uno struct, un dizionario, una tabella hash, un elenco di chiavi o un array associativo.
  • Un elenco ordinato di valori. Nella maggior parte dei linguaggi questo si realizza con un array, un vettore, un elenco o una sequenza.

Queste sono strutture di dati universali. Virtualmente tutti i linguaggi di programmazione moderni li supportano in entrambe le forme. E’ sensato che un formato di dati che è interscambiabile con linguaggi di programmazione debba essere basato su queste strutture.

In JSON:

  • Un oggetto è una serie non ordinata di nomi/valori. Un oggetto inizia con { (parentesi graffa sinistra) e finisce con } (parentesi graffa destra). Ogni nome è seguito da : (due punti) e la coppia di nome/valore sono separata da , (virgola).

  • Un array è una raccolta ordinata di valori. Un array comincia con [ (parentesi quadra sinistra) e finisce con ] (parentesi quadra destra). I valori sono separati da , (virgola).

  • Un valore può essere una stringa tra virgolette, o un numero, o vero o falso o nullo, o un oggetto o un array. Queste strutture possono essere annidate.

  • Una stringa è una raccolta di zero o più caratteri Unicode, tra virgolette; per le sequenze di escape utilizza la barra rovesciata. Un singolo carattere è rappresentato come una stringa di caratteri di lunghezza uno. Una stringa è molto simile ad una stringa C o Java.

  • Un numero è molto simile ad un numero C o Java, a parte il fatto che i formati ottali e esadecimali non sono utilizzati.

I caratteri di spaziatura possono essere inseriti in mezzo a qualsiasi coppia di token.

A parte alcuni dettagli di codifica, questo descrive totalmente il linguaggio.

Fonte: http://www.json.org/json-it.html