7 bibliotecas JavaScript esenciales para llevar tus habilidades al siguiente nivel

Ha pasado menos de un año desdeMatt Mullenweg confirmadoLo que muchos en el mundo de WordPress habían sospechado durante mucho tiempo: JavaScript es el corazón del futuro de la plataforma. El lanzamiento posterior deCalipso en WordPress.comTambién sirvió para dejar aún más en claro el punto.

Naturalmente, todo esto desencadenó una especie de estampida entre los desarrolladores que finalmente se involucraron por completo con el potencial del lenguaje, en lugar de tratarlo como algo con lo que ocasionalmente tenían que lidiar en la interfaz. Aprender a amar las bibliotecas ampliamente utilizadas es una parte importante del proceso.

En este artículo, lo ayudaremos a comenzar su aprendizaje repasando siete bibliotecas de JavaScript esenciales con las que todo desarrollador debería estar familiarizado y destacaremos las oportunidades de aprendizaje específicas que ofrecen.

¡Comencemos con un clásico!

1.jQuery

Primer lanzamientoActualizado,jQueryes el gran veterano de las bibliotecas de JavaScript y sigue siendo un elemento esencial del equipo hasta el día de hoy. Lo encontrará funcionando en el propio WordPress y en innumerables otros proyectos que impulsan la web moderna. También cuenta con el respaldo explícito de algunas de lasLos nombres más importantes en el negocio.

Desde el punto de vista de un desarrollador de JavaScript en ciernes, la promesa de jQuery se resume muy bien en su lema:“Escribe menos, haz más”. Empieza a profundizar en ello y obtendrás una forma elegante deManejo del DOM, junto con una introducción natural al ecosistema frontend de JavaScript más amplio en forma deInterfaz de usuario jQuery,jQuery Móvil,Chisporrotear, yUnidad QU.

Abordar JavaScript desde cero en estos días puede ser unaExperiencia innecesariamente desconcertante– prácticamente nada te dará una comprensión más sólida de los conceptos básicos que familiarizarte con jQuery.Centro de aprendizaje de jQueryte permitirá empezar con buen pie yBlog sobre cómo aprender jQueryTiene una buena combinación de recursos para principiantes, intermedios y expertos que permiten llevar las cosas más allá.

2. Numeral.js

Formatear y manipular números es el núcleo de una gran cantidad de tareas de programación cotidianas, yNumeral.jsEsta biblioteca hace un excelente trabajo al simplificar sustancialmente el proceso en JavaScript. No solo facilita la vida a los desarrolladores que son nuevos en el lenguaje, sino que también es un ejemplo admirable de una biblioteca que aborda bien un problema. Definitivamente, es una biblioteca que vale la pena agregar al conjunto de herramientas lo antes posible.

3.Retina.js

Continuando con nuestro tema de bibliotecas prácticas con evidente utilidad cotidiana,Retina.jses a la vez un caballo de batalla de interfaz y una forma práctica de facilitar el uso de bibliotecas de JavaScript en proyectos personales.

Hoy en día, vivimos en un mundo de cada vez más alta definición. Los sitios de todo tipo deben poder manejar dispositivos retina sin problemas, sin obligar a los demás a usar imágenes innecesariamente grandes. Retina.js le ofrece una forma fácil de entender de hacer justamente eso.

Tomado en el contexto del excelente artículo de EnvatoBibliotecas JS esenciales para el diseño webserie, también es una excelente manera de comenzar a ver cómo las bibliotecas de JavaScript pueden ayudarlo a abordar con elegancia todo tipo de problemas de interfaz de usuario y diseño con facilidad.

4.D3.js

Una vez que tenga los números bajo control con Numeral.js, eventualmente querrá hacer algunas cosas sofisticadas con los datos en general. Ahí es dondeD3.jsentra en escena. D3 le permite crear documentos basados ​​en datos según sus necesidades de una manera que sea verdaderamente compatible con los estándares web.

Tan solo con un vistazo rápido al proyectolista de ejemplosmuestra que tiene una amplia gama de usos prácticos en todo tipo de proyectos. Comience a sumergirse en el impresionantelista de tutoriales asociadosy pronto podrás mostrar datos con confianza con solo unas pocas líneas de código.

5.Columna vertebral

Marcos de JavaScript completos comoAngularyAscuaatraen muchos titulares, pero hay mucho que decir sobre empezar conColumna vertebralCuando recién estás empezando a familiarizarte con JavaScript, es una ruta fácil hacia el concepto de modelos y vistas en JavaScript, respaldada por una grandocumentaciónytutoriales, y una excelente manera de empezarExplora el poder de la API RESTen WordPress para arrancar.

Recursos increíblemente completos como el de Addy Osmani, completamente gratuito,Desarrollo de aplicaciones Backbone.jsTambién hace de esta una excelente biblioteca para familiarizarse antes de decidir si realmente necesita ese sofisticado marco del que hablan todos sus colegas.

6.Chai.js

Las pruebas son un tema que debería estar siempre presente en la mente de cualquier desarrollador responsable, y esto es tan cierto en JavaScript como en cualquier otro lenguaje, tal vez incluso más dada la asombrosa cantidad de dispositivos y escenarios en los que se implementa. Si recién estás comenzando con el tema y tienes algunos dólares disponibles, es difícil superarlo.Serie Let’s Code: JavaScript basado en pruebas de James Shore.

A medida que comience a familiarizarse con marcos comoJazmín,Unidad QU, yMocaTómate un poco de tiempo extra para explorarChai.js– es una biblioteca de aserciones BDD/TDD muy útil que funciona con todos ellos. Para tener una idea de cómo se puede utilizar en proyectos prácticos, visite el sitio web del proyecto.Sección de guía, o consulte la guía detallada de Michael Herman sobreUsando Chai con Mocha.

7.Reaccionar

Hemos dejado deliberadamente la biblioteca más nueva para el final. Con su enfoque innovador enPensando en las interfaces de usuario modernas, FacebookReaccionarLa biblioteca ha captado la atención de los desarrolladores de todo el mundo, laEquipo de Automatticestar entre ellos, pero no es necesariamente el paradigma de programación más fácil de entender.

Introducción a la biblioteca de Scotch.ioes un excelente punto de partida yLista de recomendaciones de tutoriales de Andrew FarmerProporciona mucho material para una mayor exploración.Construir con Reactes un recurso particularmente notable que él identifica.

En términos de integración de React con WordPress, hemos…rascó la superficieaquí en Torque recientemente, y también recomiendo el tutorial de Delicious Brains sobre el usoReact Native con WordPressLa renovación de Chris HutchinsonTwenty Sixteen como aplicación ReactTambién merece la pena echarle un vistazo en este sentido, al igual que suEntrada de blog de fondosobre el tema.

Conclusión

Hay pocas cosas más preciadas para un desarrollador que una biblioteca cuidadosamente construida que se encarga de la mayor parte del trabajo pesado de un proyecto. La lista de siete ejemplos que hemos identificado debería ayudarle a mejorar sustancialmente su rendimiento general en JavaScript, a la vez que le permite ahorrar una gran cantidad de tiempo en su trabajo diario.

Recapitulemos una vez más:

1. Domina el DOM conjQuery.
2. Toma el control de tus cifras conNumeral.js.
3. Complazca a sus usuarios conRetina.js.
4. Domina los datos conD3.js.
5. Introduce estructura a tus proyectos conColumna vertebral.
6. Sumérjase en las pruebas conChai.js.
7. Reimagina tus front ends conReaccionar.

Aborda esa lista en orden y estarás en el camino correcto para convertirte en un ninja certificado de JavaScript. Sin embargo, no son las únicas opciones disponibles. Si hay alguna biblioteca clave que no hayamos mencionado, ¡ponte en contacto con nosotros a través de la sección de comentarios a continuación y cuéntanoslo!

Crédito de la imagen:Geralt.