Où me trompe-je sur mon projet et ces frameworks Javascript?


107

Tout d'abord, la pierre angulaire du projet que je souhaite créer est un moteur de wiki implémenté comme une application Web d'une seule page. Je prévois d'avoir un ensemble de fonctionnalités disponibles dès le départ avec de nombreux ajouts de fonctionnalités sur la route.

Caractéristiques de base

  • création de page (crée à la fois un article wiki et un forum de discussion pour cet article)
  • balisage et WYSIWYG ala markItUp
  • conversion à la volée entre balisage / html / WYSIWYG
  • une barre latérale pour naviguer rapidement
  • une barre d'outils supérieure pour choisir l'édition / la vue

Fonctionnalités avancées

  • barre latérale configurable pour naviguer via une méthode différente
  • barre d'outils configurable (éventuellement ajouter le langage de balisage de votre choix)
  • Mots clés
  • tâches modifiables
  • glisser-déposer les téléchargements de fichiers et les pièces jointes d'images

Le moteur comprendrait à l'origine la création de page, le balisage, l'édition et l'enregistrement WYSIWYG les plus élémentaires. Je voudrais éventuellement étendre ce moteur de base avec un support d'image par glisser-déposer, des téléchargements de fichiers, des graphiques de données en direct et une barre latérale pour personnaliser les vues.

J'ai fait une recherche assez approfondie d'un projet décent sur lequel baser mon projet, mais à part TiddlyWiki, il ne semble pas y avoir de bons moteurs de wiki basés sur javascript. J'ai également envisagé d'appliquer Jquery sur les moteurs de wiki existants, mais je pense que je finirais par le réécrire de toute façon (et c'est juste plus excitant d'ajouter les fonctionnalités que je veux au fur et à mesure). Quoi qu'il en soit, je suis arrivé à implémenter cette bête avec une bibliothèque javascript + un framework.

Je sais qu'on ne peut pas vraiment comparer certains de ces cadres les uns par rapport aux autres, car ils ne sont pas vraiment des pommes à des pommes. J'ai essayé de formuler des commentaires / questions de comparaison avec des éléments comparables des cadres respectifs, mais je suis ouvert à être corrigé.

Alors on y va:

Sur la base de mes propres recherches et opinions, j'ai réduit la liste aux éléments ci-dessous. J'ai intentionnellement omis des choses telles que SproutCore, corMVC, YUI et d'autres car je pensais, dans ma capacité limitée, que les éléments ci-dessous seraient mieux adaptés.

Mes options


jquery / UI + backbonejs

Global

D'après ce que j'ai lu, cette combinaison est utilisée et appréciée par beaucoup et est très flexible et extensible. Ma principale préoccupation est que cette combinaison n'est tout simplement pas le meilleur point de départ pour développer l'interface utilisateur plus orientée bureau.

UI

Bien que jQueryUI ou jqueryTools puissent être compétitifs, ils ne semblent certainement pas à la hauteur des capacités d'interface utilisateur d'autres frameworks. Plus précisément, ils semblent lourds sur les effets, mais manquent d'un support de découpage de mise en page décent.

javascriptMVC

Global

JavascriptMVC me semble qu'il s'agit essentiellement d'extensions jquery + MVC (jqueryMX), ainsi que de quelques autres applications de documentation (documentJS), de tests fonctionnels (funcUnit) et de gestion du code et des dépendances (stealJS). Au-delà des avantages du module supplémentaire, je pense que le débat fonctionnel se résume vraiment à backbonejs vs jqueryMX Ai-je raison à ce sujet et est-ce que quelqu'un a travaillé ou comparé les deux?

UI

JavascriptMVC ajoute les éléments MXUI en plus de tout ce qui est disponible pour Jquery, donc je pense au moins que c'est une légère victoire dans cette catégorie.

knockoutjs

Global

Mes pensées et mes préoccupations à ce sujet sont très similaires aux commentaires de jquery + backbone. Ils semblent tous deux offrir des fonctionnalités similaires, mais sous un angle différent. Un inconvénient souvent cité est que knockoutjs associe trop étroitement la logique métier et la présentation aux liaisons de données et que cette méthode de liaison peut se décomposer pour une interaction d'interface utilisateur complexe, mais j'aimerais savoir pourquoi ce n'est pas un problème.

UI

Vide pour le moment

Dojo et ExtJS

Global

Je vais combiner la discussion Dojo et ExtJS parce que j'en sais le moins sur eux et qu'ils semblent jouer presque dans le même espace. La plupart des informations sur le stackoverflow à propos de ces deux semblent obsolètes. D'après ce que j'ai vu, ce sont deux grands frameworks qui conviennent à la mise en œuvre d'applications de bureau. Dojo avait été réprimandé pour sa documentation médiocre, mais cela ne semble plus être le cas. ExtJS a bien sûr la licence commerciale, mais c'est vraiment raisonnable pour ce que vous obtenez et je ne lui en voudrai pas trop. Les widgets dans ExtJS semblent être un peu plus professionnels que Dojo, mais je pourrais certainement y être corrigé. Je serais intéressé d'entendre toute personne qui a de l'expérience dans les deux.

UI

Dojo a la bibliothèque d'interface utilisateur dijit ExtJS a des fonctionnalités d'interface utilisateur mais elles ne sont pas dans le noyau Ext. Voici la documentation et voici leurs démos

Cappuccino

Global

Et puis il y a Cappuccino. Pas de CSS, pas de html, mais aussi il pourrait être difficile d'utiliser les bibliothèques javascript existantes. Objective-J ne semble pas effrayant, d'autant plus qu'ils vantent également pouvoir écrire du javascript brut. Les démos sont impressionnantes et semblent approcher de près les besoins d'interface utilisateur du moteur wiki. L'API à base de cacao est très intéressante pour quelqu'un qui ne la connaît pas, mais cela en vaut peut-être la peine. J'ai entendu dire que le moteur de mise en page n'est pas toujours facile à utiliser, mais une technologie jeune et peut-être perturbatrice comme celle-ci aura certainement quelques lacunes.

UI

Vide pour le moment

Je m'excuse d'avoir autant écrit mais bon, au moins ce n'est pas une question ax vs y vs z en espérant des tonnes de réponses bon marché. Alors qu'est-ce que tu en penses? Quelle devrait être la base de mon bureau comme le moteur wiki, qui, espérons-le, deviendra plus riche en fonctionnalités (lecture complexe) au fil du temps?


9
+1 pour une question incroyablement détaillée et bien pensée!
Sean Vieira

8
Je ne suis pas sûr de votre chronologie et de vos ressources, mais lorsque j'essaie de choisir entre plusieurs cadres / environnements, je vais simplement de l'avant et j'essaie de créer rapidement un prototype. Même s'il ne s'agit que d'une ou deux fonctions majeures, je trouve que toute la recherche et la documentation dans le monde ne correspondront jamais à essayer de construire quelque chose avec les outils. Je dis: prenez une journée avec chacun et voyez jusqu'où vous allez. Cela vous donnera une assez bonne indication des outils qui sont à la hauteur de la tâche et qui vous conviennent le mieux.
Brian Flanagan

1
@Brian Flanagan Passez à une réponse - même si "méta".

1
Avez-vous regardé tiddlywiki.com , je pense que c'est un wiki purement autonome réalisé en JavaScript
Bernhard

Ouais, j'ai regardé tiddlywiki. À bien des égards, c'est l'inspiration de ce projet, mais j'ai ma propre base et ma propre direction envisagées pour ce projet.
funkyeah

Réponses:


4

Je suggérerais d'abord de définir des exigences d'interface utilisateur spécifiques pour votre projet. Parmi les frameworks que vous avez essayés, lesquels avez-vous essayé?

Personnellement, je me suis lancé dans le développement d'ExtJS car les projets sur lesquels je travaille nécessitent beaucoup de personnalisation des contrôles / widgets. ExtJS en a une tonne dès la sortie de la boîte et peut toujours être étendu, combiné ou intégré à la monstruosité dont votre entreprise a besoin.

ExtJS 4 vous permet également de "skin" votre interface utilisateur pour personnaliser davantage l'apparence et la convivialité.

Si vous êtes nouveau dans JavaScript et que vous êtes à l'aise avec Java, vous pourriez même vous pencher sur une solution côté serveur telle que GWT , JSF ou même Vaadin


19

Je ne suis pas sûr de votre chronologie et de vos ressources, mais lorsque j'essaie de choisir entre plusieurs cadres / environnements, je vais juste de l'avant et j'essaie de créer rapidement un prototype. Même s'il ne s'agit que d'une ou deux fonctions majeures, je trouve que toute la recherche et la documentation dans le monde ne correspondront jamais à essayer de construire quelque chose avec les outils. Je dis: prenez une journée avec chacun et voyez jusqu'où vous allez. Cela vous donnera une assez bonne indication des outils qui sont à la hauteur de la tâche et qui vous conviennent le mieux.


6

est à la mode de nos jours (le framework JavaScript full-stack le plus étoilé sur GitHub et Meteorpedia est un moteur wiki écrit en Meteor.

La vidéo de lancement vous rendra accro à 1h28.

Il est agnostique en ce qui concerne l'interface utilisateur, et a été testé intensivement avec Bootstrap et Famo.us . Il génère également des applications mobiles à partir de la même base de code.


1
Et il existe des intégrations avec React, mais ce n'est que pour les personnes qui y participent à 100%. Il n'y a pas non plus de problèmes en utilisant les plugins jquery et les bibliothèques de dessin svg / canvas sans beaucoup de connaissances sur Meteor.
imslavko

1

Votre choix de cadre pourrait ne pas limiter vos choix d'interface utilisateur autant que vous l'imaginez. Cet article récent d'Henri Bergius sur le découplage de la gestion de contenu illustre bien mieux ce point que je ne pourrais - et, accessoirement, des liens vers un éditeur de contenu sur place en JavaScript pur (indépendant du framework) .


Je suis certainement en train de creuser l'éditeur aloha pour WYSIWYG. Je voudrais certainement l'ancrer en haut de l'écran et ajouter des onglets pour afficher la zone de texte dans le balisage d'un certain format également. Mon autre option principale serait une certaine saveur de markItUp .
funkyeah

1

Tu n'es pas seul!

VanillaJS et Ampersand .. sont d'excellents exemples de la volonté sérieuse de JavaScript plus simple et plus modulaire.

Il y a même un livre à ce sujet.

La simplicité est motivée par une fonctionnalité es6 sous-estimée: les modules et la norme d' implémentation SystemJS . Il peut même être utilisé sur des systèmes non-es6.

À quel point cela est cool!


1

Je dirais que vous vous trompez dans votre choix global de candidats car vous omettez Angular et Ember, qui sont tous deux mieux adaptés que tous les autres cadres répertoriés.

Dans l'ensemble, je dirais qu'Angular.js est le cadre de celui-ci.

Accent sur le routage

Une grande partie de ce dont vous parlez (plusieurs barres latérales pour la navigation, une application sur une seule page) sont des fonctions de routage ou la façon dont le frontal interprète le texte dans la barre de navigation de votre URL.

Angular.js et Ember ont d'excellents routeurs qui vous permettent d'accomplir tout ce dont vous avez besoin sans code supplémentaire.

Pour votre bénéfice, voici un aperçu rapide des fonctionnalités d'Angular qui peuvent être utilisées pour créer votre wiki à page unique

La structure du site lui-même

Angular dispose d'une incroyable bibliothèque appelée UI router vous permet à la fois de créer une navigation personnalisée et de mettre en place une structure conviviale pour le référencement pour révéler votre contenu. Plusieurs vues permettraient également une barre d'outils supérieure.

Tutoriel du routeur Ui: http://cacodaemon.de/index.php?id=57

Éditeur WYSIWYG

Angular est construit sur une liaison bidirectionnelle en direct (lorsque vous changez quelque chose quelque part, cela change automatiquement partout ailleurs.) Par conséquent, il est livré avec de nombreuses fonctionnalités qui fonctionnent bien avec ce type d'éditeur. Quelques bons ont déjà été créés et il vous suffit de les implémenter.

http://textangular.com/

Graphiques et autres trucs intéressants

Les directives angulaires sont conçues pour faire des choses comme créer des composants de graphique réutilisables. Ils ne sont pas totalement différents des widgets Wordpress. Beaucoup d'entre eux ont déjà été développés et peuvent être ajoutés à votre projet Angular.

http://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/

Concernant Ember, je n'en connais pas grand-chose donc je ne peux pas parler de ses particularités.


0

Une suggestion à propos de Backbone, si vous décidez de l'utiliser, vous devriez opter pour Marionnete car c'est Backbone mais avec une meilleure structure architecturale et plus opiniâtre (je pense personnellement que Backbone ne définit aucune directive et cela semble être un inconvénient dans les grandes applications) .

J'ai travaillé avec lui pendant quelques mois en combinant différentes bibliothèques js et ne vous gêne pas comme d'autres frameworks et le pipeline de messages est un très bon moyen de connecter des composants via l'application tout en les gardant découplés.

Ici, vous avez un excellent discours qui m'a fait décider: https://www.youtube.com/watch?v=qWr7x9wk6_c

Et ici, vous avez un prototype de démonstration qui a également l'élément glisser-déposer ainsi que d'autres bibliothèques js connectées. J'adorerais entendre ce que vous pensez de mon code depuis que j'ai 1,5 ans de travail sur le développement Web ... je suis toujours un débutant: https://github.com/Drasky-Vanderhoff/marionette-demo/

À propos de Knockout, c'est vraiment bien si vous voulez une interaction avec le contenu que vous avez déjà et que vous ne vous connecterez pas constamment avec le backend. J'ai travaillé avec lui pendant 6 mois et j'ai fini par devoir utiliser beaucoup d'autres libs js pour le routage; De plus, je finis par répéter beaucoup de structures que Backbone et d'autres Frameworks JS finissent par avoir. Ce que je dirai, c'est que cela ne vous gênera pas du tout et sera un outil plutôt qu'une contrainte. C'était aussi il y a presque un an, donc quelques choses ont changé.

Une chose, si vous trouvez Knockback (Knockout + Backbone) ... évitez-le, la documentation n'est pas aussi bonne qu'elle devrait l'être et il vous faudra beaucoup plus de temps pour l'apprendre. Si vous voulez y aller, faites d'abord un prototype rapide pour voir si c'est ce que vous voulez.


Cela fait un an que vous avez publié ceci. Alors que je cherche à démarrer un nouveau développement maintenant, Marionette est-elle toujours votre premier choix pour le développement Javascript?
AlVaz

Pas du tout, pour le moment, c'est mieux avec Angular.js ou React.js (vous pouvez combiner les deux si vous le souhaitez). Si vous souhaitez à la fois une version mobile et une version Web pour une application, je vous suggère fortement d'utiliser React.js car React Native est utilisé pour créer des applications natives iOS et Android. React.js et le natif partagent les mêmes concepts, structures et paradigme (c'est Apprendre une fois, utiliser partout, Connaître React.js == React Native, oui je n'utilise pas le triple égal: P)
DraskyVanderhoff

Il existe également des composants Web utilisant Polymer que je vous suggère fortement de vérifier si vous souhaitez travailler avec le framework le plus chaud de l'année prochaine. Enfin, Meteor est une excellente option si vous avez besoin d'une synchronisation de données à 100% en temps réel / d'une liaison de données à trois voies, en particulier parce que si vous écrivez des validateurs pour les paramètres, il exécutera le même validateur à la fois dans le backend et le frontend, évitez d'avoir besoin d'avoir 2 codes des bases identiques.
DraskyVanderhoff

Une clarification, je n'ai jamais dit que Marionette était mon premier choix (c'était en fait Angular à ce moment-là) ce que j'avais dit était que SI vous allez utiliser Backbone.js, ELLES utiliser Marionette.js à la place.
DraskyVanderhoff
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.