Cadres d'interface utilisateur HTML5

Question

J'ai trouvé beaucoup de HTML5 cadres de l'INTERFACE utilisateur, tels que:

• Kendo
• Wijmo
• jqWidgets
• Zebra
• Sencha
• SproutCore
• YUI
• XUI

Je suis un peu débordé avec encore beaucoup de ressources. Regardé certains d'entre eux, mais presque tout semblait trop lent et trop lourd.

Je suis un peu confus au sujet de laquelle j'apprends. Chacun de leurs sites web, de parler de leur produit comme s'ils étaient les meilleurs sur le marché. (évidence des stratégies de marketing).

En tant que débutant sur le web apps développement côté client et JS cadres de l'INTERFACE utilisateur; les gars, vous, d'après votre expérience, que l'on ne vous recommandons rapide de bureau web apps de développement compte tenu de la vitesse, widget, des collections, de la complexité, look n' sentir, de soutien, etc?

Laquelle allez-vous me recommander de commencer à apprendre?

Je sais il pourrait y avoir beaucoup de réponses et chacun pouvait préfèrent différentes, mais cela pourrait aider à me guider un peu et avoir quelques critiques de certains des cadres les plus populaires.

Answer 1

Il ya tellement de choses dans votre question, que la réponse ne sera pas facile et ne sera pas définitive. Il sera aussi beaucoup d'opinions. En regardant la liste de cadre que vous avez apporté, je vois des choses très différentes qui sont difficilement comparables les uns avec les autres. Je vais essayer de les regrouper en quelque sorte, et ajouter plus de cadres à la liste.

La question principale ici est de ne pas les avantages et les inconvénients d'un cadre particulier. La principale question est: combien voulez-vous? Avez-vous vraiment dire, une application comme Gmail ou Grooveshark? Ou avez-vous dire quelque chose comme Stackoverflow - une dynamique et pas du tout simple, mais encore un site web. Nous allons tenir compte de toutes ces options.

Peut-être vous voulez simplement améliorer votre site web avec quelques widgets, comme les onglets, les dialogues, certains déplaçable/drop éléments, l'édition de texte, etc, et vous n'êtes pas prêt à changer votre modèle de développement. Je veux dire, vous utilisez vos favoris Java/PHP/Ruby et ne souhaitent pas écrire beaucoup de votre application logiques et comportements en JavaScript. Dans ce cas, jQuery-plugin basé sur solutions peut faire pour vous, en particulier, jQuery UI et jQuery Mobile.

jQuery widgets suivre son système de plugin. Cela signifie généralement qu'ils sont extrêmement faciles à utiliser. Pour créer un bouton, vous écrivez:

$('#myButton').button();

Maintenant, si vous voulez la désactiver, vous appelez une méthode utilisant le modèle suivant:

$('#myButton').button('disable');

Et l'obtention ou les valeurs de réglage, par exemple sur le curseur ou le datepicker, ressemble à ceci:

$('#mySlider').slider('value');
$('#mySlider').slider('value', 42);

Comme vous le voyez, jQuery-fondé des solutions ont pas de modèle. Toutes vos données sont conservées dans les DOM et est obtenu par l'intermédiaire d'excentrique appels de méthode. Si vous avez besoin de dynamicly traitement de vos données, par exemple faire quelques complexes validations, charger quelque chose en arrière-plan, de filtre ou de tri, alors vous voyez que ce sera bientôt déraper. Par ailleurs, c'est le problème, pourquoi jQuery UI n'a pas fourni une grille de contrôle de la encore ils ne peuvent pas le faire sans modèle. En jQuery Mobile, vous obtenez un joli mobile de l'INTERFACE utilisateur par le biais de balisage simple, mais il n'y a pas de manière officielle pour transmettre les données entre les pages.

Résumant cette place: si vous avez un multi-page site web, si vous publiez vos formulaires, puis utiliser jQuery UI ou un briquet solution comme Twitter Bootstrap.

Peut-être, vous voulez construire quelque chose de plus complexe, de plus en plus de demande (une seule page de l'application?). Vous savez que vous aurez besoin de travailler avec des données côté client. Quelles sont vos options?

Vous pouvez utiliser un des nombreux frameworks JavaScript qui vous fournissent avec des modèles, la liaison de données et probablement d'autres moyens de créer des applications web et de les intégrer avec pourquoi pas de jQuery UI. Ou vous pouvez utiliser un framework complet comme le Kendo ou Wijmo ou jqWidgets. Ces cadres s'appuient sur jQuery (Wijmo s'appuie sur jQuery UI) et de fournir d'autres moyens de manipulation de données. Ils ont des modèles de données. Kendo met en œuvre sa propre solution (je pense), alors que Wijmo et jqWidgets intégrer avec le populaire knock-out JS.

Donc, Kendo et Wijmo appartiennent au groupe des cadres qui fournissent à la fois des widgets/contrôles et de l'aide du modèle. Il y a d'autres cadres de ce genre, qui ne sont pas jQuery-basé, par exemple, Dojo Toolkit. Ajouter un peu de dynamique de chargement de données et vous aurez un peu complexe de l'application web. Que pouvez-vous désirez?

En fait, la chose la plus importante est oublié - comment avez-vous de la structure (organiser) vous demande? Si vous essayez de créer une page unique application qui communique avec le serveur de repos, puis vous allez bientôt entrer dans un désordre si votre application n'a pas d'architecture. Les caractéristiques qui sont habituellement nécessaires pour cela sont d'une certaine inquiétude de séparation (MVC, MVVM), la création de modèles, de routage et de gestion du module. C'est là que SproutCore et Sencha apparaissent. Ils offrent une solution complète pour la construction d'applications web, où les widgets sont juste une petite partie.

Il peut sembler comme SproutCore et Sencha sont les gagnants ici, parce qu'ils sont des solutions les plus complètes qui incluent à la fois de l'INTERFACE utilisateur et les logiques d'entreprise et aussi la structure de votre application. Malgré tous les avantages, il ya certains inconvénients. Certains disent qu'ils sont trop lourds, ou nécessiteront d'adhérer à leur modèle de développement, ce qui vous plairait pas. Par exemple, dans le Sencha-vous décrire votre interface en JavaScript et l'utilisation Sencha du type de système. Cela ajoute une sorte de sensation de lourdeur qu'il y a des abstractions et des emballages, alors que vous aimez vraiment la facilité de HTML, CSS et JavaScript natif.

Mais ce n'est pas la seule façon. La puissance du web est qu'il y a beaucoup-beaucoup de cadres, de bibliothèques, d'outils, plus petits et plus grands, qui vous aidera à créer votre application comme vous le souhaitez. Considérons, par exemple, AngularJS. Il ne fournit pas un ensemble de contrôles de lui-même, mais combiné avec Twitter Bootstrap devient une solution complète pour la RIA. Ou, regardez, par exemple, EmberJS, un plus léger cadre du gars qui a créé le poids lourd de SproutCore. Il ne vous fournit pas avec un ensemble de widgets, mais est, à mon avis, une très bonne base pour une application.

Voici donc ma dernière pensée au lieu de conclusion. Tous ceux cadre d'habitude vous montrer leur widget, joliment les thèmes et les autres éléments visuels. Mais ce qui importe vraiment est de savoir comment vous allez réellement développer votre application, comment vous vous la structure, ce qui vous permettra de mettre en œuvre votre logique. Apprendre à connaître ce que le cadre offre et de réfléchir si vous pouvez remplacer ce qui manque.

Answer 2

Infeligo la réponse est au top. Mon expérience peut être utile à quelqu'un. J'utilise Ruby on Rails comme mon serveur plate-forme où l'essentiel de mon activité logique réside.

À l'extrémité avant j'utiliser dHTMLX qui est une bibliothèque JS d '"objets" les plus puissants de ce qui est leur objet de grille. La plupart de mes applications d'entreprise/comptabilité de traitement de l'information/exigences d'affichage et l'objet de la grille est mon pilier. Toutefois, leur objet est complet, y compris la possibilité de créer des "fenêtres" au sein de la seule application à offrir un MDI type d'interface à l'utilisateur final. En général, je ai un formulaire de connexion qui, lorsqu'appliquée avec succès s'ouvre d'une seule page HTML avec un menu en haut. Basé sur la sélection à partir du menu de nouvelles fenêtres sont ouvertes et fermées afin d'affichage / de manipulation de l'information. Ces fenêtres sont dans le champ d'application de la seule page HTML.

Tous les objets ont une très bonne événements associés avec eux et je fais un peu de validation à l'extrémité avant à l'aide de ces événements. Cependant j'ai l'habitude de dupliquer toute la validation des données dans les Rails de ce Modèle. C'est du travail supplémentaire, mais je suis juste prudent. Il y a également un certain nombre d'abstrait des objets qui contribuent à relier les données entre l'extrémité avant des objets visuels par exemple le réseau et le serveur back-end. La plupart des connexions de données peut être effectuée à l'aide de XML ou JSON. J'utilise en XML ou JSON tout simplement parce que de mon expérience avec cette structure et le fait que les Rails fournit un décent générateur XML. Donc dans mon cas j'utilise rarement tout de Rails de vues comme l'ensemble de mes objets visuels viennent de dHTMLX.

L'autre chose que j'aime à propos de dHTMLX est la vitesse de leurs objets. Par exemple l'objet de la grille sera assez facilement gérer+ de 10 000 lignes à très vitesses acceptables.

Le GROS point noir de la suite est-il de la documentation. La société est une europe de l'est développeur et par conséquent, il est souvent difficile de comprendre exactement ce que leur documentation. Également la documentation a tendance à ne pas tout document complètement et donc, beaucoup de temps est gaspillé dans l'essai et de l'erreur type d'apprentissage.

Espérons que cette aide