Что нужно знать backend разработчику в 2020


Оглавление (нажмите, чтобы открыть):

По пунктам: что нужно знать о бэкенде новичку в веб-разработке

Рассказывает Эмит Ирэндол, full-stack разработчик

В этой статье перечислены ключевые аспекты, которые нужно учитывать при создании бэкенда в контексте full-stack веб-разработки. Новичков она познакомит с основами, а более продвинутым программистам может быть полезна в качестве чек-листа.

1. Аутентификация

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

Можно выделить два основных типа аутентификации:

  1. Запоминающая предыдущее состояние — реализуется с помощью сессий. Пользователь авторизуется один раз, а затем получает возможность свободно передвигаться по приложению и доступ к защищенным ресурсам (таким, как банковские транзакции или селфи в Snapchat), не отправляя данные, которые подтверждают его вход повторно.
  2. Не запоминающая предыдущее состояние — реализуется с помощью токенов. Пользователи делают все то же самое, но при выполнении каждого HTTP-запроса пользователю нужно отправлять идентификационные данные. Так обычно поступают с REST API. Сейчас золотой стандарт, не запоминающей состояние аутентификации с токенами, — JWT.

Есть и более продвинутый сценарий — многофакторная аутентификация. Она повышает безопасность приложения, добавляя дополнительные уровни защиты к логину и паролю. Хорошие примеры реализации есть у Google и Amazon.

Прим. перев. А у нас есть разъясняющая статья про двухфакторную аутентификацию и протокол FIDO U2F.

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

2. Роли, разрешения и контроль доступа

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

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

Пользователь x может сделать действие y с объектом z.

Применим это в конкретной ситуации: Шэрон — редактор и может редактировать посты. Тогда надо определить:

  • роль Шэрон — редактор;
  • ее действие — редактирование;
  • объекты, с которыми она может это делать, — посты.

Как это работает? Просто: булевы переменные. Вы возвращаете True/False в зависимости от того, что и кому разрешено делать с конкретным объектом . Итак, может ли Шэрон редактировать какой-то конкретный пост? Вернуть True, если она редактор, вернуть False и закрыть доступ к посту, если нет.

3. CRUD — Create, Read, Update, Delete

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

4 октября 2020 – 1 марта 2020, Москва и онлайн, беcплатно

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

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

  • как создавать новые данные;
  • как их редактировать;
  • как их обновлять и удалять.

Так выглядит CRUD при работе с фреймворком Ruby on Rail, который предоставляет слой объектно-реляционного сопоставления (Object Relational Mapping — ORM ) :

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

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

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

4. REST

Чтобы обеспечить управление ресурсами в вашем приложении (такими, как книги или аккаунты), нужно реализовать программный слой, принимающий запросы и формирующий ответы. Здесь вам доведется поработать с маршрутами (routes) и контроллерами (controllers). Они обеспечивают соблюдение ограничений, накладываемых REST — стилем архитектуры программного обеспечения для распределенных систем.

В типичном приложении на Ruby маршрут выглядит так:

Что в это время происходит в системе:

  1. Приходит запрос на фото с этим маршрутом и передается контроллеру с помощью метода show .
  2. Этот метод, обращаясь к ресурсу из базы данных или к другому API, формирует и передает ответ в формате HTML или JSON.
  3. Клиент (в данном случае браузер компьютера) получает ответ и выводит фото на экран.

Запросы могут приходить из многих источников (их называют клиентами). Чаще всего запросы для веб-приложения формируются в форме ввода браузера. Но, если вы пишете бэкенд для мобильного приложения, то клиент — это API приложения, и он посылает запросы GET, POST, PUT, DELETE из приложения.

Вы можете разработать отвечающую на запросы систему, создав API с учетом REST. Такой API называется RESTful, читайте подробнее о нем в подробной статье.

Прим. перев. Также предлагаем ознакомиться с нашим материалом по этой теме.

5. Формы и состояния

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

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

Когда пользователь начинает взаимодействовать с формой, вам надо сделать следующее:

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

6. API

Чтобы ваше приложение стало по-настоящему популярным, вам надо начать делиться данными с другими приложениями. Например, вы — музыкальная компания, и вы хотите, чтобы стриминговые сервисы типа SoundCloud поставляли ваш контент, а пользователи могли покупать вашу музыку напрямую из их приложения. Здесь и нужен API.

Термин API — аббревиатура от Application Programming Interface (интерфейс программирования приложений) — применяется к инфраструктуре, которая позволяет другим приложениям взаимодействовать с вашим. На картинке выше вы видите пример применения API для обслуживания сети из многих мобильных и настольных клиентов.

Основные этапы написания API:

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

7. Уведомления по Email, SMS и Webhooks

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

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

Для разных случаев вы можете использовать разные уведомления:

  • оповещения на экране приложения;
  • электронные письма (верификация почты или подтверждение покупки);
  • SMS (авторизация или завершение транзакции);
  • webhook-уведомления в реальном времени для обратившихся к вашему приложению чат-ботов на разных платформах, например, Facebook, Telegram или Slack;
  • регулярные письма со счетами за покупки и информацией об оплате подписки.

8. Подписка и тарифные планы

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

Полезные советы по проектированию тарифных планов:

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

9. Взаимодействие с платежным шлюзом

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

Во время транзакции нужно:

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

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

Не забывайте про счета — людям нужны документы о транзакциях для уплаты налогов и т. д.:

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

Как работает платежный шлюз:

  1. Ваши кассовые формы отправляют детали покупки на платежный шлюз для обработки.
  2. Платежный шлюз передает данные транзакции банку продавца.
  3. Банк продавца передает эту информацию о транзакции банку, который выпустил карту покупателя, для авторизации транзакции.
  4. Банк, который выпустил карту покупателя, либо одобряет, либо отклоняет транзакцию и отправляет информацию банку продавца.
  5. Если транзакция одобрена, то банк переводит средства на ваш счет.
  6. После одобрения сторонний платежный шлюз отправляет детали транзакции и ответ вашему приложению.
  7. И, наконец, вы отправляете уведомление покупателю, сообщая, одобрена ли транзакция.

Если остались вопросы, посмотрите это видео:

10. Загрузка файлов

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

  1. Разрешить загружать только файлы определенных форматов.
  2. Проверять файлы на превышение разрешенного размера и отклонять загрузку слишком больших.
  3. Показывать пользователю процесс загрузки.
  4. Убедиться, что загрузка происходит асинхронно и не нарушает работу фронтенда.
  5. Разрешить пользователю помечать файлы как личные/общедоступные.
  6. Разрешить пользователю экспортировать загруженные данные.
  7. Создать медиа-библиотеку, чтобы фильтровать файлы и управлять ими (опционально).

11. Сторонние API, фреймворки и пакеты

Ruby, Elixir, PHP и JavaScript уже имеют тысячи пакетов, которые могут быть настроены и применены к вашему приложению. Их легко встроить с помощью команды в одну строку в терминале:

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

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

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

12. Работа с Open Source

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

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

13. Интерфейс для управления

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

Мастер Йода рекомендует:  Организация разработки — всё по этой теме для программистов

Хорошая панель управления должна обладать следующими свойствами:

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

14. Кэширование

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

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

Как работает кэширование в веб-приложениях? Можно выделить следующие типы механизмов:

  • кэширование контента. Если контент веб-страницы не изменяется постоянно, то нет нужды каждый раз заново его генерировать. Целая HTML-страница может быть сохранена в кэше;
  • кэширование фрагментов. Иногда целая страница не может быть закэширована, потому что на ней есть контент, который постоянно изменяется, но есть и части, которые изменяются медленно. HTML для этих статичных частей генерируется только при первом запросе, а при повторных извлекается из кэша;
  • кэширование данных. Часто в основе веб-приложения лежит база данных, но каждый раз извлекать из нее информацию достаточно накладно, поэтому часто используемые данные кэшируются в памяти приложения или в других хранилищах, например, Redis, Varnish и Memcached.

15. Компоненты

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

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

16. Системы управления версиями

Речь, конечно, идет об использовании Git и GitHub. Новичкам использование Git кажется излишним, а его преимущества — неочевидными, поэтому предлагаю подумать о ситуациях, с которыми вы можете столкнуться в процессе написания кода:

  1. Если вы собираетесь работать с другими разработчиками над одним и тем же проектом, то вы будете пользоваться общим набором файлов. Как именно вы планируете избежать противоречий при изменениях в коде?
  2. Что, если вы захотите вернуть старую версию и посмотреть, как вы реализовали ту или иную задачу перед тем, как продолжите разработку?
  3. Что, если вы захотите откатить проект к последней версии, в которой еще не было сбоя?
  4. Что, если вы захотите поделиться своим исходным кодом? Вы будете его архивировать и рассылать по e-mail при добавлении каждой новой фичи?
  5. Как вы будете следить за тем, какие файлы были изменены, а какие — нет?

Научиться пользоваться GitHub поможет эта статья.

Прим. перев. А чтобы разобраться в основах Git, читайте наше руководство.

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

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

Для освоения командной строки советую эту книгу.

Прим. перев. Знакомство с командной строкой также можно начать с нашей шпаргалки по Bash.

18. Вопросы на Stack Overflow

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

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

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

Основа: HTML, CSS и Javascript

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

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

Pug — это шаблонизатор и HTML-препроцессор, написанный на JavaScript для NodeJS.

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

Вы можете использовать CSS препроцессоры такие как: SASS/SCSS, STYLUS, LESS. Самый популярный на сегодняшний день SASS.

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

ECMAScript 6 — новая спецификация JavaScript со множеством новых возможностей.

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

Сборщики JavaScript

На данный момент существует 2 сборщика: Gulp и Grunt. Самый популярный — Gulp.

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

Безусловно, вместе с этим Вам необходимо знать основы Node.js и использовать менеджер пакетов, например, npm или Yarn.

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

JS фреймворки

На данный момент популярны 3 фреймворка: Angular, React и Vue.js. Изучать все фреймворки сразу не нужно, вполне возможно, если Вы уже работаете на определенную компанию, то там используется определенный стек технологий. Зная это, Вам будет легче определиться с чего начать. Однако, если Вы работаете на фриланс биржах или удаленно, то Вы можете начать изучать любой JS фреймворк, в любом случае Вы найдете заказчиков. Но, у этих фреймворков есть некоторые особенности, о которых хотелось бы поговорить более детально.

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

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

Vue.js — самый молодой фреймворк. Его модульная система аналогична React, но включающая в себя все атрибуты JS фреймворка, работающих с полной обратной зависимостью.

Что можно в целом сказать про эти 3 JS фреймворка?

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

Webpack

Webpack позволяет избавиться от таких инструментов, как Bower, Gulp или Grunt сборщик.

Webpack — это модуль с открытым исходным кодом для JavaScript-модулей.

Flexbox и Grid CSS

Если снова вернуться к теме CSS, то здесь стоит отметить, что актуальнее всего использовать технологии Flexbox и Grid.
Игра Flexbox Froggy — flexboxfroggy.com
Игра Grid Garden — cssgridgarden.com

Также, стоит по максимуму использовать SVG изображения на сайтах, вместо привычных растровых форматов, таких как png и jpeg. Изображения сделанные при помощи SVG (в основном это иконки или мелкие элементы) корректно отображаются на любых мониторах, в том числе ретина.

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

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Профессия backend разработчик

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

Backend-разработчик – это интересная и перспективная профессия для тех, кому нравится логика, математика, разработка алгоритмов.

Содержание статьи:

Кто такой backend-разработчик и чем он занимается?

Современные веб-приложения, сайты и интернет-сервисы состоят из frontend и backend частей. Давайте посмотрим, чем они отличаются:

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

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

Кратко задачи бэкенд программиста можно описать следующим образом:

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

Создание систем резервного копирования.

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

Плюсы и минусы профессии

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

Могут взять на работу без профильного образования.

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

Требуется постоянно осваивать новые технологии, чтобы быть востребованным.

Средние зарплаты бэкенд-программистов

Зарплаты backend специалистов примерно сопоставимы с зарплатами frontend и составляют 150-200 тыс. руб. в месяц для людей с опытом 3-5 лет. Чем больше стек технологий, которым владеет разработчик, опыт и масштаб реализованных проектов, тем выше спрос на программиста и его доходы.

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

Как стать back end разработчиком? Что нужно знать и уметь?

Несмотря на то, что backend предполагает работу только с серверной частью, начать путь в профессию лучше с изучения основ HTML и CSS. Далее – осваивать серверные языки программирования, работу с базами данных.

Посмотрите интересное видео на тему, чем отличается backend разработчик от frontend и какие знания необходимы для работы в этой сфере:

Список того, что нужно знать и уметь бэканд разработчику, может включать:

Языки программирования, например, PHP, Ruby, Python, Java, JavaScript / Node.js. PHP – самый популярный язык серверного программирования.

Технологию AJAX, позволяющую обновлять данные в браузере без перезагрузки страницы.

Базы данных MySQL, PostgreSQL, MongoDB и другие.

Принципы работы UNIX-систем.

Принципы ООП (объектно-ориентированное программирование).

Фреймворки – наборы скриптов, ускоряющих разработку веб-сайтов.

Работу с системами контроля версий Git.

Где обучиться профессии с нуля?

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

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

Где найти работу?

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

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

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

Где найти backend программиста на проект?

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

Добавьте проект на биржу для программистов. Добавление вакансий на ней – бесплатное.

Что нужно знать frontend разработчику сегодня

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

HTML и CSS

HTML (Hyper Text Markup Language) и CSS (Cascading Style Sheets) являются основой веб-разработки. Без этих двух технологий вы не сможете создавать веб-дизайн и получите на выходе простой текст на экране. Вы даже не сможете добавить изображение на страницу без HTML!

Прежде чем начать карьеру веб-разработчика, вы должны стать специалистом в HTML и CSS. Хорошая новость, уверенное знание этих технологий можно получить всего за несколько недель изучения. У нас вы можете пройти курс по основам HTML!

JavaScript

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

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

JQuery

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

JavaScript фреймворки

JS фреймворки (включая AngularJS, Backbone, Ember и ReactJS) предоставляют готовую структуру вашего JavaScript кода. Существуют различные типы фреймворков под разнообразные нужды, однако четыре вышеупомянутых являются самыми популярными в списке требований при приеме на работу в 2020 году. Фреймворки действительно ускоряют процесс разработки, предоставляя вам ускоренный старт, и могут использоваться в связке с библиотеками вроде JQuery для минимизации временных затрат на написание типовых блоков.

Frontend фреймворки

CSS и Frontend фреймворки (самым популярным является Bootstrap) делают для CSS то же, что и JS фреймворки для JavaScript: они ускоряют разработку, предоставляя отправную точку с готовой стартовой структурой проекта. Поскольку от проекта к проекту базовые CSS блоки повторяются, фреймворк, определяющий все за вас, является очень полезным. Большинство работодателей требуют знание того, что такое frontend фреймворки и как с ними работать.

RESTful сервисы и API

Не вдаваясь в технические подробности, REST расшифровывается, как Representational State Transfer, что означает “передача состояния представления”. В общих чертах, это технология, упрощающая связь компонентов в сети. И RESTful сервисы и API — это сервисы архитектуры REST. Почитать об этом подробнее вы можете здесь.

Предположим, вы решили написать приложение, которое отсортирует всех ваших друзей в социальной сети по дате добавления. Вы можете сделать запрос к RESTful API ВКонтакте для получения списка ваших друзей. То же самое возможно и с Twitter, и с Facebook, которые также используют RESTful API.

Системы управления контентом и платформы E-commerce

Практически каждый веб-сайт построен на системе управления контентом (CMS). Платформы E-commerce являются одной из разновидностей CMS. Самая популярная в мире CMS — это WordPress, которая находится за занавесом миллионов сайтов, почти 60% всех сайтов, использующих CMS, построены на WordPress. Другие популярные CMS это Joomla, Drupal и Magento. Даже поверхностные знания этих систем дадут вам преимущество при устройстве на работу.

Тестирование и отладка

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

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

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

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

Git и системы контроля версий

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

Что должен знать профессиональный фронтенд-разработчик сегодня

В последние несколько лет React, одна из библиотек JavaScript, становится стандартом frontend разработки — и это на руку кроссплатформенным разработчикам, с такими преимуществами React Native, как:

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

Говоря простым языком, React связывает вместе HTML и JavaScript.

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

Учитывая вездесущность множества форм-фактором различных устройств (мобильные телефоны, планшеты, десктопные ПК), мы бы также рекомендовали к изучению способы построения адаптивных web-страниц. Существует большое разнообразие библиотек JavaScript и CSS, которые прекрасно справляются с этой задачей. Многие из них основаны на рекомендациях Google’s Material Design.

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

  • Webpack для модульной сборки (хотя опыт Webpack довольно ужасен и выбор сообщества в области сборки меняется каждые 1-2 года);
  • JSON Web Token для авторизации (своего рода, замена куки, которые ранее были стандартом);
  • Relay/GraphQL или Redux или Flux, в зависимости от того, насколько глубоко вы хотите погружаться в потоки и выборки данных;

А также большое разнообразие библиотек для отладки, оптимизации производительности, тестирования, управления проектами и т.п.

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

Наш совет: если вы ещё только начинаете знакомство с frontend-разработкой, пройдите наш курс по HTML.

Как стать Back-End разработчиком.

Всем привет, этот пост расскажет вам про другую сторону веб программирования — Back-end разработку.

Back-end, в переводе серверная часть, осуществляет всё то, что вы не видите на сайте.

Back-end, в основном, призван для работы с базой данных, а именно:

СОЗДАВАТЬ, ХРАНИТЬ, ИЗМЕНЯТЬ и УДАЛЯТЬ информацию.

Приведу пример. Регистрационная страница социальной сети, когда пользователь вводит свою информацию происходит 3 этапа:

1) Обработчик – программа, написанная на каком-либо серверном языке программирования, обрабатывает полученную информацию и посылает в базу данных.

2) Создание и упорядочивание полученной информации в базе данных.

3) Хранение информации в базе данных.

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

Теперь, что нужно знать Back-end программисту.

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

И 2-ое – язык запросов к базе данных SQL, дабы взаимодействовать с информацией.

По времени обучения — от 4 до 6 месяцев.

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

В целом, можно рассчитывать на заработную плату в $500 — $5.000, если, ОПЯТЬ ЖЕ, работать в англоязычном сегменте.

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

Вообще, у нас есть группа в вк, там вы сможете найти полезную информацию по теме web-программирования. https://vk.com/public178153816

Так же у нас есть телеграм канал — https://t.me/becomingofwebdeveloper
Заходите, это та информация, которая сделает вас лучше.

Дубликаты не найдены

поворачивайся своим back-эндом

а без пороков, можно кодить ?

и да, @moderator , реклама порочных говнокАналов

Но это мой канал.

Да, имелось в виду, что для вхождения на рынок такой порок.

разницу между ПОРОК и ПОРОГ понимаете?

1.Предосудительный недостаток, позорящее свойство.

«Лживость — большой п.»

2.Развратное поведение устар..

3.Физический недостаток; отклонение от нормального вида, состояния.

>>По времени обучения — от 4 до 6 месяцев.

Это либо по 5+ часов каждый день уделять учебе, либо идти на позицию trainee.
Например, стек технологий для go-разработчика на junior-позицию выглядит примерно так (а точнее, какие предъявили ко мне требования, когда я устраивался на работу именно на позицию джуна):
1) Go + парочка фреймворков (например, gin, go-micro, gorilla)
2) SQL (с go обычно требуется PostgreSQL + redis/mongodb)
3) Минимальные знания html/css/js (плюс какой-нибудь фреймворк к js аля vue, extjs, react)
4) Плюс-минус примерно представлять, как работает http/https, сокеты
5) Базовые знание команд линукса, гита, докера и какого-нибудь брокера сообщений
6) Знание основных структур данных (деревья, двухсвязанные списки) и хотя бы с помощью гугла суметь написать алгоритмы по работе с этими структурами

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

Как я решил перейти в IT

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

В моём окружении всегда было много айтишников. Они постоянно рассказывали об интересных рабочих задачах и новых технологиях. А для меня самой «горячей» новостью было изменение СНиПа 85-го года — убрали опечатку в слове. Хаха, вы серьёзно? Потому я и решил попробовать себя в IT.

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

Я пробовал разбить обучение на последовательные шаги, но это оказалось нереальным: нельзя сначала изучить HTML и CSS, а через месяц взяться за JS. Это всё работает вместе. Поэтому придётся на каких-то этапах совмещать несколько источников. Главная идея — итеративное обучение: почитал теорию — закрепил на практике. И так повторять до бесконечности.

Закладываем фундамент

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

Очень круто, что на курсах нет «голой» теории — вы сразу учитесь на практике.

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

Что даст: понимание, что такое вёрстка, HTML, тэги и атрибуты — вы научитесь верстать сетки, оформлять текст и немного поиграете с анимацией.

Прививаем хороший стиль с самого начала

Фундамент заложен, можно углубиться в вёрстку. Я взялся за методологию БЭМ от Яндекса. Её используют почти все компании для создания структуры классов.

Полностью всю методологию можно не изучать, но раздел « Быстрый старт » знать и использовать надо.

Ещё есть такой парень — Вадим Макеев. Он веб-евангелист (что бы это ни значило). Рассказывает и показывает, как делать валидную и удобную вёрстку. Погуглите его видосы и слушайте подкаст . По моему мнению, Вадим иногда перегибает палку, но рассказывает вещи, которые надо знать.

У него есть хороший доклад, который вдохновил меня с самого начала — « Людоедский интерфейс ».

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

Практикуемся

Получили базу — нужно пробовать создавать тестовые странички. Гуглите «бесплатные PSD макеты сайтов», скачивайте и верстайте их. Не забывайте про адаптивность.

Скачайте и установите редактор исходного кода — теперь это ваш главный инструмент в работе. Я использовал Atom и VS Code . Это бесплатные редакторы. Они легко оптимизируются под себя разными расширениями.

На этом этапе нужна критика. Ищите в своём окружении или на форумах фронтендеров и показывайте им свои макеты. Фидбек от эксперта поможет найти слабые места и пробелы в знаниях.

Положите любимые свёрстанные макеты в портфолио — будет плюсом при поиске работы.

Что даст: реальный опыт вёрстки, пусть и в «домашних» условиях.

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

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

Лично для меня flexbox стал откровением. Я пытался сделать хитрую сетку с помощью флоутов, когда подошёл мой друг и сказал «Да тут на флексбоксах делов на 5 минут». И да, действительно на 5 минут… даже на 4! После этого мой мир изучения фронтенда изменился 🙂

Что даст: опыт использования современных технологий и подходов к работе.

JavaScript

Не стоит забывать про JavaScript — без него сейчас никуда. Есть отличный учебник от Ильи Кантора — «Современный учебник JavaScript» . Первая часть про основы JS, вторая про работу с DOM — как управлять элементами на странице с помощью JS. Учебник можно изучать бесконечно, но для начала хватит первых пяти глав.

Здесь главное не переборщить с теорией: освоил тему — закрепи на практике. Придумывайте себе задачи, которые требуют использования JS: скрыть элемент на странице при нажатии на кнопку; показывать или скрывать элементы на странице по таймауту.

Что даст: начальное знание JavaScript.

Что ещё нужно знать

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

Неплохо бы изучить и препроцессоры Sass/SCSS и Less . Они оптимизируют работу с CSS: с переменными, правилами вложенности, функциями и логическими блоками.

Добавлю, что не все браузеры будут одинаково отображать ваши свёрстанные макеты. Например, IE не дружит с флексбоксами, и далеко не все современные браузеры полностью поддерживают грид. Поэтому всегда проверяйте свои макеты в Chrome, Mozilla Firefox, Opera, Safari, IE и Edge.

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

Что в итоге

Я занимался самостоятельно по 2-3 часа в день в течение шести месяцев. И за это время я…

  • узнал, что такое HTML, CSS, JS, понял, как это всё применяется и работает вместе;
  • научился отличать хорошие подходы к разработке от плохих, начал замечать косяки на своих любимых сайтах;
  • узнал, что такое табличная верстка, флексбоксы и гриды, научился их использовать;
  • понял, как работает один из препроцессоров и научился применять его в работе;
  • смог собрать проект с помощью Webpack;
  • смог самостоятельно сверстать и прикрутить JS на сайт;
  • научился работать с редактором кода и оптимизировал его под себя.

Ищем работу по новой специальности

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

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

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

Авторы и источники фото: Julian Moreau, Ricardo Gomez Angel, Adrian Trinkaus, Kelly Sikkema, David Siglin, Frederico Izzo on Unsplash.

​Кто такие backend и frontend разработчики?

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

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

Front-end – «лицевая» часть сайта: всё, что видит пользователь. Меню, текст, картинки, раздражающие (или, если сделано хорошо, не раздражающие) рекламные баннеры – всем этим занимается frontend-разработчик. В разработке дизайна он тоже участвует: «рисует» всё, конечно, веб-дизайнер, но контролирует его работу именно фронтенд.

Задачи frontend-разработчика

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

Три основных инструмента frontend-разработчика: HTML, CSS, JavaScript.

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

Если фронтенд создает часть для пользователя, то бэкенд работает для сервера – оборудования, на котором находится сайт.

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

Всё, что скрыто от глаз пользователей и работает на сервере – это и есть backend-разработка.

Задачи backend-разработчика

  • Создать базу данных и программы, которые будут записывать информацию в базу и забирать её оттуда;
  • Защитить данные: шифровать пароли и ценную информацию, настроить доступы и многое другое;
  • Чтобы база не пропала в результате какого-то сбоя, нужно регулярно создавать её запасные копии – бэкапы. Это делается автоматически, но настраивает систему резервного копирования именно backend-разработчик;
  • Писать скрипты и программы, которые обрабатывают то, что не видит пользователь.

В конечном итоге, бэкенд-разработчик отвечает за всё, что не относится к «фронтальной» части сайта.

Инструменты бэкенд-разработчика: Java, SQL, C#, Python.

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

Full-stack-разработчик

По данным «Мой круг» full-stack и back-end разработчики в 2020 году получают до 140 тысяч рублей. Front-end – до 125 тысяч.

Может ли один и тот же человек заниматься и фронтенд, и бэкенд разработкой? Если он разбирается и в том, и в другом – почему нет: такой разработчик называется Full Stack.

Он умеет решать любые задачи по разработке веб-сервисов и сайтов: знает серверные языки, JavaScript, HTML и CSS, может оптимизировать сайт под поисковики и превратить сделанный в Photoshop макет дизайна в рабочий интерфейсный код (вы же помните, что интерфейс сайта рисует дизайнер, но на самом сайте всё будет описано кодом?).

Как правило, fullstack-разработчика нанимают для небольших проектов, с которыми может справиться один человек. Такие программисты, как правило, не становятся экспертами ни во фронтенде, ни в бэкенде, зато неплохо разбираются в общей логике работы сайта и взаимодействии пользовательской части с серверной. Это, кстати, очень важно: многие front-end и back-end разработчики просто не понимают друг друга и ставят невыполнимые задачи, а full-stack специалист как раз может стать связующим звеном.

Учиться сразу на fullstack нет смысла: обычно программист сперва осваивает одну часть работы – frontend или backend – и уже потом добавляет к багажу знаний навыки по смежному направлению.

С чего начать?

Чтобы стать полноценным front-end, back-end или full-stack разработчиком требуются годы практики и десятки проектов. Но начать путь к этой профессии можно даже если ты еще не закончил школу: изучать HTML, CSS, JavaScript, практиковаться и оттачивать навыки с помощью IT-курсов для подростков.

Иван Иванов
Пишет про Digital, любит технологии

Должен ли фронтенд разработчик уметь писать бэкенды?

Читаю твиттер и удивляюсь тому, какое разделение разработчиков (или раскол?) на западе. Под термином фронтенд там подразумевают исключительно CSS и HTML. Разработчики пытаются себя оградить от не декларативных ЯП и фокусируются больше на дизайне, типографике, доступности и удобстве использования. То есть, там JavaScript это прямо настоящий инжиниринг, это программирование эквивалентное проектированию на С++, ну или что-то около того. Таким программистам чуждо прекрасное и ближе данные и тяжелые вычисления.

В какой-то степени это забавно, потому что сам ты варишься в беларуском аутсорсинге, где под фронтендом, в первую очередь, подразумевают JavaScript, React, Angular, Vue и все такое. HTML и CSS — у нас это называют верстка и к этому, к сожалению, тут вообще серьезно не относятся. Это так, придаток. Каждый должен знать. А вот знает ли на самом деле? Это уже другая история.

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

Должен ли разработчик, который идентифицирует себя, как фронтенд инженер, уметь писать бэкенды?

Мне кажется должен. Все эти классификации и идентификации, фулстеки и бэкенды не стоят ничего. Вспомните, кто создал Веб. Сэр Тимоти Джон Бернерс-Ли — вот кто должен быть примером современному фронтенд разработчику, помимо HTML и первого браузера, написанного на Objective-C, он создал и первый сервер — CERN httpd.

Бэкендер? Фронтендер? Программист в первую очередь. Веб не может существовать без серверов.

С другой стороны, сейчас немного и время другое. Профессия “ программист” начинает понемногу обрастать более узкими специализациями и специальностями. Это как у врачей, есть врач общей практики — терапевт, а есть узкие специалисты — оториноларинголог или офтальмолог. Это лучшая аналогия, как по мне…

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

BFF — Backend for Frontend

А такие вообще есть? В одном из подкастов я слышал, что идею BFF — Backend for Frontend первым продал Netflix. Я же впервые о таком концепте узнал из книги Сэма Ньюмена “Создание микросервисов”.

Ниже оригинальная картинка из книги.

В чем суть? Представьте, что у вас многосервисная архитектура, где над каждым сервисом работает отдельная команда, которая поставляет свой API. Разные сервисы имеют разные коммуникационные каналы или протоколы. Кто-то организует все согласно REST с HTTP, a у кого-то SOAP. У кого-то формат ответа в JSON, у кого-то в XML.

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

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

Это как раз случай, где связующее ПО (middleware server) было бы уместно, эдакий фасад или адаптер, если хотите, который разрабатывается для удобства разработки и организации клиентской части. По сути, продолжение фронтенда на серверной стороне.

Причем надо сказать, что это справедливо не только для микросервисной архитектуры, но и для монолита. Между тяжелым бэкендом на Java, который ближе к данным, и клиентом, который ближе к пользователю, может быть тоже промежуточное ПО. Это могли бы быть легковесные бэкенды, написанные на не столь громоздких серверных фреймворках — node.js + express или python + django.

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

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

А. Купер “Психбольница в руках пациентов”

Server-S >Серверный рендеринг — еще одна вариация бэкенда, с которой должен быть знаком фронтенд инженер.

Если копнуть историю веба, то становиться очевидным, что серверный рендеринг (Server-Side Rendering) это не есть что-то концептуально новое, подход этот очень старый. Даже можно сказать первый из.

До появления “толстых” клиентов и AJAX, связывание данных и динамическое построение веб-страниц происходило на сервере.

Шаблон готового HTML-документа, который пользователь получает и видит на клиенте, лежал на сервере в виде JSP-страницы, пронизанной скриплетами написанными на Java. То же самое с ASP и C# или CGI и каким-нибудь PHP. Это всё инструменты фронтендера прошлого. Править верстку приходилось в кодовой базе бэкенда. И наоборот, работа с данными осуществлялась прямо там, рядом с декларативным описание веб-документа и его стилями.

Как назвать такого специалиста? Бэкендер, который правит верстку? Или фронтендер, который копается в серверном коде?

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

​Кто такие backend и frontend разработчики?

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

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

Front-end – «лицевая» часть сайта: всё, что видит пользователь. Меню, текст, картинки, раздражающие (или, если сделано хорошо, не раздражающие) рекламные баннеры – всем этим занимается frontend-разработчик. В разработке дизайна он тоже участвует: «рисует» всё, конечно, веб-дизайнер, но контролирует его работу именно фронтенд.

Задачи frontend-разработчика

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

Три основных инструмента frontend-разработчика: HTML, CSS, JavaScript.

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

Если фронтенд создает часть для пользователя, то бэкенд работает для сервера – оборудования, на котором находится сайт.

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

Всё, что скрыто от глаз пользователей и работает на сервере – это и есть backend-разработка.

Задачи backend-разработчика

  • Создать базу данных и программы, которые будут записывать информацию в базу и забирать её оттуда;
  • Защитить данные: шифровать пароли и ценную информацию, настроить доступы и многое другое;
  • Чтобы база не пропала в результате какого-то сбоя, нужно регулярно создавать её запасные копии – бэкапы. Это делается автоматически, но настраивает систему резервного копирования именно backend-разработчик;
  • Писать скрипты и программы, которые обрабатывают то, что не видит пользователь.

В конечном итоге, бэкенд-разработчик отвечает за всё, что не относится к «фронтальной» части сайта.

Инструменты бэкенд-разработчика: Java, SQL, C#, Python.

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

Full-stack-разработчик

По данным «Мой круг» full-stack и back-end разработчики в 2020 году получают до 140 тысяч рублей. Front-end – до 125 тысяч.

Может ли один и тот же человек заниматься и фронтенд, и бэкенд разработкой? Если он разбирается и в том, и в другом – почему нет: такой разработчик называется Full Stack.

Он умеет решать любые задачи по разработке веб-сервисов и сайтов: знает серверные языки, JavaScript, HTML и CSS, может оптимизировать сайт под поисковики и превратить сделанный в Photoshop макет дизайна в рабочий интерфейсный код (вы же помните, что интерфейс сайта рисует дизайнер, но на самом сайте всё будет описано кодом?).

Как правило, fullstack-разработчика нанимают для небольших проектов, с которыми может справиться один человек. Такие программисты, как правило, не становятся экспертами ни во фронтенде, ни в бэкенде, зато неплохо разбираются в общей логике работы сайта и взаимодействии пользовательской части с серверной. Это, кстати, очень важно: многие front-end и back-end разработчики просто не понимают друг друга и ставят невыполнимые задачи, а full-stack специалист как раз может стать связующим звеном.

Учиться сразу на fullstack нет смысла: обычно программист сперва осваивает одну часть работы – frontend или backend – и уже потом добавляет к багажу знаний навыки по смежному направлению.

С чего начать?

Чтобы стать полноценным front-end, back-end или full-stack разработчиком требуются годы практики и десятки проектов. Но начать путь к этой профессии можно даже если ты еще не закончил школу: изучать HTML, CSS, JavaScript, практиковаться и оттачивать навыки с помощью IT-курсов для подростков.

Иван Иванов
Пишет про Digital, любит технологии

Бэк-энд разработчик (Back-end developer)

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

Бэк-энд разработчик — боец невидимого фронта.

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

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

Основные инструменты бэк-енд разработчика — серверные языки программирования: такие как PHP, Python, Ruby, Java, Perl, Node JS (программная платформа). Дополнительно к Node JS полезно изучить Express (библиотека для взаимодействия платформы Node JS с сервером) и Mongo DB (базу данных для получения и хранения информации).

В качестве дополнительных средств применяются фреймворки Symfony, Codeigniter, Yii, Zend Framework, Kohana и др. С целью хранения данных используются MySQL/SQLite.

Особенности профессии

Современным разработчикам недостаточно только писать код для программ. Так работали программисты 10-15 лет назад. В настоящее время такой термин неуместен, потому что в работе часто можно обойтись без написания кода, просто соединяя между собой готовые части в единую конфигурацию. И программистов сейчас называют «разработчик» или «инженер».

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

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

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

Плюсы и минусы профессии

Высокооплачиваемая и востребованная профессия.

Место работы

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

Мастер Йода рекомендует:  Плагин для Firefox против зараженных сайтов
Добавить комментарий