Кто такой front-end разработчик и как им стать

Что должен знать Frontend-разработчик

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

Язык CSS. Практически на всех курсах CSS преподается вместе с HTML. CSS – это система стилей, за счет которых сайты смотрятся красиво.

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

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

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

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

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

Мы подобрали ряд книг, ознакомившись с которыми, вы сможете понять, что сложнее — 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 – Робин Никсон

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

Создание общего модуля типов

• Разумеется, определение типов. Его будут использовать на своей стороне два других компонента. Также этот компонент будет экспортировать мок с фейковыми данными, используемый компонентом фронтенда, когда у него нет связи с бэкендом. Последняя часть нужна только в качестве примера, вероятно, вы найдёте более удобные способы решения проблемы на своей стороне.
• Бэкенд-сервис, экспортирующий функцию, готовую к созданию HTTP-веб-сервера и передаче фиксированного ответа на каждый запрос. Так как это пример, сервер будет очень простым, однако его будет достаточно, чтобы показать полезность подхода. В своём коде он будет использовать общее определение типов для проверки того, что ответ имеет нужный формат.
• React-компонент, который будет запрашивать данные у сервиса (или использовать данные мока) и рендерить их на странице. Разумеется, в его коде тоже будет использоваться общее определение типов.

Чистая архитектура. Искусство разработки программного обеспечения. Роберт Мартин

Да, последние книги про архитектуру, но иначе никак — разработчик не должен писать код ради кода, он должен думать о пригодности этого кода в будущем. Даже не так — разработчик должен писать код ради бизнеса. А чтобы он был ради бизнеса, он должен быть поддерживаемым в будущем. Роберт Мартин писал книгу не для Frontend-developer`ов, а для всех разработчиков и им сочувствующих

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

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

Заключение

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

Спасибо за внимание!

Что нужно знать фронтенд разработчику?

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

К ним относятся:

1. HTML и CSS

Без HTML и CSS разработка внешнего интерфейса невозможна. Эти две технологии обеспечивают строение основополагающей части любого сайта.

Язык разметки HTML отвечает за то какие элементы должны находится на сайте. Например: кнопки, ссылки, формы заполнения полей, заголовки и т.д.

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

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

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

2. JavaScript

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

Использование CSS, HTML и JavaScript позволяет разрабатывать как простые, так крупные продвинутые веб-приложения.

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

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

3. Frontend фреймворки (на JavaScript)

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

Одни из самых популярных фреймворков это:

• ReactJS
• Vue.js
• Angular

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

4. jQuery

jQuery — это JS библиотека, которая упрощает обработку событий, а также обход и манипулирование DOM элементом веб-сайта.

Почти 3 из 10 миллионов веб-сайтов используют jQuery. Это набор расширений и плагинов, которые ускоряют разработку с помощью JavaScript. jQuery обычно используется для:

• Манипуляции и событий с HTML тэгами
• Автоматической перестановки и изменение размеров макетов сетки
• Создания счетчика обратного отсчета
• Автозаполнение формы поиска

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

5. CSS препроцессор

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

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

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

На сегодняшний день доступны 2 популярных CSS препроцессоров. Это SASS и LESS. Оба отличаются синтаксисом

SASS гораздо более популярен среди веб-дизайнеров. Это может быть связано с тем, что SASS немного старше. Изначально LESS поддерживался хорошо зарекомендовавшим себя фреймворком Bootstrap. Но с версией 4 проект Bootstrap официально перешел на SASS, что еще больше повысило его популярность.

6. API-интерфейсы и службы RESTful

Другой набор передовых концепций, относящихся к frontend разработке — это API-интерфейсы и службы RESTful.

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

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

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

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

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

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

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

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

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

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

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

• Знание хотя бы одного «серверного» языка программирования: PHP, Go, ASP.NET, C/C++, Python, Ruby, Java. В некоторых случаях достаточно знания JavaScript для бэкенда (Node.js), но это скорее как плюс, чем как пункт.
• Знание API (REST, SOAP — всё реже).
• Понимание принципов работы серверов Apache, NGINX, IIS и проч.
• Навыки написания юнит-тестов и покрытия кода тестами.
• Основы сетевой безопасности и знание инструментов её обеспечения.
• Знание популярных веб-фрейморков, которые способны решать задачи разработки конкретного приложения.
• Навыки написания запросов к БД и проектирования баз данных.
• Знание основ фронтенда — и это не плюс, а обязательный пункт, иначе вам придётся крайне непросто проектировать и писать приложение.

• Администрирование UNIX или знание Linux (можно любого одного дистрибутива).
• Знание принципов работы HTTP (кэширование, авторизация, структура сообщений, заголовки, коды ответов и проч.)
• Модель OSI. 
• Навыки составления и оценки технического задания (ТЗ) — очень важный навык, который необходим для сбора самой точной информации о требованиях к ПО. 

Топ-5 востребованных технологий у специалистов по данным «Хабр Карьера», 2 полугодие 2019 года, нижняя строка — «дополнительные» скиллы.Принцип формирования списка: пользователи, внося данные о заработной плате, указывают скиллы, которые у них в приоритете (что они умеют делать!). То есть это не требования работодателя, а навыки специалистов каждой категории.роадмап, но уже для бэкенд разработчика

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

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

Пользовательский опыт

▍Поддержка устаревших браузеров (полифиллы)

полифиллыэтомCan I Use

• Angular. В документации к Angular есть особый раздел, посвящённый браузерной поддержке.
• React. Проекты, создаваемые с помощью Create React App, поддерживают, как и ReactDOM, браузеры, начиная с IE 9. Эта поддержка основана на использовании полифиллов.
• Vue. Здесь особенности поддержки устаревших браузеров описаны в к CLI.

▍Локализация и интернационализация

• Использование на сайте выпадающего списка с перечнем языков, поддерживаемых проектом.
• Доступ к сведениям о географическом местоположении пользователя (с помощью браузерного API Geolocation) и адаптация веб-сайта в соответствии с полученными данными.
• Указание сведений о языке в URL. Например, это может выглядеть так: , или так: , или даже так: .

• Angular. Angular, повторюсь, это полноценный фреймворк, он даёт разработчику готовое решение.
• React. Задачи интернационализации проектов можно решать с помощью популярной в React-среде библиотеки react-i18next.
• Vue. В решении рассматриваемых нами задач очень хорошо показывает себя библиотека vue-i18n.

▍Доступность контента

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

a11yproject.com

Angular. В документации к этому фреймворку есть особый раздел. Разработка доступных проектов поддерживается и на уровне Angular CDK.
React. Речь о доступности ведётся и в документации к библиотеке React. Существует и специальная библиотека — react-a11y

Но эта библиотека больше не поддерживается, поэтому пользуйтесь ей с осторожностью и учитывайте то, что её планируется заменить на библиотеку react-axe.
Vue. Разрабатывать доступные проекты на Vue поможет плагин vue-a11y

При создании библиотеки vuetify тоже учтены соображения доступности.

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

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

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

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

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

ES5 vs. ES6

Еще одна важная концепция, которую нужно понять, это отношение ECMAScript к JavaScript. Есть два основных направления в JavaScript, c которыми вы можете столкнуться в повседневной работе: ES5 и ES6. ES5 и ES6 это стандарты ECMAScript, которые использует JavaScript. Вы можете думать о них, как о версиях JavaScript. Окончательная спецификация ES5 была выпущена в 2009 и мы пользуемся ею до сих пор.

ES6, так же известный как ES2015, является обновленным стандартом и предусматривает новые конструкции языка JavaScript, например константы, классы и шаблонные строки

Важно отметить, что ES6 привносит новые возможности языка, но по прежнему определяет их семантику с точки зрения ES5. К примеру, классы в ES6 являются лишь “синтаксическим сахаром” для уже существующих в JavaScript прототипных наследований

Важно знать оба стандарта, ES5 и ES6, поскольку на текущий момент в разработке приложений могут использоваться как один, так и другой. Делюсь хорошими инструкциями по ES6: ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning и Getting Started with ES6 — The Next Version of JavaScript от Dan Wahlin

После их прочтения ознакомьтесь с полным списком отличий ES5 от ES6 в . Если вам все еще не достаточно, то зайдите на этот Github репозиторий с функциями ES6.

Больше практики

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

Фронт + бэк = фулстэк

Если в двух словах, то фронтенд (Front-end) — это сцена, бэкенд (Back-end) — закулисье, а фулстек (Full Stack) — их совокупность, то есть вся подготовительная работа к спектаклю и сам спектакль.

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

• Превращает макет дизайнера в код. Щелкните правой кнопкой мыши прямо сейчас, выберите «Исходный код страницы» — его написал фронтендер.

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

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

• Готовит данные к отправке на сервер или в сторонние приложения.

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

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

Коды для фронта и бэка пишутся на разных языках. Для первого наиболее актуальны HTML, CSS, JavaScript, для второго — Ruby, PHP, Python, Java.

Фулстэк-разработчик владеет сразу несколькими языками, отвечает и за «темную» серверную сторону, и за «светлую» пользовательскую. Иногда он также обладает компетенциями UI/UX-дизайнера. В общем, универсал.

Подайте заявку на работу как стажера или junior разработчика

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

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

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

Что следует знать фронтендщику о дизайне и не только

Сетка. Практически все макеты строятся на основе сетки. Зная её, верстать становится проще, а учитывая, что теперь у нас есть grid, это превращается в удовольствие.
Основы Figma. Говорить с дизайнером на одном языке и понимать особенности и отличия вёрстки в Figma и WEB-е.
БЭМ

Неважно, как вы верстаете, будь то CSS-in-JS или CSS-modules, методология позволяет навести порядок в голове и мыслить правильными категориями.
Наследование стилей. Многие CSS свойства наследуются от родительского блока, в Figma это отсутствует.Чтобы не переписывать все стили, не глядя , помните, какие свойства берутся от родителя, а какие объявляются в самом элементе.
Конечные автоматы

Понимать, сколько состояний может быть у того или иного элемента на странице.

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