Majid Al-RaimiThe Web and network applicationsالويب وتطبيقات الشبكة

COE 558Lecture 01المحاضرة 01Part 04الجزء 04

The Web and network applicationsالويب وتطبيقات الشبكة

The Web as one network application, decentralized versus distributed designs, the two-dimensional design space, and the request-response loop.الويب بوصفه تطبيق شبكة واحدًا، والتصاميم اللامركزية مقابل الموزعة، وفضاء التصميم ثنائي الأبعاد، وحلقة الطلب والاستجابة (request-response).

Conceptsالمفاهيم
5
Slidesالشرائح
30-39
Readingمدة القراءة
30 min30 دقيقة
Understoodما فهمته
0/5 conceptsمفاهيم

Why this part mattersلماذا يهمّ هذا الجزء

Part 03 described the Internet as plumbing: a stack of layers that moves bytes between machines. This part climbs to the top of that stack and asks what people actually build on it.

Every edge or cloud system you will study or design for your research is a network application whose server side has been cut into components. The story here runs in one line: an application uses the Internet, its server side is really several components, each component can be placed on a different layer and resource, and every request a client sends makes those components spend compute, storage and communication. The central question, which component goes on which layer and why, is the core question of edge computing research and a very likely exam question.

وصف الجزء 03 الإنترنت بأنها شبكة أنابيب: مكدّس من الطبقات ينقل البايتات بين الأجهزة. أما هذا الجزء فيصعد إلى قمة ذلك المكدّس ويسأل: ما الذي يبنيه الناس فعلًا فوقه؟

كل نظام edge أو cloud ستدرسه أو تصمّمه في بحثك هو تطبيق شبكي network application قُسِّم جانب الخادم فيه إلى مكوّنات. والقصة هنا تُختصر في سطر واحد: التطبيق يستخدم الإنترنت، وجانب الخادم فيه هو في الحقيقة عدة مكوّنات، وكل مكوّن يمكن وضعه على طبقة ومورد مختلفين، وكل طلب يرسله العميل يجعل هذه المكوّنات تستهلك حوسبة وتخزينًا واتصالًا. والسؤال المحوري، أي مكوّن يوضع على أي طبقة ولماذا، هو السؤال الجوهري في أبحاث الـ edge computing، ومن المرجّح جدًا أن يأتي في الامتحان.

By the end you canفي نهاية هذا الجزء ستستطيع

  1. Explain why the Web is one network application on the Internet, and sort any app by the protocol it speaks.أن تشرح لماذا يُعدّ الويب تطبيقًا شبكيًا واحدًا يعمل فوق الإنترنت، وأن تصنّف أي تطبيق حسب البروتوكول الذي يتكلّمه.
  2. Use the lecture's definitions of decentralized and distributed correctly, and name your definition when papers disagree.أن تستخدم تعريفَي المحاضرة لـ decentralized (لامركزي) و distributed (موزّع) بشكل صحيح، وأن تصرّح بالتعريف الذي تعتمده عندما تختلف الأوراق البحثية.
  3. Break a server side into components and place each one in the design space as a layer choice plus a resource instance.أن تقسّم جانب الخادم إلى مكوّنات، وأن تضع كل مكوّن في فضاء التصميم design space على أنه اختيار لطبقة مع نسخة instance من مورد.
  4. Justify a placement with latency, compute, storage, cost, privacy, sharing and availability.أن تبرّر قرار وضع المكوّن بمعايير latency والحوسبة والتخزين والتكلفة والخصوصية والمشاركة والتوافرية availability.
  5. Separate the logical HTTP conversation from the physical path of bytes through sockets and the TCP/IP stack.أن تفصل بين محادثة HTTP المنطقية والمسار الفعلي للبايتات عبر الـ sockets ومكدّس TCP/IP.
  6. State who starts the request-response loop and what each response costs the server.أن تذكر من يبدأ حلقة الطلب والاستجابة request-response loop، وما الذي تكلّفه كل استجابة للخادم.

Picture two things you do before lunch. You open a KFUPM page in a browser. Then your mail program hands a message to the KFUPM mail server over SMTP. Both need the Internet. Only the first one is the Web. Getting this distinction right is the first step to thinking clearly about applications.

تخيّل أمرين تفعلهما قبل الغداء. تفتح صفحة لجامعة KFUPM في المتصفح. ثم يسلّم برنامج البريد رسالة إلى خادم البريد في KFUPM عبر بروتوكول SMTP. كلاهما يحتاج الإنترنت، لكن الأول فقط هو الويب. فهم هذا الفرق بشكل صحيح هو الخطوة الأولى للتفكير بوضوح في التطبيقات.

Infrastructure and the services built on itالبنية التحتية والخدمات المبنية فوقها

The Internet is the infrastructure: the TCP/IP stack, the routers and the providers that carry packets. The World Wide Web (WWW) is one application built on top of that infrastructure. What makes something "the Web" is that it fetches linked resources using HTTP. MDN puts it plainly: "The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure."

الإنترنت هي البنية التحتية: TCP/IP stack والموجّهات (routers) ومزوّدو الخدمة الذين ينقلون الحزم. أما World Wide Web (WWW) فهو تطبيق واحد مبني فوق هذه البنية التحتية. وما يجعل الشيء "ويبًا" هو أنه يجلب موارد مترابطة بالروابط باستخدام HTTP. وتقولها MDN بوضوح: "الإنترنت بنية تحتية، بينما الويب خدمة مبنية فوق هذه البنية التحتية".

History makes the order of events obvious. The Internet was carrying remote logins, email and file transfers for years before anyone had heard of a web page.

التاريخ يجعل ترتيب الأحداث واضحًا: كانت الإنترنت تنقل جلسات الدخول عن بُعد والبريد الإلكتروني ونقل الملفات لسنوات قبل أن يسمع أحد بشيء اسمه صفحة ويب.

What counts as a network applicationما الذي يُعدّ تطبيقًا شبكيًا

Once the Web is seen as one application among many, the natural next question is what the whole family looks like. Open HungerStation on your phone and order dinner. The app on your phone (the Client) sends the order across the Internet to the company's backend (the Server), which passes it to the restaurant and a courier. Without the network the app is just a menu picture.

بمجرد أن نرى الويب تطبيقًا واحدًا بين تطبيقات كثيرة، يصبح السؤال الطبيعي التالي: كيف تبدو العائلة كلها؟ افتح تطبيق HungerStation على جوالك واطلب العشاء. التطبيق الذي على جوالك (الـ client) يرسل الطلب عبر الإنترنت إلى الأنظمة الخلفية للشركة (الـ server)، والتي تمرّره إلى المطعم وإلى المندوب. ومن دون الشبكة يصبح التطبيق مجرد صورة لقائمة طعام.

The lecture's definition of a Network application is broad on purpose: any application that uses the Internet as its transport medium. That phrase has a precise meaning in the stack you met in part 03. The application hands its messages to the Transport layer through the Socket API, and everything below that line is someone else's job. What the messages mean is decided by the application.

تعريف المحاضرة لـ network application واسع عن قصد: أي تطبيق يستخدم الإنترنت وسيطًا لنقل بياناته. ولهذه العبارة معنى دقيق في المكدّس الذي تعرّفت عليه في الجزء 03: التطبيق يسلّم رسائله إلى transport layer عبر socket API، وكل ما تحت هذا الخط مسؤولية جهة أخرى. أما معنى الرسائل فيقرّره التطبيق نفسه.

Familiar apps hide an interesting mix. Some run inside a browser, some are native programs, and one exchanges its files with other users instead of a company server. Try sorting them yourself before reading the table.

التطبيقات المألوفة تخفي خليطًا مثيرًا للاهتمام: بعضها يعمل داخل المتصفح، وبعضها برامج أصلية (native)، وواحد منها يتبادل ملفاته مع مستخدمين آخرين بدلًا من خادم شركة. جرّب أن تصنّفها بنفسك قبل قراءة الجدول.

AppالتطبيقRuns inيعمل فيTalks toيتواصل معArchitectureالمعمارية
Chrome (opening a site)Chrome (فتح موقع)A browserمتصفحWeb servers over HTTPخوادم الويب عبر HTTPWeb, client-serverويب، عميل وخادم client-server
Gmail in a browser tabGmail في تبويب المتصفحA browserمتصفحGoogle's mail servers over HTTPخوادم البريد لدى Google عبر HTTPWeb, client-serverويب، عميل وخادم client-server
Outlook desktopOutlook على الجهاز المكتبيA native programبرنامج أصلي nativeA mail server (over SMTP or IMAP)خادم بريد (عبر SMTP أو IMAP)Client-server, mail protocolsعميل وخادم client-server، وبروتوكولات البريد
Netflix or HungerStation appتطبيق Netflix أو HungerStationA native phone appتطبيق جوال أصلي nativeThe company's backend serversالخوادم الخلفية للشركةClient-server, HTTP APIsعميل وخادم client-server، وHTTP APIs
uTorrentuTorrentA native programبرنامج أصلي nativeA tracker to find peers, then other BitTorrent peers directlytracker للعثور على النظراء، ثم نظراء BitTorrent آخرون مباشرةPeer-to-peerنظير إلى نظير peer-to-peer
Five familiar apps, sorted by how they use the networkخمسة تطبيقات مألوفة، مصنّفة حسب طريقة استخدامها للشبكة

uTorrent is the odd one out. It speaks the BitTorrent protocol, where the specification says that when many people download the same file at once, "the downloaders upload to each other". Each copy of the program acts as a client and a server at the same time. This arrangement is called peer-to-peer, and it returns in the next concept when we ask what decentralized means.

تطبيق uTorrent هو الاستثناء. فهو يتكلّم بروتوكول BitTorrent، الذي تنص مواصفته على أنه عندما يحمّل أشخاص كثيرون الملف نفسه في الوقت نفسه، "يرفع المحمِّلون الملف بعضهم لبعض". فكل نسخة من البرنامج تعمل عميلًا وخادمًا في آن واحد. هذا الترتيب يُسمّى نظير إلى نظير (peer-to-peer)، وسيعود في المفهوم التالي عندما نسأل ما معنى "لامركزي".

The protocol decides the circleالبروتوكول هو الذي يحدّد الدائرة

A useful picture, adapted from Connolly and Hoar's Fundamentals of Web Development, draws the Internet as a large circle with several smaller circles inside it: the Web, email, online gaming and FTP.

صورة مفيدة، مقتبسة من كتاب Fundamentals of Web Development لـ Connolly وHoar، ترسم الإنترنت دائرةً كبيرة بداخلها عدة دوائر أصغر: الويب، والبريد الإلكتروني، والألعاب عبر الإنترنت، وFTP.

The Internet carries many applications. The Web is one circle inside it, not the whole.الإنترنت تحمل تطبيقات كثيرة. الويب دائرة واحدة بداخلها، وليس الإنترنت كلها.

The rule for deciding which circle an application belongs to is its Application layer Protocol. If it speaks HTTP to fetch web resources, it is in the Web circle. If it speaks SMTP to move mail between servers, FTP to move files, or a custom game protocol, it sits in a sibling circle. Siblings share the Internet but not the Web. The circle sizes are illustrative only; they make no claim about traffic shares.

القاعدة التي تحدّد إلى أي دائرة ينتمي التطبيق هي protocol الخاص به في application layer. فإذا كان يتكلّم HTTP لجلب موارد الويب، فهو في دائرة الويب. وإذا كان يتكلّم SMTP لنقل البريد بين الخوادم، أو FTP لنقل الملفات، أو بروتوكول ألعاب خاصًا، فهو في دائرة شقيقة. الدوائر الشقيقة تتشارك الإنترنت لكنها لا تتشارك الويب. وأحجام الدوائر توضيحية فقط، ولا تدّعي شيئًا عن حصص حركة البيانات.

Email is a good exam trap. When you read Gmail in a browser tab, your browser talks HTTP to Google, which is the Web. When Google then delivers your message to a KFUPM mail server, the two mail servers speak SMTP, which is not the Web. One everyday "email" experience touches two circles.

البريد الإلكتروني فخّ امتحاني جيد. عندما تقرأ Gmail في تبويب المتصفح، فإن متصفحك يتكلّم HTTP مع Google، وهذا هو الويب. وعندما تسلّم Google رسالتك بعد ذلك إلى خادم بريد في KFUPM، فإن خادمَي البريد يتكلّمان SMTP، وهذا ليس الويب. فتجربة "بريد إلكتروني" يومية واحدة تلمس دائرتين.

Recall

Name two network applications that are not part of the Web, and say what protocol makes them not Web.اذكر تطبيقين شبكيين ليسا جزءًا من الويب، وبيّن أي بروتوكول يجعلهما خارج الويب.

Email transfer between mail servers (SMTP) and file transfer (FTP), or an online game with its own protocol. The Web is the application that uses HTTP. The others share the Internet but not HTTP.
نقل البريد بين خوادم البريد (SMTP) ونقل الملفات (FTP)، أو لعبة عبر الإنترنت لها بروتوكولها الخاص. الويب هو التطبيق الذي يستخدم HTTP، أما البقية فتتشارك الإنترنت لكنها لا تستخدم HTTP.

Quick checkاختبار سريع

Which statement correctly describes how the Internet and the Web relate?أي عبارة تصف بشكل صحيح العلاقة بين الإنترنت والويب؟

Take one calculator and build it three ways. First, a desktop calculator: one program on one machine. Second, a browser page that sends "2+3" over HTTP to a separate server program, which sends back 5. Third, the same service, but the server's work and data are spread over several machines, with addition on one node and the history database on another.

خذ آلة حاسبة واحدة وابنِها بثلاث طرق. الأولى: آلة حاسبة مكتبية، برنامج واحد على جهاز واحد. الثانية: صفحة في المتصفح ترسل "2+3" عبر HTTP إلى برنامج خادم منفصل، فيعيد 5. الثالثة: الخدمة نفسها، لكن عمل الخادم وبياناته موزّعة على عدة أجهزة، فالجمع على عقدة (node) وقاعدة بيانات السجلّ على عقدة أخرى.

By the lecture's definitions, the first build is neither decentralized nor distributed. The second is a Decentralized application: the application is split into two standalone components (Client and Server), usually on different machines, that talk through a Protocol using sockets. It is also a Distributed application in the lecture's sense, because computation is shared between client and server and state lives on both. The third build pushes distribution further: the server's own computation and data are spread over several machines.

بحسب تعريفات المحاضرة، النسخة الأولى ليست لامركزية ولا موزّعة. والثانية decentralized application: فالتطبيق مقسوم إلى components مستقلَّين اثنين (client وserver)، عادةً على جهازين مختلفين، يتواصلان عبر protocol باستخدام sockets. وهي أيضًا distributed application بمعنى المحاضرة، لأن الحوسبة مقسّمة بين العميل والخادم، والحالة (state) موجودة على الطرفين. أما النسخة الثالثة فتدفع التوزيع أبعد: حوسبة الخادم نفسه وبياناته موزّعة على عدة أجهزة.

Keep these two questions apart, because they become the two axes of the design space in the next concept: decentralization is the vertical axis, distribution the horizontal one.

أبقِ هذين السؤالين منفصلين، لأنهما يصبحان محورَي فضاء التصميم في المفهوم التالي: اللامركزية هي المحور العمودي، والتوزيع هو المحور الأفقي.

AspectالجانبDecentralized (lecture)لامركزي decentralized (المحاضرة)Distributed (lecture)موزّع distributed (المحاضرة)
What is splitما الذي يُقسَّمThe application itself, into separate client and server programsالتطبيق نفسه، إلى برنامجَي عميل وخادم منفصلينThe computation and state, between client and server or across several machinesالحوسبة والحالة، بين العميل والخادم أو عبر عدة أجهزة
What the definition stressesما الذي يركّز عليه التعريفStructure: separate programs that talk through a protocol and socketsالبنية: برامج منفصلة تتواصل عبر بروتوكول وsocketsResources: where computation and state physically liveالموارد: أين توجد الحوسبة والحالة فعليًا
Lecture exampleمثال المحاضرةBitTorrent, BitcoinBitTorrent، BitcoinGoogle CloudGoogle Cloud
Design-space axisمحور فضاء التصميمVertical: which layer a component sits onعمودي: على أي طبقة يقع المكوّنHorizontal: which compute or storage resource it usesأفقي: أي مورد حوسبة أو تخزين يستخدمه
The two lecture definitions side by sideتعريفا المحاضرة جنبًا إلى جنب

The lecture's examples fit. BitTorrent and Bitcoin have no single controlling center: the Bitcoin paper opens with the goal of sending payments "directly from one party to another without going through a financial institution". Google Cloud is one provider that spreads computation and state across its own machines in many regions and zones around the world.

أمثلة المحاضرة تنطبق على ذلك. فـ BitTorrent وBitcoin ليس لهما مركز تحكّم واحد: ورقة Bitcoin تبدأ بهدف إرسال المدفوعات "مباشرة من طرف إلى آخر دون المرور بمؤسسة مالية". أما Google Cloud فهو مزوّد واحد يوزّع الحوسبة والحالة على أجهزته الخاصة في مناطق (regions) ونطاقات (zones) كثيرة حول العالم.

Recall

Using the lecture's definitions, what makes an application decentralized, and what makes it distributed? Give the lecture's example of each.باستخدام تعريفات المحاضرة، ما الذي يجعل التطبيق لامركزيًا، وما الذي يجعله موزّعًا؟ اذكر مثال المحاضرة لكل منهما.

Decentralized: the app is split into separate client and server programs, usually on different machines, communicating through a protocol and sockets (BitTorrent, Bitcoin). Distributed: computation does not happen on a single machine, it is distributed between client and server, and state (memory/data) is distributed too (Google Cloud).
اللامركزي: التطبيق مقسوم إلى برنامجَي عميل وخادم منفصلين، عادةً على أجهزة مختلفة، يتواصلان عبر بروتوكول وsockets (BitTorrent، Bitcoin). الموزّع: الحوسبة لا تتم على جهاز واحد، بل تتوزّع بين العميل والخادم، والحالة (الذاكرة/البيانات) موزّعة أيضًا (Google Cloud).

Quick checkاختبار سريع

Using the lecture's own definitions, which example is labelled a distributed application?باستخدام تعريفات المحاضرة نفسها، أي مثال يوصف بأنه تطبيق موزّع distributed application؟

So far "the server" has been a single word. Look inside the calculator's server side and it turns out to be several separate pieces, and that discovery is what makes edge computing possible: separate pieces can live in separate places.

حتى الآن كان "الخادم" كلمة واحدة. لكن انظر داخل جانب الخادم في الآلة الحاسبة وستجده عدة قطع منفصلة، وهذا الاكتشاف هو ما يجعل الـ edge computing ممكنًا: القطع المنفصلة يمكن أن تعيش في أماكن منفصلة.

The server side is a set of componentsجانب الخادم مجموعة من المكوّنات

Follow one request. The Client sends "multiply 6 by 7". It does not know or care how the server side is organized. It simply knocks on one door. That door is the API gateway, a single entry point that receives every client request and routes it to the right service. AWS describes its own gateway product as a "front door" for applications to reach backend services. Behind it sit four operation services (Add, Sub, Mul, Div), each exposing its own Interface, like a small Web API, and each able to read or write a Database.

تتبّع طلبًا واحدًا. يرسل الـ client "اضرب 6 في 7". وهو لا يعرف ولا يهمّه كيف نُظِّم جانب الخادم، بل يطرق بابًا واحدًا فقط. هذا الباب هو API Gateway، نقطة دخول واحدة تستقبل كل طلبات العملاء وتوجّه كل طلب إلى الخدمة المناسبة. وتصف AWS منتج البوابة الخاص بها بأنه "الباب الأمامي" الذي تصل منه التطبيقات إلى الخدمات الخلفية. وخلفه تقف أربع خدمات للعمليات (Add، Sub، Mul، Div)، كل منها يعرض interface خاصة به، مثل web API صغيرة، وكل منها يستطيع القراءة من قاعدة البيانات (Database) أو الكتابة فيها.

Client
browser or app

Sends one request and waits.

يرسل طلبًا واحدًا وينتظر.

HTTP request
API Gateway
entry point

Reads the operation and picks a service.

يقرأ العملية المطلوبة ويختار الخدمة المناسبة.

route
Add, Sub, Mul, DivAdd، Sub، Mul، Div
operation servicesخدمات العمليات

Each does one kind of arithmetic.

كل خدمة تنفذ نوعًا واحدًا من العمليات الحسابية.

read/write
Database
storage

Keeps results and history.

تحفظ النتائج والسجل.

One gateway, four operation services, one databaseبوابة واحدة، وأربع خدمات للعمليات، وقاعدة بيانات واحدة

Worked exampleمثال محلول

One multiply request, step by stepطلب ضرب واحد، خطوة بخطوة

  1. Client sendsالعميل يرسل

    The client sends an HTTP request asking for 6 × 7 to the gateway's address.
    يرسل العميل طلب HTTP يطلب فيه 6 × 7 إلى عنوان البوابة.
  2. Gateway routesالبوابة توجّه

    The API Gateway sees the operation is multiply and forwards it to Mul.
    ترى API Gateway أن العملية ضرب، فتمرّر الطلب إلى Mul.
  3. Service computesالخدمة تحسب

    Mul computes 42 and writes a history record to the Database.
    تحسب Mul الناتج 42 وتكتب سجلًّا في قاعدة البيانات (Database).
  4. Answer returnsالجواب يعود

    Mul replies to the gateway, which returns the response to the client.
    تردّ Mul على البوابة، والبوابة تعيد الاستجابة إلى العميل.
  5. Resultالنتيجة

    One client request touched three server components (gateway, Mul, Database). The client saw only one door.
    طلب واحد من العميل لمس ثلاثة مكوّنات في الخادم (البوابة، وMul، وقاعدة البيانات). أما العميل فلم يرَ إلا بابًا واحدًا.

Everything except the client forms the Server layer, typically hosted in the Cloud. But nothing forces those components to live together. Because each one is a separate program with its own interface, Mul could run close to the user while the Database stays in a large data center. The question becomes: can we assign server components to different layers, and if so, how do we describe and justify the assignment?

كل شيء ما عدا العميل يشكّل server layer، والتي تُستضاف عادةً في الـ cloud. لكن لا شيء يُجبر هذه المكوّنات على العيش معًا. فلأن كل مكوّن برنامج منفصل له واجهته الخاصة، يمكن أن تعمل Mul قريبًا من المستخدم بينما تبقى قاعدة البيانات في مركز بيانات كبير. فيصبح السؤال: هل يمكننا إسناد مكوّنات الخادم إلى layers مختلفة، وإن أمكن، فكيف نصف هذا الإسناد ونبرّره؟

Two coordinates for every componentإحداثيان لكل مكوّن

The answer is a grid that works like a seating chart. "Mul sits on Layer 1 using Compute 1." "The Database sits on Layer 3 using Compute 2 plus Storage." Every component gets two coordinates.

الجواب شبكة (grid) تعمل مثل مخطط توزيع المقاعد. "Mul تجلس على Layer 1 وتستخدم Compute 1". "قاعدة البيانات تجلس على Layer 3 وتستخدم Compute 2 مع Storage". فكل مكوّن يحصل على إحداثيين.

All six components start crowded in one row, then slide to their seats. Vertical picks the layer, horizontal picks the resource.تبدأ المكوّنات الستة مزدحمة في صف واحد، ثم تنزلق إلى مقاعدها. المحور العمودي يختار الطبقة، والمحور الأفقي يختار المورد.

The two-dimensional design space separates two independent decisions about each Component, and they are exactly the two questions from the previous concept. Moving a box up or down changes its Layer: that is the decentralization axis, how far the server side is split across layers. Moving a box left or right changes the resource it uses on that layer: Compute 1, or Compute 2, which can also offer storage (only the Database uses it). That is the distribution axis, how computation and state are spread across resources.

يفصل two-dimensional design space (فضاء التصميم ثنائي الأبعاد) بين قرارين مستقلين بشأن كل component، وهما بالضبط السؤالان من المفهوم السابق. تحريك المربع لأعلى أو لأسفل يغيّر layer الخاصة به: وهذا هو محور اللامركزية، أي إلى أي مدى قُسِّم جانب الخادم عبر الطبقات. وتحريك المربع يمينًا أو يسارًا يغيّر المورد الذي يستخدمه على تلك الطبقة: Compute 1 أو Compute 2، والذي يمكنه أن يوفّر تخزينًا أيضًا (قاعدة البيانات وحدها تستخدمه). وهذا هو محور التوزيع، أي كيف تتوزّع الحوسبة والحالة على الموارد.

A column is a type, each layer has its own instanceالعمود نوع، ولكل طبقة نسختها الخاصة

One subtlety makes the grid precise. A column names a resource type, not a machine. Each layer has its own copies of those types, and the lecture marks them with suffixes: Compute 2_a + Storage_a on the Database, Compute 1_b on Add, and Compute 2_b on Sub. The letter tells you which layer's copy: _a belongs to Layer 3 and _b belongs to Layer 2. So Add and Sub share a layer, but run on two different instances.

تفصيلة دقيقة واحدة تجعل الشبكة محكمة: العمود يسمّي نوع مورد، لا جهازًا بعينه. فلكل طبقة نسخها الخاصة من هذه الأنواع، والمحاضرة تميّزها بلواحق: Compute 2_a + Storage_a على قاعدة البيانات، وCompute 1_b على Add، وCompute 2_b على Sub. الحرف يخبرك بنسخة أي طبقة: _a تنتمي إلى Layer 3، و_b تنتمي إلى Layer 2. إذن Add وSub تتشاركان طبقة واحدة، لكنهما تعملان على نسختين مختلفتين.

This is what makes the application a Distributed application in practice: the same kind of resource exists as several instances in different places, and the application's computation and state are spread across them. "Compute 2" could be a virtual machine type in a Cloud region, a server in a Fog micro data center, or a box at the Edge.

هذا ما يجعل التطبيق distributed application في الواقع العملي: النوع نفسه من المورد موجود في صورة عدة نسخ في أماكن مختلفة، وحوسبة التطبيق وحالته موزّعة عليها. فـ "Compute 2" قد يكون نوع آلة افتراضية (virtual machine) في منطقة من مناطق الـ cloud، أو خادمًا في مركز بيانات صغير من نوع fog، أو جهازًا على الـ edge.

Worked exampleمثال محلول

Name the instance for every boxسمِّ النسخة لكل مربع

  1. Database (Layer 3, column 2)قاعدة البيانات (Layer 3، العمود 2)

    Compute 2_a + Storage_a, given in the lecture.
    Compute 2_a + Storage_a، كما وردت في المحاضرة.
  2. Add (Layer 2, column 1)Add (Layer 2، العمود 1)

    Compute 1_b, given in the lecture.
    Compute 1_b، كما وردت في المحاضرة.
  3. Sub (Layer 2, column 2)Sub (Layer 2، العمود 2)

    Compute 2_b, given in the lecture.
    Compute 2_b، كما وردت في المحاضرة.
  4. API Gateway (Layer 3, column 1)API Gateway (Layer 3، العمود 1)

    Following the pattern, Compute 1_a.
    باتباع النمط نفسه، Compute 1_a.
  5. Mul (Layer 1, column 1)Mul (Layer 1، العمود 1)

    Following the pattern, Compute 1_c.
    باتباع النمط نفسه، Compute 1_c.
  6. Div (Layer 1, column 2)Div (Layer 1، العمود 2)

    Following the pattern, Compute 2_c.
    باتباع النمط نفسه، Compute 2_c.
  7. Resultالنتيجة

    Six boxes, six separate instances. Two boxes share a letter only when they share a layer, and share a number only when they use the same resource type.
    ستة مربعات، وست نسخ منفصلة. لا يتشارك مربعان الحرف نفسه إلا إذا كانا على الطبقة نفسها، ولا يتشاركان الرقم نفسه إلا إذا استخدما نوع المورد نفسه.

Criteria for assigning components to layersمعايير إسناد المكوّنات إلى الطبقات

The grid tells you how to write a placement down. It does not tell you which placement is good. For that the lecture asks: what criteria decide which layer a component goes on? There is no single right answer, only trade-offs. Each criterion pushes a component in a direction.

الشبكة تخبرك كيف تكتب قرار الوضع، لكنها لا تخبرك أي قرار هو الجيد. ولهذا تسأل المحاضرة: ما المعايير التي تحدّد على أي طبقة يوضع المكوّن؟ لا توجد إجابة صحيحة واحدة، بل مقايضات (trade-offs). وكل معيار يدفع المكوّن في اتجاه ما.

CriterionالمعيارPushes component towardيدفع المكوّن نحوCalculator exampleمثال من الآلة الحاسبةSourceالمصدر
LatencyLatency (زمن التأخير)Lower layers, close to the clientالطبقات الأدنى، قرب العميلA live result preview that must update as you typeمعاينة حيّة للنتيجة يجب أن تتحدّث أثناء الكتابةSatyanarayanan 2017; NIST SP 500-325Satyanarayanan 2017؛ NIST SP 500-325
Compute demandالطلب على الحوسبةHigher layers, where capacity existsالطبقات الأعلى، حيث توجد السعةA heavy matrix-inversion service added to the calculatorخدمة ثقيلة لعكس المصفوفات تُضاف إلى الآلة الحاسبةSatyanarayanan 2017Satyanarayanan 2017
Storage and stateالتخزين والحالةA well-provisioned layer with durable storageطبقة مجهّزة جيدًا ذات تخزين دائمThe Database holding every user's historyقاعدة البيانات Database التي تحفظ سجلّ كل مستخدمLecture design spaceفضاء التصميم في المحاضرة
Cost (bandwidth)التكلفة (bandwidth)Lower layers, near where data is producedالطبقات الأدنى، قرب مكان إنتاج البياناتSummarize raw sensor input locally, send only results upتلخيص قراءات المستشعرات الخام محليًا، وإرسال النتائج فقط إلى الأعلىSatyanarayanan 2017Satyanarayanan 2017
Privacy and residencyالخصوصية وإقامة البياناتLower layers, or a region inside the right bordersالطبقات الأدنى، أو منطقة داخل الحدود المناسبةStrip personal data before anything leaves the siteإزالة البيانات الشخصية قبل أن يغادر أي شيء الموقعSatyanarayanan 2017; Google Cloud locationsSatyanarayanan 2017؛ Google Cloud locations
Sharing across usersالمشاركة بين المستخدمينA layer every client can reachطبقة يستطيع كل عميل الوصول إليهاThe API Gateway, the single entry point for everyoneAPI Gateway، نقطة الدخول الوحيدة للجميعAWS API Gateway guideAWS API Gateway guide
Availabilityالتوافرية availabilityAdd a nearby fallback below the cloudإضافة بديل احتياطي قريب تحت السحابةKeep basic Add working during a short cloud outageإبقاء عملية Add الأساسية تعمل أثناء انقطاع قصير في السحابةSatyanarayanan 2017Satyanarayanan 2017
Placement criteria, where they push a component, and a calculator exampleمعايير الوضع، والاتجاه الذي تدفع إليه المكوّن، ومثال من الآلة الحاسبة

The evidence behind the table comes from the edge computing literature. Satyanarayanan writes that "reliance on a cloud datacenter is not advisable for applications that require end-to-end delays to be tightly controlled to less than a few tens of milliseconds." NIST adds that Fog computing "minimizes the request-response time" by working close to end devices. So a time-critical component moves toward the Edge, lowering Latency and Response time (RT).

الأدلة وراء الجدول تأتي من أدبيات الـ edge computing. يكتب Satyanarayanan أن "الاعتماد على مركز بيانات سحابي غير مستحسن للتطبيقات التي تتطلب ضبط زمن التأخير من طرف إلى طرف بإحكام ليبقى أقل من بضع عشرات من الميلي ثانية". وتضيف NIST أن حوسبة الـ fog "تقلّل زمن الطلب والاستجابة" لأنها تعمل قريبًا من الأجهزة الطرفية. إذن المكوّن الحساس للوقت يتحرك نحو الـ edge، فيقلّ latency وresponse time.

The pull goes the other way too. Heavy computation and durable, shared data need resources that shrink as you go down the layers, which is why the Database sits on the top layer. Satyanarayanan also notes that analyzing raw data near its source cuts the bandwidth sent to the cloud, that a nearby cloudlet "can enforce the privacy policies of its owner prior to release of the data to the cloud", and that local resources give the "ability to mask transient cloud outages". Google Cloud, for its part, sells regions partly so data can stay resident inside a country's borders.

والشدّ يعمل في الاتجاه المعاكس أيضًا. فالحوسبة الثقيلة والبيانات الدائمة المشتركة تحتاج موارد تتقلّص كلما نزلت عبر الطبقات، ولهذا تجلس قاعدة البيانات على الطبقة العليا. ويذكر Satyanarayanan أيضًا أن تحليل البيانات الخام قرب مصدرها يقلّل حجم البيانات (bandwidth) المرسلة إلى السحابة، وأن الـ cloudlet القريب "يستطيع فرض سياسات الخصوصية الخاصة بمالكه قبل إطلاق البيانات إلى السحابة"، وأن الموارد المحلية تمنح "القدرة على إخفاء انقطاعات السحابة المؤقتة". أما Google Cloud فهي تبيع المناطق (regions) جزئيًا لكي تبقى البيانات مقيمة داخل حدود الدولة.

Quick checkاختبار سريع

In the lecture's two-dimensional design space, what does moving a component up the vertical axis change?في فضاء التصميم ثنائي الأبعاد في المحاضرة، ما الذي يغيّره تحريك المكوّن لأعلى على المحور العمودي؟

Quick checkاختبار سريع

A face-blurring component must process camera frames before any raw video leaves the building. Which criterion mainly pushes it to a lower layer?مكوّن لطمس الوجوه يجب أن يعالج إطارات الكاميرا قبل أن يغادر أي فيديو خام المبنى. أي معيار يدفعه أساسًا إلى طبقة أدنى؟

Recall

List five criteria for assigning a server component to a layer, each with a one-line reason.اذكر خمسة معايير لإسناد مكوّن من مكوّنات الخادم إلى طبقة، مع سبب من سطر واحد لكل معيار.

Latency: time-critical components go near the client. Compute: heavy work goes where capacity is. Storage and state: durable, consistent data goes to well-provisioned layers. Cost: processing near the data saves bandwidth. Privacy: sensitive raw data is filtered before it leaves the local layer. Sharing and availability are also valid answers.
Latency: المكوّنات الحساسة للوقت توضع قرب العميل. الحوسبة: العمل الثقيل يذهب إلى حيث توجد السعة. التخزين والحالة: البيانات الدائمة المتسقة تذهب إلى طبقات مجهّزة جيدًا. التكلفة: المعالجة قرب البيانات توفّر الـ bandwidth. الخصوصية: البيانات الخام الحساسة تُرشَّح قبل أن تغادر الطبقة المحلية. والمشاركة والتوافرية إجابتان صحيحتان أيضًا.

Placing components on layers only works because they can talk to each other across a network. So zoom in on one conversation. Open the calculator in a browser and press equals. The front-end JavaScript sends GET /add?a=2&b=3. A Node.js back-end reads that request from its socket, computes 5, and writes the response back. Along the way the bytes travel through routers you will never see.

وضع المكوّنات على الطبقات لا ينجح إلا لأنها تستطيع التحدث بعضها مع بعض عبر الشبكة. فلنقترب من محادثة واحدة. افتح الآلة الحاسبة في المتصفح واضغط على علامة المساواة. يرسل كود JavaScript في الواجهة الأمامية GET /add?a=2&b=3. ثم يقرأ خادم خلفي مبني على Node.js هذا الطلب من الـ socket الخاص به، ويحسب 5، ويكتب الاستجابة عائدًا. وفي الطريق تمرّ البايتات عبر موجّهات (routers) لن تراها أبدًا.

Three levels in one conversationثلاثة مستويات في محادثة واحدة

At the top is the application conversation: an HTTP request and response. In the middle are the endpoints, the sockets. At the bottom is the network path through the Internet. The Frontend runs in the browser, and the Backend runs in Node.js.

في القمة محادثة التطبيق: طلب HTTP واستجابته. وفي الوسط نقاط النهاية (endpoints)، أي الـ sockets. وفي القاع مسار الشبكة عبر الإنترنت. الـ front-end يعمل في المتصفح، والـ back-end يعمل في Node.js.

Browser
front-end, the client

Builds the request and renders the answer.

يبني الطلب ويعرض الإجابة.

HTTP request
Node.js
back-end, the server

Reads the request, computes, replies.

يقرأ الطلب، ويحسب، ثم يرد.

HTTP response
Browser
front-end again

Shows the result to the user.

يعرض النتيجة للمستخدم.

The HTTP conversation between front-end and back-endمحادثة HTTP بين الواجهة الأمامية front-end والخلفية back-end

RFC 9110, the HTTP standard, defines the roles by behavior. A Client "is a program that establishes a connection to a server for the purpose of sending one or more HTTP requests". A Server "is a program that accepts connections in order to service HTTP requests by sending HTTP responses". And HTTP itself "is a stateless request/response protocol for exchanging messages across a connection".

يعرّف RFC 9110، وهو معيار HTTP، الأدوار بحسب السلوك. فالـ client "برنامج ينشئ اتصالًا بخادم بغرض إرسال طلب HTTP واحد أو أكثر". والـ server "برنامج يقبل الاتصالات لكي يخدم طلبات HTTP بإرسال استجابات HTTP". وHTTP نفسه "بروتوكول طلب/استجابة عديم الحالة (stateless) لتبادل الرسائل عبر اتصال".

Sockets are endpoints, connections are pairsالـ sockets نقاط نهاية، والاتصالات أزواج

A socket is named by an IP address plus a Port number. The connection is the pair of sockets, one at each end, as in this example using documentation addresses:

يُسمّى الـ socket بـ IP address مع port number. والاتصال هو زوج الـ sockets، واحد في كل طرف، كما في هذا المثال الذي يستخدم عناوين مخصّصة للتوثيق:

One HTTPS connection seen as a socket pairاتصال HTTPS واحد منظورًا إليه كزوج من الـ sockets

Client socketsocket العميل
192.0.2.10:52814192.0.2.10:52814
Server socketsocket الخادم
198.51.100.7:443198.51.100.7:443
Transport protocolبروتوكول النقل
TCPTCP
Connectionالاتصال
Identified by both sockets together, set up by TCP after the client calls connect()يُعرَّف بالـ socketين معًا، وينشئه TCP بعد أن يستدعي العميل connect()

The HTTP arrow is logical, the bytes move verticallyسهم HTTP منطقي، والبايتات تتحرك عموديًا

Protocol pictures usually draw a dashed arrow between the two HTTP boxes, as if browser and server talked to each other directly. They do, but only logically. No HTTP byte ever travels sideways along that arrow.

رسوم البروتوكولات عادةً ترسم سهمًا متقطعًا بين مربعَي HTTP، كأن المتصفح والخادم يتحدثان مباشرة. وهما يتحدثان فعلًا، لكن منطقيًا فقط. فلا يوجد بايت HTTP واحد يسافر أفقيًا على امتداد ذلك السهم.

HTTP talks sideways only in logic. The real bytes dive through the socket, cross the network, and climb back up.HTTP يتحدث أفقيًا في المنطق فقط. البايتات الحقيقية تغوص عبر الـ socket، وتعبر الشبكة، ثم تصعد من جديد.

The real journey is vertical. The browser writes an HTTP message. It goes down through TCP on the client and the Socket, into the TCP/IP network (the "pipe"), and back up through TCP on the server until Node.js reads it. This is Encapsulation from part 03: each layer wraps the data on the way down and unwraps it on the way up. Peer layers "talk" to each other only through that round trip.

الرحلة الحقيقية عمودية. يكتب المتصفح رسالة HTTP، فتنزل عبر TCP على جهاز العميل وعبر الـ socket، إلى شبكة TCP/IP ("الأنبوب")، ثم تصعد من جديد عبر TCP على الخادم حتى يقرأها Node.js. هذا هو encapsulation (التغليف) من الجزء 03: كل طبقة تغلّف البيانات في طريق النزول وتفكّ غلافها في طريق الصعود. والطبقات النظيرة "تتحدث" بعضها مع بعض فقط عبر هذه الرحلة ذهابًا وإيابًا.

The same picture also shows who owns what. The Application layer (AL) is the web application, written by developers: HTML, CSS and JavaScript in the Frontend, and Node.js in the Backend. The Transport layer (TL), Network layer (NL), Data link layer (DLL) and Physical layer (PL) are infrastructure, provided by the operating system, network cards, cables and routers. That split is the same line that defined a network application in the first concept: the app owns meaning, the infrastructure owns delivery.

الصورة نفسها تبيّن أيضًا من يملك ماذا. فـ application layer (AL) هي تطبيق الويب الذي يكتبه المطوّرون: HTML وCSS وJavaScript في الـ front-end، وNode.js في الـ back-end. أما transport layer (TL) وnetwork layer (NL) وdata link layer (DLL) وphysical layer (PL) فهي بنية تحتية يوفّرها نظام التشغيل وبطاقات الشبكة والكابلات والموجّهات. وهذا الفصل هو الخط نفسه الذي عرّف التطبيق الشبكي في المفهوم الأول: التطبيق يملك المعنى، والبنية التحتية تملك التوصيل.

Recall

Why is the HTTP arrow between browser and server drawn dashed, and what path do the bytes really take?لماذا يُرسم سهم HTTP بين المتصفح والخادم متقطعًا، وما المسار الذي تسلكه البايتات فعلًا؟

It is a logical peer conversation. The real bytes go down through TCP and the socket, across the TCP/IP network, and back up the server's stack.
لأنه محادثة منطقية بين طبقتين نظيرتين. أما البايتات الحقيقية فتنزل عبر TCP والـ socket، وتعبر شبكة TCP/IP، ثم تصعد في مكدّس الخادم.

Step back from a single message to the rhythm of the whole exchange. Your browser asks the calculator for a result. The server wakes up, spends processor time computing it, reads and writes the history, and sends bytes back. Then it waits for the next request. It never phones you first.

تراجع خطوة عن الرسالة الواحدة وانظر إلى إيقاع التبادل كله. يطلب متصفحك من الآلة الحاسبة نتيجة. فيستيقظ الخادم، ويستهلك وقت المعالج في حسابها، ويقرأ السجلّ ويكتب فيه، ويرسل البايتات عائدة. ثم ينتظر الطلب التالي. ولا يتصل بك هو أولًا أبدًا.

The client starts the loop. While the server prepares the answer, compute, storage and communication fill up. Then the response closes the loop.العميل يبدأ الحلقة. وبينما يجهّز الخادم الإجابة، تمتلئ الحوسبة والتخزين والاتصال. ثم تُغلق الاستجابة الحلقة.

That cycle is the Request-response loop. The Client initiates, and the Server only responds. RFC 9110 builds HTTP around exactly this pattern: a client sends a request message, and a server answers it with a response message.

هذه الدورة هي request-response loop. فالـ client يبادر، والـ server يستجيب فقط. ويبني RFC 9110 بروتوكول HTTP حول هذا النمط بالضبط: العميل يرسل رسالة طلب، والخادم يجيب عنها برسالة استجابة.

Every response has a priceلكل استجابة ثمن

This is where the part comes full circle. Preparing each response costs the server three resources. Compute is the processor time, which you will later measure as Processing time (PT). Storage is reading and writing data. Communication is sending the response back over the network. For one user that is trivial. Multiply it by, say, 10,000 users pressing equals at once, and those three costs decide where each component in the design space should live.

هنا يكتمل الجزء دورته. تجهيز كل استجابة يكلّف الخادم ثلاثة موارد. الحوسبة هي وقت المعالج، والذي ستقيسه لاحقًا على أنه processing time. والتخزين هو قراءة البيانات وكتابتها. والاتصال هو إرسال الاستجابة عائدة عبر الشبكة. لمستخدم واحد هذا أمر تافه. لكن اضربه في 10,000 مستخدم مثلًا يضغطون على علامة المساواة في اللحظة نفسها، وستجد أن هذه التكاليف الثلاث هي التي تقرّر أين يجب أن يعيش كل مكوّن في فضاء التصميم.

It is also why placement matters to users. The time a user waits, the Response time (RT), is the trip to the server, the processing, and the trip back. NIST describes Fog computing as a way to minimize the request-response time. Moving the right component closer shortens the loop.

وهذا أيضًا سبب أهمية قرار الوضع للمستخدمين. فالوقت الذي ينتظره المستخدم، أي response time، هو رحلة الذهاب إلى الخادم، والمعالجة، ورحلة العودة. وتصف NIST حوسبة الـ fog بأنها وسيلة لتقليل زمن الطلب والاستجابة. فتقريب المكوّن المناسب يقصّر الحلقة.

Quick checkاختبار سريع

Who initiates communication in the request-response loop between browser and server?من يبادر بالاتصال في حلقة الطلب والاستجابة بين المتصفح والخادم؟

Recall

In the request-response loop, who initiates, and which three server resources does each response consume?في حلقة الطلب والاستجابة، من يبادر، وما الموارد الثلاثة في الخادم التي تستهلكها كل استجابة؟

The client initiates. The response consumes compute, storage and communication.
العميل هو من يبادر. والاستجابة تستهلك الحوسبة والتخزين والاتصال.

Recapالخلاصة

If you remember nothing elseإن لم تتذكر شيئاً آخر فتذكّر هذا

  • The Internet is the infrastructure. The Web is one network application on it, using HTTP.الإنترنت هي البنية التحتية. والويب تطبيق شبكي واحد يعمل فوقها باستخدام HTTP.
  • A network application is any app that uses the Internet as its transport medium: web, email, streaming, peer-to-peer.التطبيق الشبكي هو أي تطبيق يستخدم الإنترنت وسيطًا لنقل بياناته: الويب، والبريد الإلكتروني، والبث، ونظير إلى نظير peer-to-peer.
  • Lecture definition: decentralized means split into separate client and server programs that talk through a protocol and sockets (BitTorrent, Bitcoin).تعريف المحاضرة: اللامركزي decentralized يعني أن التطبيق مقسوم إلى برنامجَي عميل وخادم منفصلين يتواصلان عبر بروتوكول و sockets (BitTorrent، Bitcoin).
  • Lecture definition: distributed means computation is not on a single machine but spread between client and server, and state is distributed too (Google Cloud).تعريف المحاضرة: الموزّع distributed يعني أن الحوسبة ليست على جهاز واحد بل موزّعة بين العميل والخادم، والحالة state موزّعة أيضًا (Google Cloud).
  • The server side of an app is several components (an API gateway, services, a database), and each can be placed separately.جانب الخادم في التطبيق يتكوّن من عدة مكوّنات (API gateway، وخدمات، وقاعدة بيانات)، ويمكن وضع كل منها بشكل منفصل.
  • Design space: the vertical axis picks the layer (decentralization). The horizontal axis picks the compute or storage resource type (distribution); the layer's copy of that type is the instance.فضاء التصميم: المحور العمودي يختار الطبقة (اللامركزية). والمحور الأفقي يختار نوع مورد الحوسبة أو التخزين (التوزيع)؛ ونسخة الطبقة من ذلك النوع هي الـ instance.
  • Placement criteria: latency, compute demand, storage and state, cost, privacy, sharing and availability.معايير الوضع: latency، والطلب على الحوسبة، والتخزين والحالة، والتكلفة، والخصوصية، والمشاركة، والتوافرية.
  • A socket is an endpoint. HTTP talks logically between application layers, while the bytes move through the TCP/IP stack.الـ socket نقطة نهاية. و HTTP يتحدث منطقيًا بين طبقات التطبيق، بينما تتحرك البايتات عبر مكدّس TCP/IP.
  • The client initiates. Each response costs the server compute, storage and communication.العميل هو من يبادر. وكل استجابة تكلّف الخادم حوسبة وتخزينًا واتصالًا.

Sourcesالمصادر