Get best of the week

Escribimos front-end que funciona. O cómo convertirse en ingeniero de un desarrollador. Parte 1

Un desarrollador es un concepto fuertemente vinculado a una tecnología específica, y es lo que determina lo que va a desarrollar. Un ingeniero es un concepto mucho más amplio, inicialmente no vinculado a ningún campo. Primero, obtienes la llamada base de ingeniería, en base a la cual eliges un nicho en el que trabajarás, por ejemplo, un ingeniero de software. Y solo después de eso, el ingeniero comienza a especializarse en cualquiera de las tecnologías.

La base de la ingeniería tiene más que ver con la forma de pensar, la capacidad de analizar y sistematizar, que con la corteza de la universidad. Cuando puede justificar razonablemente las decisiones tomadas y las decisiones que se han descartado.

No es ningún secreto que la interfaz de usuario es uno de esos basureros donde, si algo funciona, es mejor no tocarlo y, si no, reescribirlo por completo.

Es mejor ver una vez que escuchar cien veces


Ahora se ha puesto de moda crear una interfaz basada en tarjetas, así que echemos un vistazo al caso en el que estamos obligados a desarrollar una tarjeta que se pueda arrastrar y mantener ciertas posiciones en función de los resultados de estos arrastres.

Introductorio


  1. La tarjeta debe poder ocupar una de las tres posiciones. 1 - la tarjeta se inicializa, 2 - el usuario levantó la tarjeta (la abrió), 3 - el usuario deslizó la tarjeta hacia abajo para extraerla.


  2. El tamaño mínimo de la tarjeta es de 50vh, el máximo no está limitado (significa la posibilidad de desplazarse en la posición 2)

Después de recibir los requisitos, lo más probable es que el desarrollador ya esté tratando de decidir qué marco usar. Y el ingeniero tratará de describir el proceso con más detalle e identificar las características clave de esta descripción.

Por ejemplo:



un diagrama de acción de nivel superior se ve así, no es muy complicado:



considere la acción de Arrastrar:



Aquí puede ver de inmediato que la acción de Arrastrar es imposible solo desde la posición cuando se desplaza la tarjeta , desde todas las demás posiciones, independientemente del tamaño de la tarjeta, debemos manejar la acción de arrastrar.

La dificultad es solo la clasificación de las tarjetas en tamaño. Debemos clasificar la tarjeta como pequeña para evitar que se arrastre a más de 50vh, una tarjeta de tamaño mediano no debe elevarse por encima de su altura (de lo contrario, simplemente se cuelga en el "aire"), pero una tarjeta de gran tamaño no debe arrastrarse a más de Y = 0 (arriba pantalla).

Un buen matemático es un matemático perezoso. Es difícil clasificar las tarjetas por tamaño y determinar la altura máxima de arrastre, vale la pena pensar en cómo presentar estas tarjetas de manera más conveniente, no para resolver todo de frente (esto es como en matemáticas cuando lo lleva todo a un denominador común).

En esta etapa, podemos imaginar que la tarjeta se dibuja en una ventana virtual que puede moverse hacia arriba y hacia abajo en relación con la ventana real, la altura mínima de esta ventana virtual es de 50vh, la máxima es de 100vh.



Ahora el parámetro general para las tarjetas de todos los tamaños en cualquier posición (iniciada, abierta) es la reserva de energía.

El diagrama de procesamiento de la acción dragUp se puede describir de la siguiente manera:



para la acción dragDown, todavía es más simple (por supuesto, puede comenzar de nuevo con los círculos de Euler, pero es demasiado obvio): la única condición que bloquea dragDown es que la tarjeta se haya desplazado y la acción scrollDown se ejecutará, y No arrastrar hacia abajo.



Y el líder sin pretensiones ante condiciones restrictivas es el desplazamiento. Lo único a tener en cuenta es que el desplazamiento solo es posible en la posición abierta, cuando las ventanas virtuales y reales se cruzan por completo. (e implementamos esta condición a través de css, especificando el desbordamiento abierto-y para la posición)



Y, por supuesto, "perdimos" algo y este evento dragEnd que cierra nuestra interacción con las tarjetas (y de hecho con la ventana virtual) y en la salida determina en qué posición deberíamos estar.



Total


Como resultado de la primera parte, donde realizamos capacitación en ingeniería, describimos los parámetros clave y el plan de acción, nos acercamos sin problemas a la parte 2, donde desde la posición del desarrollador implementaremos todo esto (cosas como arrastrar, arrastrar hacia abajo acciones, determinar la reserva de energía, descripción de las posiciones finales). En general, convierta los circuitos en código.

More articles:


All Articles