Documentación Full Stack

Rate this content
Bookmark

Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front-end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin la molestia de instalar paquetes o clonar repositorios.

Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo en el equipo de Svelte estamos utilizando tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.

28 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla analiza el cambio a los frameworks full stack y los desafíos de la documentación full stack. Destaca el poder de los tutoriales interactivos y la importancia de las pruebas de usuario en el desarrollo de software. La charla también presenta learn.svelte.dev, una plataforma para aprender herramientas full stack, y discute la hoja de ruta de SvelteKit y su documentación.

Available in English

1. Introducción a Web-O-Man

Short description:

Bienvenidos de nuevo. Es otra semana, hemos avanzado un poco. Me encontré con una canción marinera del siglo XIX sobre las técnicas en evolución que utilizamos para entregar HTML a nuestros usuarios. Se llama Web-O-Man. Las respuestas fueron otorgadas desde el Lambda lejano. Un día, cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos. Si no quieres obtener tus datos tarde, simplemente renderiza tu página dentro de V8. La vida al límite es bastante genial, amigos, este es el camino.

Bienvenidos de nuevo. Es otra semana, hemos avanzado un poco.

Muy bien. Mientras investigaba para esta charla, me encontré con una canción marinera del siglo XIX sobre las técnicas en evolución que utilizamos para entregar HTML a nuestros usuarios. Estaba muy adelantada a su tiempo. Pensé en compartirla con ustedes. Se llama Web-O-Man, y algunos de ustedes pueden conocer la melodía. Si es así, me encantaría que se unieran. Si podemos conseguir que algunas personas canten aquí, esto hará que todo esto sea mucho menos incómodo para todos nosotros. Al menos, por favor ayúdenme a mantener el ritmo.

Vamos. Había una vez un lugar para ejecutar tu código en US-East-1. Las solicitudes de nodo sin contenedor llegaban. Las respuestas fueron otorgadas desde el Lambda lejano. Pronto, el servidor responde para mostrarnos las maquetas. Un día, cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos. Los inicios en frío retenían los datos. Lidane dijo que deberías usar Jamstack. Sonaba bien, así que lo intentó por un tiempo de todos modos. Pronto, el servidor responde para mostrarnos las maquetas. Un día, cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos.

Los archivos estáticos son geniales a menos que necesites algo de una base de datos. Entonces tendrás que hacer una solicitud para ahuyentar a los spinners. Pronto, el servidor responde para mostrarnos las maquetas. Un día, cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos. Si no quieres obtener tus datos tarde, simplemente renderiza tu página dentro de V8. La vida al límite es bastante genial, amigos, este es el camino. Pronto, el servidor responde para mostrarnos las maquetas. Un día, cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos.

Una vez más.

2. The Shift to Full Stack Frameworks

Short description:

Pronto, no, el servidor responde para mostrarnos maquetas. Un día cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos. Hola, mi nombre es Rich, trabajo en un marco de interfaz de usuario llamado Svelte. Muchos cálculos se están alejando de los servidores y se están trasladando al borde de la red. Los marcos de front-end se ven afectados por esta tendencia. Los meta-marcos como NeXT, NUXT, SvelteKit y SolidStart están ganando popularidad. Las funciones de borde utilizan las mismas API web que el navegador. Trabajo en SvelteKit, el marco de pila completa oficial para Svelte. Se ejecuta en cualquier lugar donde se ejecute JavaScript y se puede implementar en cualquier plataforma sin bloqueo.

Pronto, no, el servidor responde para mostrarnos maquetas. Un día cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos.

La última vez.

Pronto, no, el servidor responde para mostrarnos maquetas. Un día cuando se ejecute el Javascript, tomaremos nuestra página y nos iremos.

Lo logramos, gente magnífica, los amo por unirse.

Hola, déjenme presentarme, mi nombre es Rich, trabajo en un marco de interfaz de usuario llamado Svelte, soy uno de los cientos de colaboradores y trabajo en código abierto a tiempo completo en Vercel. La canción que estábamos cantando describe una tendencia importante en el desarrollo web. Muchos cálculos se están alejando de los servidores y las funciones de origen único y se están trasladando al borde de la red. Gracias a cosas como Deno y Fastly, Cloudflare, las funciones de Vercel que se ejecutan en Cloudflare y Netify, alguien como yo que sabe muy poco sobre cosas de back-end puede implementar una aplicación que está instantáneamente disponible en milisegundos para los usuarios en cualquier lugar del planeta. Creo que esto es un cambio tectónico en cómo construimos cosas en la web, aunque hay algunos problemas sin resolver sobre dónde colocamos nuestros datos, por ejemplo.

Mientras tanto, los marcos de front-end también se ven afectados por esta tendencia. Cuando piensas en marcos, probablemente pienses en React o Vue, o si eres un poco más hipster de JavaScript, puedes pensar en Svelte o Solid. Pero cada vez más, no usamos estos marcos por sí solos, usamos meta-marcos como NeXT, NUXT, SvelteKit y SolidStart. Y estos son conjuntos de herramientas para construir una aplicación completa, en lugar de solo algunos componentes. Traen una herramienta de compilación, un servidor de desarrollo, tu enrutamiento, todas esas cosas. Y lo más importante, además de ejecutarse en el navegador, también se ejecutan en un entorno de servidor. Podemos llamarlos marcos de pila completa, con el riesgo de molestar a los nerds enojados, que vigilan el uso de ese tipo de terminología. Y así, está ocurriendo esta interesante convergencia. Las tecnologías de front-end están comenzando a reclamar territorio de back-end, mientras que el back-end se está volviendo más accesible para aquellos de nosotros que tradicionalmente somos operadores de front-end.

En muchos casos, las funciones de borde utilizan las mismas API web que estamos acostumbrados a usar en el navegador. Así que trabajo en SvelteKit, que es el marco de pila completa oficial para Svelte, y estamos muy orgullosos de lo que hemos construido. Creemos que es muy convincente. Se ejecuta en cualquier lugar donde se ejecute JavaScript. Se ejecuta en Node, se ejecuta en un Lambda, se ejecuta en el borde, se ejecuta en tu navegador. Pronto se ejecutará en un service worker. Y puedes implementarlo en cualquier plataforma que desees. No hay bloqueo. Cuando creas un proyecto, no te preguntamos dónde lo vas a implementar.

3. Full-Stack Documentation Dilemma

Short description:

Puedes pensarlo más tarde y cambiar de opinión. Está construido sobre las API estándar web como solicitud y respuesta. Utiliza VEET, por lo que tiene esta experiencia de desarrollador de clase mundial. Tiene enrutamiento basado en sistema de archivos. Tiene una huella pequeña. Cuando estás utilizando entornos sin servidor y funciones de borde, es importante minimizar la cantidad de JavaScript que necesita iniciarse para que esa función comience a servir respuestas. Puedes hacer representación dinámica del lado del servidor. Puedes generar un sitio estático. Puedes construir una aplicación de una sola página. Puedes combinar todas esas cosas dentro de la misma aplicación. Está construido sobre Svelte, lo que significa que podrás construir una aplicación más rápidamente usando SvelteKit que con cualquier otro marco. La combinación de Svelte y las funciones de borde de Vercel te permite hacer lo dinámico a la velocidad de lo estático. Pero hay una gran interrogante que se cierne sobre el panorama de los marcos de pila completa. ¿Cómo demonios hacemos la documentación de pila completa? Nadie ha resuelto realmente esto, creo, hasta ahora. La documentación es una palabra, pero son muchos conceptos diferentes. Tenemos documentación de referencia, material explicativo, tutoriales y guías. Los tutoriales y las explicaciones están relacionados con el aprendizaje. Las explicaciones y el material de referencia se tratan de reforzar tus conocimientos teóricos.

Puedes pensarlo más tarde y cambiar de opinión. Está construido sobre las API estándar web como solicitud y respuesta. Utiliza VEET, por lo que tiene esta experiencia de desarrollador de clase mundial. Si no has usado VEET, te animo a que lo pruebes. Tiene enrutamiento basado en sistema de archivos. Tiene una huella pequeña. Tanto en el cliente, todos sabemos que debemos minimizar la cantidad de JavaScript que servimos al cliente, pero también en el servidor. Cuando estás utilizando entornos sin servidor y funciones de borde, es importante minimizar la cantidad de JavaScript que necesita iniciarse para que esa función comience a servir respuestas.

Como salida flexible, puedes hacer representación dinámica del lado del servidor. Puedes generar un sitio estático. Puedes construir una aplicación de una sola página. Puedes combinar todas esas cosas dentro de la misma aplicación. Está construido sobre Svelte, lo que significa que podrás construir una aplicación más rápidamente usando SvelteKit que con cualquier otro marco, o te devolvemos tu dinero. Y, por supuesto, el propio marco es rápido. Como le gusta decir a mi jefe, la combinación de Svelte y las funciones de borde de Vercel te permite hacer lo dinámico a la velocidad de lo estático.

Pero hay una gran interrogante que se cierne sobre el panorama de los marcos de pila completa. Y la pregunta es esta. ¿Cómo demonios hacemos la documentación de pila completa? Nadie ha resuelto realmente esto, creo, hasta ahora. Pero antes de entrar en eso, necesitamos hablar sobre de qué hablamos cuando hablamos de documentación. Así que la documentación es una palabra, pero son muchos conceptos diferentes. Me gusta pensar en ello como un pastel, específicamente un pastel Battenberg. No sé si tienen pasteles Battenberg en Europa continental, pero deberían, son fantásticos. Este pastel Battenberg tiene documentación de referencia, que es lo que tendemos a pensar cuando pensamos en documentación. Estas son tus interfaces, tus API, y así sucesivamente. Tenemos material explicativo que te brinda una descripción general a un nivel más alto de algunos de los conceptos en tu herramienta. Tenemos guías que enseñan a un usuario experimentado cómo hacer cosas específicas con tu herramienta. Luego tenemos tutoriales, que enseñan a las personas cómo usar la herramienta en primer lugar. Y la razón por la que estos a menudo se confunden en proyectos de código abierto es que todos se superponen de formas interesantes. Los tutoriales y las explicaciones están relacionados con el aprendizaje. Las explicaciones y el material de referencia se tratan de reforzar tus conocimientos teóricos.

4. The Power of Interactive Tutorials

Short description:

La referencia y los tutoriales son para los usuarios existentes, mientras que los tutoriales son para crear nuevos usuarios. Los tutoriales interactivos son la forma más importante de documentación, ya que involucran a los usuarios en el proceso de aprendizaje. Knockout fue un hito en el desarrollo web y su tutorial fue influyente. El tutorial de Svelte utiliza un enfoque de máquina de Rube Goldberg con retroalimentación instantánea y fácil accesibilidad. A la gente le encanta este tutorial.

La referencia y los tutoriales, ambos son para tus usuarios existentes, mientras que los tutoriales son guías paso a paso para lograr algún objetivo. De hecho, podemos representarlos como un cuadrante, como una serie de cuadrantes, con el aprendizaje y la aplicación en los extremos opuestos de un eje y el conocimiento teórico y los pasos prácticos en los extremos opuestos del otro eje. No se me ocurrió esto, es de un tipo llamado Daniela Prosida, y si estás involucrado en los esfuerzos de documentación, y deberías estarlo, porque creo que la documentación es al menos el 50 por ciento del trabajo en cualquier proyecto de software, te animo a que veas su charla `Lo que nadie te dice sobre la documentación` y el sitio web que la acompaña, deartaxis.framework.

Hay una cita a menudo malinterpretada que me gusta mucho, que dice: `Dime y lo olvidaré. Muéstrame y tal vez recuerde, pero involúcrame y entenderé`. Tus documentos de referencia son buenos para decirte qué hacer. Tu material explicativo y tus tutoriales son buenos para mostrarte cómo lograr una tarea específica. Pero si quieres que las personas realmente aprendan lo que les estás ofreciendo, necesitas involucrarlas, y ahí es donde entran los tutoriales interactivos. Los tutoriales son la forma más difícil de documentación de escribir y son los más frecuentemente pasados por alto, pero creo que son los más importantes. Obviamente, necesitas tener documentación de referencia, pero puedes tener la mejor documentación de referencia del mundo. No importará si nadie está usando tu cosa. Los documentos de referencia son cómo sirves a tus usuarios existentes, pero los tutoriales son cómo creas nuevos usuarios.

Hace una década, me di cuenta del poder de los tutoriales interactivos cuando comencé a aprender Knockout, uno de los OG frameworks de front-end. ¿Quién recuerda Knockout? Knockout fue un hito real en el desarrollo web. Ha sido un poco opacado en los últimos años por frameworks más modernos, pero en su momento fue muy importante, y yo y muchas otras personas aprendimos Knockout a través de este increíble tutorial. Steve Sanderson, si por algún milagro estás viendo esta charla, gracias por todo lo que has hecho por mi carrera y por tantas otras personas. Fue realmente un hito.

Así que cuando creamos Svelte hace unos años, sabíamos que queríamos traer esta idea de vuelta a la era moderna. Este es el tutorial de Svelte. Es un poco como una máquina de Rube Goldberg. Lo que tenemos aquí es Rollup ejecutándose dentro de un web worker, y si completo uno de los ejemplos aquí, verás que en realidad está reconstruyendo la aplicación en cada pulsación de tecla. Así obtenemos esta agradable retroalimentación instantánea, y es una forma muy fácil de aprender a usar el framework. No has tenido que descargar nada, no has tenido que instalar nada. Está justo ahí y listo para usar. Podemos instalar paquetes de NPM desde unpackage.com, y tenemos un editor CodeMaker, y la gente honestamente ama este tutorial.

5. SvelteKit's Tutorial and Inspirational Teachers

Short description:

Muchas personas nos han dicho que esta es la razón por la que se convirtieron en desarrolladores de Svelte. Este es el tutorial de SvelteKit. Actualmente es un error 404 porque el tutorial existente que construimos solo cubre Svelte en sí mismo. Y así concluimos que era hora de comenzar de nuevo. Y reconstruir todo. Y si vamos a hacer esto, queremos maximizar su efectividad como herramienta educativa. Pero descubrimos que el cine está lleno de ejemplos de profesores inspiradores. Profesores como Morfeo. Otro gran ejemplo es el Sr. Miyagi de Karate Kid.

Muchas personas nos han dicho que esta es la razón por la que se convirtieron en desarrolladores de Svelte, incluso personas en el equipo principal lo han dicho. Y otros frameworks han seguido su ejemplo. Este es el tutorial de Vue, aquí hay uno de Solid, y aquí hay uno de Lit. Todos son sorprendentemente similares en forma y estructura porque este es un formato que ha demostrado funcionar.

Pero este es el tutorial de SvelteKit. Actualmente es un error 404 porque el tutorial existente que construimos solo cubre Svelte en sí mismo. No cubre SvelteKit, el framework de pila completa. Y no creemos que eso sea muy bueno. Queremos poder enseñar a las personas cómo usar SvelteKit de la misma manera que actualmente les enseñamos a usar Svelte. Y así concluimos que era hora de comenzar de nuevo. Y reconstruir todo. Y si vamos a hacer esto, queremos maximizar su efectividad como herramienta educativa. Así que comenzamos a analizar, ya sabes, la ciencia de la enseñanza para ver si hay algunos principios pedagógicos pertinentes que podrían promover el progreso de las personas. Y luego decidimos que sería mucho trabajo y deberíamos simplemente ver algunas películas en su lugar.

Pero descubrimos que el cine está lleno de ejemplos de profesores inspiradores. Profesores como Morfeo. En este clip de The Matrix, Neo está caminando por la calle. Morfeo le está enseñando cómo sobrevivir en la Matrix cuando Neo se distrae con la mujer de vestido rojo. La mujer de vestido rojo, por supuesto, no es una simple transeúnte. Resulta ser una amenaza mortal. Y en ese momento, Neo aprende cómo puede sobrevivir en la Matrix. Pero en realidad no está en la Matrix porque Morfeo, como buen profesor, se adhiere a este principio. La seguridad primero. Si quieres que las personas aprendan, debes proporcionarles un entorno seguro de aprendizaje para que puedan aprender las habilidades que van a usar en la vida real. Otro gran ejemplo es el Sr. Miyagi de Karate Kid, quien enseña a Daniel cómo hacer karate haciéndolo lavar autos. Encerar, pulir. Encerar, pulir. Por razones que no están claras, tanto para Daniel como para nosotros, la audiencia, hasta más tarde en la película cuando Daniel de repente se da cuenta de que ha estado desarrollando la memoria muscular que necesita para ser un experto en karate.

6. Teaching and Documentation

Short description:

Miyagi no teme la repetición. Él abraza la repetición. Porque la repetición es cómo se aprende. En El Imperio Contraataca, Yoda demuestra el poder de la Fuerza a Luke. A veces, los profesores necesitan ayudar a los estudiantes. En Un Detective en el Kinder, Arnold se da cuenta de que los estudiantes pueden ser demonios del caos. La Hermana Mary Clarence de Cambio de Hábito 2 aprende a conectar con sus estudiantes y salvar la escuela. Permítanme compartir en qué hemos estado trabajando con nuestra nueva documentación.

El Sr. Miyagi no teme la repetición. Él abraza la repetición. Porque la repetición es cómo se aprende. La repetición es cómo se aprende. La repetición es cómo se aprende.

En El Imperio Contraataca, justo después del inspirador discurso de Yoda de hacerlo o no hacerlo, no hay intentar. Luke, después de no poder recuperar su X-Wing estrellado del pantano, se marcha y se lamenta en el bosque como un adolescente quejumbroso. Y Yoda se da cuenta de que si va a enseñar a Luke sobre el poder de la Fuerza, tendrá que demostrarlo él mismo. Y eso es lo que hace. Cierra los ojos, extiende el brazo y levanta la nave del pantano, para asombro de Luke.

A veces, cuando las personas están aprendiendo, se quedan atascadas en algo. Y está bien. El trabajo de los profesores es asegurarse de que eso no sea el final de su viaje de aprendizaje. Y así, Yoda, como cualquier buen profesor, reconoce que a veces hay que ayudarlos.

En Un Detective en el Kinder, Arnold interpreta a John Kimble, un detective del LAPD que, por razones que no tienen ningún sentido, se ha infiltrado en un jardín de infancia. Y él cree que después de haber pasado su career trabajando con criminales peligrosos, un aula llena de niños pequeños no será ningún problema. Y como cualquiera que haya conocido a niños pequeños sabrá, está gravemente equivocado. Los niños se descontrolan, causan un caos absoluto y Arnold se da cuenta de que en realidad tiene mucho trabajo por delante. El principio aquí es que los estudiantes son demonios del caos.

Finalmente, la Hermana Mary Clarence de Cambio de Hábito 2, a quien traen para salvar la Academia St. Francis del cierre. Ella está enseñando una clase de música y no logra conectar con sus alumnos. No quieren aprender, hasta que un día, uno de ellos comienza a cantar y toda la clase se une, y ella se da cuenta de que sí tiene una forma de conectar con ellos después de todo. Y la Hermana Mary, que en secreto es Delores van Cartier, la artista de Las Vegas, encuentra una forma de hacer que estos niños aprendan lo que necesitan y se salva la escuela. El principio aquí es que no se puede obligar a las personas a aprender. Hay que encontrarse con ellos donde están.

Así que sin más preámbulos, me gustaría compartir un poco de lo que hemos estado trabajando con nuestra nueva documentation, y cómo hemos estado aplicando algunos de estos principios. Voy a pasar a otro ejemplo aquí. Ups. Si pudiera escribir, ayudaría.

7. Learning Through Exercises and User Testing

Short description:

Vamos a intentarlo una vez más. Sigue las instrucciones del lado izquierdo para completar los ejercicios y aprender nuevos conceptos sobre el uso de Svelte. Las secciones del tutorial son cortas y autocontenidas para evitar que los errores arruinen todo. El entorno controlado te permite cometer errores de forma segura. El copiar y pegar está desactivado para fomentar el desarrollo de la memoria muscular. El tutorial proporciona un botón de solución cuando te quedas atascado. Las pruebas de usuario son cruciales en el desarrollo de software.

Voy a ver si el WiFi nos trata bien hoy. Vamos a intentarlo una vez más.

Muy bien. Aquí vamos. El trabajo en cada una de estas secciones del tutorial consiste en seguir las instrucciones del lado izquierdo para completar algunos ejercicios y aprender nuevos conceptos sobre cómo usar Svelte. Estas secciones son cortas y autocontenidas a propósito, porque cuando estás trabajando en algo como esto, es fácil cometer un error. Podrías introducir un error de sintaxis que arruine todo por completo. Queremos que puedas recargar la página y volver a lo que estabas haciendo sin preocuparte por perder tu progreso. Deliberadamente no introducimos temas complejos a lo largo de una serie de tareas. Todo está autocontenido.

Además, este editor de archivos aquí, el editor de árbol de archivos, tenemos un único componente, app.svelte, y no te damos la capacidad de crear nuevos componentes o eliminar componentes porque eso no cumple con los objetivos de aprendizaje. Te proporcionamos un entorno controlado en el que es seguro cometer errores porque estamos siguiendo el principio de Morfeo, la seguridad primero.

Ahora, como programador perezoso, mi primer instinto cuando veo algo como esto es intentar copiar este código del lado izquierdo al editor de código de la derecha. Pero tan pronto como hago eso, aparece esto y me dice que el copiar y pegar está actualmente desactivado. Esto puede parecer un movimiento hostil, pero es porque así es como aprendemos. La repetición es cómo se aprende. No lo voy a hacer de nuevo. Y así, aunque puedes copiar y pegar, puedes seleccionar la opción para permitirte copiar y pegar si es necesario, si tienes prisa por alguna razón, intentamos que desarrolles la memoria muscular que utilizarás cuando uses Svelte fuera de los límites de este tutorial. Al igual que Yoda, sabemos que ocasionalmente los estudiantes se frustrarán y eso no debería ser el final de su viaje de aprendizaje.

En este ejemplo, la idea es hacer que este punto naranja siga al ratón con un poco más de personalidad de la que tiene actualmente y tal vez en algún momento del camino cometa un error y simplemente no pueda resolverlo, por eso hay un gran y prominente botón naranja de solución. Lo presiono y se completa el tutorial. Puedo jugar con la configuración y pasar un buen rato.

Este próximo principio no es tanto algo que haya informado el diseño de esta plataforma, es simplemente un principio general en el desarrollo de software. Mi prometida no es programadora. De hecho, está en alguna parte de esta habitación, pero no voy a señalarla, porque no quiero ser asesinado mientras duermo. Se interesó por lo que estaba haciendo y la senté frente a esta aplicación y le pedí que completara una sección y observé con horror absoluto, haciendo una mueca de arrepentimiento, mientras ella rompía todo de formas que nunca podría haber imaginado. Eso es lo que sucede cuando sometes tu software a usuarios reales. Hay un dicho en el ejército, ningún plan sobrevive al contacto con el enemigo. Creo que en nuestro campo debería ser ningún software sobrevive al contacto con los usuarios, porque no lo hará. Las pruebas de usuario son lo más valioso que puedes hacer.

8. Meeting Users Where They Are

Short description:

Minuto a minuto aprenderás mucho más si puedes sentar a las personas frente a tu software y observar las formas creativas en las que lo rompen. Como resultado de esa experiencia, pudimos realizar mejoras en el propio framework y ahora es mucho más resistente a cierta clase de errores. Finalmente, encuéntralos donde están. El propósito de esta sección es enseñarte sobre las raíces. Tenemos dos raíces, una raíz de índice y una raíz de acerca de. Si estamos en la raíz de índice, podemos hacer clic en el enlace de acerca de y nos llevará a la página de acerca de. Esta es una interfaz de línea de comandos que se ejecuta dentro de node. Svelte depende de node porque lee del sistema de archivos y sin embargo lo estamos ejecutando en el navegador. Estamos haciendo trampa un poco. Entonces eso nos lleva de vuelta a la pregunta ¿cómo hacemos documentación de pila completa? Bueno, hay un montón de servicios que nos permiten trabajar con un IDE en línea en el navegador y luego ejecutar el código en un servidor en la nube. Cosas como code sandbox, Gitpod, repplet, GitHub code spaces. Y todas estas son herramientas fenomenalmente poderosas que mucha gente usa a diario y son muy sofisticadas e impresionantes. Y las amo. Realmente las amo.

Minuto a minuto aprenderás mucho más si puedes sentar a las personas frente a tu software y observar las formas creativas en las que lo rompen. Como resultado de esa experiencia, pudimos realizar mejoras en el propio framework y ahora es mucho más resistente a cierta clase de errores.

Finalmente, encuéntralos donde están. Así que mencioné que el propósito de reconstruir esto era para que también pudiéramos admitir SveltKit, así como Svelt. Tenemos algún trabajo en progreso sobre la documentación de SveltKit aquí. Vamos a ir a esto. Verás que ahora en el editor de árbol de archivos no solo tenemos un componente único, tenemos un proyecto completo con un package.json y SveltConfig y todas estas otras cosas. El propósito de esta sección es enseñarte sobre las raíces. Tenemos dos raíces, una raíz de índice y una raíz de acerca de. Si estamos en la raíz de índice, podemos hacer clic en el enlace de acerca de y nos llevará a la página de acerca de.

Se nos invita a editar eso, agregar un enlace así. Podemos hacer clic en eso. Resulta que puedes volver a casa. Pero ¿cómo estamos haciendo esto? Esta es una interfaz de línea de comandos que se ejecuta dentro de node. Svelte depende de node porque lee del sistema de archivos y sin embargo lo estamos ejecutando en el navegador. Estamos haciendo trampa un poco. Dice localhost. Eso es porque lo estoy ejecutando en mi propia máquina. Si miramos aquí, dentro de learn.svelte.dev hemos creado un montón de aplicaciones diferentes y se ven así. Si miro la página de índice. Literalmente lo hemos escrito en el sistema de archivos. Si hago algunos cambios aquí, se reflejan en el sistema de archivos y así es como funciona. Pero esto no es escalable. No podemos pedirle a la gente que clone nuestro repositorio y ejecute el servidor por sí mismos en su propia máquina local. Claramente necesitamos hacer algo mejor para encontrarnos con nuestros estudiantes donde están. Entonces eso nos lleva de vuelta a la pregunta ¿cómo hacemos documentación de pila completa? Bueno, hay un montón de servicios que nos permiten trabajar con un IDE en línea en el navegador y luego ejecutar el código en un servidor en la nube. Cosas como code sandbox, Gitpod, repplet, GitHub code spaces. Y todas estas son herramientas fenomenalmente poderosas que mucha gente usa a diario y son muy sofisticadas e impresionantes. Y las amo. Realmente las amo.

9. StackBlitz y learn.svelte.dev

Short description:

Ejecutar servidores es costoso y requiere una barrera de autenticación. StackBlitz permite editar y ejecutar código en el navegador con un servidor que se ejecuta dentro de él. Utiliza contenedores web, que compilan Node a WebAssembly y lo ejecutan en el sandbox de seguridad del navegador. La interfaz de usuario de StackBlitz está optimizada para la exploración y el desarrollo, no para el aprendizaje. Por eso creamos learn.svelte.dev, un trabajo en progreso que utiliza la tecnología de contenedor web subyacente de forma headless. Es un cambio de juego para informes de errores y producción de ejemplos. Hemos trabajado con el equipo de StackBlitz para hacer esto realidad.

He utilizado estos para enseñar en el pasado y creo que son extremadamente valiosos. Pero no creemos que sea la elección correcta para un tutorial como este por varias razones. En primer lugar, ejecutar servidores es costoso, lo que significa que necesitas tener una barrera de autenticación antes de que las personas puedan comenzar a usarlo. De lo contrario, todos comenzarán a minar Bitcoin en ellos. Y no queremos eso. Así que queremos tener una barrera de autenticación antes de que las personas comiencen a aprender.

Además, no queremos la latencia que implica iniciar un servidor. Queremos tener una recarga instantánea de módulos y todas esas cosas. Y filosóficamente, simplemente queremos minimizar nuestra dependencia de terceros que podrían sufrir interrupciones o cambiar sus términos de servicio. Todas esas razones son por las que estoy muy emocionado acerca de StackBlitz.

StackBlitz es otro de estos servicios que te permite editar código en un editor en el navegador y luego ejecutarlo en un servidor. Pero la diferencia es que el servidor se ejecuta en realidad dentro de tu navegador. La tecnología se llama contenedores web y es algo mágico. Probablemente no le haga justicia, pero funciona algo así. Compilaron Node a WebAssembly, lo empaquetaron junto con un cliente NPM personalizado y luego lo ejecutan dentro del sandbox de seguridad del navegador. Así que no necesito instalar nada en mi máquina local, no tengo que preocuparme por ransomware ni nada de eso, todo se ejecuta dentro del navegador.

Hace unos meses agregaron soporte para SvelteKit, lo cual fue complicado porque utiliza JavaScript nativo y eso significa que ahora puedes ir a SvelteKit.new y crear instantáneamente una aplicación completa de SvelteKit sin tener que instalar nada en absoluto. Y esto ha sido un cambio de juego absoluto para obtener cosas como informes de errores y también para producir ejemplos. Así que es muy tentador simplemente incrustar todo eso dentro de nuestra página de tutorial y listo, pero no es lo ideal. Esta interfaz de usuario está optimizada para la exploración y el desarrollo, no está optimizada para el aprendizaje. Así que queremos tener más control sobre la interfaz de usuario. ¿No sería genial si pudiéramos tomar la tecnología de contenedor web subyacente y usarla de forma headless dentro de nuestra propia página? Bueno, eso es exactamente lo que hicimos. Hemos estado trabajando con el equipo de StackBlitz en las últimas semanas para hacer esto realidad. Así que hoy, anunciamos learn.svelte.dev, es un trabajo en progreso. Pero funciona, puedes jugar con él, y está intentando cargar a través de la lenta conexión Wi-Fi de la conferencia, ten paciencia, normalmente es un poco más rápido que esto. Lo que hemos hecho es ir a la red de Vercel Edge, descargar la aplicación y luego eso ha ido y ha descargado Node, ha instalado Node en la máquina, hemos instalado SvelteKit y sus dependencias como Vite y ESBuild, hemos escrito nuestro sistema de archivos de la aplicación y hemos iniciado un servidor de desarrollo de Vite, y esto normalmente ocurre en cuestión de segundos, pero en condiciones de conferencia podría llevar un poco más de tiempo. Así que supongamos que eso no va a funcionar y terminaré rápidamente. Creo que es un momento fenomenalmente emocionante para ser un desarrollador web. Ahora tenemos mucho poder al alcance de nuestras manos. Desde que comenzamos a construir esto, sé de al menos otros dos frameworks que han comenzado a trabajar en algo muy similar.

QnA

Learning Full Stack Tools and Audience Questions

Short description:

Espero que esto se convierta en la norma para aprender herramientas de pila completa. Gracias al equipo de StackBlitz y a todos los involucrados en el desarrollo de learn.svelte.dev. Vamos allá. Parece prometedor y tiene una barrera baja para probarlo. Ahora, pasemos a las preguntas de la audiencia. Primera pregunta de Sherman sobre algo comparable a quasar.dev en el ámbito de Svelte. Aún no lo tenemos, pero es nuestra intención que Svelte kits apunten a esos entornos en el futuro.

Así que espero que esto se convierta pronto en la norma de cómo aprendemos herramientas de pila completa, y no solo se aplica a los frameworks, sino a cualquier cosa que se ejecute en Node, interfaces de línea de comandos como build tools y testing tools, y así sucesivamente.

Quiero agradecer a las personas de StackBlitz por ser unos socios fenomenales mientras construíamos esto. Y también quiero agradecer a todos los que estuvieron involucrados en el desarrollo de learn.svelte.dev en aspectos como accessibility, UX, design, testing, y más. Y quiero agradecerles a todos ustedes. Gracias.

Así que vamos allá. Sí. Muy bien. Parece muy prometedor. Gracias. Y estoy deseando probarlo yo mismo. Y creo que es genial ver lo fácil que es probarlo. Creo que va a atraer a muchos usuarios nuevos. Espero que sí. Bueno, al menos a mí.

Así que pasemos a las preguntas de la audiencia. También tengo algunos problemas de Wi-Fi. Primera pregunta de Sherman. ¿Hay algo comparable a quasar.dev en el ámbito de Svelte? No sé si estás familiarizado con eso. Quasar.dev. Si... Uf. Creo que quasar es un conjunto de herramientas para construir aplicaciones que pueden ejecutarse en Electron, así como en la web y tal vez crear aplicaciones móviles también. Aún no tenemos algo así. Pero definitivamente es nuestra intención que los Svelte kits puedan apuntar a entornos como ese. Una vez que lancemos Svelte kit, eso es lo que vamos a buscar hacer. Sí. Muy bien. Entonces, aún no está ahí. No está ahí todavía. No.

Roadmap, Local Environment, and Documentation

Short description:

En el roadmap. Sí. La siguiente pregunta es de Elliot sobre cómo pasar del tutorial al entorno local. Es fácil comenzar con una aplicación de Svelte kit en tu máquina local. Solo tienes que escribir npm init svelte y seguir las indicaciones. Wilhelm pregunta sobre la documentación interna versus externa. Optimizamos para los nuevos usuarios, pero planeamos crear guías de cómo hacerlo para integrar con herramientas existentes. La plataforma está construida y es fácil agregar nuevo contenido.

En el roadmap. Sí. Y el roadmap está muy vacío. Sí. La siguiente pregunta es de Elliot. ¿Cómo ayudas a los usuarios a pasar del entorno de tutorial al entorno local, lo cual requiere conocimiento de las herramientas que estás intencionalmente ocultando? Sí. En realidad, es muy sencillo comenzar con una aplicación de Svelte kit en tu máquina local. Todo lo que necesitas hacer es escribir npm init svelte y seguir las indicaciones. En el espacio de 10 o 15 segundos, obtendrás una configuración muy similar a la que tienes en el navegador. Hemos tratado de minimizarlo tanto como sea posible. Siempre estamos interesados en nuevas formas de hacerlo más accesible. Pero hasta ahora, creemos que es razonable. Tiene sentido.

La siguiente pregunta es de Wilhelm. ¿Cuál es la diferencia entre la documentación interna y externa? Tus ejemplos parecen estar optimizados para nuevos usuarios en lugar de colaboradores. Sí, eso es muy cierto. Estamos optimizando para los nuevos usuarios primero porque, ya sabes, esa es la audiencia que generalmente recibe menos atención en la documentación. Y, ya sabes, hay una gran cantidad de ejemplos y tutoriales producidos por la comunidad que enseñan cómo integrarse con x e y, y así sucesivamente. Y dado que ese terreno ya está bastante cubierto, nos preocupamos principalmente por los nuevos usuarios. Pero definitivamente queremos utilizar el mismo formato para hacer guías de cómo hacerlo para integrar con esas herramientas en el futuro. Nuevamente, aún no está ahí, pero está en nuestro roadmap. Sí, entonces, si entiendo correctamente, has estado construyendo la plataforma, básicamente esta nueva forma de documentar para los nuevos usuarios, pero ahora la base está ahí y, por supuesto, es muy fácil extenderla para los Svelte existentes. Exactamente. Es muy fácil agregar nuevo contenido a la plataforma. Sí.

Muy bien. Eso es todo el tiempo que tenemos para preguntas y respuestas, pero si quieres continuar la conversación con Rich, estará en el stand de los oradores o en spatial chat para la audiencia remota, y por supuesto, Scoff, eres una persona en línea. Muchas gracias, Rich. Muy bien. Gracias. Muy bien. Un gran aplauso para Rich.

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.
JSNation 2022JSNation 2022
20 min
The Wind and the Waves: The formation of Framework Waves from the Epicenter
Top Content
What do you do when you're a framework that's survived and innovated in two JavaScript Framework Waves, and see the new wave cresting in the distance? You innovate. In this talk, we explore the JavaScript Framework landscape, and some of the major competitive features we've seen. We'll explore what Angular is introducing today and where we're headed in the future.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships