Чем frontend отличается от backend. Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют. Что необходимо знать frond-end разработчику

Браузер отображает всё, что получает от сервера и «понимает». Это даёт основание определить процесс отображения и процесс формирования данных на две составляющие. Посетитель, просматривая страницу, предпринимает действия, что даёт основания функционалу страницы «управлять» сервером.

Сервер формирует первую страницу, когда браузер «заходит» на сайт. Затем сервер ожидает «указаний». При таком положении вещей: front end и back end разработка действительно повод дать работу двум категориям разработчиков параллельно.

Сайт - это единая система

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

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

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

Что делать, совершенных инструментов в области сайтостроения ещё нет, приходится использовать всё, что доступно.

О возможностях front-end

Книга «Front-end. Клиентская разработка для профессионалов» - своего рода концентрат качественного и практичного описания JavaScript, HTML5 и CSS3, ориентированного на квалифицированного разработчика, стремящегося к разработке качественного «клиентского» кода.

Node.js, ES6, REST, практичные примеры и отличный стиль. Вне сомнения, "Front end: клиентская разработка для профессионалов" - это отличное и полезное издание, фундаментальные основы для разработчика - библия знаний и процессов их эффективного применения.

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

Сложилось мнение, что есть независимые квалификации по гипертексту (HTML), по языку XML, по таблицам каскадных стилей (CSS) и другим направлениям. Естественно, трудно не разделить работу:

• среда браузера;
• «философия» сервера.

Так сказать, очевидно, front end разработка - что это: принципиально важно, но это вовсе не работа на сервере.

Об особенностях back-end

Мир интернета обслуживает великое множество серверов и технологий. Здесь Apache, во всех его действующих версиях, по-прежнему законодатель мод. Семейство юниксоидов по сей день не уступило пальму первенства в серверном деле никаким другим платформам.

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

Это уровень серверных технологий, то есть, это не front-end разработка, что это значит - вроде как ясно: здесь нет браузера, но есть PHP или другой серверный язык.

Протокол HTTP (или другой) позволяет браузеру обратиться к серверу за получением страницы, и браузер отвечает взаимностью. Серверный язык отрабатывает функционал, созданный разработчиком "back-end" и передаёт "front-end" в браузер. Это может быть первая страница, обновление страницы или переход к другой странице, включая переход по ссылке на другой сайт, то есть на другой сервер.

Совмещение back-end + front-end разработка: что это, возможно ли это?

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

• интернет-робот;
• «паук» - модный бренд в сфере парсинга;
• иное программное изделие.

Браузеров много, но его DOM-ская логика и JavaScript в 99.9% случаев - основа для отображения ответа сервера. Любой поток информации от сервера браузер пытается трансформировать в DOM и предполагает в нем найти:

• HTML.
• JavaScript.

Эта святая троица составляет front-end и разработку: что это такое и как это применить - вроде как предельно ясно.

DOM - это дерево, так привычно и традиционно звучит. На самом деле DOM - это, отлично продуманная система, а JavaScript - её родной язык. В этом контексте знания - Front-end: клиентская разработка для профессионалов в pdf-формате - это очень хорошо, но идеально в формате настольной книги, которая всегда на виду.

Существенно: когда браузер открывает сайт, он строит DOM и затем уточняет его, пока клиент находится в сфере компетенции открытой им страницы. Перемещение клиента между страницами, как по внутренним, так и по внешним ссылкам, меняет содержание DOM и JavaScript-функционала. Front-end разработчик имеет все основания и возможности комплексно управляться в браузере, не теряя при этом контроля над управлением.

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

Система клиент + сервер

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

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

Веб-ресурс - причина, по которой браузер и сервер начинают взаимодействие и продолжают его до тех пор, пока клиент не уйдёт на другой сайт.

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

Сайт могут создавать несколько разработчиков, но это должна быть команда. Команда квалифицированная и тесно связанная. Один может создавать CSS-правила, другой - компоновать только теги HTML, третий вдохновенно расписывать функционал на JavaScript по тегам, правилам и событиям. Но это должна быть взаимосвязанная команда, которая учитывает серверную часть, не отделяя ее от браузерной.

Невозможно написать код на PHP, который не владеет тем, что написал CSS-разработчик, скомпоновал специалист по HTML и обозначил JavaScript-программист. Иначе сайт не станет системой, а если сайт - не система, то это не сайт, а пустая трата сил и времени на создание страниц front-end"a, которые отражают то, что смогут разобрать в полученном от back-end"a. Последний отвечает взаимностью, понимая так, как получается, все что прилетает от браузера.

Точка всемирной сети: сайт = система

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

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

Если веб-ресурс удовлетворяет определённым требованиям - он есть и доступен в сети. Если нет, то не важно, как соотносится back-end и front-end - что это такое, так и останется тайной.

Редактор «Нетологии» Светлана Шаповалова разбирается в том, кто такой фронтенд-разработчик, что он должен уметь (или не должен), и за что ему платят прекрасную зарплату (или не очень).

Кто такой фронтенд-разработчик

Согласно ежегодному исследованию StackOverflow, самая популярная профессия среди пользователей сервиса в 2017 году - это Web developer. Именно в эту категорию входят все фронтенд-разработчики.

Данные StackOverflow

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

Начинается все с путаницы в названиях вакансий: можно встретить и «front-end developer», и «front end разработчик», и «фронтендщик», и «фронтенд девелопер», и «web developer», и «фронтенд-разработчик». Иногда даже можно увидеть какого-нибудь «веб-верстальщика» с требованиями под фулстак-разработчика. Реакция на это одна: WTF?!

Беда в том, что часть работодателей не отличают (или не хотят отличать) верстальщика от фронтенд-разработчика, - это понятно по описанию вакансий. Разберемся, какие умения отделяют фронтенд-разработчика от «верстака» (верстальщики, не обижайтесь, вы тоже хорошие).

Верстальщик - боец узкого фронта. Его задача - сверстать полученный от дизайнера макет, используя HTML+CSS. Он, возможно, немного умеет в JavaScript, но чаще ограничивается умением прикрутить какой-нибудь плагин jQuery.

Фронтенд-разработчик не просто верстает макеты. Он хорошо знает JavaScript, разбирается во фреймворках и библиотеках (и активно юзает часть из них), понимает, что находится «под капотом» на серверной стороне. Его не пугают препроцессоры и сборщики LESS, SASS, GRUNT, GULP, он умеет работать с DOM, API, SVG-объектами, AJAX и CORS, может составлять SQL-запросы и копаться в данных. Получается сборная солянка навыков, к которым добавляется понимание принципов UI/UX-проектирования, адаптивной и отзывчивой верстки, кросс-браузерности и кросс-платформенности, а иногда и навыков мобильной разработки.

Фронтендщик в обязательном порядке умеет работать с контролем версий (Git, GitHub, CVS и т. д.), использовать графические редакторы, «играть» с шаблонами различных CMS.

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

Итак, какие технологии должен освоить фронтенд-разработчик:

• HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills)
• Препроцессоры CSS (Sass, Less, Stylus и т. д.)
• JavaScript
• Популярные фреймворки и библиотеки: jQuery, Angular.JS, React.JS, Backbone.js и т. д.)
• OOCSS / BEM / SMACSS
• HTML5 API
• ECMAScript 6
• Популярные CMS (WordPress, Drupal, Joomla и т.д.)
• Понимать и разбираться в серверных технологиях (Node.js, PHP, Ruby, .NET и т. д.)
• Инструменты дебаггинга (Chrome Dev Tools, Firebug и прочие)
• JavaScript транспайлеры (Babel)
• Инструменты контроля версий (Git, GitHub, CVS и т. д.)
• Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и т. д.)
• Графические редакторы (Photoshop, Illustrator и т. д.)

В чем должен разбираться:

• кросс-браузерная и кросс-платформенная разработка;
• прогрессивное улучшение и изящная деградация;
• мобильная разработка;
• адаптивная и отзывчивая верстка;
• веб-шрифты;
• принципы SEO-оптимизации.

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

Что говорит статистика

Какие технологии и инструменты чаще всего используют фронтенд-разработчики? Во-первых, трудно представить фронтендщика, не умеющего в JavaScript. Это подтверждают опросы:

• по данным StackOverflow, JavaScript в списке инструментов фронтенда лидирует с огромным отрывом (90,5%)
• исследование компании O"Reilly, проведенное среди европейских программистов в конце 2016 года, тоже ставит JavaScript на первое месте.

Далее идут различного рода фреймворки и библиотеки, самые популярные из которых: Angular, Node.js, React. Кроме обязательного JavaScript, фронтенд-разработчики также используют и другие языки, хоть и не так часто. Лидируют , Java и С#. И, конечно же, не обойтись фронтендщику без навыков работы с CMS. Самый популярный выбор - WordPress.

Данные StackOverflow

Если сгруппировать самые популярные инструменты в стеки, то получим такую ситуацию:

Данные StackOverflow

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

Данные StackOverflow

Карьерный путь и зарплата фронтенд-разработчика

Карьерный путь фронтендера обычно начинается с верстальщика - это самый логичный и общепринятый вариант. Сначала изучается связка , затем на нее «наслаиваются» знания , библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем все это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов .

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

У готового фронтенд-разработчика в целом есть три основных варианта развития:

• горизонтальный (совершенствоваться как специалист, тем самым постоянно повышая свою стоимость на рынке труда);
• вертикальный (расти по карьерной лестнице);
• диверсификационный (освоение смежных специальностей, превращение в фулстака и переквалификация).

Сервис PayScale наглядно проиллюстрировал все возможные пути карьерного развития фронтенд-разработчика:

Какой из них выбрать - зависит лишь от самого специалиста и его пожеланий/навыков.

Касаемо зарплат фронтенд-разработчиков: здесь, как и во всей IT-индустрии, нет единого стандарта оплаты. Все зависит от навыков и умения подать себя. Ну, и от везения иногда:)

Средняя зарплата фронтенд-специалиста по России, рублей/месяц

Средняя зарплата фронтенд-специалиста по Москве, рублей/месяц

По данным «Моего круга»

Традиционно годовая зарплата фронтенд-разработчиков в США чуть выше, чем по России. Однако, если вы работаете в филиале иностранной компании - вам такой разрыв, скорее всего, не страшен.


По данным PayScale

Как стать фронтенд-разработчиком

Для начала снять розовые очки. Обучение - это труд и самодисциплина. Большинство начинающих айтишников отсеиваются на этапе «хочу стать программистом и получать зарплату в долларах, но не думал, что придется так много учиться». Уникальность программирования и вообще любой айтишной специальности в постоянном самообучении. В этом и сложность, и прелесть IT-сферы. Если вас это не пугает - круто! У вас есть все шансы стать отличным специалистом.

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

Тем, кто стартует с нуля, надо начинать с и освоить их на уровне идеальной верстки PSD-макетов. На этом этапе также надо научиться работать с текстовыми и графическими редакторами и знать основные принципы дизайна (как плюс). Затем взяться за JavaScript: синтаксис, архитектура и возможности языка. Освоить популярные фреймворки и библиотеки, параллельно полюбить системы контроля версий и какой-нибудь из популярных таскраннеров. Добавить препроцессоры и фреймворки CSS, разобраться в серверных технологиях. А дальше можно пить смузи на Бали шлифовать полученные знания до бесконечности.

Примерный путь начинающего фронтенд-разработчика.
У вас он будет свой.

Пройти этот путь можно как в одиночку, так и с наставниками (вузы, курсы). Вот какие самые популярные форматы обучения разработчиков по версии StackOverflow:


Данные StackOverflow

На первом месте находятся онлайн-курсы, за них проголосовали 64,7% опрошенных разработчиков, затем идут: самообучение по книгам, офлайн-курсы, опенсорс-разработка и лагери программирования. Интересно, что высшее образование (Master’s degree) стоит практически на последнем месте.

Вывод

- это универсальный солдат. Он и макет заверстает, и веб-приложение построит, и серверную часть, если надо, освоит. Знать надо немало: HTML, CSS, JavaScript, библиотеки и фреймворки JS, препроцессоры и фреймворки CSS, системы контроля версий и таскраннеры, технологии бэкенда, юнит-тестирование и многое другое.

Кроме того, нелишними будут soft skills: взаимодействие с людьми и работа в команде, умение наладить эффективный workflow и решать поставленные задачи наиболее оптимальным способом. Не обойтись без уверенных знаний английского языка.

Оплата труда фронтенд-специалиста вполне себе достойная, и чем больше навыков - тем выше шансы получить «жирный» оклад.

Стать фронтенд-разработчиком может каждый, кто не пасует перед самообучением: как мы выяснили, полагаться на вузовское образование сложно. Идеальный вариант - различные онлайн и офлайн-курсы + литература по теме, практика и великий Гугл.

«Нетология» запускает полноценную программу подготовки фронтенд-специалистов - . Это 6-месячный курс, посвященный базовым технологиям фронтенд-разработки: HTML и CSS, JavaScript, Web API, AJAX, веб-сокеты, библиотека React.

По итогу курса студенты создадут собственное одностраничное веб-приложение. Обучение ведут 10 практикующих фронтенд-специалистов - это позволяет получить всестороннее понимание инструментов и задач фронтенд-разработки. В течение всего обучения студенты получат не менее 100 практических заданий, максимально близких к «боевым», и реализуют 3 проекта среднего объема и 1 полноценный проект в качестве дипломной работы.

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

P.S. Как вы считаете, какие знания жизненно необходимы фронтенд-разработчику, а какие можно осваивать по мере надобности?

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

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

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

К frontend-разработке относятся:

• HTML (HyperText Markup Language) - язык разметки документов, при помощи которого формируется структура страницы: заголовки, абзацы, списки и так далее;
• CSS (Cascading Style Sheets) - язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду ваш браузер понимает, как именно отображать элементы. CSS задает цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Еще он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом;
• JavaScript - это язык, который создавался для того, чтобы оживить веб-страницы. Его задача - реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Еще он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.

Что такое backend-разработка?

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

Например, когда вы вводите запрос на странице поисковика и жмете клавишу Enter , frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или Яндекса , где расположены алгоритмы поиска. Именно там случается все «волшебство». Как только на мониторе появилась информация, которую вы искали, - вновь происходит возвращение в зону frontend .

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

Backend - это процесс объединения сервера с пользователем.

Backend-разработчик может применять любые инструменты, доступные на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java.

Также для backend-разработки используются разные системы управления базами данных:

1. MySQL;
2. PostgreSQL;
3. SQLite;
4. MongoDB.

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

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу: frontend отправляет пользовательскую информацию в backend, там она обрабатывается и возвращается обратно, приняв понятную форму.

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

Существует несколько вариантов взаимодействия frontend и backend:

• HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы;
• Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML) . В этом случае запрос отправляет JavaScript , загруженный в браузер, а ответ приходит в формате XML или JSON;
• Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember ;
• Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

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

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

Начать свой путь во frontend- и backend-разработке можно с 12-месячного курса Skillbox . Он подходит для новичков и программистов с небольшим опытом. За год слушатели курса на практике изучат основные языки программирования и создадут собственное портфолио, которое поможет найти перспективную и хорошо оплачиваемую работу.

Современное IT приобрело своё лицо с момента появления жесткой конкуренции в интернете. Если раньше в приличную студию набирали людей, которые имеют знания в каждой сфере: будь это html и css (создание макета сайта) или php (программирование, создание баз данных). Сейчас же все изменилось. Начинают цениться узконаправленные специалисты. Один занимается только дизайном, другой только программист…

Мир поменялся, конкуренция в интернете настолько большая, что сайтом визиткой теперь никого не удивишь. Люди «гуляют» по сайтам, как по улице. Человека теперь нужно заманивать в нужные разделы, направлять взгляд, заставить сделать что-то.

Когда вы попадаете на сайт, на качественной сделанный сайт, что вы видите в первую очередь? Правильно: красивый дизайн, удобную навигацию (меню), читабельный и уникальный текст, адаптацию под мобильные устройства, в конце концов!

Все это работа фронтенд-специалиста. Его цель сделать максимально удобный дизайн для пользователя. Он не только его рисует, но верстает (собирает) и адаптирует. Продумывается все до последней мелочи. Вот видите социальные сети в низу сайта? Это все неспроста. Это несёт определенную цель, допустим, избежать потери клиента. Он ведь может просто покинуть страницу, ничего не сделав. А так, он лишний раз перейдет в группу, и увидит там то, что задумал фронтенд-специалист и маркетолог.

Все фронтенды придерживаются правил UX дизайна. На английском языке — Users experience, на русском — «опыт пользователя». Если сказать «что это» и подытожить вышесказанное: фрондент-специалист разрабатывает пользовательский интерфейс, не просто красивый дизайн, но и функциональный. Это и есть UX дизайн.

Бекэнд

В отличие от своих коллег по цеху, бекэнд-специалист чаще всего не может похвастаться своей работой так просто. Он не сможет вам показать тривиально переливающийся текст, сделанный с помощью java script, а вы такие: «Вау, круто, оно меняет цвет».

Нет. Бекэнд – это работа для суровых бородатых дядек- хардкорщиков. Они получают истинное наслаждение от классной созданной архитектуры базы данных, от того, что они качественно настроили производительность серверного кода.

Проще говоря, эти ребята работают с серверной частью сайта (с невидимой), с хранилищем данных. Частые случаи, когда такая работа остается слабо оцененной, потому что «на глаз» результата нет. Хотя от этих ребят зависит работа серверного кода, баз данных и безопасность сайта.

Full stack

Напоследок, мы говорили, что раньше было по-другому: молодые программисты хорошо разбирались во всем, не уходя глубоко в одну специализацию. Раньше было важно иметь «масштабные» знания, чтобы понимать все процессы. Но интернет поменялся, а такие ребята до сих пор остаются. Называется это Full stack (фул стэк), когда человек хорошо разбирается и в пользовательской части и в серверной.

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

C уважением, Ваша Суть!

Веб-разработчик

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

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

Фронтенд - все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

HTML (H yperT ext M arkup L anguage) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

CSS (C ascading S tyle S heets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana».

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

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

Для бэкенда вы можете использовать любые инструменты, доступные на вашем сервере (который, по сути, является просто компьютером, настроенным для ответов на сообщения). Это означает, что вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript / Node, bash. Это также означает, что вы можете использовать системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

Структура взаимодействия бэкенда и фронтенда

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

Серверные приложения

В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

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

Связь с использованием AJAX

Другой тип архитектуры использует для связи AJAX (A synchronous J avaS cript and X ML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и (так сложилось исторически) получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.

Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого - REST и SOAP.

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.

Универсальные/изоморфные приложения

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

В этом случае для связи фронтенда с бэкендом приложение использует и AJAX, и обрабатываемый на сервере HTML.

Вне фронтенда и бэкенда

Автономный фронтенд

Веб-приложениям, которые вы собираетесь создавать, подключение к Сети будет требоваться всё меньше и меньше.

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

Легкий бэкенд

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

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

Размытые границы

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

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

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