DEV Community: Erick Vargas

Primera aplicación con Svelte y Tailwind

Erick Vargas — Fri, 14 Feb 2020 19:04:23 +0000

Una vez que ya tenemos configurado un entorno con Svelte y Tailwind podemos dar el siguiente paso que sería realizar una aplicación aunque sencilla nos ayudará a entender un poco mejor como se trabaja con este framework.

Creando la aplicación

La aplicación que haremos será una página donde se introduzca un nombre y busque en la API pública de PokéAPI, si encuentra el pokemón traeremos de vuelta la imagen y la mostraremos en pantalla y si no mostraremos una imagen de error.
Una vez que tenemos todo lo necesario podemos empezar por modificar el archivo src/main.js

import App from './App.svelte';

const API = 'https://pokeapi.co/api/v2/pokemon/';
const missingName = 'MissingNa';
const missingImg = 'images/missingno.png';

const app = new App({
    target: document.body,
    props: {
        API,
        missingName,
        missingImg,
    }
});

export default app;

Como podemos ver aquí es donde se inyecta el componente de Svelte en el documento.body, además se declaran constantes que serán enviadas como props al archivo App.svelte, el cual pasaremos a programar a continuación:

<!--App.svelte-->
<script>
    export let API, missingName, missingImg;

    let pokeName = 'POKEMON';
    let pokeImg = 'images/pokeball.png';

    function getData(stringToFind){

        return fetch(`${API}${stringToFind}`).then(res => res.json());
    }

    async function handleSubmit(event){

        const textValue = event.target.pokeName.value.trim().toLowerCase();
        try {
            const data = await getData(textValue);
            pokeName = data.name.toUpperCase();
            pokeImg = data.sprites.front_default;
        } 
        catch (e) {
            pokeName = missingName;
            pokeImg = missingImg;
        } 
        finally {
            document.getElementById('pokeForm').reset();
        }
    }
</script>

<div class="flex flex-wrap bg-gray-900 h-screen content-center text-center">
    <div class="w-full">
        <form id="pokeForm" on:submit|preventDefault={handleSubmit}>
            <span class="text-md font-bold text-white">{pokeName}</span>
            <img class="mx-auto" src={pokeImg} alt={pokeName}>
            <input id="pokeName" 
                class="bg-gray-200 hover:bg-white focus:bg-white py-2 px-4 my-2 text-gray-700 
                leading-tight border border-transparent hover:border-gray-300 
                focus:border-gray-300 focus:shadow-outline appearance-none rounded" 
                type="text" placeholder="Nombre del pokemon" autocomplete="off" required>
            <button class="bg-blue-500 hover:bg-blue-400 py-2 px-4 text-white font-bold 
                border-b-4 border-blue-700 hover:border-blue-500 focus:outline-none rounded">
                Buscar
            </button>
        </form>
    </div>
</div>

Aquí es donde realizamos el diseño de la aplicación, haciendo uso de las clases que nos da Tailwind, a su vez gestionamos las funciones que harán las llamadas a la API para obtener la imagen del pokemon según el nombre que busquemos en el input.

Habiendo modificado esos 2 archivos podrían darle al comando npm run dev les funcionaría bien pero espera no les cargaría una imagen porque espera tener una por defecto en la carpeta public/images/, por lo cual deberían descargar estas 2 imágenes y colocarlas en ese directorio.

La pokeball la usaremos como imagen por defecto.

Missingno aparecerá cuando ocurra un error en el fetch a la hora de buscar el nombre del pokemón.

Siendo el resultado final este:

Pueden verlo también en https://erianvc.github.io/first-svelte-app/.

Configurando Svelte con Tailwind

Erick Vargas — Wed, 05 Feb 2020 02:56:20 +0000

Siguiendo la posta del artículo anterior cuando estábamos Conociendo Svelte, ahora les enseñaré como he realizado mi aproximación para configurar TailwindCSS en un proyecto con Svelte, si alguien quisiera ofrecer una propuesta de mejora puede hacerlo a este template en github (erianvc/svelte-tailwind).

Instalando las dependencias

Teniendo una vez su proyecto en Svelte se necesitarán las siguientes dependencias:

@fullhuman/postcss-purgecss: Descarta los estilos CSS que no hayan sido utilizados.
cross-env: Cambia el modo del proyecto a producción (si lo tienen instalado de manera global, lo pueden omitir).
cssnano: Reduce el CSS de salida.
npm-run-all: Permite ejecutar varios scripts simultáneamente.
postcss-cli: Habilita una linea de comandos para la librería PostCSS.
tailwindcss: La librería de utilidades para CSS.

Las cuales se instalarían con este comando:

npm i -D @fullhuman/postcss-purgecss cross-env cssnano npm-run-all postcss-cli tailwindcss

Configurando los archivos

Una vez instalados los paquetes procedemos a hacer las modificaciones respectivas. Empezaremos por crear el archivo de estilos de Tailwind, ahí se llamará a los componentes y utilidades de Tailwind además de poder agregar nuestras propias clases globales de CSS o estilos personalizados para posterior mente usarlos como clases, para ello lo situaremos en src/tailwind.css con el siguiente contenido:

/* src/tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Luego de eso crearemos el archivo de configuración para Tailwind, se puede hacer de manera sencilla usando el siguiente comando:

npx tailwind init

Eso nos creará un archivo tailwind.config.js en la raíz del archivo, para poder realizar las configuraciones que deseen.

Otro archivo que es necesario que se encuentre en la raíz del proyecto es postcss.config.js conteniendo lo siguiente:

//postcss.config.js

const tailwindcss = require("tailwindcss");

const cssnano = require("cssnano")({ preset: 'default', });

// only needed if you want to purge
const purgecss = require("@fullhuman/postcss-purgecss")({
    content: ["./src/**/*.svelte", "./public/**/*.html"],
    defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
    plugins: [
        tailwindcss("./tailwind.config.js"),

        // minify the css only in production
        ...(process.env.NODE_ENV === "production" ? [cssnano] : []),

        // only needed if you want to purge
        ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
    ]
};

Aquí básicamente se está configurando como será tratado el CSS después de su compilación, llamando la librería de Tailwind como un plugin del cual todo su contenido será reducido por cssnano y minificado por purgecss solo en producción.

Por último lo que tendremos que modificar serán los scripts en package.json de la siguiente manera:

"start": "sirv public": Es un middleware liviano que atiende las solicitudes de los archivos estáticos en la carpeta public/, no lo usaremos de manera directa ya que rollup se encargará de llamarlo cuando se use el script dev.
"autobuild":"rollup -c -w": Hace que rollup compile Svelte y se mantenga escuchando cambios. Lo usaremos mientras estemos en la etapa de desarrollo para ver los cambios realizarse en caliente.
"dev": "run-p watch:tailwind autobuild": Este script llama al comando watch:tailwind y autobuild.
"build": "npm run build:tailwind && rollup -c": Este script lo usaremos cuando se tenga que compilar el CSS y Svelte en modo de producción.
"watch:tailwind": "postcss src/tailwind.css -o public/global.css -w": Este comando hace que se mantenga el archivo tailwind.css y tailwind.config.js vigilados para colocar su resultado en public/global.css.
"build:tailwind": "cross-env NODE_ENV=production postcss src/tailwind.css -o public/global.css": Con este se genera los estilos CSS de Tailwind en un formato para producción.

Quedando el contenido del package.json de esta manera:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "start": "sirv public",
    "autobuild":"rollup -c -w",
    "dev": "run-p watch:tailwind autobuild",
    "build": "npm run build:tailwind && rollup -c",
    "watch:tailwind": "postcss src/tailwind.css -o public/global.css -w",
    "build:tailwind": "cross-env NODE_ENV=production postcss src/tailwind.css -o public/global.css"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.0.6",
    "@rollup/plugin-commonjs": "^11.0.0",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "cross-env": "^7.0.0",
    "cssnano": "^4.1.10",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^7.1.0",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "tailwindcss": "^1.1.4"
  },
  "dependencies": {
    "sirv-cli": "^0.4.4"
  }
}

Con esto ya se tiene un proyecto en Svelte preparado para trabajar con Tailwind.

Conociendo Svelte 🚀

Erick Vargas — Mon, 03 Feb 2020 02:16:20 +0000

Svelte es un framework de Javascript que nos permite construir interfaces de usuario del lado frontend, podrían decir que es un sector ya muy dominado por otras opciones como React y Vue pero donde Svelte se diferencia de las demás opciones es que no es una dependencia que se necesite una vez terminado el proyecto, es más como un compilador, que procesa tu aplicación y la convierte a Javascript nativo únicamente al código de tu aplicación, sin la necesidad de cargar con todo el framework en el bundle final haciendo que el resultado sea mucho menor con respecto a otros frameworks.

Otra de sus principales características es que no hace uso de un Virtual DOM, así haciendo que el desempeño de la aplicación debido a que no tiene que cargar con una copia del DOM para controlar los estados de la aplicación si no que solo calcula las variables y quienes dependen de esas variables y actualiza el DOM real únicamente en las partes necesarias.

Svelte cuenta con un tutorial interactivo muy bueno que ayuda a entender como es su funcionamiento de una manera simple y hasta divertida.
Se encuentra en Svelte tutorial.

Una vez se tiene ya una idea de como se desarrolla con Svelte, lo cual no es muy complejo ya que cuenta con una sintaxis muy clara, siendo un archivo .svelte un archivo que haría las funciones de un HTML, con una etiqueta <script> para el Javascript y una etiqueta <style> para el CSS, algo como esto:

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
    h1{
        margin: 1em;
    }
</style>

Primeros pasos en Svelte

Dentro de algunas de las desventajas que se tiene con Svelte se podría decir que es la auscencia de un CLI (por ahora) por lo cual se tiene un arranque un poco más lento a la hora de empezar un proyecto, en este caso se puede usar un template que está el propio Github de Svelte para empezar:

npx degit sveltejs/template svelte-app

Posteriormente se necesita un npm install para instalar las dependencias necesarias en nuestro proyecto.
El proyecto consta de la siguiente estructura:

public/: carpeta donde se encuentra los archivos públicos como el index.html y el global.css.
public/build/: se genrea una vez se compila el proyecto y es donde se encuentran los archivos JS y CSS ya transformados y con tamaño reducido.
src/: carpeta donde se encuentra todo lo que vayamos a usar a la hora de desarrollar nuestro proyecto.
src/App.svelte: es el componente principal de la aplicación donde se incorporarán los demás componentes, en el caso de ejemplo cuenta con la siguiente estructura:

<!--App.svelte-->

<script>
    export let name;
</script>

<main>
    <h1>Hello {name}!</h1>
    <p>Visit the 
        <a href="https://svelte.dev/tutorial">Svelte tutorial</a> 
        to learn how to build Svelte apps.
    </p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Donde lo más resaltante es el export let name en sección de código Javascript que es una variable que se recibe desde main.js como un prop y después se puede usar directamente en la sección de HTML solo envolviéndolo entre dos llaves.

src/main.js: es el archivo principal en donde acoplas el componente dentro del document.body que es el cuerpo de toda la página.

// main.js

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

De manera sencilla también se puede usar su entorno web para hacer unas pequeñas pruebas de la interacción entre los componentes, la reactividad y poder ver el producto compilado sin la necesidad de instalar en local. Justo desde aquí