8
votes

Quelqu'un peut-il suggérer une bonne architecture et une bonne architecture côté client pour des applications Web à grande échelle?

Je construis une application Web à grande échelle. Cela se développera à l'avenir, donc j'ai besoin d'une bonne architecture de back-end et front-end pour ma demande. À l'arrière du site, j'utilise Zend Cadre pour que l'architecture soit correcte pour moi. Mais à l'avant, travailler avec JavaScript et Ajax sans avoir une bonne architecture permet de changer plus tard durement et déroutant.

Pour l'instant, j'utilise ma propre architecture. J'ai un gros objet pour toute la demande dise BigObject. Je l'étends lorsque des modules sont ajoutés au site. Dis que j'ai un module de téléchargement. J'utilise ceci: xxx

Que pensez-vous? Y a-t-il une meilleure solution à ce problème? Quelqu'un a réfléchi à une bonne structure pour une partie de la partie frontale des applications Web (comme ce que nous avons à l'arrière, de bonne structure de fichiers et des méthodes orientées objet)?


1 commentaires

Cette question, bien que ce soit très populaire et qui m'intéresse, on ne puisse pas être répondu bien car cela dépend de la demande (qui n'est pas spécifiée) et que les cadres changent chaque semaine et que cela demande "mieux" qui est un drapeau rouge pour l'OMI basée sur l'opinion. Maintenant, si on essaie de voter pour le fermer à cause de cela, on se dit "Cette question a une prime ouverte et ne peut pas être fermée."


7 Réponses :


4
votes

Beaucoup de gens poussent pour Dojo ou Yui pour de grandes applications. Ce sont des cadres honnêtes où tout ce que vous trouverez est une bibliothèque.

Personnellement, j'ai tendance à rester avec jQuery. Je crée des plugins JQuery ou des widgets JQueryui au besoin. J'ai réussi à pousser Jqueryui assez loin.

Tout tombe dans $. fn.myplugin ou $. ui.mywidget . Pour moi, cela a l'avantage supplémentaire de vous pousser à garder le code très modulaire et portable (en supposant que vous respectez les conventions JQuery / JQueryui). xxx


2 commentaires

@Paul tu as raison. JQuery est une bibliothèque (je l'utilise fortement dans ma demande). Je ne me sens pas à l'aise avec Yui. Oui, peut-être prolonger JQuery est une meilleure solution.


Oui, si vous utilisez de toute façon JQuery, je pense que vous devez faire vos propres fonctionnalités lorsque JQuery Plugins est aussi décent un système comme n'importe lequel.



-1
votes

Ma réponse serait de demander pourquoi vous avez besoin de cela? J'ai travaillé sur de nombreuses applications qui utilisent JavaScript, mais une chose que j'ai apprise, c'est que la meilleure chose à faire est de minimiser JavaScript et de la plupart des objets surtout d'objet JavaScript vers un minimum absolu. Les pages Web avec un javascript large et compliqué ont tendance à être lents, à la mémoire affamée et à la douleur pour déboguer avec toutes les variations de navigateur.


1 commentaires

Je fais cela parce que le débogage et le développement sont beaucoup plus faciles. Dans cette structure, je sais où tout se passe. Mais si j'ai utilisé la fonction partout nécessaire, alors peut-être que j'ai réinventé la roue dans chaque page !!



3
votes

J'étais réellement lutté avec la même question pour une même question. Après quelques projets de grande envergure, j'ai pensé à partager mes apprentissages comme une architecture de référence en cas d'une autre chose qui le trouve utile.

Regardez sur http://boilerplatejs.org . Ce n'est pas une bibliothèque, mais un cadre qui intègre certaines bibliothèques de pointe avec des modèles architecturaux pour le développement JavaScript à grande échelle.


2 commentaires

Le lien est mort.


@FiFi Peut-être que vous pourriez ajouter des détails à la question. Beaucoup de la dynamique de la communauté JavaScript mondiale a été consacrée à ce sujet dans les dix années qui l'ont été posée. Depuis que vous avez ouvert une prime, offrez peut-être un peu de clarté exactement ce dont vous avez besoin résolvé. À votre santé.



8
votes

La réponse la plus à jour à cette question en 2020, serait d'utiliser réagir + graphql + composants de style . Le meilleur endroit pour commencer avec réact est l'officiel Créer une application réactive outil. Leurs sont quelques implémentations différentes de GraphQL; Du côté client, le chef clair est Apollo . Sur le serveur, vous avez beaucoup plus de choix et il est raisonnablement facile de rouler même de votre propre mise en œuvre du serveur, alors allez-y au mieux avec votre backend actuel. Composants de style vous donne CSS dans JS, de la même manière que réagir vous donne HTML dans JS.

Pour une expérience plus complète et d'opinione, jetez un coup d'œil à Gatsby , qui apporte tout ce qui précède dans un seul cadre.

Au cours des deux dernières années, plus Fonctionnel style à écrire JavaScript est devenu populaire. Si vous n'êtes pas utilisé à la programmation fonctionnelle, il peut s'agir d'une courbe d'apprentissage escarpée pour commencer, mais commencez par appuyer sur une bibliothèque appelée Ramda .

Voici quelques liens pour vous aider à démarrer sur des JS fonctionnels


9 commentaires

C'est une bonne réponse, mais malheureusement, pas la réponse à ma question. Si je vous demande un cadre de back-end, vous répondrez à MVC, auparavel, à Cowediciter. PHP NEVER NOOTHER NODE.JS. Si ma compréhension a raison, réagir, dockerscript, jQuery ... sont des couches au-dessus de JS, ce qui n'est pas un moyen d'organiser votre non-cadre, ni un cadre, ni une architecture.


@FiFi Je dirais que réagirait que réagir est autant une patten architecturale que la bibliothèque et vous devez comprendre les deux pour y être bons. Découvrez CODE-CARTOONS.COM pour la meilleure introduction à cela.


De même, GraphQL est une repense fondamentale de l'architecture de la communication de serveur client, qui présente un certain nombre d'implémentations. Donc, je pense que les deux sont des blocs de construction à ce que votre après, plutôt qu'une couche au-dessus de JS.


Un troisième pilier que j'ai oublié de mentionner est le déménagement CSS-IN-JS. Ce sont quelques implémentations différentes de cela, celui que vous devriez commander est appelé composants de style.


Donc, en résumé, leur n'est pas une réponse unique à votre question, comme MVC. Mais ce sont les blocs de construction de clé pour ce que je pense votre après.


Merci David. Je n'ai trouvé aucune ressource liée à réagir sur le code-caricature. À propos de réagir, depuis votre réponse, je l'ai étudié, mais je n'aime pas ça. J'aime garder les choses simples et rapides. Ce n'est pas vraiment le cas avec réact (mon cadre PHP préféré est le codeigniter et je l'aime! Cela vous donne une idée de ma philosophie.


Ma conclusion actuelle est qu'il n'ya pas d'organisation ou d'architecture acceptée pour JS frontal. Chaque développeur ou équipe a sa propre recette. Peut-être que le problème vient du fait que JS est éphémère?


Pour réagir, lisez le dessin animé de code sur Flux. C'est l'architecture originale patten de réagir. En partie, il a été remplacé par Redux, mais vous avez toujours besoin de le comprendre. REDUX est maintenant remplacé par GRAPHQL pour les cas d'Usés où vous venez de traiter des données de serveur.


En pensant un peu plus, peut-être ce que vous avez suivi est Next.js ou Gatsbyjs, qui sont des cadres construits sur la réaction et vous donneront plus d'une expérience complète. Je vais ajouter plus à ma réponse car nous ajoutions beaucoup plus de détails ici.



3
votes

En fonction de ma compréhension sur le frontend, je vous demanderai d'utiliser des composants Web utilisant uniquement HTML, CSS et JS. Pas besoin de passer beaucoup de temps à comprendre les autres langues. Si vous prenez les derniers cadres d'interface utilisateur ou des bibliothèques telles que Angular, réagissez, ils ont construit sur des composants Web.

Vous pouvez personnaliser vos propres composants et utiliser des cas que vous souhaitez utiliser dans votre projet. Lorsque vous utilisez des cadres, il prendra du temps pour charger et suivre quelques libs qui utilisent.

JS Vous pouvez l'utiliser comme si vous voulez. Vous pouvez réutiliser ces composants dans n'importe quel nombre de projets une fois que vous avez créé.

Il suffit de regarder sur webcomponents https://www.webcomponents.org/introduction Vous obtiendrez un idée claire. J'espère que cela vous aidera.


0 commentaires

2
votes

Avec l'expérience de l'amélioration de mon contenu pour un million de téléspectateurs dans ma demande. Mais je devais ensuite fermer la demande de moins de profit et plus de stress dans la gestion (pas le coût, mais le profit n'était pas assez élevé pour préserver la motivation)

Mon architecture était:

  1. Mithril.js.org Bibliothèque - Checkout Mithril ici pour le front-end
  2. Twitter Bootstrap Framework front-end
  3. Backend avec "Laravel et a commencé à migrer certaines des données d'écriture lourdes vers Nodejs"
  4. REDIS comme stockage en mémoire.
  5. J'étais presque dans une situation pour déplacer mon stockage vers S3 avant de fermer l'application.

    pas de jQuery - j'ai gardé mon application sans jQuery (j'ai entendu et lire quelque part une grande application Évitez JQuery, donc sans autre enquête moi-même, je prévoyais de rester sans jQuery, bien que j'ai Pas de raison solide ou d'épreuve de balle d'éviter JQuery)

    J'ai trouvé mithril plus intéressant puis réagir ou angulaire, il était si facile de commencer et je construisais tout en apprenant que j'apprendais, il était facile et prétendant, ils sont meilleurs que de réagir, de la taille et des angulaires en termes de taille et angulaires Performance.


2 commentaires

Millions de téléspectateurs par jour, mois, années?


Il n'y a pas de métriques exactes - une partie du contenu avait un million de vues dans un mois et certains ont pris 2,3,4 mois.



6
votes

La plupart des réponses proposent des choses comme jQuery , réagit , angulaire , VUE.JS ... qui ne sont pas des cadres, ni les architectures. Toutes ces bibliothèques sont des couches au-dessus de JavaScript. Je vous rappelle juste que JavaScript est déjà une langue de haut niveau!

Étant donné que la question concerne la bonne architecture et structure client pour les applications Web à grande échelle , je dirais qu'aucune des réponses précédentes ne résoudra le problème, et il y a une raison pour que:

Il n'y a actuellement aucune architecture émergente ou couramment acceptée pour l'organisation de code source JavaScript frontale.

J'ai déjà lu une dizaine de poteaux de blog, des questions sur Stackoverflow, des vidéos YouTube ... Je n'ai jamais trouvé de quelqu'un qui détaillait une architecture générique, générale et évolutive. Les principales raisons sont les suivantes:

  • Le code JS front-end est assez faible en ce qui concerne le code source arrière, la plupart des développeurs n'ont pas besoin d'une architecture évolutive.
  • L'exécution est éphémère, la vie de JS est identique à la durée de vie des pages Web.
  • Le problème pour de nombreux développeurs est davantage de manipuler le DOM que de structurer le code JS. C'est pourquoi les réponses des gens concernent des bibliothèques plutôt que des cadres.

    J'attends vraiment qu'un jour, quelqu'un proposera la première architecture JS vraie (comme MVC par exemple). Mais à mon avis, cette architecture sera plus sur l'événement-rappel que MVC. Avant de conclure, je vous suggère les ressources suivantes:

    • impératif ou Procédure Programmation.
    • Programmation fonctionnelle (probablement la meilleure mine avec modules)
    • Vidéos géniales de Fun Fun Fonction
    • modules JavaScript

      Pour conclure, je recommanderai vivement d'envisager des modules JS qui ont un grand potentiel sous-estimé. Ce n'est pas exactement une architecture, mais:

      • JS ​​Modules Organisez votre code
      • Les modules JS sont évolutifs
      • La maintenabilité est facile
      • JS Module sont réutilisables

        La liste précédente n'est-elle pas les principales raisons pour lesquelles vous devez organiser votre code?

        mot au sage!


1 commentaires

Enfin, quelqu'un qui comprend la question ... Bien sûr, la prime est pour vous. Merci.