Full Stack Documentation

Rate this content
Bookmark

Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.

But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

SvelteKit is the official full-stack framework for Svelte, designed to run anywhere JavaScript runs, such as in Node, Lambda, Edge, and browsers. It supports dynamic server-side rendering, static site generation, and building single-page apps.

SvelteKit offers a tiny footprint on both client and server, uses web standard APIs, and provides a world-class developer experience with VEET. It allows for flexible output methods and is built on Svelte, which may speed up the development process.

The new documentation platform for SvelteKit focuses on providing a controlled, safe environment for learning, emphasizing the importance of repetition and safety in educational settings. It allows users to experiment and learn without the fear of making irreversible mistakes.

StackBlitz enhances SvelteKit development by allowing developers to run servers inside the browser using Web Containers technology. This setup eliminates the need for local installs and reduces dependency on third-party services, facilitating instant application setups and bug reporting.

SvelteKit’s tutorial environment applies principles such as safety first, repetition for learning, and meeting students where they are. These principles help create a conducive learning atmosphere that encourages active participation and minimizes frustration.

The future development of SvelteKit includes plans to extend its capabilities to support environments like Electron for desktop applications, and potentially mobile apps. The focus will remain on enhancing accessibility and integration with various tools and technologies.

Rich Harris
Rich Harris
28 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
Available in Español: Documentación Full Stack

1. Introduction to Web-O-Man

Short description:

Welcome back. It's another week, we've moved on a little bit. I stumbled upon a 19th century sea shanty about the evolving techniques we use to deliver HTML to our users. It's called the Web-O-Man. Replies were bestowed from the Lambda far away. One day when the Javascript runs, we'll take our page and go. If you don't want to fetch your data late, just render your page inside V8. Life on the edge is pretty great, friends, this is the way.

Welcome back. It's another week, we've moved on a little bit.

All right. So while I was researching for this talk, I stumbled upon a 19th century sea shanty about the evolving techniques we use to deliver HTML to our users. It was very ahead of its time. I thought I would share it with you. It's called the Web-O-Man, and some of you might know the tune. If you do, I'd love for you to join in. If we can get some people singing along in here, it will make this whole thing so much less awkward for all of us. At the very least, please help me keep time.

Come on. The once was a place to run your code in US-East-1. Non-containerized node requests came in. Replies were bestowed from the Lambda far away. Soon, nay, the server responds to bring us mock-ups to look upon. One day when the Javascript runs, we'll take our page and go. The cold starts held the data back. Lidane said you should use Jamstack. It sounded good, so he gave it a crack for a while anyway. Soon, nay, the server responds to bring us mock-ups to look upon. One day when the Javascript runs, we'll take our page and go.

Static files are great unless you need something from a database. Then you'll need to make a request to chase the spinners away. Soon, nay, the server responds to bring us mock-ups to look upon. One day when the Javascript runs, we'll take our page and go. If you don't want to fetch your data late, just render your page inside V8. Life on the edge is pretty great, friends, this is the way. Soon, nay, the server responds to bring us mock-ups to look upon. One day when the Javascript runs, we'll take our page and go.

Once more.

2. The Shift to Full Stack Frameworks

Short description:

Soon, nay, the server responds to bring us mock-ups to look upon. One day when the Javascript runs, we'll take our page and go. Hi, my name is Rich, I work on a user interface framework called Svelte. A lot of computation is moving away from servers and out to the network edge. Front-end frameworks are being affected by this trend. Meta-frameworks like NeXT, NUXT, SvelteKit, and SolidStart are becoming popular. Edge functions use the same web APIs as the browser. I work on SvelteKit, the official full stack framework for Svelte. It runs anywhere JavaScript runs and can be deployed to any platform without lock-in.

Soon, nay, the server responds to bring us mock-ups to look upon. One day when the Javascript runs, we'll take our page and go. Last time. Soon, nay, the server responds to bring us mock-ups to look upon. One day when the Javascript runs, we'll take our page and go. We did it, you magnificent people, I love you for joining in. That could have gone horribly, horribly wrong.

Hi, let me introduce myself, my name is Rich, I work on a user interface framework called Svelte, I'm one of hundreds of contributors, and I work on open source full-time at Vercel. The song we were singing describes an important trend in web development. A lot of computation is moving away from servers and single origin functions and out to the network edge. Thanks to things like Deno and Fastly, Cloudflare, the Vercel functions which run on Cloudflare and Netify, someone like me who knows very little about back-end stuff is able to deploy an application that is instantly available within milliseconds to users anywhere on the planet. I think this is a tectonic shift in how we build stuff on the web, even though there are some unsolved problems about where we put our data, for example.

Meanwhile, front-end frameworks are also being affected by this trend. When you think about frameworks, you probably think about React or Vue, or if you're a little bit more of a JavaScript hipster, you might think about Svelte or solid. But increasingly, we don't use these frameworks by themselves, we use meta-frameworks like NeXT, NUXT, SvelteKit and SolidStart. And these are toolkits for building an entire application, as opposed to just a few components. They bring a build tool, a dev server, your routing, all of that stuff. And crucially, as well as running in the browser, they run in a server environment as well. We can call them full stack frameworks, at the risk of upsetting the angry nerds, who police the use of that kind of terminology. And so this is interesting convergence happening. Front-end technologies are starting to claim back-end territory, while back-end is becoming more accessible to those of us who are traditionally front-end operators.

In many cases, Edge functions use the same web APIs that we're used to using in the browser. So I work on SvelteKit, which is the official full stack framework for Svelte, and we're pretty proud of what we've built. We think it's very compelling. It runs anywhere JavaScript runs. It runs on Node, it runs in a Lambda, it runs in the Edge, it runs in your browser. Soon it'll run in a service worker. And you can deploy it to any platform you like. There's no lock-in. When you create a project, we don't ask you where you're going to deploy.

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

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 web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
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
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
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
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
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
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
The Wind and the Waves: The formation of Framework Waves from the Epicenter
JSNation 2022JSNation 2022
19 min
The Wind and the Waves: The formation of Framework Waves from the Epicenter
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.

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
Top Content
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)
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
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