Общие принципы работы веб-приложений

Я всегда слышу вопрос: "Как работают сайты?", "Почему создать один сайт дешевле, а другой дороже?" и подобные вопросы от своих клиентов. И решил этой статьёй дать на него ответ.

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

Frontend

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

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

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

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

К слову все эти пункты относятся к термину Frontend, то есть лицевая разработка, разработка пользовательского интерфейса и т.д. Я лишь вкратце приведу пример того как работает простой функционал вызова всплывающего окна, а в будущем уже сделаю курс по его созданию и распишу всё более детально.

Пример реализации элемента и взаимодействия с ним

Итак, для начала обозначаем с помощью HTML наше всплывающее окно и кнопку которая будет его открывать:

<button class="open">Я открою всплывающее окно</button><div class="modal">Это содержимое всплывающего окна</div>

Далее нам нужно сделать так, чтобы наше окно по умолчанию не было видно. Кроме того, когда окно открыто, оно должно помимо класса modal содержать класс active, это и будет означать, что всплывающее окно сейчас активно и собственно такому элементу можно задать стиль:

.modal { display: none; }.modal.active { display: block; position: fixed; z-index: 1000; width: 350px; background: #efefef; top: 50px; left: 50px;}

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

И наконец, с помощью Javascript мы оживляем нашу задумку. Воспользуемся мы дополнением jQuery, которое следует подключить заранее и которое облегчает использование некоторых очень нужных функций:

$(".open").click(function(){ $(".modal").addClass("active");});

Здесь мы говорим добавить класс active к нашему элементу с классом modal после того как сделаем клик по кнопке с классом open. Повторюсь что это самый примитивный код, он даже не реализует закрытие окна и много других фишек, как анимации, центровка, затемнение и прочее. Однако я считаю данный пример лучшим, чтобы показать как работает система в целом.

Backend

Очень часто клиент как-то взаимодействует с приложением и появляется необходимость в автоматическом режиме ему отвечать. Например, клиент оставил заявку на сайте - эти данные необходимо отправить к нам на почту, а клиенту отправить благодарность. Или же клиент зарегистрировался на сайте, выполняет вход на сайт, просит сбросить пароль и т.д. Да уж что там, просто выдать новости на странице - уже работа сервера. Такие сайты называются динамическими.

На стороне сервера пишется определённый скрипт, который обрабатывается специальным интерпретатором или же запускается как процесс. Для примера разберу стандарт на PHP, языке программирования, который используется в большинстве случаем при создании веб-приложений.

<?echo "Hello World";?>Данный код выводит на экран после исполнения текст Hello World. Что примечательно, так это то, что браузер автоматически подставить стандартную HTML шапку, если не обнаружит у нас в выводе. Конечно же по правилу нужно делать так:

Разумеется, сейчас backend приложений пишется не в стиле "выведи на экран". Пишутся сложные структуры данных, обработчики URL-адресов, сервисы работы с базами данных и т.д. Все эти вещи в будущем буду разбирать в этом блоге.

Наша команда поможет Вам сделать сайт на Wordpress, 1C Битрикс, Joomla, Opencart, доработать сайт или даже сделать прототип проекта. Предлагаем Вам ознакомиться с нашими ценами.

Также предлагаю посмотреть моё видео по теме как работают сайты. Здесь есть некоторые аспекты, которые я не затронул в статье: