Why Deno's HTTP server uses web standards - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does Deno's HTTP server use web standards?

Deno's HTTP server is designed to follow web standards like the Fetch API and Web Streams. What is the main benefit of this approach?

A It ensures compatibility with existing web APIs and makes code easier to share between client and server.

B It makes the server run faster by using low-level system calls directly.

C It allows Deno to only support HTTP/1.0, which is simpler to implement.

D It forces developers to write code only in TypeScript.

💡 Hint

Think about how using the same APIs on client and server helps developers.

Deno uses web standards so that developers can write code that works similarly on both client and server. This reduces learning time and improves code sharing.

❓ component_behavior

intermediate

What happens when you use Deno's HTTP server with the Fetch API?

Consider this Deno HTTP server code snippet: const server = Deno.serve({ port: 8000 }); for await (const req of server) { req.respondWith(new Response('Hello World')); } What is the behavior of this server when accessed by a browser?

A It throws an error because respondWith is not a function.

B It closes the connection immediately without response.

C It returns a JSON object instead of plain text.

D It responds with 'Hello World' text to every HTTP request.

💡 Hint

Check what the Response object does in web standards.

The server uses the Fetch API's Response object to send back a plain text response 'Hello World' to every request.

📝 Syntax

advanced

Identify the syntax error in this Deno HTTP server code

What is the syntax error in the following Deno HTTP server code? const server = Deno.serve({ port: 8080 }); for await (const request of server) { request.respondWith(Response('Hi')); }

A The port number must be a string, not a number.

B The 'for await' loop cannot be used with Deno.serve().

C Missing 'new' keyword before Response constructor.

D The variable name 'request' is reserved and cannot be used.

💡 Hint

How do you create a new Response object in JavaScript?

The Response object must be created with the 'new' keyword. Omitting it causes a TypeError.

❓ state_output

advanced

What is the output when streaming a response in Deno's HTTP server?

Given this code snippet: const server = Deno.serve({ port: 9000 }); for await (const req of server) { const stream = new ReadableStream({ start(controller) { controller.enqueue(new TextEncoder().encode('Hello ')); controller.enqueue(new TextEncoder().encode('Stream!')); controller.close(); } }); req.respondWith(new Response(stream)); } What will the client receive?

A The client receives an empty response because the stream is closed immediately.

B The client receives the text 'Hello Stream!' as a streamed response.

C The client receives a JSON object with the text chunks.

D The server crashes due to invalid stream usage.

💡 Hint

ReadableStream sends data chunks to the client as they are enqueued.

The server streams the text 'Hello ' and then 'Stream!' to the client, which combines to 'Hello Stream!'.

🔧 Debug

expert

Why does this Deno HTTP server code cause a runtime error?

Examine this code: const server = Deno.serve({ port: 7000 }); for await (const req of server) { const url = new URL(req.url); if (url.pathname === '/hello') { req.respondWith(new Response('Hello!')); } else { req.respondWith(new Response('Not found', { status: 404 })); } } When running, it throws: "TypeError: Cannot read property 'url' of undefined". What causes this error?

A The 'req' object is not the expected RequestEvent; it lacks a 'url' property.

B The URL constructor cannot parse relative URLs without a base.

C The respondWith method is called twice on the same request.

D The port 7000 is already in use causing the error.

💡 Hint

Check what 'req' actually represents in Deno.serve() iteration.

In Deno's HTTP server, the iteration yields RequestEvent objects, not raw requests. The 'req' variable does not have a 'url' property directly.

Practice

1. Why does Deno's HTTP server use web standards like the Fetch API?

easy

A. To make server code familiar and easier to share with client code

B. To force developers to learn a new, unique API only for Deno

C. To improve server speed by using non-standard protocols

D. To prevent compatibility with browsers and other runtimes

Solution

1. Step 1: Understand the use of web standards in Deno

   Deno uses web standards like the Fetch API so developers can write code that feels familiar from the browser environment.

2. Step 2: Recognize the benefit of sharing code

   Using the same APIs on server and client makes sharing code easier and reduces bugs caused by different APIs.

3. Final Answer:

   To make server code familiar and easier to share with client code -> Option A

4. Quick Check:

   Web standards = Familiarity + Sharing [OK]

Hint: Web standards mean same code works client and server [OK]

Common Mistakes:

• Thinking Deno uses unique APIs only
• Believing web standards slow down the server
• Assuming web standards prevent browser compatibility

2. Which of the following is the correct way to create a basic HTTP server in Deno using web standards?

easy

A. import { createServer } from "deno_http";
createServer((req, res) => res.end("Hello"));

B. import http from "deno_http";
http.createServer((req, res) => res.send("Hello"));

C. import { serve } from "https://deno.land/std/http/server.ts";
serve(() => new Response("Hello"));

D. import { listenAndServe } from "deno_std";
listenAndServe((req) => "Hello");

Solution

1. Step 1: Identify the official Deno HTTP server import

   Deno's standard library provides the 'serve' function from "https://deno.land/std/http/server.ts" which uses web standards.

2. Step 2: Check the server creation syntax

   The correct syntax is calling serve with a handler function returning a Response object, matching web standards.

3. Final Answer:

   import { serve } from "https://deno.land/std/http/server.ts"; serve(() => new Response("Hello")); -> Option C

4. Quick Check:

   Use 'serve' + Response for Deno HTTP server [OK]

Hint: Use 'serve' from Deno std with Response object [OK]

Common Mistakes:

• Using Node.js style imports or APIs
• Calling res.end or res.send which are not web standard
• Importing from incorrect or non-existent modules

3. What will the following Deno HTTP server code output when accessed?

import { serve } from "https://deno.land/std/http/server.ts";
serve(req => {
  if (req.method === "POST") {
    return new Response("Posted!");
  }
  return new Response("Hello World");
});

medium

A. Always responds with "Posted!"

B. Responds with "Hello World" for GET and "Posted!" for POST

C. Throws an error because method check is invalid

D. Responds with "Hello World" for POST and "Posted!" for GET

Solution

1. Step 1: Analyze the request method check

   The code checks if the request method is "POST" and returns "Posted!" in that case.

2. Step 2: Understand the default response

   If the method is not "POST", it returns "Hello World". So GET requests get "Hello World".

3. Final Answer:

   Responds with "Hello World" for GET and "Posted!" for POST -> Option B

4. Quick Check:

   POST = "Posted!", others = "Hello World" [OK]

Hint: Check req.method to decide response text [OK]

Common Mistakes:

• Assuming all requests respond with "Posted!"
• Thinking method property is invalid or missing
• Mixing up POST and GET responses

4. Identify the error in this Deno HTTP server code snippet:

import { serve } from "https://deno.land/std/http/server.ts";
serve(req => {
  req.respond({ body: "Hello" });
});

medium

A. Using req.respond is incorrect; should return a Response object

B. Missing await keyword before req.respond

C. serve function is not imported correctly

D. Response body must be a Uint8Array, not a string

Solution

1. Step 1: Check the method used to send response

   The code calls req.respond, which is from older Deno APIs and not compatible with the web standard serve function.

2. Step 2: Understand the correct response pattern

   In the current Deno HTTP server, the handler must return a Response object instead of calling req.respond.

3. Final Answer:

   Using req.respond is incorrect; should return a Response object -> Option A

4. Quick Check:

   Return Response, don't call req.respond [OK]

Hint: Return Response object, don't call req.respond [OK]

Common Mistakes:

• Using old Deno APIs with new serve function
• Forgetting to return a Response
• Confusing async handling with req.respond

5. How does using web standards in Deno's HTTP server help reduce bugs when sharing code between client and server?

hard

A. Because web standards prevent any runtime errors

B. Because Deno automatically converts server code to client code

C. Because web standards force all code to be synchronous

D. Because both environments use the same APIs, reducing differences and surprises

Solution

1. Step 1: Understand the role of shared APIs

   Using the same web standard APIs on client and server means developers write similar code for both sides.

2. Step 2: Recognize how this reduces bugs

   When APIs match, fewer surprises happen due to different behaviors or missing features, reducing bugs.

3. Final Answer:

   Because both environments use the same APIs, reducing differences and surprises -> Option D

4. Quick Check:

   Same APIs = fewer bugs [OK]

Hint: Same APIs client/server means fewer bugs [OK]

Common Mistakes:

• Thinking Deno converts code automatically
• Believing web standards force sync code
• Assuming web standards eliminate all runtime errors