Как стать бэкенд-разработчиком в 2021 году: дорожная карта

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

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

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

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

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

Суть деятельности

Как известно, любые интернет-сервисы, сайты и мобильные приложения включают в себя две составляющие: backend и frontend:

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

Пример из жизни

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

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

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

Лучшие книги и средства обучения

• Стив Макконнелл «Совершенный код». Просто читайте эту книгу и впитывайте то, что там написано. Вы сразу (нет, не сразу) поймёте, что такое грамотная разработка, и чем она отличается от говнокода.
• htmlbook.ru — просто добавьте этот сайт в закладки, закреплённое и в своё сердце. Это великолепная энциклопедия веб-разработчика на русском языке с адекватной и удобной структурой. 
• Книги Кайла Симпсона — ищите то, что вам нужно и то что актуальной даты издания. Он очень круто пишет и структурирует информацию о JavaScript.
• Хавербеке Марейн «Выразительный JavaScript. Современное веб-программирование» — практически ценная книга от настоящего профессионала. Если не ошибаюсь, у «Питера» пережила издание в 2019 году, свежак.
• webref.ru — очень классный сайт для разработчиков веба, разбирайтесь, обучайтесь. 
• Книги по вашей технологии — переводные или в оригинале (ищите O’Reilly).
• codecademy.com — люблю этот сайт и иногда использую для поддержания мозгов в порядке. Интерактивный сайт для обучения разработке на разных языках программирования на английском, с самого низкого, нулевого, уровня. Есть базовый бесплатный курс, есть платный — 15$ в месяц. Нравится общая интерактивность, значки, ачивки и постепенное нарастание сложности задач. 
• htmlacademy.ru — есть бесплатные курсы, части курсов и блог. Берите все знания, что сможете унести.
• Бесплатные курсы и видео, которых бесконечно много на Youtube на русском и английском языках. Просто слушайте, повторяйте, систематизируйте знания. Для начала подойдут любые, очень скоро вы научитесь отличать крутые вещи от дилетантских. 
• Ну и конечно — не бойтесь и не стесняйтесь коммитить в open source проекты (начните с небольших, а там и до библиотек, и до фреймворков дойдёте), ковыряйте чужой код, изучайте принципы и алгоритмы.
• Хорошая статья с очень простым английским и подсказками для начинающих свой путь в JavaScript.
• Конечно же Хабр. Одна команда RUVDS сколько крутого по JavaScript и фронтенду перевела!

Работа с Open Source

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

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

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

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

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

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

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

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

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

CMS/CMF

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

https://w3techs.com/technologies/overview/content_management/all

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

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

Java

Java — один из самых популярных языков программирования. Он универсален и используется уже более 20 лет.

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

Чемпионат Tech Monsters Night

4 июня в 22:00, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

У Java большое сообщество, и в интернете можно найти ответы практически на любые вопросы о языке.

Что можно делать на Java

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

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

Как стать frontend-разработчиком с нуля

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

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

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

Чтобы стать frontend-разработчиком с нуля, первым делом познакомьтесь с HTML-кодом и возьмитесь за изучение CSS.

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

А дальше оттачивайте свои навыки, пополняйте знания.

Можно заниматься саморазвитием, читать тематическую литературу. Список книг по frontend-разработке есть на нашем блоге.

Более быстрый способ узнать все тонкости профессии – обзавестись наставником. Найти его можно на онлайн-курсах.

Где учиться

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

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

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

Вот несколько хороших курсов:

• Профессия Frontend-разработчик
• Frontend-разработчик с нуля
• React: библиотека фронтенд-разработки №1
• Специализация Frontend-разработчик
• Frontend-разработчик
• Профессия “Фронтенд-разработчик”

Узнать подробности и ознакомиться с полным перечнем курсов по frontend-разработке можно на нашем блоге.

Где работать

Frontend-developer требуются на предприятия, создающие софт для бизнеса, в IT-компании по разработке сайтов, мобильных и веб-приложений, web-студии, стартапы, агентства аутсорсинга.

Карьерная лестница начинается с пункта “стажер”. Работа позволит набраться опыта и узнать на практике, что такое фронтенд-разработка.

Вакансии можно найти на профильных IT-ресурсах или на популярном сервисе по поиску работы hh.ru.

Если вам достаточно подработки или вы еще совсем “зеленый”, найти работу и испытать себя можно на биржах фриланса. Есть международные сервисы, например, Upwork, Freelancer, Joomlancers, Gigster, Codeable и YouTeam. А есть русскоязычные: Kwork, FL, Freelance.

Биржи помогут начинающим программистам набить руку, собрать портфолио и научиться работать с заказчиками.

У опытного специалиста есть три варианта совершенствования в работе:

1. Вертикальный – рост по карьерной лестнице, постепенное завоевание новых должностей.
2. Горизонтальный – непрерывное совершенствование своих навыков, что приводит к повышению цены за свои услуги.
3. Диверсификационный – обретение новых навыков, смежных специальности фронтенд-разработчик, и последующая переквалификация. Так часто frontend-developer превращается в backend-разработчика.

Кросс-доменные запросы

В качестве протокола безопасности, если запрос к бэкэнду поступает из другого домена, он будет отклонен из-за того что он является кросс-доменным запросом. Такое поведение обусловлено политикой одного источника(Same-Origin Policy). Данная политика запутывает людей в процессе разработки, поскольку порты тоже считаются частью домена.

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

Решения:

• Указание одного домена в файле и разграничивание фронтенда и бекенда с помощью nginx*.
• Включить кроcс-доменные запросы на сервере в зависимости от переменной среды, если production то false, если development то true.
• Включить домен с которого ведется разработка в белый список исключений.

Межсайтовая подделка запросов(CSRF) — так называется атака, которая делает несанкционированный запрос от пользователя инициированный с другого сайта.

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

Где браузеру стоит хранить сессионные данные

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

Выделим 4 варианта хранилища, которые часто используют в современном мире:

• Cookie
• localStorage
• Session storage
• HttpOnly Cookie

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

Cookie

Традиционный способ хранения информации на стороне клиента. Управлять этим хранилищем может как JS фронтенда, так и сервер через заголовок Set-Cookie. Cookies привязываются браузером к домену сервера и, в случае Same Origin Policy, будут автоматически подставляться в заголовки запросов к этому домену. При кроссдоменном запросе браузер будет требовать разрешение на обмен учётными данными — credentials. Cookies уязвимы к CSRF-атаке. В современных браузерах могут иметь опцию samesite, чтобы защититься от этой атаки, но с ней перестанут работать для кроссдоменных запросов. Кроме того, Cookie подвержены XSS атаке. Имеют ограничения по объему данных (4кб) и по количеству cookies на один домен.

localStorage

localStorage привязывается к документу источника (связка домен-протокол-порт), то есть, к фронтенд-странице. Любая вкладка этого источника в браузере имеет к нему доступ. Кроме того, браузер не отправляет автоматически на сервер данные, хранящиеся в localStorage, а значит, сервер самостоятельно не может ни писать, ни читать данные, что делает localStorage защищенным от CSRF. Ещё один значительный плюс — объём хранимых данных значительно больше, чем у Cookie. Несмотря на ряд преимуществ, localStorage никак не защищён от XSS-атак, что делает его опасным хранилищем для сессионных данных.

Session storage

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

HttpOnly Сookie

Выделяю этот способ отдельно от обычных Cookies, потому как у него есть одно решающее отличие: фронтенд-приложение не имеет доступа к Cookies с флагом httpOnly. Проще говоря, такие Cookies читать и писать может только сервер. Делает он это через заголовки cookie и set-cookie соответственно

Это важное отличие защищает их от XSS-атак. В сочетании со средствами защиты от CSRF, это хранилище весьма безопасно для сессионных данных

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

Как найти проект

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

• СУБД (система управления базами данных);
• фреймворков (набор средств для выполнения определенной задачи);
• кеширования;
• методов авторизации;
• Docker (крайне полезное ПО для крупных приложений) и др.

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

Конференция EPAM Insider

27 мая в 18:30, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

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

Дмитрий Нгуен, проект-менеджер, iOS-разработчик:

Любовь Любимова, руководитель HR-отдела компании SFERA:

Способы обучения профессии

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

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

Лучшие вузы России:

• Российский новый университет;
• Московский государственный университет геодезии и картографии;
• Московский технический университет связи и информатики;
• Национальный исследовательский университет «МЭИ»;
• Московский гуманитарный университет.

Компетенция бэкенда

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

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

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

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

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

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

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

Ключевые навыки

Хотя backend – это работа с серверной частью, специалисту в своей работе нужно изучить основы HTML и CSS и уже после этого изучать серверные языки программирования и налаживать работу с БД.

Итак, в своей работе этот специалист должен знать и уметь:

1. Такие языки программирования как PHP (наиболее популярный из всех), Ruby, Python, Java, JavaScript / Node.js.
2. AJAX-технологию для обновления данных в браузере без перезагрузки страницы.
3. Такие БД как  MySQL, PostgreSQL, MongoDB и т.п.
4. Принципы работы UNIX-подобных систем.
5. Основы объектно-ориентированное программирования.
6. Работа с наборами скриптов, ускоряющих разработку веб-сайтов.
7. Работа с Git.

Карьерный рост и зарплата

Карьера бэкенд-разработчика начинается со ступени “стажер”. Средняя заработная плата – 20–40 тыс. руб.

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

Он работает под началом своих старших коллег и перенимает у них опыт. Зарабатывает от 30 до 60 тыс. руб.

Средний специалист на продвинутом уровне разбирается в языках программирования. Активно использует фреймворки и начинает самостоятельно выполняет задачи на проекте. Зарплата колеблется в районе 70–120 тыс. руб.

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

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

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

Цена за его работу начинается от 150 тыс. и может удваиваться, а в некоторых случаях – утраиваться.

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

Если говорить о зарплатах в городах, то выстраивается такая картина:

1. Москва: 80 000–300 000 руб.
2. Санкт-Петербург: 70 000–250 000 руб.
3. Калининград: 40 000–170 000 руб.
4. Ростов-на-Дону: 30 000–220 000 руб.
5. Омск: 40 000–150 000 руб.
6. Хабаровск: 60 000–160 000 руб.

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

Где учиться

• Если фронтент-разработчиком можно стать и после непрофильного вуза (строительство, дизайн, экономика и проч.), то бэкендером гораздо сложнее. Идеальная образовательная основа для бэкенд-разработчика — математическое, физическое и собственно ИТ образование. Именно они дают отличную базу для понимания алгоритмов, функций, паттернов, вычислительных процессов и т.д. 
• С курсами дело обстоит тоже печальнее — вы можете начать изучать какой-то язык (например, PHP или Java) и даже сделать какой-то фуллстековый мини-проект, но только опыт реальной работы даст полное понимание функционирования и взаимодействия всех компонентов, потому что у бэкенда слишком много деталей и подводных камней (даже несмотря на крутые инструменты разработки).
• Именно для бэкенда лучшим образовательным путём мне видится изучение основ серверного языка и путь от стажёра в компании, где есть наставник/ментор по специальности. На реальном проекте и узких задачах вы быстрее поймёте, что к чему.
• Никто не отменяет небольшие open source проекты, в которые можно коммитить.
• И, конечно, должен быть свой сайт (пет-проект), который станет главным тренировочным плацдармом. Путь предстоит не самый простой, поэтому выбирайте ту тематику, которую, кроме самой разработки, вам будет интересно развивать. Например, если вы увлекаетесь спортом и здоровым образом жизни, разработайте приложение-дневник со счётчиками, коннекторами к каким-нибудь датчикам, ачивками и т.д. Это будет полезно и увлекательно (а иногда из таких сайд/пет проектов вырастают коммерчески успешные стартапы). 

Программный процесс

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

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