Mejores prácticas para desarrollar aplicaciones JavaScript más grandes [cerrado]

He participado en la escritura de una gran aplicación JavaScript con SproutCore y Cappuccino y sin ningún "Macroframe" en absoluto. Esto es lo que pienso:

En primer lugar, todavía se aplican los mismos principios de "buen diseño" que ha adquirido en su trabajo con Java: no escriba código Espagueti, encapsule, separe preocupaciones y use MVC.

Mucha gente comienza a escribir una aplicación" web 2.0 "o" web 3.0 " (lo que sea que eso signifique), simplemente agregue jQuery y vaya por un camino de dolor y miseria, a medida que su código se hace más y más grande y completamente inalcanzable.

Los marcos"grandes" como Cappuccino o SproutCore te ayudan a evitar hacer eso. Cappuccino es ideal para aplicaciones de estilo de escritorio, mientras que SproutCore ha cambiado el enfoque en 2.0 a aplicaciones de "estilo web" como el nuevo Twitter, mientras que todavía le da grandes maneras de estructurar sus aplicaciones y su código.

Ahora a sus áreas o intereses específicos:

Entorno de desarrollo

Yo personalmente usa MacVim. He oído cosas buenas sobre Cloud9IDE , un IDE en el navegador para el desarrollo de JS. Para Cappuccino, puedes usar el IDE Xcode de Apple, incluso para diseñar el UIs (que es muy genial).

Tanto las aplicaciones Cappuccino como SproutCore se pueden probar directamente en el navegador, sin la necesidad de un servidor web. Si necesita hablar con un servidor web (que probablemente lo hará), Ruby on Rails o nodo.js se utilizan comúnmente para obtener fácilmente un backend en funcionamiento.

Técnicas de depuración

La depuración sigue siendo un tema delicado cuando se trata de desarrollo de JavaScript. Las herramientas para desarrolladores de Google Chrome son las mejores que existen en este momento. Puede establecer puntos de interrupción directamente en el navegador y todo tipo de cosas ordenadas. Es la herramienta que querrás usar.

Pruebas unitarias

SproutCore utiliza QUnit, Cappuccino viene con OJUnit/OJSpec. Luego hay proyectos como JSDOM y env.js que te dejó simular un navegador en el servidor y darle un entorno para ejecutar pruebas automatizadas sin un navegador.

También vale la pena revisar proyectos como Selenium o Jasmine.

Perfilado/Instrumentación

Puede hacer perfilado con las herramientas de desarrollo de Chrome. YSlow es ideal para el perfilado general de aplicaciones web (incluyendo carga de activos y similares).

Diseño del sistema

Utilice MVC desde el principio. Mucha gente empieza con una pequeña aplicación y añadir un poco de JavaScript aquí para leer un valor de un campo y un poco más JavaScript allí para actualizar una etiqueta. Lo hacen de nuevo. Y otra vez. Y la cena está servida: Spaghetti code. Utilice un framework como SproutCoreo backbone.js para evitar eso y para estructurar su código.

Este es un gran tutorial para SproutCore, este es uno para backbone.js .

Lo mismo ocurre con el capuchino, aquí un tutorial que escribí hace aproximadamente un año. Es un poco anticuado, pero te da la idea general. Aquí está una aplicación de demostración actualizada que hice para un artículo que escribí para la revista MacTech en mayo.

Así que estructure su código tal como lo haría en cualquier otro entorno de desarrollo. Tal vez leer este libro o este libro, también. Estos videos también son un gran recurso.

Diseño de interfaz

Para Cappuccino puede utilizar Xcode Interface Builder de Apple para diseñar gráficamente su interfaz de usuario. Para la mayoría otros sistemas diseñarás tu interfaz de usuario con HTML y CSS estándar.

Si quieres desarrollar para móvil, debes leer este artículo.

Diseño de código

Consulte los libros y videos que he mencionado anteriormente. Y consulte este estilo general de codificación. Naturalmente, la gente no está de acuerdo en algunos aspectos del estilo presentado en esa página, pero es un buen punto de partida.

JavaScript es un entorno emocionante para desarrollar y tiene una comunidad muy vibrante! ¡Deberías unirte a la diversión! Espero que mis opiniones le hayan sido útiles.

Acerca de las herramientas:

• JSLint es una herramienta en línea desarrollada por Douglas Crockford en http://www.jslint.com / . Le dice por qué, incluso si la posibilidad es improbable, su código puede romperse.
• JSMin es un minificador javascript de un solo archivo escrito en C. Compílelo, póngalo en su PATH PATH, y úsalo para crear scripts de compilación para tu aplicación. Javascript minificado se considera más rápido a carga. Consíguelo en http://www.crockford.com/javascript/jsmin.html .
• Tener un bucle JS Read-Eval-Print siempre es útil. El más descargado es nodo.js, un REPL basado en V8, el motor javascript de Chrome. Permite pruebe interactivamente fragmentos de código javascript. También funciona como uno de los servidores web más potentes, a través de un ingenioso sistema de bucle de eventos. Se le anima a usarlo de esta manera!
• Un prompt de JS es bueno, pero necesitas una excelente Web Inspector . Proporciona una depuración generosa y una mejor comprensión de su código. En ese campo, tanto Google Chrome como Firebug se consideran de primera categoría. La diferencia es que Google Chrome está incorporado. Haga clic derecho > inspeccionar, y ya está.
  Pero las mejores características de allí solo se pueden descubrir en este colorido cheatsheet.
• JSFiddle es una herramienta en línea para probar fragmentos también.
• @ mathias está muy orgulloso de mantener jsPerf , un colección de artículos qué fragmentos de prueba JS y puede decir, entre navegadores, qué algoritmo es más rápido.
• YSlow es otra herramienta realmente precisa para decirte si tu sitio web es rápido y cómo puedes mejorarlo, con consejos ingeniosos.

En lo que respecta a IDEs, no hay un entorno de desarrollo único que se demuestre más eficaz. Las mejores personas en el campo solo usan el editor de texto que más les gusta (@phoboslab, el hombre detrás de ImpactJS, usa KomodoEdit, por ejemplo. Paul Irish usa TextMate, lo cual es bueno, pero solo para Mac. Mucha gente usa Vim. Fabrice Bellard, el tipo detrás de JSLinux, usa su propia versión de Emacs, creo. Esto no importa un solo bit).

Las pruebas unitarias son importantes, pero eso nunca es un problema. Javascript es lo suficientemente potente como para que pueda construir usted mismo un software de pruebas unitarias más adecuado en un par de líneas que cualquier otra cosa que haya. Lo que sí importa es eso, gracias a node.js (el aviso de JS que recomiendo anteriormente), puede automatizar esas pruebas poniéndolas en un *.js archivo de script y ejecutar todas las pruebas con la sola línea: $ node test.js.

Lo que realmente cuenta para ser efectivo es tener la documentación de javascript mdn debajo de tu almohada, y la especificación html siempre abierta. Eso sí, la versión a la que te señalo no es ampliamente conocida, ¡pero es, con mucho, la mejor que hay! Incluso utiliza el manifiesto de caché para que puede volver a leer las páginas que ya ha descargado, cuando usted está fuera de línea! ¡Y mucho menos una característica de búsqueda excepcional!

Y ahora, ya que realmente quiero esa recompensa, te daré una página ingeniosa que enumera toda la documentación que alguna vez necesitará construir una aplicación web. Realmente es una joya. Contiene un enlace a toda la información que necesita. Ese es el índice de todas las biblias que hay.

Al final, la pregunta que realmente se dirige a lo que se está preguntando es, se puede hacer una gran aplicación en javascript?
La respuesta es sí. Javascript tiene lo que Crockford llama "partes malas", pero el uso de JSLint le advierte contra ellas. Por otro lado, Javascript tiene armas poderosas:

• Cierres: puede definir una función dentro de otra función, y tendrá acceso a variables externas, incluso después de que la función externa haya terminado de ejecutarse.
• Funciones de primera clase: puede crear matrices de funciones, pasar funciones como parámetros a otros funciones, devuelve una función de otra función, todo esto gratis!
• Literales de objeto, literales de matriz: esta es la base de JSON. Es muy fácil de usar. Todos los motores javascript ahora tienen un JSON.parse(aString) y un JSON.stringify(anObject) objeto incorporado.
• Prototipado: los objetos pueden heredar de cualquier variable que haya definido previamente.

Esto hace que trabajar sea eficiente y fácil. Hay algunos patrones específicos que puedes usar en Javascript. Voy a dejar que Paul Irish ilumine usted.

Un último consejo, al usar javascript en el navegador: nunca use <script>/* some javascript here */</script>. Utilice siempre <script src="javascript-file.js"></script>.

Y un par de enlaces más.

• http://my.opera.com/emoller/blog/2011/05/01/javascript-performance o cómo no temer la implementación de ZIP en el navegador.
• http://paperjs.org/features / acerca de lo lejos que podemos ir ahora. Edición de javascript precompilado en el ¡vamos!
• http://brendaneich.com/2011/05/mozillas-nodeconf-presentation / sobre el futuro de javascript.

Puedes echar un vistazo a la biblioteca y compilador de cierre de Google . También escriben algunas aplicaciones Javascript bastante grandes.

Debe buscar alternativas a JavaScript que aún le permitan implementar en un entorno similar a JavaScript.

Mucho de escribir aplicaciones grandes es tener una cadena de herramientas que facilita a las personas y los equipos obtener código trabajando juntos sin tener que tener que todos se comuniquen con todos los demás, un problema de O(n**2).

Cosas como GWT le permiten escribir en Java, por lo que si tiene un equipo que es capaz de coordinar el desarrollo en Java u otro estáticamente escrito lenguaje de desarrollo de aplicaciones, podrían encontrar la transición a GWT mucho más fácil que a JavaScript. GWT también proporciona bibliotecas de núcleo sólido, plantillas, depuración in-java-IDE, código minimizado por navegador y muchas otras ventajas.

GWT también trabaja con instalaciones de pruebas unitarias de java, a saber, junit y muchos equipos de java ya tienen experiencia en la integración de junit en sistemas de compilación continua y paneles de prueba.

Tenga en cuenta que este post está más centrado en la web, ya que es donde principalmente trabajo

Entorno De Desarrollo

Si prefiere IDEs, JetBrains tiene un editor web realmente bueno WebStorm que hace que trabajar en javascript sea mucho más fácil. Aptana es otra buena opción. De lo contrario, los editores de texto son siempre una gran opción (TextMate es mi preferencia).

Técnicas De Depuración

Mencionado anteriormente, herramientas de retoque de DOM del navegador como firebug son una necesidad. Necesita ser capaz de declarar y evaluar su código en el entorno donde se está utilizando sin tener que guardar y recargar constantemente.

Otro punto a mencionar aquí es jslint, que es una validación estricta de su javascript. Esto es equivalente a errores de tiempo del compilador y puede ser invaluable al corregir problemas en javascript.

Pruebas unitarias

El mejor framework de pruebas unitarias para javascript es jasmine (basado en de pruebas de estilo rspec). A algunas personas no les gustan las declaraciones de estilo BDD, aunque la mayoría de las personas que usan TDD aceptan que el BDD solo se hace bien. Personalmente, creo que el estilo BDD ayuda a enfocar a las personas hacia lo que están tratando de probar. Tiene un amplio soporte de aserción y se ha hecho mucho trabajo para manejar la naturaleza asíncrona de javascript, sin ensuciarse demasiado.

Perfiles/Instrumentación

La mayoría de los navegadores tienen soporte de desarrollo integrado. Tanto firefox como chrome son geniales aquí. Aunque las herramientas no proporcionan grandes detalles, se pueden usar fácilmente para reconocer que hay un punto lento en su servidor o en el código del lado del cliente. Con esa información, se necesitaría un análisis más profundo, pero debería ser solo trabajo rastrear y solucionar el problema.

Este es definitivamente un espacio que va a ver mucho crecimiento fuera de los navegadores con la creciente popularidad de nodejs.

Diseño (Sistema/Código/Interfaz)

Cualquier aplicación javascript importante va a encontrarse con todos los problemas que cualquier lenguaje dinámicamente escrito. Además, javascript también tiene una historia muy larga en la que se escribía y se escribía una gran cantidad de código malo todos los días. Javascript no hace nada para empujarte al pozo del éxito, de ahí libros como"Javascript, las partes buenas".

Por otro lado, javascript tiene un gran soporte para OOP, así como programación funcional (las funciones son las primeras ciudadanos de clase en el idioma). Los literales de objetos son una hermosa combinación de objetos en el sentido de clase y diccionarios en el sentido de estructura. Además de esto, hay algunas verdaderamente características únicas también el lenguaje y pueden permitirte lograr muchas cosas poderosas.

Con estas consideraciones, puede aplicar cualquier patrón que usaría en otros idiomas. Hay numerosos marcos que se aprovechan de esto. Hay un gran artículo que pasa por muchos de los marcos comunes para la administración de dependencias, la organización de código, la creación de plantillas, la comunicación de módulos, el proceso de compilación (incluida la minificación) y, finalmente, las pruebas.

Creación de Aplicaciones jQuery a Gran Escala

Todavía es posible usar herramientas similares a Java cuando se desarrolla con JS. La compañía para la que trabajo tiene una aplicación loc de 500K+, y empleamos herramientas como Maven para lidiar con las dependencias de la biblioteca. También usamos Eclipse para el desarrollo de JS usando el plugin WTP.

Usamos JS Test Driver para UnitTests y selenium para ATs. Para degugging y perfilado, generalmente usamos Firebug y el depurador IE integrado en VS Web Express.

Para la compilación de código, utilizamos Google closure y un Java Servlet para servir JS durante el proceso de desarrollo, que es capaz de cargar cada archivo JS y sus dependencias en un orden que asegura que las dependencias de clase estén disponibles.

La mayoría de sus preguntas ya han sido respondidas, sin embargo, estoy muy sorprendido de que nadie haya mencionado DynaTrace Ajax como herramienta de creación de perfiles, ya que es, con mucho, la mejor herramienta disponible en el mercado en este momento para la creación de perfiles de aplicaciones JavaScript en el navegador.

Para la depuración, tendrá que confiar en los depuradores de navegador integrados (herramientas de desarrollador en Chrome / Safari, Barra de herramientas de desarrollador en IE, Firebug en Firefox), pero la herramienta de depuración más potente sigue siendo IE + Visual Studio, aunque no muy cómodo a veces.

Este artículo puede ayudar a comprender El Patrón de Estrategia en JavaScript