Dolor y lágrimas en Svelte 3

En lugar del prólogo

El artículo será útil para aquellos que, al igual que decidimos probar Svelte en un proyecto en vivo. Nuestra pequeña empresa recibió una orden para desarrollar un administrador web para un servicio con un backend en Mongodb Stitch. En los últimos años, frontend Escribimos en React o Vue (dependiendo del tamaño del proyecto y si se necesita ReactNative), pero después de escuchar sobre la belleza de Svelte, decidimos probarlo para entender por nosotros mismos si es bueno. Y tal vez también deberíamos usarlo en lugar de Vue o React? ..

Quien es Svelte?

En pocas palabras: este es el nuevo marco js (pero no se considera así), que es el asesino de React and Vue, y bla, bla, bla ... En mi artículo, quiero considerar a Svelte no solo lo genial que está "bajo el capó", sino desde el punto Vista de la conveniencia de su uso en un proyecto real.
No fabricamos automóviles, los manejamos y tenemos clientes malvados con términos no menos malos.

Tutorial

Lo primero que comienza a aprender sobre un nuevo lenguaje o marco es un tutorial en el sitio. En Svelte, este es Svelte.dev/Tutorial .

Desafortunadamente, parte de los tutoriales simplemente no funciona en el sitio en la vista previa, mientras que no está del todo claro si funciona en realidad o no. Debe pasar tiempo y comprobarlo usted mismo manualmente, porque no está claro si el tutorial está desactualizado o si algo salió mal en el sitio web de Svelte. Y realmente lleva mucho tiempo.

UI Kit y Estilos

Encontrar un kit de interfaz de usuario para Svelte fue un dolor separado para todos nosotros. Quería exclamar: "Al menos Material, Bootstrap ... al menos algo ...".

Solo se encontraron sveltematerialui.com y svelteui.js.org , que en este momento parecían muy crudos.

Con una simple importación de <Button/> , un error se cayó del paquete durante el ensamblaje, no hubo tiempo para resolver el error del kit ui.

Habiendo revisado rápidamente la documentación, decidí abandonarla en favor de la importación de Vanilla desde CDN.

Quería usar Material UI en el proyecto, ya que el panel de administración probablemente se usará desde un dispositivo móvil, y Material es muy adecuado para esto (en mi opinión, se ve aún peor en el escritorio).

Usar JS sin un kit de IU me trajo mentalmente hace 10 años (locomotoras de clase y nostalgia amable).

Debido al hecho de que Svelte trabaja con el DOM "de una manera diferente", MaterialUI comenzó a sacar todo tipo de cosas desagradables relacionadas con la forma en que se muestran los componentes de la interfaz de usuario que se agregan a través de js a dom. Por ejemplo, se muestra una rueda giratoria cada dos veces:



Después de una larga búsqueda, lo que salió mal, resultó que la rueda giratoria en la interfaz de usuario del material se agrega a través de JS después de que el documento está listo (onLoad), pero después de este evento, Svelte comienza su adición al DOM y el material del script JS simplemente no lo ve ya que el evento fue antes

Esto tuvo que ser tratado agregando al componente padre de Svelte:

  afterUpdate(() => { componentHandler.upgradeDom(); }); 

Estilización

Con los estilos, todo está muy claro, rellenamos todos los estilos como en Vue. Escribes el estilo y todo está bien, y luego escribes el componente UI (ya que no tienes UIKit) que debería tomar parámetros de accesorios, por ejemplo ancho y alto, y lógicamente hacerlo así:

 <script> export let width = '20px'; export let height = '20px'; </script> <style> .loader { width: { width }, height: { height }, } </style> 

Y ... no, en el estilo no puedes insertar variables. Puede salir de esta situación a través de "ReactWay" y crear estilos dinámicos en el "script" como variables o funciones con retorno de estilo.

Como resultado, nuevamente tenemos gachas, parte del estilo en la parte de estilo en el script . El código puro se obtendrá solo si no tiene parámetros en los estilos o si solo tiene parámetros dinámicos y solo están en el script .

Enrutamiento y enrutadores

Sin un enrutador normal, ni siquiera puede hacer una aplicación de página.

Reaccione, Vue cuando el scalping del proyecto 'Hello World' ya viene con un enrutador en la caja (o puede seleccionarlo). Pero como todo en Svelte, esto no es fácil.

Debe elegir un enrutador usted mismo, e incluso entre soluciones muy similares. En verdad, solo hay dos enrutadores github.com/EmilTholin/svelte-routing y github.com/kazzkiq/svero hasta el momento.

Ambos son muy similares, pero elegí el primero, lo elegí por el número de estrellas (sí, lo sé, soy una persona terrible).

Entonces, comencemos a incrustarlo en nuestro MDL.

Envuelva todo en <Router url = "{url}"> y agregue <Link /> para los enlaces desde la navegación.



Ir a la vista previa y ver qué pasó.

Pero resultó que las enfermedades infantiles de Svelte continúan y las clases no pueden transferirse a <Link />. Surgió una pregunta razonable y ¿cómo la estilizarás?

Aparentemente esto todavía está en problemas para el enrutador.

Afortunadamente, podemos vincular nuestro a href = '' habitual al enrutador especificando el uso: enlace por el cual agradecemos especialmente.

Errores

A diferencia de React, que simplemente no le permitirá crear un paquete y gritará fuertemente sobre un error, Svelte recogerá perfectamente todo con un error. Al mismo tiempo, si olvidó algo, instale npm install o export, todo estará bien y solo mostrará una pantalla en blanco (por cierto, este fue el caso en las primeras versiones de React).

En React and Vue, solíamos ver tales errores en la etapa de compilación o pelusa.

Como resultado, deberás detectar errores en dos lugares. Para ser justos, esto es en React y Vue, pero con mucha menos frecuencia y estos errores obvios se detectan en la etapa de pelusa.

Svelte solo necesita una convención de nomenclatura

Encontrará este problema con bastante frecuencia, con la ausencia de una convención de nomenclatura.

Por ejemplo, de vuelta al enrutador.

Hay tal importación:

     import { Router, link, Link ,Route } from "svelte-routing"; 

¿Qué hay de este enlace y enlace ? Incluso en un proyecto tan pequeño como el mío, ya había confusión con la falta de convenciones de nombres en los proyectos utilizados en Svelte.

Por supuesto, debería haberse visto así en los ojos de ReactMan:

 import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing"; 

En Svelte hay una similitud con ref como en react, esta es una referencia a un elemento o componente dom.
El tutorial oficial nos dice que lo hagamos así:

 <script> let dialog; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

¿Y si tienes 15 variables en el componente?

 <script> let loading; let pins; let dialog; let stitch; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

¿Dónde y qué son realmente variables, y dónde están los enlaces a componentes o elementos?
Modificaría el tutorial y haría que los ejemplos sean más correctos desde el punto de vista de los principiantes y su convención de variables (consulte el Tutorial de React para un buen ejemplo). Si dejas que la vinagreta haga variables, sería bueno que el linter o el bundler jurara tal vinagreta, como por ejemplo, esto fue hecho por golang.

 <script> let dialogElement; </script> <dialog bind:this={dialogElement} class="mdl-dialog» /> 

Otro ejemplo de "vida" cuando recibe algunos datos en la función del componente y estos datos deben enviarse a su Vista , donde se atornilla alguna variable a la parte del elemento de la interfaz de usuario. Y se ve con nosotros (o más bien, con nuestro programador) así:

  async function ReloadPins() {        loading =  true;        pins = await getAllPins();        status = 0;    } 

Cuando abrí su código, inmediatamente "me quedó claro" que hay una variable de qué estado y cuál está conectado a nuestra interfaz de usuario .

Es broma, por supuesto, nada está claro. Además, el estado ni siquiera es claro o es solo una variable auxiliar. En React, esto se decide por estado, lo que al menos de alguna manera aporta claridad.

¿Qué ha cambiado dónde y quién lo hizo?

Las variables dentro del componente Svelte son globales y cambian en todas partes (hola angular).
Pero hay buenas noticias, son globales dentro de un componente (mientras Angular), por lo tanto, este cambio no es tan aterrador dentro de un componente.

Al mismo tiempo, ahorra tiempo en la "belleza" del código y no piensa en lo que necesita para hacer que el estado sea una variable, sino en qué dejar dentro de la función (hola Reaccionar): tiene todo y en todas partes.



Como resultado, usted escribe componentes rápidamente, pero es muy difícil entender lo que escribió un joven en esta "ensalada" unos días después cuando él mismo ya lo ha olvidado (a veces incluso su nombre). Debido a esto, será imposible entender lo que hay dentro sin una organización clara del código dentro del proyecto o equipo.

Puntada de unión

Stitch es una gran cosa, y definitivamente te contaré más al respecto, y lo compararé con otros, mediré las pruebas en producción en mi próximo artículo, pero ahora más sobre Svelte.

Para usar Stitch, deberá seguir el camino "Vanilla" e insertar:

 <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script> 

Como cuando se usa npm y un paquete de importación normal, comienza el problema con el error del búfer .

No sé si esto está relacionado con el colector Svelte o Stitch en sí, o algo más, pero no tuve tiempo de elegirlo y solo tuve que agregar un script con importación, después de lo cual todo funcionó con éxito.

Estos son los principales problemas que encontramos al trabajar con Svelte. Y para ser sincero, en general, no nos gustó, y nadie ...

¿Cuál es el resultado?

¿Por qué necesitas Svelte?

• Si trabaja solo y necesita urgentemente hacer MVP o un pequeño panel de administración. Habrá problemas con un panel de administración grande, porque cuando escriba un código nuevo, olvidará el antiguo o deberá escribir código auto documentado, ya que Svelte no lo "obliga" a hacerlo.
• Si el tamaño del paquete es muy importante para ti. Por ejemplo, está creando una aplicación web para un país en el que todavía no hay 3G o Internet es muy lento y muy costoso. En la mayoría de las partes del mundo, los programadores caros, no Internet, por lo que el tamaño del paquete dentro de límites razonables no será un problema real en el 99% de los casos.
  
• Si recién está comenzando a aprender a escribir en JS y hacer un front-end, Svelte le dará toda la libertad de "disparar en el pie", en un escritorio vecino o organizar disparos masivos en las piernas. De hecho, no necesitará aprender JSX o comprender las convenciones de código durante mucho tiempo, puede hacer inmediatamente su primer proyecto front-end y ver que ya ha tenido éxito y que algo funciona.
  

Basado en esto último, realmente no entiendo por qué los mantenedores de Svelte van a hacer que TypeScript sea compatible. Nos encanta Svelte solo por "disparar a las piernas" y TypeScript en mi opinión es como pistas todo terreno para el auto deportivo Svelte. Y ya sabes, después de haber trabajado con Svelte, me di cuenta de cuánto ha cambiado JS en los últimos años, y de que ya no es JS.

Svelte brinda la oportunidad de trabajar en el mismo JS antiguo y de la lámpara, sin PropTypes, Flow y TypeScript.

Que me gusto

• Bien legible if / else, que no está en Vue. Realmente me gustaría ver algo similar en Vue.
• Puede crear su evento en componentes y deshacerse de pasar devoluciones de llamada a funciones en child, para la comunicación entre child> parent.
  

¿Por qué no usar Svelte?

• No hay un solo kit de interfaz de usuario que funcione completamente. Es difícil imaginar una aplicación web sin UIKit; solo los proyectos grandes para los que Svelte simplemente no es adecuado pueden escribir el Kit UI ellos mismos. Atornillar algo vainilla entra en la creación de sus propios componentes de interfaz de usuario (su kit de interfaz de usuario) o en la lucha contra errores y clases de "locomotoras".
  
• La naturaleza implícita de algunos errores simples, y su captura solo en la etapa de prueba.
  
• Si va a hacer una aplicación multiplataforma (y ahora todo el mundo es móvil primero), tendrá que volver a escribir todo en ReactNative o terminar el NativeScript generado con sus manos (hay un generador NS de Svelte). Para ser justos, a Vue con desarrollo móvil tampoco le está yendo muy bien, pero también tiene algunas características de trabajo.
  
• Tendrá que encargarse de escribir una convención de código muy clara para sus desarrolladores en el proyecto, ya que el tutorial y los ejemplos no están hechos para el desarrollo del equipo.