Что такое back-end, front-end и full-stack и в чём их основные отличия

В далёком 2012, когда я только поступал в университет, я не знал, что такое back-end, front-end и full-stack — и это простительно (в силу отсутствия многих образовательных источников, тг-каналов и подобного). Но сейчас, в 2018, начинающим разработчикам это знать нужно — и это даже не обсуждается. 

Давайте начнём с примера и определений.

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

Такая же ситуация с front-end-ом и back-end-ом. Front-end-разработка сосредоточена на элементах сайта, которые вы видите в браузере и с которыми постоянно взаимодействуете. Back-end-разработка отвечает за функционал сайта и имеет дело с тем, что вы не видите — базами данных и серверами. 

Более конкретно:

Front-end — всё, что браузер может читать, выводить на экран и запускать. Это HTML, CSS и JavaScript.

• HTML (HyperText Markup Language) говорит браузеру о содержание страницы: «заголовок», «параграф», «список», «элемент списка».
• CSS (Cascading Style Sheets) говорит браузеру как отображать элементы: «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе [body] должен быть тёмно-серым и написан шрифтом Verdana».
• JavaScript говорит браузеру как реагировать на некоторые взаимодействия, используя легкий язык программирования.

Back-end — всё, что работает на сервере. Для back-end вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript/Node. А также системы управления базами данных: MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

И back-end, и front-end относятся к архитектуре приложения. Back-end — это сервер, а front-end — это клиент. Разберём на примере интернет-магазина. 

• То, что мы видим в браузере, а именно — каталог товаров, личный кабинет, страница товара, страница «О нас» и т.д. относятся к front-end. Визуальное отображение сетки товаров, цвета, отступы, шрифты — всё относится к дизайну и верстке.
• То, что скрыто от глаз пользователей, а именно база данных и хранение/изменение каталога товаров, добавление товара в корзину на уровне моделей данных, создание и хранение учетной записи пользователя — относится к back-end. Создание Rest API запросов, через которые front-end будет общаться с back-end тоже ложится на плечи последнего. Back-end-разработчик создаёт базы данных, интегрирует обеспечение безопасности, а также технологии резервного копирования и восстановления, создаёт мозг приложения. Работа back-end-щика лишена визуального дизайна. Она основана на логике и архитектуре ПО.

Теперь конкрентно.

Языки и инструменты фронтенд-разработчика:

• HTML
• CSS
• JavaScript (Angular, Vue, etc.)

Языки и инструменты бекенд-разработчика:

• PHP (Wordpress, Magento, etc.)
• Python (Django)
• Java (Spring)
• JavaScript (Node.js)
• .NET/C# (ASP.NET)
• Ruby (RubyOnRails)
• SQL (MySQL, MSSQL)
• NoSQL (MongoDB)

Не нужно знать все перечисленные языки, чтобы создавать веб-приложения. Для front-end нужно знать все, что написано (там не так уж и много), для back-end какой-то один язык и базу данных. Какой именно, не так важно. Для старта можно PHP или JavaScript.

Full-stack — это одновременно и front-end, и back-end. Full-stack разработчик должен разбираться и в серверной, и в клиентской части сайта одинаково хорошо.

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

Более подробно об особенностях работы front-end-щиков и back-end-щиков расскажу в разборах профессий. Stay tuned!