Что такое Front End?

Wed-разработку можно поделить на две части: Front End и Back End. Одна из которых отвечает за визуальную составляющую, другая — серверную. В материале рассказываем о не языке программирования и магах воздуха.

Что же такое Front End?

Начнем с простой истины. Front End — не язык программирования. Мы, пользователи, каждый день открываем веб-страницы в браузере, вбиваем в поисковике запросы, запускаем различные веб-приложения… Так вот, Front End — то, с чем юзер визуально (наглядно) взаимодействует: кнопки, корзина заказов, перелистывание страниц на сайте и тд.

Компоненты

Разработка немыслима без компонентов ее составляющих. Компоненты Front End — три неизменных кита: HTML/CSS, JavaScript и библиотеки или фреймворки.

HTML (HyperText Markup Language). Язык разметки, который используется для структурирования содержимого веб-страницы. Звучит немного сложно, но давайте на примере сайта TeachMeSkills. Наш сайт можно представить в виде блоков: верхний блок, центральный блок и нижний блок. В каждом из них лежит своя информация: в верхнем блоке находятся разделы сайта, в центральном — основная информация, в нижнем — контакты компании. Разметку этих блоков делает HTML.

CSS (Cascading Style Sheets). Язык стилей, определяющий внешний вид и визуальное оформление элементов веб-страницы. Что это значит? Наши блоки с HTML сами по себе безжизненны: они слитные, без отступов и с однотипными шрифтами. Именно для исправления этой непристойности существует CSS. Он делает все, чтобы веб-страница выглядела ярко, заметно и не уныло.

JavaScript. Полноценный язык программирования и центральный элемент Front End разработки. Перефразируем Вольтера: "Если бы не было JS, его стоило бы выдумать". Этот ЯП создан для придания динамичности, взаимодействия и управления поведением как веб-страниц, так и веб-приложений. Что это значит? Современные сайты и их поведение — заслуга JavaScript: плавная анимация, переходы, подгрузка всплывающих форм, окошек и т.д.

Фреймворки и библиотеки. Если просто, то это определенные наборы готовых инструментов. Наиболее популярной библиотекой современности остается React, когда-то разработанная компанией Facebook, а фреймворком — Angular. Для Front End разработчика использование этих плюшек — возможность пересесть с механической коробки передач на автомат.

В дополнение скажем, что для осуществления Front End разработки еще необходимо уметь пользоваться средой разработки VSCode и системой контроля версий Git.

Также для упрощения разработки была придумана специальная "обертка" TypeScript от компании Microsoft. И что она делает? Правильно! Упрощает процесс разработки! Если провести аналогию, то TypeScript — это как пересесть со стандартной машины в автомобиль с более мощным двигателем. По сути, педаль газа одна, но двигаетесь быстрее.

Немного наперед

JavaScript давно вышел за рамки Front End разработки. Сегодня с его помощью создают не только веб-приложения и сайты, но мобильные и десктопные приложения (те что на рабочем столе ПК) и многое другое.


Итог

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

Если думаешь, как сделать свое веб-приложение или сайт, короче, стать магом воздуха, то добро пожаловать в TeachMeSkills. У нас представлена самая актуальная и эффективная программа обучения, освоив которую, ты сможешь сделать крутой проект за 7 месяцев обучения. Примеры дипломных работ выпускников курса можешь посмотреть в нашем телеграмм канале.

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

Ниже тебя ждет бонус за прочтение статьи!

В TeachMeSkills мы нацелены на то, чтобы разблокировать твой IT потенциал!