a fresh new web framework is out

TL;DR

Fresh is a new web framework called Fresh that has zero JavaScript shipped to the browser, no build step during development, and is based on the island's architecture.

Transcript

it is june 29 2022 and you're watching the code report well it's that time of the week again a fresh new web framework has been born and i know exactly what you're do thinking anymore it's name is fresh and it's dripping like literally the logo is dripping but more importantly it has some awesome features it ships zero javascript to the browser by... Read More

Key Insights

• 🛟 Fresh is a simple yet powerful full-stack framework for server-side rendering with TypeScript support.
• 🏝️ By rendering static HTML by default and adding interactivity through JavaScript on individual components, the island's architecture provides a balance between performance and interactivity.
• 🏛️ Dino, the JavaScript runtime Fresh is built on, offers seamless TypeScript support and allows apps to be built and deployed without a build step.
• 🥺 While Fresh offers simplicity and strong typing, it has a smaller ecosystem compared to Node.js, leading to potential compatibility issues with certain npm packages.
• 💨 Fresh leverages web standards like the Fetch API for fast response times and can be deployed to edge functions, enabling efficient global delivery of applications.
• 📟 The island's architecture used by Fresh shares similarities with Astro, but Fresh differs in its server-side rendering approach for every page instead of using client-side rendering for subsequent pages.
• 👻 Fresh simplifies form submissions by allowing developers to handle them directly in the component file, using TypeScript code.

Questions & Answers

Q: What is Fresh and what makes it unique?

Fresh is a new web framework for server-side rendering that ships zero JavaScript to the browser by default and does not require a build step during development. It is unique in its use of the island's architecture and being built on top of Dino, a JavaScript runtime alternative to Node.js.

Q: How does Fresh handle interactivity on a website?

Fresh uses the island's architecture, which allows websites to opt into JavaScript on individual components. Components kept in the islands directory will ship JavaScript to the browser, while all other components will be rendered as static HTML. This provides a balance between interactivity and fast page load times.

Q: What are the benefits and drawbacks of using Dino with Fresh?

The benefit of using Dino with Fresh is the first-class TypeScript support and the ability to build and deploy apps without a build step. However, a drawback is that Dino has a smaller ecosystem compared to Node.js, and not all npm packages are compatible.

Q: How does Fresh handle form submissions?

Fresh uses remix-style form submissions, allowing developers to write TypeScript code that directly handles form submissions in the component file for the respective page. This simplifies form handling and maintains strong typing.

Summary & Key Takeaways

• Fresh is a full-stack framework for server-side rendering, allowing developers to write apps in TypeScript.

• It is built on top of Dino, a JavaScript runtime alternative to Node.js, providing first-class TypeScript support and allowing apps to be built and deployed without a build step.

• Fresh is based on the island's architecture, which uses partial hydration to render static HTML to the browser by default and adds interactivity through JavaScript on individual components.