quadri HTML5 per un innamorato Flex Developer

Question

ho lavorato come un dev flex per molti anni, la creazione di applicazioni molto complesse. Con tutto il recente hype, sono interessato all'apprendimento di HTML5.

Quello che mi piace il framework Flex è che è una costante, coerente, stack completo per la creazione di RIA di. Mi piace il fatto che abbia un ampio set di componenti pronti all'uso e un framework per l'estensione e la creazione di componenti con skin davvero complessi, estremamente personalizzati, &.

Esistono strutture simili fuori nello spazio HTML5?

Dalla ricerca che ho fatto, vedo che ci sono tonnellate di script utili .js che forniscono componenti, effetti, ecc. Tuttavia, non sono stato in libreria di componenti.

Questo mi preoccupa che nella creazione di un'applicazione complessa, potrei finire per scrivere un sacco di codice idraulico per collegare insieme componenti disparati.

So che HTML5 è ancora nella sua infanzia, quindi se ci sono framework promettenti che dovrei tenere d'occhio, mi piacerebbe sapere di loro.

mia lista della spesa dei requisiti quadro ideale sarebbe la seguente:

• architettura componente solida (inclusi gli eventi del ciclo di vita)
• Extensible
• gestori di layout
• browser agnostico
• supporto per i dati vincolanti
• supporto per complessi Skinning
• Astrazione di servizi strati & protocolli (es., SOAP/JSON/servizi XML sono tutti un tipo di IRemoteService)

Insieme con il framework di interfaccia utente per sé, ciò che i quadri esistenti nello spazio Javascript per

• Architetture MVC. (Simile a Parsley, o Maté nel mondo Flex)
• Dependency Injection
• Unit testing

Answer 1

Se sei un progettista di Flex, allora potrebbe essere interessato a verificare sia la versione desktop che quella mobile di Sencha Frameworks (la mia azienda): Ext JS per applicazioni desktop e Sencha Touch per applicazioni mobile/tablet.

Ext JS è incentrato su applicazioni Web desktop che possono funzionare fino a IE6, quindi non c'è molto spazio per essere "HTML5" y anche dove possiamo (la nostra nuova documentazione utilizza Canvas, SVG o VML a seconda del browser su cui si trova).

Sencha Touch è focalizzato sui browser mobili Android, iOS, Blackberry e IE9 (?), Quindi è possibile utilizzare tutti i CSS3, localStorage, ecc. Ecc. A cui è possibile scuotere un bastoncino. Se stai cercando un caso di prova su cosa puoi fare quando inizi con l'assunzione di un browser moderno, allora è proprio questo.

Ext JS & Sencha Touch è componenti completamente in basso. La migliore panoramica di entrambi i componenti e layout è this article che è stata scritta per Ext JS 2, sebbene il componente e il modello di layout non siano cambiati molto per Ext JS 3. I layout stanno ottenendo una riscrittura per Ext JS 4 - che avrà la sua prima beta questo mese - per renderli più simili al sistema di layout CSSbox CSS3.

L'estensibilità è l'escrescenza di un modello di componente adeguato. Ext JS ha un sacco di componenti di estensione utente che possono essere mescolati e abbinati. Un buon esempio di componente after market professionale è Ext Scheduler. C'è anche un good tutorial on how to create components.

Associazione dati: le componenti dell'interfaccia utente sono associate ai negozi, pertanto più elementi dell'interfaccia utente vengono aggiornati con i nuovi dati man mano che vengono modificati. Puoi leggere il store API reference per avere un'idea di come funziona.

scuoiatura Complex - Sencha Touch ha un excellent theming system che viene portato su Ext JS 4 - ma Ext JS 3 e 2 sono un po 'più coinvolto a tema a causa di requisiti di compatibilità IE6 (è necessario generare le immagini)

I livelli dei servizi sono astratti con data proxy, which is extended for JSON, Http, XML etc.

Sencha Touch ed Ext JS 4 hanno un'architettura MVC (semplice). Ext JS 3 e sotto no.

Ecco a good write-up on dependency injection in Ext JS (ma dovrebbe generalizzare a Touch)

Per test di unità, si consiglia di Jasmine - che è uscito di Pivotal Labs.

Ext JS e Sencha Touch sono ampiamente utilizzati - Ext JS principalmente per le applicazioni aziendali, ma ci sono molte grandi aziende che lo utilizzano come Salesforce, Marketo e altro per utenti focalizzati all'esterno. Sencha Touch ha a nice gallery of apps from our latest dev contest, dovresti verificarlo.

Se vi preoccupate per utensili, abbiamo anche una Drag and drop GUI Designer e uno strumento di animazione CSS3 (quest'ultimo in anteprima per gli sviluppatori)

Answer 2

La HTML5 Boilerplate può essere interessante per voi. http://html5boilerplate.com/

io non sono sicuro di quadri JS per MVC o di dipendenza, ma per unità di test cablaggio del Dojo (a causa di nuove restrizioni utenti non possono inserire un secondo collegamento, ma dovrebbe essere facile da trovare) è abbastanza potente . Mi piacerebbe dare un'occhiata a più di roba del Dojo come fanno un lavoro piuttosto fresco con JS

Answer 3

Penso che ti avrebbe fatto piacere la Sencha Framework conforme alcune delle cose che stai cercando.

Answer 4

Sproutcore è un framework di applicazioni javascript. È completamente MVC con un'infrastruttura di osservazione/associazione ricca di valore-chiave che riduce la quantità di codice idraulico che è necessario scrivere, se lo si utilizza correttamente.Supporta la maggior parte delle vostre esigenze:

"Architettura di componenti solidi (compresi gli eventi del ciclo di vita)" - ogni vista ha una serie di eventi relativi al ciclo di vita.

"Estensibile" - Sproutcore supporta i mixin e ha una propria "conversione dell'ereditarietà prototipale" in ereditarietà classica, così ti sembrerà di creare classi in JS.

"Gestori di layout": disponi le tue opinioni, dove sono, quanto sono grandi. Ci sono SplitViews quale è possibile ridimensionare e nido, ma questo potrebbe essere un settore in cui SC non soddisfa le vostre esigenze (anche se è possibile implementare facilmente vista ridimensionamento tramite l'osservazione)

"Browser agnostica" - è piuttosto il browser agnostico come ogni altro framework JS.

"Supporto per l'associazione dei dati" - infrastruttura vincolante molto estesa. Se si associa un campo vista a un campo modello, questo verrà aggiornato quando il modello viene modificato.

"Supporto per skinning complesso" - scava via css come qualsiasi altra app Web se non ti piace il tema predefinito.

"Test unità" - SC viene fornito con un cablaggio di test qunit in posizione. Quando si utilizza lo strumento da riga di comando SC per creare una classe (che si tratti di una M, di una V o di una C), lo strumento crea uno stub di prova per te.

'HTML5' - una sorta di concetto nebuloso per iniziare. SC supporta sicuramente la generazione di un manifest di app html5 negli strumenti di compilazione. Sono disponibili framework per la scrittura nella memoria locale del browser. Penso che più capacità HTML5 arriveranno online nel prossimo futuro.

L'app NPR su Chrome App Store e questa app sudoku sono entrambe le app SC.

Answer 5

Sono nella stessa barca come te. Tutti i framework js che ho trovato richiedono un sacco di CSS per renderli la metà del flex nativo. La maggior parte dei framework js più recenti rinuncia ai vecchi browser.

Finanziamenti e dimostrazioni interessanti possono rendere la meteora il vincitore del quadro a lungo termine.

mi piace la semplicità di angularJs

qui è un buon confronto di alcuni tra quelli popolari

http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/