Firefox 4 la prospettiva di uno sviluppatore

Proprio sulla scia di Internet Explorer 9 arriva la tanto decantata e più recente iterazione di Firefox 4. L'uscita è stata un successo fino ad oggi, con oltre 7 milioni di download nelle prime 24 ore e oltre 40 milioni fino ad oggi. Oggi, vorrei darti una rapida panoramica dei cambiamenti dal punto di vista degli sviluppatori: salterò la nuova interfaccia utente e le altre funzionalità di whizbang.


Più HTML5

Un nuovo motore di rendering, Gecko 2.0, è sotto il cofano di Firefox 4.

Un nuovo motore di rendering, Gecko 2.0, è sotto il cofano di Firefox 4. Per la maggior parte, come previsto, offre un grande supporto per lo sviluppo web orientato agli standard. Anche in gioco c'è un parser HTML5 nuovo di zecca che definisce come il tuo codice HTML viene trasformato in una pagina web.

Di conseguenza, ottieni prestazioni migliori da innerHTML chiama specialmente la capacità di includere SVG in linea nel codice e la stabilità e la reattività complessive a causa dell'algoritmo di analisi eseguito sul proprio processore.

Ulteriori miglioramenti da un punto di vista dello sviluppo HTML5 sono il supporto più maturo fornito per i moduli HTML5 e l'API audio. Il supporto per gli elementi e gli attributi di markup più recenti ridurrà in modo significativo il codice JavaScript che dovrai scrivere per fornire funzionalità equivalenti. Pensa a una convalida più semplice: gli elementi del tuo form richiedono zero JavaScript per incollare le regole di convalida su di esso.


WebGL

WebGL è uno standard basato su OpenGL ES che consente di eseguire il rendering 3D sul web.

Il supporto di WebGL è stato piuttosto innovativo nelle versioni precedenti di Firefox: solo i build di test notturni offrivano supporto per la tecnologia. Firefox 4 viene fornito con il supporto completo per la piattaforma.

Se ti stai chiedendo, WebGL è uno standard basato su OpenGL ES che ti consente di eseguire rendering 3D e altre manipolazioni assortite attraverso l'elemento canvas. L'API stessa è di livello più basso rispetto a quello che potresti ottenere offrendoti un'enorme flessibilità e potenza. Se qualcosa può essere fatto su un desktop, puoi farlo anche sul web!


Accelerazione hardware

Riduciamo il carico di lavoro sulle nostre CPU per scopi generali consentendo a GPU molto più parallele e capaci di gestire calcoli specifici.

L'accelerazione hardware sta scaricando attività che vengono tipicamente gestite dal software sull'hardware, laddove possibile. Nel nostro scenario, riduciamo il carico di lavoro sulle nostre CPU per scopi generali consentendo a GPU molto più parallele e capaci di gestire calcoli specifici, ottenendo prestazioni migliori. L'attività di rendering del contenuto della pagina e di compositing viene accelerata, anche se vengono utilizzate API diverse su piattaforme diverse.

Su Windows, Direct2D viene utilizzato per l'accelerazione del contenuto, comprese le manipolazioni e il disegno su tela, mentre Direct3D viene utilizzato per l'accelerazione del compositing. Su OS X, Quartz gestisce il primo mentre l'OpenGL molto più aperto si occupa di quest'ultimo.


J? GerMonkey JavaScript Engine

J? GerMonkey è una versione avanzata e ottimizzata di TraceMonkey, il motore JS in Firefox 3.6

In linea con le aspettative degli sviluppatori, Firefox vanta un motore JavaScript newish sotto il cofano: J? GerMonkey. Una versione potenziata di TraceMonkey (il motore JS in Firefox 3.6), J? GerMonkey aggiunge molte più ottimizzazioni al mix con risultati sorprendenti in termini di prestazioni.

Ottimizzazioni più nuove e più intelligenti, come un approccio JIT per metodo, eseguono compilazioni native più aggressive con prestazioni decisamente migliori rispetto alla concorrenza. Per dare un esempio, Firefox segna circa sei volte meglio nel benchmark V8 e tre volte più veloce nei benchmark SunSpider rispetto a Firefox 3.6.

Nel complesso, J? GerMonkey ha riportato Firefox nella corsa per le prestazioni di JavaScript suprema.


Transizioni CSS e altro

Grazie a heskinradiophonic

Firefox finalmente supporta transizioni e trasformazioni CSS3.

Una delle notevoli aggiunte per uno sviluppatore front-end è il vasto supporto per le transizioni CSS3. Mentre gli altri browser hanno vantato transizioni CSS3 per molto tempo, Firefox è stato gravemente carente. L'ultima versione fornisce un'implementazione quasi completa delle specifiche.

Le transizioni CSS forniscono un metodo CSS puro per animare le modifiche tra le proprietà CSS. Trasformazioni come ridimensionamento, rotazione e inclinazione sono disponibili anche per te! Puoi persino usare questa trasformazione entro transizioni per creare effetti eleganti. Ricorda quei frammenti jQuery che hai usato per svanire elementi e colori, dentro e fuori? Per i nostri scopi, sono praticamente ridondanti: poche righe di CSS sono tutto ciò che serve ora.

Le nuove funzionalità includono:

  • Supporto per le proprietà touch.
  • Aggiunta di -moz-any raggruppare selettori strutturalmente rilevanti.
  • Valori calcolati attraverso -moz-calc permettendoti di definire i valori attraverso espressioni matematiche.

Anche se ha preso il team Mozilla per un po 'di tempo, la semplice azione di supporto aggiunto rende più facile per gli sviluppatori web abbracciare queste nuove tecnologie.


WebM

Firefox ora viene fornito con il supporto WebM che potenzia notevolmente la sua capacità di utilizzare i contenuti video sul Web e la quota di mercato di WebM.

Anche se le build nightly degli sviluppatori sono state in grado di riprodurre il formato per un paio di mesi, questa è la prima versione ufficiale a fornire supporto per il formato.

Se questo argomento ti rende un po 'confuso, ti suggerisco di leggere il mio precedente articolo sui codec video sul web in cui puoi trovare ulteriori informazioni su questo argomento. Basti dire che aggiungendo il supporto WebM, Mozilla ha rafforzato la sua idealizzazione basata sugli standard e semplificata la vita per i suoi utenti in una sola mossa.


IndexedDB

IndexedDB salva i dati come documenti formattati JSON.

IndexedDB è Mozilla che assume un percorso più radicale e più utilizzabile rispetto ad altri browser optando per l'approccio NoSQL. Ricorda che la maggior parte degli altri browser utilizza l'API Web SQL in cui gli sviluppatori scrivono SQL per ottenere informazioni archiviate nei database SQLite.

IndexedDB salva i dati come documenti formattati JSON e ti consente di accedere alle informazioni che contiene tramite un'API non SQL più semplice. Il risultato finale? Sintassi molto più semplice e un'API più standardizzata che ti isola dalle sfumature dell'implementazione pur offrendoti un'enorme flessibilità.


Console Web

Sebbene non sostituisca Firebug, la nuova console Web è incredibilmente maneggevole.

La nuova console Web sostituisce la console degli errori delle versioni precedenti. Anche se non sostituirà alcuni degli strumenti avanzati come Firebug, è estremamente utile quando stai curiosando nelle viscere di un sito o di un'applicazione.

La console può essere aperta con Ctrl + Shift + K [Cmd per gli hipsters fruttati] e viene fornita in bundle con:

  • un interprete JavaScript a riga di comando che consente di eseguire JavaScript in tempo reale.
  • un meccanismo di registrazione che registra errori CSS e JavaScript. Anche le richieste di rete vengono registrate per consentire l'accesso alle informazioni sulla richiesta. Intestazioni, risposte, tutto è gioco.
  • un ispettore dell'oggetto per esaminare qualsiasi oggetto JavaScript che risiede nella memoria del browser.

Tipografia migliore

Il supporto per OpenType ora ti consente di giocare con impostazioni più avanzate come il kerning.

Ora puoi utilizzare OpenType, un formato di carattere aperto, che ti dà accesso a una tavolozza molto più variata: non sei più limitato ai font sicuri per il Web.

Anche se può sembrare noioso, il supporto per OpenType introduce un'ampia gamma di funzionalità. Sei in grado di modificare crenatura, legature e ottenere frazioni automatiche tra molte altre.

Un altro punto da prendere in considerazione è che se il tuo sito non è in inglese, il nuovo motore di Firefox renderizza i tuoi contenuti senza intoppi o interruzioni visive. E con l'aumento esponenziale delle pagine Web non inglesi, questa funzionalità aiuta sia gli sviluppatori che gli utenti finali.


È un involucro

La più recente iterazione di Firefox è un bel passo avanti rispetto alla generazione precedente con una serie di aggiunte e miglioramenti rivolti a sviluppatori e progettisti. Anche i junkie JavaScript si sono occupati delle migliori prestazioni fornite dal nuovo motore, del supporto HTML5 e CSS3 e di un set di strumenti molto più robusto.

Quindi cosa ne pensi di Firefox 4? Lo adoro? Lo odio? Fateci sapere nei commenti e grazie mille per la lettura!