Nick Taylor - A Full Stack Web Framework for Deno

Editor's Notes

• #1: Hi everyone! Today we’re going to talk about Fresh, a full stack web framework for Deno
• #4: We’ll go over what Fresh is, discuss web standards and then we’ll dig into the features of Fresh. After that, there will be a short demo and then we can move on to questions and comments. By the end of the talk, you should have a good understanding of how all the pieces of Fresh work.
• #5: Created by the creator of Node.js, Ryan Dahl.
• #9: Just a quick congrats to the Deno team. Deno 2.0 was released on Oct 9th. Pretty awesome support for npm packages, speed improvements, and all kinds of goodies. Definitely worth checking out.
• #10: Alright, let’s talk web standards
• #11: Deno uses web standards. For example, import maps, fetch, request and response etc.
• #12: As part of web standards, Deno is a part of the WinterCG, the Web-interoperable Runtimes Community Group. It’s a space to collaborate on API interoperability for JavaScript runtimes. Companies like Netlify, Vercel, and Cloudflare are also a part of the WinterCG
• #14: If you’re unfamiliar with the amazing Preact project, it’s a a fast and smaller alternative to React with the same modern API. It only gets a mention here for now, but we’ll dig into what islands architecture is a little later in the talk. Because Fresh uses Deno which runs V8, you can leverage the same debugging tools as Node.js, and by going with Preact, there is already tonnes of IDE tooling for JSX.
• #15: Assuming you already have Deno installed, getting Fresh installed is pretty quick. Just run the command you see on the slide.
• #16: The installation is pretty quick and you have a couple of options. You can choose opt for a styling library or not. If you do, you can choose between Tailwind or Twind, server-side rendered Tailwind. If you’re using VS Code, like many probably are, you can choose to install the VS Code integration via the Deno VS Code extension, and that’s pretty much it.
• #17: Although Deno can read package.json files for Node.js compatibility, Fresh uses the Deno way by default which means a deno.json file instead of a package.json. Similar to npm’s scripts, Deno has tasks. So instead of npm run start, you’d run deno task start.
• #18: The deno.json has an imports section, similar to dependencies and dev dependencies in a package.json file, however, in Deno, all imports are URLs. So either https:, npm:, jsr: or any other valid qualifier for a URL. It’s out of scope for the talk, but the imports property is an import map. There’s a link in the resources section of the slide deck if you want to read up more on import maps.
• #19: Alright, so let’s dig into some Fresh of Fresh
• #23: All static assets can be found in the static folder Static assets aside from image and source tags do not have cache headers set on them. You can set cache headers manually or you can use the built in asset helper to automatically cache an asset for a year.
• #24: Here’s an example of the asset helper in action. It generates a unique URL whic is composed of the asset file path followed by a querystring with one key underscore frsh underscore c with a value that is the build ID from the deployment
• #26: There are three kinds of routes: there’s the handler route, component route and hybrid route. Handler routes are for APIs, component routes are for pages, and hybrid routes are for pages that require handler routes. For example a login page or a search page.
• #27: Like in other frameworks, routes can also be dynamic. You can see in the table here the many types of file-based routing patterns that are supported. Fresh only supports server-side rendering so there is no concept of something like getStaticPaths in Next.js or Astro since pages are never statically generated.
• #30: For a handler route, all that is required is exporting a function that takes two arguments: a request and a context and returns a response
• #31: For hybrid routes, define functions for actions in an exported variable called handler Name the async functions in the handler object after HTTP verbs. For example GET. Whereas the handler route in the previous example returns a response, typically in a hybrid route, you’ll want to return the result of the context render method.
• #32: Think of context render as passing in server-side rendered props to the page being rendered. If you’ve used Next.js’ pages router, it’s not the same thing, but it is a similar idea to getServerSideProps but it returns rendered content directly instead of props. Looking at the example on the slide, one thing to note about props in Fresh is that it’s not props dot movies. The props from context dot render are always in the props dot data property. So for example, the array of movies prop is actually props dot data, not props dot data dot movies.
• #34: Let’s talk middleware. Again like other frameworks, Fresh supports middleware. Middleware files are named underscore middleware dot ts and need to reside in the routes folder. Multiple middlewares are supported. Although Deno encourages you to use TypeScript, you could write the middleware as a JavaScript file.
• #35: Let’s look at an example. Say I navigate to slash movie slash top gun. Since we’re hitting the dynamic movie route, that means we’re using two middlewares. One in the root of the routes folder and one in the movie subfolder. In the case of multiple middlewares, the least specific one runs first. In our example, that means the root middleware runs first. It adds an x dash conference header with the value Node Congress 2023. Then the second middleware runs, the movie one. It adds an x dash movie dash page header along with a cache header that caches the page for 60 seconds.
• #36: So in our movie route example, the headers set in the two middlewares get set on the response as expected.
• #38: Like other frameworks, you can define custom error pages. For example, the current slide shows a custom 404 page. These are component routes but they can have special props passed in. In the case of the 404 page, you have access to the Unknown Page Props when the page is rendering. The Unknown Page Props gives you access to things like the URL of the page that was not found.
• #39: Like other frameworks, you can define custom error pages. For example, the current slide shows a custom 404 page. These are component routes but they can have special props passed in. In the case of the 404 page, you have access to the Unknown Page Props when the page is rendering. The Unknown Page Props gives you access to things like the URL of the page that was not found.
• #40: When we were discussing data fetching, I mentioned that we need to return the result of context dot render for hybrid routes. That still holds, but if you’re on a page that is associated with a dynamic route and the page being loaded does not exist, return context dot render not found instead. Context dot render not found will then pass the unknown page props to the 404 page.
• #41: When we were discussing data fetching, I mentioned that we need to typically return the result of context dot render for hybrid routes. That still holds, but if you’re on a page that is associated with a dynamic route and the page being loaded does not exist, return context render not found instead. Context render not found will then pass the unknown page props to the 404 page.
• #43: So what about styling? When Fresh first came out there was no build step. You could use Vanilla modern CSS (pretty good) with the asset helper, but for Tailwind fans, TWind was the only option. The team realized that a build step can be useful, so now Tailwind is one of the default options. As Fresh gains more traction, expect to see innovation from user land for the styling story. That said, I’d love to see scoped CSS on a per page/component level, but maybe they’ll just wait for native scoped CSS.
• #44: Alright, let’s talk about islands. What is an island anyway?
• #45: I mentioned it briefly when describing the architecture of Fresh, but we’ll dig into islands architecture a little more now. The long story short is it enables pockets of interactivity in your site or application.
• #46: I’ll leave this up for a little bit, but Jason Miller, one of the folks alongside Katie Sylor-Miller coined the term islands architecture. It’s fitting that Jason is one of the folks that coined this term as he’s also the creator of Preact. In islands architecture the goal is to ship mainly static HTML and then mark certain regions of the document object model, the DOM, as available to hydrate for interactive, or to use Fresh’s terminology, revive. When a page with islands loads, only the JavaScript for those islands is loaded.
• #47: Fresh serves zero JavaScript to the client by default. So how to we enable client side interactivity? Fresh has two component folders: components and islands. Components in the components folder will render server-side only, even if you add client-side interactivity to them. Components in the islands folder will render server-side as well and once the page loads, the client-interactivity will be revived.
• #48: Let’s look at a classic interactive component. A counter. It has a couple of buttons. If you click +1 it increments the counter and if you click -1 it decrements the counter.
• #50: This gets rendered server-side by Fresh.
• #51: When the page loads, Fresh injects some JavaScript to revive the islands. A function literally called revive loads any number of island component definitions along with the last argument being the props for all island components.
• #52: In the previous example there was only one island, but if there was more than one island, how does Fresh map the initial state correctly?
• #53: We talked about denoting interactive regions in the DOM when talking about islands architecture. Island components in Fresh will get server-side rendered with HTML comments surrounding them. The comment is prefixed with F R S H dash followed by the name of the component, colon and then the array index of where the island component state lives in the initial state for all islands that was initially loaded. It doesn’t matter how many different island components there are or how many instances of each. The array index will be incremented in each HTML comment based on the order of the islands in the DOM. One thing to note is that this is an implementation detail. You’ll never need to manage this yourself. I just find it useful to understand the underlying technology.
• #54: Signals amirite? All the rage these days. Since Fresh uses Preact, it can leverage Preact’s signal implementation as an alternative to state hooks.
• #55: We’re not going to do a deep dive on Signals, so I recommend checking out the Preact Signals documentation and for signals in general, any talk or blog post about signals from my old co-worker Ryan Carniato is a pretty safe bet.
• #59: With Partials, you can mark areas in your page that change on navigation. Only those regions will be updated by Fresh. And if you’re using islands, their state remains intact.
• #60: When you navigate to a page it
• #65: When Fresh first launched, I hung out with the creator Luca Casonato. Although there have been some additions to the framework since we hung out, this is still a really great deep dive into Fresh.