Фронтенд и бэкенд: о самом главном
Frontend и backend: об иерархии разработки веб-приложения, точках соприкосновения, сходствах и различиях двух столпов веба, а также сферах их ответственности.
Давно остались в прошлом времена, когда мир веба был прост и понятен, а сайты были наборами статических страниц с табличной разметкой. Веб-разработка прошла быстрый, яркий и насыщенный путь развития. Появились новые языки, техники, технологии и парадигмы. Сегодня это одно из самых перспективных и высокооплачиваемых IT-направлений.
Сложная и многоуровневая структура современных веб-приложений требует иерархического разделения процесса их разработки. Исторически этот процесс разделяется на две части: front-end (клиентская) и back-end (серверная). Взглянем поближе на каждую из них, поговорим об их различиях, точках соприкосновения и зонах ответственности
Пользователь вводит адрес в строке поиска, переходит по ссылке с внешнего ресурса или из поисковой системы. Он видит много рекламы. Взору его предстает навязчивое требование регистрации. Ему представлена неудобная навигация и трудночитаемый контент. Страница долго загружается, или не адаптирована для мобильных устройств, или имеет устаревший дизайн. Что делает пользователь? Правильно, покидает сайт.
Задачей фронтенд-разработчика является сделать все возможное, дабы предупредить подобное развитие событий. Сфера его ответственности охватывает создание пользовательского интерфейса, что в свою очередь подразумевает некоторую иерархию. Это дизайн макета, верстка, адаптация. Важной частью разработки веб-приложения является UI/UX дизайн — то, что в наибольшей степени влияет на первое впечатление пользователя.
Но дизайн — это еще не фронтенд. В эпоху современных веб-приложений, в подавляющем большинстве реализующих некоторую бизнес-логику, их поведение не менее важно, чем внешний вид.
В этом контексте невозможно не упомянуть JavaScript. Скриптовый язык изначально предназначался для реализации простого функционала вроде анимации элементов интерфейса, но в умелых и знающих руках он превращается в поразительно мощный инструмент. Создано множество JS-библиотек, расширений, надстроек, многократно увеличивающих сферу возможностей этого языка.
Библиотека jQuery позволяет легко реализовывать эффективное взаимодействие JavaScript и HTML. Язык TypeScript, компилируемый в js-код, дает возможность использования классов, модулей, шаблонов, являясь, таким образом, полноценным объектно-ориентированным языком. Программная платформа Node.js превращает JavaScript из узкоспециализированного языка в язык общего назначения, «выпуская» его из браузерной песочницы. На клиентской стороне реализуется отправка запросов и обработка ответов сервера, парсинг данных, динамическое изменение отображаемого контента.
Бэкенд — это серверная логика веб-приложения. Здесь реализуется работа с хранилищем данных, поэтому человек, занимающийся разработкой серверной логики, должен иметь навыки работы с базами данных, а также опыт использования механизмов ORM. Именно от бэкенд-разработчика зависит производительность серверного кода, его масштабируемость, безопасность и рациональность.
Помимо серверной логики в сферу ответственности бэкендера входит отладка и прототипирование с использованием клиентской части приложения. Это влечет за собой необходимость понимания работы стека протоколов TCP/IP, HTTP, REST/SOAP, принципов взаимодействия браузера с веб-приложением.
Несмотря на то, что сфера фронтенда традиционно считается самой богатой и разнообразной в плане технологий, бэкенд также имеет широкий спектр инструментов разработки. Помимо каноничного PHP, несправедливо многими поругаемого, прочные ниши заняли Python с фреймворком Django, Java и Node.js, Ruby, а также набирающий популярность Go.
Веб-разработка — одна из самых динамично развивающихся сфер в IT. Охватывая широчайший спектр задач, она порождает все новые инструменты и идеологии, усложняясь, притягивая на свою сторону талантливых специалистов и открывая многочисленные перспективы как для себя, так и для своих апологетов.
В арсенале как фронтенда, так и бэкенда имеется множество языков и технологий. Об их актуальности и удобстве ведутся ожесточенные споры. Но истина, как всегда, где-то рядом. На выбор технологии должна влиять не мода, а то, какие задачи разработчик перед собой ставит. Каждый язык и фреймворк уместен тогда, когда он отвечает специфике решаемой проблемы. В этом (и только в этом) случае использование его будет наиболее эффективным.
Фронтенд и бэкенд — вовсе не взаимоисключающие параграфы. Для тех, кто одинаково свободно чувствует себя на обоих поприщах, существует такое понятие, как full stack. “Фулл стэк” -разработчик занимается и клиентской, и серверной частями приложения. Освоение такой профессии — непростое дело. На этому тернистом пути путеводной звездой может послужить онлайн-программа по веб-разработке от Нетологии. В ней в оптимальной пропорции совмещаются теория и практика. В процессе обучения вы освоите два языка программирования, пополните свое портфолио пятью проектами, прокачаете коммуникационные навыки и работу с системой контроля версий git.
И напоследок приятный бонус для наших читателей — промокод proglib со скидкой 7000Р.
Старт программы — 21.07.
Успейте подать заявку
Простыми словами: бэкенд, фронтенд и их взаимодействие
Веб-разработчик и путь его развития в 2018 году
Взаимодействие backend и frontend | OTUS
Понятия фронтенд (frontend, front-end) и бэкенд (backend, back-end) известны каждому. В этой статье поговорим о нюансах взаимодействия фронтенда с бэкендом.
Мы уже рассказывали о том, что frontend- и backend-разработкой часто занимаются разные специалисты. Тем не менее каждому из них желательно знать принципы, по которым работают их коллеги. Здесь нельзя не упомянуть и про Full-stack developer’а (фулстек-разработчика), который знает весь стек технологий, используемых в проекте как в части backend, так и в части frontend. Как говорится, эксперт и мастер на все руки. Впрочем, никто не мешает и вам стать таким)). Но не будем отвлекаться и перейдём к основной теме нашей статьи — взаимодействию между front-end и back-end.
Как взаимодействуют backend и frontend?
Если говорить простым языком, то взаимодействие между backend и frontend происходит по кругу: 1) фронтенд отправляет пользовательскую информацию в бэкенд; 2) там информация обрабатывается; 3) информация возвращается обратно, принимая понятную для пользователя форму.
Варианты взаимодействия backend и frontend:
• HTTP-запрос. Напрямую отправляется на сервер, сервер ищет данные, встраивает их в шаблон, а потом возвращает в виде HTML-страницы. Между получением запроса и ответом на него сервер обычно ищет по сформированному запросу информацию в БД. С помощью HTML определяется, что будет показано, а CSS — как всё будет выглядеть. JS необходим для особых взаимодействий;
• использование инструментария
Сравнение frontend и backend веб-разработки
Языки, платформы и методы могут отличаться. Но есть два аспекта веб-разработки, которые общие для всех задач: front-end и backend. Цель этой статьи заключается в том, чтобы объяснить front-end и back-end разработку с профессиональной точки зрения.
Это то, что пользователь видит, трогает и испытывает. Frontend-приложения – это меньше кода и больше заботы о том, как пользователь будет воспринимать интерфейс.
Если в 2004 году вы пользовались MySpace, то остались довольны опытом взаимодействия. Но как только начали использовать Facebook, наверняка получили лучший опыт. Вы поняли, что можете взаимодействовать с более простым дизайном без мигающих рекламных баннеров, с легкостью находить друзей и т. д.
Технические навыки, необходимые для frontend-разработчиков:
- HTML. Весь код в веб-приложении конвертируется в HTML. Понимание веб-разработчиком HTML-кода аналогично пониманию отвертки плотником;
- CSS. Сам по себе HTML довольно прост. Он реализует основные стили, но для создания хорошего интерфейса разработчики должны иметь опыт работы с CSS. Каскадные таблицы стилей предоставляет цвета, кнопки, подсветку и многое другое, что можно использовать для улучшения веб-страниц. Такие языки, как Sass и LESS, также известные, как прекомпиляторы CSS, они используются для написания более эффективного и управляемого кода CSS;
- JavaScript. Это не только язык backend разработчиков. JavaScript выполняется на компьютере пользователя. Перетаскивание, бесконечная прокрутка и видео, оживающие на веб-странице, могут быть запрограммированы с помощью JavaScript. Этот язык настолько популярен, что целые фреймворки построены исключительно для упрощения создания интерфейсов приложений. Такие фреймворки, как Angular, Ember, React и Backbone, используются для реализации сложных JavaScript-интерфейсов.
Интерфейс приложения может быть самой красивой веб-страницей, но это ничего не стоит, если приложение не работает. Backend разработка отвечает за вычисления, бизнес-логику, взаимодействие с базами данных и производительность. Большая часть кода, необходимая для работы приложения, будет выполняться на сервере. Внутренний код запускается на сервере. Это означает, что разработчики должны понимать не только языки программирования и базы данных, но и архитектуру сервера.
Технические навыки, необходимые веб-разработчику back-end:
- Ruby. Синтаксис Ruby легко читается даже людьми, которые не знают этого языка. Ruby on Rails, который представляет собой фреймворк (построенный на основе Ruby) для создания веб-приложений. Это один из самых популярных инструментов веб-разработки для малого бизнеса и стартапов. Такие компании, как Twitter, Hulu и Github используют Ruby on Rails;
- Python. Популярный веб-фреймворк Django делает Python популярным для создания веб-приложений. Dropbox был построен с использованием Python для выполнения большей части своего серверного кода;
- SQL. Это универсальный язык запросов к базе данных. SQL используется для взаимодействия с базами данных, которые являются частью каждого веб-приложения. Независимо от того, какой язык выбрали для создания веб-приложения, frontend и backend разработку, вы все равно будете использовать SQL для взаимодействия с базой данных.
Данная публикация представляет собой перевод статьи «A Comparison of Frontend and Backend Web Development» , подготовленной дружной командой проекта Интернет-технологии.ру
Как отделить фронтенд разработку от бэкенда? — Хабр Q&A
Доброго времени суток.Ранее, при реализации простеньких проектов у нас было 2 разработчика они же и frontend они и backend они же феи которые настраивали сеть, прокси и т.д.
Код проекта хранился в одном репозитории, соответственно все вьюшки и статика хранились в нем же. Соответственно все разработчики видят весь код. Структура классическая — mvc.
На уровне контроллера решалось рендэрить html или отдавать json. Все логично и понятно. При такой структуре не возникало проблем ни при разработке ни при тестировании, т.к. при внесении изменений в шаблон или вью сразу можно было видеть результат.
В данный момент встала задача реализовать более-менее серьезный проект. Начитавшись интернетов на тему тру разработки вопросов стало больше чем было.
Главный вопрос разделения frontend/backend.
Как реализовать структуру проекта таким образом, что бы frontend разработчик не имел доступа к коду backend сервера.
Допустим, есть 2 репозитория frontend/backend.
С backend все понятно, допустим есть два метода за логином /tasks — который возвращает html и /tasks/list — который возвращает json.
С frontend не очень понятно.
Frontend разработчик собирает шаблоны и вьюшки с помощью грунта, бовера и прочих плюшек у себя на машине. Теперь ему нужно проверить как будет выглядеть /tasks. Мало того, что на его стороне нет шаблонизатора который например накатит данные из сессии (Имя, Фамилия, Аватарка и т.д.) на шаблон так еще и роута до /tasks/list который летит через ajax после прогрузки страницы.
Первый вариант который пришел в голову — писать некий fakeServer для тестирования, который отдавал бы синтетику по роутам аналогичным боевому серверу. Но данный вариант — долгий, «дорогой», и глупый как мне кажется.
Второй вариант который пришел в голову — это сделать фронтенд отдельным http сервером который в свою очередь обращается к backend через api. Не очень кошерный вариант как кажется т.к. часть логики может ухать на фронтенд и весь рендеринг уйдет на этот http сервер соответственно. Но все же хотелось бы услышать мнение по этому поводу.
Третий вариант хочу получить от тех кто уже ел этот кактус.
Спасибо.
Различия между фронтенд и бэкенд разработкой
Фронтенд и бэкенд разработка – два наиболее часто встречающихся термина в программировании. Front-end разработка – так называемый внешний интерфейс, называемый клиентской стороной, иногда рассматривается как веб-дизайн. Вack-end – серверная часть. И хотя это объяснение на первый взгляд кажется простым и понятным, грань между ними часто размыта.
Front-end, внешний интерфейс
Когда мы обсуждаем внешний интерфейс сайта, мы говорим о той его части, с которой может взаимодействовать пользователь. Внешний интерфейс обычно состоит из двух частей: веб-дизайн и веб-разработка интерфейса. По сути, это и есть тот самый UI-дизайн. Веб-дизайнеры обычно не участвуют в реализации дизайна, но могут знать основы HTML и CSS, чтобы более эффективно донести свои идеи до разработчиков.
Front-end это не просто то, как выглядит приложение и насколько удобно расположены элементы управления. Это также организация связей между элементами разных групп пользователей. Ведь если мы возьмем, для примера, сайт в сети Интернет, то помимо простых посетителей есть еще зарегистрированные пользователи, которым доступен расширенный функционал, а также редакторы, модераторы, администраторы и все они работают в одной системе каждый со своими инструментами, которые и разрабатываются frontend-разработчиками.
Стройнов Михаил, веб-разработчки Pear Advert
И сегодня, когда речь идет о фронтенд-разработке, мы подразумеваем специалистов, работающих с Photoshop, Fireworks, HTML, CSS, JavaScript или jQuery. Все, что вы видите при взаимодействии с сайтом – это сочетание HTML, CSS и JavaScript, которые контролируются браузером вашего компьютера. Это и шрифты, и раскрывающиеся меню, и кнопки, и свайпы, и ползунки, и контактные формы и т. д.
Фронтенд-программирование
Чтобы быть разработчиком UI-дизайна, вам не нужны навыки внутренней разработки. Сайты, созданные разработчиками внешних интерфейсов, не будут взаимодействовать с информацией, хранящейся в базе данных, для обеспечения их работоспособности. Содержимое будет фиксированным: большие фрагменты новых данных не будут загружаться постоянно. Фронтенд-программирование включает в себя HTML, CSS и Javascript. Хотя jQuery выходит из моды (современные браузеры теперь могут выполнять ту же работу, но гораздо быстрее, чем jQuery), многие проекты все еще используют библиотеку JavaScript.
Фронтенд-разработчик
Очень часто фронтенд-разработчики называют себя просто веб-дизайнерами. Они фокусируются на пользовательском интерфейсе и пользовательском опыте, визуальных аспектах сайта. Но чтобы все это стало реальностью, нужны технологии, чтобы это произошло. Настало время бэкенда.
Back-End
Бэкэнд-разработка относится к серверной части разработки, где все внимание сосредоточено на том, как работает сайт. Бэкэнд-разработчики работают с безопасностью сайта, структурой и управлением контентов, внесением обновлений и изменений, мониторингом функциональности сайта. Чаще всего бэкенд-разработчиками называют программистами.
Несмотря на то, что frontend и backend как 2 стороны одной монеты, в крупных проектах команда, занимающаяся разработкой frontend-части может совершенно не знать, каким образом организована backend-часть, т.к. очень часто взаимодействие их строится на использовании API.
Стройнов Михаил, веб-разработчки Pear Advert
Серверная часть обычно состоит из трех частей: сервер, приложение и база данных. Если вы бронируете рейс или покупаете концертные билеты, вы обычно открываете веб-сайт и взаимодействуете с веб-интерфейсом. После ввода этой информации приложение сохраняет ее в базе данных, которая была создана на сервере. Поэтому при повторном входе в приложение для печати билетов вся информация остается в вашей учетной записи.
Бэкенд-программирование
Бэкенд-технологии обычно используют PHP, Ruby, Python и т. д. Эти языки используются для создания динамических сайтов, которые хранят информацию в базе данных, так как контент на сайте постоянно меняется и обновляется. Также используются фреймворки Ruby on Rails, Cake PHP и Code Igniter, которые делают разработку быстрее и проще.
Многие веб-профессионалы, которые только начинают работать, слышали о WordPress. Это хороший пример совместной работы внешнего и внутреннего интерфейсов, поскольку WordPress – это платформа с открытым исходным кодом, построенная на PHP, которую необходимо установить на свой сервер с базой данных. Затем дизайнеры настраивают внешний вид и функциональность сайтов WordPress, используя CSS, jQuery и JavaScript.
Заключение
Различия между фронтенд-и бэкенд разработкой весьма ощутимы. С другой стороны, иногда эта грань стирается, и невозможно понять, где заканчивается front-end и начинается back-End. Надеемся, наша небольшая статья помогла вам понять различия между этими взаимосвязанными сторонами веб-разработки.