¿Cuáles son las bibliotecas más importantes del lado del cliente (HTML5 / CSS / JavaScript) y por qué?

Parece que la mayoría de las personas están escribiendo respuestas como si pudiera haber una respuesta objetiva definitiva.

Desafortunadamente, no hay una respuesta simple a esta pregunta porque la respuesta depende del contexto de cuáles son los requisitos del proyecto, así como de las habilidades del desarrollador que trabaja en el proyecto. Los desarrolladores pueden querer hackear sus propias cosas juntos y usar una biblioteca de utilidades para ayudarlos, donde otro desarrollador puede querer un marco completo para hacer todo por ellos.

En mi propio ejemplo, prefiero una huella pequeña en cuanto a las bibliotecas de terceros, pero creo que las siguientes bibliotecas son las más importantes y útiles (para mí) …

• RequireJS :
  El cargador de módulos AMD que le permite tener una base de código muy modular (que es excelente para el desarrollo) y también proporciona una herramienta de construcción para que pueda concatenar y minimizar sus módulos separados en un solo archivo para producción.
• jQuery :
  La mayoría de la gente ya sabe qué es esta biblioteca. Pero solo para aclarar que esta biblioteca puede ser horriblemente ineficiente y tener un mal desempeño cuando se la pone en manos de un desarrollador que no entiende lo que sucede bajo la API de la biblioteca. Pero en manos de alguien que sabe lo que está haciendo, esta biblioteca puede ser una biblioteca de manipulación / ajax / animación DOM muy útil y útil (más aún ahora en su reciente versión 1.8 que tenía una reescritura completa de la base del código de animación).
• Backbone.js :
  Esta biblioteca le permite diseñar su código según el patrón de diseño MVC. Es muy liviano y, aunque no es una implementación estricta de MVC, puede ser muy útil para ayudar a darle algún tipo de estructura a su código (también funciona muy bien con RequireJS)
• HTML5Shiv :
  Una biblioteca simple que permite a los navegadores más antiguos de Internet Explorer (IE8 y versiones inferiores) representar elementos desconocidos, lo que puede sonar extraño querer que haga el navegador, pero el propósito es que los desarrolladores utilicen los nuevos elementos HTML5 como y < artículo> etc.
• Normalize.css :
  Esta es una hoja de estilo CSS que no * restablece * los estilos predeterminados del navegador (que parece estar de moda en este momento, aunque es una mala práctica). En su lugar, repara algunos errores de representación del navegador inconsistentes en diferentes navegadores.
• OOCSS :
  CSS orientado a objetos no es una biblioteca sino una metodología. Hay bastantes ideas diferentes sobre cómo se debe escribir OOCSS (www.smacss.com es un método popular).
• Sass :
  Este es un preprocesador de CSS que permite al desarrollador aprovechar las características que no están disponibles de forma nativa en CSS (como variables y funciones y código modular con la capacidad de importar en un solo archivo).

Dado que la respuesta original se escribió en 2012, permítame actualizar mi actual pila preferida de clientes del 2015:

• Twitter Bootstrap ( http://getbootstrap.com/ )
  Marco HTML / CSS / JS con bonitos estilos predeterminados y estructuras HTML estandarizadas
• Font Awesome ( http://fontawesome.io/ )
  Marco de iconos gratuito basado en fuentes
• jQuery ( http://jquery.com/ )
  Biblioteca DOM más utilizada
• Require.js ( http://requirejs.org/ )
  Manejo de requisitos y carga diferida para archivos JS
• Vuelo de Twitter ( https://github.com/flightjs/flight )
  Un marco JavaScript basado en componentes y controlado por eventos

Como postre para esos sitios construidos rápidamente, puede cargar Bootstrap & Font Awesome directamente desde Bootstrap CDN ( http://www.bootstrapcdn.com/ )

---

Vamos a dar una vuelta rápida por la pista y ver lo esencial para cualquier atleta del lado del cliente. El equipo depende de su rango de objetivos.

LÍNEA DE SALIDA:
Palmas sudorosas, latidos del corazón. Listo para otra carrera. ¡Ir!

• HTML5Boilerplate ( http://html5boilerplate.com/ )
  Punto de partida normalizado para cualquier aplicación web

PRIMERA ESQUINA
Acelerando en la primera esquina

• Modernizr ( http://modernizr.com/ )
  Usa elementos HTML5 hoy

• jQuery ( http://jquery.com/ )
  Biblioteca DOM más utilizada

(Afortunadamente, HTML5Boilerplate le ofrece todo esto de la caja, por lo que obtendrá una ventaja inicial. ¡Ganador!)

ATRÁS RECTO:
Avanzando bien, ¡no te detengas ahora!

• Respond.js ( https://github.com/scottjehl/Res …) / css3-mediaqueries-js ( http://code.google.com/p/css3-me …)
  Polyfills de consulta de medios para un diseño receptivo
• Además, extienda jQuery sobre la marcha con complementos ( http://www.google.com/#q=jquery+ …)

ÚLTIMO ÁNGULO:
¡Es hora de mostrar lo que tienes!

• Handlebars.js ( http://handlebarsjs.com/ )
  Ingenioso motor de plantillas para esas aplicaciones de una sola página
• Underscore.js ( http://underscorejs.org/ )
  Biblioteca de utilidad

LÍNEA DE META:
Apuntando a los chicos grandes. ¡Da todo lo que tienes!

• Require.js ( http://requirejs.org/ )
  Módulo de carga
• Backbone.js ( http://backbonejs.org/ )
  Para estructuras MVC en o entre el cliente y el servidor

VUELTA DE VICTORIA:
Bomba para la victoria. Además, echa un vistazo a estas golosinas.

• Twitter Bootstrap ( http://twitter.github.com/bootst …)
  Marco de desarrollo con buenos valores predeterminados
• Polyfills entre navegadores ( https://github.com/Modernizr/Mod …)
  Polyfills para agregar funcionalidad a navegadores antiguos

“Lo más importante” es obviamente subjetivo, pero al más alto nivel esto es lo que uso:
HTML5 Boilerplate: excelente punto de partida, incluye
Modernizador (generalmente viene con Boilerplate): para la detección de funciones, por lo que puede utilizar la mejora progresiva o la degradación elegante en su tiempo libre
jQuery – Manipulación de marcado, monitoreo de eventos, agregando interactividad

Esos son el núcleo que he usado en la gran mayoría de mis sitios recientes. Sin embargo, todos los marcos enumerados anteriormente definitivamente parecen interesantes, ¡y espero aprender más sobre ellos y posiblemente integrarlos en mi próximo proyecto!

Bueno, algunas personas lo tratan como una religión, igual que Android o iPhone. Todas las publicaciones anteriores son justas, solo escribiré lo que estoy usando. Mi filosofía general es tratar de minimizar la cantidad de bibliotecas que uso.

jQuery –
Pros:

• Ideal para seleccionar y manipular elementos dom.
• Probablemente la biblioteca js más extendida del mundo.

Contras:

• Muy hinchado Terminarás usando el 2% de sus capacidades.

• Algunos desarrolladores se esconden detrás de la API jQuery, por lo que su conocimiento básico de Javascript sigue siendo algo limitado.

Angular.js : aquí es donde está todo el bombo en este momento. Gran marco para aplicaciones de una sola página.

• Ofrece fuertes funciones de enlace de datos entre el modelo y la vista, y mucho más (enrutamiento, componentes reutilizables en forma de directivas, etc.).
• Estaba buscando un nuevo trabajo recientemente y todo el mundo pregunta “¿Estás familiarizado con Angular”? incluso si nadie en su organización lo usa. Por lo tanto, la demanda de angular es bastante alta en el mercado.
• Compatible con Google: una gran ventaja.
• Se envía con jQuery Lite incorporado, por lo que si solo necesita operaciones básicas de dom, lo libera de la necesidad de incluir jQuery en su proyecto.

Contras:

• Demasiado complicado, requiere una curva de aprendizaje muy empinada si se usa más allá del uso muy básico.
• No es tan fácil de depurar.
• Tiene problemas de rendimiento para grandes conjuntos de datos.
• Presenta problemas de SEO (aunque estos se están resolviendo gradualmente).

Require.js – maneja la dependencia del módulo – bastante esencial para aplicaciones muy grandes. Sin él, encontrará problemas relacionados con los módulos que no se cargan en el orden deseado.

Bootstrap de Twitter o biblioteca css similar. Supongo que no vas a escribir un sistema de cuadrícula sensible tú mismo … realmente no hay necesidad de hacerlo.

Contras : muy extendido, por lo que si usa los estilos predeterminados, su sitio terminará pareciéndose a miles de otros. Pero escribir tu propio tema sobre Bootstrap es muy fácil.

Less / Sass : yo personalmente uso Less, pero ambos son buenos. Realmente ya no conozco a nadie que escriba vanilla css. Las ventajas de los preprocesadores css son numerosas, por lo que está más allá del alcance de este comentario … Destacaré las variables, el anidamiento y los mixins como los tres primeros.

Con : se puede abusar fácilmente para crear un “infierno de anidamiento”, lo que resulta en un código mucho más legible, pero el CSS generado es demasiado complejo y menos eficiente (el navegador tarda más en renderizar). Use la anidación con precaución … Es difícil ya que es bastante adictivo.

Modernizr.js : ideal para la detección de funciones.
HtmlShiv : soporte agregado para elementos semánticos html5 en navegadores antiguos.
Respond.js : agrega soporte de consultas de medios para navegadores antiguos.

Yo aconsejaría a Webix. Es una biblioteca de componentes de interfaz de usuario JavaScript avanzada, fácil de aprender y rica en código libre y abierto. Webix tiene 70 widgets de IU, incluidos árboles, cuadrículas, cuadrículas de árboles y gráficos. Consulte Wikipedia para ver la extensa lista de integraciones (Bootstrap, jQuery, Font Awesome) y widgets.

Una biblioteca más que merece la atención del desarrollador web es Meteor. Es una plataforma de desarrollo coherente, una colección de bibliotecas y paquetes que están unidos para facilitar el desarrollo web. Se basa en ideas de marcos y bibliotecas anteriores para ofrecer una manera fácil de iniciar una aplicación prototipo, pero le brinda las herramientas y la flexibilidad para crear una aplicación de producción completa.

Además, hay una integración existente de Meteor – Webix: https://github.com/dandv/meteor- …

“Importante” es una palabra muy objetiva. Si crea aplicaciones web complejas tipo escritorio, podría ser mejor elegir entre marcos de componentes, como YUI, Dojo Toolkit, etc. Otra opción es DHTMLX, una biblioteca madura de JavaScript / CSS UI: http://dhtmlx.com

Creo que nada bueno proviene de la construcción sin restricciones en la capa de servicio front-end. Recuerde: todas las bibliotecas sofisticadas que use terminarán en la producción y el cliente tendrá que cargarlas todas (al menos con la primera visita o después de que expire el caché). Y es probable que los tenga en archivos separados y eso significa que numerosas solicitudes HTTP son antipatrón para el rendimiento web (incluso si están cargadas de forma asíncrona). Entonces, mi enfoque pragmático es mantener la capa de servicio tan liviana como sea posible. En cuanto a las bibliotecas AJAX jQuery / Zepto / etc, si conoce JavaScript, no las necesita. Eran útiles como herramientas para calzar lang. características para navegadores heredados. Pero no necesita cargar una biblioteca que no será utilizada por el 80% de sus clientes. Simplemente agregue scripts shim condicionalmente en el lado del servidor. Digamos que si el agente de usuario dice que el navegador es antiguo, agregue carga para
es-shims / es5-shim Puedes verlo en el trabajo aquí dsheiko / exoskeleton-exercise

En cuanto a MV * framework. Bueno, lo que realmente necesita independientemente de una tarea / proyecto: abstracción, convenciones explícitas, reutilización de código. Entonces BackboneJS suena como lo que hace la cosa. Ligero, fácil de leer su código y saber exactamente lo que hace, trae abstracción, algunas convenciones, etc. Sin embargo, tiene dependencias feas jQuery y Underscore. ¡Momento! Hacemos cuñas para los navegadores heredados ES5 ?! ¿Por qué necesitamos estas redundancias? Tomamos ExoskeletonJS (Backbone optimizado) y vivimos felices. Encuentra aquí algunas ilustraciones
JavaScript MV * Framework – Hacer la elección correcta

Por lo tanto, mi elección es:
Exoesqueleto JS
Suplemento ES5 / HTML5, normalizador CSS
Promesa polyfill jakearchibald / es6-promise

En cuanto a la construcción:
Escribo todo el código JavaScript en los módulos CommonJS y los construyo con CommonJS Compiler
Uso de Compass para compilar SCSS estructurado siguiendo SMACSS

RequireJS: una implementación de AMD.
La definición de módulo asíncrono (AMD) tiene como objetivo proporcionar el módulo y el sistema de gestión de paquetes al JavaScript del lado del cliente (como exportaciones y requisitos en CommonJS). No más contaminación de objetos globales y puede solicitar archivos JavaScript solo cuando sea necesario. Más información, consulte http://requirejs.org/docs/whyamd … IMOH si desea escribir aplicaciones complejas del lado del cliente, se recomienda RequireJS.

Un arranque …
http://jquery.com | jQuery : para manipular el DOM
http://d3js.org | d3 : algo así como jQuery para elementos SVG
http://processingjs.org | Processing.js : para manipular elementos de lienzo
http://backbonejs.org | Backbone.js : para gestionar estructuras de datos del lado del cliente
http://underscorejs.org | Underscore.j s : poderosas ideas de programación funcional
http://twitter.github.com/bootstrap | Twitter Bootstrap : acelera el estilo y los eventos de la interfaz de usuario
http://modernizr.com | Modernizr : detección de funciones del navegador
http://www.mathjax.org | MathJax : fórmulas matemáticas de látex en el navegador
http://html5boilerplate.com/ | HTML5 Boilerplate : punto de partida estándar de la industria para páginas o sitios basados ​​en HTML5
http://browserify.org/ | Browserify : habilita el lado del navegador require () de la manera node.js
http://handlebarsjs.com/ | Handlerbars.js: plantillas

Si está haciendo algo intensivo en datos en su lado del cliente, también podría encontrar una base de datos del lado del cliente bastante útil.

Hay algunas opciones, incluidas algunas integradas (aunque un poco complejas, en mi humilde opinión): IndexedDB y WebSQL. Si desea algo moderno y fácil de usar y consultar, consulte http://www.forerunnerdb.com

Descargo de responsabilidad: escribí ForerunnerDB y ahora se usa en un importante proyecto de producción que llega a 6 millones de usuarios activos para un cliente externo.

Una de las bibliotecas más utilizadas (soy autor de esta biblioteca) lo que uso todos los días es jQuery Role: https://github.com/kossnocorp/role .

En lugar de los selectores populares basados ​​en clase e id, jQuery Role proporciona una manera fácil de encontrar y manipular elementos con el atributo role: $('@search-field') devolverá

.

Es una gran idea porque la lógica ya no depende de los estilos. Puedes refactorizar css fácilmente y no temas romper algo.

La mayoría de las personas incursionan en JQuery, pocas personas realmente lo usan en toda su capacidad. Estoy constantemente asombrado de lo mucho que esta pequeña biblioteca hace por ti, durante un par de años, intenté superar a JQuery y presumir lo suficiente como para comenzar a escribir mi propio marco, al final, solo tuve que admitir que JQuery sí es mejor.

No siempre necesita JQuery y no debe permitir que se convierta en una muleta, para la mayoría de las aplicaciones simples y directas, simplemente no hay necesidad de cargar una biblioteca completa solo para diseñar o animar algunas cosas, hay un momento y lugar para JQuery, pero solo sé esto, una vez que invocas el poder de JQuery, ya no tienes excusas que no puedan hacer nada.

Descargo de responsabilidad: soy autor de Atoms.js

Eche un vistazo a Atoms.js, está inspirado en Adobe Flex y Silverlight, junto con una potente experiencia de depuración y edición para Visual Studio, contiene varias líneas de controles comerciales.

La sintaxis es fácil y ofrece un marcado enriquecido.

Twitter: Atoms.js (@atomsjs) | Gorjeo
Fuente de GitHub: neurospeech / átomos.js
Documentación: Componentes web JavaScript de grado empresarial inspirados en Flex y Silverlight

Si su proyecto contiene un lienzo interactivo, asegúrese de visitar http://fabricjs.com/ , un js-lib muy poco evangelizado.

Hablando de poca visibilidad: http://dojotoolkit.org/

Para las grandes aplicaciones JS que necesitan cargar código dinámico, existe YUI.
Como nota al margen para la manipulación de fechas (con localización que funciona): http://momentjs.com/

Agregar más a la lista:
Raphaël: para gráficos vectoriales
Reflection.js: para crear efectos de reflexión
Date.js: para manipulaciones de fecha
Pretty Date: otro manipulador de citas de John Resig
JsLoad: API de carga remota de la biblioteca de JavaScript.

HTML: los nuevos elementos estructurales en HTML5 ; Hacia un HTML más potente: nuevos atributos y funcionalidades en HTML5 … Consumo del servicio del lado del cliente con jQuery.
Página en tinyurl.com

También mencionaría http://webix.com/ | Webix : para desarrollar aplicaciones web multiplataforma móviles y de escritorio con interfaz de usuario receptiva

three.js Una biblioteca 3D de JavaScript que simplifica WebGL
Js angular
CoffeeScript