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.

FAQ

SvelteKit es el marco de trabajo de pila completa oficial para Svelte, ejecutándose en cualquier lugar donde se ejecute JavaScript, como Node, Lambda, el borde y el navegador. Ofrece funcionalidades como renderizado dinámico en el lado del servidor, generación de sitios estáticos y construcción de aplicaciones de una sola página, optimizando la cantidad de JavaScript tanto en el cliente como en el servidor.

Las funciones de borde permiten que los cálculos se alejen de los servidores y las funciones de origen único hacia el borde de la red, lo que resulta en tiempos de respuesta más rápidos y menores latencias. Esto es especialmente útil para aplicaciones globales, ya que permite implementar aplicaciones que están instantáneamente disponibles para usuarios en cualquier parte del planeta.

La documentación se divide en cuatro tipos principales: documentación de referencia, material explicativo, cómo hacerlo y tutoriales. Cada tipo atiende a diferentes necesidades de los usuarios, desde aprender a usar una herramienta hasta entender teorías complejas y realizar tareas específicas.

Rich sugiere aprender Svelte a través de tutoriales interactivos que proporcionan retroalimentación instantánea, como el tutorial de Svelte disponible en línea. Estos tutoriales permiten a los usuarios aprender haciendo, lo cual es crucial para desarrollar habilidades prácticas y memoria muscular.

StackBlitz utiliza contenedores web, una tecnología que permite ejecutar un servidor dentro del navegador del usuario. Esto elimina la necesidad de instalar software adicional, minimizando la dependencia de terceros y permitiendo una experiencia de desarrollo más segura y accesible.

La plataforma learn.svelte.dev está diseñada para enseñar SvelteKit de una manera estructurada y controlada, permitiendo a los usuarios aprender mediante la práctica en un entorno seguro donde pueden cometer errores sin consecuencias graves, siguiendo el principio de 'seguridad primero'.

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: Full Stack Documentation

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.

QnA

Check out more articles and videos

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Solid captó la atención de la comunidad frontend al popularizar la programación reactiva con su convincente uso de Señales para renderizar sin re-renderizaciones. Los hemos visto adoptados en el último año en todo, desde Preact hasta Angular. Las Señales ofrecen un conjunto poderoso de primitivas que aseguran que tu interfaz de usuario esté sincronizada con tu estado, independientemente de los componentes. Un lenguaje universal para la interfaz de usuario frontend.
Pero, ¿qué pasa con lo Asíncrono? ¿Cómo logramos orquestar la carga y mutación de datos, el renderizado en el servidor y la transmisión? Ryan Carniato, creador de SolidJS, echa un vistazo a una primitiva diferente. Una que a menudo se malinterpreta pero que es igual de poderosa en su uso. Únete a él mientras muestra de qué se trata todo este Suspense.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
¿Cansado de reconstruir tu marco de trabajo web basado en React desde cero para cada nuevo proyecto? ¡Estás de suerte! RedwoodJS es un marco de aplicación web de pila completa (piensa en Rails pero para desarrolladores JS/TS) basado en React, Apollo GraphQL y Prisma 2. Nosotros hacemos el trabajo de integración pesada para que tú no tengas que hacerlo. También integramos de manera hermosa Jest y Storybook, y ofrecemos soluciones incorporadas para la obtención de datos declarativa, autenticación, pre-renderizado, registro, a11y y mucho más. Despliega en Netlify, Vercel, o vuelve a la vieja escuela en AWS o metal desnudo. En esta charla aprenderás sobre la arquitectura de RedwoodJS, verás las características principales en acción, y te irás con una sensación de asombro y admiración en tu corazón.
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
JSNation 2022JSNation 2022
20 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
¿Qué haces cuando eres un framework que ha sobrevivido e innovado en dos Olas de Framework de JavaScript, y ves la nueva ola creciendo en la distancia? Innovas. En esta charla, exploramos el panorama del Framework de JavaScript, y algunas de las principales características competitivas que hemos visto. Exploraremos lo que Angular está introduciendo hoy y hacia dónde nos dirigimos en el futuro.

Workshops on related topic

Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva