¿Qué tecnologías se utilizan para construir los sofisticados y avanzados paneles y aplicaciones del lado del cliente a través de HTML5 y JavaScript?

Puedo darle una descripción general rápida de algunas de las tecnologías que he utilizado para crear paneles y aplicaciones del lado del cliente.

Primero, recomiendo usar Gráficos Vectoriales Escalables [1] (SVG) para cuadros, gráficos y otras visualizaciones interactivas. SVG funciona en todos los navegadores modernos, admite JavaScript interactivo y se adapta bien a pantallas de todos los tamaños.

Si bien puede crear su propio código para manipular las visualizaciones SVG, no lo recomiendo. Si está buscando crear visualizaciones SVG personalizadas, probablemente debería usar D3.js – Documentos basados ​​en datos. D3.js es extremadamente potente y flexible y es la tecnología subyacente para muchas bibliotecas de trazado y representación gráfica.

D3.js es maravilloso, pero no proporciona capacidades de gráficos y gráficos listos para usar. He probado algunas bibliotecas de gráficos JavaScript diferentes y finalmente me decidí por Plot.ly. Proporcionan bibliotecas de código abierto para Python, R, MATLAB y JavaScript. También proporcionan una oferta comercial para servicios alojados. De todas las soluciones que probé, fue la más fácil de usar.

Esto cubre la biblioteca de gráficos pero no proporciona la plataforma de aplicación general. Hay muchas opciones para elegir. Keen IO proporciona una colección de plantillas que usan Bootstrap. Plot.ly también proporciona una solución para crear paneles interactivos. Si necesita algo más complicado, siempre puede usar un marco de aplicación web como Angular, Polymer o React.

Por último, también hay opciones si no eres un desarrollador fuerte de JavaScript. Si eres un desarrollador de Python, Bokeh usa D3.js y proporciona una forma de crear visualización interactiva. Del mismo modo, Shiny es una opción si eres un desarrollador R.

Notas al pie

[1] HTML5 SVG

JavaScript puede hacer menús de clic derecho personalizados (¿Cómo agregar un menú de clic derecho personalizado a una página web?)

Y arrastre y suelte adjuntando oyentes de eventos al DOM.

Puede hacerlo manipulando directamente el DOM con jQuery o JavaScript vainilla.

Sin embargo, le recomiendo que aprenda a usar un DOM virtual y componentes reutilizables. Las bibliotecas como Vue.js y React son rápidas de aprender.

Personalmente me gusta reaccionar. En mi opinión, esta biblioteca ha traído el diseño clásico de OOP al diseño de aplicaciones web front-end, incluso si es azúcar sintáctico. Creo que realmente abre las posibilidades de lo que JavaScript puede hacer, y personalmente me gustan los componentes sobre las plantillas.

Si está buscando paneles rápidos y utilidades gráficas, hay mucha SaaS de inteligencia empresarial (BI) que proporciona visualizaciones, informes y muchas otras funciones listas para usar. Es posible que esté interesado en realizar una prueba gratuita y evaluar las características que le interesan.

Si está interesado en construir algunas herramientas de visualización usted mismo, hay algunas bibliotecas js muy interesantes como chartjs . También podría sentirse atraído por algunas utilidades de gráficos basados ​​en svg como los gráficos de Google . La belleza de las bibliotecas js es que se mezclan bien. Sí, jQuery va con AngularJS o ReactJS o KnockoutJS .

La cantidad de esfuerzo o personas que necesita depende de cuán elaboradas sean las características y qué tan pronto las necesite. Es posible que 1 persona construya dicha herramienta. 🙂