날씬: 유엔의 새로운 틀

Svelte un nuevo framework de JavaScript para construir interfaces de Usario.Comparado con otras herramientas de desarrollo web como React,Angular o Vue,las cuales realizan la mayor parte de su trabajo en el navegador,Svelte cambia este paradigma y se ejecuta en tiempo de compileación,convirtiendo sus components en código imperative o altemente eficite.
​
Otra de las primicias de Svelte es que no utiliza un Virtual DOM,sino que describe código que actualiza quirúrgicamente el DOM cuando cambia el estado de tu aplicación.
​
날씬한 también cuenta con una sintaxis m ás concisa, f á cil y corta para crear aplicaciones basadas en components.
​
En mi experiencea como desarrollador Frontend he utilizado React、Angular、Vue、Elm y otras herramientas de desarrollo web con JavaScript.날씬한 저는 cómo trabaja와 cómo propone el uso de esta nueva herramienta para los Frontends에 있습니다.
​

Crear una aplicación con Svelte。

​
El reto ahora es crear una aplicación con Svelte,entender cómo podemos trabajar un proyecto construcido desde cero y cómo publicarlo en GitHub Pages.
​
?Quéaprenderemos?
​
1) 프로파일러 unproyecto
2) Instalar 슬림
3) 불안정 y 구조 Babel
4) Instalar y 구성기 웹 패키지
5) Crear una Aplicaci ón con Svelte 회사
6) Entorno de desarrollo 로컬 + 컴파일러 프로젝트
7) Publicar nuestro proyecto en GitHub 페이지.
​

프로파일러 Proyecto

Lo primero que necesitamos es crear una carpeta e inicializar nuestro proyecto con git y npm desde una consola o terminal.
​

 mkdir hello-svelte && cd hello-svelte

Inicializamos nuestro proyecto con git y npm:
​

 git init 
 npm init -y

​

Instalar 슬림

Ya que tenemos la carpeta del proyecto,vamos a installar Svelte y crear la estrustructura necesaria de para trabajar.
​

npm install svelte --save

​
La estructura para nuestro proyecto seráLa siguiente:
​

dist/:carpeta donde estaráel proyecto Compileado.

public/:carpeta donde estarán los recursos públicos de nuestro sitio.

src/:Careata donde colocaremos nuestro código.

src/componentes/:Careata donde colocaremos nuestros componentes.

src/index.js:punto de entrada del proyecto.
​
##불안정 y 구조 Babel
​
En este proyecto utilizaremos Babel,una herramienta para transformar nuestro código JavaScript ES6+a JavaScript que pueda ser soportado por todos los navegadores,con lo cual podemos disponer de las nuevas functionalidades de JavaScript En este proyecto.
​

npm install @babel/core @babel/preset-env @babel/polyfill babel-loader svelte-loader --save-dev

​
Creamos un archivo en la raíz del proyecto con el nombre.babelrc“y añadimos la siguiente configuración:
​

    {
      "presets": [
        "@babel/preset-env"
      ],
    }

​

Instalar y 구성기 웹 패키지

웹 패키지는 허가 컴파일러nuestroproyecto,creando un archivoque incluye todos los recursos necesarios para llevar a producción el proyecto que estamos trabajando를 포함합니다.También nos permite optimizar los procesos de construcción y optimización del código que estamos trabajando.
​
Instalación:
​

npm install webpack webpack-cli html-webpack-plugin --save-dev

​
Creamos el archivowebpack.config.jsen la raíz del proyecto:
​

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
      entry: './src/index.js', // Elegimos nuestro punto de entrada
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      }, // Añadimos nuestro punto de salida 
      resolve: {
        extensions: ['*', '.mjs', '.js', '.svelte'],
      }, // Añadimos el soporte para las extensiones que utiliza svelte
      module: {
        rules: [
          {
            test: /\.js?$/, 
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
            },
          }, // Creamos la regla para nuestros archivos JS
          {
            test: /\.svelte$/,
            exclude: /node_modules/,
            use: {
              loader: 'svelte-loader'
            }
          }, // Utilizamos svelte-loader para trabajar con los archivos .svelte 
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          inject: true,
          template: './public/index.html',
          filename: './index.html',
        })
      ] // utilizamos este plugin para añadir el recurso compilado al documento HTML
    };

​

Crear una Aplicación con Svelte 회사

​
Ya que tenemos la configuración necesaria para nuestro proyecto en Svelte,vamos a crear los elementos que necesitamos para tener una primera aplicación functionando.
​
La aplicación que vamos a con svelt seráuna página que nos permita consumir una API pública.Para este ejempo utilizare la API de la serie animada“Rick And Morty”y vamos a presentar los personajes de esta serie en nuestra aplicación.
​
Creamos un componente llamado“App.svelte”dentro de la carpeta“src/components/”donde estarátoda la lógica,diseño y estructura.
​

    <script>
      import { onMount } from "svelte"; // Importamos onMount un método que utilizaremos para detectar cuándo esta montado el componente.

      // Creamos una constate API con la URL de la API publica
      const API = "https://rickandmortyapi.com/api/character";

      // Asignamos la variable "data" y "characters" como arreglos vacíos.
      let data = [];
      let characters = [];

      // Utilizamos el método onMount para crear lógica una vez que se haya montado en el DOM el componente
      onMount(async () => {
        // Creamos un llamado a la API por medio de Fetch
        const res = await fetch(API);
        // Utilizamos "data" para asignar el resultado de la llamada
        data = await res.json();
        // Cargamos a characters el resultado de los personajes
        characters = data.results;
      });
    </ script>

    // Creamos nuestros estilos para la aplicación
    <style>
      .characters {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
      }
      figure,
      img {
        width: 100%;
        margin: 0;
      }
    </style>

    // Creamos el bloque de HTML de nuestra aplicación donde estará también la lógica para cada personaje.
    <div class="characters">
        // En el arreglo de personajes regresamos un personaje e iteramos por cada elemento.
      {#each characters as character}
            // una vez establecido "character" disponemos de los elementos que tiene este objeto.
        <figure>
          <img src={character.image} alt={character.name} />
          <figcaption>{character.name}</figcaption>
        </figure>
        // En caso de que no tengamos un resultado de la API, creamos un elemento para mostrar "Loading..."
      {:else}
        <p>loading...</p>
      {/each}
    </div>

​
Comopueden은 전문적인nuestrocomponente incorpora todos los elementos necesarios en un archivo llamado 응용 프로그램입니다.svelte,podemos asignar la lógica que utilizaremos de JavaScript,los estilos necesarios para presentar nuestra aplicación y el HTML donde haremos render del llamado de la API.
​
Ahora creamos nuestro punto de entrada,el cual estaráen la raíz de la carpeta/src/y se debe de llamarindex.js.
​

    // Importamos el componente
    import App from './components/App.svelte';

    // Creamos App y definimos el target dentro del documento HTML.
    const app = new App({
      target: document.querySelector('main'),
      data: {
        quotes: []
      },
    });

​
Creamos el archivo HTML dentro de la carpeta/public.Este será utilizado por 웹 패키지para insertar el scriptbundle.js y copiar Este archivo a la carpetadist/.
​

    <!DOCTYPE html>
    <html lang="es">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Rick And Morty by Svelte App</title>
    </head>
    <body>
      <main></main>
    </body>
    </html>

​
Ya que tenemos estos 3 archivos,tenemos nuestra aplicación lista para compilearse.
​

Entorno de desarrollo 로컬 + 컴파일러 프로젝트

​
Si queremos disponer de un entorno de desarrollo local y visualizer los cambios en tiempo real,utilizaremos el paquetewebpack-dev-serverque nos permitirátrabajar más fluido y revisindo los cambios cada que actualizemos el proyecto.
​

npm install webpack-dev-server --save-dev

​
Ahora vamos a a añadir el script destartybuilddentro delpackage.json.Estos scripts nos permitirán iniciar el entorno de desarrollo local,ver los cambios inmediatamente y compiler el proyecto para envirolo a producción.
​
​

"scripts": {
     "build": "webpack --mode production",
     "start": "webpack-dev-server --open --mode development"
 },

​
​
Una vez que añadimos los scripts en nuestra terminal,vamos a probar el de“start”.
​

npm run start

​
Esto compileara nuestro proyecto en modo de desarrollo y nos abriráun navegador con el proyecto functionando enlocalhost:8080.Podemos probar la aplicación,regresaral 편집 de có digo y cualquier cambio que se le hagaal proyecto ser á reflejado en esta dirección casi instant á neamente.
​

​
번역 el proyecto para producci ón:
​

npm run build

​
Con este comando vamos a tener el proyecto Compileado en la carpeta/dist.El contenido dentro los archivosindex.htmlybundle.jsserán los elementos que debemos enviar a producción.También puedes probar abriendo El archivo index.html en tu navegador y probar cómo functiona la aplicación ya compileada.
​

Publicar nuestro proyecto en GitHub 페이지.

​
Ya que tenemos una aplicación functionando con svelte y toda su configuración para tener un proyecto construcido,es momento de pensar en cómo vamos a envirar nuestro trabajo a producción.para esto utilizaremosGitHub Pages.
​

NOTA: es necesario que crees un repositorio en Github y subas todos los cambios realizados para poder continuar con esta sección.
​
Buena práctica:
​
Crea el archivo .gitignore en la raíz del proyecto para ignorar la carpeta /node_modules/. Puedes utilizar https://gitignore.io para crear un excelente archivo .gitignore en tu proyecto.
​

Enviar a producción una carpeta en GitHub Pages。

​
Primero debemos de compilar el proyecto con el comando previamente creado:
​

 npm run build

​
En la terminal ejecutamos el siguiente comando para enviar los cambios al repositorio:
​

git add dist && git commit -m "deploy gh-pages"

​
Creamos una sub rama llamadagh-pages,la cual solo contendrálos archivosindex.htmlybundle.js,con ellos es suficiente para publicar el proyecto en GitHub Pages.
​

git subtree push --prefix dist origin gh-pages

​
Una vez publicado, podemos revisar la url publica(con la cual podemos accepter al proyecto compileado) en la configuración del proyecto en la sección de GitHub 페이지.
​
La url se compone de La siguiente forma:
​
https://[TU_USUARIO_GITHUB].github.io/[NOMBRE_DE_TU_REPOSITORIO]/
​
Mi url es:https://gndx.github.io/svelte-quickstart/(Aqípuedes ver el proyecto functionado).
​
También te comparto el repositorio de este proyecto para que lo compares con el tuyo:https://github.com/gndx/svelte-quickstart
​
결론
​
Aprendimos a crear un proyecto con Svelte,un framework que estádando de quéhablar por su forma de trabajar.Entre sus cualidades podemos encontrar que es una herramienta potente para construir aplicaciones web r á pidas,otras herramientas como React o Vue,con las cuales puedes crear interfaces de usuario interactives와 유사합니다.
​
Recuerda que Svelte convierte tu aplicación en JavaScript al momento de compiler,en lugar de interpretatar el código en tiempo de ejeucción,asíque no paga algunos costos en el rendiminto y no invire en una penalización de la primera carga de la aplicación.
​
Ahora que entiendes cómo trabaja Svelte,?le darías una oportunidad para crear tus proyectos?