Содержание

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

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


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

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

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это 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»

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 для начинающих


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

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

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

    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 соображает.

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

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

    Фронт? Бэк?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Что дальше

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

    Frontend разработка — Введение в веб-разработку

    Введение в веб-разработку

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

    Как пример, давайте рассмотрим среду выполнения практических заданий на Хекслете. Первое, что бросается в глаза при работе с ней, это отсутствие классической веб-схемы «запрос-ответ». Страница никогда не перезагружается, а сам сайт в этот момент выглядит как полноценный редактор кода. На самом деле, это и есть полноценный редактор кода 🙂

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

    Уже в начале 90-х стало понятно, что существующих решений недостаточно для создания интерактивных (динамичных) сайтов. Компания Netscape Communications (создавшая один из первых и, в свое время, лучших браузеров) разработала специальный язык, выполняющийся в браузере. Этот язык сначала назывался LiveScript, а затем был переименован в JavaScript. Он не имеет никакого отношения к языку Java, но в те года Java быстро становилась популярной и этим фактом решили воспользоваться создатели JavaScript, использовав слово Java в названии языка.

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

    Общий принцип работы JavaScript в браузере следующий. Кроме HTML, с сервера подгружаются JS-скрипты, которые затем начинают выполняться на странице. Браузер не просто умеет исполнять JS, но также предоставляет возможности по манипулированию как самим браузером (ограниченно), так и элементами на странице (посредством DOM API).

    Благодаря этому стало возможно создавать сайты, по возможностям не уступающие обычным приложениям. Microsoft Office для многих ушел в прошлое, а на его место встал Google Docs. Даже сложнейший инструмент Photoshop уже представлен онлайн. Социальные сети наполнены разнообразными приложениями, построенными на базе современных фронтенд-технологий. Ну и, конечно, игры.

    Важно понимать, что Frontend-разработка не является неотъемлемой частью веб-разработки. Реальная потребность в богатом интерфейсе возникает не на каждом втором сайте. К тому же, введение логики во фронтенд существенно усложняет и удорожает разработку. А сайты, чей фронтенд целиком строится в браузере, называют Single Page Application (SPA).

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

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

    1. Верстальщик.
    2. Программист на JS и одновременно верстальщик.
    3. Программист на JS, хорошо знающий верстку, но без задач на нее.

    Все три — это совершенно разные люди.

    Я, например, неплохо знаю JS и пишу много фронтенда Хекслета, но при этом совершенно не умею верстать и, более того, ни за какие коврижки не готов этим заниматься.

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

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

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

    Особенности разных подходов к организации разработки и специализации в командах больше относятся к процессным историям. Если вам хочется немного ближе познать эту область, посмотрите различия между component teams и feature teams.

    Главное, что хочется донести до всех, кто планирует стать фронтенд-программистом: такой человек в первую очередь программист, а во вторую уже фронтенд.

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

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

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

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


    Остались вопросы? Задайте их в разделе «Обсуждение»

    Вам ответят команда поддержки Хекслета или другие студенты.

    Зарегистрироваться

    или войти в аккаунт

    Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

    • 115 курсов, 2000+ часов теории
    • 800 практических заданий в браузере
    • 250 000 студентов

    Наши выпускники работают в компаниях:

    Разница между Front end, Back end, Full stack разработчиками

    Опытного IT рекрутера точно нельзя испугать модными словечками или техническими выражениями, а вот начинающему стоит разобраться во всех тонкостях IT сферы. Узнайте, чем занимаются «front end», «back end», «full stack» разработчики, чтобы быть уверенными в том, что вы с твердыми знаниями подходите к выполняемой роли специалиста. Какие-то различия — существенные, какие-то несут в себе большое количество тонкостей, но все они позволят вам понять текущие потребности IT-индустрии.

    На сегодняшний день создается все больше и больше различных веб-инструментов, программ и сервисов. Спрос на разработчиков растет с каждым днем с такой же прогрессией. В связи с этим выросла потребность в IT рекрутерах.
    Сегодня мы поможем вам понять, кто такие «front end», «back end», «full stack» разработчики.

    Front End разработчик

    Когда вы видите наполненный жизнью сайт с привлекательным интерфейсом, вам становится интересно, кто же этот волшебник, который так профессионально с ним поработал. Именно в эту минуту вы думаете о front end разработчике, даже об этом не зная. Любое визуальное отображение, с которым вы работаете, производится потом, кровью и слезами front end разработчика. GUI или «Графический пользовательский интерфейс» — это визуальный фронт, на котором отображается экран, позволяющий клиентам взаимодействовать с программным обеспечением. Любое из сегодняшних устройств с прилагательным «умный», будет иметь интерфейс, который запускает приложения, предоставляет доступ к веб-сайтам, и все это создается разработчиком front end.

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

    Дизайнер UX ссылается на конструктор «User Experience», в котором описывается путь, который пользователь использует, и его общая эффективность. Front end разработчики также должны думать над общим удобством использования, полезностью и опытом, которые пользователь имеет при взаимодействии с программным обеспечением и этот конкретный сегмент требует, безусловно, самых «гибких навыков» программиста. Тем не менее, эта работа может выполняться также не программистами.

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

    Традиционно разработчиком front end является человек, которому удобно работать как с дизайном, так и с кодированием. Другими словами, тот, кому комфортно работать с использованием простых инструментов проектирования и умеет писать структуру веб-сайта в HTML и стилизовать его с помощью CSS-кода. На данный момент самой большой проблей для front end разработчиков является то, что веб-сайт, построенный только с использованием HTML и CSS, будет полностью статическим. Если вы думаете о stickman на пустой странице в качестве веб-сайта. HTML будет достаточно, чтобы нарисовать его форму и CSS будет использоваться для его стилизации (сгустить, покрасить его, добавить одежду и т.д.). Но чтобы заставить stickman двигаться и реагировать, front end разработчику как следствие потребуется что-то еще.

    По мере усложнения и совершенствования веб-приложений спрос на полный язык программирования Turing в интерфейсе растет с большой скоростью, поэтому для анимации программистов — stickman используют Java Script, который является языком программирования на стороне браузера.

    Back End разработчик

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

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

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

    Back end разработчики используют различные технологии для кодирования основной вычислительной логики информационных систем, конкретного программного обеспечения или веб-сайтов. Они могут включать Java, C#, Python и языки баз данных, такие как SQL и многие другие. Back end отличаются от разработчиков front end тем, что работа back end разработчика полностью лишена какого-либо визуального дизайна и основывается на логике и архитектуре программного обеспечения, целью которой является предоставление определенного результата. Иногда возникают проблемы с объединением back end и front end, что приводит нас к человеку, который может обработать обе части.

    Разработчик Full Stack.

    Разработчик full stack — это тот, кто хорошо работает как с бэкэнд, так и с фронтэнд. «Чтобы быть более конкретным, это означает, что разработчик может работать с базами данных, PHP, HTML, CSS, JavaScript и всем, что находится между ними, также принимая во внимание преобразование проектов Photoshop в интерфейсный код», — говорит Sitepoint.

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

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

    Аутсорсинг фронтенд разработки 💻| Компания «Work Solutions

    Что такое аутсорсинг

    Аутсорсинг — это практика получения услуг от внешнего поставщика. Она распространена в отраслях, где существует нехватка рабочей силы или её стоимость слишком высока, например, в разработчике программного обеспечения. В России аутсорсинг становится все более популярным для развития digital направлений, так как цена содержания штатного IT подразделения становится слишком высокой.

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

    Что такое фронтенд

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

    HTML, CSS и Javascript — это три кита, на которых стоит любое frontend-приложение.

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

    В современном мире этого недостаточно, поэтому сайты еще активно используют технологию Javascript. Этот язык программирования позволяет запускать программные скрипты на стороне клиента, то есть прямо в браузере. На базе этого языка появилось множество инструментов разработки, которые принято называть фреймворками и библиотеками. Они используют Javascript или Typescript чтобы эффективно решать конкретные задачи и повышать эффективность разработки при решении разных задач. Например, с помощью React Native можно создавать мобильные приложения для iOS и Android.

    Основные отличия фронтенда от бекэнда

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

    Почему следует отдать фронтенд на аутсорс

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

    Экономическая эффективность

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

    Доступность и масштабируемость

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

    Экспертиза и опыт

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

    Специфика задач

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

    Наши фронтенд-программисты

    Аутсорсинг разработки frontend — это услуга, за которой к нам часто обращаются клиенты. Все наши разработчики независимо от уровня middle или senior, владеют современными инструментами разработки и знают все лучшие практики и отраслевые стандарты работы. Они знают JavaScript и Typescript, прекрасно владеют популярными фронтенд фреймворками вроде React, Angular и Vue. Внедрение лучших практик и умение писать поддерживаемый код позволяет им создавать качественную цифровую продукцию. При работе с проектами они настраивают автоматизированное тестирование, что позволяет им работать с большой комбинацией входных параметров интерфейса.

    Почему мы

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

    Получите консультацию

    Источники изображения: Illustration by Freepik Stories

    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 г.

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

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

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

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

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

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

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

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

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

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

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

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

    Бэкэнд

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

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

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

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

    Front End Development vs Back End Development: Где

    Автор Lauren Stewart

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

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


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


    Front End Web Development
    Что такое Front End Development?
    Определение: Front end разработка управляет всем, что пользователи сначала видят в браузере или приложении. Внешние разработчики несут ответственность за внешний вид сайта.

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

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

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

    Задания внешнего программирования

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

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

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

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

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

    Back End Разработка
    Что такое серверная разработка?
    Определение: Внутренняя разработка относится к серверной части приложения и всему, что обменивается данными между базой данных и браузером.

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

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

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

    Задания Back End программирования

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

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

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

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

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

    Больше чтения:
    Об авторе

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

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

    Чем занимается фронтенд-разработчик?

    Чем занимается Front-End разработчик?

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

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

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

    Обычно в обязанности фронтенд-разработчика входят:

    • Приоритет взаимодействия с пользователем
    • Воплощение концепции в жизнь с помощью HTML, CSS и JavaScript
    • Создание и обслуживание веб-сайтов и пользовательских интерфейсов веб-приложений
    • Создание инструментов, улучшающих взаимодействие с сайтом в любом браузере
    • Реализация дизайна для мобильных сайтов
    • Ведение программного обеспечения для управления рабочим процессом
    • Изучение лучших практик SEO
    • Тестирование сайта на удобство использования и исправление ошибок

    Каково рабочее место Front-End разработчика?

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

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

    Front-End Developers также известны как:
    Front-End Engineer Front-End инженер-программист Front-End веб-разработчик Клиентский разработчик Front-End Coder

    Frontend vs Backend

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

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

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

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

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

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

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

    TL; DR;

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

    Вы можете узнать все о бэкэнд-разработке в нашем курсе 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 самостоятельно. Тогда это будет пример веб-приложения, у которого есть только серверная часть.

    # А как насчет Fullstack?

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

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

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

    Растущий характер сложности фронтэнда развития

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

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

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

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

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

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

    Разработка внешнего интерфейса:

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

    Фронтенд — самый сложный из тех, что я делаю. Люди, которые делают это каждый день, — герои.

    — Иегуда Кац 🥨 (@wycats) 14 ноября 2017 г.

    Сохранение сложности

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

    Сложные инструменты не сделали нашу работу, когда инженеры уходят.

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

    Истоки сдвига: не одна мегатенденция, а три

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

    Диверсификация устройств

    Первая из этих мегатенденций — невероятная диверсификация устройств, подключенных к сети, на которых работают веб-браузеры.Когда я начинал в Интернете, вы предполагали, что ваши пользователи были на настольных устройствах, работающих по коммутируемому доступу или DSL. Различия в размере экрана, задержке и пропускной способности, с которыми нам пришлось столкнуться, были минимальными. Современные веб-разработчики должны учитывать все: от крошечных бюджетных телефонов с экранами шириной всего 320 пикселей при подключении к сети 3G до массивных экранов настольных компьютеров, работающих в высокоскоростной корпоративной сети Ethernet.

    Планка качества выше

    В то же время планка качества резко поднялась.

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

    Значительный рост рынка

    Наконец, количество потребителей, имеющих доступ к сети, резко выросло. Согласно отчету об использовании Интернета в области ИКТ, только с 2010 года мы выросли с примерно 2 миллиардов человек в сети до более 4 миллиардов, что означает значительное увеличение на аудитории, на которую нацелены веб-разработчики.

    Свидетельство о смене

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

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

    Рост экосистемы

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

    Сравнение количества модулей по экосистемам. Источник: http://www.modulecounts.com/

    Фреймворки Frontend HTML и CSS также увеличились. Пять лет назад у вас, возможно, было три выбора — почтенный grid960 или один из недавно появившихся полнофункциональных фреймворков, Bootstrap или Foundation. Сегодня быстрый поиск «css frameworks» показывает список из более чем 100!

    Новые модели программирования

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

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

    Следующее поколение идет дальше, выходя за рамки модели программирования JavaScript с новыми языками, которые имеют принципиально разные модели программирования, такие как Elm и Web Assembly.

    Что все это значит?

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

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

    То же самое произошло десять лет назад в серверных технологиях: работа в соответствии с последними и лучшими достижениями Ruby on Rails или Django была постоянной работой. Но сегодня этот стек технологий созрел.

    Это не значит, что застой. Не за что. По-прежнему наблюдается серьезный прогресс. Но можно хорошо зарабатывать на жизнь в качестве разработчика API, используя Ruby on Rails, не тратя половину своей работы на гонки, чтобы не отставать. Фактически, некоторые из самых больших различий в последних выпусках заключаются не в базовой технологии, а в интеграции новейших инструментов внешнего интерфейса, таких как webpack.

    Инструмент не ускользнет

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

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

    По мере того, как наши требования к внешнему интерфейсу стали сложными, вся экосистема , инструментов внешнего интерфейса, выросла по необходимости .Такие инструменты, как gulp, webpack, brocolli, rollup, babel, flow и другие существуют, чтобы помочь нам обуздать хаос и сделать его управляемым.

    Однако, несмотря на все разработанные интерфейсные инструменты, на самом деле это одна из серьезных дыр в экосистеме. По сравнению с внутренними инструментами экосистема интерфейсных инструментов невероятно сырая и незрелая.

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

    Огромные возможности

    Сочетание огромного рыночного спроса и явных дыр в экосистеме создает невероятные возможности как для частных лиц, так и для компаний.

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

    Кто создаст IDE, ориентированную на внешний интерфейс? Лучший мониторинг производительности внешнего интерфейса? Лучшие системы для тестирования и проверки? Хотя все версии этих инструментов существуют, все они кажутся примитивными по сравнению с уровнем инструментов, доступных нам в серверной части.

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

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

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

    Куда это идет?

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

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

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

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

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

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

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

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

    Будущее такое яркое…

    Сейчас сложно быть фронтенд-разработчиком.

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

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

    Это прекрасное время для фронтенд-разработчика.

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

    LogRocket: Полная видимость ваших веб-приложений

    LogRocket — это решение для мониторинга внешних приложений, которое позволяет воспроизводить проблемы, как если бы они произошли в вашем собственном браузере.Вместо того, чтобы угадывать, почему происходят ошибки, или запрашивать у пользователей снимки экрана и дампы журнала, LogRocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от фреймворка, и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ ngrx / store.

    Помимо регистрации действий и состояния Redux, LogRocket записывает журналы консоли, ошибки JavaScript, трассировки стека, сетевые запросы / ответы с заголовками и телами, метаданные браузера и пользовательские журналы.Он также использует DOM для записи HTML и CSS на странице, воссоздавая видео с идеальным пикселем даже для самых сложных одностраничных приложений.

    Попробуй бесплатно.
    .