22 Aug 2016

Basics of Basics of Web Application Development - Crash Course

I've not made mistake of repeating the words "Basics of" as you might have been thinking. I'm just calling these things so basic and integral to web development that they are basics of "basic concepts of web application development"

1. Protocol - Protocol means,
    • same terms that are understood or agreed by two or more parties (e.g. client browser and server).
    • a language (or call it sign language or code words) that is understood by two or more parties
2. HTTP - is a protocol/language of web. Web clients and web servers talk in this language with each others. For e.g.

Client says (in its code language i.e. HTTP Request) -

POST /v2/sessiontoken HTTP/1.1
Host: app.kashflow.com
Content-Type: application/json
Accept: application/json

{"username":"ismails", "password":"********"}
Interpretation of code language -
  • Firstly, it is said by client which means it is a request - HTTP request.
  • POST - it's an HTTP method. This means it is a request to create a resource (related to REST concepts). More details here.
  • /v2/sessiontoken - it is a part of URL i.e. it will be appended to value of host header which is provided in 2nd line. So whole URL will form like http://app.kashflow.com/v2/sessiontoken. It is address of the recipient of this message i.e. for whom this code worded message is meant for. 
  • HTTP/1.1 - This request is created using HTTP/1.1 version of sign/code language. It's modern. It might contain modern slangs ;-)
  • From 2nd line starts all request headers and their values follow after colon sign i.e. `:`. Each header has a different meaning and the other party understands it's value accordingly. 
    • Host- request will go to this server address. Address of the server for which this message is intended. Client is saying "Hey Mister! I'm talking to you"
    • Content-Type - It is a message for the server that the body of this request that follows (last line), is in JSON format. If you want to interpret it please make a note about this. Client says "I'm talking in Spanish. Use interpreter accordingly ;-)"
    • Accept - means "As a client I will only understand if you return me a response body which is in JSON format (Spanish language)" 
  • After an extra line break comes body of the request. That is actual talk/speech of client to server.
So this is what client has told to the server. Now server gets the request. It understands/interprets/decodes the request. It processes i.e. takes action as per the request. (In this case, client expects the server to verify the username and password, create an authentication token  and respond with the same if username and password are valid. This part is creation/invention of a developer's mind. You as a developer will decide what you want the client to request and program the server to do as per the request.) Finally server informs back (HTTP Response) to the requester (client) about what action it took and/or its results.

Server says (in it's code language i.e. HTTP Response)
HTTP/1.1 201 Created
Content-Length: 829
Content-Type: application/json; charset=utf-8

{"SessionToken":"f3f14a8b-d370-4318-a629-0a124e47c014"}

Interpretation of code language -
  • HTTP/1.1 - it specifies version of sign/code language this request in.
  • 201 Created - It's HTTP status code. This means as per your request authentication token has been created. Different status codes mean differently. Look for more details here, here or here.
  • Then starts HTTP response headers. Similar to request headers, each one has a meaning. 
    • Content-Length specifies how long the content of body is
    • Content-Type specifies format of response in the body (remember JSON format? Yep, It's client's wish answered)
  • After an extra line break comes body of the response
If for example the username and passwords are invalid, the response would have been different

HTTP/1.1 400 Bad Request
Content-Length: 71
Content-Type: application/json; charset=utf-8

{"Message":"Invalid username or password", "Error":"InvalidCredentials"}

Look at HTTP status codes to decode this response.


3. Browser is an HTTP client.
So let's understand how browser talks HTTP.
  1. Fire up chrome 
  2. Hit F12 key to open up chrome dev tools. Context click and select inspect element if you are on Mac
  3. Select network tab on chrome dev tools
  4. Tick "Preserve log" checkbox
  5. Type google.com in address bar (in chrome main window)
  6. Hit enter.
  7. Select the first request from the list in chrome dev tools window. 
This is what I get to see. Let's decode it.



HTTP Request
  • GET request to `/` (it's a forward slash) i.e. root of the host google.com using HTTP 1.1 version of language
  • Browser `Accept`s or understands only one of these "text/html, application/xhtml+xml, application/xml" other certain image formats etc
HTTP Response
  • 302 Found . It means server is saying that "You have reached at correct address and with valid parcel (request), unfortunately, the information (resource) you are looking for has moved to other place (specified in location header)"
  • Look at the 2nd request in the list (chrome dev tools). Is it a request to same URL which is specified in location header? Yes it is. Browser has interpreted the response correctly and requested other URL as per the response it got from the server.
More walk-through
Basic concepts of web applications, how they work and the HTTP protocol
HTTP in depth

Basic HTTP codes for quick reference
  • 2xx - Success codes
    • 200 - Success - OK - this simply means whatever you have requested is served. Meaning differs as per the request method and content.
    • 201 - Created - this is generally a response of POST or PUT requests
    • 204 - No Content - The server has successfully fulfilled the request and that there is no additional content to send in the response payload/body.
    • 3xx - Redirection codes
      • 301 - Redirction - the information you have requested is now available at some other URL which is provided in `location` header of response
      • 302 - Redirection  - same as above. But a newer version. Look for more details on HTTP specs
      • 4xx - Bad Request codes
        • 400 - Simple bad request i.e. something bad with the request body. Change it correct it and send whatever server expects. Detailed explaination should be provided in response body

      17 comments:

      1. Nice article!! Useful and easy to understand.

        ReplyDelete
      2. GOOD KNOWLEDEGE.

        ReplyDelete
      3. Wow!! it's a very nice and easy to understand article Ismail :)

        ReplyDelete
      4. Nice blog. ServerPoint Launches New Affiliate Program ! Utilizing our tools to create custom tracking links, you can refer clients to sign up to ServerPoint's services and then receive a very profitable commission upto $1000 per qualifying sale!

        ReplyDelete
      5. I like this blog posting. I got some useful information from this.

        Web Application Development

        ReplyDelete
      6. Very good explain. For more details of development services click here.
        Web Application Development
        Web Development Services

        ReplyDelete
      7. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      8. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      9. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      10. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      11. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      12. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      13. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      14. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      15. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      16. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
        Website: davidwalsh.name

        ReplyDelete
      17. Amazing write-up
        what a fantastic post, this is so useful information cant wait to utilize, thank you for sharing this post, looking more form your side.

        ReplyDelete