CUADERNO DEL DESARROLLADOR FULL STACK: DE

PRINCIPIANTE A EXPERTO

PÁGINA 1: Introducción al Desarrollo Full Stack

Título: Buenas Prácticas y Componentes Fundamentales

Un Desarrollador Full Stack es aquel profesional capaz de trabajar tanto en el front-end como en
el back-end de una aplicación. Los profesionales en desarrollo Full Stack escriben código y con
frecuencia se encargan de todo lo necesario para llevar el producto a producción.

El objetivo de este cuaderno es proporcionar una guía de los componentes del Full Stack,
comparando las tecnologías y las buenas prácticas aplicables a cualquier tecnología, que agregan
valor al producto y generan una mayor acogida y apreciación en la industria.

PÁGINA 2: El Perfil y las Habilidades del Desarrollador Full Stack

Para convertirse en un desarrollador Full Stack, se requiere una sólida comprensión de varios
lenguajes y frameworks.

Habilidades Clave

1. Desarrollo Front-End: Se trata de crear la interfaz y experiencia del usuario.

2. Desarrollo Back-End: Implica la lógica detrás de escena que potencia las aplicaciones.

3. Bases de Datos: Trabajar con bases de datos.

4. Control de Versiones: Dominio del Control de versiones con Git y Github para gestionar y
colaborar en proyectos de código.

5. APIs RESTful: Entender qué son las APIs REST.

6. Habilidades Blandas: Capacidad de resolver problemas, habilidades de depuración

(debugging), y disposición a aprender continuamente.

El Camino de Aprendizaje

El desarrollo Full Stack representa la cúspide del conocimiento en programación, combinando

habilidades de Front End y Back End. Para iniciar la ruta, se necesita una sólida comprensión de los
fundamentos de la programación: HTML5, CSS3 y Javascript. Una vez que se dominan los
fundamentos, se puede adentrar en frameworks como React, Angular, o Vue para el Front End, y
lenguajes como Java, Python, C#, o [Link] para el Back End.

PÁGINA 3: Los Componentes del Stack (Lógica General)

Las aplicaciones web se encuentran comúnmente divididas en dos secciones principales: el Front
End y el Back End.

1. Front End (Lado del Cliente)

El Front End es la parte que el usuario observa y con la cual interactúa, incluyendo pantallas de
menú y formularios.

• Tecnologías Base: Generalmente es una combinación de HTML5, CSS3 y JavaScript.

• Función: Diseñar y desarrollar una interfaz web front-end.

2. Back End (Lado del Servidor)

El Back End se encarga del procesamiento y almacenamiento de datos, así como de la lógica y
la funcionalidad del software.

• Componentes: Consta del servidor, la aplicación en sí y una base de datos.

• Comunicación: Se compone de servidores, bases de datos, aplicaciones y API’s que permiten la

comunicación entre el cliente y el servidor.

3. Bases de Datos

Se utilizan para el almacenamiento de datos. En el contexto Full Stack, se mencionan opciones

como PostgreSQL y MongoDB. Una petición realizada a una aplicación web debe ser autenticada
en una base de datos, y los contenidos pueden ser cargados desde varios servidores.

PÁGINA 4: La Capa Front End: Fundamentos y Herramientas

El desarrollo Front End implica la creación de la interfaz y la experiencia del usuario.

Fundamentos Esenciales

• HTML5: El lenguaje de marcado para estructurar páginas web.

• CSS3: Se utiliza para estilizar y diseñar la apariencia visual de las páginas web.

• JavaScript (JS): El motor detrás de la interactividad en la web. Destaca como el lenguaje más
utilizado en el front-end con un 63.61% de aceptación.

Frameworks y Bibliotecas

Los frameworks de front end (como React, Vue, y Angular) son un conjunto integrado de artefactos
de software (clases, objetos y componentes) que facilitan la realización de una arquitectura. Esto
permite agilizar el proceso de desarrollo, reduciendo el tiempo de esfuerzo y, por ende, los costos.
Ventajas de usar un Framework:
• Incremento en la velocidad de desarrollo.

• Reducción del número de errores de programación.

• Facilidad para la colaboración.

• Reutilización en una familia de aplicaciones relacionadas.

Nota sobre SPAs: Aunque la mayoría de los frameworks pueden ser utilizados para Single Page
Applications (SPAs) o Multiple Page Applications (MPAs), Angular es una excepción, siendo
inadecuado para MPAs.

PÁGINA 5: Comparativa de Frameworks JS: React, Vue y Angular (Visión

General)

Atributos Angular React [Link]

Tipo Javascript Framework Librería JS Open Source Framework Progresivo JS

Renderizado Lado del Cliente Lado del Servidor Lado del servidor

Modelo MVC Virtual Virtual

Descargas Semanales
444,594 5,036,078 996,293
NPM

Velocidad de codificación Lenta Normal Rápida

Documentación Sí Sí Sí

Contexto Histórico: [Link] puede considerarse el framework más nuevo, aunque su lanzamiento
inicial ocurrió dos años antes de Angular 2. Angular fue creado originalmente por empleados de
Google. React fue desarrollado por Facebook (Meta Platforms, Inc.).

PÁGINA 6: Detalle de Front End: React

React es una biblioteca de JavaScript desarrollada por Facebook (Meta Platforms, Inc.) utilizada
para crear interfaces de usuario para la web. Muchos lo consideran un framework de escala
completa debido a la gran cantidad de funcionalidades que ha acumulado. Es el framework más
popular de JavaScript, debido a su facilidad de aprendizaje y rápido escalado.

Características de React

• Núcleo: Se compone de componentes.

• Objetivo: Transformar un estado determinado de la aplicación en una vista que se pueda mostrar
en el navegador.
• Virtual DOM: Utiliza el Virtual DOM para actualizar la página. React se enfoca más en la
estabilidad de las operaciones antes que en la rapidez de las operaciones del DOM.

• JSX: Utiliza una extensión llamada JSX ('JavaScript extenso') que permite enriquecer el código
JavaScript con fragmentos de código HTML.

• Props y Estado: Los componentes se configuran con propiedades (Props) y tienen un estado
mutable internamente. Las Props son inmutables dentro del componente.

• Estructura de Proyectos: Comúnmente estructurado por tipo de archivos, como archivos de API
o de Componentes.

PÁGINA 7: Detalle de Front End: [Link]

[Link] (Vue) es considerado un framework progresivo de JavaScript y es conocido por su

sintaxis de marcado basada en HTML.

Características de [Link]

• Componentes: Las aplicaciones Vue se componen de componentes reutilizables llamados

instancias de Vue.

• Templates (Plantillas): Utiliza una sintaxis de plantilla basada en HTML que permite vincular el
DOM renderizado a los datos de la instancia subyacente. Utiliza la sintaxis "Bigote" (llaves dobles)
para vincular datos.

• Virtual DOM: Al igual que React, Vue usa Virtual DOM para actualizar la página. Tiene un
rendimiento excelente gracias a su sistema de reactividad y la implementación eficiente de su
Virtual DOM.

• Datos y Estado: Los datos se almacenan en la función de datos de los componentes, actuando
como el estado.

• VueX: Es un patrón de administración de estado y una biblioteca para aplicaciones Vue, que
sirve como almacén de datos centralizado para todos los componentes.

• Estructura de Carpetas: Se compone de una carpeta public (favicon, html público) y una
carpeta src (componentes, assets, vistas).

PÁGINA 8: Detalle de Front End: Angular

Angular es un framework de diseño de aplicación y plataforma de desarrollo para crear

sofisticadas y eficientes aplicaciones de una sola página (SPA).

Características de Angular
• Filosofía: Se basa en el principio de Pareto (regla 80-20), buscando realizar el 80% de las
tareas con el 20% del esfuerzo, priorizando la configuración sobre la convención para aumentar la
simplicidad.

• Componentes: La funcionalidad principal se basa en Components (bloques de construcción de

la aplicación), que utilizan un decorador donde se especifica un selector de CSS, una plantilla de
HTML y un conjunto opcional de CSS.

• Templates (Plantillas): Definen cómo se renderiza el componente. Angular añade soporte a

HTML para insertar valores dinámicamente que se actualizan automáticamente en el DOM tras un
cambio.

• Dependency Injection (Inyección de Dependencias): Facilita la declaración de dependencias

de las clases de TypeScript sin necesidad de instanciar las mismas, lo que permite escribir código
más flexible y testeable.

Estructura Típica de un Proyecto (Generada por )

• e2e: Contiene archivos para realizar pruebas automáticas (end to end).

• node_modules: Almacena todas las dependencias (bibliotecas y funciones).

• src: Directorio del código del proyecto (HTML, CSS, TypeScript, JavaScript), que incluye:

◦ app: Implementación de componentes, templates y archivos de estilo.

◦ assets: Archivos adicionales no vinculados a la programación (imágenes, videos).

◦ environments: Almacena archivos de configuración y variables de entorno.

◦ [Link]: Archivo de la página principal del proyecto.

PÁGINA 9: Comparación Práctica Front End (React vs. Vue)

Un experimento comparó React y Vue usando métricas de desempeño Web Vitals (LCP, FID) y el
desempeño de buenas prácticas.

Métricas Web Vitals

Métrica Definición

Largest Contentful Paint

Tiempo que usa la aplicación para mostrar el componente o contenido más g
(LCP)

First Input Delay (FID) Demora existente hasta el ingreso del primer input.

Best Practices Cumplimiento de buenas prácticas de programación.

Resultados Clave del Experimento (React vs. Vue)

1. Rendimiento General: El desempeño de las aplicaciones web implementadas usando React es
mejor que las desarrolladas con Vue. El rendimiento de React fue de 84.46 frente a 66.33 de Vue
(media de la métrica Performance).

2. FID (Tiempo de Interacción): React posee una ventaja considerable, con una media de 0.6183,
frente a 2.2667 de Vue. Un valor menor es mejor. Esto permitió rechazar la hipótesis nula y aceptar
que FID React < FID Vue.

3. LCP (Carga de Contenido): React también mostró una media inferior (2.4950) en comparación
con Vue (3.3792), permitiendo aceptar que LCP React < LCP Vue.

4. Best Practices: Quienes empezaron con Vue tuvieron un mejor uso de prácticas (media de
99.09) que quienes iniciaron con React (media de 92.61).

PÁGINA 10: Herramientas de Estilo: CSS Puro vs. TailwindCSS

El estilo es manejado por CSS, ya sea puro o mediante frameworks de utilidad.

Comparativa: CSS Puro y TailwindCSS

Característica CSS Puro TailwindCSS

Control/Dependencia Control total sobre la aplicación de estilos. Depende de herram

Velocidad de
Lento para modificar estilos comunes (márgenes o colores). Rapidez para proto
Desarrollo

Consistencia Requiere una arquitectura de estilos bien definida. Genera una escala

Uso en HTML HTML más limpio (se usan selectores CSS). El markup puede es

Recomendado para: Diseños visuales únicos y personalizados. Desarrollar interface

[Link] y la Metodología Declarativa

[Link] permite escribir código declarativo, similar a Vue o React, pero utiliza el DOM real en
lugar del DOM virtual.

• Ventaja: Permite al desarrollador mantener la metodología de programación declarativa, pero

elimina el gran tamaño del paquete y la alta carga cognitiva de frameworks más grandes.

• Instalación: Es fácil de instalar (basta con una etiqueta <script>) y no necesita bundler ni
proceso de construcción.

• Sintaxis: Su sintaxis está fuertemente inspirada en [Link]. El creador de [Link] a menudo se

refiere a esta biblioteca como "Tailwind para JS".

PÁGINA 11: Herramientas Auxiliares de JavaScript ([Link], NPM, NPX)

[Link] es fundamental para usar JavaScript en el Back End.

[Link]

Definición: [Link] es un entorno de ejecución (runtime environment) de un solo hilo, de código

abierto y multiplataforma, para crear aplicaciones de red y del lado del servidor.

• Función: Permite a los desarrolladores trabajar con JavaScript tanto en el front-end como en el
back-end.

• Arquitectura: Utiliza la arquitectura "Single Threaded Event Loop" (Bucle de Eventos de Hilo
Único) para gestionar solicitudes. Si una solicitud no requiere una operación de entrada/salida (E/S)
de bloqueo, la procesa y envía una respuesta. Si requiere E/S de bloqueo, asigna un hilo de un pool
de hilos internos (grupo de trabajadores) para procesar la solicitud.

• Ecosistema: Cuenta con una comunidad masiva de desarrolladores y un gran repositorio de

paquetes de código abierto.

NPM y NPX: El Ecosistema de Paquetes

NPM (Node Package Manager) y NPX son dos herramientas distintas que se instalan
automáticamente con [Link].

Característica NPM (Node Package Manager)

Función
Gestor de paquetes por defecto de [Link].
Principal

Uso Práctico Instalar, gestionar, actualizar y desinstalar paquetes o módulos. Ideal para la gestión perm

Entorno Puede acumular paquetes, generando conflictos entre versiones y ocupando espacio inne

PÁGINA 12: La Capa Back End: Fundamentos y Lógica

El Back End se encarga de la lógica y la funcionalidad del software.

Lógica de Comunicación y APIs

• Componentes: El Back End se compone de servidores, bases de datos, aplicaciones y API’s que
permiten la comunicación entre el cliente y el servidor.

• Back End/Front End Desacoplado: Aunque frameworks como Django o Flask pueden renderizar
plantillas y enviarlas al navegador sin necesidad de una API explícita, es común y preferido escribir
una API y usarla con un front-end separado (ej. usando Django REST Framework).

Lenguajes Comunes para Back End

La elección del lenguaje puede variar según los requisitos de rendimiento, seguridad y
escalabilidad. Entre los lenguajes evaluados están:

• Python: Lenguaje interpretado, por tanto, menos eficiente en términos de rendimiento en relación
con lenguajes compilados, pero es altamente escalable y utilizado en proyectos grandes y
complejos.

• JavaScript ([Link]): Lenguaje interpretado, se ejecuta en el entorno de ejecución de [Link] en

el servidor, y es altamente escalable.

• Java: Lenguaje con capacidad para manejar grandes volúmenes de datos y aplicaciones de alto
rendimiento. Alta escalabilidad y seguridad en el sistema de gestión de memoria.

• Kotlin: Destaca por su alto rendimiento y su enfoque en la seguridad y la nulidad, combinando

programación orientada a objetos y funcional. Es altamente escalable y tiene una aceptación del
76.40%.

PÁGINA 13: Comparativa Back End: C#/.NET Core vs. Java/Spring Boot

C#/.NET Core y Java/Spring Boot son stacks comunes y viables para el desarrollo back-end.

Felicidad del Desarrollador y Experiencia

• C# / [Link] Core: Es considerado por muchos desarrolladores como más agradable para
trabajar. .NET Core tiene una experiencia más integrada, y C# tiene características de calidad de
vida que Java carece. Microsoft proporciona una buena guía y herramientas afinadas. Es más fácil
de empezar, ya que el ecosistema Java tiene una curva de aprendizaje más pronunciada.

• Java / Spring Boot: Spring Boot se siente "torpe" en comparación con .NET. Algunos
desarrolladores afirman que Java carece del concepto de "felicidad del desarrollador". El
ecosistema de Java es muy robusto, y existe una biblioteca o tutorial para casi cualquier cosa que
se necesite hacer.

◦ Configuración: Spring es fácil de usar si se emplea IntelliJ Ultimate, pero sin esta herramienta
la experiencia de desarrollo no es tan buena.

Rendimiento y Velocidad

• C# / .NET Core: Conocido por su rendimiento bruto, un API get de "hello world" en C# es menos
de 1mb en tamaño de paquete, y el inicio es más rápido. .NET Core fue desarrollado y respaldado
por Microsoft.

• Java / Spring Boot: Un API de "hello world" en Spring Boot es de alrededor de 20mb, y el inicio
de la aplicación tarda unos segundos o al menos 1 segundo.

Oportunidades Laborales
Tanto Java como C# tienen una cantidad increíble de ofertas de trabajo en línea. Si el proyecto está
en el ecosistema de Microsoft y planea usar productos de Azure, .NET Core sería más apropiado.

PÁGINA 14: Otras Opciones Back End y Frameworks

Kotlin

Kotlin es un lenguaje de programación moderno que prioriza la seguridad y la nulidad.

• Aceptación: Tiene una aceptación del 76.40%.

• Frameworks: Spring Boot, Ktor y Micronaut son frameworks de Kotlin.

Framework
Rendimiento Usabilidad
Kotlin

Ktor Alto rendimiento y bajo consumo de recursos. Sintaxis clara y concisa.

Spring Boot Buen rendimiento, usado en aplicaciones empresariales. Fácil de usar y comprender deb

Micronaut Económico con los recursos y rápido de lanzar. Sistema basado en inyección, q

Recomendación: Se sugiere usar Spring Boot con Kotlin debido a su rendimiento y seguridad
para tratar la información.

PÁGINA 15: Bases de Datos: SQL vs. NoSQL (PostgreSQL, MySQL, MongoDB)

Las bases de datos gestionan y almacenan datos, lo cual es fundamental para el back-end.

Comparativa de Bases de Datos

Variable PostgreSQL (SQL)

Rendimient
Bueno para consultas complejas y análisis de datos. Permite procesamiento de solicitudes mas
o

Seguridad Seguridad robusta: cifrado, autenticación sólida y control de acceso avanzado.

Escalabilida
Escalabilidad vertical y horizontal (replicación y particionamiento).
d

Usabilidad Amplia comunidad, documentación y soporte.

Recomendación Específica: Se sugiere PostgreSQL para la información que requiere seguridad

debido a su robustez, cifrado, autenticación sólida y control de acceso avanzado. Es capaz de
gestionar configuraciones simples a avanzadas y permite el procesamiento de solicitudes masivas.

PÁGINA 16: Arquitecturas y Estilos Arquitectónicos

La arquitectura es indispensable para analizar, diseñar y definir el estilo que cubre las necesidades
de negocio (funcionales y no funcionales).

Tipos de Arquitectura (por nivel de detalle)

1. Arquitectura Empresarial: Detalle bajo, genericidad alta. Define las relaciones entre activos de
la empresa.

2. Arquitectura Solución: Detalle y genericidad medios. Define el diseño y la comunicación de

estructuras de alto nivel para guiar el desarrollo de soluciones integradas.

3. Arquitectura Software: Detalle alto, genericidad bajo. Define patrones de arquitectura, patrones
de diseño, estilo arquitectónico, datos y tecnologías a implementar.

Estilos Arquitectónicos

Un estilo arquitectónico establece un marco de referencia que clasifica atributos y características

que conforman las aplicaciones.

Estilo Descripción

Capas Divide la aplicación en capas (ej. presentación, reglas de negocio, acceso a datos).

Monolítico Consiste en crear una aplicación autosuficiente, agrupando todo lo relacionado con el sistem

Microservicios Consiste en crear pequeños componentes de software con una sola responsabilidad, sin im

Cliente-
Modelo de aplicación distribuida: un servidor (proveedor de servicios/recursos) es consumid
Servidor

PÁGINA 17: Buenas Prácticas y Calidad de Código (Clean Code)

La implementación de buenas prácticas proporciona un valor agregado al producto, ya que gran

parte del tiempo de un desarrollador se dedica a leer código.

Calidad de Software

La calidad de un proyecto de software es una compleja combinación de varios factores. Depende

de:

1. Proceso Eficaz: Un proceso de desarrollo que evita errores y resulta en un producto con la
menor cantidad de fallas.

2. Producto Útil: Un software que cumple con su propósito y las expectativas del usuario,
incluyendo requerimientos funcionales y no funcionales (usabilidad, portabilidad, accesibilidad).

3. Valor Agregado: Buscar mejoras y soluciones que vayan más allá de los requerimientos iniciales
del cliente.
El Código Limpio (Clean Code)

El Clean Code, atribuido a Robert Cecil Martin, es una filosofía que busca aplicar técnicas sencillas
para facilitar la lectura y escritura de código, haciéndolo intuitivo.

Principios de Clean Code

• KISS (Keep it simple stupid): Busca manejar una simplicidad en la estructura para reducir al
máximo la complejidad de lectura.

• DRY (Don’t repeat yourself): Evitar duplicar código, aconsejando refactorizar y generalizar para
reutilizarlo.

• Responsabilidad Única: Las funciones y clases deben ser creadas para seguir un único
propósito correctamente.

• Nombres con Sentido: La correcta definición de nombres (variables, funciones, clases, métodos)
es esencial para el entendimiento y evita documentación redundante.

• Funciones Reducidas: Lo ideal es que no sobrepasen las 20 líneas, evitando un anidamiento

excesivo.

PÁGINA 18: Patrones de Diseño: Creacionales (Cómo Crear Objetos)

Los patrones de diseño son soluciones a problemas que han comprobado su efectividad y son
reutilizables. Los creacionales buscan controlar la forma en que los objetos son creados,
implementando mecanismos que eviten su creación directa.

Pat Propósito (Según los ejemplos

Cuándo Usarlo Lógica General
rón del curso)

Fa
Cuando la creación de objetos
cto Crear objetos de diferentes tipos
depende de condiciones o tipos Implementa diferentes
ry (ej. Pizza, Sushi, Empanada) que
diferentes, y se quiere evitar tipos de una interfaz o
Me implementan una interfaz común
modificar el código base al clase base.
tho (Food).
agregar nuevas variables.
d

Crear familias de objetos

Ab
relacionados (ej.
str Cuando se necesita crear familias
ArgentinaPizza vs. Una fábrica abstraída
act de productos relacionados y se
JapanesePizza) que van a que puede ser de más
Fa quiere garantizar la compatibilidad
variar según un contexto (ej. de un tipo de fábrica.
cto de productos.
país), manteniendo el código
ry
limpio.
Bu
ild
Permite construir objetos Usa un objeto
er
complejos paso a paso utilizando Cuando un objeto tiene muchos Builder para
(C
una interfaz fluida (ej. configurar parámetros opcionales y quieres configurar el objeto de
on
Lasaña con tamaño y queso evitar constructores kilométricos. forma incremental
str
opcionales). antes de construirlo.
uct
or)

Cuando necesitas una única Comprueba si la

Asegura que solo exista una
instancia global (configurador, instancia ya existe; si
Sin única instancia global de una
logger, servicio compartido). no, la crea (y la
gle clase, proporcionando un punto
Advertencia: No abusar, ya que almacena
ton de acceso global (ej. un
puede convertirse en un God estáticamente), si sí,
ConfigManager).
Object. devuelve la existente.

PÁGINA 19: Patrones de Diseño: Estructurales (Estructura y Composición)

Los patrones estructurales se centran en cómo las clases se relacionan y componen para crear
estructuras flexibles.

Patr Propósito (Según los ejemplos

Cuándo Usarlo Lógica General
ón del curso)

Ad
Convertir la interfaz de un
apt Cuando necesitas integrar
servicio externo (ej. Adapta servicios externos
er sistemas con interfaces
StripeService con método para ser usados
(Ad incompatibles o migrar de un
makePayment) a una interfaz internamente, abstrayendo
apt proveedor a otro sin romper
interna ([Link]) que el la lógica subyacente.
ado el código.
cliente espera.
r)

Dec
Extender la funcionalidad de un
ora Cuando necesitas agregar Envuelve un objeto base
objeto de forma dinámica sin
tor funcionalidades extra a con decoradores que
modificar las clases base (ej.
(De objetos de manera flexible y añaden funcionalidad y/o
agregar CheeseDecorator o
cor dinámica, y quieres evitar una modifican propiedades
BaconDecorator a
ado explosión de subclases. (como el costo).
BasicFood).
r)

Fac Simplificar la interfaz de un Cuando se necesita Oculta un conjunto de

ade subsistema complejo (ej. ocultar simplificar la interacción con procesos complejos detrás
(Fa los servicios de Order, subsistemas muy complejos de una interfaz sencilla.
cha Payment y Delivery detrás de o se requiere una API más
da) un único método PlaceOrder). amigable para el front-end.

Co
mp Cuando se trabaja con
Permitir tratar objetos Los objetos compuestos
osit estructuras jerárquicas
individuales (SimpleFood) y contienen una colección de
e (menús, combos, carpetas) y
composiciones de objetos objetos simples, pero
(Co quieres manejar objetos
(Combo) de manera uniforme (ej. ambos implementan la
mp simples y compuestos de la
un menú jerárquico). misma interfaz base.
ues misma manera.
to)

Pro Cuando se necesita agregar Intercepta la petición,

Controlar el acceso a un objeto
xy lógica extra para acceder a verifica si la lógica extra es
subyacente, permitiendo agregar
(Ap un objeto o se quiere necesaria (ej. si el dato
lógica extra (ej. implementar
ode controlar el acceso a está en caché) y solo llama
caching para el
rad recursos costosos (recursos al objeto real si es
OrderHistory).
o) "estrella"). indispensable.

PÁGINA 20: Patrones de Diseño: Comportamiento (Interacción de Objetos)

Los patrones de comportamiento están relacionados con procedimientos y la asignación de

responsabilidad a los objetos, incluyendo patrones de comunicación.

Pa
Propósito (Según los ejemplos
tró Cuándo Usarlo Lógica General
del curso)
n

O
bs
er Define una dependencia de
El sujeto (OrderSubject)
ve uno a muchos (1:N): cuando
Cuando se necesita notificar a mantiene una lista de
r un sujeto cambia, todos los
varios objetos sobre cambios en observadores (Observer)
(O observadores son notificados
otro; ideal para eventos, sistemas y los recorre para ejecutar
bs (ej. notificar a Kitchen y
reactivos y gestión de estado. el método update en
er Delivery sobre un
cada uno.
va OrderSubject).
do
r)

St Define una familia de Cuando el algoritmo debe Un contexto

rat algoritmos, los encapsula y los cambiar de manera dinámica (ShippingContext)
eg hace intercambiables (ej. (diferentes cálculos, validaciones) recibe y utiliza una
y
(E calcular costo de envío usando o cuando se quiere evitar estrategia intercambiable
str DistanceShipping o condicionales gigantes (switch (ShippingStrategy)
at FreeShipping de manera o if anidado) para seleccionar para realizar una
eg dinámica). comportamientos. operación.
ia)

Co
m
m Un objeto
Encapsula una petición como
an Cuando necesitas implementar AddItemCommand
un objeto, permitiendo
d operaciones de contiene la lógica para
parametrizar solicitudes y
(C rehacer/deshacer, o cuando ejecutar (execute) la
soportar operaciones de
o quieres parametrizar acciones y acción (agregar un ítem a
deshacer/rehacer
m mantener logs de operaciones. la orden) y la lógica para
(undo/redo).
an deshacer (undo).
do
)

St El contexto de la orden
Permite que un objeto cambie
at Cuando el comportamiento de un (OrderContext) delega
su comportamiento cuando
e objeto depende de su estado y su comportamiento a su
cambia su estado interno (ej.
(E quieres evitar condicionales objeto de estado actual, y
una orden cambia de
st gigantes para gestionar el objeto de estado define
NewOrder a CookingOrder
ad transiciones. cuál será el siguiente
a DeliveryOrder).
o) estado.

Ch
ai
Permite pasar una petición a lo
n
largo de una cadena de Cuando una petición debe ser Cada manejador decide si
of
manejadores hasta que uno la procesada por una cadena de procesa la petición o si la
Re
procesa (ej. validaciones validaciones y filtros, o cuando pasa al siguiente
sp
secuenciales como quieres desacoplar los pasos de manejador de la cadena, o
on
StockValidation y procesamiento. la detiene.
si
PaymentValidation).
bil
ity

--------------------------------------------------------------------------------
PÁGINA 21: El Estándar del Diseño Full Stack: Primero, la Arquitectura

En el desarrollo Full Stack, el primer paso esencial es definir la Arquitectura del Software. Una
arquitectura definida proporciona una base con estándares y buenas prácticas para el equipo de
desarrollo.

Guía de Diseño: El Proceso Estándar (Modelo Iterativo)

El diseño arquitectónico no se considera una secuencia rígida de actividades, sino un conjunto de

decisiones a tomar. Las metodologías ágiles, como XP (Programación Extrema), promueven
ciclos de desarrollo cortos (iteraciones). Cada iteración de XP comprende un ciclo completo de
análisis, diseño, desarrollo y pruebas.

1. Análisis de Necesidades y Requerimientos:

◦ Comprender las necesidades de negocio y los atributos de calidad del software.

◦ Identificar requisitos funcionales (qué debe hacer) y no funcionales (cómo debe operar,
incluyendo usabilidad, escalabilidad, seguridad).

◦ Las historias de usuario se usan para la planificación y la descomposición de las necesidades

en versiones pequeñas.

2. Definición de la Arquitectura (El "Cómo"):

◦ La arquitectura establece el marco de referencia y clasifica los atributos y características de la

aplicación.

◦ Se elige el estilo arquitectónico (Capas, Monolítico, Microservicios, Cliente-Servidor).

◦ Una arquitectura de solución define el diseño y la comunicación de estructuras de alto nivel.

3. Diseño Iterativo (Implementación):

◦ La fase de Diseño inicial debe enfocarse en hacer lo mínimo necesario para que funcione y
obtener un prototipo.

◦ En un ciclo iterativo (XP), la secuencia es análisis, diseño, codificación, pruebas y lanzamiento.

◦ Comúnmente, se recomienda primero modelar la Base de Datos (definiendo la integridad de

los datos) y la lógica del servidor (Back End), y luego se implementa el Front End para consumir
esa lógica.

PÁGINA 22: Estructura de un Proyecto Full Stack y Arquitecturas

El diseño del Full Stack se centra en la integración de sus componentes principales (Datos, Lógica,
Interfaz).
Diseño de la Capa de Datos (Base de Datos)

• Integridad y Seguridad: La elección de la base de datos (PostgreSQL o MongoDB) debe

garantizar la seguridad y la integridad de los datos. PostgreSQL destaca por su control de
acceso avanzado.

• Escalabilidad: Se determina si se requiere escalabilidad vertical (PostgreSQL) o escalabilidad

horizontal nativa (MongoDB).

Diseño del Back End (Lógica y API)

El Back End se encarga de la lógica y la funcionalidad del software.

• Lógica Desacoplada: Es una práctica común y recomendada escribir una API para desacoplar el
Back End del Front End.

• Selección de Lenguaje: La elección debe considerar el rendimiento, la escalabilidad y la

usabilidad. Por ejemplo, Kotlin (usado con Spring Boot o Ktor) destaca por su alto rendimiento,
seguridad y facilidad de implementación.

• Arquitectura Común: En una arquitectura en Capas, el servidor se divide en presentación, reglas

de negocio/servicios y acceso a datos.

Diseño del Front End (Interfaz y Experiencia)

El Front End es la parte con la que el usuario interactúa.

• Tecnologías: HTML, CSS y JavaScript son la base. Se utilizan frameworks como NextJS (que
renderiza del lado del servidor para un mejor rendimiento), React, o Vue.

• Consistencia Visual: El uso de frameworks de utilidad o componentes Front End se diseña para
seguir una escala visual común y prototipar rápidamente.

• Seguridad: El Front End debe seguir buenas prácticas de seguridad para prevenir ataques y la
inyección de código malicioso, asegurando una comunicación segura con el Back End.

PÁGINA 23: Mejores Prácticas Esenciales y Estandarización

La aplicación de estándares y buenas prácticas al momento de diseñar y escribir código es

importante para la mantenibilidad y escalabilidad del producto.

1. Prácticas de Proceso y Metodología

• Metodologías Ágiles: Se sugiere implementar marcos de trabajo como SCRUM o XP

(Programación Extrema). XP es flexible a contratiempos, se centra en la comunicación continua
con el cliente, y mide el éxito por los requisitos del cliente y el trabajo del equipo.
• DevOps: Se apoya en herramientas para automatizar procesos como tests automatizados,
integración continua, y despliegue continuo (CI/CD). El uso de herramientas beneficia los tiempos
de desarrollo y la calidad de los entregables.

2. Prácticas de Calidad de Código (Clean Code)

La adopción de estándares en la escritura de código, como las reglas de Clean Code, hace que las
aplicaciones sean más simples de leer y entender, beneficiando la mantenibilidad.

Principio de Clean
Objetivo y Detalle
Code

KISS Busca manejar la simplicidad en la estructura para reducir al máximo la complejidad

DRY Evitar duplicar código, promoviendo la refactorización y generalización.

Responsabilidad
Mantener clases y funciones pequeñas y bien organizadas que cumplan un único pr
Única

Tratamiento de
La separación lógica del manejo de errores del negocio mantiene el código limpi
Errores

Funciones Deben ser reducidas (idealmente no sobrepasar las 20 líneas), y el código debe seg

Clases Deben estar abiertas para la extensión y cerradas para su modificación (Principi

3. Prácticas de Seguridad y Diseño

• Codificación Segura: La forma más eficiente y eficaz de mejorar la seguridad es integrarla en el

proceso de desarrollo desde el principio. Esto permite detectar configuraciones de seguridad
incorrectas u otros errores en una etapa temprana.

• APIs y Seguridad: Las API deben ser protegidas, y el Front End debe seguir buenas prácticas de
seguridad para prevenir la inyección de código malicioso.

• Software Actualizado: Asegurarse de verificar periódicamente si hay actualizaciones y parches

para todos los componentes, incluido el servidor web, el sistema operativo, la base de datos y las
bibliotecas de terceros.

• Patrones de Diseño: La identificación y aplicación de patrones de diseño (soluciones a

problemas probadas) es una buena práctica y guía en la construcción de software.