ventajas ultima funciona ejemplos ecmascript desventajas como codigo caracteristicas javascript unit-testing ide system-design interface-design

ultima - Mejores prácticas para desarrollar aplicaciones JavaScript más grandes



ultima version de javascript (9)

Debería buscar alternativas a JavaScript que aún le permitan implementarse en un entorno similar a JavaScript.

Una gran cantidad de aplicaciones grandes de escritura tiene una cadena de herramientas que facilita que las personas y los equipos obtengan el código trabajando juntos sin tener que hacer que todos se comuniquen con los demás, un problema O (n ** 2).

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

GWT también trabaja con las instalaciones de prueba de la unidad java, concretamente junit y muchos equipos de Java ya tienen experiencia en la integración de junit en sistemas de construcción continua y tableros de prueba.

Con una sólida formación en Java / C ++, me pregunto si es posible desarrollar una aplicación de JavaScript algo mayor sin tener que reducir la calidad.

Cualquier sugerencia es apreciada con respecto a:

  • Ambiente de desarrollo
  • Técnicas de depuración
  • Examen de la unidad
  • Perfilado
  • Instrumentación
  • Diseño de sistemas
  • Diseño de interfaz
  • Diseño de código

También me llama la atención cómo proyectos como JavaScript PC Emulator y JavaScript Game Engine manejaron esos problemas en caso de que algunos de ustedes lo supieran.

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

Para la depuración, tendrás que confiar en depuradores de navegador incorporados (herramientas de desarrollador en Chrome / Safari, barra de herramientas de desarrollador en IE, Firebug en Firefox), pero la herramienta de depuración más poderosa sigue siendo IE + Visual Studio, aunque no es muy cómoda en veces.

Participé en la redacción de una gran aplicación de JavaScript con SproutCore y Cappuccino y sin ningún "Macroframework". Esto es lo que creo:

Antes que nada, todos los mismos principios de "buen diseño" que ha adquirido en su trabajo con Java siguen vigentes: no escriba el código Spaghetti, encapsule, separe las preocupaciones y use MVC.

Muchas personas comienzan a escribir una aplicación "web 2.0" o "web 3.0" (lo que sea que eso signifique), solo añádele jQuery y sigue un camino de dolor y miseria, a medida que su código se vuelve más y más grande y completamente imposible de mantener.

Los marcos "grandes" como Cappuccino o SproutCore te ayudan a evitar hacer eso. Cappuccino es ideal para aplicaciones de escritorio, mientras que SproutCore ha cambiado su enfoque en 2.0 a aplicaciones de "estilo web" como New Twitter, al mismo tiempo que le ofrece excelentes maneras de estructurar sus aplicaciones y su código.

Ahora a sus áreas o intereses específicos:

Ambiente de desarrollo

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

Las aplicaciones Cappuccino y SproutCore se pueden probar directamente en el navegador, sin necesidad de un servidor web. Si necesita hablar con un servidor web (que probablemente lo hará), Ruby on Rails o node.js se usan comúnmente para obtener fácilmente un back-end.

Técnicas de depuración

La depuración sigue siendo una especie de problema cuando se trata de desarrollo de JavaScript. Las herramientas para desarrolladores de Google Chrome son las mejores 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.

Examen de la unidad

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

También vale la pena echarle un vistazo a proyectos como Selenium o Jasmine .

Perfilado / Instrumentación

Puede hacer perfiles con las herramientas de desarrollo de Chrome . YSlow es ideal para el perfil general de aplicaciones web (incluida la carga de activos y similares).

Diseño de sistemas

Use MVC desde el principio. Muchas personas comienzan con una aplicación pequeña y agregan JavaScript aquí para leer un valor de un campo y más JavaScript para actualizar una etiqueta. Lo hacen de nuevo. Y otra vez. Y la cena está servida: código de espaguetis. Use un framework como SproutCore o backbone.js para prevenir eso y estructurar su código.

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

Lo mismo ocurre con Cappuccino, aquí un tutorial que escribí hace un año . Está un poco anticuado, pero te da la idea general. Aquí hay 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. Quizás también lea este libro o este libro . Estos videos son también un gran recurso .

Diseño de interfaz

Para Cappuccino puede usar el Xcode Interface Builder de Apple para diseñar gráficamente su UI. Para la mayoría de los demás sistemas, diseñará su UI con HTML y CSS estándar.

Si desea desarrollar para dispositivos móviles, debe leer este artículo .

Diseño de código

Consulte los libros y videos que he mencionado anteriormente. Y consulte este estilo de codificación general . Naturalmente, la gente no está de acuerdo con 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. ¡Debes unirte a la diversión! Espero que mis opiniones te hayan sido útiles.

Sobre las herramientas:

  • JSLint es una herramienta en línea desarrollada por Douglas Crockford en http://www.jslint.com/ . Te dice por qué, incluso si la posibilidad es improbable, tu código puede romperse.
  • JSMin es un minificador de JavaScript de un solo archivo escrito en C. Compílo, ponlo en tu $ PATH y úsalo para crear scripts de compilación para tu aplicación. Se considera que javascript es más rápido de cargar. Consíguelo en http://www.crockford.com/javascript/jsmin.html .
  • Tener un JS Read-Eval-Print Loop siempre es útil. El más descargado es node.js , un REPL basado en V8, el motor de JavaScript de Chrome. Le permite probar de forma interactiva fragmentos de JavaScript. También funciona como uno de los servidores web más potentes, a través de un ingenioso sistema de ciclo de eventos. ¡Le recomendamos que lo use de esta manera!
  • Un aviso de JS es bueno, pero necesita un Inspector web sobresaliente. Proporciona 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 listo.
    Pero las mejores características solo se pueden descubrir en esta colorida hoja de trucos .
  • JSFiddle es una herramienta en línea para probar fragmentos también.
  • @mathias se enorgullece de mantener jsPerf , una colección de elementos que prueban fragmentos de JS y que pueden decir, entre navegadores, qué algoritmo es el más rápido.
  • YSlow es otra herramienta realmente precisa para decirle si su sitio web es rápido y cómo puede mejorarlo, con consejos ingeniosos.

En lo que respecta a los IDEs , no existe un único entorno de desarrollo 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, que es bueno, pero solo para Mac. Mucha gente usa Vim. Fabrice Bellard, el hombre detrás de JSLinux, usa su propia versión de Emacs, creo. Esto no importa ni un poco).

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

Lo que realmente cuenta para ser efectivo es tener la documentación de javascript de mdn debajo de su almohada, y la especificación de html siempre abierta. Eso sí, la versión a la que te señalo no es ampliamente conocida, ¡pero es de lejos la mejor de todas! ¡Incluso usa el manifiesto de caché para que puedas volver a leer las páginas que ya descargaste cuando estás fuera de línea! ¡Y mucho menos una excelente función de búsqueda!

Y ahora, ya que realmente quiero esa recompensa, te daré una página ingeniosa que enumera toda la documentation que necesitarás para 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 apunta a lo que te estás preguntando es, ¿puedes hacer una gran aplicación en JavaScript?
La respuesta es sí. Javascript tiene lo que Crockford llama "partes malas", pero el uso de JSLint te 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 las variables adicionales, incluso después de que la función externa se haya ejecutado.
  • Funciones de primera clase: puede crear matrices de funciones, pasar funciones como parámetros a otras funciones, devolver una función de otra función, ¡todo esto de forma gratuita!
  • Literales de objetos, literales de matrices: esta es la base de JSON. Es muy fácil de usar. Todos los motores de JavaScript ahora tienen un objeto JSON.parse(aString) y un JSON.stringify(anObject) .
  • Creación de prototipos: los objetos pueden heredar de cualquier variable que hayas definido previamente.

Esto hace que trabajar sea eficiente y fácil. Hay algunos patrones específicos que puedes usar en Javascript. Dejaré que Paul Irish te ilumine .

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

Y un par de enlaces más.

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

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

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

Este artículo puede ayudar a comprender el patrón de estrategia en JavaScript

Tenga en cuenta que esta publicación está más enfocada en la web, ya que es donde trabajo principalmente

Entorno de desarrollo

Si prefiere IDEs, JetBrains tiene un editor web muy 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 siempre son una gran opción (TextMate es mi preferencia).

Técnicas de depuración

Mencionado arriba, las herramientas de retoque DOM de navegador como firebug son imprescindibles. Debe poder declarar y evaluar su código en el entorno en el que se está utilizando sin tener que guardar y volver a cargar constantemente.

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

Examen de la unidad

El mejor marco de pruebas unitarias para javascript es Jasmine (basado en las 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 BDD es solo que TDD está bien hecho. Personalmente, encuentro que el estilo BDD ayuda a enfocar a las personas hacia lo que están tratando de probar. Tiene un amplio soporte de aserciones y se ha trabajado mucho para manejar la naturaleza asíncrona de javascript, sin ensuciar demasiado.

Perfilado / Instrumentación

La mayoría de los navegadores tienen soporte de desarrollo integrado. Tanto Firefox como Chrome son geniales aquí. Aunque las herramientas no brindan gran detalle, pueden usarse fácilmente para reconocer que un punto lento está en su servidor o en su 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 un gran crecimiento fuera de los navegadores con la creciente popularidad de node.js .

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

Cualquier aplicación importante de javascript se ejecutará en todos los problemas que cualquier lenguaje de tipeo dinámico tendrá. Además, javascript también tiene una historia muy larga en la que se escribieron muchos códigos incorrectos todos los días. Javascript no hace nada para llevarte al abismo del éxito, por lo tanto, libros como "Javascript, las partes buenas".

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

Con estas consideraciones, puede aplicar cualquier patrón que use en otros idiomas. Existen numerosos marcos que aprovechan esto. Hay un excelente artículo que pasa por muchos de los marcos comunes para la gestión de la dependencia, la organización del código, la creación de plantillas, la comunicación del módulo, el proceso de compilación (incluida la minificación) y finalmente las pruebas.

Creación de aplicaciones jQuery a gran escala

Entorno de desarrollo Bueno, necesita un servidor web (depende de la arquitectura del lado del servidor) como Apache o IIS para simular la comunicación AJAX. En ocasiones, se incluye un editor para javascript en el editor del lenguaje de desarrollo del lado del servidor.

Hay una pregunta interesante sobre los IDEs de JavaScript: https://.com/questions/209126/good-javascript-ide-with-jquery-support

Técnicas de depuración y creación de perfiles Use las herramientas integradas de depuración y creación de perfiles del navegador como Firebug .

También puede ver this herramienta de creación de perfiles.

Pruebas unitarias Si se usa jQuery, recomiendo http://docs.jquery.com/Qunit . En la versión de desarrollo de la aplicación javascrit, se cargan los archivos de prueba de JavaScript. Cuando se publica la aplicación, los archivos de prueba no se cargan.

Seguridad

  • Validar y calcular todo en el lado del servidor
  • Prevenir XXS

Diseño

Solicitud--------------------------------

  • Componentes de la aplicación
  • Widgets personalizados

Marco de referencia----------------------------------

  • Widgets base
  • Comunicación base AJAX
  • UI Core (Métodos de ayuda ...)

El marco proporciona las funciones básicas. Por ejemplo, un marco base es jQuery y knockoutjs . Y encima de este marco, la aplicación está construida. Por supuesto, puede crear su propio marco para su aplicación. Pero al elegir jQuery, por ejemplo, la mayoría de las veces no necesita lidiar con errores entre navegadores, porque jQuery lo hace por usted.

Comunicación con el servidor: es una buena idea proporcionar un servicio RESTful para comunicarse. También debe elegir entre JSON y XML. JSON es más ligero que XML, por lo que a menudo se elige a JSON.

Patrones de diseño: si la aplicación javascript es realmente grande, es una buena idea implementar patrones de diseño como MVC o MVVM.

Hay algunos frameworks MVC / MVVM afuera para javascript ( knockoutjs por ejemplo).

Este es un artículo realmente útil sobre patrones de diseño en javascript: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/

Pero al final tienes que decidir cómo se debe estructurar tu aplicación, etc. Los patrones de diseño pueden mostrarte una buena manera, pero cada aplicación es diferente y no todas las soluciones funcionan para todos los problemas.

Y no olvide que el rendimiento es un gran problema cuando se usa javascript. Por lo tanto, comprimir y combinar archivos javascript es una buena idea: http://code.google.com/intl/de/speed/articles/ . En este punto, la carga lenta también podría ayudar.