Herramientas y bibliotecas recomendadas que lo ayudarán a crear una aplicación web impresionante en 2020.






1. Animación 2D | Anime.js



https://animejs.com/documentation/











Una biblioteca JS liviana para entregar hermosas animaciones. Anime ofrece una API básica y simple que tomaría poco tiempo para dominar. Los desarrolladores de React también pueden optar por usar la biblioteca react-anime (construida sobre AnimeJS).





Aquí hay un breve ejemplo:







anime ({ 


  objetivos: '.css-selector-demo .el', 


  translateX: 250 


});




See the Pen
Animación de texto SVG escrita a mano by Michael Daniel Murillo López (@michaeldanielm)
on CodePen.






2. Animación 3D | three.js



https://threejs.org/



three.js es la biblioteca de animación en 3D para la web. Es increíblemente popular con aproximadamente 200k descargas semanales en NPM. three.js tiene una API bastante simple (aunque debe esperar pasar un tiempo considerable resolviendo esto). Si aún no lo sabes, definitivamente deberías intentarlo.




3. Animación de texto | Animar CSS



https://github.com/daneden/animate.css





Animar CSS es la forma más fácil, que conozco, de animar texto. Simplemente agregue la clase CSS que coincida con la animación que está buscando y listo; es así de fácil.

daneden / animate.css




4. Audio | Howler.js


https://howlerjs.com/





Howler es una biblioteca de audio Javascript popular con más de 15.5K que comienza en GitHub. Ofrece todo lo que necesita para controlar el sonido en su aplicación web: desvanecimiento, volumen, búsqueda y mucho más. Incluso permite posicionar virtualmente su fuente de sonido utilizando coordenadas 3D (donde el oyente está en x, y, z = 0). Howler es ligero (7k) y no tiene dependencias externas.


5. Compartir y reutilizar componentes de IU | bit



https://bit.dev/


https://github.com/teambit/bit





Bit le da el poder de "cosechar" componentes de IU reutilizables de cualquier base de código y compartirlos con una colección de componentes en bit.dev .

Compartir componentes en una colección los hace visibles y disponibles para usted, su equipo y, si lo elige, toda la comunidad de código abierto.

Eso hace que Bit no solo sea una alternativa a la biblioteca de interfaz de usuario tradicional, sino también una excelente manera de maximizar la reutilización de código (en y a través de repositorios), acelerar el desarrollo y construir una base de código front-end más mantenible.

Por lo tanto, si desea crear su propia colección privada de componentes reutilizables o navegar por un catálogo interminable, creado por la comunidad de código abierto, puede consultar Bit ( Github ).




6. Galería de sistemas de diseño | Design System Repo


https://designsystemsrepo.com/design-systems/





"Design System Repo" es una lista seleccionada de sistemas de diseño y bibliotecas de interfaz de usuario de grandes y pequeñas empresas. Explore lo que tiene para ofrecer para inspirarse o simplemente usar una de sus muchas bibliotecas de componentes de interfaz de usuario gratuitas y de código abierto.




7. Visualización de datos | Chart.js



https://www.chartjs.org/





Una biblioteca extremadamente popular (48k estrellas) de gráficos HTML 5 de código abierto para aplicaciones web receptivas que utilizan el elemento de lienzo. V.2 proporciona tipos de gráficos mixtos, nuevos tipos de ejes de gráficos y hermosas animaciones. Los diseños son simples y elegantes con 8 tipos de gráficos básicos, y puede combinar la biblioteca con moment.js para eje de tiempo. También puede consultar la biblioteca en cdnjs .




8. Presentación | Reveal.JS


https://revealjs.com/





Reveal.JS es un maravilloso marco de presentación HTML. Tiene todo lo que necesita para hacer una hermosa presentación usando HTML, que incluye zoom, deslizamiento horizontal / vertical y elegir entre una selección de hermosos estilos de transición.

revel.js - El marco de presentación HTML.


9. Video | Video.JS



https://videojs.com/forest









Video.JS es un reproductor de video web popular que admite video HTML5 y Flash, así como YouTube y Vimeo. Básicamente, extiende y "estandariza" el elemento de video nativo, para proporcionarle características y capacidades adicionales y asegurarse de que se ejecute en todos los navegadores (usando una sola implementación). Agréguelo a su proyecto usando un CDN o instálelo como un paquete.




10. PixiJS


https://www.pixijs.com/







Pixi es un motor de representación de sprites 2D súper rápido.

Para citar los documentos oficiales de Pixi:

le ayuda a mostrar, animar y administrar gráficos interactivos para que le resulte fácil crear juegos y aplicaciones utilizando JavaScript y otras tecnologías HTML5. Tiene una API sensata y ordenada e incluye muchas características útiles, como admitir atlas de texturas y proporcionar un sistema simplificado para animar sprites (imágenes interactivas). También le proporciona un gráfico de escena completo para que pueda crear jerarquías de sprites anidados (sprites dentro de sprites), además de permitirle adjuntar eventos de mouse y touch directamente a los sprites. Y, lo que es más importante, Pixi se sale de su camino para que pueda usar tanto o tan poco como desee, adaptarlo a su estilo de codificación personal e integrarlo sin problemas con otros marcos útiles.