Contenido principal
Curso: Programación de computadoras > Unidad 6
Lección 7: Usar bibliotecas de JS en tu página webEl mundo de las bibliotecas de JS
Hay miles de bibliotecas de JavaScript que podrías traer a tu página web y hay muchos aspectos de tu página web en los que te pueden ayudar:
- Manipulación del DOM
- Eventos del DOM
- AJAX / recuperación de datos
- Efectos y animación
- Plantillas de HTML
- Diseño de página
- Widgets de interfaz de usuario
- Gráficas y tablas
- Modelado de datos
- Rutas y navegación
- Accesibilidad
- Soporte para múltiples navegadores
- Soporte móvil
Aquí hay otra forma sobre cómo me gusta pensarlo: una página web se compone de la interfaz de usuario (HTML y CSS), interactividad (JS + DOM) y datos (que a menudo traemos por medio de JS). Puedes hacer tu interfaz de usuario interactiva basada en datos sin una biblioteca, o puedes traer diferentes bibliotecas para ayudar con diferentes partes. Algunas bibliotecas harán mucho, algunas solo harán una parte:
Una de las partes más difíciles del desarrollo web es decidir qué bibliotecas utilizar, ya que a menudo estarás escribiendo código que se construye sobre las bibliotecas y es difícil cambiar tu decisión más adelante. No hay una respuesta correcta. Conoce tus opciones y después toma una decisión informada.
Frameworks web
Hay algunas bibliotecas que "hacen todo": desde la recuperación de datos hasta la manipulación del DOM y widgets elegantes en la interfaz de usuario. Si usas uno de estos frameworks, típicamente estarás trayendo mucho JavaScript a tu página, así que vas a querer asegurarte de que realmente necesites la mayoría de las cosas que te ofrece el framework. Para algunos desarrolladores, estos frameworks hacen demasiado, y les resulta mejor usar bibliotecas más pequeñas con tareas más enfocadas.
Frameworks de CSS
Una biblioteca de CSS es una colección de reglas de estilo de CSS y documentación que te muestra qué etiquetas de HTML y clases usar. Hay muchas bibliotecas populares de CSS que te harán más fácil hacer un sitio web bellamente estilado. A veces incluyen widgets opcionales de JavaScript, pero los desarrolladores a menudo eligen utilizar otras bibliotecas de JS con una biblioteca de CSS.
Bibliotecas de navegador JS
Estas son bibliotecas que te harán más fácil utilizar la funcionalidad del navegador (como la API del DOM, los métodos de ventana), los temas que discutimos en este curso. A menudo hacen posible lograr lo mismo con menos código y se encargarán de errores entre distintos navegadores.
Bibliotecas de arquitectura de aplicaciones JS
Estas bibliotecas te ayudarán con tus aplicaciones web a medida que se hagan más grandes. Tu código puede ser manejable ahora, con algunos cientos de líneas de código, pero una vez que alcances miles de líneas de código, tu código puede convertirse en "código espagueti": un desorden inmanejable. Estas bibliotecas te ayudarán a separar tu "modelo" (datos) de tu "vista" (presentación) y a menudo usan principios de programación orientada a objetos para organizar tu código.
Mini bibliotecas y microbibliotecas
También puedes utilizar bibliotecas pequeñas que los desarrolladores han escrito para una tarea específica. Cuando son realmente pequeñas, a veces se llaman ""microbibliotecas". Aquí hay algunas:
- DOM: tinyDOM
- Eventos: Events.js
- AJAX: MicroAjax
- Animación: Morpheus, Viper
- Modelado de datos: Spine, Knockout
- Plantillas: Handlebars, Mustache
- Rutas: PathJS
- Orientación a Objetos: Classy, Klass
- Gráficas: Processing.JS (ver ejemplo en KA), RaphaelJS (ver ejemplo en KA), D3, Three.JS (ver ejemplo en KA), Paper.js
- Diagramas: gRaphael, High Charts
- Fecha-hora: moment.js
Puedes encontrar más en microjs.com o buscando en internet "javascript library [funcionalidad]" para la funcionalidad que estés buscando.
¿Ya probaste una biblioteca JS en tus páginas web aquí en Khan Academy? Compártela en los comentarios a continuación.
¿Quieres unirte a la conversación?
Faltaría agregar Vue un hermoso framework para trabajar el fontend con Javascript(7 votos)
no sabia de esa cantidad de plantillas(2 votos)