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 el problema 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 nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.

Rich Harris
Rich Harris
28 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla discute 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 para 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. Tropecé con una canción marinera del siglo XIX sobre las técnicas en evolución que usamos para entregar HTML a nuestros usuarios. Se llama Web-O-Man. Las respuestas fueron otorgadas desde el Lambda lejos. Un día, cuando se ejecute Javascript, tomaremos nuestra página e iremos. Si no quieres buscar tus datos tarde, solo renderiza tu página dentro de V8. La vida en el borde es bastante genial, amigos, este es el camino.

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

Muy bien. Así que mientras investigaba para esta charla, tropecé con una canción marinera del siglo XIX sobre las técnicas en evolución que usamos para entregar HTML a nuestros usuarios. Estaba muy adelantada a su tiempo. Pensé que lo compartiría con ustedes. Se llama Web-O-Man, y algunos de ustedes podrían conocer la melodía. Si lo hacen, me encantaría que se unieran. Si podemos hacer que algunas personas canten aquí, hará que todo esto sea mucho menos incómodo para todos nosotros. Al menos, por favor, ayúdenme a llevar el ritmo.

Vamos. Había un lugar para ejecutar tu código en US-East-1. Las solicitudes de nodo no contenerizadas llegaban. Las respuestas fueron otorgadas desde el Lambda lejos. Pronto, no, el servidor responde para traernos maquetas para mirar. Un día, cuando se ejecute el Javascript, tomaremos nuestra página e iremos. Los inicios fríos retuvieron los datos. Lidane dijo que deberías usar Jamstack. Sonaba bien, así que le dio una oportunidad por un tiempo de todos modos. Pronto, no, el servidor responde para traernos maquetas para mirar. Un día, cuando se ejecute el Javascript, tomaremos nuestra página e 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 alejar los spinners. Pronto, no, el servidor responde para traernos maquetas para mirar. Un día, cuando se ejecute el Javascript, tomaremos nuestra página e iremos. Si no quieres buscar tus datos tarde, solo renderiza tu página dentro de V8. La vida en el borde es bastante genial, amigos, este es el camino. Pronto, no, el servidor responde para traernos maquetas para mirar. Un día, cuando se ejecute el Javascript, tomaremos nuestra página e iremos.

Una vez más.

2. El cambio a marcos de trabajo de pila completa

Short description:

Pronto, no, el servidor responde para traernos maquetas para mirar. Un día cuando se ejecute el Javascript, tomaremos nuestra página e 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 hacia el borde de la red. Los marcos de trabajo front-end están siendo afectados por esta tendencia. Los meta-marcos de trabajo como NeXT, NUXT, SvelteKit y SolidStart se están volviendo populares. Las funciones de borde utilizan las mismas API web que el navegador. Trabajo en SvelteKit, el marco de trabajo 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 traernos maquetas para mirar. Un día cuando se ejecute el Javascript, tomaremos nuestra página e iremos. La última vez. Pronto, no, el servidor responde para traernos maquetas para mirar. Un día cuando se ejecute el Javascript, tomaremos nuestra página e iremos. Lo hicimos, ustedes magníficas personas, los amo por unirse. Eso podría haber salido horriblemente mal.

Hola, permítanme presentarme, mi nombre es Rich, trabajo en un marco de interfaz de usuario llamado Svelte, soy uno de los cientos de contribuyentes, y trabajo a tiempo completo en código abierto 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 hacia el 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á disponible instantáneamente en milisegundos para usuarios en cualquier parte del planeta. Creo que este es un cambio tectónico en cómo construimos cosas en la web, aunque hay algunos problemas sin resolver sobre dónde ponemos nuestros datos, por ejemplo.

Mientras tanto, los marcos de trabajo front-end también están siendo afectados por esta tendencia. Cuando piensas en marcos de trabajo, probablemente piensas en React o Vue, o si eres un poco más hipster de JavaScript, podrías pensar en Svelte o solid. Pero cada vez más, no usamos estos marcos de trabajo por sí solos, usamos meta-marcos de trabajo como NeXT, NUXT, SvelteKit y SolidStart. Y estos son kits de herramientas para construir una aplicación completa, en lugar de solo unos pocos componentes. Traen una herramienta de construcción, un servidor de desarrollo, tu enrutamiento, todas esas cosas. Y crucialmente, además de ejecutarse en el navegador, también se ejecutan en un entorno de servidor. Podemos llamarlos marcos de trabajo de pila completa, con el riesgo de molestar a los nerds enojados, que controlan el uso de ese tipo de terminología. Y entonces esto es una convergencia interesante que está sucediendo. Las tecnologías 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 somos operadores front-end tradicionales.

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 trabajo de pila completa oficial para Svelte, y estamos bastante 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 trabajador de servicio. Y puedes implementarlo en cualquier plataforma que te guste. No hay bloqueo. Cuando creas un proyecto, no te preguntamos dónde vas a implementar.

3. El dilema de la documentación de pila completa

Short description:

Puedes averiguar eso más tarde y cambiar de opinión. Está construido sobre APIs estándar de la web como request y response. Utiliza VEET, por lo que tiene esta experiencia de desarrollador de clase mundial. Tiene enrutamiento anidado basado en el 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 arrancar para que esa función comience a servir respuestas. Puedes hacer renderizado dinámico en el lado del servidor. Puedes hacer generación de sitios estáticos. Puedes construir una aplicación de una sola página. Puedes mezclar y 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 con SvelteKit que con cualquier otro marco de trabajo. La combinación de Svelte y las funciones de borde de Vercel te permite hacer dinámica a la velocidad de estática. Pero hay una gran interrogante que se cierne sobre el panorama de los marcos de trabajo de pila completa. ¿Cómo diablos hacemos 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, cómo hacerlo y tutoriales. Los tutoriales y las explicaciones están ambos preocupados por el aprendizaje. Las explicaciones y el material de referencia son ambos sobre reforzar tu conocimiento teórico.

Puedes averiguar eso más tarde y cambiar de opinión. Está construido sobre APIs estándar de la web como request y response. 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 anidado basado en el sistema de archivos. Tiene una huella pequeña. Tanto en el cliente, todos sabemos que deberíamos minimizar la cantidad de JavaScript que servimos al cliente, pero también en el servidor. Cuando estás utilizando entornos serverless y Edge functions, es importante minimizar la cantidad de JavaScript que necesita arrancar para que esa función comience a servir respuestas.

Como salida flexible, puedes hacer renderizado dinámico en el lado del servidor. Puedes hacer generación de sitios estáticos. Puedes construir una aplicación de una sola página. Puedes mezclar y combinar todas esas cosas dentro de la misma aplicación. Está construido sobre Svelte, que estoy sesgado, pero creo que eso significa que podrás construir una aplicación más rápidamente con SvelteKit que con cualquier otro framework o te devolvemos tu dinero. Y por supuesto, el framework en sí es rápido. Como le gusta decir a mi jefe, la combinación de Svelte y las Edge functions de Vercel te permite hacer dinámica a la velocidad de estática.

Pero hay una gran interrogante que se cierne sobre el panorama de los marcos de trabajo de pila completa. Y la pregunta es esta. ¿Cómo diablos hacemos documentación de pila completa? Nadie ha resuelto realmente esto, creo, hasta ahora. Pero antes de entrar en eso, necesitamos hablar de lo que hablamos cuando hablamos de documentation. Así que documentation 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 estupendos. Este pastel Battenberg tiene documentación de referencia, que es en lo que tendemos a pensar cuando pensamos en documentation. Estas son tus interfaces, tus APIs, y así sucesivamente. Tenemos material explicativo que te da una visión general de alto nivel de algunos de los conceptos en tu herramienta. Tenemos cómo hacerlo que enseña 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 cosa en primer lugar. Y la razón por la que estos a menudo se confunden por los proyectos de open-source es que todos se superponen de formas interesantes. Los tutoriales y las explicaciones están ambos preocupados por el aprendizaje. Las explicaciones y el material de referencia son ambos sobre reforzar tu conocimiento teórico.

4. El poder de los tutoriales interactivos

Short description:

Las referencias y los cómo hacer 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.

Las referencias y los cómo hacer, ambos son para tus usuarios existentes, mientras que los cómo hacer y los tutoriales son todo acerca de guías paso a paso para lograr algún objetivo. De hecho, podemos trazar estos como un cuadrante, como una serie de cuadrantes, con el aprendizaje y la aplicación en extremos opuestos de un eje y el conocimiento teórico y los pasos prácticos en 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 documentation, y deberías estarlo, porque creo que la documentation es al menos el 50 por ciento del trabajo en cualquier proyecto de software, entonces te animo a que veas su charla Lo que nadie te dice sobre la Documentation, y el sitio web acompañante, deartaxis.framework.

Hay una cita a menudo malinterpretada que realmente me gusta, que, Dime y lo olvidaré. Muéstrame y puedo recordar, pero involúcrame y entenderé. Tus docs de referencia son buenos para decirte qué hacer. Tu material explicativo y tus cómo hacer son buenos para mostrarte cómo lograr alguna tarea específica. Pero si quieres que la gente realmente aprenda lo que les estás ofreciendo, necesitas involucrarlos, y ahí es donde entran los tutoriales interactivos. Los tutoriales son la forma más difícil de documentation para escribir, y son los más frecuentemente pasados por alto, pero creo que son los más importantes. Obviamente necesitas tener documentation de referencia, pero puedes tener los mejores docs de referencia en el mundo. No importará si nadie está usando tu cosa. Los docs de referencia son cómo sirves a tus usuarios existentes, pero los tutoriales son cómo creas nuevos usuarios.

Me desperté por primera vez al poder de los tutoriales interactivos hace una década, cuando empecé a aprender Knockout, uno de los frameworks front-end OG. Levanta la mano si recuerdas Knockout. Bien. Todos los geriátricos acaban de delatarse. Knockout fue un verdadero hito en el web development. Ha sido un poco eclipsado en los últimos años por frameworks más modernos, pero en su tiempo, fue un gran trato, 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 career y la de tantas otras personas. Fue verdaderamente 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. El Wi-Fi está funcionando, genial, bien. Este es el tutorial de Svelte. Y es un poco una máquina de Rube Goldberg. Lo que tenemos aquí es Rollup funcionando dentro de un trabajador web, 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í que obtenemos esta agradable retroalimentación instantánea, y es una forma realmente 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 NPM desde unpackage.com, y tenemos un editor CodeMaker, y la gente honestamente ama este tutorial.

5. El tutorial de SvelteKit y los profesores inspiradores

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 404 porque el tutorial existente que construimos solo cubre Svelte en sí. Y así concluimos que era hora de empezar 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 del equipo central lo han dicho. Y otros frameworks han seguido su ejemplo. Así que este es el tutorial de Vue, aquí hay uno de Solid, y aquí 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 404 porque el tutorial existente que construimos solo cubre Svelte en sí. No cubre SvelteKit, el framework full stack. 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 empezar de nuevo. Y reconstruir todo. Y si vamos a hacer esto, queremos maximizar su efectividad como herramienta educativa. Así que empezamos a buscar, ya sabes, la ciencia de la enseñanza para ver, ya sabes, quizás hay algunos principios pedagógicos pertinentes que podrían promover el progreso de las personas. Y luego decidimos que sería mucho trabajo y que 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 esta escena de Matrix, Neo está caminando por la calle. Morfeo le está enseñando cómo sobrevivir en Matrix cuando Neo se distrae con la mujer de rojo. La mujer de rojo, por supuesto, no es una transeúnte inocente. Resulta ser una amenaza mortal. Y en ese momento, Neo aprende cómo puede sobrevivir en Matrix. Pero en realidad no está en Matrix porque Morfeo, como buen profesor, se adhiere a este principio. Seguridad primero. Si quieres que las personas aprendan, debes proporcionarles un entorno de aprendizaje seguro para que puedan aprender las habilidades que van a utilizar 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. Cera en, cera fuera. Cera en, cera fuera. 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 se da cuenta de que ha estado desarrollando la memoria muscular que necesita para ser un experto en karate.

6. Enseñanza y Documentación

Short description:

Miyagi no teme a la repetición. Acepta 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 rescatar 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 a la repetición. Acepta 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 hacer o no hacer, no hay intento. Luke, después de no haber podido recuperar su X wing estrellada del pantano, se va y se salta 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, va a tener que demostrarlo él mismo. Y eso es lo que hace. Cierra los ojos, estira el brazo, y levanta la nave espacial fuera del pantano para asombro de Luke.

A veces, cuando las personas están aprendiendo, se quedan atascadas en algo. Y está bien. El trabajo como 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 debes rescatarlos.

En Un Detective en el Kinder, Arnold interpreta a John Kimble, un detective de la LAPD que por razones que no tienen sentido alguno se ha infiltrado en un jardín de infantes. Y cree que después de haber pasado una career trabajando con criminales endurecidos, 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 corren desenfrenados, causan un caos absoluto y Arnold se da cuenta de que en realidad tiene un gran 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, que es traída para salvar a la fallida Academia St. Francis del cierre. Está enseñando una clase de music, y no está llegando a sus alumnos. No quieren aprender, hasta que un día, uno de ellos empieza a cantar, y la clase se une, y se da cuenta de que después de todo sí tiene una forma de conectar con ellos. Y la Hermana Mary, que en secreto es Delores van Cartier, la artista de Las Vegas, descubre una forma de hacer que estos niños aprendan lo que necesitan, y la escuela se salva. El principio aquí es que no puedes forzar a las personas a enseñar. Tienes que encontrarte 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 un ejemplo diferente aquí. Oops. Si pudiera escribir, sería de ayuda.

7. Aprendiendo a través de Ejercicios y Pruebas de Usuario

Short description:

Intentémoslo una vez más. Sigue las instrucciones en el lado izquierdo para completar ejercicios y aprender nuevos conceptos sobre el uso de Svelte. Las secciones del tutorial son cortas y autónomas para evitar que los errores rompan todo. El entorno controlado te permite cometer errores de manera segura. Se ha desactivado la función de copiar y pegar para fomentar el desarrollo de la memoria muscular. El tutorial proporciona un botón de solución para cuando te atasques. Las pruebas de usuario son cruciales en el desarrollo de software.

Voy a ver si el WiFi va a ser amable con nosotros hoy. Intentémoslo una vez más.

Muy bien. Aquí vamos. Tu trabajo en cada una de estas secciones del tutorial es seguir las instrucciones en el lado izquierdo para completar algún ejercicio y aprender algunos nuevos conceptos sobre cómo usar Svelte. Estas son todas secciones cortas y autónomas deliberadamente, porque, cuando estás trabajando en algo como esto, es fácil cometer un error. Podrías introducir un error de sintaxis que rompa todo completamente. Queremos que puedas recargar la página y volver a lo que estabas haciendo sin preocuparte por perder tu progreso. Deliberadamente no estamos introduciendo temas complejos a través de una serie de tareas. Todo es autónomo.

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

Ahora, como programador perezoso, mi primer instinto cuando veo algo como esto es intentar y copiar este code del lado izquierdo al editor de code en el derecho. Pero tan pronto como hago eso, esto aparece y me dice que la función de copiar y pegar está actualmente desactivada. Esto puede parecer un poco hostil pero es porque así es como aprendemos. La repetición es cómo aprendes. No voy a hacerlo de nuevo. Y así, aunque puedes copiar y pegar, puedes seleccionar la opción para permitirte copiar y pegar si necesitas, si tienes prisa por alguna razón, intentamos que desarrolles la memoria muscular que vas a usar cuando estés usando Svelte fuera de los confines de este tutorial. Al igual que Yoda, sabemos que ocasionalmente los estudiantes se frustrarán y eso no debería ser el fin 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 lo que está haciendo actualmente y tal vez en algún lugar del viaje cometo un error y simplemente no puedo averiguar cómo resolverlo, por eso hay un gran y prominente botón naranja de solución. Lo presiono y se completa el tutorial. Puedo jugar con los ajustes y pasarlo en grande.

Este siguiente principio no es tanto algo que haya informado el design de esta plataforma, es solo un principio general en el desarrollo de software. Mi prometida no es programadora. De hecho, está en algún lugar de esta sala, pero no voy a señalarla, porque no quiero ser asesinado en mi sueño. Se ha interesado 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, hice la cara de Arny 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 que ningún software sobrevive al contacto con los usuarios, porque no lo hará. Las pruebas de usuario son la cosa más valiosa que puedes hacer.

8. Encontrándose con los Usuarios Donde Están

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 hacer mejoras al propio marco 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 información. Si estamos en la raíz del índice, entonces podemos hacer clic en el enlace de información y nos llevará a la página de información. Esta es una interfaz de línea de comandos que se ejecuta dentro de node. Svelte depende de node porque lee desde el sistema de archivos y sin embargo lo estamos ejecutando en el navegador. Estamos haciendo trampa un poco. Entonces, eso nos lleva de nuevo a la pregunta ¿cómo hacemos la documentación de pila completa? Bueno, hay un montón de servicios por ahí 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, espacios de código de GitHub. Y estas son todas herramientas fenomenalmente poderosas que mucha gente usa día a día 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 hacer mejoras al framework en sí 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 soportar SpeltKit así como Svelt. Tenemos algunos trabajos en progreso documentation sobre SveltKit aquí. Vamos a pasar a esto. Verás que ahora en el editor de árbol de archivos no solo tenemos un solo componente, tenemos un proyecto entero 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 información. Si estamos en la raíz del índice, entonces podemos hacer clic en el enlace de información y nos llevará a la página de información.

Nos invita a editar eso, para agregar un enlace así. Podemos hacer clic en eso. Resulta que puedes volver a casa de nuevo. 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 desde el sistema de archivos y sin embargo lo estamos ejecutando en el navegador. Estamos haciendo trampa un poco. Dice localhost. Eso es porque estoy ejecutando esto en mi propia máquina. Si miramos aquí, dentro de learn.svelte.dev hemos creado un montón de diferentes aplicaciones 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í, entonces simplemente se reflejan en el sistema de archivos y así es como funciona. Pero esto no scale. No podemos pedirle a la gente que clone nuestro repositorio y comience el servidor ellos mismos en su propia máquina local. Claramente necesitamos hacer algo mejor para encontrarnos con nuestros aprendices donde están. Así que eso nos lleva de nuevo a la pregunta ¿cómo hacemos la documentación de pila completa? Bueno, hay un montón de servicios por ahí que nos permiten trabajar con un IDE en línea en el navegador y luego ejecutar el code en un servidor en la cloud. Cosas como code sandbox, Gitpod, repplet, espacios de código de GitHub. Y estas son todas herramientas fenomenalmente poderosas que mucha gente usa día a día y son muy sofisticadas y muy 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 ejecutándose 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 lo tanto, creamos learn.svelte.dev, un trabajo en progreso que utiliza la tecnología subyacente de contenedores web de forma oculta. Es un cambio de juego para los informes de errores y la 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 una masterclass como esta por varias razones. En primer lugar, ejecutar servidores es bastante costoso, lo que significa que necesitas tener una barrera de authentication antes de que las personas puedan empezar a usarlo. De lo contrario, todos empezarán a minar Bitcoin en ellos. Y no queremos eso. Así que queremos tener una barrera de authentication antes de que las personas comiencen a aprender.

Además, no queremos la latencia que implica iniciar un servidor. Queremos tener recarga de módulos en caliente instantánea y todas esas otras 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 con StackBlitz.

StackBlitz es otro de estos servicios que te permite editar code en un editor en el navegador y luego ejecutarlo en un servidor. Pero la diferencia es que el servidor está realmente ejecutándose dentro de tu navegador. La tecnología se llama containers 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 security del navegador. Así que no necesito instalar nada en mi máquina local, no necesito preocuparme por el ransomware o algo así, todo está simplemente ejecutándose dentro del navegador.

Hace unos meses añadieron soporte para SvelteKit, que 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 masterclass y terminar con ello, pero no es ideal. Esta user interface está optimizada para la exploración y el desarrollo, no está optimizada para el aprendizaje. Así que queremos tener más control sobre la user interface. ¿No sería genial si pudiéramos tomar la tecnología subyacente de contenedores web y usarla de forma oculta dentro de nuestra propia página? Bueno, eso es exactamente lo que hicimos. Hemos estado trabajando con el equipo de StackBlitz durante las últimas semanas para hacer esto realidad. Así que hoy, estamos anunciando learn.svelte.dev, es un trabajo en progreso. Pero funciona, y puedes jugar con él, y está intentando cargar a través del lento Wi-Fi de la conferencia, ten paciencia, normalmente es un poco más rápido que esto. Hemos ido a la red Edge de Vercel, descargado la aplicación, y luego eso ha ido y descargado Node, 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 sucede en el espacio de unos pocos segundos, pero en condiciones de conferencia podría tardar un poco más. 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. Tenemos tanto poder en nuestras manos ahora. Desde que empezamos a construir esto sé de al menos otros dos frameworks que han empezado a trabajar en algo muy similar.

QnA

Aprendiendo Herramientas Full Stack y Preguntas del Público

Short description:

Espero que esto se convierta en la norma para aprender herramientas full stack. 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 del público. Primera pregunta de Sherman sobre algo comparable a quasar.dev en la esfera de Svelte. Todavía no lo tenemos, pero es nuestra intención que los kits de Svelte se dirijan a esos entornos en el futuro.

Así que espero que esto se convierta en la norma de cómo aprendemos herramientas full stack muy pronto, y no sólo se aplica a frameworks, se aplica a cualquier cosa que se ejecute en Node, interfaces de línea de comandos como build tools y testing tools y así sucesivamente.

Así que quiero agradecer a la gente de StackBlitz por ser unos socios fenomenales mientras hemos construido Y también quiero agradecer a todos los que estuvieron involucrados en el desarrollo de learn.svelte.dev en cosas como accessibility, UX, design, testing, y así sucesivamente. Y quiero agradecerles a ustedes. Gracias.

Así que vamos allá. Sí. Muy bien. Bueno, parece realmente prometedor. Gracias. Y espero poder jugar con él yo mismo. Y creo que es genial ver lo baja que es la barrera para probarlo. Y creo que va a atraer a muchos usuarios nuevos. Eso espero. Bueno, al menos a mí.

Así que pasemos a las preguntas del público. Y también tengo algunos problemas con el Wi-Fi. Primera pregunta de Sherman. ¿Hay algo comparable a quasar.dev en la esfera de Svelte? No sé si estás familiarizado con eso. Quasar.dev. Si yo... Uf. Creo que quasar es un conjunto de herramientas para construir aplicaciones que pueden ejecutarse tanto en Electron como en la web y quizás también crear mobile apps. Todavía no tenemos algo así. Pero es muy mucho la intención de que los kits de Svelte deberían ser capaces de dirigirse a entornos como ese. Una vez que saquemos el kit uno de Svelte por la puerta, eso es lo que vamos a estar buscando hacer. Sí. Muy bien. Así que, todavía no está ahí. Todavía no está ahí. No.

Hoja de ruta, Entorno local y Documentación

Short description:

En la hoja de ruta. Sí. La siguiente pregunta es de Elliot sobre el paso del tutorial al entorno local. Es sencillo 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 frente a la externa. Optimizamos para los nuevos usuarios, pero planeamos crear guías de cómo hacer para integrar con las herramientas existentes. La plataforma está construida, y es fácil añadir nuevo contenido.

En la hoja de ruta. Sí. Y la hoja de ruta está muy vacía. Sí. La siguiente pregunta es de Elliot. ¿Cómo ayudan a los usuarios a pasar del entorno del tutorial al entorno local, que requiere conocimiento de las herramientas que están extrayendo deliberadamente de ellos? Sí. En realidad, es muy sencillo empezar 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. Y eso te dará, en el espacio de 10 o 15 segundos, una configuración que es muy similar a la que tienes en el navegador. Así que intentamos minimizarlo tanto como podemos. Siempre estamos interesados en nuevas formas de hacerlo más accesible. Pero hasta ahora, creemos que es razonable. Es razonable. Tiene sentido.

La siguiente pregunta es de Wilhelm. ¿Qué diferencia hay en la documentación interna frente a la externa? Tus ejemplos parecen optimizados para los nuevos usuarios en lugar de para los contribuyentes. Sí, eso es muy cierto. Estamos optimizando para los nuevos usuarios primero porque, ya sabes, esa es la comunidad que es típicamente menos bien atendida por la documentación. Y ya sabes, hay una gran cantidad de ejemplos y tutoriales que han sido producidos por la comunidad que te enseñan cosas como cómo integrar 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 usar el mismo formato para hacer guías de cómo hacer para integrar con esas herramientas en el futuro. Así que de nuevo, aún no está ahí, pero está en nuestra hoja de ruta. Sí, así que 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 extenderlo para los existentes Svelte. Exactamente. Es muy fácil añadir nuevo contenido a la plataforma. Sí.

Muy bien. Bueno, eso es todo el tiempo que tenemos para preguntas y respuestas, pero si quieres continuar la conversación con Rich, él va a estar en el stand de los ponentes o en el chat espacial para el público remoto y por supuesto Scoff, eres una persona en línea. Así que 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

Building Better Websites with Remix
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!
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
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.
From GraphQL Zero to GraphQL Hero with RedwoodJS
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!
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
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.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
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.
The Wind and the Waves: The formation of Framework Waves from the Epicenter
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

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
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
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
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.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
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)
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
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
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
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