Браузер на страже api-запросов: строим безопасное общение фронтенда с бэкендом

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

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

Выделим 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, это хранилище весьма безопасно для сессионных данных

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

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

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

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

Программы для версионизации

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

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

1. GitKraken — платная программа. Предназначена для Ubuntu и macOS.

2. Tortoise — вариант для Windows, правая рука backend-разработчика.

3. Ещё одно решение кроссплатформенного версионизатора — программа от Atlassian.

Компания предлагает нескольких передовых и надёжных продуктов для разработки, поддержки, управления кодом и рабочими задачами — не только техническими. Конкретно для работы с Git есть бесплатный клиент Sourcetree. Его выбирают, если по каким-либо причинам GitKraken и Tortoise не подходят.

Что нужно уметь

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

• зна­ние Python, PHP, Ruby или Java (если всё сра­зу — это огром­ный плюс);
• часто хотят, что­бы вы зна­ли JavaScript и Node.js, что­бы реа­ли­зо­вы­вать часть логи­ки на клиенте;
• AJAX — помо­га­ет обнов­лять дан­ные на стра­ни­це без её перезагрузки;
• базы дан­ных — MySQL, PostgreSQL или MongoDB;
• Django и дру­гие фрейм­вор­ки для быст­рой разработки;
• уме­ние рабо­тать с API;
• вла­де­ние Git или любым инстру­мен­том кон­тро­ля версий.

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

День Из Жизни Фронтенд Разработчика

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

Эта компания имеет команды UI/UX дизайнеров, фронтенд и бэкенд разработчиков, а также системных администраторов.

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

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

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

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

Go

Go (часто также Golang) — компилируемый многопоточный язык программирования, разработанный внутри компании Google. Язык Go разрабатывался для создания высокоэффективных программ, работающих на современных распределённых системах и многоядерных процессорах.

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

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

• писать сетевые инструменты;
• разрабатывать ПО для распределённых систем;
• писать ПО, обрабатывающее большие объёмы информации.

Будущее бэкендера

• Стандартный путь внутри своего стека: junior с односложными задачами и запросами, middle с глубокими навыками программирования и отличным владением стеком, senior с проектированием, архитектурами, высокими нагрузками и прочим кубернетесом, team lead с управленческими навыками т.д. Это хороший корпоративный путь, внутри которого можно менять компании, проекты, отрасли, расти и быть востребованным.
• Переход на другой стек и выход из веба: нередко именно бэкенд-разработчики осваивают Java, С/С++ и уходят в «кровавый энтерпрайз», десктопные приложения, разработку средств разработки, нейросети, компьютерное зрение и т.д. Действительно, бэкендеру проще осваивать эти трудные технологии и ЯП.
• Переход в фуллстек-разработку: бэкендер ближе к фуллстеку и совершить такую трансформацию можно совершенно незаметно.
• Переход в DevOps, DevSecOps, информационную безопасность — когда знаешь веб-приложения изнутри как свои пять пальцев, этот путь оказывается логичным и весьма доходным.
• Переход на менеджерские позиции, если есть желание и склонность к управленческим задачам. 
• Фриланс и своё программное агентство — для смелых и в меру азартных ребят. Можно неплохо зарабатывать на аутсорс-разработке (особенно если идти в сторону фуллстек-разработки).

Java

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

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

Специалист по машинному обучению (Middle)

MyTona, Удалённо, По итогам собеседования

tproger.ru

Вакансии на tproger.ru

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

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

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

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

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

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

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

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

Go

Go (часто также Golang) — компилируемый многопоточный язык программирования, разработанный внутри компании Google. Язык Go разрабатывался для создания высокоэффективных программ, работающих на современных распределённых системах и многоядерных процессорах.

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

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

• писать сетевые инструменты;
• разрабатывать ПО для распределённых систем;
• писать ПО, обрабатывающее большие объёмы информации.

Выбираем направление

Если вам интересно заниматься именно внешним видом, то продолжайте идти в направлении Frontend. Даже HTML требует времени, чтобы полностью им овладеть. Не говоря уже о CSS, в котором понадобится овладеть позиционированием, наследованием, адаптивной вёрсткой и многим другим.

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

Изучать PHP достаточно долго, потому что он предоставляет огромные возможности:

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

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

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

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

Frontend

В QIWI я с конца 2014 года, начинал работать как разработчик iOS–приложений, и, в принципе, пару лет занимался разработкой QIWI-кошелька. При этом не могу сказать, что было скучно – задачи были довольно разные и в рамках одного приложения: мы занимались интеграцией кошелька с другими нашими сервисами, чинили баги, подтягивали анимацию. Кроме этого, был занятный опыт по созданию приложения для Apple Watch. Потом немного расширил фокус и поработал еще и над iOS-приложением для «Совести».

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

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

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

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

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

Java

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

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

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

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

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

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

Полезные ссылки

Несколько полезных ссылок по профессии:

• Вопрос «Что нужно знать для backend-разработки?» на Хабре с ответами опытных программистов;
• Подкаст, посвященный бэкенду;
• «Мой извилистый путь от охранника до backend-разработчика» — история становления;
• Статья «Для чего back-end разработчику учить JavaScript»;
• Сообщество программистов в «ВКонтакте»;
• Stackoverflow — востребованный IT-ресурс с вопросами от новичков и ответами от опытных разработчиков;
• Активное сообщество веб-разработчиков Web-Shake.

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

FAQ

Как вы выбираете на какие образовательные платформы онлайн курсов сделать обзор?

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

Как много вы изучаете перед написанием обзора на платформы для онлайн обучения?

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

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

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

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

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

Как этот сайт для обзоров платформ онлайн обучения отличается от других?

Каждая платформа для обзора MOOC уникальна и имеет свои цели и ценности. Наши обзоры онлайн обучения на 100% честные и написаны после проведения тщательного анализа. Это цель, которой недостаёт многим платформам по обзору сайтов онлайн обучения, поэтому мы считаем это нашей суперсилой!

Командная работа

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

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

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

Разговаривайте, спрашивайте, уточняйте. Это нормально. Так же нормально, как пойти и усердно погуглить что-то, если не получается.

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

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

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

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

Делегирование бизнес логики

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

В основном лучше делать это на бекенде. Причины:

1. Бэкенд может быть изменен намного быстрее — один деплой на все сервера и обновленная логика будет доступна. Фронтенд же, на руках у пользователей и деплой не будет означать что старая логика в которой возможно присутствуют ошибки, не будет запущена на продакшене.
2. Если бизнес логика требует вычислительной мощности, её тяжело протестировать на различном спектре устройств с которых пользователи могут заходить на ваше приложение. Если вы заходите на него с топового macbook, то не сможете представить насколько медленными будут вычисления на chromebook за 100 долларов.
3. Более безопасно блокировать бизнес логику на бэкенде. Предположим у вас есть функционал только для pro пользователей. Если ограничение будет сделано на фронтенде, то кто-либо потенциально может провести реверс-инжиниринг и получить доступ к функционалу.

C# .NET

Фреймворк с открытым исходным кодом ASP.NET от Microsoft используется для создания веб-сайтов с помощью таких языков, как Visual Basic (VB), C#, F# и других.

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

Выложенный в открытый доступ в 2016 году, .NET может интегрироваться с iOS, Linux и Android через .NET Core. Он очень стабилен и надёжен, что делает его популярным выбором для бизнеса. Поскольку .NET — продукт Microsoft, у него достаточно хорошая поддержка.

C# — высокоуровневый язык программирования. Это означает, что разработчики могут писать на нём программы, независимые от архитектуры процессора конкретного компьютера.

C# популярен среди разработчиков, потому что он обладает некоторыми преимуществами C++, но на нём проще писать код и избегать при этом грубых ошибок.

Что можно делать на .NET

С помощью .NET вы можете:

• создавать настольные приложения;
• создавать мобильные приложения;
• создавать веб-приложения и игры;
• работать с большими данными;
• и ещё много чего.

Минусы .NET

Обычно это сильно дороже чем опенсорсные проекты на JavaScript & PHP. Но если есть команда с сильными навыками в этом стеке, то это может быть выгодным решением.

Базовые требования к профессионалу

Стажёр (Intern)	Младший (Junior)	Средний (Middle)	Старший (Senior)	Ведущий (Lead)
JavaScript Typescript HTML CSS React.js	JavaScript React.js HTML CSS Redux	JavaScript React.js Vue.js Redux CSS	JavaScript React.js Angular Vue.js Redux	React.js JavaScript Vue.js Angular Typescript
—	Git, БЭМ, адаптивная вёрстка, СУБД	+кроссбраузерная вёрстка	+управление разработкой, Ruby on Rails	+ управление людьми, проектирование архитектуры приложения

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

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

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

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

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

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

JavaScript

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

Его преимущества в том что можно писать бекенд, фронтенд и фулстек.

Причем можно писать как веб-приложения, так и мобильные приложения.

Есть большое сообщество и много готовых решений.

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

С JavaScript создаются веб-приложения и программное обеспечение, а именно:

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

Минусы

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

Для старта и более простых сайтов часто выбор падает в сторону PHP.

Для высоких нагрузок берут что то типа Go или Rust.

Однако все зависит от команды, существующих компетенций и наработок. Если команда есть, есть компетенции и наработки, то можно пробовать стек JS/NodeJS.

Что читать для знакомства с фронтендом и бэкендом

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

Front-end

HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств — Фрейн Бен

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

JavaScript. Шаблоны – Стоян Стефанов

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

CSS. Каскадные таблицы стилей. Подробное руководство – Эрик А. Мейер

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

Accessibility for everyone – Laura Kalbag

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

Back-end

Изучаем PHP 7. Руководство по созданию интерактивных веб-сайтов – Давид Скляр

Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.

Ruby on Rails для начинающих. Изучаем разработку веб-приложений на основе Rails – Майкл Хартл

Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby

Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.. Django 2.1

Практика создания веб-сайтов на Python – Владимир Дронов

Django 2.1. Практика создания веб-сайтов на Python – Владимир Дронов

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

Spring в действии – Крейг Уоллс

Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Робин Никсон

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

Кэширование

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

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

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

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

Какие инструменты нужны, чтобы создать серверную часть сайта

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

Что такое frontend и backend-разработка

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

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

Курс «Профессия Веб-разработчик»

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Кто такой frontend-разработчик

Над созданием веб-ресурса работает целая команда. Наряду с веб-дизайнером, верстальщиком и SEO-специалистом трудится и frontend-разработчик.

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

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

Чем занимается

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

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

Кроме этого, в основные обязанности входит:

1. Верстка дизайна веб-сайта. Цель этого этапа – создание структуры HTML-страницы, элементы которой будут совпадать с теми, что на макете дизайнера. Элементами могут быть кнопки, картинки, текст и т. д. Для работы понадобится не только HTML, но и CSS.
2. Регулирование функционала сайта: отладка кнопок, клавиш, форм для заполнения личных данных, полей для обратной связи, форм для комментариев, слайдеров, фотогалерей. Фронтенд может создать свою программу (скрипт) или взять готовую.
3. Проверка функционирования всех элементов интерфейса, их тестирование и доработка при необходимости.

После передачи проделанной работы в руки заказчику фронтенд может и дальше с ним сотрудничать:

1. Дает рекомендации и советы по поводу реализации и оптимального эксплуатирования определенной опции на сайте.
2. Оптимизирует скрипты, чтобы сайт стал загружаться быстрее.
3. Создает шаблоны для CMS.

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

Если хотите посмотреть HTML-код, который написал frontend-разработчик, нажмите “Ctrl+Shift+L”. Другой способ – нажать правой кнопкой мыши на пустом месте страницы и в появившемся окне нажать на “Посмотреть код”.

Эта деятельность требует умения владеть большим набором современных технологий.

JavaScript

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

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

У JavaScript большое сообщество, и для его изучения в Сети есть много полезных материалов.

Значительно расширяет возможности JS программная платформа Node.js. С её помощью код, написанный на JS, можно запускать без браузера на бэкенде. А наличие огромного количества готовых решений в пакетной экосистеме npm позволяет разработчику не тратить время на создание большинства типовых решений.

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

С JavaScript создаются веб-приложения и программное обеспечение, а именно:

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

День Из Жизни Бэкенд Разработчика

Теперь, давайте решим спор “front end vs. back end”, взглянув на него с другой стороны. Ваш день начинается почти так же, и вы отправляетесь на встречу с техническим директором вашей компании.

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

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

Во время ланча вы слышите о смене дизайна сайта

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

Что в итоге

Backend-разработка стала для меня еще одним хорошим опытом – я научился писать код и проводить ревью, продумывать архитектуру. Это на самом деле интересно.

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

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

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