SPA-Frameworks JavaScript (Application de Page unique)

Question

mon objectif est de migrer une application web existante pour un séjour SPA (single page application). Actuellement, je suis l'évaluation de plusieurs javascript frameworks d'applications web.

Mes besoins sont les suivants:

• Réparateur de la couche de données (comme ember-data)
• MV*-structure
• La dynamique des itinéraires
• Les tests de soutien de
• Codage par convention
• SEO-soutien
• Navigateur-Histoire-Soutien
• bonne (API) de la documentation
• Prêt pour la Production
• la vie de la communauté

Épine DORSALE

La présente demande est à l'aide de backbone.js. Dans l'ensemble backbone.js est un beau projet. Mais je suis en manque de structures bien définies permettant de déterminer l'emplacement de ce qui doit se produire et comment les choses doivent être mis en œuvre. Travailler dans une plus grande équipe avec l'évolution des développeurs, ce qui conduit à une sorte de code non structurées, difficile d'entretien et difficile à comprendre. C'est pourquoi je suis à la recherche maintenant d'un cadre, qui définit déjà tout ce genre de choses.

BRAISE

J'ai regardé dans ember.js les derniers jours. L'approche semble très prometteur pour moi. Mais, malheureusement, le code change presque tous les jours. Donc, je ne vais pas l'appeler prêt pour la production. Et nous ne pouvons pas attendre la version 1.0 - malheureusement. Mais j'aime vraiment l'idée derrière ce cadre.

ANGULAIRE

Angular.js est largement répandu cadre, maintenu par google. Mais je ne pouvais pas me familiariser avec angulaire. Pour moi, la structure semble sorte de pas clair, les explications sont absents de l'ensemble des responsabilités de chaque partie du cadre, et les implémentations de se sentir tortueux. Juste pour obtenir ce droit: ce n'est que mon impression personnelle, et peut être fondée sur le manque de connaissances.

BATMAN, METEOR

Comme je l'ai entendu à la fois les cadres ont besoin d'une partie serveur. Et puisque nous voulons juste une bonne backend - quelle que soit la langue, de technique ou d'un logiciel, ce n'est pas ce que nous voulons. Outre l'API principale n'existent déjà (RoR).

KNOCK-OUT, CANJS, DE LA COLONNE VERTÉBRALE

Je n'ai pas aller plus profondément dans ces trois candidats. Peut-être que ce sera ma prochaine étape.

Donc mes questions maintenant:

• Ai-je raté une bonne SPA-cadres?
• Ce cadre permettrait de vous en proposer/recommander?
• Voulez-vous éviter tout ce qui est mentionné cadres?
• Quelle est votre expérience dans les plus grands SP applications?

Cordialement,

Christopher

PS: je me tiens à recommander un excellent article sur le blog de Steven Anderson (développeur principal de Knockout.js) sur le "Trône de la JS"-conférence (à partir de 2012) et des frameworks javascript en général.

PS: Oui, je sais il y a déjà quelques question sur. Mais depuis le développement est rapidement et rapide pour les SPAs, la plupart d'entre eux sont déjà out-of-date.

Answer 1

J'ai récemment eu à décider sur un JavaScript SPA cadre d'un projet trop.

• Braise

  Regardé Braise dès le début, et avaient les mêmes pensées que vous avez à ce sujet - j'ai vraiment aimé, mais il se sentait comme s'il était encore trop tôt pour l'utiliser... environ la moitié des tutoriels, j'ai lu ne fonctionne pas avec la version actuelle parce que quelque chose a récemment changé dans la façon dont les templates œuvres.

• Épine dorsale

  La dorsale a été le premier des cadres nous avons sérieusement regardé. Je ne suis pas sûr de comprendre pourquoi vous pensez que ce n'est pas "de structures bien définies"? La dorsale est assez clair sur la façon de diviser le Modèle et Afficher le code. Peut-être vous voulez dire il n'y a pas une sorte de modèle d'application? De toute façon, de la colonne vertébrale semble vraiment concentré sur le modèle de REPOS de liaison de la partie, mais n'a pas vraiment de prescrire quoi que ce soit pour la vue de liaison. Si le modèle de liaison qui est important pour vous et que vous êtes à l'aide de Rails, il devrait être un jeu d'enfant pour ce faire. Malheureusement, les services web pour mon application n'a pas vraiment de match, et j'ai eu à écrire mes propres .sync et .parse méthodes pour tout. La séparation de Modèle et Afficher le code était bien, mais depuis que nous aurions à écrire toutes nos liaisons à partir de zéro, il n'était pas la peine.

• Knock-out

  Knock-out, c'est comme le Yin épine Dorsale du Yang. Où épine Dorsale est porté sur le Modèle, knock-out est un framework MVVM et se concentre sur la Vue. Il a observable des wrappers pour JavaScript propriétés de l'objet et utilise un data-bind attribut de lier les propriétés de votre code HTML. En fin de compte, nous sommes allés avec knock-out depuis vue de liaison est principalement ce dont nous avions besoin pour notre application. (...ainsi que d'autres, comme discuté plus tard...) Si vous aimez le knock-out de vue de la liaison et de la colonne vertébrale du modèle de liaisons il y a aussi KnockBack qui combine les deux cadres.

• Angulaire

  Regardé cette après knock-out - malheureusement, nous avons tous semblait assez heureux avec la façon dont knock-out n'vue de liaison. Il semblait beaucoup plus complexe et plus difficile à obtenir dans de knock-out. Et il utilise un tas de personnalisé les attributs HTML pour faire les liaisons, dont je ne suis pas sûr que j'aime... je peut prendre un autre regard sur Angulaire plus tard, parce que depuis que j'ai rencontré plusieurs personnes qui en ont vraiment comme le cadre - peut-être que nous avons juste regardé trop tard pour ce projet.

• Batman, Meteor, CanJS, De La Colonne Vertébrale

  N'ai pas vraiment regarder de trop près à l'un de ces. Même si je sais que la Colonne vertébrale est un cadre similaire à la colonne vertébrale avec explicite Contrôleur des objets, et est écrit en CoffeeScript.

• Postface

  Comme je l'ai mentionné, nous nous sommes retrouvés à l'aide de knock-out parce que, pour notre projet, en se concentrant sur la vue de liaison a été de plus en plus important. Nous avons également terminé vers le haut à l'aide de RequireJS pour la modularisation, carrefour et Hasher pour gérer le routage et l'histoire, de Jasmin pour les tests, ainsi que JQuery, Twitter Bootstrap, et Underscore.js (et probablement plus les bibliothèques que j'oublie sur le moment).

  Javascript développement d'une application est plus comme à l'écosystème Java que les Rails de l'écosystème. Rails fournit un solide noyau de choses que vous allez utiliser pour chaque application (Rails de cadre), et la communauté fournit un grand nombre de personnalisations sur le dessus de cela (gems). Java fournit... une langue. Et puis vous pouvez choisir Java EE ou au Printemps, ou de Jouer ou les jambes de suspension ou de Tapisserie. Et choisir JDBC ou mise en veille prolongée ou TopLink ou Ibatis de parler à la base de données. Et puis vous pouvez utiliser Ant ou Maven ou Gradle pour le construire. Et choisir Tomcat ou Jetty ou JBoss ou WebLogin pour l'exécuter. Il y a donc davantage l'accent sur le choix de ce que vous avez besoin et ce qui fonctionne ainsi que de choisir LE cadre de l'utilisation.

Answer 2

cela fait un an depuis que nous avons commencé le développement sur nos services de Cloud computing projet avec de nombreux SPAs, donc c'était une décision importante, qui javascript cadre de l'utilisation de notre INTERFACE utilisateur pour satisfaire notre architecture RESTful besoins. et après beaucoup de recherches, nous avons fini par utiliser Dojo cadre .

principales fonctionnalités que vous allez adorer:

1. instruits de la communauté et une équipe qui est venu avec un parfait modèle de conception. grand conventions et/modular object-oriented architecture. avec CrossBrowser programmation attitudes :)
2. MV* la structure. construire des widgets externes .htm de modèles et de production, de construire tous vos javascript & modèles en une seule, compacte et de petite taille .js
3. créer des classes avec héritage. accesseurs de propriété, beaucoup de la fonction des outils.
4. pub/sub mécanisme (nommé sujets dans le dojo)
5. beaucoup de contrôles d'INTERFACE utilisateur, à partir de la validation du formulaire de contrôle, les boîtes de dialogue/info-bulles à une lourde vedette, hautement personnalisable (mais léger) diagramme et grille de données de la solution.
6. un bon test de l'unité de système nommé DOH. il ont aussi un robot de reproduire la souris/clavier.
7. une interrogation de l'outil (comme JQuery) nommé NodeList avec toutes les fonctionnalités de jquery et même une partie de ses plugins.
8. et la bonne, mais pas assez complet de la partie. il a un JsonRest module à utiliser avec le RESTE des services. ses un outil pratique mais il manque beaucoup de fonctionnalités.

pour surmonter ces problèmes, nous avons développé un AJAX poller, la gestion des erreurs et de l'universel, de chargement et de notifications solution. nous il a fait très facilement à l'aide de dojo cadre des conventions et des structures. si vous ne voulez pas le faire, vous avez peut-être utiliser un autre cadre pour cette partie.

en regardant les grands SPAs à travers le web, vous trouverez tous d'entre eux sont personnalisés et à l'aide de plusieurs cadres. mais notre expérience avec Dojo seul a été fantastique. et, par conséquent, je vous suggère de ne pas penser à un autre cadre, car tous sont incomplètes pour un SPA. mais finalement, vous avez également une autre option (que je ne recommande pas et n'avons pas de détails d'informations sur). aller avec un framework JAVA qui est capable de construire des SPAs, par la génération automatique de l'INTERFACE utilisateur et javascript.