Esta es una guía que busca introducir a nuevos desarrolladores en JavaScript y que busca también que los desarrolladores más experimentados conozcan un poco más sobre las mejores prácticas.
A pesar del nombre de esta guía, no significa que sea necesariamente "la única forma" para realizar JavaScript.
Nosotros solo hemos reunidos todos los artículos, consejos, y trucos de los principales desarrolladores y colocado aquí. Ya que viene de personas excepcionales, nosotros podemos decir que esta es la "la forma correcta", la mejor forma de escribir código en JavaScript.
Creado por Netscape en 1995 como una extensión de HTML para Netscape Navigator 2.0, JavaScript ha tenido como función principal la manipulación de los documentos HTML y la validación de formularios. Antes de ganar su nombre muy famoso en estos días, JavaScript fue llamado Mocha. Cuando fue lanzada su primera publicación beta, fue oficialmente llamado LiveScript y finalmente, cuando fue publicado por Sun Microsystems, fue bautizado con el nombre por el cual es conocido hoy. A causa de los nombres similares, las personas confunden JavaScript con Java. Aunque ambos tienen la estructura léxica de programación, ellos son lenguajes muy diferentes. Diferente de C, C# y Java, JavaScript es un lenguaje interpretado. Significa que este requiere un "interpreter". En el caso de JavaScript, el interpreter es el navegador.
El estándar de JavaScript es ECMAScript. A partir del 2012, todos los navegadores modernos soportan completamente ECMAScript 5.1. Los navegadores antiguos soportan al menos ECMAScript 3. En Junio de 2015 la especificación para la versión ES6/ES2015 fue aprobada. Puedes revisar las especificaciones de la version 2015 de ECMAScript en Ecma International.
Una buena referencia sobre las versiones, documentación, noticias y demás sobre JavaScript puede encontrarse en la Red de Desarrolladores de Mozilla.
El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. Este prevee una representación estructural del documento, permitiéndole modificar su contenido y presentación visual mediante el uso de un lenguaje de scripting tal como JavaScript. Ver mas en Red de Desarrolladores de Mozilla - DOM.
Como todo lenguaje, JavaScript tiene muchas guías de estilo. Quizas la más usada y recomendada es la Guía de Estilo de Google para JavaScript, pero nosotros te recomendamos leer Idiomatic.js.
Actualmente la mejor herramienta para realizar linting (análisis) del código en JavaScript es JSHint. Nosotros recomendamos que siempre que sea posible se verifique el estilo y los patrones del código con una herramienta de análisis del código.
JavaScript tiene un fuerte enfoque de programación orientada a objetos, a pesar de algunos debates que tienen lugar debido a las diferencias de la orientacion a objetos en Javascript comparado con otros lenguajes.
Fuente: Introducción a JavaScript Orientado a Objetos
Funciones anómimas que son declaradas dinámicamente en tiempo de ejecución. Son llamadas anónimas porque no poseen un nombre de la misma manera que las funciones normales.
Fuente: Funciones anónimas
Las funciones en JavaScript son objetos de primera clase. Esto significa que las funciones son simplemente un tipo de objeto especial, con las cuales se pueden hacer las mismas cosas que cualquier otro objeto podria hacer.
Fuente: Las funciones son objetos de primera clase en JavaScript
Para muchos desarrolladores front-end, JavaScript fue su primera experiencia en lenguajes de scripting y/o interpretados. Para estos desarrolladores, el concepto y las implicaciones de las variables de tipado blando quizas son de segunda naturaleza. Como siempre, el crecimiento explosivo en demanda para aplicaciones web modernas, ha resultado en un crecimiento en el número de desarrolladores back-end que han tenido que meter sus manos en tecnologías del lado del cliente. Muchos de estos programadores llegan experiencia en lenguajes de tipado fuerte, tales como C# o Java, y le resultan desconocidas las libertades y las potenciales trampas envueltas en el trabajo con variables de tipado blando.
Fuente: Understanding Loose Typing in JavaScript
Scoping o Alcance: En JavaScript, las funciones son nuestras delimitadoras del alcance de facto al momento de la declaración de variables, lo cual significa que los bloques que son de bucles y condicionales (tales como if, for, while, switch y try) NO delimitan el alcance, a diferencia de la mayoría de otros lenguajes. Por lo tanto, estos bloques compartirán el mismo alcance que la función que las contiene. De esta forma, podría ser peligroso declarar variables dentro de bloques si se requiere que las variables sólo sean vistas en el bloque que pertenecen.
Hoisting o Elevación: En ejecución, todas las declaraciones var y function son movidas para el comienzo de cada función (su alcance) - esto es conocido como Elevación. Dicho esto, es buena practica declarar todas las variables juntas en la primera línea, con el fín de evitar falsas expectativas con las variables que han sido declaradas luego de la asignación de su valor - esto es un problema común con programadores que llegan de lenguajes con alcance de bloques.
Fuente: Alcance y Elevación en JavaScript
La Función de Vinculación es probablemente la última de las preocupaciones de un principiante con JavaScript, pero cuando se entiende que necesita una solución al problema de cómo mantener el contexto de 'this' dentro de otra función, entonces puede darse cuenta que de hecho necesita de la función bind Function.prototype.bind().
Fuente: Understanding JavaScript’s Function.prototype.bind
Las Clausuras o closures son funciones que hacen referencia a variables independientes (libres). En otras palabras, la función definida en el closure 'recuerda' el ambiente en el cual esta fue creado. Esto es un importante concepto para entender, así como útil durante el desarrollo, por ejemplo emular métodos privados. Esto puede también ayuda a aprender como evitar errores, como crear closures en bucles.
Fuente: MDN - Clausuras
El modo estricto de ECMAScript 5 es una manera de optar por una forma restringida de JavaScript. El modo estricto no es solo un subconjunto: este tiene intencionalmente una semántica diferente del código normal. Los navegadores que no soportan el modo estricto correran el código de forma distinta con aquellos navegadores que lo soportan, entonces no confie en el modo estricto sin realizar una prueba de características, asegurando el soporte de los aspectos relevantes del modo estricto. El código en modo estricto y en modo no estrícto pueden coexistir, de esta forma, scripts pueden optar entrar al modo estrícto de forma incremental.
Fuente: MDN - Modo Estricto
Una expresión de función inmediatamente invocada es un patrón el cual produce un scope lexico usando las funciones de scoping de Javascript. La Expresión de función imadiatamente invocada puede ser usada para evitar el hoisting de las variables con los bloques, protege contra la contaminación del ambiente global y simultáneamente permite acceder a los métodos publicos al tiempo que conserva la privacidad en las variables definidas dentro de la función.
Este patrón ha sido referido como una función anónima autoejecutable, pero @cowboy (Ben Alman) introduce el termino IIFE como un término semántico más exacto para el patrón.
Mientras JavaScript contiene patrones de diseño que son exclusivos para el lenguaje, muchos patrones de diseño de otros lenguajes pueden ser también implementados.
Una buena forma de aprender acerca de estos patrones es el libro de Addy Osmani de código abierto Aprender Patrones de Diseño en JavaScript. Los enlaces referenciados son (en su mayoría) basados en este.
Patrones de Diseño Creacionales
Patrones de Diseno Estructural
Patrones de Diseno de Comportamiento
Varias librerias y frameworks para realizar pruebas en JavaScript.
Mantenido por TJ Holowaychuk.
Mantenido por jQuery.
Mantenido por Pivotal Labs.
Mantenido por el equipo detrás de AngularJS. Mayormente por Vojta Jina.
Mantenido por Sitepen.
Una herramienta de cobertura de código JavaScript escrita en JavaScript, mantenida por Krishnan Anantheswaran.
Espias de pruebas autónomos, stubs y mocks para JavaScript. Sin ependencias, trabaja con cualquier framework de pruebas unitarias. Creado por Sinon.JS community.
Un ayudante para simular funciones y objetos XHR, mantenido por Leo Balter.
Test runner with asynchronous tests, maintained by Sindre Sorhus
Painless JavaScript Testing, maintained by Facebook
jQuery es una libreria hecha en Javascript rápida, pequeña, y abundante en características. Construida por John Resig.
Creado por Yahoo!, YUI es una libreria Javascript y CSS de código abierto para construir aplicaciones web altamente interactivas. Apartir del 29 de Agosto del 2014 se detuvo el desarrollo del framework.
Zepto es una libreria JavaScript minimalista para navegadores modernos con una API en gran parte compatible con jQuery. Si usas jQuery, estas listo para conocer como se usa Zepto.
Dojo dispone de una serie de herramientas Javascript gratuitas, de código abierto para construir aplicaciones web de alto rendimento. IBM y SitePen son patrocinadores del proyecto.
Underscore.js es una libreria JavaScript que nos proporciona una serie de utilidades de la programación funcional sin necesidad de extender de alguno de los objetos preconstruidos.
Creado por @wycats, jQuery y personas del equipo de desarrollo de Ruby on Rails.
Framework javascript del lado del cliente muy popular, Construido por @jashkenas.
Simplifica la creación de UI dinámicas en JavaScript aplicando el patrón Model-View-View Model (MVVM).
Construido por Google, Angular.js es como un polyfill para el HTML del futuro.
Un framework.Mobile y escritorio. Una forma de crear aplicaciones con Angular y usar su código y habilidades para crear aplicaciones para cada meta de implementación. Para web, web móvil, teléfono móvil nativo y escritorio nativo.
Cappuccino es un framework de código abierto que hace fácil la contrucción de aplicaciones del calibre de aplicaciones desktop pero que se ejecutaran en un navegador web.
JavaScriptMVC es un framework de código abierto que contiene las mejores ideas del desarrollo con jQuery.
Meteor es una plataforma de código abierto para construir aplicaciones web de alta calidad en corto tiempo, ideal para programadores avanzados, y también para programadores que hasta ahora estan comenzando.
Spice es un framework MVC flexible y extremadamente leve(< 3k) para javascript. Spice fue construido para ser agregado fácilmente a cualquier aplicación existente y para coexistir con otras tecnologías tales como jQuery, pjax, turbolinks, node o cualquier otra libreria existente.
Riot es una libreria (MV*) incriblemente rápida, poderosa y aún así ligera del lado del cliente para contruir aplicacione web de gran escala. A pesar de ser tan ligera cuenta con todas las funcionalidades necesarias: un motor de plantillas, enrutador, libreria para el control de eventos y un patrón MVP estricto para mantener todo organizado.
CanJS es un framework Javascript que hace el desarrollo de aplicaciones complejas sencillo y rápido. De fácil aprendizaje, pequeña, y sin forzar a utilizar ninguna estructura de aplicación, cuenta con características modernas como custom tags (etiquetas html customizadas) y 2-way binding (Vinculación de doble vía).
Creada por Facebook. React es una libreria para crear interfaces de usuarios utilizada por Facebook e Instagram. Muchas personas tienen a pensar en React como el componente V (La vista) en el módelo MVC.
Handlebars provee el poder necesario para permitir la construción de plantillas semanticas sin ninguna fustración.
Plantillas asincronas para el navegador y node.js
Asynchronous templates for the browser and node.js.
Velocity es un motor de animaciones que hace uso de la misma API de JQuery $.animate().
Bounce.js es una herramienta y una libreria de JS que permite crear poderosas animaciones CSS3.
Una libreria de Javascript simple pero poderosa para interpolar y animar elementos de HTML5 y de JavaScript.
Move.js es una pequeña libreria de JavaScript que permite crear animaciones CSS3 extremadamente simples y elegantes.
SVG es una excelente forma de crear vectores gráficos interactivos, independientes de la resolución, los cuales luciran geniales en cualquier tamaño de pantalla.
Rekapi es una libreria para crear animaciones en el canvas y en el DOM con Javascript, permitiendo también animaciones CSS utilizando @keyframe para los navegadores modernos.
Realiza tu favicon con banderillas, imagenes o videos.
Textillate.js hace uso de algunas librerias increibles para proveer un plugin sencillo para realizar animaciones CSS3 en cualquier texto.
Motio es una pequeña libreria JavaScript para crear animacione simples y poderosas basadas en sprites.
Con Anima es fácil animar sobre cientos de objetos al mismo tiempo. Cada objeto cuenta con su propia masa y viscocidad para emular objetos reales!
With Anima it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate reallife objects!
MelonJS es un motor de juegos en HTML5 gratuito y ligero. El motor integra el formato de mapa de baldosas haciendo el diseño de niveles muy fácil.
ImpactJS es uno de los mas probados y verdaderos motores de juegos en HTML5. Su publicación inicial se remonta a finales del 2010. Se encuentra muy bien mantenido y actualizado, y tiene toda una comunidad de gran tamaño que lo respalda. Existe suficiente documentación - incluso dos libros para la creación juegos con el motor ImpactJS.
LimeJS is en un framework para la creación rápida de juegos en HTML5, creando una experiencia nativa en los navegadores modernos, tanto para dispositivos moviles como para dispositivos de escritorio.
Crafty es un motor de juegos creado a finales del 2010. Crafty hace que sea realmente fácil la creación de juegos con JavaScript.
Cocos2d-html5 es un framework de juegos web 2D, liberado bajo licencia MIT. Este es una versión en HTML5 del proyecto Cocos2d-x. Cocos2d-html5 se enfoca en hacer que Cocos2d sea compatible en todas las plataformas, navegadores y applicaciones nativas.
Phaser se encuentra basado basado fuertemente en Flixel. Es mantenido por Richard Davey (Photon Storm) quien ha sido muy activo en la comunidad de HTML5 durante años.
Goo en es un motor de juegos 3D en JavaScript enteramente construido en WebGL/HTML5
LycheeJS es una libreria para juegos en JavaScript que ofrece un solución completa para prototipar y desarrollar juegos basados en el Canvas de HTML5, WebGL u OpenGL(ES) nativo dentro del Navegador Web o ambientes nativos.
Quintus es un motor de juego HTML5 diseñado para ser modular y ligero, con una syntaxis concisa y amigable en JavaScript.
Kiwi.js es un Motor de Juegos divertido y amigable en HTML5 de Código Abierto. Algunas personas lo llaman el WordPress de los motores de juegos de HTML5
Panda.js es un motor de juegos en HTML5 para moviles y escritorios con renderizado en Canvas y WebGL.
Rot.js is a set of JavaScript libraries, designed to help with a roguelike development in browser environment.
Isogenic is an advanced game engine that provides the most advanced networking and realtime multiplayer functionality available in any HTML 5 game engine. The system is based on entity streaming and includes powerful simulation options and client-side entity interpolation from delta updates.
Super-fast 3D framework for Web Applications & Games. Based on Three.js. Includes integrated physics support and ReactJS integration.
por Quildreen Motta
por Yehuda Katz
por Scott Allen
por Ben Alman
por Nico Bevacqua
por Viljami S.
por Ju Gonçalves
por Marijn Haverbeke
por David Flanagan
por Stoyan Stefanov
by James Coglan
por Henrik Joreteg
por Stoyan Stefanov
por Dustin Diaz
por John Resig
por Nicolas Bevacqua
por Axel Rauschmayer
por >Kyle Simpson
por Ryan Burgess
por Ivo Wetzel
por David Herman
por Michael Fogus
por DevFreeBooks
by DevFreeBooks
Este proyecto no existiría sin estos maravillosos colaboradores. Muchas gracias muchachos por hacer esto real!
JavaScript: La Forma Correcta por William Oliveira.
Licenciado bajo Creative Commons Attribution-NonCommercial 4.0 International License.
Basado en el trabjo en http://jstherightway.org.
William Oliveira
Allan Esquina