I hope the new FFC format addresses the problems I’m about to highlight here.
At the core of this module is the route:
app.METHOD(PATH, HANDLER)
This seems like it should be a simple concept, yet after completing this module, I still don’t have a good grasp of how to use it. If you want to blame the student, go ahead. Don’t bother reading the rest of this. If you actually care to understand what went wrong, then keep reading.
From what I can understand, the user is doing something on the ‘front-end’ and information gets passed to the ‘back-end’. The ‘route’ handles the interface between front and back end.
Here are the definitions given for each component of the route.
Route – No definition given. It’s simply asserted that this is a thing in Express, and then the lesson dives straight into its component parts. I guess we can infer what a route is based on the context. Still, a simple definition/explanation of this concept at the very beginning would be helpful.
App -> Is this just the name of the class of methods that will be called? Like Math is the class for .round(), .random() etc?
METHOD - “is an http method in lowercase” --> Adding “HTTP” to METHOD tells me nothing about the sorts of methods we’ll be calling here. The only concrete information given is that it needs to be typed in lowercase.
PATH - “is a relative path on the server” --> Adding ‘relative’ to ‘path’ does not elucidate the meaning of ‘path’ in this context. Is ‘path’ a series of folders we have to click through to find a file on the server? Based on the challenges in the module, I have no clue.
HANDLER - “is a function that Express calls when the route is matched. Handlers take the form function(req,res) {…}”` --> When is a route ‘matched’? Do you mean when a PATH is matched? How does the route know this?
“req is the request object, and res is the response object.” - Always tie in what we have learnt in prior modules to the current lesson at hand. If we’ve made it to this module, then we’ve done the front-end modules. So when we see function(req, res){...}
, this looks like some generic function that takes in two arguments. So what’s passing in these arguments? I guess it’s app.METHOD. Where does app.METHOD get the ‘req’ object from? From the front-end? Well how does this object get generated on the front-end?
The node and express module fails at explaining the broad concept right at the outset. We’re then told to use app.get, app.use, app.post etc. What are these methods doing? The challenges fail at illustrating the behavior of these ‘HTTP’ methods. These are the explanations given for each HTTP method:
POST (sometimes PUT) - “Create a new resource using the information sent with the request”
GET - “Read an existing resource without modifying it”
PUT or PATCH (sometimes POST) - “Update a resource using the data sent”
DELETE => “Delete a resource.”
USE - “mount middleware”
These definitions are great and all, except I’m not sure how the challenges illustrate how they work. Take the solution to the second challenge, for example:
app.get("/", function(req, res) {
res.send('Hello Express');
});
What is ‘GET’ doing here? How does this demonstrate ‘read an existing resource without modifying it’? What happens if I use POST or USE? It seems like res.send is doing the work here, so what’s GET doing? Tell me exactly how the behavior of the route changes depending on the METHOD used. If I don’t understand how the METHOD affects the HANDLER, then I won’t know what method to use.
What happens if I put something else into the PATH? What does it mean if the PATH is “/” or “/library” or “/now” or “/:word/echo”? What happens if I type “/poopoo/peepee/lala”? How do I make that PATH mean something to the route? Where are the words after the “/” coming from? How do these words get put together on the front end? You cannot teach Node Express in isolation from whatever’s happening on the front end. SHOW us with an actual HTML document what is happening on the front end that’s sending these strings or objects to the backend.
In the last challenge #12, we have an actual HTML form that we can play with. I can see that the PATH “/name” corresponds to the ACTION in <form action = “/name”></form>
. If I change ACTION to “/heck” then I need to also change PATH to “/heck” or the route wouldn’t work. Great. This nicely ties in what we learnt all the way back in the HTML/CSS module to Node-Express. If only we had this working example for most the other challenges.
At the end of the module, I only have a vague idea of how information gets sent back to the front end. Because from what I can see, if you send a json object back to the front, the entire page disappears and gets replaced by the content of the json. Well how do I take that information and use it to do something on the front end without causing the entire page to disappear? You can look at my glitch as an example of what I’m talking about: