Structures JavaScript pour créer des applications d'une seule page

Question

Mon objectif est de migrer une application Web existante vers une application RESTful application à page unique (SPA). Actuellement, j'évalue plusieurs frameworks d'application web Javascript.

Mes exigences sont les suivantes:

Couche de données RESTful (comme ember-data)
Structure MV *
Itinéraires dynamiques
Support de test
Codage par convention
Support de référencement
Navigateur-Historique-Support
Bonne documentation (API)
Prêt pour la production
Communauté vivante

colonne vertébrale

L'application actuelle utilise backbone.js. Dans l'ensemble, backbone.js est un projet agréable, mais il me manque des structures bien définies qui déterminent ce qui doit se passer et comment cela doit être mis en œuvre. Travailler dans une équipe plus grande avec des développeurs en constante évolution conduit à une sorte de code non structuré, difficile à gérer et à comprendre. C'est pourquoi je cherche maintenant un framework, qui définit déjà tout ça.

Ember

J'ai regardé dans ember.js les derniers jours. La démarche me semble très prometteuse. Malheureusement, le code change presque tous les jours. Donc, je ne l'appellerai pas prêt pour la production. Et, malheureusement, nous ne pouvons pas attendre pour que ce soit la version 1.0. Mais j'aime beaucoup l'idée derrière ce cadre.

angulaire

Angular.js est également un cadre largement répandu, géré par Google. Mais je ne pouvais pas me familiariser avec angular. Pour moi, la structure semble un peu confuse, les explications relatives aux responsabilités globales de chaque partie du cadre manquent, et les implémentations sont détournées. Juste pour que ce soit clair: ceci est juste mon impression personnelle et pourrait être basé sur des connaissances manquantes.

Batman et météore

Si j'ai bien compris, les deux frameworks ont également besoin d'une partie serveur. Et puisque nous voulons juste un backend RESTful - peu importe la langue, la technique ou le logiciel, ce n'est pas ce que nous voulons. De plus, l'API backend existe déjà (RoR).

Knockout , CanJS et Spine

Je n'ai pas approfondi ces trois candidats. Ce sera peut-être ma prochaine étape.

Alors mes questions maintenant:

Me manque-t-il de bons frameworks SPA?
Quel cadre suggéreriez-vous/recommanderiez-vous?
Souhaitez-vous éviter l'un des cadres mentionnés?
Quelle est votre expérience dans de plus grandes SP applications?

PS: Je voudrais recommander un excellent article de blog de Steven Anderson (développeur principal de Knockout.js) à propos de la conférence "Throne of JS" (à partir de 2012) et des frameworks javascript en général.

PS: Oui, je sais qu'il y a déjà des questions sur SO. Mais comme le développement est très rapide pour les ZPS, la plupart d’entre eux sont déjà obsolètes.

Nate · Accepted Answer

J'ai récemment eu à choisir un framework JavaScript SPA pour un projet.

Ember

Regardé Ember au début et avait les mêmes idées que vous à ce sujet - cela m'a vraiment plu, mais j'avais l'impression qu'il était encore trop tôt pour l'utiliser. Environ la moitié des tutoriels que j'ai lus ne l'ont pas été. travailler avec la version actuelle parce que quelque chose a récemment changé dans la façon dont fonctionne les modèles.
colonne vertébrale

Backbone est le premier framework que nous avons sérieusement examiné. Je ne suis pas sûr de comprendre pourquoi vous pensez qu'il n'a pas de "structures bien définies"? Backbone est assez clair sur la façon de diviser le code Model et View. Peut-être que vous voulez dire qu'il n'y a pas une sorte de modèle d'application? Quoi qu'il en soit, Backbone semble vraiment concentré sur la partie modèle/liaison REST, mais ne préconise pas vraiment quoi que ce soit pour la liaison de vues. Si la liaison de modèle est importante pour vous et que vous utilisez Rails, cela devrait être un jeu d'enfant. Malheureusement, les services Web de mon application ne correspondaient pas vraiment et j'ai dû écrire le mien .sync et .parse méthodes pour tout. La séparation des codes Model et View était agréable, mais comme nous devions écrire toutes nos liaisons à partir de zéro, cela ne valait pas la peine.
KO

Knockout est comme le Yang de Yin to Backbone. Knockout est un framework MVVM orienté Backbone, axé sur la vue. Il a observable wrappers pour les propriétés d'objet JavaScript et utilise un data-bind attribut pour lier les propriétés à votre code HTML. En fin de compte, nous sommes allés avec Knockout, car la visualisation était principalement ce dont nous avions besoin pour notre application. (... plus d'autres, comme discuté plus tard ...) Si vous aimez la reliure de vues de Knockout et les reliures de modèles de Backbone, il y a aussi KnockBack qui combine les deux frameworks.
angulaire

Après Knockout, nous avons jeté un œil à cette idée. Malheureusement, nous semblions tous assez satisfaits de la façon dont Knockout voyait la reliure. Cela semblait beaucoup plus complexe et difficile à pénétrer que Knockout. Et il utilise un ensemble d'attributs HTML personnalisés pour effectuer les liaisons, ce que je ne suis pas sûr d'aimer ... Je pourrais jeter un autre coup d'œil à Angular plus tard, car depuis que je suis tombé sur plusieurs les gens qui aiment vraiment le cadre - peut-être que nous l'avons juste regardé trop tard pour ce projet.
Batman , météore , CanJS , colonne vertébrale

Je n'ai pas vraiment regardé de trop près l'un de ceux-ci. Bien que je sache, Spine est un framework similaire à Backbone avec des objets Controller explicites, écrit en CoffeeScript.
Épilogue

Comme je l'ai mentionné, nous avons fini par utiliser Knockout car, pour notre projet, il était plus important de se concentrer sur la visualisation. Nous avons également fini par utiliser RequireJS pour la modularisation, carrefour et Hasher pour gérer le routage et l'historique, Jasmine pour les tests, ainsi que JQuery , Twitter Bootstrap , et nderscore.js (et probablement plus de bibliothèques que j'oublie pour le moment).

Le développement d'applications Javascript s'apparente davantage à l'écosystème Java qu'à l'écosystème Rails. Rails fournit un noyau solide de choses que vous avez ' Nous allons utiliser pour chaque application (framework Rails), et la communauté fournit de nombreuses personnalisations en plus (gems). Java fournit ... un langage. Vous pouvez ensuite choisir Java EE ou Spring ou Play ou Struts ou Tapestry. Et choisissez JDBC ou Hibernate ou TopLink ou Ibatis pour parler à la base de données. Et vous pouvez ensuite utiliser Ant ou Maven ou Gradle pour la construire. Et choisissez Tomcat ou Jetty ou JBoss ou WebLogin pour l'exécuter. Il est donc plus important de choisir ce dont vous avez besoin et ce qui fonctionne ensemble que de choisir [~ # ~] le [~ # ~] cadre à utiliser.

Unicornist · Answer

cela fait un an que nous avons commencé le développement de notre projet de services Cloud avec de nombreux SPA, ce fut donc une décision importante, le framework javascript à utiliser pour que notre interface utilisateur réponde à nos besoins d'architecture RESTful. et après de nombreuses recherches, nous avons fini par utiliser framework Dojo .

principales caractéristiques que vous allez aimer:

communauté instruite et une équipe qui a mis au point un modèle de conception parfait. grandes conventions et architecture modulaire/orientée objet. avec les attitudes de programmation CrossBrowser :)
MV * structure. construire des widgets d'interface utilisateur avec des modèles externes .htm et pour la production, construire tous vos javascript et modèles dans un seul .js minifié et réduit
construire des classes avec héritage. les setters de propriété, beaucoup d'outils fonctionnels.
mécanisme pub/sub (sujets nommés dans le dojo)
un grand nombre de contrôles de l'interface utilisateur, du contrôle de formulaire de validation aux dialogues/info-bulles en passant par une solution de diagramme et de grille de données hautement personnalisable (mais légère).
un bon système de test unitaire nommé DOH. Il possède également un robot pour reproduire les actions de la souris et du clavier.
un outil de requête (comme JQuery) nommé NodeList avec toutes les fonctionnalités de jquery et même beaucoup de ses plugins.
et la bonne mais pas si complète partie. il a un module JsonRest à utiliser avec vos services REST. C'est un outil pratique mais il manque beaucoup de fonctionnalités.

pour surmonter ces problèmes, nous avons développé une solution AJAX poller, gestion des erreurs et communication universelle, chargement et notifications. Nous l'avons fait très facilement à l'aide de conventions et de structures de cadre dojo. Si vous ne le souhaitez pas, cela, vous devrez peut-être utiliser un autre cadre pour cette partie.

en regardant d'excellents SPA sur le Web, vous constaterez qu'ils sont tous personnalisés et utilisent plusieurs cadres. mais notre expérience avec Dojo seul était fantastique. et par conséquent, je vous suggère de ne penser à aucun autre cadre, car ils sont tous incomplets pour un SPA. mais en fin de compte, vous avez également une autre option (que je ne recommande pas et sur laquelle je n'ai aucune information de détail). aller avec un framework Java qui est capable de construire des SPA, en générant automatiquement une interface utilisateur & javascript.