DEV Community: Sebastian Noguera

El patrón de diseño Builder: un enfoque práctico para construir objetos complejos

Sebastian Noguera — Sun, 07 Jan 2024 16:23:31 +0000

Este post forma parte de una serie en la que estaremos desglosando uno por uno los distintos patrones de diseño de manera teórica en un blog post. Además, subiré la explicación práctica a mi canal de YouTube. ¡No olvides seguirme para no perderte este interesante contenido! 😁

En el mundo de la programación orientada a objetos, es común tener que crear objetos complejos. Estos objetos pueden tener una gran cantidad de propiedades y atributos, y su construcción puede ser un proceso tedioso y repetitivo.

Para simplificar este proceso, podemos utilizar el patrón de diseño Builder. Este patrón nos permite construir objetos paso a paso, de forma que podamos controlar cada detalle de su creación.

¿Qué es el patrón de diseño Builder?

El patrón de diseño Builder es un patrón de creación que permite construir objetos de forma sencilla y organizada. Este patrón se utiliza cuando tenemos una clase con una gran cantidad de parámetros, y queremos crear una interfaz clara para construir objetos de esa clase.

El patrón de diseño Builder tiene dos clases principales:

Producto: Esta clase representa el objeto que queremos construir.
Builder: Esta clase es la encargada de construir el objeto.

El objeto Builder tiene una serie de métodos que nos permiten configurar las propiedades del objeto Producto. Por ejemplo, si queremos construir una pizza, el objeto Builder podría tener métodos para configurar el tamaño de la pizza, el tipo de masa, los ingredientes y el precio.

Una vez que hemos configurado todas las propiedades del objeto Producto, podemos utilizar el método build() del objeto Builder para obtener el objeto completamente construido.

Ventajas del patrón de diseño Builder

El patrón de diseño Builder tiene una serie de ventajas, entre las que destacan:

Simplifica la construcción de objetos. El patrón de diseño Builder nos permite construir objetos paso a paso, de forma que podamos controlar cada detalle de su creación.
Permite la construcción de diferentes representaciones de un mismo objeto. El patrón de diseño Builder nos permite crear diferentes representaciones de un mismo objeto, simplemente creando diferentes subclases de la clase Builder.
Mejora la legibilidad y mantenibilidad del código. El patrón de diseño Builder hace que el código sea más legible y mantenible, ya que separa el proceso de construcción del objeto de la clase que representa el objeto.

Implementación del patrón de diseño Builder en JavaScript

Para implementar el patrón de diseño Builder en JavaScript, podemos utilizar la siguiente estructura:

// Clase Producto
class Pizza {
  constructor(size, crust, ingredients, price) {
    this.size = size;
    this.crust = crust;
    this.ingredients = ingredients;
    this.price = price;
  }
}

// Clase Builder
class PizzaBuilder {
  constructor() {
    this.pizza = new Pizza();
  }

  setSize(size) {
    this.pizza.size = size;
    return this;
  }

  setCrust(crust) {
    this.pizza.crust = crust;
    return this;
  }

  setIngredients(ingredients) {
    this.pizza.ingredients = ingredients;
    return this;
  }

  setPrice(price) {
    this.pizza.price = price;
    return this;
  }

  build() {
    return this.pizza;
  }
}

// Ejemplo de uso
const pizzaBuilder = new PizzaBuilder();

pizzaBuilder
  .setSize("large")
  .setCrust("thin")
  .setIngredients(["cheese", "pepperoni", "sausage"])
  .setPrice(15.99);

const pizza = pizzaBuilder.build();

En este ejemplo, la clase Pizza representa el objeto complejo que queremos construir. La clase PizzaBuilder es la encargada de construir el objeto Pizza.

El método setSize() permite configurar el tamaño de la pizza. El método setCrust() permite configurar el tipo de masa. El método setIngredients() permite configurar los ingredientes. El método setPrice() permite configurar el precio.

El método build() devuelve el objeto Pizza completamente construido.

Conclusiones

El patrón de diseño Builder es una herramienta útil que nos permite simplificar la construcción de objetos complejos. Este patrón es especialmente útil cuando tenemos que construir objetos con una gran cantidad de propiedades y atributos.

En el caso del frontend con JavaScript, el patrón de diseño Builder puede ser utilizado para construir objetos complejos como formularios, componentes UI o

😁 Si este post te ha gustado, puedes seguirme en mi canal de YouTube en el cual subo contenido relacionado a la programación 🐢

Patrón Proxy: Una introducción teórica

Sebastian Noguera — Tue, 02 Jan 2024 11:43:59 +0000

En el desarrollo de software, el patrón Proxy es un patrón de diseño que proporciona un objeto intermediario para controlar el acceso a otro objeto. El objetivo principal del Proxy es agregar una capa adicional de indirección y control sobre una funcionalidad existente.

El Proxy actúa como un sustituto o representante del objeto real, permitiendo controlar el acceso a dicho objeto y agregar funcionalidades adicionales si es necesario. Esto puede ser útil en situaciones donde se requiere una validación previa, un manejo de caché o una restricción en el acceso a ciertos recursos.

Estructura del patrón Proxy

El patrón Proxy se compone de los siguientes elementos:

Sujeto: Es la interfaz común que define tanto al Sujeto Real como al Proxy. Define las operaciones que el Proxy puede realizar en nombre del Sujeto Real.
Sujeto Real: Es el objeto real al cual el Proxy proporciona acceso controlado. Contiene la implementación concreta de las operaciones definidas en el Sujeto.
Proxy: Es el objeto intermediario que implementa la misma interfaz que el Sujeto Real. Controla el acceso al Sujeto Real y puede realizar tareas adicionales antes o después de llamar al Sujeto Real.

Aplicabilidad del patrón Proxy

El patrón Proxy es aplicable en diversas situaciones, tales como:

Control de acceso: El Proxy puede verificar y autorizar el acceso a un objeto antes de permitir que se realice una operación.
Carga diferida (Lazy loading): El Proxy puede retrasar la creación o carga de un objeto hasta que sea realmente necesario, mejorando así el rendimiento.
Caché: El Proxy puede almacenar en caché los resultados de operaciones costosas y devolverlos directamente en futuras solicitudes.
Logging: El Proxy puede agregar registros o realizar un seguimiento detallado de las operaciones realizadas en el Sujeto Real.

Cuando NO utilizar el patrón Proxy

El patrón de diseño Proxy no es adecuado para todos los casos. A continuación, se muestran algunos escenarios en los que no se debe utilizar el patrón Proxy:

Cuando el rendimiento es un problema: El proxy puede agregar una capa adicional de indirección, lo que puede afectar al rendimiento de la aplicación.
Cuando el objeto real es simple: Si el objeto real es simple, no es necesario utilizar un proxy.
Cuando el proxy no proporciona ninguna funcionalidad adicional: Si el proxy no proporciona ninguna funcionalidad adicional, no es necesario utilizarlo

😁 Si este post te ha gustado, puedes seguirme en mi canal de YouTube en el cual subo contenido relacionado a la programación 🐢

Patrones de diseño creacionales!?!?

Sebastian Noguera — Sat, 28 Oct 2023 12:46:28 +0000

¡Descubre los Patrones de Diseño Creacionales para una Programación Eficiente y Flexible!

En el mundo del desarrollo de software, los patrones de diseño creacionales son una herramienta invaluable para crear objetos de manera eficiente y flexible. Estos patrones brindan soluciones a problemas comunes en el diseño de aplicaciones y nos permiten construir sistemas más robustos y escalables.

Aquí te explicaré 3 de los patrones de diseño más destacados.

El patrón de diseño Singleton se utiliza para garantizar que solo exista una única instancia de una clase en todo el sistema. Este patrón es útil cuando queremos tener acceso a un objeto compartido desde diferentes partes de una aplicación y asegurarnos de que siempre esté disponible.

En una aplicación web con JavaScript, el patrón Singleton podría ser utilizado en diferentes escenarios. Por ejemplo, en una aplicación de carrito de compras, podríamos utilizar el patrón Singleton para crear una instancia única de la clase "Carrito" que almacene los productos seleccionados por el usuario. De esta manera, podemos acceder al carrito desde diferentes páginas o componentes de la aplicación y garantizar que siempre esté actualizado.

Otro caso de uso real podría ser en una aplicación de chat en tiempo real. Podríamos utilizar el patrón Singleton para crear una instancia única de la clase "ChatManager" que maneje la conexión con el servidor de chat y almacene los mensajes recibidos. De esta manera, podemos acceder al chat desde diferentes partes de la aplicación y asegurarnos de que todos los usuarios vean los mismos mensajes.

Otro patrón creacional popular es el patrón "Factory Method". Este patrón puede ser utilizado en diferentes escenarios. Por ejemplo, en un sistema de gestión de usuarios, podríamos tener diferentes tipos de usuarios (administrador, cliente, invitado) y cada uno de ellos requeriría una lógica de creación y configuración específica. Implementar el patrón Factory Method nos permitiría tener una fábrica de usuarios que se encargue de crear las instancias adecuadas según el tipo de usuario solicitado.

Otro caso de uso real podría ser en un sistema de generación de informes. Podríamos tener diferentes tipos de informes (PDF, Excel, HTML) y cada uno de ellos requeriría una lógica de creación y generación específica. Implementar el patrón Factory Method nos permitiría tener una fábrica de informes que se encargue de crear las instancias adecuadas según el tipo de informe solicitado.

Un patrón creacional muy útil es el patrón "Abstract Factory". Este patrón se utiliza para crear familias de objetos relacionados sin especificar sus clases concretas. Proporciona una interfaz común para crear diferentes tipos de objetos, pero delega la responsabilidad de la creación de objetos concretos a las subclases.

En una aplicación web con JavaScript, un caso de uso real para el patrón Abstract Factory podría ser en un sistema de comercio electrónico. Imagina que tienes diferentes tipos de productos, como ropa, electrónicos y muebles, y cada tipo de producto tiene diferentes variantes y características. Implementar el patrón Abstract Factory te permitiría crear una fábrica de productos que se encargue de crear instancias de los diferentes tipos de productos de manera coherente y sin tener que preocuparte por los detalles de implementación de cada producto.

Por ejemplo, podrías tener una fábrica de productos llamada "ProductFactory" que tenga métodos como "createClothingProduct()", "createElectronicsProduct()" y "createFurnitureProduct()". Cada uno de estos métodos se encargaría de crear instancias de los productos correspondientes, como "ClothingProduct", "ElectronicsProduct" y "FurnitureProduct", respectivamente. De esta manera, puedes utilizar la fábrica de productos para crear objetos de diferentes tipos sin tener que preocuparte por la lógica de creación específica de cada producto.

En conclusión, los patrones de diseño son herramientas, que nos permiten abordar y dimensionar de una manera diferente los problemas lógicos que nos podemos encontrar a la hora de desarrollar una aplicación, además nos pueden ayudar a sentar las bases para resolver problemas más complejos o diseñar soluciones más eficientes.

Espero que este blog post haya sido entretenido, dinámico e interesante para ti, y que hayas podido comprender la importancia y utilidad de los patrones de diseño creacionales. Si tienes alguna pregunta adicional o si hay algo más en lo que pueda ayudarte, déjalo en los comentarios y te responderé lo más rápido posible.

😁 Si este post te ha gustado, puedes seguirme en mi canal de YouTube en el cual subo contenido relacionado a la programación 🐢

Los Static Site Generators. HTML y CSS Vanilla?!

Sebastian Noguera — Thu, 28 Sep 2023 20:23:47 +0000

Un Static Site Generator es una herramienta que permite generar sitios web estáticos a partir de contenido y plantillas predefinidas. A diferencia de los CMS tradicionales, que generan el contenido de forma dinámica en el momento de la solicitud, los Static Site Generators generan el sitio web completo de antemano y solo requieren servir los archivos estáticos al cliente.

La principal ventaja de utilizar un Static Site Generator es la mejora en el rendimiento y la velocidad de carga del sitio web. Al generar el sitio estático de antemano, se eliminan los tiempos de procesamiento en el servidor y se reduce la cantidad de solicitudes al mismo. Esto se traduce en tiempos de carga más rápidos, lo que mejora la experiencia del usuario y puede tener un impacto positivo en los rankings de búsqueda.

Además del rendimiento, los Static Site Generators ofrecen otras ventajas. La simplicidad en el desarrollo es una de ellas. Al emplear plantillas y contenido predefinidos, los desarrolladores pueden centrarse en la estructura y el diseño del sitio web sin preocuparse por la generación de contenido dinámico. También se facilita la implementación y el despliegue del sitio web, ya que solo se requiere servir archivos estáticos, lo que permite usar servicios de hosting más simples y económicos.

Sin embargo, los Static Site Generators también presentan algunas limitaciones. Al generar el sitio web de antemano, cualquier cambio en el contenido requiere regenerar todo el sitio, lo que puede ser un proceso lento y costoso en términos de recursos. Además, si se requiere funcionalidad dinámica, como formularios interactivos o autenticación de usuarios, es posible que los Static Site Generators no sean la mejor opción.

La historia de los Static Site Generators se remonta a principios de la década de 2000, cuando surgieron los primeros generadores estáticos, como Jekyll. A medida que las tecnologías web evolucionaron, también lo hicieron los Static Site Generators, con la incorporación de características como la generación incremental y la capacidad de trabajar con múltiples lenguajes de programación y frameworks.

En cuanto a los casos de uso recomendados, los Static Site Generators son ideales para sitios web con contenido principalmente estático, como blogs, páginas de documentación y sitios de comercio electrónico con un catálogo estable. También son una excelente opción para proyectos con un enfoque en el rendimiento y la seguridad, ya que al servir solo archivos estáticos, se reduce la superficie de ataque y se minimiza el riesgo de vulnerabilidades.

En resumen, los Static Site Generators son herramientas poderosas que ofrecen ventajas significativas en términos de rendimiento, simplicidad de desarrollo y despliegue. Si tienes un proyecto con contenido principalmente estático y deseas optimizar la velocidad de carga y la experiencia del usuario, un Static Site Generator puede ser la elección adecuada para ti.

El Renderizado Híbrido. Una técnica revolucionaria para la web

Sebastian Noguera — Mon, 25 Sep 2023 13:52:10 +0000

El renderizado híbrido es una técnica innovadora que combina el renderizado del lado del servidor (Server-Side Rendering, SSR) y el renderizado del lado del cliente (Client-Side Rendering, CSR) para mejorar el rendimiento y la experiencia del usuario en la web. En este blog post, exploraremos las estadísticas reales de esta técnica, sus ventajas y desventajas, su historia y cuándo y por qué se debe utilizar.

El renderizado híbrido es una respuesta a los desafíos que enfrentan los desarrolladores web al intentar equilibrar la carga de trabajo entre el servidor y el cliente. Antes de esta técnica, los sitios web solían emplear exclusivamente el renderizado del lado del servidor, lo que significaba que cada vez que un usuario visitaba una página, el servidor generaba el HTML completo y lo enviaba al cliente. Si bien esto permitía una carga inicial rápida, las actualizaciones de la página requerían recargar todo el contenido, lo que resultaba en una experiencia lenta y poco interactiva.

Con la introducción del renderizado del lado del cliente, los desarrolladores pudieron mejorar la experiencia del usuario al permitir interacciones más rápidas y dinámicas. Sin embargo, esto también significó que el cliente tenía que esperar a que el JavaScript se cargara y ejecutara antes de que pudiera mostrar el contenido, lo que resultaba en una carga inicial más lenta.

Aquí es donde entra en juego el renderizado híbrido. Esta técnica usa el renderizado del lado del servidor para generar el HTML inicial y enviarlo al cliente, lo que garantiza una carga rápida y una experiencia de usuario inmediata. Una vez que el HTML se ha cargado, el JavaScript del lado del cliente se encarga de actualizar y renderizar cualquier cambio adicional en la página, lo que permite una interacción fluida y dinámica.

Las estadísticas muestran que el renderizado híbrido puede mejorar significativamente el rendimiento de un sitio web. Los tiempos de carga se reducen, lo que resulta en una experiencia de usuario más satisfactoria.

Sin embargo, como cualquier técnica, el renderizado híbrido también tiene sus desventajas. El uso de esta técnica puede aumentar la complejidad del desarrollo web, ya que los desarrolladores deben manejar tanto el renderizado del lado del servidor como el del lado del cliente. Además, el renderizado híbrido puede no ser adecuado para todos los casos de uso. Sitios web con contenido altamente interactivo y dinámico pueden beneficiarse más del renderizado del lado del cliente puro, mientras que los sitios web más estáticos pueden encontrar ventajas en el renderizado del lado del servidor.

La historia del renderizado híbrido se remonta a los últimos años, con la evolución de las tecnologías web y el aumento de la demanda de experiencias de usuario más rápidas y fluidas. A medida que los desarrolladores buscaban soluciones para mejorar el rendimiento de sus sitios web, surgió la idea de combinar el renderizado del lado del servidor y el del lado del cliente, lo que dio lugar al renderizado híbrido.

En resumen, el renderizado híbrido es una técnica prometedora que combina lo mejor de ambos mundos: la carga rápida del renderizado del lado del servidor y la interactividad del renderizado del lado del cliente. Si bien tiene sus pros y contras, es una opción a considerar para aquellos que buscan mejorar el rendimiento y la experiencia del usuario en la web.

Server Side Rendering (SSR). ¿PHP salvando el día?

Sebastian Noguera — Tue, 12 Sep 2023 15:04:33 +0000

Server Side Rendering (SSR): Una mirada a sus estadísticas y su historia

El Server Side Rendering (SSR) se ha convertido en una técnica popular en el desarrollo web, ofreciendo beneficios en términos de rendimiento, SEO y experiencia de usuario. En este blog post, exploraremos las estadísticas reales relacionadas con el SSR, sus pros y contras, su historia y en qué casos se debe utilizar y por qué. Además, proporcionaremos una explicación detallada de su funcionamiento y citaremos las fuentes de las estadísticas mencionadas.

¿Qué es el Server Side Rendering (SSR)?

El Server Side Rendering es una técnica en la cual el servidor genera el HTML completo de una página web y lo envía al navegador del usuario. A diferencia del Client Side Rendering (CSR), donde el navegador descarga el código JavaScript y luego renderiza la página, el SSR proporciona una versión completamente renderizada desde el servidor.

Estadísticas sobre Server Side Rendering

Según un estudio realizado por Akamai, el 53% de los usuarios móviles abandonan un sitio web si tarda más de 3 segundos en cargarse. La implementación del SSR puede reducir significativamente el tiempo de renderizado inicial, lo que ayuda a retener a los usuarios y disminuir las tasas de rebote.
Un caso de estudio realizado por Airbnb mostró que la implementación del Server Side Rendering resultó en una reducción del 50% en el tiempo de interacción y un aumento del 30% en las tasas de conversión. Esto resalta el impacto positivo del SSR en la participación de los usuarios y en las métricas comerciales.
En un estudio realizado por Google, se encontró que los sitios web que adoptaron el SSR experimentaron una mejora del 20% en el tiempo de pintado significativo inicial en comparación con los enfoques de Client Side Rendering (CSR). Este menor tiempo de carga puede llevar a una mayor satisfacción del usuario y un mayor compromiso.
Según BuiltWith, hasta septiembre de 2023, aproximadamente el 15% de los 10,000 sitios web más importantes a nivel mundial están utilizando el Server Side Rendering. Esto indica la amplia adopción y reconocimiento del SSR como una técnica efectiva en la industria.
Netflix, una plataforma de transmisión popular, implementó el Server Side Rendering para mejorar el rendimiento de su sitio web. Informaron una reducción del 50% en el tiempo de interacción y un aumento en las métricas de participación de los usuarios, lo que resultó en una mejor experiencia de transmisión para sus usuarios.
Según un caso de estudio realizado por Walmart, la implementación del Server Side Rendering resultó en una mejora del 67% en el tiempo de respuesta inicial y un 50% en el tiempo de interacción. Esto demuestra el impacto positivo del SSR en el rendimiento del sitio web y la experiencia del usuario.

Pros y contras del Server Side Rendering

El Server Side Rendering ofrece varios beneficios, como:

Mejor SEO: Al proporcionar contenido renderizado desde el servidor, el SSR mejora la indexación y el posicionamiento en los motores de búsqueda.
Mayor rendimiento inicial: El SSR reduce el tiempo de carga inicial, lo que resulta en una experiencia más rápida para los usuarios.
Mejor accesibilidad: Al generar HTML completo en el servidor, el SSR garantiza que el contenido sea accesible incluso para aquellos usuarios que no tienen JavaScript habilitado en su navegador.

Sin embargo, el SSR también presenta algunas desventajas, como:

Mayor carga en el servidor: El SSR requiere que el servidor genere el HTML completo para cada solicitud, lo que puede aumentar la carga en el servidor en comparación con el CSR.
Limitaciones en la interactividad: Debido a que el SSR renderiza la página completa en el servidor, las interacciones que dependen de JavaScript pueden ser más limitadas.

Historia del Server Side Rendering

El Server Side Rendering ha estado presente en el desarrollo web durante muchos años. Antes de la popularización de JavaScript, la mayoría de los sitios web se renderizaban en el servidor. Con la creciente demanda de aplicaciones web más interactivas y dinámicas, surgió el enfoque de Client Side Rendering (CSR), donde el navegador se encarga de renderizar la página utilizando JavaScript.

Sin embargo, a medida que las aplicaciones web crecieron en complejidad, el CSR presentó desafíos en términos de rendimiento y SEO. Esto llevó a un resurgimiento del Server Side Rendering, ya que proporcionaba una solución para mejorar la velocidad de carga, la indexación y la experiencia de usuario.

En resumen, el Server Side Rendering ha demostrado ser una técnica efectiva para mejorar el rendimiento, el SEO y la experiencia de usuario en el desarrollo web. Aunque tiene sus pros y contras, su adopción sigue creciendo en la industria debido a los beneficios que ofrece.

Client Side Rendering (CSR). ¿ReactJS es lento?

Sebastian Noguera — Mon, 28 Aug 2023 20:48:24 +0000

Para iniciar te recomiendo que leas mi Post anterior
en el que tendrás un poco más de contexto acerca del CSR y las otras estrategias de rendering.

Ahora sí, para comenzar, hay que hablar desde el inicio, de donde nace el CSR y por qué?

El CSR (Client Side Rendering) se originó como un enfoque de renderizado de aplicaciones web en el lado del cliente. Este enfoque comenzó a utilizarse ampliamente en el desarrollo web a medida que las aplicaciones web se volvieron más interactivas y dinámicas.

El CSR se popularizó en gran medida gracias al avance de las tecnologías JavaScript y los frameworks de desarrollo web como Angular, React y Vue.js. Estas tecnologías permiten que la lógica del cliente se ejecute en el navegador web del usuario, lo que significa que la renderización de la interfaz de usuario y la manipulación de datos se realizan en el lado del cliente.

El objetivo principal del CSR es mejorar la experiencia del usuario al cargar y usar una aplicación web. Al renderizar la interfaz de usuario en el lado del cliente, se pueden lograr interacciones más rápidas y fluidas, ya que no es necesario ejecutar solicitudes al servidor para obtener nuevas páginas o datos. En lugar de eso, la aplicación web se carga en su totalidad en el navegador y las actualizaciones posteriores se efectúan en el cliente.

Sin embargo, el CSR también tiene algunas desventajas. Debido a que la renderización se lleva a cabo en el lado del cliente, es posible que los usuarios tengan una experiencia inicial más lenta, ya que deben descargar todo el código de la aplicación antes de que esta se pueda cargar y ejecutar. Además, el CSR puede presentar desafíos en términos de SEO (Optimización para Motores de Búsqueda), puesto que los motores de búsqueda pueden tener dificultades para indexar y rastrear el contenido generado dinámicamente.

Datos

En cuanto a las estadísticas, se ha demostrado que el CSR puede mejorar significativamente la experiencia del usuario. Según un estudio de Akamai, una empresa líder en servicios de distribución de contenido, la demora en la interacción de los usuarios se reduce en un 10% con el CSR en comparación con el server side rendering (SSR). Además, un informe de Google indicó que el CSR puede reducir el tiempo de renderizado en un 30% en comparación con el SSR.

Las empresas líderes en tecnología, como Facebook y Airbnb, han adoptado el CSR en sus aplicaciones web para mejorar el rendimiento y la experiencia del usuario. Además, frameworks populares como React y Angular brindan soporte para el CSR.

Conclusión

En resumen, el CSR (Client Side Rendering) nació como una solución para mejorar la experiencia del usuario en aplicaciones web al realizar la renderización en el lado del cliente. Este enfoque se ha vuelto popular gracias a las tecnologías JavaScript y los frameworks de desarrollo web, y tiene como objetivo proporcionar interacciones rápidas y fluidas. Sin embargo, también presenta desafíos en términos de rendimiento inicial y SEO.

Renderizados en la Web. ¿Para qué sirven?

Sebastian Noguera — Wed, 16 Aug 2023 12:15:07 +0000

DISCLAIMER: Este post es solo para ofrecer un poco más de contexto sobre cada una de estas arquitecturas. Iré subiendo nuevos posts donde hablaré detalladamente sobre cada una.

Ahora hecho el disclaimer entremos en materia. Los sitios webs como tal han ido evolucionando con el tiempo, al igual que cualquier tecnología. Pero la forma de desarrollo y características de estos han obligado a crear y desechar herramientas y formas de hacer las cosas.

Los sistemas de renderizado web, como su nombre indica, son sistemas de renderizado. Y me preguntarán.

¿Qué es el renderizado?

“Renderizar” es un término que se utiliza en la jerga informática, para referirse al proceso en el que se hace una representación gráfica creada a través de un software

Esto suena muy elaborado y complejo, cambiando un poco las palabras podemos decir que el renderizado va a ser la forma en la que mostraremos nuestro sitio web en el navegador del usuario. Si con esto aún no te queda claro el concepto de renderizado, a medida que vayamos explicando cada uno de los tipos los iras entendiendo.

Renderizado en el lado del servidor (SSR)

El renderizado en el lado del servidor (SSR) es una técnica en la cual el servidor genera el HTML completo de una página web y lo envía al navegador. Esta estrategia tiene como objetivo mejorar la velocidad de carga de la página, ya que el usuario recibe un HTML ya renderizado y listo para mostrar. El SSR es especialmente útil en aplicaciones que requieren una rápida visualización de contenido, puesto que reduce el tiempo necesario para descargar, analizar y renderizar el HTML en el cliente.

Aunque el SSR ofrece beneficios en términos de velocidad de carga, puede resultar más complejo de implementar en comparación con otras formas de renderizado. Además, no es la mejor opción para aplicaciones web complejas que necesitan una interacción en tiempo real constante.

Renderizado en el lado del cliente (CSR)

El renderizado en el lado del cliente (CSR) implica que el navegador descarga el HTML, CSS y JavaScript necesarios para renderizar y mostrar la página. Esta técnica permite una mayor interactividad en tiempo real, ya que los datos pueden ser cargados y actualizados sin necesidad de recargar la página completa. El CSR es ideal para aplicaciones web que requieren una experiencia de usuario altamente interactiva.

Sin embargo, el CSR puede ser más lento en la carga inicial, pues el navegador necesita descargar y procesar todo el código antes de poder renderizar la página. Esto puede resultar en una breve demora antes de que el contenido sea visible para el usuario.

Renderizado híbrido

El renderizado híbrido es una combinación de las ventajas del SSR y el CSR. En este enfoque, el servidor genera el HTML inicial y lo envía al navegador, mientras que el cliente continúa renderizando y actualizando la página a medida que se cargan los datos adicionales. Esta estrategia es especialmente útil para aplicaciones web complejas que requieren una gran cantidad de interacciones en tiempo real, pero también necesitan una respuesta rápida en la carga inicial.

El renderizado híbrido, al combinar lo mejor de ambos mundos, ofrece una experiencia de usuario más fluida y rápida en comparación con el SSR o el CSR por sí solos. Permite que la página se cargue rápidamente y al mismo tiempo brinda la capacidad de actualización y carga de datos en tiempo real.

Generador de sitios estáticos (SSG)

Un generador de sitios estáticos (SSG) es una herramienta que permite convertir contenido dinámico en páginas estáticas HTML. Los SSG generan el HTML completo de un sitio web en tiempo de compilación, en lugar de generarlo en tiempo real en cada solicitud. Esto proporciona una serie de beneficios, como un mejor rendimiento, mayor seguridad y la capacidad de alojar el sitio en un servidor simple sin necesidad de un servidor de aplicaciones.

Conclusiones y tabla comparativa

	SSR	CSR	Renderizado híbrido	SSG
Velocidad de carga	Rápida	Más lenta en la carga inicial	Rápida en la carga inicial	Muy rápida
Interactividad	Limitada	Alta	Alta	Muy limitada
Complejidad de implementación	Moderada	Baja	Moderada	Baja
Requerimientos del servidor	Mayor	Menor	Mayor	Menor
Interacciones en tiempo real	Limitadas	Altas	Altas	Muy limitada
Capacidad de actualización en tiempo real	Limitada	Alta	Alta	Muy limitada
Beneficios adicionales	Mayor rendimiento	Mayor flexibilidad	Combinación de ventajas	Mayor seguridad y rendimiento

En resumen, el renderizado en el lado del servidor (SSR) es útil para obtener una carga rápida y una menor complejidad de implementación, pero puede limitar la interactividad y las interacciones en tiempo real. Por otro lado, el renderizado en el lado del cliente (CSR) ofrece una mayor interactividad, pero puede tener una carga inicial más lenta. El renderizado híbrido combina lo mejor de ambos enfoques, proporcionando una experiencia de usuario fluida y rápida. Los SSG, por su parte, son una opción adecuada para sitios web con contenido que no cambia con frecuencia y no requiere interacciones en tiempo real.

¿Por qué el sueño de calidad es fundamental para el aprendizaje?

Sebastian Noguera — Wed, 16 Aug 2023 02:18:57 +0000

Es común y visto de manera natural el desvelarse por actividades académicas, o relacionadas con el aprendizaje. Esto generalmente puede significar irresponsabilidad por parte de la persona o un gran empeño por aprender algo en particular.

El llevar a cabo esta práctica por encima de asegurarnos un aprendizaje rápido realmente solo nos puede alejar más de ese anhelado sueño de aprender a gran velocidad (además de agregar problemas de salud).

Inicialmente partamos del ejemplo de que somos estudiantes responsables que estudiamos para un examen altamente complejo. Iniciando aquí hay que tomar en cuenta que cada quien tiene distintas horas en donde se producen sus horas más productivas, personalmente en mi caso sería en la mañana (5am a 8am) y las horas de la noche (7pm - 12am). Una vez que identificamos esto podríamos creer que si somos productivos en la noche pues es beneficioso estudiar a estas horas pero no hay nada más alejado de la realidad.

Investigadores que observaron a bebés entre los 3 y 12 meses notaron que un mejor sueño está asociado a mejores resultados de comportamiento en el primer año de vida, como la habilidad de adaptarse a nuevas situaciones o la regulación eficiente de la emoción.

La alteración de los patrones de sueño, incluyendo la dificultad de caer y permanecer dormido, son características significativas del proceso de envejecimiento. Estas alteraciones del sueño son candidatos altamente verosímiles a ser contribuyentes a la disminución cognitiva y los desórdenes psiquiátricos en gente mayor.

A continuación, se presentan algunos datos científicos que explican por qué es necesario dormir para aprender bien:

Durante el sueño REM se favorece la memoria procedimental, ya que ésta puede ser mejorada.
Dormir adecuadamente ayuda a mantener el corazón sano y reduce el estrés, lo que a su vez mejora la capacidad de aprendizaje.
La privación del sueño impide la fijación de los recuerdos, la limpieza del cerebro y acelera el deterioro cognitivo.
Dormir ayuda a olvidar algunas de las cosas que aprendemos en el día, lo que es importante para la consolidación de la memoria.
Los buenos hábitos de sueño fortalecen el cerebro a largo plazo y auxilian al cerebro en la consolidación de la memoria.

¿Qué tiene que ver esto con estudiar/aprender?

Las regiones del cerebro más afectadas por la privación del sueño incluían el hipocampo, bien conocido por su papel en el aprendizaje y la memoria, y las regiones de la corteza frontal, implicada en el control vertical de la emoción.

En resumen exponiendo todo lo anterior es muy sencillo deducir el porqué no tiene sentido quedarnos hasta altas horas de la madrugada leyendo una y otra vez el mismo texto creyendo que esto nos hará entender.

¿Qué hago ahora?

Aprende a aprender… Es una frase tan sencilla como significativa, y es que el entender cómo aprendemos cada uno de nosotros es primordial para ser felices, para ser buenos estudiantes, para ser buenas personas, para ser buenos seres vivos. Entiende los patrones de tu cerebro, como aprendes, cómo entendemos mejor, y abandona de una vez esos esquemas anticuados y antiguos de que la única forma de aprender es leyendo lo mismo una y otra vez hasta altas horas de la noche. Cambia tu enfoque, rompe el ciclo, aprende, mejora y continua con tu vida para ser mejor.

😁 Si este post te ha gustado, puedes seguirme en mi canal de YouTube en el cual subo contenido relacionado a la programación 🐢

Guía de bolsillo de PNPM

Sebastian Noguera — Wed, 16 Aug 2023 02:15:51 +0000

Primero la pregunta obligatoria ¿Qué es PNPM?

PNPM es una alternativa al tradicional gesto de paquetes NPM que viene por defecto al instalar Node.js. PNPM trae muchísimas ventajas con respecto a NPM que si quieres ver un poco más a detalle te recomiendo que veas este video de mi canal de YouTube.

Guía de comandos

Gestionar paquetes

Instalar paquetes:

  pnpm add <pkg>

Desinstalar paquetes:

  pnpm remove <pkg>

Actualizar los paquetes dentro del rango especificado:

  pnpm update

Ejecutar scripts:

Ejecutar scripts del package.json:

  pnpm run

Ejecutar un paquete de manera remota sin instalarlo

  pnpm dlx create-react-app ./my-app

Crear un proyecto a partir de una plantilla de inicio:

  pnpm create vue@latest

Manejar espacios de trabajo (environments)

Para poder ir cambiando con facilidad y rapidez de versiones de Node.js existe el comando:

  pnpm env

Que nos va a permitir ir seleccionando la versión de Node.js que queremos utilizar, por ejemplo:

  pnpm env use --global 18.9.1

Con este comando estaríamos especificando que queremos usar la versión 18.9.1 de Node.js y podemos utilizar este mismo comando para ir cambiando a diferentes versiones 👍🚀

Conclusión

Bueno, en este post damos una guía de comandos que puedes consultar en cualquier momento a medida que te vayas acostumbrando a usar PNPM. Espero que te sea de mucha utilidad 😁

Si este post te ha gustado, puedes seguirme en mi canal de YouTube en el cual subo contenido relacionado a la programación 🐢

Entiende de una vez los lenguajes de alto y bajo nivel

Sebastian Noguera — Wed, 16 Aug 2023 02:09:46 +0000

Las primeras computadoras electrónicas programables nacieron a partir de la segunda guerra mundial, como fue el caso de ENIAC. Aquel fue la primera computadora de propósito general basada en circuitos electrónicos que podía reprogramarse para la ejecución de diferentes operaciones.

En los siguientes años se desarrollaron computadoras más potentes (Mark I, Mark II, Colossus) en los que los programas seguían siendo 0 y 1 que se configuraban mediante botones y relés. Esta forma de programación se denominaba binaria y el código introducido era lo que se denomina código máquina.

El lenguaje ensamblador

En 1950 Maurice Vincent Wilkes de la Universidad de Cambridge inventó el lenguaje ensamblador en un intento de simplificar la programación, haciéndola más comprensible mediante el uso palabras en vez de unos y ceros denominados mnemónicos. El lenguaje ensamblador se basa en el empleo de mnemónicos acompañados de argumentos y etiquetas que son convertidos mediante un programa ensamblador a código máquina.

Cada mnemónico representa una operación ligada al hardware que lo ejecuta. Estas pueden ser operaciones aritméticas, de salto en la secuencia de ejecución, de lectura y escritura en registros del procesador, memoria interna, puertos de entrada/salida.

Lenguajes de bajo nivel.

Son lenguajes totalmente dependientes de la máquina, es decir que el programa que se realiza con este tipo de lenguajes no se pueden migrar o utilizar en otras máquinas.

Al estar prácticamente diseñados a medida del hardware, aprovechan al máximo las características del mismo.

Estos lenguajes son extremadamente rápidos y eficientes, pero su problema está en que tienen una complejidad gigante, y además de esto también son muy verbosos a la hora de desarrollar con ellos, por consecuencia se generan archivos con muchas líneas de código.

Los desarrolladores, al encontrarse con la poca practicidad de estos lenguajes tanto para aprenderlos como para usarlos, decidieron "crear" una solución a este problema...

Lenguajes de alto nivel

Son aquellos que se encuentran más cercanos al lenguaje natural que al lenguaje máquina.

Están dirigidos a solucionar problemas mediante el uso de EDD's.

Nota:
EDD's son las abreviaturas de Estructuras Dinámicas de Datos, algo muy empleado en todos los lenguajes de programación. Son estructuras que pueden cambiar de tamaño durante la ejecución del programa. Nos permiten generar estructuras de datos que se adapten a las necesidades reales de un programa.

Estos lenguajes se encuentran relativamente bastante lejos del núcleo de la PC. Por lo que, en principio, un programa escrito en un lenguaje de alto nivel, lo puedes migrar de una máquina a otra sin ningún tipo de problema.

Lenguajes de Medio nivel

Se trata de un término no aceptado por todos, pero que seguramente habrás oído. Estos lenguajes se encuentran en un punto medio entre los dos anteriores. Dentro de estos lenguajes podría situarse, ya que puede acceder a los registros del sistema, trabajar con direcciones de memoria, todas ellas características de lenguajes de bajo nivel y a la vez realizar operaciones de alto nivel.

Lenguajes compilados, interpretados y administrados

Las PC's solo son capaces de ejecutar internamente código máquina, por lo que el código de alto nivel debe convertirse en código de bajo nivel para su ejecución.

Existen diferentes estrategias para ello:

Los lenguajes compilados son aquellos que emplean compiladores para traducir el código fuente en código máquina para ser ejecutado directamente por el ordenador. Este es el caso de lenguajes como C, C++ o Pascal.

Los lenguajes interpretados son ejecutados por un intérprete que va convirtiendo poco a poco el programa fuente en código máquina a la vez que lo ejecutan. Este es el caso de lenguajes como PHP, Python o JavaScript.

La ventaja de los lenguajes interpretados, es que al ser ejecutados por el intérprete, su ejecución está supervisada y es más confiable. Sin embargo, su velocidad de ejecución es inferior a los lenguajes compilados y requieren además de la instalación del intérprete. No obstante, en ambos casos es necesaria la creación de compiladores o intérpretes para cada plataforma.

Por último, están los lenguajes administrados. Este es el caso de lenguajes como Java, o C# y Visual Basic .NET. Estos lenguajes son compilados a un lenguaje intermedio o bytecode que es más próximo a un código de bajo nivel, pero independiente de la plataforma. Este código es ejecutado por una máquina virtual que lo interpreta y ejecuta de manera administrada.

En este caso el código puede compilarse en cualquier plataforma, pero para la ejecución en una determinada plataforma debe tenerse instalada la máquina virtual correspondiente.

Conclusión

Los lenguajes de programación están diseñados para ayudarnos a resolver problemas que nos encontramos al crear software, estos pueden ser de bajo nivel o alto nivel, también pueden ser compilados, interpretados o administrados y dependiendo de estas características y también del propósito del lenguaje, cada uno funcionara para realizar distintas cosas:

Crear sistemas operativos.
Crear sitios web.
Implementar IoT
Etc.

😁 Si este post te ha gustado, puedes seguirme en mi canal de YouTube en el cual subo contenido relacionado a la programación 🐢

¿No conoces o no entiendes los patrones de diseño?

Sebastian Noguera — Wed, 16 Aug 2023 02:04:42 +0000

Los patrones de diseños son soluciones habituales a problemas comunes en el desarrollo de software. Los patrones son como una plantilla que podemos ir personalizando para resolver problemas específicos en el código.

Si la forma de solucionar un problema se puede extraer, explicar y reutilizar en múltiples ámbitos y en muchas ocasiones, en ese caso nos hemos encontrado con un patrón de diseño.

Los patrones de diseño ayudan a estar seguro de que el código es válido y que funcionara, porque es una solución que utilizan millones de desarrolladores, por lo cual están más que probadas y testeadas.

Existen muchísimos patrones de diseños y distintas categorías de estos, y generalmente el punto más complicado de utilizarlos es saber identificar cuál debemos utilizar, por eso conocer la clase y uso de cada uno nos será de mucha utilidad.

Según la finalidad del patrón, estos se clasifican en tres tipos:

Patrones Creacionales.
Patrones Estructurales.
Patrones de comportamiento.

Patrones Creacionales

Como su nombre indica, estos patrones vienen a solucionar o facilitar las tareas de creación o instanciación de objetos.

Algunos de los patrones creacionales más conocidos son:

Factory.
Abstract Factory.
Factory Method.
Builder.

Patrones estructurales

Los patrones estructurales nos ayudan a definir la forma en la que los objetos se componen.

Los patrones estructurales más habituales son:

Adapter.
Decorator.
Facade.

Patrones comportamentales

Los patrones comportamentales nos ayudan a definir la forma en la que los objetos interactúan entre ellos.

Algunos de los más conocidos son:

Command.
Observer.
Strategy.
Template Method.