Hispanopedia Wiki
Articulo de referencia

Esbelto

Svelte es un marco de software front-end basado en componentes , [2] y lenguaje [3] gratuito y de código abierto creado por Rich Harris y mantenido por los miembros del equipo c...

Hispanopedia WikiContenido en espanolLectura gratuita

Svelte es un marco de software front-end basado en componentes , [2] y lenguaje [3] gratuito y de código abierto creado por Rich Harris y mantenido por los miembros del equipo central de Svelte. [4]

Svelte no es una biblioteca monolítica de JavaScript importada por las aplicaciones: en cambio, Svelte compila plantillas HTML en código especializado que manipula el DOM directamente, lo que puede reducir el tamaño de los archivos transferidos y brindar un mejor rendimiento del cliente. [5] El compilador también procesa el código de la aplicación, insertando llamadas para volver a calcular automáticamente los datos [2] y volver a renderizar los elementos de la interfaz de usuario cuando se modifican los datos de los que dependen. [6] Esto también evita la sobrecarga asociada con las representaciones intermedias en tiempo de ejecución, como el DOM virtual , [7] a diferencia de los marcos tradicionales (como React y Vue ) que realizan la mayor parte de su trabajo en tiempo de ejecución, es decir, en el navegador. [5] [6] [4] [8] [2] [7]

El compilador en sí está escrito en JavaScript . [9] [8] Su código fuente está licenciado bajo la Licencia MIT y alojado en GitHub . [8] Entre las bibliotecas frontend comparables, Svelte tiene una de las huellas de paquete más pequeñas con solo 2 KB. [10]

Historia

El predecesor de Svelte es Ractive.js, que Rich Harris creó en 2013. [11]

La versión 1 de Svelte fue escrita en JavaScript y se lanzó el 29 de noviembre de 2016. [12] El nombre Svelte fue elegido por Rich Harris y sus compañeros de trabajo en The Guardian . [12]

La versión 2 de Svelte se lanzó el 19 de abril de 2018. Su objetivo era corregir lo que los mantenedores consideraban errores en la versión anterior, como reemplazar llaves dobles por llaves simples. [12]

La versión 3 de Svelte se escribió en TypeScript y se lanzó el 21 de abril de 2019. Replanteó la reactividad al utilizar el compilador para instrumentar las asignaciones en segundo plano. [2]

El marco web SvelteKit se anunció en octubre de 2020 y entró en versión beta en marzo de 2021. [13] [14]

La versión 4 de Svelte se lanzó el 22 de junio de 2023. Fue una versión de mantenimiento, más pequeña y más rápida que la versión 3. [15] Una parte de esta versión fue una reescritura interna de TypeScript a JavaScript, con anotaciones JSDoc . [9] Esto generó confusión en la comunidad de desarrolladores, que fue abordada por el creador de Svelte, Rich Harris. [16] [17]

La versión 5 de Svelte se lanzó el 19 de octubre de 2024. Fue una reescritura completa de Svelte, que cambió conceptos centrales como la reactividad y la reutilización. [18] Su característica principal, runes , reelaboró ​​cómo se declara y se usa el estado reactivo. Las runas son macros similares a funciones que se utilizan para declarar un estado reactivo o código que usa estados reactivos. El compilador usa estas runas para indicar valores que pueden cambiar y de los que dependen otros estados o el DOM. [19] Svelte 5 también presenta fragmentos, que son "fragmentos" de código reutilizables que se definen una vez y se pueden reutilizar en cualquier otro lugar del componente. [20] Svelte 5 inicialmente se encontró con controversia debido a sus muchos cambios y, por lo tanto, desuso causados ​​principalmente por runas. [21] Sin embargo, la mayor parte de esto ha disminuido desde el anuncio inicial de runas y el mayor refinamiento de Svelte 5.

Los primeros colaboradores clave se unieron a Conduitry con el lanzamiento de Svelte 1, Tan Li Hau se unió en 2019 y Ben McCann se unió en 2020. [12] Rich Harris y Simon Holthausen se unieron a Vercel para trabajar en Svelte a tiempo completo en 2022. [22] Dominic Gannaway se unió a Vercel desde el equipo central de React para trabajar en Svelte a tiempo completo en 2023. [23]

SvelteKit 1.0 se lanzó en diciembre de 2022 después de dos años de desarrollo. [24]

Sintaxis

Las aplicaciones y componentes de Svelte se definen en .sveltearchivos, que son archivos HTML ampliados con una sintaxis de plantillas basada en JavaScript y similar a JSX .

Se accede a las funciones principales de Svelte a través de runas, que sintácticamente parecen funciones, pero el compilador las utiliza como macros . Estas runas incluyen:

  • La $stateruna, utilizada para declarar un valor de estado reactivo
  • La $derivedruna, utilizada para declarar el estado reactivo derivado de uno o más estados
  • La $effectruna, utilizada para declarar código que se vuelve a ejecutar siempre que cambian sus dependencias.

Además, la sintaxis se puede utilizar para crear plantillas en elementos y componentes HTML, [25] de forma similar a los literales de plantilla en JavaScript. Esta sintaxis también se puede utilizar en atributos de elementos para usos como la vinculación de datos bidireccional, los detectores de eventos y el estilo CSS . A continuación se muestra un ejemplo de lista de tareas creada en Svelte: { JavaScript code }

< script > 
let todos = $estado ([]); let entrada = $estado (); let todo = $derivado ( todos . longitud ); let hecho = $derivado ( todos . filtro ( todo => todo . hecho ). longitud ); función manipularTecla ( e ){ if ( e . tecla === "Entrar" ){ todos . pulsar ({ texto : entrada . valor , hecho : falso }); entrada . valor = '' ; } } </ script > < span estilo:font-size = "20px" estilo:font-weight = "bold" > Lista de tareas pendientes </ span > 
{hecho}/{todo} < br >	   
	   
	   
	   
	 
		  
			
			  
		
	

  
{#each todos como {texto, hecho}, índice}
	< tipo de entrada  = "casilla de verificación" bind:checked = {todos[índice].hecho} nombre = {texto}/ > < etiqueta para = {texto} estilo:text-decoration-line = {done?"line-through: "} > {texto} </ etiqueta > < br >  	
	  
	
{/cada}
< br > 
< etiqueta  para = "entrada" > Agregar tarea pendiente </ etiqueta > 
< br > 
< tipo de entrada  = "texto" nombre = "entrada" bind:this = {entrada} onkeypress = {handleKey}/ >

Proyectos asociados

Los mantenedores de Svelte crearon SvelteKit como la forma oficial de crear proyectos con Svelte. Es un marco de trabajo de estilo Next.js que reduce drásticamente la cantidad de código que se envía al navegador. Los mantenedores habían creado previamente Sapper, que fue el predecesor de SvelteKit. [28]

Los mantenedores de Svelte también mantienen una serie de integraciones para proyectos de software populares bajo la organización Svelte, incluidas integraciones para Vite , Rollup, Webpack , TypeScript, VS Code , Chrome Developer Tools, ESLint y Prettier. [29] Varios proyectos externos como Storybook también han creado integraciones con Svelte y SvelteKit.

Influencia

Vue.js modeló su API y sus componentes de archivo único según Ractive.js, el predecesor de Svelte. [11]

Adopción

Svelte es ampliamente elogiado por los desarrolladores. Ocupa el primer puesto en varias encuestas a gran escala para desarrolladores y fue elegido como el framework web más querido de Stack Overflow en 2021 y el framework frontend State of JS de 2020 con los desarrolladores más satisfechos. [30] [31]

Svelte ha sido adoptado por varias empresas web de alto perfil, entre las que se incluyen The New York Times , Apple , Spotify , Radio France (radiodifusora pública nacional francesa) , [32] Square , Yahoo , ByteDance , Rakuten , Bloomberg , Reuters , Ikea , Facebook , FrontPopulaire-2024 y Brave . [33] [34] [35]

Un grupo comunitario de personas que no son mantenedores, conocido como Svelte Society, organiza la conferencia Svelte Summit, escribe un boletín de Svelte, presenta un podcast de Svelte y aloja un directorio de herramientas, componentes y plantillas de Svelte. [36]

Véase también

Referencias

  1. ^ https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0 . Consultado el 23 de octubre de 2024 . {{cite web}}: Falta o está vacío |title=( ayuda )
  2. ^ abcd Rich Harris (22 de abril de 2019). «Svelte 3: Replanteando la reactividad». svelte.dev . Consultado el 7 de agosto de 2021 .
  3. ^ Harris, Rich (26 de noviembre de 2018). "La verdad sobre Svelte". GitHub Gist . Consultado el 21 de diciembre de 2022 .
  4. ^ ab Krill, Paul (2 de diciembre de 2016). "El marco Svelte, delgado y veloz, pone a JavaScript a dieta". InfoWorld .
  5. ^ ab "React vs. Svelte, el marco de trabajo de tiempo de compilación de JavaScript". react-etc.net .
  6. ^ ab "El marco de front-end Svelte 3 traslada la reactividad al lenguaje JavaScript, entrevista con Rich Harris". InfoQ .
  7. ^ por Rich Harris (27 de diciembre de 2018). "El DOM virtual es pura sobrecarga". svelte.dev .
  8. ^ abc "GitHub - sveltejs/svelte: Aplicaciones web mejoradas cibernéticamente". 11 de enero de 2020 – vía GitHub.
  9. ^ ab "Conversión de TS a JSDoc n.° 8569". GitHub.com .
  10. ^ Frontendeng.dev (1 de agosto de 2023). "Svelte vs React: ¿Qué framework es mejor?". frontendeng.dev .
  11. ^ ab Świstak, Tomasz (19 de noviembre de 2020). "Acerca del framework Svelte de JavaScript". Blog. ValueLogic . Archivado desde el original el 27 de marzo de 2022 . Consultado el 10 de junio de 2021 . Por cierto, la sintaxis de Vue ha sido influenciada por Ractive.js, un predecesor directo de Svelte.
  12. ^ abcd "Svelte Origins: A JavaScript Documentary". YouTube . Consultado el 9 de julio de 2022 .
  13. ^ "Rich Harris: Desarrollo web futurista". YouTube . Archivado desde el original el 2021-12-12 . Consultado el 2021-08-03 .
  14. ^ Harris, Rich (23 de marzo de 2021). "SvelteKit se encuentra en versión beta pública". svelte.dev . Consultado el 3 de agosto de 2021 .
  15. ^ team, The Svelte (22 de junio de 2023). "Anunciamos Svelte 4". svelte.dev . Consultado el 8 de agosto de 2023 .
  16. ^ "Conversión de TS a JSDoc". Hacker News (news.ycombinator.com) . 10 de mayo de 2023.
  17. ^ "Dios mío, no esperaba que una PR de refactorización interna terminara en el puesto número 1 en Hacker News. ..." Hacker News (news.ycombinator.com) . 2023-05-10.
  18. ^ "Svelte 5 está vivo". svelte.dev .
  19. ^ "Introduciendo runas". svelte.dev .
  20. ^ "{#snippet ...}". Docs. svelte.dev .
  21. ^ "Svelte 5 es React y quiero llorar". r/sveltejs. reddit.com .
  22. ^ Harris, Rich (11 de noviembre de 2021). "Hoy es un gran día para @sveltejs: ¡me uní a @vercel para trabajar en ello a tiempo completo!". Twitter . Consultado el 4 de septiembre de 2022 .
  23. ^ "https://twitter.com/trueadm/status/1640761270566633472". X (anteriormente Twitter) . Consultado el 30 de septiembre de 2023 . {{cite web}}: Enlace externo en |title=( ayuda )
  24. ^ "Contabilidad de SvelteKit 1.0". 2022-12-14 . Consultado el 2022-12-16 .
  25. ^ "Página del tutorial de Svelte". svelte.dev . Consultado el 6 de julio de 2022 .
  26. ^ "Ícono @sveltejs/kitTypeScript, que indica que este paquete tiene declaraciones de tipo integradas 1.15.5". npmjs . Consultado el 26 de noviembre de 2024 .
  27. ^ "@sveltejs/kit@1.15.5". GitHub . Consultado el 26 de noviembre de 2024 .
  28. ^ Harris, Rich (31 de diciembre de 2017). "Sapper: Hacia el marco ideal para aplicaciones web". svelte.dev . Consultado el 29 de noviembre de 2022 .
  29. ^ "Svelte". GitHub . Consultado el 3 de agosto de 2021 .
  30. ^ "Encuesta para desarrolladores de Stack Overflow 2021". Stack Overflow . Consultado el 26 de octubre de 2021 .
  31. ^ "Estado de JS 2020: Frameworks front-end". 2020.stateofjs.com . Consultado el 26 de octubre de 2021 .
  32. ^ "Radio France ha migrado su sitio a SvelteKit". reddit.com . Consultado el 4 de junio de 2024 .
  33. ^ "Svelte • Aplicaciones web mejoradas cibernéticamente". svelte.dev . Consultado el 3 de agosto de 2021 .
  34. ^ "Sitios web que utilizan Svelte - Wappalyzer". www.wappalyzer.com . Consultado el 3 de agosto de 2021 .
  35. ^ "Tu perfil, tu experiencia en el hogar". yourhome.fb.com . Consultado el 1 de diciembre de 2021 .
  36. ^ "Inicio - Svelte Society". sveltesociety.dev . Consultado el 3 de agosto de 2021 .
  • Sitio web oficial
  • svelte en GitHub
Obtenido de "https://es.wikipedia.org/w/index.php?title=Esbelta&oldid=1259754634"