날씬: 유엔의 새로운 틀

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?

    좋은 웹페이지 즐겨찾기