Les meilleures pratiques pour le développement de grandes applications JavaScript

Question

Ayant une solide expérience en Java/C++, je me demande si il est possible de développer un peu plus grand JavaScript de l'application sans avoir à rogner sur la qualité.

Tous les conseils sont appréciés concernant:

• Environnement De Développement
• Techniques De Débogage
• Les Tests Unitaires
• Profilage
• Instrumentation
• La Conception Du Système
• La Conception De L'Interface
• La Conception De Code

Je suis aussi curieux de voir comment à des projets comme le JavaScript Émulateur de PC et JavaScript Moteur de Jeu traitées ces questions au cas où certains d'entre vous le savent.

Answer 1

Environnement De Développement Eh bien, vous avez besoin d'un serveur web (dépend de l'architecture côté serveur) comme Apache ou IIS pour simuler l'AJAX de communication. Parfois, un éditeur de javascript est inclus dans l'éditeur de du côté serveur, le langage de développement.

Il y a une question intéressante à propos de javascript IDEs: Bonne IDE JavaScript avec jQuery soutien

---

Techniques De Débogage Et Profilage Utiliser le navigateur intégré le débogage et le profilage des outils comme Firebug.

Vous pouvez également consulter cet outil de profilage.

---

Les Tests Unitaires Si jQuery est utilisé, je recommande http://docs.jquery.com/Qunit. Dans la version de développement de la javascrit application javascript fichiers de test sont chargés. Lorsque la demande est publiée, les fichiers de test ne sont pas chargés.

---

Sécurité

• Valider et calculer tout sur côté serveur
• Prévenir XXS

---

• Comment un jeu en javascript ?

• Faire des appels AJAX sécurisé

---

Conception

Application--------------------------------

• Les Composants De L'Application
• Widgets Personnalisés

Cadre----------------------------------

• La Base De Widgets
• La Base de l'AJAX Communication
• L'INTERFACE utilisateur de Base (Méthodes d'aide...)

Le cadre fournit les fonctions de base. Par exemple, un cadre de base est jQuery et knockoutjs. Et sur le dessus de ce cadre, l'application est construite. Bien sûr, vous pouvez créer votre propre cadre de référence pour votre application. Mais au moment de choisir jQuery par exemple, vous avez essentiellement n'avez pas besoin de lutter contre les bogues de navigateur, parce que jQuery fait que pour vous.

---

La Communication avec le Serveur: C'est une bonne idée de fournir un Service RESTful pour communiquer. Vous devez également choisir entre JSON et XML. JSON est plus léger que XML, si souvent JSON est élu.

---

Les Modèles de conception: Si le javascript de l'application est vraiment grand, c'est une bonne idée de mettre en place des modèles de conception comme MVC ou MVVM.

Il y a quelques MVC/MVVM cadres à l'extérieur pour le javascript (knockoutjs par exemple).

• http://www.alistapart.com/articles/javascript-mvc/
• Poids mouche modèle

C'est vraiment un article utile sur les patrons de conception en javascript: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/

---

Mais à la fin vous avez à vous de décider comment votre application doit être structuré etc. Les Modèles de Conception peut vous montrer la bonne façon - mais à chaque application est différente, et non pas chaque solution fonctionne pour tous les problèmes.

Et n'oubliez pas que la performance est un gros problème lors de l'utilisation de javascript. Si la compression et la combinaison de fichiers javascript est une bonne idée: http://code.google.com/intl/de/speed/articles/. À ce stade, le Chargement Paresseux peut aider, aussi.

Answer 2

J'ai participé à l'écriture d'un vaste JavaScript de l'application avec les deux SproutCore et de Cappuccino et sans aucune "Macroframework". C'est ce que je pense:

Tout d'abord, tout de même "good design" des principes que vous avez acquises dans votre travail avec Java continuent de s'appliquer: ne pas écrire de code Spaghetti, encapsulent des préoccupations distinctes et l'utilisation de MVC.

Beaucoup de gens commencent à la rédaction d'un "web 2.0" ou "web 3.0" (quoi que cela signifie) application, il suffit d'ajouter jQuery et aller en bas d'un chemin de souffrance et de misère, alors que le code devient de plus en plus gros et complètement désuète.

Le "gros" des cadres comme le Cappuccino ou SproutCore vous aider à éviter de faire cela. Cappuccino est idéal pour le bureau de style apps tout SproutCore a changé d'orientation en 2.0 "de style pour le web" de Nouvelles applications comme Twitter, tout en vous donnant d'excellents moyens de la structure de vos applications et de votre code.

Maintenant à vos domaines ou de l'intérêt:

Environnement De Développement

Personnellement, j'utilise MacVim. J'ai entendu de bonnes choses au sujet de Cloud9IDE, un navigateur IDE pour JS développement. Pour le Cappuccino, vous pouvez utiliser Apple Xcode IDE, même à la conception de l'Isu (ce qui est très cool).

Les deux Cappuccino et SproutCore les applications peuvent être testés à droite dans le navigateur, sans avoir besoin d'un serveur web. Si vous avez besoin de parler à un serveur web (vous), Ruby on Rails ou node.js sont couramment utilisés pour obtenir facilement un backend en place et en cours d'exécution.

Techniques De Débogage

Le débogage est encore une sorte de mal de place quand il s'agit de développement JavaScript. Le Google Chrome developer tools sont les meilleurs là-bas à la moment. Vous pouvez définir des points d'arrêt à droite dans le navigateur et toutes sortes de choses intéressantes. C'est l'outil que vous souhaitez utiliser.

Les Tests Unitaires

SproutCore utilise QUnit, Cappuccino est livré avec OJUnit/OJSpec. Ensuite, il y a des projets comme JSDOM et env.js qui vous permettent de simuler un navigateur sur le serveur et de vous donner un environnement pour exécuter des tests automatisés sans navigateur.

Aussi des projets comme le Sélénium ou le Jasmin sont la peine de vérifier.

Profilage/Instrumentation

Vous pouvez faire de profilage avec le Chrome Dev Tools. YSlow est idéal pour les applications web généraux de profilage (y compris les actifs de chargement et autres).

La Conception Du Système

Utiliser MVC, à partir de l'obtenir-aller. Beaucoup de gens commencent avec une petite application et ajouter un peu de JavaScript ici pour lire la valeur d'un champ et un peu plus de JavaScript, il y à une mise à jour de l'étiquette. Ils le font encore. Et de nouveau. Et le dîner est servi: code Spaghetti. L'utilisation d'un framework comme SproutCore ou backbone.js pour éviter que la structure de votre code.

C'est un bon tutoriel pour SproutCore, c'est un pour backbone.js.

En va de même pour le Cappuccino, voici un tutoriel que j'ai écrit il ya environ un an. C'est un peu daté, mais vous donne l'idée générale. Voici une mise à jour de la démo app que j'ai fait pour un article que j'ai écrit pour MacTech magazine en Mai.

Si la structure de votre code comme vous le feriez dans tout autre environnement de développement. Peut-être lire ce livre ou ce livre, trop. Ces vidéos sont également une excellente ressource.

La Conception De L'Interface

Pour Cappuccino, vous pouvez utiliser Apple Xcode, Interface Builder graphiquement la disposition de votre INTERFACE utilisateur. Pour la plupart des autres systèmes de la conception de votre INTERFACE utilisateur avec la norme HTML et CSS.

Si vous souhaitez développer pour les mobiles, vous devez lire cet article.

La Conception De Code

Consulter les livres et les vidéos que j'ai mentionné ci-dessus. Et consulter ce général style de codage. Naturellement, les gens sont en désaccord sur certains aspects du style énoncées sur cette page, mais c'est un bon point de départ.

JavaScript est un milieu stimulant pour développer et il a un très dynamique de la communauté! Vous devriez vous joindre à la fête! J'espère que mes opinions ont été utiles pour vous.

Answer 3

Sur les outils:

• JSLint est un outil en ligne développé par Douglas Crockford à http://www.jslint.com/. Il vous dit pourquoi, même si la possibilité est improbable, votre code peut le briser.
• JSMin est un fichier javascript minifier écrit en C. le Compiler, le mettre dans votre $PATH, et l'utiliser pour créer des scripts de compilation de votre application. Minifiés javascript est considéré comme plus rapide à de la charge. L'obtenir à http://www.crockford.com/javascript/jsmin.html.
• Avoir un JS Read-Eval-Print Loop est toujours à portée de main. Le plus téléchargé est node.jsune RÉPLICATION basée sur la V8, le moteur javascript de Chrome. Il vous permet de de manière interactive test extraits de code javascript. Il fonctionne également comme l'un des plus puissants serveurs web, grâce à un esprit d'événement système à boucle. Vous êtes encouragés à l'utiliser de cette façon!
• Un JS invite est bonne, mais vous avez besoin d'une circulation de l'Inspecteur Web. Il offre généreuse de débogage et une meilleure compréhension de votre code. Dans ce domaine, Google Chrome et Firebug sont considérés comme haut de gamme. La différence, c'est que Google Chrome est intégré. Clic droit > inspecter, et vous avez terminé.
  Mais les meilleures fonctionnalités, il ne peut être découvert dans ce coloré triche.
• JSFiddle est un outil en ligne pour essayer de fragments de trop.
• @mathias est très fier de maintenir jsPerf, une collection d'éléments qui test JS extraits et peut dire, de la croix-navigateur, l'algorithme est plus rapide.
• YSlow est vraiment un autre outil précis pour vous dire si votre site internet est rapide, et comment vous pouvez l'améliorer, avec l'esprit de conseils.

Aussi loin que les Ide sont concernés, il n'y a pas un seul environnement de développement qui s'est avéré plus efficace. Les meilleures personnes dans le champ de l'utilisation de l'éditeur de texte qui leur plaît le plus (@phoboslab, l'homme derrière ImpactJS, utilise KomodoEdit, par exemple. Paul Irish utilise TextMate, ce qui est bon, mais Mac. Beaucoup de gens utilisent Vim. Fabrice Bellard, le gars derrière JSLinux, utilise son propre Emacs version, je pense. Ce n'est pas grave un seul bit).

Le test unitaire est important, mais ce n'est jamais un problème. Javascript est assez puissant que vous pouvez construire vous-même une mieux les tests unitaires logiciels dans un couple de lignes que rien là-bas. Ce qui importe, c'est que, grâce à node.js (le JS invite que je vous recommande ci-dessus), vous pouvez automatiser les tests en les mettant dans un *.js fichier de script et lancer tous les tests avec la seule ligne: $ node test.js.

Ce qui vraiment compte pour être efficace est d'avoir le mdn javascript documentation sous votre oreiller, et la spécification html toujours ouverte. Rappelez-vous, la version que je vous est pas très connu, mais c'est de loin les meilleurs! Il utilise même le manifeste de cache, de sorte que vous pouvez re-lire les pages que vous avez déjà téléchargé, lorsque vous êtes hors ligne! Sans parler d'une remarquable fonction de recherche!

Et maintenant, comme j'ai vraiment envie que la générosité, je vais vous donner une chouette page qui répertorie tous les documents que vous aurez jamais besoin pour construire une application web. C'est vraiment un bijou. Il contient un lien vers toutes les informations dont vous avez besoin. C'est l'indice de toutes les bibles.

En fin de compte, la question que vraiment les objectifs que vous vous demandez, vous pouvez faire une énorme application en javascript?
La réponse est oui. Le Javascript n'ont que Crockford appelle les "mauvais éléments", mais à l'aide de JSLint vous met en garde contre eux. D'autre part, Javascript possède de puissantes armes:

• Fermetures: vous pouvez définir une fonction à l'intérieur d'une autre fonction, et il aura accès à l'extérieur variables, même après que l'extérieur de la fonction se fait en cours.
• La première classe des fonctions: vous pouvez créer des tableaux de fonctions, de passer des fonctions en tant que paramètres à d'autres fonctions, de retour d'une fonction dans une autre fonction, tout cela gratuitement!
• Objet des littéraux, des littéraux de tableau: c'est la base de JSON. Il est très facile à utiliser. Tous les moteurs javascript ont maintenant un JSON.parse(aString) et JSON.stringify(anObject) intégré dans l'objet.
• Prototypage: les objets peuvent hériter de toutes les variables que vous avez défini précédemment.

Cela rend le travail facile et efficace. Il y a quelques modèles spécifiques que vous pouvez utiliser en Javascript. Je vais laisser Paul Irish vous éclairer.

Un dernier conseil, lors de l'utilisation de javascript dans le navigateur: ne jamais utiliser d' <script>/* some javascript here */</script>. Toujours utiliser <script src="javascript-file.js"></script>.

Et un couple plus de liens.

• http://my.opera.com/emoller/blog/2011/05/01/javascript-performance ou comment ne pas craindre la mise en œuvre de la fermeture à glissière dans le navigateur.
• http://paperjs.org/features/ à propos de la manière dont nous pouvons y aller maintenant. L'édition de fichier javascript sur l'aller!
• http://brendaneich.com/2011/05/mozillas-nodeconf-presentation/ à propos de l'avenir de javascript.

Answer 4

Vous pouvez vérifier sur Google Fermeture de la bibliothèque et du compilateur. Ils écrivent un peu assez grand, les applications Javascript.

Answer 5

Vous devriez regarder de solutions de rechange pour le JavaScript qui vous permettent encore de se déployer en JavaScript comme de l'environnement.

Beaucoup de l'écriture des applications importantes est d'avoir une chaîne d'outils qui le rendent facile pour les individus et les équipes pour obtenir le code de travail sans avoir à tout le monde communique avec tout le monde, un O(n**2) problème.

Des choses comme GWT vous permettent d'écrire en Java, donc si vous avez une équipe qui est capable de coordonner le développement en Java ou un autre typé statiquement langage de développement d'application, ils peuvent se trouver à la transition vers GWT beaucoup plus facile que de JavaScript. GWT fournit également une base solide bibliothèques, la création de modèles, en java IDE de débogage, de réduire au code par le navigateur, et tout un tas d'autres goodies.

GWT fonctionne aussi avec java test d'unité, à savoir junit et de nombreux java équipes sont déjà expérimenté avec l'intégration de junit en continu des systèmes de compilation et de test des tableaux de bord.