Web Development 101 by @tuttiq

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

• 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

What is web development?

• Transforming code into web services and/or web pages What
is web development?

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

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

• 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)

• 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

What is the architecture of a web app?

Simpliﬁed Architecture Back-end (Server side) Front-end (Client side) App Servers
Databases

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

Databases

Databases WTF?

What are APIs? Endpoints? Requests? Responses?

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

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

Back-end / Server side Front-end / Client side Web Apps
Responding with HTML <html> <body> <title> A beautiful page </title> </body> </html> Response (HTML)

• 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

• Deﬁne 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

• 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

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

• 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

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

Databases ✔ ✔

Databases ✔ ✔ WTF?

How does the server side work?

Simpliﬁed Architecture Back-end (Server side) Client App Servers Databases

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

Less Simpliﬁed Architecture Source (and a great article): Web Architecture
101 by Jonathan Fulton (Videoblocks)

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

The End (for now)

Web Development 101 by @tuttiq

Web Development 101 by @tuttiq

Tutti Quintella

More Decks by Tutti Quintella

Other Decks in Programming

Featured

Transcript

Web Development 101 An overview of how web services or

• What is Web Development? • Front-end? Back-end? Server? Client?

What is web development?

• Transforming code into web services and/or web pages What

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

Web Services or Apps Back-end (Server side) Front-end (Client side)

• Software you access through the World Wild Wide Web

• Clients: ◦ User client: desktop app, or browser or

What is the architecture of a web app?

What is the architecture of a web app?

Simpliﬁed Architecture Back-end (Server side) Front-end (Client side) App Servers

Complete Architecture Source (and a great article): Web Architecture 101

Simpliﬁed Architecture Back-end (Server side) Front-end (Client side) App Servers

Simpliﬁed Architecture Back-end (Server side) Front-end (Client side) App Servers

What are APIs? Endpoints? Requests? Responses?

Request Response Back-end / Server side (runs on a server:

Back-end / Server side Front-end / Client side Web Apps

Back-end / Server side Front-end / Client side Web Apps

• Some services provide an interface for interaction that's not

• Deﬁne how to access / interact / use an

• Endpoints: the URLs available on your API (the entry

Web Services Request Response ENDPOINT: http://worldclockapi.com/api/json/est/now METHOD: GET CONTENT-TYPE: JSON

• HTTP Response Status Code: ◦ 200 OK, 404 Not

Web Services Request Response ENDPOINT: https://mercari.jp/listings METHOD: GET CONTENT-TYPE: JSON

Simpliﬁed Architecture Back-end (Server side) Front-end (Client side) App Servers

Simpliﬁed Architecture Back-end (Server side) Front-end (Client side) App Servers

How does the server side work?

Simpliﬁed Architecture Back-end (Server side) Client App Servers Databases

From Monolith API to Microservices Mercari API: From Monolith to

Less Simpliﬁed Architecture Source (and a great article): Web Architecture

More details on architecture and following topics coming soon... •

The End (for now)