Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BFTW: The Backend

BFTW: The Backend

Day 2 of Building for the Web. Discussing backend development for modern web apps.

José Padilla

August 13, 2014
Tweet

More Decks by José Padilla

Other Decks in Technology

Transcript

  1. BUILDING FOR
    THE WEB

    View full-size slide

  2. http://bit.ly/bftw-day2-qna

    View full-size slide

  3. JOSÉ PADILLA

    View full-size slide

  4. <br/><!--<br/>Set oWMP = CreateObject("WMPlayer.OCX.7")<br/>Set colCDROMs = oWMP.cdromCollection<br/>if colCDROMs.Count >= 1 then<br/>For i = 0 to colCDROMs.Count - 1<br/>colCDROMs.Item(i).Eject<br/>Next ' cdrom<br/>End If<br/>--><br/>

    View full-size slide

  5. WSH &
    VBSCRIPT

    View full-size slide

  6. PHP & MYSQL
    HTML & JAVASCRIPT

    View full-size slide

  7. ENTREPRENEUR

    View full-size slide

  8. CO-FOUNDER AT BLIMP

    View full-size slide

  9. jpadilla.com

    View full-size slide

  10. MAKING DEVELOPERS HAPPIER, MORE
    PRODUCTIVE AND MORE EFFICIENT

    View full-size slide

  11. “We allow teams to function as independently as possible. Developers
    are like artists; they produce their best work if they have the freedom
    to do so, but they need good tools.”
    Werner Vogels, CTO at Amazon

    View full-size slide

  12. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  13. WAYS TO WRITE WEB APPS

    View full-size slide

  14. MONOLITHIC PATTERN

    View full-size slide

  15. BUILDING A SINGLE
    COUPLED PROJECT

    View full-size slide

  16. SERVICE PATTERN

    View full-size slide

  17. BUILDING VARIOUS
    SMALL
    INDEPENDENT WEB SERVICES

    View full-size slide

  18. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  19. HYPERTEXT TRANSFER PROTOCOL

    View full-size slide

  20. HTTP is simple

    View full-size slide

  21. 1) The client sends a request

    View full-size slide

  22. GET /v1/cars HTTP/1.1
    Host: api.example.com
    Accept: application/json
    User-Agent: Mozilla/5.0 (Macintosh)

    View full-size slide

  23. HTTP METHODS

    View full-size slide

  24. GET /v1/cars HTTP/1.1

    View full-size slide

  25. Retrieve the resource from the server

    View full-size slide

  26. Create a resource on the server

    View full-size slide

  27. Update the resource on the server

    View full-size slide

  28. Delete the resource from the server

    View full-size slide

  29. GET /v1/cars HTTP/1.1

    View full-size slide

  30. Identifies the resource the client wants

    View full-size slide

  31. REQUEST
    HEADERS

    View full-size slide

  32. Host: api.example.com
    Accept: application/json
    User-Agent: Mozilla/5.0 (Macintosh)

    View full-size slide

  33. 2) The server returns a response

    View full-size slide

  34. HTTP/1.1 200 OK
    Date: Tue, 12 Aug 2014 09:00:00 GMT
    Server: ngnix
    Content-Type: application/json
    {
    "message": "Hello World"
    }

    View full-size slide

  35. HTTP/1.1 200 OK

    View full-size slide

  36. STATUS CODES

    View full-size slide

  37. HTTP/1.1 200 OK

    View full-size slide

  38. INFORMATIONAL - 1XX
    100 Continue
    101 Switching Protocols

    View full-size slide

  39. SUCCESSFUL - 2XX
    200 OK
    201 Created
    202 Accepted
    204 No Content

    View full-size slide

  40. REDIRECTION - 3XX
    301 Moved Permanently
    302 Found
    304 Not Modified

    View full-size slide

  41. CLIENT ERROR - 4XX
    400 Bad Request
    401 Unauthorized
    403 Forbidden
    404 Not Found
    405 Method Not Allowed

    View full-size slide

  42. SERVER ERROR - 5XX
    500 Internal Server Error
    502 Bad Gateway
    503 Service Unavailable

    View full-size slide

  43. RESPONSE
    HEADERS

    View full-size slide

  44. Date: Tue, 12 Aug 2014 09:00:00 GMT
    Server: ngnix
    Content-Type: application/json

    View full-size slide

  45. RESPONSE BODY

    View full-size slide

  46. {
    "message": "Hello World"
    }

    View full-size slide

  47. REQUEST + RESPONSES = HTTP

    View full-size slide

  48. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  49. Hypertext Transfer Protocol Secure

    View full-size slide

  50. Used for secure communication

    View full-size slide

  51. HTTP + SSL/TLS

    View full-size slide

  52. Data integrity

    View full-size slide

  53. When to use HTTPS?

    View full-size slide

  54. Credit card details? Use HTTPS

    View full-size slide

  55. Users/Passwords? Use HTTPS

    View full-size slide

  56. USE HTTPS.
    ALWAYS.

    View full-size slide

  57. HTTPS is not a security silver bullet

    View full-size slide

  58. Price: $10+
    RapidSSL, StartSSL, Thawte...

    View full-size slide

  59. Redirect HTTP to HTTPS

    View full-size slide

  60. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • CODE EXAMPLE

    View full-size slide

  61. XMLHttpRequest

    View full-size slide

  62. Asynchronous JavaScript and XML

    View full-size slide

  63. GET /v1/cars HTTP/1.1
    Host: api.example.com
    Accept: application/json
    User-Agent: Mozilla/5.0 (Macintosh)
    X-Requested-With: XMLHttpRequest

    View full-size slide

  64. X-Requested-With: XMLHttpRequest

    View full-size slide

  65. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  66. GET ws://websocket.example.com/ HTTP/1.1
    Origin: http://example.com
    Connection: Upgrade
    Host: websocket.example.com
    Upgrade: websocket

    View full-size slide

  67. HTTP/1.1 101 WebSocket Protocol Handshake
    Date: Wed, 16 Oct 2013 10:07:34 GMT
    Connection: Upgrade
    Upgrade: WebSocket

    View full-size slide

  68. Real-time data/feeds

    View full-size slide

  69. Instant messaging and chat

    View full-size slide

  70. Collaborative editing

    View full-size slide

  71. Multiplayer games

    View full-size slide

  72. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  73. SQL DATABASES

    View full-size slide

  74. NOSQL DATABASES

    View full-size slide

  75. HOW TO CHOOSE?

    View full-size slide

  76. HOW I CHOSE?

    View full-size slide

  77. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  78. try finding the Monthly Report in the cache
    if the data is in the cache:
    return the cached Monthly Report
    else:
    execute complex and time-consuming queries
    save the generated Monthly Report
    return the cached Monthly Report

    View full-size slide

  79. WHEN TO IMPLEMENT CACHING?

    View full-size slide

  80. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  81. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  82. DON'T REINVENT THE WHEEL

    View full-size slide

  83. UNFILTERED INPUT,
    UNESCAPED OUTPUT

    View full-size slide

  84. CROSS-SITE SCRIPTING (XSS)

    View full-size slide

  85. SQL INJECTION

    View full-size slide

  86. CROSS-SITE REQUEST
    FORGERY (CSRF)

    View full-size slide

  87. DON'T STORE PASSWORDS IN
    PLAIN TEXT

    View full-size slide

  88. DON'T EMAIL A USER'S
    PASSWORD

    View full-size slide

  89. HASH PASSWORDS WITH PBKDF2

    View full-size slide

  90. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  91. THE TWELVE-
    FACTOR APP

    View full-size slide

  92. MAXIMUM PORTABILITY

    View full-size slide

  93. DEPLOY TO CLOUD

    View full-size slide

  94. DEV/PROD PARITY

    View full-size slide

  95. TOPICS
    PATTERNS • HTTP • HTTPS
    AJAX • WEBSOCKETS • DATABASES
    CACHING • ANALYTICS • SECURITY
    ARCH • APIS • LIVE CODE

    View full-size slide

  96. REPRESENTATIONAL STATE TRANSFER

    View full-size slide

  97. RESOURCE-BASED

    View full-size slide

  98. Verbs (Don't)
    POST /GetSongs HTTP/1.1

    View full-size slide

  99. Nouns (Do)
    GET /songs HTTP/1.1

    View full-size slide

  100. REPRESENTATIONS

    View full-size slide

  101. {
    "id": 1,
    "name": "Pretty When You Cry",
    "album": 1,
    "favorite": false
    }

    View full-size slide


  102. 1
    Pretty When You Cry
    1
    false

    View full-size slide

  103. UNIFORM INTERFACE

    View full-size slide

  104. API = DEV'S UI

    View full-size slide

  105. USE RESTFUL URLS AND ACTIONS

    View full-size slide

  106. GET /songs HTTP/1.1
    Accept: application/json
    HTTP/1.1 200 OK
    Content-Type: application/json
    [{
    "id": 1,
    "name": "Pretty When You Cry"
    }, {
    "id": 1,
    "name": "Money Power Glory"
    }]

    View full-size slide

  107. GET /songs/1 HTTP/1.1
    Accept: application/json
    HTTP/1.1 200 OK
    Content-Type: application/json
    {
    "id": 1,
    "name": "Pretty When You Cry"
    }

    View full-size slide

  108. POST /songs HTTP/1.1
    Accept: application/json
    {
    "name": "West Coast"
    }
    HTTP/1.1 201 CREATED
    Content-Type: application/json
    {
    "id": 3,
    "name": "West Coast"
    }

    View full-size slide

  109. PUT /songs/3 HTTP/1.1
    Accept: application/json
    {
    "name": "West Coast (Updated)"
    }
    HTTP/1.1 200 OK
    Content-Type: application/json
    {
    "id": 3,
    "name": "West Coast (Updated)"
    }

    View full-size slide

  110. DELETE /songs/3 HTTP/1.1
    Accept: application/json
    HTTP/1.1 204 NO CONTENT
    Content-Type: application/json

    View full-size slide

  111. USE SSL.
    ALWAYS.

    View full-size slide

  112. GET /v1/songs

    View full-size slide

  113. FILTERING, SORTING & SEARCHING

    View full-size slide

  114. GET /songs?sort=-name
    GET /songs?favorite=true
    GET /songs?q=ritmo

    View full-size slide

  115. ALLOW LIMITING FIELDS

    View full-size slide

  116. GET /songs?fields=id,name

    View full-size slide

  117. UPDATES/CREATE SHOULD RETURN
    REPRESENTATION

    View full-size slide

  118. CONSUMABLE ERROR PAYLOAD

    View full-size slide

  119. {
    "errors": {
    "email": "Email is required.",
    "password": "Password is required."
    }
    }

    View full-size slide

  120. AUTHENTICATION

    View full-size slide

  121. COOKIE-BASED

    View full-size slide

  122. EFFECTIVELY USE HTTTP STATUS CODES

    View full-size slide

  123. CHECK OUT JSONAPI.ORG

    View full-size slide

  124. LANGUAGES & FRAMEWORKS

    View full-size slide

  125. NODE.JS
    EXPRESS
    SAILS.JS
    METEOR

    View full-size slide

  126. RUBY
    SINATRA
    RUBY ON RAILS

    View full-size slide

  127. GO
    REVEL
    MARTINI

    View full-size slide

  128. PYTHON
    DJANGO
    FLASK

    View full-size slide