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

Web Development 101 by @tuttiq

Web Development 101 by @tuttiq

An introduction to how web services and apps work. Covering concepts like front-end, back-end, servers, clients, APIs, etc

Tutti Quintella

April 01, 2019
Tweet

More Decks by Tutti Quintella

Other Decks in Programming

Transcript

  1. Web Development 101
    An overview of how web services or apps work
    By @tuttiq

    View Slide

  2. ● What is Web Development?
    ● Front-end? Back-end? Server? Client?
    ● What's the architecture of a web app?
    ● What are APIs? Endpoints? Requests? Responses?
    ● How does the server side work?
    ● What are the languages, frameworks and tools of web development?
    Questions to answer

    View Slide

  3. What is web development?

    View Slide

  4. ● Transforming code into web services and/or web pages
    What is web development?

    View Slide

  5. Server? Client?
    Front-end? Back-end?
    With - or without -?

    View Slide

  6. Web Services or Apps
    Back-end
    (Server side)
    Front-end
    (Client side)
    ● Software you access through the World
    Wild Wide Web (The INTERNET!)
    ○ Divided in Back-end (Server side)
    and Front-end (Client side)
    ● Front-end ⇒ part of the application that
    runs in a user client, directly accessible
    or visible to users of the application
    ● Back-end ⇒ part of the application that
    runs in a server, not directly accessible
    or visible to users of the application

    View Slide

  7. ● Software you access through the World
    Wild Wide Web (The INTERNET!)
    ○ Divided in Back-end (Server side)
    and Front-end (Client side)
    ● Front-end ⇒ part of the application that
    runs in a user client, directly accessible
    or visible to users of the application
    ● Back-end ⇒ part of the application that
    runs in a server, not directly accessible
    or visible to users of the application
    Web Services or Apps
    Back-end
    (Server side)
    Front-end
    (Client side)

    View Slide

  8. ● Clients:
    ○ User client: desktop app, or browser or mobile device. Whatever tool your
    users will use to access / interact / use your application
    ○ Non-user facing programs can also be called clients if they access a server
    application, but let's keep it simple for now...
    ● Server:
    ○ Literally: a computer that's connected to the internet 24/7 with a server
    application running on it
    ○ Server application: a program that provides data or operations to clients
    Web Services or Apps

    View Slide

  9. What is the
    architecture
    of a web app?

    View Slide

  10. What is the
    architecture
    of a web app?

    View Slide

  11. Simplified Architecture
    Back-end (Server side)
    Front-end (Client side)
    App Servers
    Databases

    View Slide

  12. Complete Architecture
    Source
    (and a great article):
    Web Architecture 101
    by Jonathan Fulton
    (Videoblocks)

    View Slide

  13. Simplified Architecture
    Back-end (Server side)
    Front-end (Client side)
    App Servers
    Databases

    View Slide

  14. Simplified Architecture
    Back-end (Server side)
    Front-end (Client side)
    App Servers
    Databases
    WTF?

    View Slide

  15. What are APIs? Endpoints?
    Requests? Responses?

    View Slide

  16. Request
    Response
    Back-end / Server side
    (runs on a server: windows/linux/mac)
    Front-end / Client side
    (runs on a client: browser / mobile app)
    Web Apps
    Request
    Response
    Some applications provide a UI (User Interface) through web
    pages or mobile apps

    View Slide

  17. Back-end / Server side Front-end / Client side
    Web Apps
    Requesting web pages
    ENDPOINT: https://mercari.jp/dashboard
    METHOD: GET
    TYPE: HTML
    HTTP Request

    View Slide

  18. Back-end / Server side Front-end / Client side
    Web Apps
    Responding with HTML


    A beautiful page


    Response (HTML)

    View Slide

  19. ● Some services provide an interface for interaction that's not a UI (User Interface)
    ● It's an API ⇒ Application Programming Interface
    Web Services
    Request
    Response
    ENDPOINT:
    http://worldclockapi.com/api/json/est/now
    METHOD: GET
    {
    $id: "1",
    currentDateTime: "2019-03-11 04:51",
    utcOffset: "-04:00:00",
    isDayLightSavingsTime: true,
    dayOfTheWeek: "Monday"
    }
    HTTP Request
    JSON Response

    View Slide

  20. ● Define how to access / interact /
    use an application or service (from
    a programming point of view)
    ● Private APIs: only accessible
    internally from your system
    ● Public APIs: open to public
    ○ GoogleMaps API
    ○ Facebook login API
    ○ Many others
    APIs

    View Slide

  21. ● Endpoints: the URLs available on your API (the entry points for using your application)
    ● Requests: the way other programs can use (call) your APIs
    ● Response: how your application responds to each request
    Endpoints, Requests, Responses
    The line is busy.
    This phone number is
    not registered.
    Response
    Call (Request)
    Endpoint: phone number
    Telephone
    Service

    View Slide

  22. Web Services
    Request
    Response
    ENDPOINT:
    http://worldclockapi.com/api/json/est/now
    METHOD: GET
    CONTENT-TYPE: JSON
    {
    status: 200 OK,
    id: "1",
    currentDateTime: "2019-03-11 04:51",
    utcOffset: "-04:00:00",
    isDayLightSavingsTime: true,
    dayOfTheWeek: "Monday"
    }
    HTTP Request
    JSON Response

    View Slide

  23. ● HTTP Response Status Code:
    ○ 200 OK, 404 Not Found, 403 Forbidden
    ○ List of HTTP status codes (Wikipedia)
    ● Requests attributes:
    ○ Method: GET, POST, PUT / PATCH, DELETE
    ○ Content type: HTML, JSON, Image, Plain Text
    ○ Parameters and payload: data
    ● API design (how to organize your endpoints and responses)
    ○ API Design Patterns and Best Practices
    Some standards for APIs

    View Slide

  24. Web Services
    Request
    Response
    ENDPOINT: https://mercari.jp/listings
    METHOD: GET
    CONTENT-TYPE: JSON
    {
    status: 200 OK,
    items: [
    { id: "1", title: "iPhone 6" },
    { id: "2", title: "Genki Book I" },
    { id: "3", title: "Gucci Bag" },
    ],
    currentPage: 1,
    pages: 5
    }
    HTTP Request
    JSON Response

    View Slide

  25. Simplified Architecture
    Back-end (Server side)
    Front-end (Client side)
    App Servers
    Databases


    View Slide

  26. Simplified Architecture
    Back-end (Server side)
    Front-end (Client side)
    App Servers
    Databases


    WTF?

    View Slide

  27. How does the server side work?

    View Slide

  28. Simplified Architecture
    Back-end (Server side)
    Client
    App Servers
    Databases

    View Slide

  29. From Monolith API to Microservices
    Mercari API:
    From Monolith to Microservices
    by @teddy at MTC 2018

    View Slide

  30. Less Simplified Architecture
    Source
    (and a great article):
    Web Architecture 101
    by Jonathan Fulton
    (Videoblocks)

    View Slide

  31. More details on architecture and
    following topics coming soon...
    ● What are databases and how do they work?
    ● What are the tools used for web-based app development?
    ● What is the Software Development Life-Cycle (SDLC) a.k.a engineers
    daily / weekly routine

    View Slide

  32. The End
    (for now)

    View Slide