Если вы опытный (веб) разработчик, как и я, слова в названии имеют для вас полный смысл и довольно просты.

В недавнем разговоре с несколькими новичками (в рамках моих попыток придумать своего рода учебную программу) я обнаружил, что они часто видят, как эти слова бросаются вокруг, и они могут немного сбивать с толку. И если есть что-то, что не нужно новичку, так это еще больше путаницы.

Вот моя попытка прояснить запутанное и немного облегчить им жизнь.

Как работает Интернет?

Ваш браузер - это ваш выход в Интернет, и его описание работы выглядит следующим образом:

  • Чтобы загружать материалы из Интернета и отображать их вам, часто в виде веб-страницы.
  • Это также требует вашего вклада; нажимает кнопку, текст, который вы вводите в текстовые поля, и отправляет его в Интернет, чтобы Интернет мог творить чудеса с этим вводом и отвечать, надеюсь, более актуальными вещами.

Примером этого потока является форма регистрации.

  1. Вы вводите URL-адрес в свой браузер, и он сообщает Интернету: «Эй, дайте мне данные по этому URL-адресу».
  2. Интернет отправляет вам «HTML и CSS». HTML и CSS - это просто инструкции для вашего браузера о том, что отображать; «Эй, браузер, покажи пользователю белую страницу, два текстовых поля где-то посередине, синюю кнопку…»
  3. Ваш браузер загружает этот HTML и CSS, читает его и затем показывает вам веб-страницу.
  4. Вы вводите текст в текстовые поля и нажимаете кнопку, чтобы отправить форму.
  5. Ваш браузер принимает эти данные от вас и отправляет их в Интернет.
  6. Интернет теперь может отвечать дополнительным количеством HTML и CSS, которые сообщают вашему браузеру показать вам страницу с сообщением «Регистрация завершена» или чем-то еще.

И так далее.

Итак, что такое сервер?

Проще говоря: сервер в данном контексте - это компьютер, подключенный к Интернету.

«Интернет» - это просто собрание множества серверов; многие компьютеры (без прикрепленных к ним экранов) творит чудеса и отправляют результаты в ваш браузер для вашего удовольствия.

Это означает, что в приведенном выше примере ваш браузер обращался к серверу.

Это сервер, который принимает данные пользователя (его имя, адрес электронной почты и т. Д.) И сохраняет их для дальнейшего использования.

Вот почему вы можете взять любое устройство с любым браузером и войти в свою любимую социальную сеть, и все ваши данные будут сохранены и готовы к работе; это все на сервере.

Теперь, когда у нас есть некоторое представление о том, что такое сервер, давайте поговорим подробнее о том, что такое ваш браузер.

Что такое клиент?

Клиент - это программное обеспечение, работающее на компьютере пользователя (ваш ноутбук, iPad, смартфон) и способное взаимодействовать с сервером.

В приведенном выше примере клиент - это ваш браузер. Он может интерпретировать информацию (HTML и CSS, изображения, видео), которые отправляет сервер, и отображать их в понятной вам форме. Он может принимать введенные вами данные (текст, аватары, видеозаписи) и отправлять их на сервер для обработки и / или сохранения.

Давайте поговорим о другом виде «клиента», которого вы, вероятно, используете каждый день; мобильные и настольные приложения.

Возьмем, к примеру, мобильное приложение Facebook:

  • Он работает на компьютере пользователя (вашем смартфоне).
  • Он отправляет и получает информацию на / с сервера. Думаю об этом. Если вы купили новый телефон сегодня и вошли в приложение Facebook, на нем будет отображаться информация (ваши комментарии, изображения, лайки и т. Д.), Которые вы сохранили в Facebook до этого дня. Как он получает эту информацию? Он просит сервер Facebook отправить их.

на стороне клиента vs на стороне сервера

Эти термины, по сути, нацелены на то, чтобы прояснить, где происходит конкретная операция. Это происходит на сервере или на клиенте?

клиентские операции

Как объяснялось выше, клиент - это часть программного обеспечения, которое запускается на компьютере пользователя и взаимодействует с сервером.

Но общение с сервером - это еще не все, что делает клиент.

Рассмотрим мобильное приложение Instagram:

  • Как мы знаем, Instagram - это социальная сеть для обмена и использования изображений.
  • Instagram позволяет вам видеть фотографии людей, на которых вы подписаны (загружая эти изображения с сервера и показывая их вам).
  • Он также позволяет загружать изображения для просмотра другими (он берет ваши изображения, ваши грамотно составленные подписи и отправляет их на сервер).
  • Одна интересная особенность Instagram заключается в том, что он позволяет вам применить фильтр к вашему изображению, прежде чем поделиться им со всем миром.
  • «Фильтр - это программная процедура, которая изменяет внешний вид изображения или его части, тем или иным образом изменяя оттенки и цвета пикселей».
  • В случае Instagram этот фильтр выполняется в самом приложении. Это означает, что разработчики мобильных приложений Instagram написали код для управления изображениями прямо на вашем смартфоне.
  • Это называется операцией на стороне клиента.
  • Возможно, изображения будут отправлены на сервер для фильтрации, но это не подходит для сценария использования Instagram. Пользователи хотят иметь возможность переключаться между фильтрами и видеть результаты как можно быстрее, не дожидаясь, пока приложение сначала загрузит изображение на сервер, а затем загрузит его снова после фильтрации. Это сделало бы выбор фильтра гораздо более длительным и раздражающим процессом.

По мере того, как смартфоны, планшеты и ноутбуки становятся все более мощными, количество операций, которые можно выполнять на стороне клиента, увеличивается.

серверные операции

Наиболее распространенным примером серверных операций являются операции, связанные с хранением и извлечением данных.

Продолжим пример с Instagram.

  • Когда люди регистрируются через приложение Instagram и загружают изображения, сервер (ы) Instagram сохраняет всю эту информацию в базе данных, которая существует на сервере.
  • Хотя можно сохранять изображения и данные на свой мобильный телефон, для вашего устройства не имеет смысла хранить каждый профиль, их изображения и видео на каждом устройстве, на котором установлено приложение Instagram. Это даже невозможно. Просто нет мобильных устройств, которые могут хранить такой объем информации.
  • Вот почему каждый раз, когда вы хотите найти профиль пользователя и просмотреть его информацию, вам нужно немного подождать, пока загрузятся результаты и изображения.
  • В течение этого периода ожидания мобильное приложение Instagram отправляет ваш поисковый запрос на сервер. Сервер просматривает миллионы пользователей и записей, чтобы найти тех, кого вы, возможно, ищете, и отправляет их обратно клиенту.
  • Этот «поиск» - это операция на стороне сервера.

Задача команды разработчиков программного обеспечения - решить, будет ли операция выполняться на стороне клиента или на стороне сервера (в зависимости от присущих им ограничений), чтобы обеспечить наилучшее взаимодействие с пользователем. Пользователь.

Рендеринг

Давайте немного перестанем говорить о мобильных приложениях и вернемся в Интернет.

Что такое рендеринг?

В данном контексте, «рендеринг» - это комбинация данных с HTML и CSS, отображаемых браузером.

Подумайте, когда вы входите в Twitter или любую другую социальную сеть через браузер. Где-то на странице вы видите свое имя и аватар. Вы также можете увидеть самые последние сообщения определенных людей, на которых вы подписаны.

Все эти данные (ваше имя, изображения, твиты друзей) хранятся в базе данных на сервере. Но чтобы вы могли просматривать его так, как вы это делаете, эти данные необходимо объединить с HTML и CSS, потому что это единственное, что браузер умеет отображать.

Если вы выйдете из Twitter, а ваш друг войдет в систему с вашего компьютера, он увидит похожую страницу, но не совсем такую ​​же. Ваше имя, изображения и канал были заменены на их.

Этот процесс получения соответствующих данных и их объединения с HTML и CSS, которые браузер понимает для отображения, называется отображением.

рендеринг на стороне сервера

Ранее я писал, что серверы отправляют вашему браузеру HTML и CSS, которые сообщают ему, что и как отображать.

При рендеринге на стороне сервера эта комбинация данных (текста, изображений и т. Д.) И правил отображения выполняется полностью на стороне сервера. Разработчики написали код, который сообщает серверу взять данные из своей базы данных, объединить эти данные с правилами отображения (HTML и CSS) и отправить их в браузер.

Введение в JavaScript

Помимо HTML и CSS, есть еще один язык, который понимают браузеры, и он называется JavaScript.

JavaScript хорош, потому что:

  • В отличие от HTML и CSS, его единственная цель - не пользовательский интерфейс.
  • JavaScript можно использовать для управления HTML и CSS. Это означает, что JS может изменить внешний вид страницы после загрузки.
  • JavaScript также может выполнять эту манипуляцию в ответ на ввод данных пользователем (щелчки кнопок, ввод текста и даже движение мыши). Один из распространенных примеров - слайд-шоу / карусели изображений на веб-страницах. Вы нажимаете кнопку, и одно изображение сдвигается влево, а другое - справа. JS отвечает за скрытие и отображение этих изображений без необходимости запрашивать новый HTML и CSS с сервера.
  • Это очень интересно, потому что это означает, что браузеру не всегда нужно запрашивать у сервера новые инструкции о том, что отображать. Ваш сервер может просто отправить немного JavaScript вместе с HTML и CSS в первый раз, и вам не нужно будет отправлять HTML и CSS какое-то время.

Это означает, что мы можем использовать JavaScript, чтобы получить массу удовольствия на стороне клиента.

Почему полезно не запрашивать HTML и CSS с сервера много раз?

Каждый раз, когда браузер запрашивает что-то с сервера, пользователь должен ждать, пока сервер не ответит и все будет загружено.

Мы можем ускорить взаимодействие с пользователем, запрашивая только данные (без информации о пользовательском интерфейсе). Только данные относительно легкие и поэтому загружаются быстрее, чем data + html + css.

За пределами пользовательского интерфейса

JavaScript способен не только на управление пользовательским интерфейсом, но и на другие вещи.

Это полноценный язык программирования, который может выполнять разные операции, от применения фильтра до обработки звука, изображений и видео.

Как я упоминал ранее, он также может разговаривать с сервером, чтобы запросить данные. И все это он может делать без дополнительной загрузки всей страницы.

Это означает, что мы можем создать весь пользовательский интерфейс, работающий в браузере (на стороне клиента), при взаимодействии с сервером для получения и отправки только данных.

рендеринг на стороне клиента

Здесь «рендеринг» (объединение данных с HTML и CSS) выполняется полностью на стороне клиента (буквально в браузере) с использованием JavaScript.

интерфейс против серверной части

Эти термины могут сбивать с толку, потому что люди обычно используют их, когда имеют в виду на стороне клиента и на стороне сервера. Но иногда они несколько разные.

Что означает интерфейс?

Это просто все, что связано с пользовательским интерфейсом и опытом. Front-end разработчик - это тот, кто пишет код для создания пользовательского интерфейса.

Это означает, что каждый интерфейсный веб разработчик должен разбираться в HTML и CSS.

Интерфейсный разработчик может писать внешний код, даже если ваше веб-приложение использует рендеринг на стороне сервера. То, что рендеринг происходит на стороне сервера, не исключает того факта, что кто-то напишет HTML и CSS, которые будут информировать пользователя о том, что видит пользователь.

Внешний интерфейс не всегда выполняется на стороне клиента.

С другой стороны, все, что происходит на стороне клиента, называется интерфейсом.

Что такое фреймворк?

В разработке программного обеспечения фреймворк (или библиотека) - это заранее написанный код, который упрощает создание одних и тех же вещей снова и снова.

Разработчики заметили, что когда вы создаете веб-приложения (или любые другие), есть определенные вещи, которые вы, вероятно, захотите делать; например, рендеринг веб-страницы или сбор пользовательского ввода.

Поэтому вместо того, чтобы каждый раз позволять каждому разработчику писать весь код, чтобы делать это каждый раз с нуля, они создают фреймворки, упрощающие выполнение многих задач.

Часто существует много рамок для одного и того же типа вещей, и это потому, что разные люди всегда имеют разные представления о том, как лучше всего чего-то достичь.

интерфейсные фреймворки

Я думаю, что термин «интерфейсный фреймворк» вызывает большую путаницу.

Когда люди используют термин «интерфейсный фреймворк», на самом деле они имеют в виду «фреймворк рендеринга на стороне клиента». Несмотря на то, что при рендеринге на стороне сервера пишется много внешнего кода.

Я думаю, что уже слишком поздно менять то, как мы используем эти термины, но важно понимать, что люди имеют в виду, когда их произносят.

Итак, как правило, интерфейсная структура представляет собой код библиотеки (также известный как заранее написанный) код для упрощения, ускорения и повышения производительности рендеринга на стороне клиента (с использованием JavaScript). .

Примеры: React, Vue, Angular.

Что значит back-end?

На стороне сервера происходит что-то, что не имеет отношения к пользовательскому интерфейсу.

Эти вещи (хранение, извлечение и обработка данных) также могут происходить на стороне клиента (как в примере с приложением Instagram), но они никогда не называются внутренними операциями.

… Серверные фреймворки?

Большинство фреймворков, которые люди называют фоновыми фреймворками, на самом деле являются «веб-фреймворками общего назначения».

Это потому, что вы можете использовать их все для рендеринга HTML и CSS на стороне сервера. Таким образом, в этом контексте странно называть их внутренними фреймворками, потому что они выполняют как внутренние, так и внешние функции.

Вы также можете использовать их для хранения, извлечения и обработки данных только и отправлять все эти данные на клиентскую сторону для рендеринга на стороне клиента. В этом контексте их можно назвать серверной структурой, потому что они совершенно не связаны с клиентской частью приложения.

Примеры: Rails, Django, Laravel, Express.js.

JavaScript на сервере: Node.js

По мере того, как JavaScript становился все более популярным и все больше разработчиков изучали этот язык, стало хорошей идеей запускать JavaScript в другом месте, а не только в браузере.

Вот что такое Node.js. Это программное обеспечение, которое позволяет чему угодно (не только браузерам) понимать и интерпретировать JavaScript.

Теперь, благодаря Node.js, мы можем писать JavaScript на стороне клиента и на стороне сервера, уменьшая количество языков, которые разработчикам необходимо изучить для создания полного веб-приложения.

(На самом деле существуют небольшие различия в том, как JavaScript работает в браузере и как он работает в Node.js, но это выходит за рамки данной статьи)

Ладно, это все, ребята!