Si acaba de comenzar a aprender sobre desarrollo web, probablemente haya escuchado muchas conversaciones sobre la programación frontend y backend. Pero, ¿qué queremos decir exactamente con esto? Si eres un principiante en el campo, puede ser difícil saber no solo cuál es cuál, sino también qué cubre uno u otro.
Si bien el desarrollo frontend y backend son ciertamente distintos entre sí, también son como las dos caras de la misma moneda. La funcionalidad de un sitio web depende de que cada lado se comunique y opere de manera efectiva con el otro como una sola unidad. ¿Es uno más importante que el otro? No Ambos juegan papeles muy importantes en el desarrollo web. Entonces, ¿por dónde deberíamos comenzar? Volteemos una moneda.
Introducción al desarrollo frontend
- Un comensal de Nueva York me contactó para manejar $ 15k / mes en pedidos de comida para llevar. Me escuchó lanzar una aplicación de menú de restaurante basada en fotos y ahora quiere que se construya. También se han registrado 12 restaurantes adicionales. ¿Dónde puedo encontrar un desarrollador front-end y back-end como cofundador en el área de Nueva York?
- ¿Existe algún tutorial de desarrollo web completo con JavaScript (frontend, back-end) que comience con lo básico y no sea abrumador?
- Soy un desarrollador front-end y quiero aprender back-end. Cuál es la opción más interesante y estable para el desarrollo completo: Node.js con Express o Sails; o Python con frasco o pirámide?
- ¿Cuáles son las mejores formas para juegos back-end (unidad)?
- ¿Necesito aprender el ajuste de la base de datos, el fragmentación y la configuración de la infraestructura para convertirme en un desarrollador de back-end?
La interfaz de un sitio web es lo que ve e interactúa en su navegador. También conocido como “lado del cliente”, incluye todo lo que el usuario experimenta directamente: desde texto y colores hasta botones, imágenes y menús de navegación.
Digamos que decides iniciar un negocio. Abre una panadería gourmet para golosinas para perros y necesita un sitio web profesional para presentar su empresa a los clientes y decirles dónde se encuentra. Quizás incluyas algunas fotos y alguna información sobre tus productos. Todo lo que necesita son tecnologías frontend para construir su sitio web.
Idiomas frontend
Estos tres idiomas harán el truco:
HTML : el lenguaje de codificación fundamental que crea y organiza el contenido web para que un navegador pueda mostrarlo
CSS : un lenguaje que acompaña a HTML y define el estilo del contenido de un sitio web, como el diseño, los colores, las fuentes, etc.
JavaScript : lenguaje de programación utilizado para elementos más interactivos como menús desplegables, ventanas modales y formularios de contacto.
Juntos, estos elementos esenciales crean todo lo que se presenta visualmente cuando visita una página web, ya sea comprando en línea, leyendo las noticias, revisando su correo electrónico o realizando una búsqueda en Google.
Además de los lenguajes de front-end básicos, encontrará marcos como Bootstrap y Angular, así como bibliotecas de JavaScript como jQuery y extensiones CSS como Sass y LESS. Hay una larga lista de recursos como estos, que admiten HTML, CSS y JavaScript. Su propósito es simplemente hacer que el código sea más manejable y organizado al proporcionar varias herramientas y plantillas compatibles con lenguajes de codificación comunes.
Entre bastidores
Un avance rápido de unos meses. El sitio web de su empresa se ve muy bien y la panadería gourmet para golosinas para perros se ha vuelto increíblemente exitosa. Ahora los clientes quieren comprar grandes cantidades de golosinas para sus amigos peludos y comenzar a preguntar si pueden ordenar en línea.
Entonces decide abrir una tienda en línea donde las personas pueden comprar y hacer pedidos en cualquier momento. Esto significa que su sitio ahora tendrá que almacenar información sobre productos, compras, perfiles de usuario, tarjetas de crédito y más. ¿Cómo administrará estos datos para poder comenzar a entregar golosinas para todas esas colas? Aquí es donde entra el desarrollo del backend.
Introducción al desarrollo de backend
Hasta ahora, lo que tiene es un ejemplo de un sitio web estático : su contenido realmente no cambia mucho. Para los sitios estáticos, toda la información necesaria que determina qué hay en la página web está en el propio código de la interfaz. Los sitios web estáticos son buenos para mostrar cosas como negocios, restaurantes, carteras o perfiles profesionales. Pero si desea convertir su sitio en algo con lo que los usuarios puedan interactuar, necesitará profundizar más en lo que sucede detrás del escenario del sitio web.
El backend (o “lado del servidor”) es la parte del sitio web que no ve. Es responsable de almacenar y organizar datos, y de garantizar que todo en el lado del cliente realmente funcione. El backend se comunica con el front-end, enviando y recibiendo información para que se muestre como una página web. Cada vez que complete un formulario de contacto, escriba una dirección web o realice una compra (cualquier interacción del usuario en el lado del cliente), su navegador envía una solicitud al lado del servidor, que devuelve información en forma de código frontend que el navegador puede interpretar y mostrar.
Su nuevo sitio necesitará tener componentes de back-end adicionales para convertirlo en una aplicación web dinámica : un sitio web cuyo contenido puede cambiar en función de lo que está en su base de datos , y que puede ser modificado por la entrada del usuario. Esto es distinto de un sitio web estático, que no requiere una base de datos porque su contenido generalmente permanece igual.
Configuración del lado del servidor
Su sitio web necesita una base de datos para administrar toda la información del cliente y del producto. Una base de datos almacena el contenido del sitio web en una estructura que facilita la recuperación, organización, edición y almacenamiento de datos. Se ejecuta en una computadora remota llamada servidor . Hay muchas bases de datos diferentes que se usan ampliamente, como MySQL, SQL Server, PostgresSQL y Oracle.
Su aplicación seguirá conteniendo código de interfaz, pero también debe construirse utilizando un lenguaje que una base de datos pueda reconocer. Algunos lenguajes de fondo comunes son Ruby, PHP, Java, .Net y Python. Estos lenguajes de programación a menudo se ejecutan en marcos que simplifican el proceso de desarrollo web. Rails, por ejemplo, es un marco escrito en Ruby. “Ruby on Rails” es una tecnología popular para crear aplicaciones web dinámicas que hace que el proceso sea mucho más rápido.
Con todas estas partes trabajando juntas correctamente, los clientes pueden visitar su sitio web y buscar el tipo particular de refrigerio que desean comprar, tal vez quieran obtener una lista de golosinas hechas especialmente para cachorros pequeños. Cuando lo escriben en el cuadro de búsqueda (en el frontend), la aplicación revisa todos los datos del producto almacenados en la base de datos (backend) y devuelve la información apropiada en forma de código frontend que el navegador muestra como la lista solicitada por el usuario .
