When I started building my first ever front-end application using React, I hadn't really grasped the importance of RESTful routing just yet. My application, Stream-Mii, was a simple webform that allowed users to search for their favorite shows using a public API and assign the series to a day of the week. Users could then go back and view which shows they had planned to watch on that particular day.
Keeping Routes Simple
I remember learning that routes should be kept simple, but why? After doing some research, I learned that there is a specific (and highly appreciated) reason why routes should be kept simple - and how all of our applications are connected in a larger picture.
What is RESTful Routing?
REST stands for Representational State Transfer. The formal definition for REST is 'a term exchanging data in well-defined formats in order to increase interoperability'.
What this means is that across different languages, there is a set structure in place for handling the different HTTP methods.
HTTP is considered stateless, so when we navigate from one page to another in an application, HTTP doesn't retain any information between the pages. As a developer, we have to implement code to let the application know how to respond to these changes.
Why is REST so appreciated by developers?
Standardization. Before REST, developers would create unique names for each route. That means that every application would have a unique structure for routes. With the number of applications available today, you can only imagine how unsustainable this approach was. However, REST really showcases how connected our applications are.
When you think about everything that we do on the web, it's hard to believe that all of those things can be boiled down to 7 primary actions. This helped me structure my routes for Stream-Mii:
- GET: (/shows - returns a collection of saved shows)
- NEW: (/shows/new - returns a form to add a new show)
- POST: (/shows/new - saves a new show to the database)
With this structure, if I wanted to build on to my application in the future, I could use:
- SHOW: (/shows/:id - returns an existing show with the show details)
- EDIT: (/shows/:id/edit - returns a form to edit an existing show)
- PATCH: (/shows/:id - updates an existing show in the database)
- DELETE: (/shows/:id - deletes an existing show)
Top comments (0)