An Intro to web development talk given for LocalHackDay 2014.

1. Intro to Web Development
digitalocean.com
With Python/Flask
By: Kaushal Parikh
Local Hack Day December, 2014

2. digitalocean.com
Who am I?
Kaushal Parikh
Student @Rutgers University
Evangelist @ DigitalOcean
Web Developer @ The Internet

3. digitalocean.com
Overview
What is a web application?
Buzzwords/Terms: HTTP, REST, CRUD, Middleware, etc.
Data flow through web applications
How requests/responses work

4. digitalocean.com
What is a web application?
Request
Response

5. digitalocean.com
The User
Request
Response

6. digitalocean.com
Your User
Makes requests
Typing in a url, form submissions, button clicks
Receives responses
Displays content

7. curl -X GET
http://www.google.com
digitalocean.com

8. digitalocean.com
The Request
Request
Response

9. digitalocean.com
The Request
Made over HTTP
Uses the HTTP methods
Typically uses the Rest Paradigm

10. Commonly Used Less Commonly Used
digitalocean.com
HTTP
Hyper Text Transport Protocol
Verbs:
GET
POST
PUT
DELETE
TRACE
CONNECT
OPTIONS
PATCH
etc.

11. digitalocean.com
REST
Representational State Transfer
Paradigm for how to use the HTTP verbs pragmatically
Ex
GET - get a resource
DELETE - delete resource
POST - create new entry/resource

12. digitalocean.com
The Application
Request
Response

13. digitalocean.com
What is a server?
Server(hardware) vs Server(software)
Place where the application is running
Accepts requests
Sends response
HTTP Middleware

14. digitalocean.com
Server (hardware)
Physical machine
Can have several programs/processes running on it

15. digitalocean.com
Server (software)
Program that will accept requests and send responses
‘Back end’
Responsibilities:
Talking to databases
Keeping state

16. digitalocean.com
HTTP Middleware
Parses and sanitizes requests
Makes sending responses easy

17. digitalocean.com
The Response
Request
Response

18. digitalocean.com
Response
Generated by server (software)
Types of responses:
HTML page
Strings
JSON

19. digitalocean.com
Status codes
Also included in the response
Gives the users more information about the response
1xx - Informational Codes
2xx - Success! Received! Understood!
3xx - Redirect
4xx - Client Error Detected
5xx - Server Error Detected

20. digitalocean.com
Your web application!
Request
Response

21. digitalocean.com
Lets write some code!
Example app in Python/Flask
https://github.com/kaushal/localhackday

22. digitalocean.com
Conclusion
Web development isn’t that complicated
Data flow
Request/response
Use tools/frameworks
Ask for help!

23. digitalocean.com
Helpful links
Flask - http://flask.pocoo.org/
HTTP - http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTP status codes - http://www.w3.org/Protocols/rfc2616/rfc2616-
sec10.html
REST - http://en.wikipedia.org/wiki/Representational_state_transfer

24. digitalocean.com
Contact Info
Kaushal Parikh
kparikh@digitalocean.com
https://twitter.com/cashbagel
https://github.com/kaushal

25. digitalocean.com
The End.