Framework JavaScript pour créer des applications sur une seule page [fermé]

101

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


Mes exigences sont les suivantes:

  • Couche de données RESTful (comme les données de braise)
  • Structure MV *
  • Itinéraires dynamiques
  • Test-support
  • Codage par convention
  • Assistance SEO
  • Prise en charge de l'historique du navigateur
  • Bonne documentation (API)
  • Prêt pour la production
  • Communauté vivante

Colonne vertébrale

L'application actuelle utilise backbone.js. Dans l'ensemble, backbone.jsc'est un beau projet, mais il me manque des structures bien définies qui déterminent où ce qui doit se passer et comment les choses doivent être mises en œuvre. Travailler dans une plus grande équipe avec des développeurs changeants, cela conduit à une sorte de code non structuré, difficile à maintenir et difficile à comprendre. C'est pourquoi je recherche maintenant un framework, qui définit déjà tout cela.

Braise

J'ai regardé dans ember.jsles derniers jours. L'approche me semble très prometteuse. Mais, malheureusement, le code change presque quotidiennement. Donc, je ne l'appellerai pas prêt pour la production. Et, malheureusement, nous avons hâte que ce soit la version 1.0. Mais j'aime vraiment l'idée derrière ce cadre.

Angulaire

Angular.jsest également un framework largement répandu, maintenu par Google. Mais je ne pouvais pas me familiariser avec angular. Pour moi, la structure semble un peu floue, il manque des explications sur les responsabilités globales de chaque partie du cadre, et les implémentations semblent détournées. Juste pour clarifier les choses: ce n'est que mon impression personnelle et pourrait être basée sur des connaissances manquantes.

Batman et Meteor

Comme je l'ai 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:

  • Est-ce que je manque 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 les applications SP plus importantes?

PS: Je voudrais recommander un excellent article de blog de Steven Anderson (développeur principal de Knockout.js) sur la conférence "Trône de JS" (à partir de 2012) et les 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 si rapide et rapide pour les SPA, la plupart d'entre eux sont déjà obsolètes.

Christopher Will
la source
Découvrez le framework SPA basé sur knockout que je viens d'ouvrir: knockout-spa github.com/onlyurei/knockout-spa
onlyurei

Réponses:

81

J'ai récemment dû décider d'un framework JavaScript SPA sur un projet aussi.

  • Braise

    J'ai regardé Ember très tôt et j'ai eu des pensées similaires à vous à ce sujet - je l'ai vraiment aimé mais j'avais l'impression qu'il était encore trop tôt pour être utilisé ... environ la moitié des didacticiels que j'ai lus ne fonctionnaient pas avec la version actuelle parce que quelque chose avait récemment changé dans le fonctionnement des modèles.

  • Colonne vertébrale

    Backbone a été 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 de modèle et de vue. Peut-être voulez-vous 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 de liaison modèle / REST, mais ne prescrit vraiment rien pour la liaison de vue. Si la liaison de modèle est importante pour vous et que vous utilisez des rails, cela devrait être un jeu d'enfant. Malheureusement, les services Web de mon application ne correspondaient pas vraiment, et j'ai dû écrire les miens .syncet des .parseméthodes pour tout. La séparation du code modèle et vue était bien, mais comme nous devions écrire toutes nos liaisons à partir de zéro, cela n'en valait pas la peine.

  • Assommer

    Knockout est comme le Yang de Yin à Backbone. Là où Backbone se concentre sur le modèle, Knockout est un framework MVVM et se concentre sur la vue. Il a des observablewrappers pour les propriétés des objets JavaScript et utilise un data-bindattribut pour lier les propriétés à votre HTML. En fin de compte, nous avons opté pour Knockout car la liaison de vue était principalement ce dont nous avions besoin pour notre application. (... plus d'autres, comme discuté plus tard ...) Si vous aimez la liaison de vue de Knockout et les liaisons de modèle de Backbone, il y a aussi KnockBack qui combine les deux frameworks.

  • Angulaire

    J'ai regardé cela après Knockout - malheureusement, nous semblions tous assez satisfaits de la façon dont Knockout voyait la liaison. Cela semblait beaucoup plus complexe et difficile à entrer que Knockout. Et il utilise un tas d'attributs HTML personnalisés pour faire des liaisons, ce que je ne suis pas sûr d'aimer ... Je vais peut-être jeter un autre coup d'œil à Angular plus tard, car depuis que j'ai rencontré plusieurs personnes qui aiment vraiment le framework - peut-être que nous juste regardé trop tard pour ce projet.

  • Batman , Meteor , CanJS , colonne vertébrale

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

  • Épilogue

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

    Le développement d'applications Javascript ressemble plus à l'écosystème Java qu'à l'écosystème Rails. Rails fournit un noyau solide de choses que vous allez utiliser pour chaque application (framework Rails), et la communauté fournit de nombreuses personnalisations en plus de cela (gemmes). Java fournit ... un langage. Et puis vous pouvez 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 puis vous pouvez utiliser Ant ou Maven ou Gradle pour le construire. Et choisissez Tomcat ou Jetty ou JBoss ou WebLogin pour l'exécuter. Il faut donc davantage choisir ce dont vous avez besoin et ce qui fonctionne ensemble plutôt que de choisir LE framework à utiliser.

Nate
la source
Merci beaucoup pour votre réponse détaillée. Quelques questions concernant knockout.js: 1) Fournit-il une sorte de couche de données pour garder le modèle en frontend / backend synchronisé? 2) Comment est le support pour inclure un modèle dans un autre (probablement avec requireJS)? 3) Est-il facile de mettre tous les fichiers (modèles, vues, contrôleurs, assistant, etc.) séparément et dans des dossiers différents? À côté de ces questions, j'ai défini votre réponse comme acceptée, car vous avez donné beaucoup d'informations.
Christopher Will
@ChristopherWill merci! 1.) Tout comme Backbone vous laisse le soin de relier la vue, Knockout vous laisse le soin de relier REST-> Model. Il y a quelques exemples dans la documentation - knockoutjs.com/documentation/json-data.html ou vous pouvez utiliser KnockBack pour combiner la population REST-> Model de Backbone.
Nate
2.) Cela dépend de ce que vous voulez dire - Knockout a une liaison de données intégrée qui vous permet de prendre une collection du modèle, de la lier à une balise de liste ou de table et pour chacun de rendre un modèle spécifié. Pour les choses à grande échelle, comme la façon dont vous construisez vos vues globales et les échangez - c'est encore un peu manuel (au moins comment je le fais, toujours en train d'apprendre) - RequireJS avec le plugin de texte facilite un peu la tâche, mais vous devez toujours spécifier la logique et échanger les divs - je le fais simplement dans les méthodes qui répondent à mes routes. Vous pourrez peut-être câbler des événements Knockout pour ce faire, cependant.
Nate
3.) RequireJS est ce qui vous permet de faire cela.
Nate
Merci Nate. Je pense que je vais essayer KnockBack ... ça semble plutôt prometteur. Et, bien sûr, avec vos bibliothèques mentionnées (requireJS, crossroads, etc.)
Christopher Will
8

Cela fait un an que nous avons commencé le développement de notre projet de services Cloud avec de nombreux SPA, c'était donc une grande décision, quel framework javascript utiliser pour notre interface utilisateur pour satisfaire nos besoins d'architecture RESTful. et après de nombreuses recherches, nous avons fini par utiliser le framework Dojo .

principales fonctionnalités que vous allez adorer:

  1. communauté éduquée et une équipe qui a trouvé un modèle de conception parfait. grandes conventions et architecture modulaire / orientée objet. avec les attitudes de programmation CrossBrowser :)
  2. Structure MV *. créez des widgets d'interface utilisateur avec des modèles .htm externes et pour la production, créez tous vos javascript et modèles en un seul fichier .js minifié et petit
  3. construire des classes avec héritage. Property setters, de nombreux outils fonctionnels.
  4. mécanisme pub / sub (sujets nommés dans dojo)
  5. beaucoup de contrôles d'interface utilisateur, du contrôle de formulaire de validation, des boîtes de dialogue / info-bulles à une solution de graphique et de grille de données très fonctionnelle et hautement personnalisable (mais légère).
  6. un bon système de test unitaire nommé DOH. il dispose également d'un robot pour reproduire les actions souris / clavier.
  7. un outil de requête (comme JQuery) nommé NodeList avec toutes les fonctionnalités de jquery et même beaucoup de ses plugins.
  8. et la partie bonne mais pas si complète. 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é un poller AJAX, une gestion des erreurs et une solution universelle, de chargement et de notifications. nous l'avons fait très facilement en utilisant les conventions et les structures du cadre de dojo. si vous ne voulez pas faire cela, vous devrez peut-être utiliser un autre framework pour cette partie.

En regardant de superbes SPA sur le Web, vous découvrirez qu'ils sont tous personnalisés et utilisent plusieurs frameworks. mais notre expérience avec Dojo seul était fantastique. et par conséquent je vous suggère de ne penser à aucun autre cadre puisque tous sont incomplets pour un SPA. mais en fin de compte, vous avez également une autre option (que je ne recommande pas et que je n'ai pas d'informations détaillées sur). optez pour un framework JAVA capable de créer des SPA, en générant automatiquement une interface utilisateur et du javascript.

Licorne
la source
salut! Utilisez-vous Dojo maintenant? Avez-vous un blog sur Dojo?
Dunaevsky Maxim
Salut! Oui, nous l'utilisons toujours pour le même produit et nous le maintenons. le cadre interne est écrit au-dessus du dojo, et nous y ajoutons chaque jour .. non, je n'ai pas de blog pour ça. si vous allez commencer avec, il est aujourd'hui considéré comme un ancien outil. Ils travaillent toujours sur le Dojo 2.0 mais pour l'instant, il vaut peut-être mieux utiliser d'autres options. nous avons React / Angular en haut de la liste.
Unicornist