diff --git a/Readme.md b/Readme.md index 754de6b..b070125 100644 --- a/Readme.md +++ b/Readme.md @@ -274,6 +274,7 @@ The repo for our backend framework- [Velocy](https://github.com/ishtms/velocy). - [Hints](/chapters/ch06.5-ex-implementing-a-trie.md#hints) - [Solution](/chapters/ch06.5-ex-implementing-a-trie.md#solution-1) - [Exercise 2 - Implementing our Trie based `Router`](/chapters/ch06.6-ex-implementing-router.md#exercise-2---implementing-our-trie-based-router) + - [Challenge 1: Implementing the `addRoute` method](/chapters/ch06.6-ex-implementing-router.md#challenge-1-implementing-the-addroute-method) - [Requirements](/chapters/ch06.6-ex-implementing-router.md#requirements) - [More details](/chapters/ch06.6-ex-implementing-router.md#more-details) @@ -293,7 +294,10 @@ The repo for our backend framework- [Velocy](https://github.com/ishtms/velocy). - [Example](/chapters/ch06.7-ex-adding-http-methods#example) - [Hints](/chapters/ch06.7-ex-adding-http-methods#hints) - [Solution](/chapters/ch06.7-ex-adding-http-methods#solution) -- [Exercise 5 - Implementing Dynamic Routing](/chapters/ch06.9-ex-dynamic-routing#exercise-4-implementing-dynamic-routing) + +- [Adding HTTP methods to the Router](/chapters/ch06.8-adding-verbs-api.md) + - [Update the `TrieRouter` class](/chapters/ch06.8-adding-verbs-api.md#update-the-trierouter-class) +- [Exercise 4 - Implementing Dynamic Routing](/chapters/ch06.9-ex-dynamic-routing#exercise-4-implementing-dynamic-routing) - [Why Dynamic Routing?](/chapters/ch06.9-ex-dynamic-routing#why-dynamic-routing) - [Flexibility](/chapters/ch06.9-ex-dynamic-routing#flexibility) - [Better User Experience](/chapters/ch06.9-ex-dynamic-routing#better-user-experience) diff --git a/chapters/ch06.8-ex-adding-verbs-api.md b/chapters/ch06.8-ex-adding-verbs-api.md deleted file mode 100644 index 6b18fca..0000000 --- a/chapters/ch06.8-ex-adding-verbs-api.md +++ /dev/null @@ -1,89 +0,0 @@ -## Exercise 4 - Adding HTTP methods to the Router - -In this exercise, we will improve our `TrieRouter` API by implementing support for HTTP verbs (GET, POST, PUT, DELETE, etc.) directly instead of using raw strings. Let's look at our current implementation of the `TrieRouter`: - -```js -trieRouter.addRoute("GET", "/users", () => {}); -trieRouter.addRoute("GET", "/", () => {}); -``` - -As you could already feel, this approach is not very flexible and uses raw strings, which can lead to typing errors, and has no auto-completion support unfortunately. Let's improve this by adding support for HTTP methods directly to the `TrieRouter` API. - -Firstly, we've added dedicated methods for each HTTP method in the `TrieRouter` class. This allows users to define routes more intuitively using method-specific calls like `trieRouter.get('/home', handler)` for the GET method and `trieRouter.post('/home', handler)` for the POST method. - -### Update the `TrieRouter` class - -```js -const HTTP_METHODS = { ... }; - -class TrieRouter { - ... - - #addRoute(path, method, handler) { - ... - } - - get(path, handler) { - this.#addRoute(path, HTTP_METHODS.GET, handler); - } - - post(path, handler) { - this.#addRoute(path, HTTP_METHODS.POST, handler); - } - - put(path, handler) { - this.#addRoute(path, HTTP_METHODS.PUT, handler); - } - - delete(path, handler) { - this.#addRoute(path, HTTP_METHODS.DELETE, handler); - } - - patch(path, handler) { - this.#addRoute(path, HTTP_METHODS.PATCH, handler); - } - - head(path, handler) { - this.#addRoute(path, HTTP_METHODS.HEAD, handler); - } - - options(path, handler) { - this.#addRoute(path, HTTP_METHODS.OPTIONS, handler); - } - - connect(path, handler) { - this.#addRoute(path, HTTP_METHODS.CONNECT, handler); - } - - trace(path, handler) { - this.#addRoute(path, HTTP_METHODS.TRACE, handler); - } - ... -} -``` - -Firstly, we've added dedicated methods for each HTTP method in the `TrieRouter` class. This allows users to define routes more intuitively using method-specific calls like `trieRouter.get('/home', handler)` for the GET method and `trieRouter.post('/home', handler)` for the POST method. - -In each of these methods, we call the existing `addRoute` method, passing the appropriate HTTP method from the `HTTP_METHODS` object. - -This change allows for a consistent and clear way to find routes based on the HTTP method. - -Sedcondly, we've made the `addRoute` method private by prefixing it with a `#`. This means that the `#addRoute` method can now only be accessed from within the `TrieRouter` class and not from outside. - -Now, to test the new API, let's update our previous example: - -```js -const trieRouter = new TrieRouter(); - -trieRouter.get("/users", function get1() {}); -trieRouter.post("/users", function post1() {}); -trieRouter.put("/users", function put1() {}); -trieRouter.delete("/users", function delete1() {}); - -console.log(trieRouter.findRoute("/users/e", HTTP_METHODS.GET)); // null -console.log(trieRouter.findRoute("/users", HTTP_METHODS.POST)); // function post1() {} -console.log(trieRouter.findRoute("/users", HTTP_METHODS.PUT)); // function put1() {} -console.log(trieRouter.findRoute("/users", HTTP_METHODS.TRACE)); // undefined -``` - -Looks good, and now we have a more intuitive way to define routes based on HTTP methods. Let's move on to the next exercise to add support for route parameters. diff --git a/chapters/ch06.9-ex-dynamic-routing.md b/chapters/ch06.9-ex-dynamic-routing.md index a1b7036..f906470 100644 --- a/chapters/ch06.9-ex-dynamic-routing.md +++ b/chapters/ch06.9-ex-dynamic-routing.md @@ -1,4 +1,4 @@ -## Exercise 5 - Implementing Dynamic Routing +## Exercise 4 - Implementing Dynamic Routing When we're building a server application, dynamic routing is an essential feature for creating flexible and scalable applications. To fully grasp its significance and how we can enhance our router to support dynamic routes like `/users/:id`, let's delve into the concept of dynamic routing.