¿Qué enfoque tomarías para codificar Facebook? ¿Con qué comenzarías? Front-end o backend?

Ya he tenido que considerar esto para un proyecto de inicio propio. Cualquier red social tiene las mismas restricciones construidas sobre ella. Debe poder manejar una gran cantidad de solicitudes sin romper el banco en la CPU y la memoria. Debe ser reactivo y permitir actualizaciones en múltiples flujos de datos sin una forma perfecta para el usuario. Debería permitir una aplicación móvil y notificaciones push para actualizaciones consideradas cruciales para el usuario. También debe ser capaz de comenzar de a poco y poder escalar a voluntad. Elegimos las colas Node.js, Socket.io, Backbone.js, MongoDB y Redis. Las tecnologías en sí mismas no son necesariamente tan importantes como el papel que desempeñaron. Los discutiré un poco más abajo.

Node.js : Elegimos Node.js debido a su escalabilidad debido a E / S asíncrona, efectividad en el procesamiento de solicitudes de WebSockets y naturaleza controlada por eventos. En una aplicación reactiva, el uso de WebSockets reduce la sobrecarga asociada a enviar datos basados ​​en eventos a los clientes. El bucle de eventos asíncrono basado en E / S de Node.js le permite maximizar la utilización de los recursos del procesador y la memoria sin agregar una tonelada de complejidad a la aplicación. La naturaleza impulsada por eventos de Node.js le permite reaccionar a los eventos de datos del usuario, que es la base de una aplicación reactiva. He descubierto muchos otros marcos asincrónicos basados ​​en bucles de eventos de E / S como Twisted in Python (lenguaje de programación), Play Framework en Scala (lenguaje de programación), eventmachine en Ruby (lenguaje de programación), Icicle.io en PHP (lenguaje de programación) y Probablemente hay más que me he perdido. Lo importante no es el lenguaje, sino la funcionalidad.

Socket.io : Elegimos Socket.IO debido a su fácil integración con Node.js, así como a su capacidad de abandonar WebSockets a métodos heredados como sondeos largos e IFrames cuando sea necesario. Esto abstrajo el transporte entre el cliente y el servidor con una biblioteca probada.

Backbone.js : Backbone.js fue nuestra elección, ya que permitía una aplicación de una sola página con componentes reutilizables simples. También usamos RequireJS para hacer que el código sea modular y más comprobable. Si volviera a hacer esto hoy, optaría por React (biblioteca de JavaScript) ya que implementa la estrategia que elegimos de forma estandarizada con un mejor rendimiento gracias al DOM de sombra.

MongoDB : MongoDB fue elegido por dos razones, era la única base de datos consultable que estaba bien respaldada por Node.js en ese momento y está construida en indexación espacial y geoespacial 2D que rápidamente nos permitió consultar y ordenar entidades en función de la ubicación. Otro factor clave para MongoDB es que puede comenzar con una base de datos simple y agregar rápidamente miembros del clúster y particiones más tarde según sea necesario. Muchas bases de datos hacen que ese proceso sea difícil, si no imposible, después del hecho.

Colas de Redis : las colas de Redis se utilizaron para permitir la activación de eventos de datos de usuario en los servidores y el procesamiento fuera de banda. Era importante encontrar un mecanismo para garantizar que el Usuario A en el Servidor 1 pudiera actualizar fácilmente el Usuario B en el Servidor 2. Las colas proporcionan esa funcionalidad y Redis proporciona una facilidad de administración y flexibilidad que era esencial. También utilizamos colas para el procesamiento fuera de línea. En lugar de conectar directamente servicios con API, los conectaríamos con colas. Esto proporcionó la encapsulación de nivel de servicio. Los servicios ni siquiera sabían de la existencia de otros servicios. Simplemente sabían que si producían un tipo de datos, deberían colocarlos en un lugar en la cola para esos datos. Si consumieran un tipo de datos, lo sacarían de una cola. Cualquier sistema de colas funcionaría y podría elegir RabbitMQ, pero eso dependería de la situación y el soporte de idiomas. Lo importante sobre el uso de colas es que introduce una cantidad mínima de complejidad por adelantado, pero proporciona una gran cantidad de flexibilidad y escalabilidad durante la vida del proyecto.

Pluma y papel.

Primero dibujaría la interfaz de usuario.

Luego trazaría el flujo para mis usuarios. Habría muchos diagramas de flujo que describen cómo un usuario de la función A llegó a la función B y qué mensajes se produjeron en el medio.

Luego, enumeraría todas las “características” o “interacciones” que tendría un usuario. Características, módulos, cualquiera que sea el nombre, enumeraría todos los “componentes” individuales de “Facebook”.

Y luego , después de documentar la UI, la UX, los componentes, las diversas formas en que se presentan y los “viajes del usuario”, documentaría las dependencias tecnológicas para cada uno.

Después de hacer eso, construiría la arquitectura front-end y la estructuraría de modo que cada “característica” fuera un módulo que pudiera ser independiente.

Y luego, me asociaría con un chico de back-end, y trabajaríamos juntos en un módulo individual, primero haciendo el front-end, y luego él conectando el back-end y luego volviendo a visitar el front-end de ese módulo hasta que lo hagamos bien. y enjuague, espuma, repita.

Antes de poder codificarlo, debe diseñarlo.

Empezaría por:

a) comprender las personas del usuario; quién va a interactuar con el sistema, es decir, usuarios, usuarios administradores, desarrolladores, etc.

b) Piensa un poco más en las personas usuarias; ¿Tengo diferentes tipos de usuarios? por ejemplo, ¿necesito atender a usuarios que nunca antes han usado una computadora? gurús técnicos que querrán atajos de teclado?

c) comprender los viajes del usuario. ¿Qué deben hacer mis usuarios? ¿Cómo lo hicieron? ¿Cómo puedo facilitarles la tarea?

d) Decidir qué tipo de aplicación es esta. ¿Escritorio? ¿Móvil? ¿Ambos?

e) Piensa en el modelo de monetización. ¿Es esto para suscriptores pagos? ¿Gratis?

Incluso si está tratando de clonar una aplicación existente, como Facebook, seguiría estos pasos para poder entender qué opciones de diseño he tomado.

Una vez que haya hecho eso, es posible que tenga algunos wireframes o maquetas en los que la gente de front-end pueda comenzar a trabajar.

También debería tener suficiente información para comenzar a pensar en el backend.

Idealmente, comenzaría a trabajar en ambos en paralelo.

Si tuviera que elegir uno, sería el front-end. Porque me gustaría poner maquetas delante de mi base de usuarios propuesta lo antes posible para recibir sus comentarios. Y si está tratando de recaudar dinero, los inversores a menudo prefieren ver algo visual, por ejemplo, del lado del cliente, en lugar de la magia que ocurre detrás de escena.

Pero me pondría a trabajar en el backend tan pronto como pudiera, porque mi experiencia me dice que diseñar una arquitectura que funcione bien y se adapte a la perfección no es algo que arroje en el último momento.

No es específico de Facebook, pero si tuviera que diseñar una aplicación web, diseñaría mi frontend y backend por separado. Lo que quiero decir es que la aplicación estaría compuesta por dos capas que se comunican a través de REST para que la capa de presentación sea independiente del backend. Si tuviera que diseñar Facebook, diseñaría Front-end, ya que decidiría qué tipo de API y respuestas serían necesarias desde el backend.

Comenzaría con lápiz y papel. Dibuje la interfaz de usuario y enumere las características que necesitará para que un sitio muy básico funcione. Eso le da una interfaz de usuario básica y una estructura de datos suficiente para comenzar el db.

More Interesting

¿Qué idioma de backend tiene más trabajos y utilidad?

Quiero ser un desarrollador web y quiero construir un sitio web completo que contenga codificación tanto front-end como back-end, ¿qué idioma debo aprender?

¿Cómo comenzar a escribir el servicio de backend? ¿Debo crear bases de datos primero? ¿O debería escribir el código primero? ¿Qué es exactamente escribir código de fondo?

¿Se deben manejar las solicitudes HTTP fusionadas en el front-end o el back-end?

¿Cómo sabré qué sitio web está utilizando qué idioma en el back-end?

¿Qué importancia tiene ASP.NET en el desarrollo web general en estos días?

¿Cuál es el mejor marco, CMS o API para aprender como desarrollador de back-end de PHP?

¿Qué es un desarrollador de back-end?

¿Cuánto CSS debo aprender para el desarrollo de backend?

¿Cuánto desarrollo front-end puede ser realizado por no ingenieros o programadores?

¿Qué pila tecnológica sería más escalable para TI, Java como backend o Node.js?

Me uní a un equipo de PHP API en el que voy a trabajar como desarrollador web de back-end. Actualmente están trabajando en PHP YII y Mongo. Redis ¿Qué debo aprender junto con él? ¿Cuál es un consejo?

Quiero ser un desarrollador de backend. ¿Con qué idioma debo comenzar?

¿Es posible abandonar JavaScript solo para TypeScript (tanto para diseño de back-end como de front-end)? Si es así, ¿vale la pena?

¿Qué idioma tiene un futuro más prometedor (Elixir, Golang o JavaScript del lado del servidor)?