/ Etiqueta: javascript

Actualidad

18/11/2021

/ , , , ,

Primeros pasos con SVELTE

Introducción

Svelte  (o SvelteJS) es un framework para desarrollar aplicaciones JavaScript por Rich Harris y basado en componentes para crear aplicaciones reactivas.

A diferencia de otros frameworks como Angular, Vue o React, el código es compilado previamente para que el navegador pueda entenderlo.

Si visitamos la web principal de Svelte podemos desatacar sus tres características principales:

  • Write Less Code. Una de las principales características es que podemos crear componentes con menos líneas de código, que por ejemplo React, donde su creador asegura que si comparamos componentes iguales, estamos ahorrando hasta un 40% de código. Svelte utiliza el principio de Single File Component en el cual, en un mismo archivo tendremos el HTML, Javascript y Css. Esto te puede resultar familiar si has utilizado Vue.
  • No virtual DOM. Lo más interesante de Svelte es, que como hemos comentado, es precompilado. No hace uso del Virtual DOM para realizar cambios en nuestra aplicación, sino que se aprovecha de la previa compilación para realizar los cambios de estados y propiedades.
  • Truly reactive. La programación reactiva es la base de cualquier framework de javascript, donde simplemente es que la interfaz del usuario va cambiando según se vayan modificando los datos de éste.

Vamos a ver paso a paso cómo empezar con un proyecto utilizando Svelte 3.

Instalación

Vamos a ver como crear un proyecto sencillo en Svelte y para ello, seguiremos los pasos que nos indican en la web oficial.

Arrancamos una terminal y ejecutamos el siguiente comando:

npx degit sveltejs/template proyecto-svelte

Con este comando lo que estamos haciendo es hacer una copia del repositorio de Github de sveltejs, pero sin la carpeta .git.

El siguiente paso será situarnos dentro de nuestro proyecto: cd proyecto-svelte y hacer un: npm install para instalar las dependencias del proyecto.

Una vez instaladas todas las dependencias podemos ver los distintos ficheros que nos ha creado.

Estructura del proyecto

Si abrimos nuestro proyecto con un editor, nos encontraremos con la siguiente estructura:

Uno de los ficheros a destacar es rollup.config.js , el cual es una herramienta que lo que hace es compilar todo nuestro código en un solo fichero, más grande y complejo (lo que se llama Bundle) como puede ser Webpack o Parcel.

Seguimos analizando nuestro proyecto y vemos el  fichero package.json . Como podemos ver, tiene una configuración bastante sencilla con pocas dependencias y los diferentes scripts que podemos ejecutar:

Creación de una sencilla aplicación:

Vamos a crear una pequeña aplicación para ver alguna de las características más importantes de este framework:

Empezamos analizando el fichero main.js, el cual es el fichero de entrada de nuestra aplicación. En él, estamos creado una prop que pasaremos a nuestro componente App.svelte.

En el siguiente ejemplo crearemos un pequeño componente donde habrá un contador y en el que veremos algunas de las características de este framework:

Lo primero que haremos es exportar la prop ‘name’, donde estamos indicando que es un parámetro del componente. Después crearemos una propiedad llamada contador, y un botón el cual llamará a una función para que cada vez que se haga click en él, el contador se incremente. En este botón hemos añadido la directiva on:click, que será el evento que se lance cada vez que pulsemos sobre él.

Aquí lo interesante que tiene Svelte, es que como tiene un paso previo de compilación, está deduciendo que la variable ‘contador’ es un estado, y cada vez que el valor cambie, vuelve a renderizar el componente.

En la siguiente imagen vemos como traduce Svelte nuestro código:

Arrancar el proyecto

Arrancaremos nuestro proyecto y lo ejecutaremos en modo ‘dev’. Para ello ejecutamos el comando: npm run dev y se nos indicará una dirección localhost con el puerto 5000, el cual no llevará a nuestro entorno de desarrollo.

Así se vería nuestro proyecto en el navegador:

Conclusión

Hasta aquí hemos podido ver como configurar nuestro entorno para trabajar con Svelte y algunas de las ventajas que tiene como son la simplicidad de su código, reactividad y que tiene una curva de aprendizaje muy baja.

Podemos ver ejemplos concretos en su misma página, analizarlos y comprobar la potencia que puede llegar a darnos este framework en el desarrollo de nuevas aplicaciones.

Actualidad

01/07/2020

/ , , , , ,

API testing con REST Client para VS Code

En los proyectos ágiles, a la vez que se acortan los ciclos de desarrollo se vuelven todavía más importantes las pruebas de nuestro API (Application Programming Interface) y se convierte en obligatoria la ejecución de pruebas automáticas.

En API testing utilizamos herramientas de software para enviar llamadas a la API, obtener resultados y registrar la respuesta del sistema. Existen muchos artículos para conocer las principales recomendaciones para este tipo de testing así como diferentes herramientas, tanto libres como de pago: Postman, Insomnia, Ping ApI, HP QTP, vREST, JMeter…

Este tipo de herramientas son de gran utilidad para poder interactuar con APIs y, como desarrolladora front-end que soy, poder hacer pruebas de los servicios que se tienen que implementar.

Probablemente las más usada o conocida sea Postman, pero en este artículo me gustaría hablaros un poco de REST Client que nos permite realizar llamadas HTTP desde el propio editor Visual Studio Code (VS Code) de una forma muy sencilla.

Algunas de las características y ventajas que se pueden destacar de REST Client son:

  • Ejecutar solicitudes HTTP y ver la respuesta directamente en el panel
  • Tener todas las solicitudes en un mismo fichero
  • Soporta los tipos de autenticación más comunes
  • Definición de variables de entorno
  • Generar code snippets

Voy a ir explicando paso a paso como empezar a utilizar esta herramienta.


Instalación

La instalación es muy sencilla puesto podemos acceder a la extensión desde el mismo VS Code:


Fichero

Una vez instalado REST Client, crearemos un fichero cuya extensión debe ser .http o .rest para que nuestro código sea compatible con las solicitudes HTTP que vayamos a realizar.


Entornos y variables

Hay diferentes formas de definir variables. Aquí vamos a explicar dos de ellas:

1. Variables de entornos
Se pueden definir variables de entorno en el propio settings de VS Code. En la siguiente imagen se muestra un ejemplo de cómo se configuraría un entorno para local y otro para producción.

Una vez configurado el fichero de settings, tenemos que seleccionar el entorno con el que queremos trabajar. Para ello abrimos nuestro fichero .rest, pulsamos F1, elegimos la opción: Rest Client: Switch Environment y seleccionamos el entorno.

2. Variables en el mismo fichero
Se pueden definir variables en el mismo fichero con la siguiente sintaxis:

@nombreVariable = valor

En la siguiente imagen se muestra un ejemplo con algunas variables y una llamada a un servicio GET haciendo uso de ellas.


Peticiones

REST Client nos permite realizar peticiones GET, POST, PUT y DELETE de una forma muy sencilla.

En la siguiente imagen vemos algunos ejemplos de peticiones, variables y de como se muestra el resultado de una petición.

Empezamos definiendo algunas variables como el host o el puerto la base de nuestro proyecto para poder reutilizarlas en todo nuestro código.

Seguimos escribiendo nuestras peticiones separadas entre ellas con un comentario que debe empezar por tres o más almohadillas (###) . Esto es importante ya que, sin ello, no podremos realizar las siguientes peticiones.

Después de cada una de estas líneas, tendremos el encabezado de nuestra solicitud, el cual podremos llamar situándonos encima de la petición y pulsando sobre Send Request

El resultado se mostrará en un panel que se abrirá a la derecha automáticamente.


Autorización

Además, como ya apuntaba al principio, Rest Client soporta los tipos de autenticación más comunes como: Basic Auth, Digest Auth, SSL Client Certificates. etc.

Aquí te muestro un ejemplo de cómo se añadiría una cabecera de «Authorization»:


Code Snippet

Una vez tengamos nuestras peticiones, podemos generar estas peticiones en el lenguaje que queramos.

Para poder generar este código nos situamos sobre la petición y con el botón derecho del ratón nos aparecerá un menú. Seleccionamos: «Generate Code Snippet»

Una vez seleccionado nos muestra un listado con los diferentes lenguajes y seleccionamos uno de ellos:

En mi caso selecciono JavaScript y automáticamente se abre un panel a la derecha con el código generado.

Esto nos puede ahorrar tiempo y ayudar bastante a la hora de realizar las llamadas a estas peticiones desde nuestra aplicación.

Como podemos ver, REST Cient nos permite realizar peticiones de una forma muy sencilla. Una de las cosas que más me gusta es que podemos tener todas nuestras peticiones de nuestro proyecto en el mismo directorio y hacer pruebas sin necesidad de abrir otros programas.

Si te interesa profundizar más, te recomiendo que sigas leyendo en la página de REST Client en GitHub.