Фронтэнд это: что это такое и как они взаимодействуют

что это такое и как они взаимодействуют

Рассказывает Хьюго Ди Францеско, веб-разработчик

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

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

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

HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 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 (Asynchronous JavaScript and XML). Это означает, что 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.

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

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

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

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

Перевод статьи «In simple terms: backend code, frontend code and how they interact»

Что такое backend и frontend?

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

Что такое frontend?

Фронтендом (англ. front-end) называют клиентскую сторону пользовательского интерфейса по отношению к программно-аппаратной части сервиса.

Говоря простым языком, frontend — это разработка функциональности и пользовательского интерфейса, работающих на клиентской стороне приложения или веб-сайта. Сюда относят всё, что пользователь видит, открывая веб-страницу. Для создания удобного и востребованного продукта фронтенд-разработчики сотрудничают с программистами, дизайнерами, UX-аналитиками.

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

Вот, взгляните:

К frontend-разработке относят:
• HTML — язык разметки документов, посредством которого формируют структуру веб-страницы: заголовки, списки, абзацы и т. п.;
• CSS — язык для стилизации внешнего вида документа, его описания. Благодаря CSS-коду браузер понимает, как отображать элементы. С помощью CSS задаются цвета и параметры шрифтов, определяется расположение блоков веб-сайта и т. п. Также он даёт возможность выводить один и тот же документ в нескольких стилях, например, для печати и т. д.;
• JavaScript — язык, в буквальном смысле оживляющий веб-страницы. Он обеспечивает реагирование интерфейса на действия пользователя, обрабатывает клики мышкой, нажатия клавиш, перемещения курсора. Также посылает запросы на сервер, загружает данные, позволяет вводить сообщения и много чего ещё.

Что такое backend?

Бэкенд (англ. back-end) — это программно-аппаратная часть сервиса. Это набор средств, с помощью которых происходит реализация логики веб-сайта. Это то, что скрыто от наших глаз, т. е. происходит вне компьютера и браузера.

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

Также можно сказать, что backend — это процесс объединения пользователя с сервером.

Что касается backend-разработчика, то он использует любые инструменты, которые доступны на его сервере. На практике программисты применяют любой из универсальных языков: PHP, Ruby, Python, Java. Кроме того, при backend-разработке задействуются СУБД (MySQL, PostgreSQL, SQLite, MongoDB и пр.).

В зависимости от особенностей продукта меняются и обязанности backend-разработчика.

И что в итоге?

И бэкенд, и фронтенд — это варианты архитектуры ПО. Сами термины возникли в программной инженерии по причине появления принципа разделения ответственности между внутренней реализацией и внешним представлением. В результате фронтенд-разработчик может не знать особенностей работы сервера, а бэкенд-программисту не обязательно вникать в реализацию фронтенда.

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

Ну и, разумеется, последняя картинка, которая позволит вам окончательно понять разницу между frontend и backend. И улыбнуться при этом))

Кстати, если хотите узнать о том, как происходит взаимодействие между фронтендом и бэкендом, вам сюда.

Что такое бэкенд и фронтенд, а также в чем между ними разница

Что же такое фронтенд (frontend) и бэкенд (backend)-разработка? Скорее всего, вы уже могли слышать данные термины от знакомых программистов, но до сих не знаете, что они означают. Предлагаем вам совместно разобраться что должен знать frontend-разработчик, какими компетенциями должен обладать backend и чем они отличаются друг от друга.

Frontend-разработчик — кто это

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

Frontend — что же это означает? Простыми словами, фронтенд (frontend) — это, та самая составляющая программирования, которую считывает система браузера, а также демонстрирует (запускает) на странице для просмотра пользователя. Другими словами, это CSS, HTML и JavaScript.

CSS (Cascading Style Sheets) дает команду браузеру, каким образом отражать все элементы, к примеру: диаметр отступов между блоками, цвет и размер шрифта или опять же блоков.

HTML (HyperText Markup Language) сигнализирует системе браузера о том, каким должно быть содержимое страницы в целом, то есть, в HTML вы создаете заголовки, параграфы, списки, элементы списков или пишите текст.

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

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

Теперь вы знаете, что такое фронтенд, давайте разберемся с тем, что такое бэкенд.

Backend-разработчик — кто это

Бэкенд (backend) — это, та часть работ, которая происходит за пределами досягаемости браузера, то есть на сервере.

Сервер — это специальный компьютер, обычно, с наиболее большими ресурсами в отношении производительности, для реализации соответствующих задач. Он выполняет функции по хранению сведений, DNS (преобразование «буквенных» адресов в сети в IP), DHCP (динамическое распределение адресов), и так далее. В общем, в соответствии с архитектурой «клиент-сервер», сервер по запросу клиента предоставляет ему свои ресурсы.

Для бэкенда программисты могут пользоваться всеми средствами, которые доступны на сервере. Например, любой многофункциональный язык программирования:

• Java;
• JavaScript;
• Python;
• Visual Basic;
• Swift;
• и так далее.

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

• Cassandra;
• Redis;
• PostgreSQL;
• MongoDB;
• и так далее.

Backend-разработчик — кто же это простыми словами? Бэкенд-разработчик — это программист, занимающийся внутренней, вычислительной разработкой ресурсов, к тому же прочего программного обеспечения или баз данных. Иными словами, помимо web-решений, backend необходим для десктопных версий и разработки мобильных приложений, поскольку backend — это, работы, имеющие непосредственное отношение к программно-адаптивной составляющей сервиса.

Мы кратко разобрали что это такое frontend и backend. Теперь вы знаете, в чем между ними разница, давайте рассмотрим, как же связаны сферы фронтенд и бэкенд.

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

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

Взаимодействие между frontend и backend

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

Здесь HTTP-запросы передаются сразу-же на сервер самого приложения, а сервер, в свою очередь, выдает ответ в виде HTML-страницы. В процессе получения запроса и выдачи ответа, сервер производит поиск сведений по полученному запросу в базе данных и генерирует ее в шаблон (ERB, Blade, EJS, Handlebars).

После того, как страница загружена в браузер:

1. С помощью HTML вы даете команду, что именно должно быть отображено на этой странице.
2. Через CSS вы информируете браузер каким образом это будет отображено.
3. JavaScript является неким языком сценариев в интернете, с помощью которого вы сможете настраивать структуру взаимодействия между браузером, HTML и CSS.

AJAX и аналогичные решения

Иной вид архитектуры применяет для коммуникации AJAX (Asynchronous JavaScript and XML). То есть JavaScript, загруженный в браузер, передает HTTP-запрос (XHR, XML HTTP Request) внутри страницы и в результате получает XML-ответ. Помимо этого, для ответов можно применять формат JSON. Более подробно про систему безопасности передачи сведений вы можете прочитать в статье о том, что такое HTTPS-протокол.

Другими словами, ваш сервер обязан иметь некую финальную ступень, которая будет отвечать на получаемые запросы через JSON или с помощью XML-кода. Существует 2 основополагающих протокола, которые используют для данной задачи:

1. REST.
2. SOAP.

Также AJAX дает вам возможность производить загрузку сведений при этом не обновляя страницу. Чаще всего, это требуется в таких программных платформах, как Angular и Ember. В последствии разработки, подобные приложения загружаются в браузер и все дальнейшие рендеринги реализуются на стороне пользователя, то есть в браузере. В этом случае, frontend-разработчик комуницируют с backend-разработчиком через HTTP, применяя JSON или XML-код.

Также существуют библиотеки и фреймворки, такие как: React и Ember, которые дают возможность реализовывать приложения как на сервере, так и «в клиенте». В данном случае для коммуникации frontend с backend, в приложении используется AJAX, обрабатываемый на сервере HTML.

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

Пройти опрос
Ответить

Кто такой фронтенд

Есть бэкенд — это тот, кто про­грам­ми­ру­ет сер­вер­ную часть при­ло­же­ния. И есть фрон­тенд. Вот зачем он нужен, в чём его сила и сколь­ко мож­но тут заработать.

Фронт? Бэк?

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

А отку­да эти дан­ные при­ле­те­ли? Кто ска­зал сай­ту выве­сти вам имен­но этот текст и имен­но эту картинку?

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

Фронтенд-разработчик пишет тот код, кото­рый будет испол­нять­ся на пере­до­вой, то есть на клиенте.

Как в вакансии

Фронтенд-разработчик дела­ет следующее:

• соби­ра­ет сайт по маке­ту дизайнера;
• исполь­зу­ет для это­го HTML, CSS, JavaScript и несколь­ко дру­гих языков;
• пони­ма­ет про­цес­сы, кото­рые про­ис­хо­дят во вре­мя созда­ния сайта;
• зна­ет, как опуб­ли­ко­вать сайт в Сети так, что­бы он выгля­дел оди­на­ко­во на всех устройствах;
• уме­ет рабо­тать с Git или дру­гим инстру­мен­том кон­тро­ля версий;
• исполь­зу­ет Webpack для сбор­ки про­ек­та и вооб­ще опе­ри­ру­ет препроцессорами.

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

Часто фрон­тен­дов пута­ют с вер­сталь­щи­ка­ми, но на самом деле вер­сталь­щик — это спе­ци­а­лист узко­го про­фи­ля (вёрст­ка по маке­ту). А фронт кро­ме это­го может и слай­дер при­кру­тить, и шаб­лон в CMS попра­вить, и зако­дить нестан­дарт­ное пове­де­ние кар­тин­ки при нажа­тии, и напи­сать скрипт для про­вер­ки пра­виль­но­сти запол­не­ния дан­ных на сайте.

Фронтенд — это повар

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

Начало работы

Когда пова­ру дают новый рецепт, он гово­рит: «Хм, мне пона­до­бит­ся лук, мор­ковь, кар­то­фель и пара тома­тов. А ещё глу­бо­кая кастрю­ля, вен­чик для взби­ва­ния и ско­во­ро­да с тол­стым дном».

Фрон­тенд берёт макет со сло­ва­ми: «Так, это всё, конеч­но, хоро­шо, но кро­ме HTML и CSS тут нуж­но будет исполь­зо­вать Ajax для отправ­ки форм и JavaScript, кото­рый помо­жет отсле­дить нажа­тие на кар­тин­ку. Зна­чит, под­клю­чим вот эту и эту библиотеки».

Использование технологий

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

Фронтенд-разработчик тоже не пишет весь код с нуля. Если он пони­ма­ет, что какую-то часть логи­ки будет слож­но реа­ли­зо­вать на стра­ни­це, то может отпра­вить её на сер­вер, что­бы все вычис­ле­ния были там. В ито­ге фрон­тенд попро­сит ребят на сер­ве­ре сде­лать такую-то функ­цию, кото­рая будет обра­ба­ты­вать дан­ные со стра­ни­цы — точ­но так же, как повар зака­зы­ва­ет гото­вые корзинки.

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

Рабочие инструменты

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

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

Глав­ное в рабо­те фрон­тен­да — пони­мать, как устро­е­ны и как рабо­та­ют тех­но­ло­гии, что­бы при­ме­нять их в проекте.

Тонкости работы

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

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

Что­бы так уметь, нуж­но набрать­ся опы­та на десят­ках дру­гих блюд или про­ек­тов. Пока тако­го уме­ния нет — про­сто исполь­зуй­те рабо­чие инстру­мен­ты и учи­тесь. Со вре­ме­нем всё появится.

Что дальше

Даль­ше всё оче­вид­но — нуж­но про­бо­вать. Спе­ци­аль­но для это­го в Яндекс.Практикуме дают 20 бес­плат­ных часов обу­че­ния фронтенд-разработке. Если понра­вит­ся — про­дол­жи­те и осво­и­те новую профессию.

Front-end разработка — wiki студи Клондайк

• Фронтенд (англ. front-end) — клиентская сторона пользовательского интерфейса. Этро все, что видит пользователь открывая страницу.
• Бэкенд (англ. back-end) — программно-аппаратная часть.

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

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

Современный front-end developer должен легко владеть html5, css3, JavaScript (и как минимум JQuery). У каждого front-end специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными framework-ами, такими как: Twitter, Bootstrap, Foundation 3, Compass.

Что необходимо знать frond-end разработчику:

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

Вот основные базовые навыки:

HTML и CSS

Для простого понимания HTML — это тело человека, а CSS — это одежда

В том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills, HTML5 API




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

• Atom
• Visual Studio Code
• Brackets
• Sublime Text
• Notepad++
• Netbeans

IDE

• WebStorm
• Zend Studio
• Aptana
• Komodo IDE

HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

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




CSS-препроцессоры




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

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

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




Методологии именования:

• БЭМ
• CSS Modules
• SMACSS
• OOCSS

Популярные CSS-препроцессоры

• Less — использует JavaScript или Node.js
• Sass (SCSS) — компилируется с помощью Ruby
• Stylus

БЫЛО:

<div>
        <div>
               <div></div>
       </div>
</div>

СТАЛО

.\@sidebar.\$main { ... }
.\@sidebar.\$wrapper { ... }
.\@sidebar.\$wrapper.color\:red { ... }

HTML-препроцессоры

По аналогии с CSS-препроцессорами аналогичные технологии для HTML с целью упростить написание кода и скоратить время

JavaScript

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

JS-framework’и

JS-framework’и — это инструменты для построения динамических веб/мобильных/настольных приложений на языке Javascript. Как и к любым другим инструментам, разработчики прибегают к использованию js-фреймворков там, где невозможно/очень сложно/очень долго выполнять задачу обычными средствами.

Фреймворки для фронтенд-разработки

• React.js
• Vue.js
• Angular
• jQuery
• Node.js

Фреймворки для работы с данными

Сборщики Gulp, WebPack

Менеджеры задач Gulp и Grunt, работающие через NPM — Node Package Manager. Также полезно попробовать сборщик модулей Webpack.

Система управления версиями файлов (Git, GitHub, CVS и т. д.)

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

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

Если вышеописанный вариант не подходит по каким-либо причинам, можно использовать инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают необходимый код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Если же код пишется на чистом CSS — то есть не используется препроцессор вроде Sass или Stylus — RequireJS также поможет организовать необходимые CSS файлы по модульному принципу. Просто необходимо использовать @import в основном файле, чтобы загрузить зависимости для разработки и затем запустить средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.

Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались. Если научиться ими правильно пользоваться, то они могут существенно улучшить опыт разработки.
Стоит выбрать один браузер, чьи инструменты разработчика будут использоваться на постоянной основе, но не надо отказываться полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости USB-подключения, а также возможность сохранять и использовать пользовательские цветовые палитры.

Командная строка

Есть несколько задач, которые необходимо выполнять через командную строку не задумываясь:

1. ssh для подключения к другой машине или серверу
2. scp для копирования файлов на другую машину или сервер
3. ack или grep для поиска файлов в проекте по строке или шаблону
4. find для обнаружения файлов, чьи названия совпадают с данным шаблоном
5. git для выполнения хотя бы базовых действий вроде add, commit, status и pull
6. brew для использования Homebrew для установки пакетов
7. npm для установки пакетов Node
8. gem для установки пакетов Ruby

Тестирование

Написания модульного, свободно сопряжённого кода состоит в том, что такой код намного легче тестировать, а с инструментами вроде Grunt, подготовка проекта со встроенными тестами вообще стала проще простого. В Grunt интегрирован QUnit, однако существует много фреймворков для тестирования, из которых можно выбрать те, что по душе.

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

Инструменты

• Mocha
• Jasmine
• QUnit
• Jest
• Ava

Автоматизация процесса

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

Видео нашего учебного центра

Основы HTML для начинающих

CSS для чайников

Основы JavaScript для начинающих

Дружный коллектив сотрудников-экспертов

Просторный и светлый офис в центре Москвы

Зарабатывайте больше вместе с компанией

Фронтенд и бэкенд: какая разница?

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

♥ ПО ТЕМЕ: Основы программирования: 15 лучших бесплатных браузерных игр для обучения программированию.

Что такое «фронтенд» и «бэкенд»?

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

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

Бэкенд (back end) – это «подводная часть айсберга», сторона, работающая не в браузере, а на удаленном сервере (серверная часть).

Фактически, это компьютер, который обрабатывает посланные ему запросы и посылает обратно некую информацию. Для этого используется какой-либо из универсальных языков программирования: Python, Ruby, Java, PHP, C#, Swift и т.д., а также системы управления базами данных MySQL, PostgreSQL и т.д. Спектр инструментов тут тоже довольно широк. Бэкенд-разработчик отвечает за производительность серверного кода, его масштабируемость, рациональность и безопасность. Для этого необходимо понимать сетевые протоколы и принципы взаимодействия браузера с веб-приложением.

♥ ПО ТЕМЕ: Human Resource Machine для iPhone и iPad – увлекательный симулятор программирования.

Что такое фулстек?

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

Существует несколько вариантов взаимодействия бэкенда и фронтенда. Это могут быть серверные приложения, в которых HTTP-запросы идут напрямую на сервер, а тот отвечает HTML страницей. Возможна связь с использованием AJAX, в которой запрос генерируется внутри страницы Javascript, а в ответ приходит информация в формате XML или JSON. Клиентские или одностраничные приложения дают возможность с помощью AJAX загружать данные без обновления страницы с помощью специальных фреймворков.

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

Смотрите также:

25 апреля 2021
Метки: iFaq.

Frontend и backend: что это?

Все слышали в программировании про эти понятия. Простыми словами я расскажу о Frontend и Backend:  что это такое? Давайте быстро пробежимся.

Frontend и backend, чем они отличаются?

Есть допустим стартовая страница Яндекса (рис.1). Мы видим на ней дизайн, видим страницу.

Рис.1 Страница Яндекса ( дизайн)

Если нажать код этой страницы, мы увидим код этой страницы в браузере (рис.2).

Рис.2 Frontend

Это и есть frontend – это код, который скачивается в браузере, и который я вижу.В этом коде описаны все элементы, цвет стрелочки, цвет текста, верстка, что здесь такой отступ. То есть все взаимодействия внутри браузера – это frontend.

Backend – это огромные сервера, которые располагаются в самом Яндексе (рис.3).

Рис.3 Backend

Кстати, рекомендую посмотреть прямо сейчас:

Frontend или Backend, что выбрать?

Для ответа на этот вопрос важно понять, чем отличается frontend от backend. Давайте на примере разберем.

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

 Поэтому frontend —  это:

• html
• css
•  java script
• frameworks
• Jquery, Angular, Backbone, Closure, Extj

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

Backend:

1. Php
2. Rails
3. Ruby
4. Python
5. C#
6. Java
7. .NET
8. SQL
9. Node.js
10. Django
11. Xamarin
12. Swift

Frontend и Backend в работе веб-дизайнера

Дизайнеру важно знать Frontend и иметь представление о работе backend. Нужно просто понимать как это работает, какие данные мы понимаем. И лучше держать под боком программиста, который в backend соображает.

Определение внешнего интерфейса

Домашняя страница: Условия использования программного обеспечения: Определение внешнего интерфейса

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

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

Примеры элементов внешнего интерфейса:

1. Приложение или макет страницы
2. графика
3. элементы аудио и видео
4. текстовое содержимое
5. элементов пользовательского интерфейса (кнопки, ссылки, панели инструментов, панели навигации и т. Д.)
6. области ввода (диалоговые окна), поля форм, текстовые области и т. Д.)
7. пользовательский поток (как один интерфейс ведет к другому)
8. пользовательские настройки, темы и настройки

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

ПРИМЕЧАНИЕ: Frontend также может быть написано как «внешний интерфейс» (как существительное) или «внешний интерфейс» (как прилагательное). Для простоты закрытое составное слово «интерфейс» стало приемлемым термином для обоих.

Обновлено: 18 апреля 2020 г.

https://techterms.com/definition/frontend

TechTerms — Компьютерный словарь технических терминов

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

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

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

Подписаться

Frontend vs Backend: в чем разница?

«Фронтенд» и «бэкэнд» — два наиболее часто используемых термина в компьютерной индустрии; в каком-то смысле они стали модными словечками. Они определяют тип работы, которую вы выполняете как разработчик программного обеспечения, используемые вами технологии и размер оплаты.

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

Визуализация сайта

Чтобы начать это путешествие, нам нужно понять концепцию рендеринга сайта. С точки зрения непрофессионала, рендеринг сайта означает создание или рендеринг вывода HTML. HTML — это язык разметки, который веб-разработчики используют для создания веб-страниц. Говорят, что рендеринг сайта может происходить как на стороне сервера, так и на стороне клиента, так что это значит? Стоит отметить, что интерфейс и клиентская часть — синонимы. То же самое верно для серверной части и серверной части.

Рендеринг на стороне сервера (бэкэнд)

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

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

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

Рендеринг на стороне клиента (интерфейс)

В более современные дни появилась новая форма рендеринга сайта, называемая рендерингом на стороне клиента или фронтенд-разработкой.

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

Рендеринг на стороне клиента стал популярным с появлением библиотек JavaScript, таких как Angular, React и Vue.

Изоморфная визуализация

Также называемый универсальным рендерингом, изоморфный рендеринг — это новый метод, используемый в современной веб-разработке.Идея изоморфного рендеринга состоит в том, чтобы визуализировать веб-приложение, разработанное с помощью фреймворка JavaScript, такого как Angular, React или View, на стороне сервера при первой загрузке страницы и на стороне клиента после.

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

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

Что такое фронтенд-разработка?

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

Технологии, используемые для фронтенд-разработки

Хотя существует множество различных типов технологий и стеков, большинство интерфейсных веб-разработчиков используют HTML, CSS и JavaScript, фактические строительные блоки Интернета, а также клиентские фреймворки, такие как Angular, React, Stencil и Vue.

Однако не все происходит во внешнем интерфейсе. Отрисованные на стороне клиента приложения по-прежнему полагаются на службы и API-интерфейсы, которые работают на внутренних удаленных серверах или в облаке.

Какие бывают клиентские задания?

• Веб-дизайнер: Веб-дизайнер, как вы уже догадались, создает веб-сайты. Однако название должности веб-дизайнера довольно широкое. Веб-дизайнером может быть тот, кто создает сайты в такой программе, как Photoshop или Fireworks, и никогда не будет касаться кода.Но в другом месте веб-дизайнер мог бы делать все дизайнерские решения в Photoshop, а затем отвечать за создание всего HTML и CSS (а иногда даже JavaScript), чтобы сопровождать его.

• Дизайнер пользовательского интерфейса (UI): Это в основном визуальный дизайнер и обычно ориентирован на дизайн. Обычно они не участвуют в реализации дизайна, но могут знать легкий HTML и CSS, чтобы более эффективно передавать свои идеи интерфейсным разработчикам.

• Дизайнеры пользовательского интерфейса (UX): UX-дизайнеры работают во внешнем интерфейсе, изучая и исследуя, как люди используют сайты. Затем они вносят изменения через множество тестов.

• Front-end разработчик: Также называемый front-end дизайнером, он может создавать сайт без какой-либо внутренней разработки. Сайт, который они создали бы без веб-разработчика или с использованием серверной части, является статическим сайтом. Статический сайт — это что-то вроде сайта для ресторана или парикмахерской.Не требует хранения какой-либо информации в базе данных. Страницы почти всегда останутся прежними, если только не пришло время изменить дизайн. От интерфейсного разработчика может потребоваться понимание процесса тестирования, а также хорошее знание HTML, CSS и JavaScript. Этот человек может иметь или не иметь опыта создания дизайна в дизайн-программе. Другая версия этого названия — интерфейсный инженер. Люди, которые работают с определенными интерфейсными языками, например, разработчик JavaScript, также считаются интерфейсными разработчиками.

Что такое внутренняя разработка?

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

Технологии, используемые для внутренней разработки

Когда внутренние разработчики создают приложения, которые отрисовываются на стороне сервера, они используют те же строительные блоки, что и внешние разработчики: HTML, CSS и JavaScript.

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

Известные стеки включают .NET, MEAN и LAMP, но их гораздо больше, и каждый включает язык программирования по выбору, такой как C #, JavaScript, Java, Go, Python или PHP.

Что такое разработка полного стека?

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

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

Сводка

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

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

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

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

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

Что такое передняя и задняя части? Определение от WhatIs.com

От

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

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

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

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

Назначение передней и задней части

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

Внешний интерфейс и серверная часть также могут использоваться для описания ситуаций, когда клиент имеет доступ к одному представлению, а сотрудники — к другому. Компоненты переднего плана доступны для клиентов, а права на серверную часть предназначены исключительно для пользователей, прошедших проверку подлинности.

Примеры передней и задней части

Понятия и компоненты, ориентированные на внешний интерфейс системы, включают:

• Языки дизайна и разметки, такие как HTML, CSS и JavaScript.
• Поисковая оптимизация (SEO).
• Тестирование удобства и доступности.
• Инструменты графического дизайна и редактирования изображений.
• Производительность в Интернете и совместимость с браузерами.

И наоборот, те, которые сосредоточены на серверной части системы, включают:

• Языки программирования и сценариев, такие как PHP, Python и C #.
• Автоматизированные среды тестирования.
• Масштабируемость и доступность сети.
• Управление базами данных и преобразование данных.
• Практика кибербезопасности и резервного копирования данных.

Последнее обновление: май 2019 г.

Продолжить чтение о передней и задней части

Frontend vs Backend

# В двух словах

На самом деле это не просто веб-приложения — при создании любого приложения вы будете иметь дело с частью этого приложения frontend и частью backend .

Но что это за детали? А зачем они нам?

Вкратце, это очень просто: интерфейс — это то, что видит пользователь (например, код HTML + CSS + JS, работающий в браузере), бэкэнд отвечает за тяжелую работу за кулисами .

Конечно, фронтенд и бэкэнд «разговаривают друг с другом» . Запросы Http отправляются из интерфейса в серверную часть для передачи данных, введенных пользователем, или получения данных из базы данных.Подробнее об этом через секунду!

Важно: бэкэнд называется так потому, что работает не на устройстве пользователя (т.е. НЕ на мобильном телефоне или компьютере пользователя), а на каком-то удаленном сервере . Это означает: на сервере, принадлежащем вам, разработчику / поставщику веб-приложения.

Таким образом, мы могли бы также перевести интерфейс-бэкэнд на клиент-сервер .

TL; DR;

Фронтенд — это то, что видит пользователь, бэкэнд — это тяжелая работа и хранение данных на сервере.

Вы можете узнать все о бэкэнд-разработке в нашем курсе Node.js, фронтенд-разработка состоит из нескольких частей и языков программирования.
Взгляните на наши CSS, JavaScript, а затем, в качестве следующего шага после курсов JavaScript, Angular, React и Vue.js!

Все эти курсы включены в нашу профессиональную подписку по цене от всего за 19 долларов в месяц .

# Что происходит Где? И почему?

У нас есть эти два конца, потому что ни один из них не может делать все самостоятельно.

Рассмотрим простой сайт онлайн-покупок, такой как Amazon.

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

Но как насчет всех данных, с которыми вы взаимодействуете? А как насчет продуктов, которые вы просматриваете?

Эти данные хранятся в вашем браузере или на вашем компьютере?

Это не так!

Конечно, эти данные предоставляются Amazon, и они должны быть одинаковыми для всех пользователей.Кроме того, Amazon, конечно же, должна иметь возможность управлять этими данными и удалять или добавлять (или обновлять) продукты по мере необходимости.

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

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

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

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

Конечно, как упоминалось ранее, в связке с бэкэндом.

Фронтенд и бэкэнд взаимодействуют друг с другом — через запросы Http.

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

# Дело не только в хранении данных!

К настоящему времени вы могли подумать, что «бэкэнд» — это просто синоним «базы данных».

Это не так!

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

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

Вот несколько примеров для бэкэнд-логики:

• Длительные операции , которые замедляют UI
• Взаимодействие с файловой системой — доступ к ней не предоставляется в браузере, например
• Сервер — проверка ввода на стороне — поскольку код на стороне клиента можно просматривать и редактировать
• По той же причине: любой код, который взаимодействует с базой данных или использует учетные данные / ключи , которые не должны быть открыты посетителям веб-сайта (также см. статья и видео)

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

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

# Чему следует учиться?

Frontend-разработка состоит из нескольких частей и языков программирования.

Для Интернета вы создаете веб-сайты, которые загружаются и отображаются в браузере с помощью:

Это основные языки, которые вам нужны.

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

На самом деле вы также собираетесь выбрать фреймворк внешнего интерфейса — популярные варианты:

Если вы создаете мобильное приложение , вы собираетесь использовать либо Java, либо Kotlin для Android, либо Swift или ObjectiveC для разработки под iOS.

OR просто исследуйте альтернативы, такие как Flutter, React Native или Ionic (с Angular, с React), чтобы создавать настоящие мобильные приложения для обеих платформ с помощью всего одного языка программирования и одной базы кода!

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

Популярные варианты:

# Существуют ли веб-приложения с одним концом?

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

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

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

Подумайте о страницах портфолио, на которых вы просто описываете свои услуги (например,грамм. вы работаете консультантом). Или блоги, где вы просто пишете все статьи, используя только HTML + CSS + JS. В этом случае вам не нужна база данных.

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

Что такое только для бэкэнда ?

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

Это правда, но не все приложения, которые вы создаете, предназначены для использования конечными пользователями.

Возможно, вы создаете простой (REST) ​​API , который может использоваться другими разработчиками / предприятиями.

Возьмем для примера API Google Places: он позволяет преобразовывать адреса в координаты и наоборот (и многое другое).

Этот API предназначен для обмена данными.

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

# А как насчет полного стека?

Если вы занимаетесь веб-разработкой, возможно, вы слышали и о «полной» разработке.

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

Это, конечно, может быть большим преимуществом для фрилансера или небольшого стартапа / компании!

Front End Development vs Back End Development: Где

Лорен Стюарт

Последнее обновление 12 августа 2020 г.

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

Совместите с учебными курсами , которые обучают программированию переднего и заднего плана!

Front End Web Development

Что такое Front End разработка?

Front end разработка в основном сосредоточена на том, что некоторые могут назвать «клиентской стороной» разработки. Разработчики внешнего интерфейса будут заниматься анализом кода, дизайном и отладкой приложений, а также обеспечивать беспроблемный пользовательский интерфейс. Вы управляете тем, что люди впервые видят в своем браузере. Как фронтенд-разработчик, вы несете ответственность за внешний вид и дизайн сайта.

Языки программирования переднего плана

Языки внешнего интерфейса включают HTML, CSS и Javascript. Хотя JQuery выходит из моды (современные браузеры теперь могут выполнять ту же работу, но гораздо быстрее, чем jQuery), многие устаревшие проекты по-прежнему используют библиотеку JavaScript, поэтому не удивляйтесь, увидев ее в учебной программе учебного лагеря. Вы также узнаете много нового об адаптивном дизайне, а также о типографике, макете, системе сеток и теории цвета. Предвидя типы проектов, над которыми вы будете работать как фронтенд-разработчик, подумайте о создании и перепроектировании веб-сайтов.Чтобы быть фронтенд-разработчиком (иногда даже называемым Javascript-разработчиком), вам не нужны навыки бэкэнд-разработки. Сайты, созданные интерфейсными разработчиками, не будут взаимодействовать с информацией, хранящейся в базе данных, чтобы быть функциональными. Контент будет «фиксированным», что означает, что большие фрагменты новых данных не будут загружаться постоянно. У владельцев малого бизнеса и ресторанов обычно есть отличные примеры статичных сайтов.

Вакансии Front End Programming

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

• Front End Developer
• Web Designer — еще одно распространенное название.
• UI / UX-дизайнеры — это фронтенд-разработчики, которые сосредоточены на пользовательском интерфейсе и пользовательском опыте соответственно.Дизайнеры пользовательского интерфейса оттачивают визуальные аспекты дизайна сайта, в то время как дизайнеры UX проводят тестирование нескольких пользователей, чтобы убедиться, что сайт хорошо работает с предпочтительными пользователями. (Ознакомьтесь с опытом UX-дизайна одного выпускника GA.)

Согласно PayScale, средняя начальная зарплата фронтенд-разработчиков по стране составляет около 67 тысяч долларов. Заработная плата варьируется от 42 до 108 тысяч долларов в зависимости от опыта, местоположения и отрасли. В Нью-Йорке стартовая зарплата составляет около 78 тысяч долларов с приблизительным диапазоном до 115 тысяч долларов.Не слишком потрепанный.

Курсы внешнего программирования

Думаете о разработке интерфейса для карьеры? Обратите внимание на эти школы (в нашем каталоге их более 100, которые преподают интерфейсную разработку!), У которых есть отличные отзывы об их курсах разработки интерфейса:

Серверная часть разработки

Что такое серверная разработка?

Back end Development относится к серверной части разработки, где вы в первую очередь сосредотачиваетесь на том, как работает сайт. Внесение обновлений и изменений в дополнение к функциям мониторинга сайта будет вашей основной обязанностью. Этот тип веб-разработки обычно состоит из трех частей: сервера, приложения и базы данных. Код, написанный внутренними разработчиками, — это то, что передает информацию базы данных браузеру. Все, что вы не можете легко увидеть глазом, например базы данных и серверы, — это работа внутреннего разработчика.Позиции back-end разработчиков часто называют программистами или веб-разработчиками.

Языки программирования серверной части

Многие серверные разработчики знают языки интерфейса, такие как HTML и CSS, но им необходимо использовать такие языки, как Java, PHP, Ruby on Rails, Python и .Net, чтобы выполнять заднюю работу. Back-end-разработчики больше всего сосредоточены на быстродействии и быстродействии сайта. Эти языки используются для создания динамических сайтов, которые отличаются от статических сайтов тем, что на этих типах сайтов хранится информация из базы данных.Контент на сайте постоянно меняется и обновляется. Примеры динамических сайтов включают Facebook, Twitter и Google Maps.

Задания по программированию серверной части

По данным PayScale, средняя начальная зарплата серверных разработчиков по стране составляет около 70 тысяч долларов. Заработная плата варьируется от 38 до 117 тысяч долларов в зависимости от опыта, местоположения и отрасли. По данным SimplyHired, в Нью-Йорке стартовая зарплата составляет около 87 тысяч долларов с приблизительным диапазоном до 120 тысяч долларов. Опять же, не так уж и плохо.

Мы надеемся, что это руководство по разработке интерфейса и руководство по разработке интерфейса было полезным!

Следующие шаги: Вы когда-нибудь задумывались о разработке полного стека?

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

И воспользуйтесь нашим инструментом подбора Bootcamp Matching Tool, чтобы найти лучшую школу для вас!

Подробнее Чтение:

Об авторе

Лорен — стратег по коммуникациям и операциям, который любит помогать другим найти их идею успеха. Она увлечена технологическим образованием, развитием карьеры, стартапами и искусством.Ее опыт включает карьерный рост / развитие молодежи, связи с общественностью и благотворительность. Она из Ричмонда, штат Вирджиния, в настоящее время проживает в Лос-Анджелесе, штат Калифорния.

Пожалуйста, включите JavaScript, чтобы просматривать комментарии от Disqus.

Что такое интерфейс? Что такое Backend?

Определение внешнего интерфейса:

Frontend — это уровень представления, это та часть приложения, которую видит пользователь. Например, как графический интерфейс пользователя (сокращенно GUI).Интерфейс часто состоит из частей:

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

Рекомендация — Что является отличительной чертой действительно хорошего внешнего интерфейса?

Интерфейс — это первое, что видит пользователь. Первое впечатление имеет значение: «У вас никогда не будет второго шанса произвести первое впечатление».

• Пользователь должен сразу понимать четкие цели и задачи вашего приложения.
• Ваше приложение должно иметь высокие позиции в поисковых системах (SEO — поисковая оптимизация), чтобы привлекать новых потенциальных клиентов.
• Проблем и ограничений по использованию разных устройств быть не должно (отзывчивый дизайн).
• Сохраняйте привлекательность вашего контента. Для хорошего обзора следует
• следуйте девизу «Как можно больше — как можно меньше» — подходит для вашей предметной области
• Большинство пользователей обычно уже знакомы с приложениями и имеют представление о том, как им ожидать от них определенных элементов.Вы должны адаптировать это выравнивание (удобный интерфейс). Используя значки, пользователь может находить информацию быстрее и в определенном контексте.
• Некоторые индивидуальные характеристики также важны, что отличает ваше приложение от других, и пользователю не надоедает мейнстрим. Для пользователя важно отслеживать четкую структуру, иначе они могут уйти.
• Содержание, а также дизайн должны быть ясными, привлекательными или понятными.Так, например, во внешнем интерфейсе должна быть заметна четкая линия. По цветам и формам вы можете создать привлекательный сайт для ваших клиентов. В основе этого должен быть единый фирменный стиль. Это означает, например, определение определенного цветового спектра, шрифтов и размеров шрифтов.
• Ваш сайт должен излучать респектабельность. С помощью хорошего внешнего интерфейса пользователь часто интуитивно определяет, доверяет ли страница, нравится ли она ему и хочет ли он остаться.
• Следовательно, вам следует следить за текущими тенденциями.современный дизайн привлекает внимание, а также передает их актуальность.
• Скорость загрузки (Page Speed) вашего приложения должна быть максимально высокой. Медленная скорость загрузки может привести к потере (а может быть, и раздражению) пользователей.
• Социальные сети являются важной частью Интернета и современного мира, поэтому интеграция и обслуживание таких служб социальных сетей должны быть важной частью вашего приложения. Как только пользователь подключается к одной из этих служб, у вас есть возможность предоставить дополнительную информацию или повторно вспомнить свое приложение.Кроме того, другие потенциальные пользователи могут быть доступны через страницы социальных сетей.
• У пользователя должна быть возможность связаться с вами (например, по почте, телефону или по адресу).
• Конечно, суть при реализации всего вышеперечисленного — это чистое кодирование.
• Хороший фронтенд-разработчик отличается хорошим чувством дизайна, а также навыками программирования для его реализации. Здесь опыт, а также знания (например, о структуре пользовательского интерфейса, основанной на потребностях, и ощущение интуитивного использования приложения) являются важными критериями для хорошего разработчика.

Frontend разработчик — сфера деятельности и квалификация

• Создание дизайна приложений и их реализация с упором на фронтенд.
• Решение проблем и оптимизация приложений.
• Сопровождение, управление и развитие существующих проектов клиентов.
• Самостоятельное планирование, оценка времени и требуемых усилий, а также концепция решений в тесном сотрудничестве с вами или командой.
• Хорошие знания и рутинное использование разных языков программирования (например: HTML5, CSS3, LESS, JavaScript, jQuery).
• Глубокое понимание юзабилити и поведения пользователей
• В связи с быстрым развитием этой отрасли ему необходимо следить за всеми новыми технологиями и функциями.

Синтаксис — Какое написание правильное? «Фронтенд» или «Фронтенд»?

… или даже «Front End».Существует много разных вариантов написания, но они все равно имеют одно и то же значение. Es existieren unterschiedliche Schreibweisen, doch alle haben die gleiche Bedeutung. К тому времени, когда термин был установлен, использовались разные варианты написания, и никогда не было установлено «правильное» / единое обозначение.
— Поэтому мы считаем все варианты правильными и принимаем их одинаково.
(То же самое с серверной частью, серверной частью или серверной частью.)

Серверная часть

бэкэнд объявлен уровнем доступа к данным.Это означает, что это часть приложения, которая не видна пользователю (в отличие от внешнего интерфейса).
Он содержит все программирование приложения и область администрирования.

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

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

Человек, выполняющий эти шаги, называется внутренним разработчиком. Он или она также использует языки программирования, такие как PHP.

В чем разница между Front-End и Back-End разработкой?

Первоначально опубликовано 9 февраля 2017 г., обновлено 9 февраля 2017 г.27, 2019.

Front-end разработчики работают над тем, что видит пользователь, а back-end разработчики создают инфраструктуру, которая его поддерживает.

Оба являются необходимыми компонентами для высокофункционального приложения или веб-сайта.

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

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

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

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

Пользователь вводит запрос через интерфейс.

Затем он проверяется и передается на сервер, который извлекает необходимые данные из базы данных и отправляет их обратно пользователю.

Рассмотрим подробнее разницу между интерфейсной и внутренней разработкой.

Что такое Front-End разработка?

Внешний интерфейс построен с использованием комбинации таких технологий, как язык гипертекстовой разметки (HTML), JavaScript и каскадные таблицы стилей (CSS).

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

HTML

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

Самая последняя версия была выпущена в конце 2017 года и известна как HTML5.2.

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

CSS

Каскадные таблицы стилей дают разработчикам гибкий и точный способ создания привлекательных интерактивных дизайнов веб-сайтов.

JavaScript

Этот язык, основанный на событиях, полезен для создания динамических элементов на статических веб-страницах HTML.

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

Также популярны интерфейсные фреймворки, такие как Angular, Ember, Backbone и React.

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

Одна из основных проблем фронтенд-разработки — которая также называется «разработка на стороне клиента» — — это быстрые темпы изменений в инструментах, методах и технологиях, используемых для создания пользовательского опыта для приложений и веб-сайтов. .

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

Все становится еще сложнее, когда речь идет об Интернете вещей (IoT).

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

Что такое внутренняя разработка?

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

Например, когда покупатель просматривает обувь на веб-сайте, он взаимодействует с внешним интерфейсом.

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

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

Внутренние инструменты

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

Многие из них используют надежные базы данных корпоративного уровня, такие как Oracle, Teradata, Microsoft SQL Server, IBM DB2, EnterpriseDB и SAP Sybase ASE.

Существует также ряд других популярных баз данных, включая MySQL, NoSQL и PostgreSQL.

Существует множество платформ и языков, используемых для кодирования приложения, например Ruby on Rails, Java, C ++ / C / C #, Python и PHP.

За последние несколько лет Backend-as-a-Service (BaaS) из провайдеров превратились в жизнеспособную альтернативу.

Они особенно полезны при разработке мобильных приложений и работе в сжатые сроки.

Что такое разработка полного стека?

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

Как правило, разработка полного стека одним программистом не является практическим решением.

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