¿Cuáles son algunas implementaciones reales de algoritmos altamente utilizados o patrones de diseño que ha utilizado en el desarrollo web front-end?

Todavía no los he usado personalmente, y no sé si consideraría los algoritmos asociados altamente utilizados, pero ciertamente son interesantes. Creo que el alcance de su utilidad podría ser bastante grande y tal vez deberían ser más utilizados.

Antes de continuar, la información en esta publicación no es mía y proviene directamente de una presentación impresionante de Mark DiMarco llamada, Algoritmos de interfaz de usuario, en JSConf 2014. Simplemente estoy reiterando su presentación en esta publicación. Te recomiendo que veas su presentación en YouTube si te molestas tanto como yo.

Algoritmo de triángulo desplegable

Cuando pasa el mouse sobre un botón de navegación desplegable y aparece un submenú al pasar el mouse, a menudo puede surgir una situación muy incómoda. Si pasa el mouse en diagonal para llegar a un elemento en la parte superior o inferior del submenú emergente, desaparecerá en el momento en que el mouse deje el botón que tiene el evento mouseover adjunto. Por lo tanto, para llegar con éxito al submenú, deberá colocar cuidadosamente el mouse a un lado para que el mouse nunca deje el espacio del botón hasta que llegue al menú desplegable para que el menú no desaparezca antes de llegar allí. Por ejemplo


Una solución a esto es establecer un evento de temporizador que permita que el submenú permanezca abierto durante una fracción de segundo una vez que abandone el botón. Sin embargo, el problema con esto es que va a introducir un retraso en los submenús que no es lo ideal. Por lo tanto, incluso cuando desactive el botón sin intención de ir al submenú, el menú permanecerá abierto durante una fracción de segundo.

Parece que la solución para esto ha existido desde los años 80 cuando Bruce “Tog” Tognazzini lo introdujo en Mac OS. Más tarde reapareció y fue visto en uso por Amazon y analizado por Ben Kamens en su blog aquí Desglosando el mega desplegable de Amazon.

La solución es tener un algoritmo que mida las pendientes de las líneas desde el mouse hasta las esquinas del submenú en el movimiento del mouse después de que se active el evento de desplazamiento.


Esto puede decirnos si el mouse se dirige hacia el submenú o no, y si es así, puede introducir un retraso, y si no es así, puede permitir que el submenú desaparezca sin demora.

Algoritmo de la fortuna

Este algoritmo puede ser un poco menos útil, pero todavía hay muchos casos en los que puedo verlo útil. Se utiliza para generar un diagrama de Voronoi a partir de un conjunto de puntos o nodos.


La imagen de arriba es una ilustración gráfica del algoritmo en el trabajo. Mark DiMarco repasa esto con mucho más detalle en su presentación de JSConf.

Se puede usar cuando tiene elementos extendidos en un espacio determinado y desea dividir el espacio inmobiliario para cubrir todo el espacio. Tener el espacio dividido en un Diagrama de Voronoi permitiría que el mouse del usuario siempre esté sobre algún elemento mientras esté en ese espacio. Puede ser muy útil en cierto tipo de cuadros, gráficos o incluso navegación creativa.

Aquí hay algunos que uso con frecuencia en mis proyectos:
Patrones de diseño :
Model-View-Controller para arquitectura general
Observador de notificaciones
Factory / Abstract Factory para gestionar objetos de manera efectiva
Iterador para iterar a través de colecciones
Inyección de dependencia para ocultar código complicado
Decorador / Mediador para comunicación
Adaptador para compatibilidad
Facade / Builder para simplificar el código del cliente

Algoritmos
Filtrado colaborativo para tareas de recomendación:
– Encontrar usuarios similares
– Encontrar artículos similares
– Productos a juego
K-medias para encontrar el grupo de datos relacionados
Clasificador Bayesiano para el filtrado de spam

El patrón más común es probablemente Modelo – Vista – Controlador. Dentro del controlador, es típico ver patrones de adaptadores para permitir variaciones en las capacidades del dispositivo. En el componente de vista, es común ver la Cadena de responsabilidad para manejar variaciones en el diseño y la orientación.

Un algoritmo muy común, utilizado en casi cualquier proyecto web es la validación de correo electrónico. Muy trivial pero cierto.