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

Web Development 101 by @tuttiq

Tutti Quintella
April 01, 2019
Programming
0
110

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

See All by Tutti Quintella
Call For Speakers: Applying and speaking at conferences
tuttiq
0
170
Enabling Diversity & Shaping Culture (in a chaotic environment)
tuttiq
0
29
Shaping Engineering Culture in a Chaotic Environment
tuttiq
0
140
Managing Remote Teams
tuttiq
0
610
Scaling Software Development: Teams & Codebase
tuttiq
2
2k
Refactoring Fat Components (with Ruby on Rails examples)
tuttiq
0
160
Where Do I Start? Introduction to Software Development from the very beginning
tuttiq
1
980

Other Decks in Programming

See All in Programming
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
450
オブジェクト指向のリ・オリエンテーション～歴史を振り返り、AI時代に向きなおる～
hanyudaeiiti
10
5.6k
チーム力を高めるスクラム実践法：カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Ruby Function Composition
bkuhlmann
1
330
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
280
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
900

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Teambox: Starting and Learning
jrom
128
8.4k
Building Your Own Lightsaber
phodgson
98
5.7k
Writing Fast Ruby
sferik
620
60k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Become a Pro
speakerdeck
PRO
10
4.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
BBQ
matthewcrist
80
8.7k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
WebSockets: Embracing the real-time Web
robhawkes
59
7k

Transcript

  1. Web Development 101 An overview of how web services or

    apps work By @tuttiq

  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

  3. What is web development?

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

    is web development?

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

  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

  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)

  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

  9. What is the architecture of a web app?

  10. What is the architecture of a web app?

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

    Databases

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

    by Jonathan Fulton (Videoblocks)

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

    Databases

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

    Databases WTF?

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

  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

  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

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

    Responding with HTML <html> <body> <title> A beautiful page </title> </body> </html> Response (HTML)

  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

  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

  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

  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

  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

  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

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

    Databases ✔ ✔

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

    Databases ✔ ✔ WTF?

  27. How does the server side work?

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

  29. From Monolith API to Microservices Mercari API: From Monolith to

    Microservices by @teddy at MTC 2018

  30. Less Simplified Architecture Source (and a great article): Web Architecture

    101 by Jonathan Fulton (Videoblocks)

  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

  32. The End (for now)