SolidStart: una clase diferente de metamarco

 

 

 


Índice
  1. Módulos sobre monolitos
  2. ¿Qué es SolidStart exactamente?
  3. 1. Sólido
  4. 2. invitar
  5. 3. Nitro
  6. 4. Vinxi
  7. 5. Seroval
  8. Todo viene junto
  9. Consideraciones finales

¿Estás listo para un pequeño ejercicio de separar un marco y volver a unir las piezas? En este artículo, Atila Fassina explica cómo los metamarcos han evolucionado en torno a las bibliotecas centrales a su manera.

 

El panorama actual de las herramientas web es cada vez más complejo que nunca. Contamos con bibliotecas como Solid, Vue, Svelte, Angular, React y otras que manejan las actualizaciones de la UI (interfaz de usuario) de forma ergonómica. El tema cada vez más importante que pesa sobre los desarrolladores es el equilibrio y la compensación entre las mejores prácticas de rendimiento y usabilidad.

Los desarrolladores también están desdibujando las líneas entre el código front-end y back-end. La forma en que colocamos la lógica y los datos se vuelve más interesante a medida que integramos y combinamos la forma en que trabajan juntos para brindar una experiencia de aplicación unificada.

Con estos cambios de ideología en mente, los metamarcos han evolucionado alrededor de las bibliotecas centrales de maneras únicas. Para encapsular los paradigmas en los que se representa la interfaz de usuario y crear una interoperabilidad perfecta entre el código de nuestro servidor y el código de nuestro navegador, están surgiendo nuevas prácticas .

Si bien la idea inicial de tener un marco "meta" era unir diferentes conjuntos de herramientas para crear experiencias fluidas, es difícil crear integraciones sin tomar algún nivel de decisiones obstinadas. Por lo tanto, marcos como QwikCity, SvelteKit, Redwood y Next.js se adentraron en su propio territorio obstinado y proporcionaron una vía sólida para garantizar un conjunto definido de convenciones.

Mientras tanto, otros como Nuxt, Remix y Analog se quedaron con una abstracción más superficial de sus integraciones, permitiendo una combinación de sus herramientas y utilizando más fácilmente los recursos de la comunidad (Vite es un buen ejemplo de una herramienta que es utilizada superficialmente por todos). a ellos).

Esto no solo produce una menor dependencia del proveedor para los desarrolladores, sino que también permite que la configuración se reutilice en algunos casos, ya que tales decisiones se eliminan de las opiniones en favor de abstracciones más sólidas. SolidStart da un paso de gigante hacia un territorio imparcial. Su propio núcleo consta de alrededor de 1500 líneas de código, y las funciones más importantes se proporcionan con una combinación de herramientas bien integradas.

 

Módulos sobre monolitos

El impulso detrás de desacoplar completamente la arquitectura es darle poder al desarrollador consumidor para elegir el marco y construirlo de acuerdo a sus deseos. Es posible que un desarrollador quiera usar Solid y SSR, pero imaginemos que el código heredado tiene una estrecha dependencia de TanStack Router, mientras que SolidStart y la mayoría de los proyectos de Solid tienen Solid-Router en su lugar. Con una arquitectura desacoplada, es posible crear una capa de adopción o integración incremental para que todo funcione adaptado para el mejor beneficio del equipo.

La arquitectura desacoplada que sustenta los marcos más nuevos también permite al desarrollador disfrutar de una mejor experiencia de depuración dentro y fuera de su comunidad. Si se encuentra un problema en el servidor, no está limitado al conocimiento de un marco específico.

Por ejemplo, dado que ambos están basados ​​en Nitro, las comunidades Analog y SolidStart ahora pueden compartir conocimientos entre sí. Más allá de eso, debido a que todos están basados ​​en Nitro y Vite, Nuxt, Analog y SolidStart pueden implementarse en las mismas plataformas y compartir detalles de implementación para hacer que cada ecosistema crezca en conjunto. La comunidad gana con este enfoque y los desarrolladores de bibliotecas/marcos también ganan. Este es un patrón y un enfoque radicalmente nuevos para compartir conjuntamente el peso del mantenimiento del metamarco (una de las responsabilidades más temidas de los mantenedores).

¿Qué es SolidStart exactamente?

SolidStart se construye a partir de cinco pilares fundamentales:

  1. Solid : la biblioteca de vistas que proporciona abstracciones de renderizado.
  2. Vite (dentro de Vinxi): el paquete para optimizar el código para su ejecución en diferentes tiempos de ejecución.
  3. Nitro (dentro de Vinxi): el servidor web agnóstico creado por el equipo de Nuxt y basado en h3 con Rollup.
  4. Vinxi : el orquestador, lo que determina dónde están los tiempos de ejecución y el código que tiene cada uno.
  5. Seroval : el serializador de datos que unirá los datos desde el servidor al navegador y viceversa.

La anatomía de SolidStart.

1. Sólido

Solid como biblioteca de renderizado se ha vuelto cada vez más popular debido a su increíble rendimiento de renderizado y su delgada capa de abstracción. Está construido sobre Signals, una implementación moderna y renovadora del patrón Observer clásico, y proporciona una serie de ayudas para capacitar al desarrollador para crear código de rendimiento extremadamente alto y fácil de leer .

 

Utiliza JSX y tiene una sintaxis muy similar a React, pero en el fondo funciona de una manera completamente diferente. Acercar al desarrollador al DOM y al mismo tiempo proporcionar la ergonomía necesaria para ser productivo en el entorno del desarrollador. Con solo 3 Kb de tamaño de paquete, suele ser una opción incluso para sitios en su mayoría estáticos. por ejemplo, muchas personas utilizan Solid para aportar interactividad a sus sitios web de Astro basados ​​en contenido cuando es necesario. Mazos del Hearthstone

Solid también ofrece primitivas de primera clase, componentes de flujo de control integrados, gestión de estado de alta calidad y compatibilidad total con TypeScript. Solid tiene un gran impacto en un paquete pequeño y eficiente.

2. invitar

Vite, posiblemente el mejor paquete del ecosistema de JavaScript, tiene el equilibrio adecuado entre configuración declarativa y personalizable. Está completamente basado en TypeScript, lo que facilita su ampliación mediante la biblioteca o el marco de trabajo, y tiene una base de usuarios lo suficientemente grande como para garantizar su versatilidad. Vite funciona y se ha convertido en la herramienta de facto para muchos frameworks , como Astro, Vue, Preact, Elm, Lit, Svelte, Nuxt, Analog, Remix y muchos otros.

Aparte de su popularidad, es especialmente apreciado por su rápido tiempo de inicio del servidor, compatibilidad con HMR, compilaciones optimizadas, facilidad de configuración, rico ecosistema de complementos, herramientas modernas y experiencia general de desarrollador de alta calidad.

3. Nitro

Nitro, un marco en sí mismo, está escrito en TypeScript y es completamente agnóstico y abierto para que cualquier metamarco lo utilice como base. Proporciona un potente conjunto de herramientas y API para gestionar el almacenamiento en caché, las rutas y la agitación de árboles. Es una base rápida para que cualquier proyecto basado en JavaScript construya su servidor. Nitro es altamente escalable, se integra fácilmente en canales de DevOps y CI/CD, está centrado en la seguridad, es robusto y cuenta con un amplio conjunto de adaptadores, lo que lo hace implementable en la mayoría, si no en todas, las plataformas de los principales proveedores.

Piense en Nitro como una extensión atornillable que hace que Vite sea más fácil de construir y más flexible. Resuelve la mayoría de los problemas a nivel de tiempo de ejecución que deberían resolverse en Vite.

4. Vinxi

Vinxi es un SDK (kit de desarrollo de software) que ofrece un potente conjunto de herramientas basadas en configuración para crear aplicaciones completas. Compone Nitro bajo el capó para establecer un servidor web y aprovecha Vite para agrupar componentes. Está inspirado en la API de la aplicación Bun y funciona a través de una interfaz muy declarativa para crear instancias de una aplicación configurando enrutadores para cada tiempo de ejecución.

Por ejemplo:

 

import { createApp } from "vinxi";import solid from "vite-plugin-solid";const resources = { name: "public", mode: "static", dir: "./public",};const spa = { name: "client", mode: "build", handler: "./app/client.tsx", target: "browser", plugins: () = [solid({ ssr: true })], base: "/_build"}const server = { name: "ssr", mode: "handler", handler: "./app/server.tsx", target: "server", plugins: () = [solid({ ssr: true })],}export default createApp({ routers: [resources, spa, server],});

Como las rutas de recursos funcionan como un depósito, al definirlas mode: "static"no es necesario definir un controlador. Su enrutador también puede construirse estáticamente ( mode: “build”) y orientarse hacia el tiempo de ejecución del navegador, o puede estar en el servidor y manejar cada solicitud a través de su punto de entrada handler: "./app/server.tsx".

Vinxi aprovechará el conjunto correcto de API de Nitro y Vite para que sus recursos no queden expuestos a tiempos de ejecución incorrectos y para que la implementación funcione sin problemas para los proveedores de plataformas definidos.

5. Seroval

Una vez que los enrutadores están configurados y la aplicación puede manejar la navegación (navegación dura a través del controlador "ssr" y navegación suave a través del controlador "cliente"), es hora de unirlos. Esta es la parte donde entra en juego el núcleo de SolidStart. Proporciona API que ofrecen la ergonomía necesaria para recuperar y mutar solicitudes .

Todas estas API funcionan con otra biblioteca independiente llamada Seroval. Para enviar datos entre el servidor y el cliente de forma segura, es necesario serializarlos todos. Seroval se define a sí mismo de una manera demasiado simplista: "Stringify JS Values". Sin embargo, esta definición no aborda el hecho de que lo hace de una manera extremadamente poderosa y rápida.

Gracias a Seroval, SolidStart puede cruzar de forma segura y eficiente el límite de la serialización. Podría decirse que la serialización de recursos es la característica más importante de un marco de trabajo completo: sin ella, el puente back-end y front-end simplemente no funcionará sin problemas.

Además de la serialización de recursos, SolidStart también puede utilizar acciones del servidor. Directamente de la documentación , así es como nos parecen las acciones del servidor (tenga en cuenta la "use server"directiva que permite a Vinxi colocar el código en el lugar correcto).

import { action, redirect } from "@solidjs/router"; const isAdmin = action(async (formData: FormData) = { "use server"; await new Promise((resolve, reject) = setTimeout(resolve, 1000)); const username = formData.get("username"); if (username === "admin") throw redirect("/admin"); return new Error("Invalid username");}); export function MyComponent() { return ( form action={isAdmin} method="post" label for="username"Username:/label input type="text" name="username" / input type="submit" value="submit" / /form );}

Todo viene junto

Después de esta ruptura, es posible que las cosas todavía estén un poco en el aire. Entonces, cerremos el ciclo ensamblando las piezas:

Con suerte, este pequeño ejercicio de separar el marco y volver a unir las piezas fue interesante y revelador. Déjame saber en los comentarios a continuación o en X si esto te ha ayudado a comprender mejor o incluso a elegir las herramientas para tu próximo proyecto.

Consideraciones finales

Este artículo no habría sido posible sin la ayuda técnica de mi increíble gente del equipo de Solid: Dave Di Biase , Alexis Munsayac , Alex Lohr , Daniel Afonso y Nikhil Saraf . ¡Gracias por sus reseñas, ideas y, en general, por hacerme parecer más inteligente!

(Illinois)Explora más en

  • API
  • javascript
  • Marcos





Tal vez te puede interesar:

  1. ¿Deberían abrirse los enlaces en ventanas nuevas?
  2. 24 excelentes tutoriales de AJAX
  3. 70 técnicas nuevas y útiles de AJAX y JavaScript
  4. Más de 45 excelentes recursos y repositorios de fragmentos de código

SolidStart: una clase diferente de metamarco

SolidStart: una clase diferente de metamarco

Índice Módulos sobre monolitos ¿Qué es Soli

programar

es

https://aprendeprogramando.es/static/images/programar-solidstart-una-clase-diferente-de-metamarco-1181-0.jpg

2024-04-04

 

SolidStart: una clase diferente de metamarco
SolidStart: una clase diferente de metamarco

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20