Что такое frontend?

Промокод на скидку AZBUKA

Всем привет, меня зовут Анастасия Редченкова, я frontend разработчик с 5 летним стажем. Работаю в датской компании Kraftvaerk, пишу интерфейсы на VueJs.
Сегодня мы разберем один из первых терминов, с которым вам придется столкнуться, как только вы попытаетесь разобраться в веб разработке - и это Frontend.

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

К Frontendу относится всё, что видит пользователь, то есть мы с вами, когда открываем веб-страницу. Это и сам интерфейс и функций, которые работают на клиентской стороне веб-сайта или приложения. Что значит работают на клиентской стороне? Открываем сайт Loftschool, кликаем правой кнопкой мышки, выбираем “Исходный код страницы” и вуаля, мы видим код, из которого на самом деле состоит наша страница. Браузер - это и есть клиентская сторона, то есть код, относящийся к frontendу есть у нашего браузера и мы можем его посмотреть. С backendом такой фокус не пройдет.

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

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

Frontend и Backend тесно связаны друг с другом, их взаимодействие происходит по кругу. Frontend отправляет информацию в backend. Там она обрабатывается и возвращается обратно. Frontend придает этому ответу понятную форму.

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

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

Также есть специалисты, которые уверенно чувствуют себя как во frontend, так и в backend части и могут совмещать их. Их называют full-stack разработчики.

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

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

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

[AnakinHavlicek]

А какие технологии лучше учить для начала карьеры frontend разработчика?) я тоже долго выбирал курсы, рассматривал разные компании, но в итоге остановился на Skypro) наставник помог определиться и найти первого заказчика))

[vitdem]

Все по фактам и все понятно! спасибо и успехов!

[ОльгаАгафонова-фс]

Прекрасно, понятно и жестикуляция уместна👍

[ЗаяцБелый-жл]

за 20 лет интернета столько всего придумали что и целой жизни не хватить выучить все ваши фраймвурки

[DenchikPrama]

Офигенное видео все понятно и кратко лайк одназначно❤

[viktorriabiy]

Спасибо, краткое и нужное видео! Лайк 100%

[clickabelno]

Ставлю свой царский лайк этой умнице и красатоше!!)

[Kai_mir]

Спасибо большое все четко и ясно 🔥🔥🔥😍😍👍🏼👍🏼

[АнтонСохацький]

Хочеш узнать что такое fron end а тебе дохрена рассказывають про фирму, куда кликать, какие цены

[vellouki]

Из-за комментариев я не понимаю, верить ли этой информации или нет.

[max_dos]

Я не шарю в математике, возможно ли стать фронт енд специалистом? Фобия небольшая говорят мат нужен программистам, дайте совет пожалуйста.

[vyachislove]

Вот они ваши делепоперы, смотрим видос что такое фронт энд

[SeoquickUa]

Кто не может разобраться в чем-то сам — ему никакие курсы не помогут. Ленивый программист — погромист.

[DevMagazineChannel]

с приходом serverless границ между BE и FE будто совсем не стало

[ПавелГлевский-фу]

Вообще ничего не понимаю, я понял что такое бэк-енд, а вот фронт-енд, вообще нифига!

[forgiveness_denied]

после того как она сказала аш-ти-ем-ель, ждал что скажет це-ес-ес 😹

[orxanali]

Спасибо тебе Красавица за такое же инфо

[FamilyB-us]

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

[fliblomlaslojor]

1:50 не путать с HTML и CSS иначе выходит говнокодные сайты (коих больше 80%) которые не способны ни на что кроме пожиралова ресурсов. Отключение JS приводит к тому, что сайт не только не может отобраить данные но и обработать их. Хотя задача сайта зачастую иметь пару кнопок и обычную древнюю <Form>

[dagaz]

Интересно я когда продвинюсь дальше основ и что такое фронтенд и бакэнд? 😂😂😂 Когда я типа начал учить нынешние прогеры в школу ходили. Нормальных курсов нет.