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

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