SolidStart 1.0: Echando un vistazo bajo el capó

Rate this content
Bookmark

SolidStart es el Meta-Framework de pila completa del ecosistema SolidJS. Reúne múltiples herramientas y bibliotecas de manera componible para ofrecer bases altamente eficientes, comprensibles y escalables para aplicaciones web. Vamos a explorar cómo SolidStart resuelve problemas comunes de UX y DX para construir aplicaciones mejores.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

Atila Fassina
Atila Fassina
30 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

SolidStart es un framework de pila completa eficiente, sin opiniones y ergonómico que proporciona excelentes valores predeterminados y flexibilidad. Incluye características como un empaquetador, un serializador, un servidor y un enrutador. El serializador, Seroval, permite la transmisión y la sincronización en tiempo real del estado entre el servidor y el cliente. SolidStart ofrece rutas de archivos potentes, RPC y mutaciones de un solo vuelo. Se recomienda para construir interfaces de usuario en aplicaciones completas, Spark, aplicaciones de una sola página y aplicaciones nativas.

1. Introducción a SolidStarts

Short description:

♪♪♪ Gracias por estar aquí. Hablemos un poco sobre SolidStarts. SolidStarts es cuando agregamos muchas otras características a Solid para convertirlo en un framework de pila completa. Es eficiente, sin opiniones y ergonómico. El ecosistema de Solid se basa en la idea de tener excelentes valores predeterminados y ofrecer mucha flexibilidad. Las herramientas y JavaScript en el desarrollo web son como piezas de LEGO. Construimos algo más grande componiendo piezas de LEGO. Si comenzamos a pegar las piezas de LEGO, arruinamos la diversión. SolidStarts evita eso al proporcionar excelentes valores predeterminados y flexibilidad.

♪♪♪ Gracias por estar aquí. Gracias, Phil, por la introducción. Y sí, he estado en Europa por un tiempo. Dejé de contar después de la primera década. Entonces, sí, hablemos un poco sobre SolidStarts. Espero que algunos de ustedes, imagino que la mayoría de ustedes, hayan estado en la presentación principal hoy donde Ryan habló mucho sobre los desafíos del desarrollo front-end en la actualidad, y probablemente se hayan preguntado cómo un tipo con esas ideas podría crear un framework. Entonces, hablemos un poco al respecto.

Pero antes que nada, sí, Attila o Achla o como sea que salga de tu boca, si entiendo que me estás hablando, te responderé, lo prometo. Trabajo como líder de DevRel en una empresa llamada Crab Nebula. Trabajamos con otro framework llamado Tauri, que es un framework para construir aplicaciones híbridas, y creemos que tiene una muy buena combinación con Solid. Así que también trabajo con Solid a diario. Soy parte del equipo de Solid DX, y soy un GDE. Entonces, si tienes algún comentario, pregunta, cualquier cosa, puedes usar estos prácticos accesos directos en mi sitio web, porque nombrar las cosas en la web es difícil, y cambio de manejadores en todas partes. Así que solo agrega una red social y me encontrarás, y prometo que responderé.

Pero, sí, sin más preámbulos, ¿qué diablos es SolidStarts? Escuchaste a Ryan hablar sobre ello y probablemente lo conozcas como el creador de Solid. Entonces, SolidStarts es básicamente cuando agregamos muchas otras características a Solid para convertirlo en un framework de pila completa. Y la idea es ser eficiente, sin opiniones y ergonómico. Entonces, un framework de Solid, diría yo, debido a todo ese punto que él tenía cuando dijo que quería construir un SolidStarts, un meta-framework que odia a los meta-frameworks. Entonces, como miembro del equipo de DX, parte de mi trabajo es tomar estos fragmentos de conocimiento, dolor y sufrimiento que él tiene, y traducir eso en cómo eso imprime la visión de la herramienta en sí misma. Entonces, muchas de las diapositivas de esta charla se tratan de profundizar en lo que eso realmente significa.

Entonces, primero, ¿a quién le gusta LEGO aquí? Me encanta LEGO. Espero que aprecien la analogía. Entonces, sí, las herramientas y JavaScript y el desarrollo web, diría yo, son como piezas de LEGO. Vamos componiendo cosas y por sí solas no hacen mucho. Esperemos que si hacen demasiado, probablemente sea un problema. Pero cuando lo hacen, tienen muchas características agradables y luego las juntamos y construimos algo más grande. Esas son nuestras aplicaciones. Y luego, llegamos a la conclusión en el equipo de Solid de que si comenzamos a pegar las piezas de LEGO, arruina un poco la diversión, porque luego construimos algo que es genial para nosotros en ese momento, en ese período, pero luego, si crecemos o cambiamos de opinión, o vemos algo que es genial y encajaría en el medio, es un poco difícil hacerlo. Entonces, decidimos que no, ese no sería el caso. Entonces, SolidStarts está construido y todo el ecosistema de Solid está construido en torno a la idea de tener excelentes valores predeterminados, brindándote la mejor experiencia posible desde el principio, pero también ofreciendo mucha flexibilidad.

2. Explorando SolidStarts

Short description:

Entonces, si no quieres usar una parte de eso, puedes quitarla y construir la tuya propia. Tus opiniones son bienvenidas en toda la pila. ¿Cómo se ve una aplicación de SolidStarts real? SolidStarts es el núcleo del framework, empaquetado con un bundler, un serializador y un servidor. Solid en sí es la biblioteca de renderizado para la interfaz de usuario. El enrutador maneja la lógica del lado del cliente y la carga de datos, incluida la navegación suave. También está disponible el paquete de metatags. Bajo el capó, SolidStarts está construido teniendo en cuenta la flexibilidad. El serializador, Seroval, deduplica las respuestas de la API para ahorrar memoria y ancho de banda. También tiene la capacidad de transmitir datos. La primera demo es el sitio web Raven.

Entonces, si no quieres usar una parte de eso, puedes quitarla y poner lo que quieras, puedes construir la tuya propia. Esa es la idea. En otras palabras, tus opiniones son bienvenidas en toda la pila. Literalmente, si no te gusta el enrutador que construimos, puedes construir el tuyo propio. Y es casi tan fácil usar un enrutador externo como usar el nuestro. Y eso funciona para todo, cualquier otra cosa.

Entonces, ¿cómo se ve una aplicación de SolidStarts real desde la distancia? Tenemos SolidStarts, que es el núcleo de este framework. SolidStarts viene empaquetado con un bundler, un serializador y un servidor. Luego tenemos Solid en sí, la biblioteca de renderizado que te ayuda a renderizar la interfaz de usuario. Tenemos el enrutador, que se encargará de la lógica del lado del cliente y también de la carga de datos. Puedes crear diferentes URL, puedes gestionar el estado entre las URL. Se encargará de la navegación suave, todas estas piezas molestas que necesitamos reinventar en los navegadores. También se encargará de la parte de carga de datos. Te proporciona algunas primitivas agradables para trabajar. Y luego, el último, el héroe más desconocido, son las metatags. También tenemos un paquete para eso. Puedes construir el tuyo propio, pero sí, no hay nada emocionante en eso.

Entonces, sí, la idea es echar un vistazo bajo el capó de SolidStarts, ¿verdad? Entonces, lo que mencioné antes en esta diapositiva anterior, lo siento, lo que mencioné antes en esta diapositiva anterior fue en realidad el núcleo y luego todas las cosas que se construyen sobre él, ¿verdad? Lo que vamos a hacer ahora es tomar esta pieza y ver qué hay debajo del capó aquí. Entonces, ¿qué construye SolidStarts? Y la flexibilidad que realmente te ofrecemos. No se trata de quitar las partes que se integran a él, sino de poder jugar con los aspectos internos. Y para eso, necesitas entenderlo. Como dijo Ryan en su charla, tener un servidor entre tú, tu cliente y tu usuario es algo complicado. Para eso, tenemos nuestro serializador. Se llama Seroval. Imagina esto. Tienes tres funciones de servidor que estás haciendo como una mejor práctica. Obtienes datos del servidor y luego quieres pasarlo al cliente. Lo que hace Seroval es tomar todas estas funciones y deduplicar las referencias, lo que significa que si diferentes solicitudes de API tienen la misma respuesta, solo serializaremos eso una vez para ahorrarte algo de memoria en el servidor y ahorrarte ancho de banda de tráfico también. Además, debido a que todo en la web es muy naturalmente asíncrono, lo que Seroval también tiene la capacidad de hacer es transmitir datos, lo que nos lleva a la primera demo.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
Enfrentando la Crisis Existencial del Frontend
React Summit 2024React Summit 2024
37 min
Enfrentando la Crisis Existencial del Frontend
I'm honored to be here today. The past decade has been dominated by single-page apps. Loading JavaScript is about 35 times slower than images on low-end devices. Server rendering involves sending more JavaScript and HTML, increasing payload and effort. React was developed for complex apps, but business needs have pushed towards simpler websites. Metrics for testing frameworks include code execution costs, bundle size, and payload size. Islands, popularized by frameworks like Astro and Fresh, break up apps into sections for server rendering. React's solution is to use islands and communicate in a diffing format. Quik reduces code execution and size, eliminating double-serializing. Frameworks like Solid Start provide tools for server rendering in a lightweight package. WASM frameworks have improved in performance. Next.js partial pre-rendering and HTMX offer solutions for sites with less interactivity.
SOLIDifica Tu Código React
React Day Berlin 2023React Day Berlin 2023
11 min
SOLIDifica Tu Código React
Clean code is easily understood, readable, changeable, extensible, and maintainable. SOLID principles enforce good practices for scalable and maintainable software. The Single Responsibility Principle (SRP) ensures that components have a single reason to change. The Open-Close Principle (OCP) allows components to be easily extended without modifying the underlying source code. The Liskov Substitution Principle (LSP) enables swapping child elements within a subtype component. The Interface Segregation Principle (ISP) states that components should only depend on the props they actually use.