Building Web Apps with Deno

Understanding Error Handling and File Loading

Developing a robust application requires effective error handling, especially when dealing with file operations. When loading data from a specified path, it's crucial to anticipate potential errors. If the file is not found, returning a null value can prevent the application from crashing and allow for graceful handling of missing data.

Parsing files often involves separating metadata, known as front matter, from content. Utilizing libraries like the Deno standard library's front matter parsing capabilities simplifies this process. This library provides utility functions audited and maintained by the Deno Core team, ensuring reliability and security.

Integrating Front Matter Parsing

Incorporating front matter parsing into a project involves importing the necessary parsing library and handling uncached or missing URLs. By caching these dependencies, developers can streamline the development process, ensuring that all necessary components are readily available.

URL parameters play a significant role in dynamic content loading. By extracting these parameters, such as an ID, developers can log and verify their presence, facilitating the loading and rendering of specific posts.

Enhancing Render Functions with Type Safety

Ensuring type safety within render functions is essential for maintaining code quality. By explicitly defining the expected types of input and output, developers can prevent errors and improve code readability.

Implementing type safety can reveal mismatches between expected and actual data types, prompting developers to address these issues early in the development cycle. This approach aligns with the principles of robust software engineering.

Markdown to HTML Conversion and Styling

Rendering markdown content as HTML enhances the visual presentation of text on web pages. Libraries like Deno's GitHub Flavored Markdown (GFM) facilitate this conversion, offering a straightforward method for transforming markdown into HTML.

Styling is crucial for an aesthetically pleasing user interface. By applying CSS stylesheets, developers can ensure that elements like tables and headings are displayed correctly, maintaining a consistent and professional look across the site.

Handling POST Requests and Form Data

Setting up a handler for POST requests involves parsing form data and managing cookies. This is a fundamental aspect of web development, allowing applications to process user input and maintain state through cookies.

Cookie management is streamlined through utility functions, enabling developers to set and retrieve cookies efficiently. These cookies can persist user preferences, such as locale settings, across sessions.

Optimizing Content Loading and Sorting

Loading content from disk requires careful handling of asynchronous operations. By using promises, developers can initiate multiple file reads simultaneously, significantly reducing load times for large datasets.

Sorting content, such as blog posts, by date is crucial for user experience. Implementing efficient sorting algorithms ensures that users always see the most relevant and recent content first.

Deploying Deno Applications

Deploying applications built with Deno is straightforward, with several platforms supporting Deno deployments. While Deno Deploy is optimized for Deno code, other platforms like AWS, GCP, and Azure offer flexibility through Docker containers and runtimes.

Ensuring compatibility between versions of the Deno standard library and the Deno runtime is important for avoiding potential issues. Regular updates and testing can help maintain stability across deployments.

Testing and Benchmarking in Deno

Writing tests is an integral part of software development, ensuring that code remains functional and free from regressions. Deno offers a built-in testing framework that simplifies the process, making it easy to write, run, and maintain tests.

Benchmarking can provide insights into performance improvements, especially when optimizing asynchronous operations. Deno's benchmarking capabilities allow developers to measure execution times and identify potential bottlenecks.

Client-Side Interactivity with Fresh

Fresh, a full-stack web framework for Deno, offers unique features for creating interactive web applications. By leveraging islands of interactivity, developers can enhance user experiences while minimizing client-side JavaScript.

This approach involves identifying components that require interactivity and isolating them, allowing the rest of the application to remain static and fast-loading.

Utilizing Cookies for Locale Management

Managing user preferences, such as locales, can be achieved through cookies. By setting cookies based on user input, applications can tailor content to individual users, enhancing personalization.

Parsing language headers and using context states allows developers to apply user preferences consistently across the application, ensuring a seamless user experience.

Exploring Deno's Built-in Tools

Deno offers a range of built-in tools that enhance the development process, from formatters and linters to task automation. These tools reduce the reliance on third-party dependencies and promote a consistent development environment.

By integrating these tools into the workflow, developers can improve code quality and maintainability, aligning with best practices in software engineering.

Continuous Integration and Deployment

Setting up continuous integration with platforms like GitHub Actions ensures that code is automatically tested and deployed. This process supports agile development practices, allowing developers to focus on feature development rather than manual deployments.

Deploying preview environments for pull requests enables real-world testing of changes, providing valuable feedback before merging into the main codebase.

Conclusion

Building a full-stack application with Deno and Fresh involves a comprehensive understanding of error handling, asynchronous operations, and client-server interactions. By leveraging Deno's built-in tools and Fresh's framework capabilities, developers can create efficient, scalable, and user-friendly applications.

From parsing front matter to managing cookies and deploying applications, each step is crucial in delivering a high-quality product. Continuous testing and optimization further ensure that applications remain performant and maintainable over time.

Watch full talk with demos and examples:

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

From Author:

Learn how to build full stack apps with Deno and Deno Deploy. We'll build a simple app using the fresh (fresh.deno.dev) framework, and host it on Deno Deploy.

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

FAQ

Deno is a modern JavaScript runtime similar to Node.js, but it supports TypeScript out of the box. It is designed to provide a secure environment for executing JavaScript and TypeScript code, with built-in utilities like a formatter, linter, and testing framework. Deno emphasizes security and supports Web APIs for operations like fetching resources, mirroring the functionality available in modern browsers.

Deno and Node.js are both JavaScript runtimes, but Deno provides several enhancements and differences. Notably, Deno includes built-in support for TypeScript, offers a more secure sandbox environment by default, and does not use the npm package manager. Instead, Deno imports modules using URLs, similar to importing scripts in a web browser. Deno also includes built-in tools like a formatter and linter, which are not built into Node.js.

Deno Deploy is a distributed system designed to run JavaScript, TypeScript, and WebAssembly at the edge, close to users. It aims to minimize latency by running code in global data centers closer to the end user. Deno Deploy integrates directly with the Deno runtime, providing a seamless experience for developers to run their applications across the globe efficiently.

To create a new Deno project, start by creating a new directory and a main TypeScript file. Deno does not require a package.json file or node_modules directory. You can run your script using 'deno run' followed by your script name. For structured projects, Deno offers utilities like a project initializer which helps in setting up projects with recommended configurations.

Fresh is a full stack web framework specifically designed for Deno. It leverages the capabilities of Deno and is optimized for building fast, efficient, and scalable web applications. Fresh follows the islands architecture, allowing parts of your application to be interactive, minimizing the amount of JavaScript shipped to the client, and improving load times and performance.

Yes, Deno has a built-in testing framework that allows you to write and run tests for your applications. You can create test files with '_test.ts' suffix and use 'deno test' to execute them. Deno's testing framework supports features like test isolation and real-time feedback, making it a powerful tool for developing robust applications.

Luca Casonato
Luca Casonato
158 min
04 Jul, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today's workshop is about building a full stack application using Deno and Deno deploy. We will create a blog with personalized blog entry pages and explore Deno's features such as TypeScript support and integrated tool chain. Deno deploy allows for easy deployment of Deno applications, and Fresh is a full stack web framework optimized for fast and scalable applications. The workshop covers topics such as setting up Deno, creating projects with Fresh, handling static pages and blog posts, testing, client interactivity, and deployment using Deno Deploy and GitHub Actions.
Available in Español: Introducción a Deno y Deno Deploy
Video transcription and chapters available for users with access.

Watch more workshops on topic

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 a Hyper Fast Web Server with Deno
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Matt Landers
Will Johnston
2 authors
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
William Lyon
William Lyon
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
The Journey From React Frontend Development to Fullstack Development With Next.js
React Advanced 2024React Advanced 2024
143 min
The Journey From React Frontend Development to Fullstack Development With Next.js
Workshop
Eric Burel
Eric Burel
Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
- Introduction: discovering Next.js and its server-centric philosophy- Crafting a perfectly optimized multi-page website- Making sense of Next.js server-side rendering capabilities- Conclusion: how Next.js empowers you as a React developer
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Zero to Production with Fullstack GraphQL and React with Hasura team
React Summit 2020React Summit 2020
162 min
Zero to Production with Fullstack GraphQL and React with Hasura team
Workshop
Allison Kunz
Allison Kunz
Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover:
- A basic introduction to GraphQL- Using GraphQL to make CRUD operations from a React application- Setting up access controls to data- Building real-time components in React using GraphQL Subscriptions- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas- Triggering serverless functions on database events- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless.

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

Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
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.
Node.js Compatibility in Deno
Node Congress 2022Node Congress 2022
34 min
Node.js Compatibility in Deno
Deno aims to provide Node.js compatibility to make migration smoother and easier. While Deno can run apps and libraries offered for Node.js, not all are supported yet. There are trade-offs to consider, such as incompatible APIs and a less ideal developer experience. Deno is working on improving compatibility and the transition process. Efforts include porting Node.js modules, exploring a superset approach, and transparent package installation from npm.
Javascript Should Come With Batteries
React Day Berlin 2023React Day Berlin 2023
30 min
Javascript Should Come With Batteries
Watch video: Javascript Should Come With Batteries
JavaScript Should Come With Batteries: Deno is a next-generation JavaScript runtime that addresses the lack of built-in tooling in JavaScript. It provides a secure and simple way to develop applications with built-in testing, linting, formatting, and a language server for VS Code. Deno is compatible with Node.js and NPM, supports web standard APIs, and allows code portability between frontend and server. It also offers features like a built-in database, a key-value store, and transparent monetization with Deno Deploy.
Deno 2.0
Node Congress 2023Node Congress 2023
36 min
Deno 2.0
Top Content
The Talk discusses forced optimization with Node and Deno, with Deno aiming to pursue the same goals in a more expansive and modern way. Deno has built-in support for NPM and enforces security constraints. It also has a key-value database called Deno KV, which will be a core part of the Deno 2 API. Deno Deploy is a serverless Edge Functions platform powered by FoundationDB, optimized for fast reading and ideal for building eCommerce sites or application servers at the edge. Deno 2.0 is coming soon with more features under development.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.