-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.htm
371 lines (337 loc) · 14.4 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Architecture - A Primer</title>
<meta name="author" content="Sylvain Abélard" />
<meta content="True" name="HandheldFriendly" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="viewport" content="width=device-width" />
<link href="light.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="webarch.js"></script>
</head>
<body>
<div id="navbar">
<div id="railsgirls">
<a href="https://guides.railsgirls.com">
<img src= "img/rg_heart.png" title="RailsGirl's heart" />
<span class="txt">RailsGirls</span> Guides</a>
</div>
<div id="about"><a><span class="txt">About</span><span class="short">?</span></a>
<div class="tooltip">
This cheat sheet is intended as a short overview of how the Web works.<br />
It was made for <a href="https://railsgirls.com">RailsGirls</a>, so it's oriented for MVC frameworks and Ruby.<br />
<hr />
<a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/deed.fr">
<img alt="CC-BY-SA" src="https://i.creativecommons.org/l/by-sa/3.0/88x31.png" id="cc_by_sa" /></a><br />
This work by <a xmlns:cc="https://creativecommons.org/ns#" href="https://maitre-du-monde.fr" property="cc:attributionName" rel="cc:attributionURL">Sylvain Abélard</a> is licensed under <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA 3.0</a>,
a Creative Commons License
</div>
</div>
<div><a href="/web_primer/fr/">FR</a><div class="tooltip">En français</div></div>
<div><a href="/web_primer/pt-br/">PT-BR</a><div class="tooltip">Em português</div></div>
<div><a>ES</a><div class="tooltip">Español - disponible en breve</div></div>
<div id="gh_fork">
<a class="tab" href="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/abelards/web_primer" title="Fork me on GitHub">
<span class="txt">Fork on GitHub</span>
<span class="short"><img src= "img/gh32.png" title="GitHub's octocat" /></span>
</a>
</div>
<a id="GitHubFork" href="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/abelards/web_primer" title="Fork me on GitHub"></a>
</div>
<div class="content" id="title">
<h1><a title="Web Architecture" href="https://maitre-du-monde.fr/web_primer">
Web Architecture
</a></h1>
<h3>The
<span class="short">big</span>
<span class="txt">wonderful</span>
journey of a tiny request.
</h3>
</div>
<div id="sidebar">
<div class="content">
<p class="help">
<span class="lng">Hover your mouse over</span>
<span class="tab">Touch</span> the words
or schema to get more info<span class="txt">rmation</span>
</p>
<div class="keywords">
<h2>Keywords</h2>
<ul>
<li id="client_side" class="cat"><h4>Client-side:</h4></li>
<li id="user">User</li>
<li id="browser">Browser</li>
<li id="internet" class="cat"><h4>Internet:</h4></li>
<li id="request">Request</li>
<li id="network">Network</li>
<li id="response">Response</li>
<li id="web_server" class="cat"><h4>Web server:</h4></li>
<li id="server">Server</li>
<li id="files">Files</li>
<li id="routing">Routing</li>
<li id="application" class="cat"><h4>Application:</h4></li>
<li id="app_server">App Server</li>
<li id="controller">Controller</li>
<li id="model">Model</li>
<li id="view">Views</li>
<li id="databases" class="cat"><h4>Databases:</h4></li>
<li id="db">Database</li>
</ul>
</div>
<div class="vocabulary">
<h2>Vocabulary</h2>
<ul id="technical">
<li id="html">HTML
<div class="tooltip">
HTML is a "language" we use to describe interface and content.
It's what your code sends back, and what your browser displays.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/HTML">HTML</a>
</div>
</li>
<li id="css">CSS
<div class="tooltip">
CSS is a "language" to describe how you apply styles in your HTML page.
It's used to separate the form (colors, layout) from the content (HTML).
<br /><a class="wp" href="https://en.wikipedia.org/wiki/CSS">CSS</a>
</div>
</li>
<li id="js">JS
<div class="tooltip">
JavaScript is a language that runs on the client-side.
If we want to make some smart behaviour to your users, without
the usual request / page rendering cycle, you'd use JS.
Today some frameworks exist on client-side, using JS.
Some also exist on the back-end (where we would use Ruby).
This may be confusing while looking for information,
remember to make it explicit which use of JS is discussed.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>
</div>
</li>
<li id="ajax">AJAX
<div class="tooltip">
Sometimes, while doing a smart behaviour, you'd like some more
data from the server, but still want to avoid the usual request
/ page rendering. You'd ask for a little data in XML or JSON,
or some HTML smippet. We call this an AJAX request.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/AJAX">AJAX</a>
</div>
</li>
<li id="cookies">Cookies
<div class="tooltip">
These are some bits of data the browser keeps about you.<br />
They are sent to the server with each request, allowing to
remember you language, some settings, or identifying you uniquely.
The server can also write cookies.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie</a>
</div>
</li>
<li id="url_uri">URL
<div class="tooltip">
What you see and type in the browser Address Bar.<br />
By the way, this means Universal Resource (Locator, Identifier).
They are supposed to point to the exact same resource each time,
but we developers have overlooked this far too often.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/URL">URL</a>
</div>
</li>
<li id="dns">DNS
<div class="tooltip">
Computers cannot find each other by name, but by IP.<br />
Domain Name Service is some kind of address book which do exactly this.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Domain_Name_System">DNS</a>
</div>
</li>
<li id="framework">Framework
<div class="tooltip">
A framework is a (usually big) piece of software that do many things for you.<br />
It also allows you to use very little code to mean a lot of
things, and therefore is likely to shape the way you think or
express things. It encourages code reuse and some practices.<br />
A framework also lives with its community and tools around it,
like testing, deploying to production servers, and so on.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Web_application_framework">Web Application Framework</a>
</div>
</li>
<li id=""></li>
</ul>
</div></div>
</div>
<div class="content" id="page">
<div class="client_side group">Client
<div class="item user">
<div class="noup"></div>
<div class="down">1. Click links or type URLs in your browser</div>
<div>User
<div class="tooltip">That's you ;)
</div>
</div>
</div>
<div class="item browser">
<div class="up">18. Your browser prints out HTML nicely, or informs you about what happened.<br />
That's also where JavaScript is run, so you can have rich interactions.
</div>
<div class="down">2. The browser sends out a request.</div>
<div>Browser
<div class="tooltip">
That's the application you use to browse the Internet.<br />
Examples: Firefox, Chrome, Safari, Opera...
there's Internet Explorer too, but we developers love to hate it ;)
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Web_browser">Web browser</a>
</div>
</div>
</div>
</div>
<div class="internet group">Internet
<div class="item request">
<div class="noup"></div>
<div class="down">3. The request is sent on the network (eg. Internet).</div>
<div>Request
<div class="tooltip">
That's information about who you are and what you want.
Who you are: it depends, but mostly your IP (who to answer to),
some imformation about your computer (browser you use, screen size, previous URL).
What you want: the URL, some parameters, form content, and all cookies.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/HTTP">See Request in HTTP</a>
</div>
</div>
</div>
<div class="item network">
<div class="up">17. All the way back!</div>
<div class="down">4. A network of links and equipments will find where your request should go.</div>
<div>Network
<div class="tooltip">
The Internet is a series of tubes?
More like a mesh of servers, linked by connections like cable,
fiber, wifi or satellite links.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Computer_network">Computer Network</a>
</div>
</div>
</div>
<div class="item response">
<div class="up">16. The response is sent back, the same way the request was sent.</div>
<div class="nodown"></div>
<div>Response
<div class="tooltip">
You asked a question, the web server answers you.
This is the response you waited, with your carefully crafted content.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/HTTP">See Response in HTTP</a>
</div>
</div>
</div>
</div>
<div class="web_server group">Web Server
<div class="item server">
<div class="up">15. The web server sends back what the app server gave it.</div>
<div class="down">5. The web server gets the request, and finds out if it can send a file or call other pieces of software.</div>
<div>Server
<div class="tooltip">
This means both a machine (or several machines),
or a piece of software which purpose is to handle your request,
then calling any other piece of software the programmers decide,
then sending back a response.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Web_Server">Web Server</a>
</div>
</div>
</div>
<div class="item files">
<div class="up"> Files are sent back directly.</div>
<div class="ret">The web server could find a file to send directly.</div>
<div>Files
<div class="tooltip">
If there is no clever stuff involved, and you asked for a file
like a picture (which is not supposed to change often), the server
can send it back very quickly, and avoid calling 'clever' code.
</div>
</div>
</div>
<div class="item routing">
<div class="noup"></div>
<div class="down">6. Some routing rules (either on the web server, app server or both) are used to send the request where it's appropriate.</div>
<div>Routing
<div class="tooltip">
There are plenty of things you can do,
so there are plenty of code bits too.<br />
The routing is responsible for calling the right piece of code.
<br /><a class="wp">∅</a><br />
<a href="https://guides.rubyonrails.org/routing.html">
Each framework has its kind of routing, so here is how
Ruby on Rails' routing work.</a>
</div>
</div>
</div>
</div>
<div class="application group">Application
<div class="item app_server">
<div class="up">14. Sends the HTML back. If you didn't render a view, you should return raw data, status codes, or redirections.</div>
<div class="down">7. This is where the code is involved!</div>
<div>App Server
<div class="tooltip">
The app server runs the code. It needs to do smarter things than
the web server, so we often like to separate them, just in case
the full-fledged App Server is not required and the Web Server
is enough to do the job.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Application_Server">Application Server</a>
</div>
</div>
</div>
<div class="item view">
<div class="up">13. the view is rendered with the data that came back.</div>
<div class="nodown"></div>
<div>Views
<div class="tooltip">
Views are mostly HTML snippets, with placeholders the Controller will fill.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Model–View–Controller">View in MVC</a>
</div>
</div>
</div>
<div class="item controller">
<div class="up">12. The controller can also apply application rules once it gets the data from the model.</div>
<div class="down">8. The app server calls an action to handle the request.</div>
<div>Controller
<div class="tooltip">
If you use an MVC framework, the Controller handles the request.
The controller does some application logic.<hr />
Controller code can do some security checks, then ask for the
right pieces of data from the Model, run the View, and send you
back some kind of response: content, files, or maybe a redirection,
which is his way of saying "someone else should handle this".
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Model–View–Controller">Controller in MVC</a>
</div>
</div>
</div>
<div class="item model">
<div class="up">11. The model can still adapt and apply business rules once it gets the data.</div>
<div class="down">9. The model answers to each question the controller asks him.</div>
<div>Model
<div class="tooltip">
If you use and MVC framework, the Controller asks the Model for data.
The model knows some business logic, and connects to the database.<hr />
How to know if code should go into the model or controller? If<ol>
<li>you make something that is not a web app, and the rules would be the same</li>
<li>you make several applications, and this logic is the same across all these</li>
<li>the controller is too long, you should probably put some code in the model to "help" it</li>
</ol>
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Model–View–Controller">Model in MVC</a>
</div>
</div>
</div>
</div>
<div class="databases group">Databases
<div class="item db">
<div class="up">10. the database queries data or writes the updates.</div>
<div class="ret"></div>
<div>Database
<div class="tooltip">
The database is where your data is stored safely.
These run very specialized software, optimised for fast search and/or high availability.<br />
Each one ensures some properties, like keeping the data even if there is a power outage.
<br /><a class="wp" href="https://en.wikipedia.org/wiki/Database">Database</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>