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

Web Development 101 by @tuttiq

Avatar for Tutti Quintella Tutti Quintella
April 01, 2019
Programming
0
170

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
Avatar for Tutti Quintella

Tutti Quintella

April 01, 2019
Tweet

More Decks by Tutti Quintella

See All by Tutti Quintella
Call For Speakers: Applying and speaking at conferences
Avatar for Tutti Quintella tuttiq
0
220
Enabling Diversity & Shaping Culture (in a chaotic environment)
Avatar for Tutti Quintella tuttiq
0
44
Shaping Engineering Culture in a Chaotic Environment
Avatar for Tutti Quintella tuttiq
0
210
Managing Remote Teams
Avatar for Tutti Quintella tuttiq
0
620
Scaling Software Development: Teams & Codebase
Avatar for Tutti Quintella tuttiq
2
2.2k
Refactoring Fat Components (with Ruby on Rails examples)
Avatar for Tutti Quintella tuttiq
0
180
Where Do I Start? Introduction to Software Development from the very beginning
Avatar for Tutti Quintella tuttiq
1
1.1k

Other Decks in Programming

See All in Programming
In geheimer Mission: AI Agents entwickeln
Avatar for Jörg Neumann joergneumann
0
110
監視 やばい
Avatar for syossan27 syossan27
12
10k
実践Webフロントパフォーマンスチューニング
Avatar for しーぴー cp20
45
10k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
Avatar for Kazuya Kurihara ymbigo
13
6.1k
バイラテラルアップサンプリング
Avatar for Fadis fadis
3
410
REALITY コマンド作成チュートリアル
Avatar for にしうり らく nishiuriraku
0
120
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
200
JAWS DAYS 2025 re_Cheers: WEB
Avatar for komakichi komakichi
0
100
ASP.NETアプリケーションのモダナイゼーションについて
Avatar for tomokusaba tomokusaba
0
260
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
1
140
generative-ai-use-cases(GenU)の推しポイント ～2025年4月版～
Avatar for Hideyuki Nagata hideg
1
390
flutter_kaigi_mini_4.pdf
Avatar for Hiroki Nobuta nobu74658
0
150

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.3k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Side Projects
Avatar for Sacha Greif sachag
453
42k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
129
19k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.8k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

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)