#Thread 🧵Necesitas conocimientos de algoritmos / Big O para la entrevista de #FrontEnd en #Google o #Facebook?

R: Sí!

Este es un ejemplo de que pueden preguntar en la entrevista especializada de FE, donde mostrarás el dominio de performance y #Javascript/#CSS

👇🏼 [1/x]
Este es el escenario: tienes una lista de checkboxes. Puedes tener n checkboxes (mucho ojo aquí! 👁).

Primer challenge: necesitamos una forma eficiente de agregar un evento input a todos los checkboxes.

Antes de avanzar al siguiente tweet, qué forma se te ocurre?
Mmm, una forma que se me ocurre es simplemente tomar todos los checkboxes del DOM y agregarles un listener.

Funciona? Sí.
Es eficiente: absolutamente no.

n checkboxes significan n eventos. Big O(n) -> lineal.

#Javascript tiene algo que nos puede ayudar a mejorar esto?
Podemos usar el concepto de bubble events de #javascript

De esta forma, solo agregamos un evento input al elemento padre <ul />.

Los checkboxes son los únicos hijos que van a poder disparar este evento!

Big O (1) -> Constante

El reto aún no acaba!

javascript.info/bubbling-and-c…
Segundo challenge: tenemos un checkbox Dios con la capacidad de marcar o desmarcar todos los checkboxes.

Si el usuario selecciona cb por cb hasta completarlos, este cb Dios se tiene que habilitar. En otras palabras, esta consciente de las acciones de los demás.

Hora de codear.
Antes de avanzar al siguiente tweet, qué solución se te ocurre que sea eficiente?

Empezaré con una opción que puede llegar rápidamente: leer todos los checkboxes cada que se les de click para ver si este checkbox Dios debe marcarse o desmarcarse.
Una opción puede ser: cada que se de click a un checkbox, vamos a leer el estado de todos los checkboxes.

El problema cae en como entendemos la web.

- Leer todos los checkboxes del DOM vuelve a ser un problema Big O (n) / n checkboxes
- Leer y modificar el DOM es MUY costoso.
Hay una solución super sencilla. El hecho de conocer el costo del DOM nos ayuda a llegar a ella.

Si en lugar de leer el DOM en cada acción, solamente guardamos cierta data inicial y mantenemos un contador que nos indique la cantidad de elementos que están cambiando [...]
Nos ahorramos llamadas innecesarias al DOM (que al tener n checkboxes sería Big O (n), y lo cambiamos a modificar una variable, cuya complejidad será constante Big O (1)

Todo este ejercicio es algo que se espera resuelvas en 40 minutos o menos!
Como dato curioso, hace algunos meses un amigo de Airbnb y yo estábamos discutiendo unos problemas de código en nuestras chambas, y justamente él tenía un problema con el costo de lectura del DOM. Y lo solucionamos con esta misma solución 😜
Este tipo de preguntas son las que me han tocado en #Google y #Facebook en la entrevista especializada de #FrontEnd.

Recuerda que el resto de las 3 entrevistas son System Design y Algoritmos.

Por ello nunca dejo de hacer hincapie en el poder de tener estos conocimientos!
Como siempre, si tienen dudas mis DMs están abiertos, aunque me encantaría más responder los tweets en público para que otros se beneficien de la respuesta 😊

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Charlie Charlie ⚡️

Charlie Charlie ⚡️ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!