logo cosasdedevs

Artículos y tutoriales del mundo tech

Últimos artículos

Crea una Web Fullstack con Svelte 5 y SvelteKit

TUTORIAL

Crea una Web Fullstack con Svelte 5 y SvelteKit

En este tutorial con Svelte 5 y SvelteKit aprenderás a desarrollar un blog fullstack donde los usuarios podrán registrarse, iniciar sesión, escribir comentarios y los administradores podrán redactar posts.

Diferencias entre Svelte 5 y SvelteKit

Svelte 5 y SvelteKit son herramientas relacionadas, pero tienen propósitos distintos y se complementan para el desarrollo de aplicaciones web. Aquí está la diferencia y cómo funcionan juntos:

Svelte 5

Es un framework de front-end centrado en la creación de interfaces de usuario altamente reactivas. 

A diferencia de otros frameworks, Svelte realiza el trabajo pesado durante la etapa de compilación, transformando tu código en JavaScript puro optimizado. 

Esto significa que no hay una gran librería ejecutándose en el navegador, por lo que el rendimiento es superior.

  • Usos principales: Crear componentes, manejar la lógica de la interfaz de usuario y gestionar estados reactivos.
  • Fortalezas: Simplicidad, velocidad y enfoque en una experiencia de desarrollo sin sobrecarga.

SvelteKit

Es un framework basado en Svelte que proporciona herramientas adicionales para construir aplicaciones web completas, tanto en front-end como back-end. 

Ofrece un sistema de enrutamiento basado en archivos, renderizado en el lado del servidor (SSR), generación de sitios estáticos (SSG), y manejo de datos en endpoints.

  • Usos principales: Crear aplicaciones web con rutas dinámicas, integrar datos desde una API o base de datos, manejar autenticación, y optimizar el SEO con SSR.
  • Fortalezas: Convierte Svelte en un entorno fullstack con todas las funcionalidades necesarias para el desarrollo web moderno.

Cómo funcionan juntos

Svelte es el núcleo donde defines la lógica de tus componentes y su diseño, mientras que SvelteKit expande estas capacidades para gestionar rutas, llamadas a la API, y la arquitectura general de tu aplicación. En esencia:

  1. Svelte: Se utiliza para diseñar y programar los componentes individuales de la UI, como formularios, botones y vistas.
  2. SvelteKit: Proporciona la infraestructura para unir estos componentes en una aplicación completa, ofreciendo manejo de rutas, datos dinámicos y renderizado eficiente.

Por ejemplo, en una aplicación como un blog:

  • Con Svelte creas componentes como el formulario de login, la lista de posts, o el editor de comentarios.
  • Con SvelteKit configuras rutas como /login, /posts, o /api/comments, integras bases de datos o autenticación, y decides si los datos deben cargarse en el cliente o renderizarse en el servidor.

Ambas herramientas juntas te permiten crear aplicaciones web completas con un enfoque modular, eficiente y fácil de escalar.

Qué necesito saber para seguir este tutorial

Es imprescindible que conozcas CSS, HTML y JavaScript. Aunque en este tutorial trabajaremos con TypeScript, si conoces JavaScript será fácil el salto. Si quieres saber más de TypeScript, te dejo estos dos tutoriales donde explico las bases de este lenguaje.

Aprende TypeScript Desde Cero: Qué es, instalación y tipado

Programación Orientada a Objetos en TypeScript: Guía Completa

También necesitarás tener instalado Node.js en tu ordenador. Aunque no es 100% necesario, sería importante que tuvieras unas nociones antes de empezar con este tutorial. Puedes descargar Node.js desde el siguiente enlace:

https://nodejs.org/en/download/package-manager.

Creación de nuestro proyecto

El proyecto que vamos a construir va a ser un blog basado en mi web cosasdedevs.com en el que podremos registrarnos, conectarnos a una base de datos, escribir comentarios y si somos administradores podremos publicar posts.

Para crear nuestro proyecto, primero vamos a lanzar el siguiente comando en nuestra terminal:

npx sv create blog-svelte

Aparecerá un asistente para la configuración del proyecto. Yo he seleccionado los siguientes puntos.

  • Como plantilla SvelteKit minimal.
  • Elegimos que sí usaremos TypeScript.
  • Como extras he añadido prettier y eslint.
  • El sistema para instalar las dependencias en mi caso será npm.

Una vez termina de instalar las dependencias, podemos seguir los pasos que nos indica el asistente para ejecutar el proyecto y ver la página base de Svelte.

cd blog-svelte && npm run dev -- --open

Si abrimos el proyecto con un editor de código, deberíamos ver una estructura como esta:

blog-svelte/
My Profile
Alberto
Dic 17, 2024
4860 vistas
#Svelte
#TypeScript

TUTORIAL

Guía completa de los principios SOLID

Los principios SOLID son un conjunto de 5 principios que nos pueden ayudar a crear software más estructurado, mantenible y flexible. 

Cada uno de estos principios aborda desafíos comunes en el diseño de software, ofreciendo soluciones claras para evitar código frágil y difícil de escalar.

Recuerda que son principios y no reglas, por lo que debemos tener cierto margen de flexibilidad a la hora de aplicarlos siempre adaptándonos a nuestras necesidades.

En este tutorial, exploraremos cada principio con ejemplos prácticos y vamos a ver cómo aplicarlos para mejorar la calidad de tu código.

Los 5 principios SOLID

Estos principios se dividen en 5, uno por cada letra y son los siguientes:

  • Single Responsibility Principle (Principio de responsabilidad única)
  • Open/Closed Principle (Principio de abierto y cerrado)
  • Liskov Substitution Principle (Sustitución de Liskov)
  • Interface Segregation Principle (Segregación de interfaz)
  • Dependency Inversión Principle (Inversión de dependencias)

Principio de Responsabilidad Única (Single Responsibility Principle - SRP)

El Principio de Responsabilidad Única establece que una clase, módulo o función debe centrarse exclusivamente en una responsabilidad. Esto no significa que una clase solo pueda realizar una tarea específica, sino que todas sus funcionalidades deben estar relacionadas con un mismo propósito o concepto.

Identificar violaciones al SRP puede ser más sencillo si te planteas las siguientes preguntas o señales de alerta:

  • ¿El nombre de la clase o módulo es demasiado genérico? Esto puede indicar que está abarcando múltiples responsabilidades.
  • ¿Cambios en el código afectan esta clase con frecuencia? Las modificaciones constantes pueden ser señal de que está haciendo demasiado.
  • ¿La clase está involucrada en varias capas de la aplicación? Si una misma clase gestiona lógica de negocio, acceso a datos y presentación, es probable que viole el SRP.
  • ¿Tiene demasiadas importaciones? Un alto número de dependencias puede sugerir que la clase está asumiendo más roles de los necesarios.
  • ¿Cuenta con muchos métodos públicos? Esto puede indicar que la clase está sirviendo a múltiples propósitos.
  • ¿Es excesivamente larga? Un número elevado de líneas de código suele ser un síntoma de que la clase maneja más responsabilidades de las que debería.

A continuación te dejo un ejemplo en el que se viola este principio para que lo puedas ver más claro:

class User {
My Profile
Alberto
Nov 25, 2024
1667 vistas
#Arquitectura

TUTORIAL

Clean Code: Buenas Prácticas para Escribir Código Limpio y Eficiente

Escribir un código limpio además de una habilidad que todos debemos tener, es una práctica esencial para cualquier desarrollador que busque crear aplicaciones escalables, fáciles de mantener y legibles por otros.

Y no solo eso, sino que también te abrirá puertas, ya que si en tus proyectos públicos tu código es limpio y utilizas buenas prácticas, es un muy buen punto para tu próxima aventura laboral.

Este tutorial te guiará a través de los principios fundamentales de Clean Code, detallando buenas prácticas que transformarán la calidad de tu código. Aprenderás a organizar mejor tus proyectos, a estructurar tus funciones y variables de manera intuitiva, y a evitar errores comunes que afectan la claridad y eficiencia del software.

Deuda técnica

Probablemente, ya hayas oído hablar sobre la importancia de la calidad del código, y no es para menos: cuando no cuidamos detalles como refactorizar o añadir comentarios claros, siempre se paga un precio. 

Las excusas más comunes suelen ser la falta de tiempo para el mantenimiento, la dificultad de entender un código complejo (porque si, incluso con mucha experiencia, un código denso puede ser un desafío), o la falta de disponibilidad de un compañero para transferir el conocimiento necesario. 

Adoptar prácticas de Clean Code ayuda a evitar estos problemas y a construir una base de código más robusta y comprensible para todos.

Hay cuatro tipos de deuda técnica:

  • Imprudente: Por ejemplo, copiar un código que te has encontrado por internet para salir del paso sin ni siquiera entenderlo.
  • Imprudente e inadvertida: Cuando no tienes conocimientos sobre buenas prácticas o patrones de diseño.
  • Prudente: Y digo prudente entre comillas porque en este caso sabemos que lo estamos haciendo mal, pero dejamos para más adelante una refactorización, separar en clases, etc.
  • Prudente e inadvertida: Cuando después de terminar una tarea nos damos cuenta de como podríamos haberlo hecho mejor.

Cómo mejorar nuestro código

A continuación vamos a ver algunos consejos para mejorar nuestro código 🙌.

Refactorización

Refactorizar un código es el proceso por el cual el objetivo es mejorar un código existente para que sea más entendible y tolerante a cambios. Un ejemplo puede ser una clase inmensa que realiza varias acciones distintas, la típica clase Utils, que puede tener por ejemplo un método para generar un UUID, otro método que realiza peticiones CURL, etc.

La idea sería separarla en distintas clases en las que cada una cumpla sus cometidos.

En este caso es importante contar con pruebas automáticas para que cuando realicemos la refactorización, nuestro proyecto siga manteniendo el comportamiento esperado.

Nombres pronunciables y expresivos a la hora de declarar variables, constantes y métodos

Es fundamental asignar nombres claros y comprensibles a variables, constantes y métodos. Aunque a veces puede ser tentador ahorrar caracteres, hacerlo suele perjudicar la legibilidad y dificulta el entendimiento de otros desarrolladores. 

Lo que para ti puede ser obvio al abreviar, para un compañero podría ser confuso y propenso a malinterpretaciones.

Opta siempre por nombres que comuniquen la intención de forma directa. Si encuentras que necesitas añadir comentarios para aclarar el propósito de un nombre, es probable que el nombre no sea lo suficientemente explícito.

Evita redundancias: Ser expresivo no implica añadir palabras innecesarias. Por ejemplo, al nombrar una función, evita prefijos como fn o function. Estos elementos no aportan claridad y solo agregan ruido visual.

Nombrar las variables según el tipo de dato

Si es booleano, podemos usar prefijos como is, can, has y siempre positivos.

let isUserActive: boolean = true; // indica si el usuario está activo.
My Profile
Alberto
Nov 19, 2024
2454 vistas
#Arquitectura

TUTORIAL

Programación Orientada a Objetos en TypeScript: Guía Completa

La Programación Orientada a Objetos (POO) es un paradigma fundamental en el desarrollo de software, que organiza el código en torno a objetos y relaciones entre ellos. Gracias a POO, es posible construir aplicaciones más escalables, mantenibles y fáciles de entender. 

En este tutorial, exploraremos cómo aplicar POO en TypeScript, un lenguaje de tipado fuerte que facilita la implementación de conceptos como encapsulamiento, herencia y abstracción. 

Con estas bases, podrás escribir código más estructurado y mejorar la reutilización en tus proyectos TypeScript, optimizando tu trabajo en aplicaciones de cualquier escala.

¿Qué necesito saber para poder seguir este tutorial?

Para seguir este tutorial, es importante que tengas conocimientos previos de Programación Orientada a Objetos y que tengas claros conceptos como encapsulamiento, herencia y abstracción. Si aún no los tienes, te sugiero adquirir primero esos conocimientos y luego regresar para continuar.

Si es tu primera vez con TypeScript, te recomiendo que antes te pases por este tutorial. Aprende TypeScript Desde Cero: Qué es, instalación y tipado.

Encapsulamiento con TypeScript

Al igual que en otros lenguajes de programación, en TypeScript disponemos de los siguientes controles de acceso a atributos y métodos:

  • public: Permite el acceso desde cualquier parte del programa. Los miembros public pueden ser accedidos desde cualquier clase o módulo que importe esta clase.
  • protected: Permite el acceso solo desde la propia clase y sus subclases. Los miembros protected no son accesibles desde fuera de la clase.
  • private: Limita el acceso exclusivamente a la clase donde se define. Los miembros private no pueden ser accedidos desde clases externas ni desde subclases; solo pueden ser usados dentro de la clase donde se declararon.
  • static: El modificador static no es un nivel de acceso en sí, sino una indicación de que el miembro pertenece a la clase en lugar de a las instancias individuales.

Constructor y atributos en TypeScript

Para declarar una clase en TypeScript, solo necesitas utilizar la palabra reservada class y el nombre de la clase seguida de las llaves {}. Ejemplo:

export class Developer {
My Profile
Alberto
Nov 11, 2024
2298 vistas
#TypeScript

TUTORIAL

Aprende TypeScript Desde Cero: Qué es, instalación y tipado

TypeScript se ha convertido en una herramienta esencial para desarrolladores que buscan un código JavaScript más estructurado y fácil de mantener. En este tutorial, aprenderás qué es TypeScript, cómo instalarlo y cómo el tipado estático puede ayudarte a escribir código más robusto y seguro, créeme, te dará mucha paz a la larga 🙏. 

Si estás empezando con TypeScript o quieres aprender desde 0, este artículo te guiará paso a paso, desde la instalación hasta los conceptos básicos del tipado.

¿Qué es TypeScript?

TypeScript es un superconjunto de JavaScript desarrollado por Microsoft que añade una capa adicional de tipado estático. Este lenguaje se compila a JavaScript, permitiendo detectar errores de tipado en tu editor de código y así mejorar la robustez del código.

A diferencia de JavaScript, que tiene un tipado débil y dinámico, TypeScript permite definir tipos explícitos, haciendo el código más seguro y predecible. En cuanto lo pruebes, te aseguro que no querrás volver atrás.

¿Qué es el tipado?

El tipado permite definir el tipo de valor que una variable o constante puede contener, ya sea un número, una cadena de texto, un objeto, una instancia de clase, un booleano, entre otros. Esto ayuda a prevenir la reasignación de un valor de tipo distinto y proporciona información sobre los datos en tiempo de desarrollo, lo cual resulta especialmente útil al trabajar con instancias de clases y estructuras complejas.

¿Qué necesito saber para poder seguir este tutorial?

Para seguir este tutorial, es importante que tengas conocimientos previos de JavaScript y Node.js. Si aún no los tienes, te sugiero adquirir primero esos conocimientos y luego regresar para continuar.

Instalación de TypeScript

En este tutorial vamos a ver como podemos usarlo tanto desde una web como en la terminal y los ejemplos se podrán ejecutar en cualquiera de los dos casos, aunque yo lo haré desde la terminal.

Para instalar TypeScript, primero necesitaremos tener instalado Node.js y npm que es el instalador de paquetes de Node.js. Para instalarlo, puedes seguir el siguiente enlace: https://nodejs.org/en/download/package-manager.

Una vez instalado Node.js o si ya lo teníais, vamos a crearnos un proyecto en el que trabajar con TypeScript y testar los distintos ejemplos que vamos a ver. Para ello, yo me he creado una carpeta llamada primeros-pasos-ts. Accedemos a ella desde la terminal y lanzamos el siguiente comando para inicializar el proyecto:

npm init -y

Una vez inicializado el proyecto, lanzamos el siguiente comando para instalar TypeScript y poder utilizarlo en nuestros scripts que funcionarán por la terminal:

npm install --save-dev ts-node

También vamos a instalar TypeScript de forma global. Esto nos ayudará más adelante para convertir archivos de TypeScript a JavaScript y para generar el archivo de configuración de TypeScript:

npm install -g typescript

El siguiente paso es generar el archivo de configuración de TypeScript, para ello lanzamos el siguiente comando:

tsc --init

Este archivo establece configuraciones básicas de compilación, interoperabilidad de módulos, verificación estricta y velocidad de compilación. Además, incluye comentarios sobre otras opciones disponibles que se podrían habilitar para personalizar aún más el proyecto según las necesidades específicas.

Las más destacables son:

target: "es2016": Especifica que el código TypeScript se compilará a JavaScript compatible con ES2016.

module: "commonjs": Define que el código de módulos se generará en formato CommonJS, comúnmente utilizado en entornos Node.js.

Ahora, dentro de nuestro proyecto, vamos a crear una carpeta llamada src y dentro de ella un archivo con el nombre de tutorial.ts. Dentro de este archivo añadimos la siguiente línea para confirmar que todo funciona correctamente:

console.log(`Hello world`)

Como ves, es código JavaScript que vamos a usar para confirmar que funciona todo, más adelante vamos a ver código TypeScript.

Por último, abrimos el archivo package.json y añadimos la siguiente línea dentro de scripts:

"run:tutorial": "ts-node src/tutorial.ts",

De esta forma añadimos el comando para poder ejecutar nuestro script, de tal forma que tu archivo debe lucir así:

{
My Profile
Alberto
Nov 04, 2024
3519 vistas
#TypeScript

Categorias

Sobre mi

Alberto

👋 Mi nombre es Alberto, soy Backend PHP - Python - Node.js Developer y desde 2024 que me metí de lleno en React y Next.js también FullStack Developer.

Saber más

Nos tomamos en serio tu privacidad

Utilizamos cookies propias y de terceros para recopilar y analizar datos sobre la interacción de los usuarios con cosasdedevs.com. Ver política de cookies.