¡Hola Frontender! Pues en este vídeo te voy a enseñar cómo puedes crear tu proyecto de Svel desde cero.
Que si no sabes lo que es Svel, pues te dejo aquí un enlace al vídeo que hice el otro día donde te lo explico.
Que por cierto, muchísimas gracias por la acogida, todos los comentarios, me encanta que comentéis y que haya discusiones, conversaciones...
Así que ya sabes, si quieres participar, pues deja un comentario porque eso siempre anima y pues hace mucho más interesante el vídeo.
Y si ya sabes lo que es Svel, pues nada, ya estás preparado, vamos a ver cómo podemos crear ese proyecto, probar el entorno de desarrollo, configurar nuestro editor...
Y algunas cositas más que no te puedes perder aquí, iniciando nuestro proyecto con Svel.
Pues ya estamos en la página de Svel y aquí lo que vamos a ver son las instrucciones que tenemos que utilizar para crear nuestro proyecto desde cero.
Vamos a copiar la primera instrucción, la vamos a pegar aquí en la terminal y mientras lo voy editando te explico.
¿Qué es esto de npx?
npx es un comando de npm, así que necesitas node y npm tenerlo instalado en tu terminal para poder utilizarlo.
Que nos permite ejecutar un paquete que de otra forma tenemos que instalar de forma global, pues esto lo va a instalar en una carpeta temporal y lo va a ejecutar al vuelo.
Y lo que va a ejecutar es este comando de aquí, de git, que ya es un paquete de npm que está disponible.
De git es una herramienta del creador de Svel, aquí tenemos el repositorio de Rich Harris.
Y lo que te permite es como descargarte rápidamente un repositorio de git sin necesidad de cargar todo el historial de git.
Está muy bien.
Y este digamos que es como el template que vamos a utilizar en este caso.
Este template no deja de ser también un repositorio.
De hecho podríamos acceder directamente aquí, si lo pego aquí y lo podríamos ver.
Aquí lo puedes ver.
Es un repositorio de git.
Lo que va a hacer este comando es descargarse este repositorio y lo va a utilizar pues básicamente como una plantilla de nuestro proyecto.
Y le tenemos que decir dónde queremos que nos copie este proyecto.
Lo vamos a hacer en Search Movies, ya que vamos a hacer una aplicación de búsqueda de películas.
Esto tardará nada, un segundo y medio, nada de nada.
Ahora ya nos ha creado esta carpeta.
Vamos a Search Movies y vamos a entrar, vamos a hacer un ls.
Y ya puedes ver que tenemos archivos.
Ya nos ha dejado aquí pues una estructura básica de archivos con un package.json, con dependencias.
Así que vamos a hacer un npm install pues para tener preparadas las dependencias para poder trabajar con este proyecto.
Esto tardará unos segundos de nada.
Muy bien.
Pues ya está, 7 segundos, ya lo tenemos listo.
Ahora aquí ya nos dice que hagamos un npm run dev pues para levantar el entorno de desarrollo.
Vamos a movernos, que lo tengo aquí todo preparado en otro sitio.
Aquí tengo mi editor.
Muy bien.
Así que voy a abrir la terminal de editor de código.
Yo he utilizado Visual Studio Code, pero si prefieres Atom o cualquiera, pues siéntete libre de hacerlo.
Aquí estoy en la carpeta de Svel.
Voy a ver, entro a Search Movies y en Search Movies lo que voy a hacer es añadir esta carpeta en este editor.
Muy bien.
Aquí lo tengo.
Ya tengo este proyecto con todo el árbol de elementos.
Tengo el package.json.
Estas son las dependencias que hemos instalado antes.
Ya vemos que utiliza Rollup, que es una especie de webpack.
Igual hago un vídeo sobre esto, que es muy interesante.
También tenemos Svel a partir de la versión 3.0.
Y otra dependencia que es Surf Click.
Esto no sé muy bien para qué utiliza.
Creo que es para servir la carpeta de estáticos que estamos utilizando.
Vale.
Y tenemos diferentes scripts.
El de Build, un Auto Build.
Esto está bien.
Debe ser que lo utiliza para escuchar los cambios que estamos haciendo y volver a hacer una Build.
El de Dev, que este es el que queremos.
Que es para empezar nuestro entorno de desarrollo.
Vamos a hacer un npm run dev.
Y esto nos está dando esta dirección de aquí.
Localhost en el puerto 5000.
Lo copio, lo pego.
Y aquí ya tenemos un Hello World.
Vamos a ver de dónde sale este Hello World.
Porque vaya, ha salido ahí como si nada.
Y no sabemos muy bien de dónde sale.
Así que vamos a revisar en la carpeta Source que tenemos dos archivos.
El main.js ya suena a punto de entrada de nuestra aplicación.
Así que vamos a ver qué hay aquí.
Muy bien.
Voy a ver si puedo mover esta terminal.
Vamos a hacer un poquito más chiquitita.
Y esto un poquito más grande.
Y así.
Muy bien.
Pues este punto de entrada de la aplicación lo que está haciendo es importar app de app.svel.
Esto debe ser el componente app.
Muy bien.
En la línea 3 estamos creando una constante que se llama app.
Y estamos creando una instancia de app.
Pasándole un objeto que tiene como opciones target.
Que es document.body.
Esto significa que lo que queremos es que el punto de anclaje en el que queremos que se renderice toda nuestra aplicación de Svelte.
Va a ser en document.body.
Básicamente va a tomar todo el cuerpo de nuestro HTML.
Así que vaya, a ser toda la web.
Y ya le estamos diciendo qué props queremos que se le pasen al componente app.
En este caso, Word.
Ya podemos intuir un poco aquí de dónde viene este Word.
Y finalmente hace este export default app.
Yo diría que esto no es necesario.
No lo voy a quitar por si acaso.
Luego lo probamos.
Vale.
Entonces ya tenemos este Word que podemos ver de dónde sale.
Pero no vemos exactamente este Halo Word.
¿De dónde aparece esto?
Pues este componente app que tenemos aquí.
App.svelte.
Vale.
Aquí podemos ver unas cuantas cosas.
Si has visto el vídeo de introducción, es muy similar a lo que ya habíamos visto en ese entonces.
Que teníamos una parte de script donde podemos decirle la funcionalidad.
Que va a tener nuestro componente.
El de style.
Que va a ser los estilos.
Que va a tener justamente este componente.
Y que además no nos tenemos que preocupar de las colisiones.
Que va a tener las etiquetas o clases que utilicemos aquí.
Y el marcado.
Así que si aquí ya pongo hola y guardo los cambios.
Vale.
Ya vemos que aquí se reflejan los cambios.
Que se ha actualizado.
Ha hecho un refresh.
Llega la página.
Y hemos visto los cambios.
Lo mismo si cambiamos los estilos.
Perfecto.
Bastante rápido.
Está bien.
Ya podemos ver que este hola.
El name viene de aquí.
Que se está pasando como props.
Y cómo está funcionando esto de las props.
Ya lo veremos más adelante en otro vídeo.
Pero fíjate que aquí está exportando la variable name.
Así que lo está exportando.
Esto es como se le indica a nsvelte.
Que queremos que eso sea una prop.
Así es como de alguna forma estamos mostrando la API de nuestro componente.
Vale.
Una cosa que estarás notando.
Es que se ve todo en blanco.
Todo el archivo se ve en blanco.
Esto no está nada bien.
Esto no nos está ayudando.
Así que lo que podríamos hacer es instalar.
Seguramente si es la primera vez que abres un archivo de svelte.
Habrá salido un pop-up diciéndote.
Te recomiendo esta extensión del marketplace.
Porque la verdad que eso está muy bien por parte de Visual Studio Code.
Pero ya te digo que aquí tenemos la extensión que debes instalar.
Si lo que quieres es que se vea correctamente los archivos de Svelte.
Esto tiene un syntax highlighting y también te ofrece algo de IntelliSense.
Ya lo tenemos instalado y ya está.
Ya lo tenemos listo.
Ya se ven los colores y ya está perfectamente integrado.
Aquí incluso puedes encontrar más extensiones que pueden ayudarte con otras cosas.
En este caso ya esto sería lo más básico para que podamos empezar a trabajar.
Así que este sería el punto de entrada de nuestra aplicación.
De la aplicación app que estamos importando el componente.
Tenemos que hacer un new app para pasarle donde lo queramos renderizar.
Y lo podemos ver aquí en index.html.
Este body se va a renderizar aquí.
Pero si tuvieras aquí un div que le quieres llamar app.
Y entonces en el punto de entrada de tu aplicación.
Quisieras utilizarlo pues harías algo así.
Y dirías no, es que lo quiero renderizar realmente en app en lugar del body.
Esto lo podrías llegar a hacer si quisieses.
En este caso no parece que sea muy interesante.
Así que ya hemos creado con esto nuestro primer proyecto con Svelte.
Y a partir de aquí vamos a poder ir extendiéndolo con nuevas funcionalidades y características del framework.
para ver cómo podemos crear nuestro pequeño proyecto del buscador de películas.
Bueno, hasta aquí nuestra preparación para crear el proyecto con Svelte.
Ya te puedo ir diciendo que esto es solo el principio.
Porque mi idea es hacer una serie de vídeos para enseñar todos los conceptos que tiene Svelte.
y crear una pequeña aplicación para que veamos cómo pueden funcionar.
Para ver una aplicación real, un poquito más tangible, más allá de los típicos ejemplos.
Así que si te ha gustado el vídeo de este framework Svelte, ya sabes, dale like, compártelo con tus amigos.
Y sobre todo suscríbete para no perderte el siguiente, que espero tenerlo muy pronto.
Así que nada, un abrazo muy fuerte.
Frontender, hasta el siguiente.