La interfaz moderna ha recorrido un largo camino desde la época de jQuery y las páginas HTML normales. Ahora tenemos ensambladores, administradores de paquetes, un enfoque de componentes, SPA, SSR y mucho más.
Parece que tenemos todo lo que se necesita para la felicidad. Pero la industria está avanzando. Quiero contarles sobre el framework Svelte compilado, y qué ventajas tiene sobre los análogos.
Imagen de Andrew Walpole
Tendencias de Google
Para comprender la situación actual en el front-end, analicé la popularidad de las consultas en Google Trends para las palabras clave React, jQuery, Vue, Angular en Rusia en los últimos 5 años.
Tendencias de Google
En los últimos 5 años, el número de consultas relacionadas con jQuery ha disminuido significativamente, dando paso a marcos de componentes. Aunque jQuery ha perdido terreno, sigue siendo una herramienta de desarrollo popular.
A partir de este gráfico, podemos concluir que las bibliotecas de componentes ganaron la delantera, y React es el líder en Rusia.
Mercado laboral
Escribimos código no solo para nosotros, sino también por dinero. Sobre todo por el dinero. Por lo tanto, es una tontería considerar la popularidad de los marcos aislados del mercado laboral.
Por el número de vacantes en hh, React está en primer lugar, seguido de jQuery y otras bibliotecas de componentes. Si observamos el número de solicitantes que indicaron las bibliotecas en cuestión en sus habilidades clave, jQuery conoce 5 veces más solicitantes que React. Y 15 veces más grande que Angular.
Mercado laboral
Las siguientes conclusiones se pueden extraer de este gráfico:
- Los marcos de componentes son los más populares entre los empleadores, el más popular entre ellos es React.
- Entre los solicitantes, la biblioteca más común es jQuery.
Entonces, los marcos de componentes ganaron. Frontend resolvió los problemas que enfrentaron los desarrolladores durante jQuery. Pero los nuevos enfoques dan lugar a nuevos problemas. ¿Qué problemas veo?
- Rendimiento
En enero de este año, Google anunció la posibilidad de publicar aplicaciones PWA en Google Play, allanando el camino para javascript en la tienda de aplicaciones nativas. Esto impone una cierta responsabilidad a los desarrolladores, ya que los usuarios esperan el rendimiento de las aplicaciones nativas, no debería haber diferencia para el consumidor.
Javascript también conquista dispositivos de baja potencia. Este es un televisor inteligente, reloj, IoT. Dichos dispositivos tienen un presupuesto limitado de memoria y procesador, por lo que los desarrolladores no pueden permitirse desperdiciar sus recursos en el usuario.
En el trabajo, tenemos experiencia en la ejecución de aplicaciones React en un centro de Internet. Resultó más o menos. - Alto umbral de entrada.
Como vimos anteriormente, la mayoría de los solicitantes de empleo señalan las habilidades de jQuery, no reaccionan. Dominar los conceptos de React es mucho más difícil que conectarse a una página jQuery y comenzar a crear. - Dependencia del marco.
Si tiene una biblioteca de componentes escrita en React, es poco probable que pueda reutilizarla en un proyecto Vue o Angular. Te conviertes en un rehén del ecosistema.
Esbelta Con sabor a vainilla.
En abril de este año, se lanzó la tercera versión del marco compilado Svelte.
Svelte ofrece a los desarrolladores la capacidad de escribir código declarativo de alto nivel que, después de la compilación, se convierte en código imperativo de bajo nivel. Esto también permite realizar una sacudida de árbol efectiva y, como resultado, permite enviar un paquete mínimo al cliente.
Veamos qué soluciones ofrece Svelte para los problemas sonados.
Como React es la biblioteca más popular en Rusia, habrá más ejemplos en React.
1. Rendimiento
Si está comenzando a familiarizarse con la nueva biblioteca, lo más probable es que comience el recorrido con una lista de tareas pendientes. Esta es una tarea bastante simple, que a menudo es más fácil de escribir en vainilla. Si desea profundizar en el marco, entonces una revisión de Real World Application es una gran opción. Este es un blog que es esencialmente un clon de Medium. Hay registro, autorización, creación de publicaciones, comentarios, me gusta. Los especialistas en framework escriben la implementación de la funcionalidad y la agregan a la colección Real World Application .
En FreeCodeCamp se publicó un artículo sobre la comparación de aplicaciones del mundo real escrito en diferentes marcos.
Si observamos el tamaño del paquete final, entonces Svelte supera a sus competidores. Solo se envían 9.7kb de código al cliente. Como resultado, lleva menos tiempo transferir datos, analizar y procesar su código.
Comparación del tamaño del paquete de aplicaciones del mundo real
Y el mejor código no es código escrito.
Si observamos la cantidad de líneas de código necesarias para escribir la funcionalidad de la aplicación, entonces Svelte necesitará alrededor de 1,000 líneas y reaccionará alrededor de 2,000 líneas. Cuanto menos código en su aplicación, menos errores y soporte más fácil.
Comparación del tamaño del código de aplicación del mundo real
Echemos un vistazo al rendimiento. js-framework-benchmark ofrece una comparación del rendimiento de renderizado entre frameworks front-end. La prueba es dibujar una tabla con una gran cantidad de filas. Se realizan más manipulaciones con esta tabla: actualización parcial o completa, creación, limpieza, eliminación de líneas.
Al momento de la actualización, Svelte muestra el mejor momento o un momento comparable. Svelte es muy equilibrado, no hay distorsiones al realizar diferentes tipos de operaciones.
Comparación del tiempo de ejecución de la actualización, ms
Si observamos la cantidad de memoria consumida, entonces Svelte es la menos voraz entre las bibliotecas en cuestión.
Comparación de la cantidad de memoria consumida, mb
No estaba acostumbrado a decir una palabra y decidí revisar todo yo mismo. Encontré la implementación del punto de referencia DBMonster para el front-end y reescribí la implementación en React 16.8 y Svelte 3. La prueba consiste en representar la tabla y luego actualizar las filas.
¿Cómo se ve la prueba DBMonster?
Durante la prueba, Svelte consumió 10 MB menos de memoria y se actualizó 10 ms más rápido que React.
Esbelto / reaccionar
Las pruebas anteriores son sintéticas, pero a partir de ellas se puede concluir que al desarrollar en Svelte saldrá de la caja:
- Tamaño de paquete más pequeño
- Menos consumo de memoria
- Renderizado más rápido.
2. Umbral de entrada alto
Si observamos el componente más simple en React, entonces necesita importar React, escribir una función que devolverá el marcado y exportar su componente. Total 3 líneas de código.
import React from 'react'; const Component = () => (<div>Hello</div>); export default Component;
Si miramos el ejemplo más simple de un componente en svelte, simplemente escribes el marcado. Total 1 línea de código.
<div>Hello</div>
Estrictamente hablando, el componente Svelte más simple es un archivo vacío. Esto hace posible crear una plantilla para su aplicación a partir de archivos vacíos y luego comenzar el desarrollo. En este caso, nada se romperá.
También puede tomar el diseño recibido de la máquina de escribir e inmediatamente usarlo como un componente Svelte sin transformaciones adicionales. El html válido es un componente esbelto.
Quiero compartir un ejemplo de una entrevista sobre la posición del desarrollador de reacción media.
setFilter() { this.switchFlag = !this.switchFlag } ... <button onClick={setFilter}>Filter</button>
El candidato intentó guardar el estado del botón de filtro directamente en la propiedad de la clase. Reaccionar, a pesar de su nombre, no es lo suficientemente reactivo como para responder a tales cambios. Esto sugiere que incluso los desarrolladores intermedios tienen dificultades para obtener los patrones de actualización de estado que utiliza React.
Veamos un ejemplo de un botón que aumenta el contador con un clic.
En React, necesita una variable para mantener el estado y una función que pueda actualizar el estado. A continuación, debe asignar un controlador para la actualización del botón en sí. En total, obtuve 8 líneas de código.
import React from 'react'; const Component = () => { const [count, setCount] = React.useState(0) return <button onClick={() => setCount(count + 1)}> Clicked {count} </button> } export default Component;
Para resolver un problema similar en Svelte, necesita una variable para almacenar el estado. Además en el controlador, simplemente cambia el valor de esta variable. Total 6 líneas de código.
<script> let count = 0; </script> <button on:click={()=>count+=1}> Clicked {count} </button>
Vamos a complicar un poco el ejemplo. Supongamos que necesitamos un campo de entrada que muestre su estado al lado.
En React, todavía necesitamos una variable y una función para actualizar el estado. Luego, en el campo de entrada, debe transferir el valor actual y asignar un controlador a los cambios. Terminé con 11 líneas de código.
import React from 'react'; const App = () => { const [value, setValue] = React.useState(''); return ( <React.Fragment> <input value={value} onChange={e => setValue(e.target.value)} /> {value} </React.Fragment> ); } export default App;
Para resolver este problema en Svelte, necesita una variable que almacene el estado, y luego solo haga un enlace bidireccional en el campo de entrada. Total de 5 líneas de código.
<script> let value = ''; </script> <input bind:value={value}/> {value}
Si alguna vez animó la eliminación de un elemento del DOM en React, simpatizo con usted. Reaccionar requerirá un contenedor que retrasará la eliminación del elemento del DOM y realizará la animación, o el elemento permanecerá en el DOM, pero la animación requerirá el control de la propiedad de visualización u otras manipulaciones para que el elemento no ocupe espacio.
Traté de encontrar la implementación más simple en React, al final obtuve 35 líneas de código. Si tiene una solución más simple, comparta en los comentarios.
Fadein fadeout reaccionar import React from "react"; import "./style.css"; const App = () => { const [visible, setVisible] = React.useState(true); return ( <React.Fragment> <button onClick={() => setVisible(!visible)}>toggle</button> <div className={visible ? "visible" : "invisible"}>Hello</div> </React.Fragment> ); }; export default App;
.visible { animation: fadeIn 0.5s linear forwards; } .invisible { animation: fadeOut 0.5s linear forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
En Svelte, un componente similar requiere solo 8 líneas de código. Svelte tiene un módulo incorporado para administrar animaciones. Importa el tipo deseado de animación y luego dice cómo animar su componente al agregar y eliminar.
<script> import { fade } from 'svelte/transition'; let visible = true; </script> <button on:click={()=>visible=!visible}>toggle</button> {#if visible} <div transition:fade>Hello</div> {/if}
La disponibilidad le permite a Svelte proporcionar abstracciones geniales al desarrollador. Y si no los usa, no caerán en el paquete final.
Por ejemplo, el módulo de transición tiene una funcionalidad de fundido cruzado que le permite animar un componente cuando se mueve de un nodo DOM a otro. Al usarlo, puede hacer una transición de tareas en la lista de tareas pendientes.
Otro ejemplo de abstracciones geniales es el uso: directiva. Le permite asignar un controlador personalizado a un elemento DOM. En el siguiente ejemplo, los eventos de presionar y mover, así como los eventos táctiles, se procesan con una sola función.
Después de conocer a Svelte, mis amigos suelen decir que no han experimentado este tipo de desarrollo front-end divertido desde jQuery.
3. Dependencia del marco
Cuando llegó React, había muchos widgets jQuery en la web. Encontrar el componente correcto en React fue difícil. Luego, comenzaron a aparecer envoltorios para widgets jQuery, que pudieron sincronizar React y jQuery. Después de eso, los componentes escritos en React ya han comenzado a aparecer.
Ahora una situación similar con React en sí. Hay un montón de soluciones y bibliotecas listas para usar que no le permiten transferir a otro marco sin problemas.
¿Qué ofrece Svelte? Después de la compilación, su código se convierte en JS normal, que no requiere tiempo de ejecución. Esto hace posible utilizar el componente Svelte en otros marcos. Solo necesita un envoltorio universal. Por ejemplo, un adaptador para React y Vue svelte-adapter . Al envolver el componente en el adaptador, puede usar el elemento como un componente regular.
import React from "react"; import SvelteSpinner from "svelte-spinner"; import toReact from "svelte-adapter/react"; const Spinner = toReact(SvelteSpinner, {}, "div"); const App = () => <Spinner size={50} />
Svelte admite la compilación en un elemento personalizado, que amplía aún más el alcance de la aplicación de componentes. Puede ver el soporte de elementos personalizados con varios marcos en elementos personalizados en todas partes .
Experiencia personal
Todavía no puedo escribir en Svelte en el trabajo, porque estamos sentados en el ecosistema React, pero tengo proyectos personales.
Anteriormente escribí cómo publiqué mi aplicación Metalz en Google Play.
Según mis sentimientos, Svelte le permite escribir código más conciso y comprensible, al tiempo que proporciona una amplia gama de herramientas para simplificar la implementación.
Contras
Al igual que cualquier marco joven, Svelte tiene un pequeño ecosistema de soluciones listas para usar y pocos artículos donde puede encontrar las mejores prácticas. Por lo tanto, no recomendaría tomar Svelte de inmediato para grandes proyectos, ya que puede terminar en un callejón sin salida arquitectónico.
Prueba Svelte en pequeños proyectos, estoy seguro de que te gustará.