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

Web Development 101 by @tuttiq

Tutti Quintella
April 01, 2019
Programming
0
150

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
190
Enabling Diversity & Shaping Culture (in a chaotic environment)
tuttiq
0
42
Shaping Engineering Culture in a Chaotic Environment
tuttiq
0
180
Managing Remote Teams
tuttiq
0
610
Scaling Software Development: Teams & Codebase
tuttiq
2
2.1k
Refactoring Fat Components (with Ruby on Rails examples)
tuttiq
0
180
Where Do I Start? Introduction to Software Development from the very beginning
tuttiq
1
1k

Other Decks in Programming

See All in Programming
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
120
C++でシェーダを書く
fadis
6
4k
破壊せよ！データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
650
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.8k
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
170
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
170
Ethereum_.pdf
nekomatu
0
380
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
210
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
300
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
300

Featured

See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Navigating Team Friction
lara
183
14k
The Invisible Side of Design
smashingmag
297
50k
Happy Clients
brianwarren
97
6.7k
Six Lessons from altMBA
skipperchong
27
3.5k
4 Signs Your Business is Dying
shpigford
180
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Faster Mobile Websites
deanohume
305
30k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k

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)