Frontend — это публичная часть web-приложений (вебсайтов), с которой пользователь может взаимодействовать и контактировать напрямую. Во Frontend входит отображение функциональных задач, пользовательского интерфейса, выполняемые на стороне клиента, а также обработка пользовательских запросов. По сути, фронтенд — это всё то, что видит пользователь при открытии web-страницы. В свою очередь, web-приложение — клиент-серверное приложение, в котором клиентом выступает в основном браузер, а сервером — web-сервер. Логика web-приложения распределена между сервером и клиентом, хранение данных осуществляется преимущественно на сервере, обмен информацией происходит по сети. Проще говоря, это то, что видит пользователь и какие действия выполняет каждый раз, когда подключается к сети интернет и открывает любой браузер. Frontend-разработка — это работа по созданию публичной части web-приложения, с которой непосредственно контактирует пользователь, и функционала, который обычно выполняется на стороне клиента. То есть, фронтенд разработчик работает над тем, чтобы на сайте каждая кнопочка, иконка, текст и окно не только стояли на своем месте, не перекрывали друг друга и выглядели целостно (это веб-верстка), но и чтобы они выполняли свое прямое предназначение — производили какие-то действие (например, чтобы кнопка “купить” открывала корзину, а “play” — запускала воспроизведение фильма или музыки). С целью создания востребованного и доступного продукта (веб-приложения) фронтенд-разработчику необходимо взаимодействовать с другими программистами, дизайнерами, маркетологами, аналитиками и прочими специалистами. Компоненты фронтенд разработки: HTML (HyperText Markup Language) говоря простыми словами — это язык разметки всех элементов и документов на странице, и их взаимодействие в структуре страницы. CSS (Cascading Style Sheets) — это язык характеристики и стилизации внешнего вида документа. С помощью CSS-кода браузер понимает, как именно необходимо отображать элементы. CSS создает шрифты, цвета, определяет расположение блоков сайта, и другое. Также адаптирует один и тот же документ в разных стилях, выводит передачу на экран или для чтения голосом. JavaScript — язык, созданный оживить веб-страницы. Задача JavaScript — откликаться на действия пользователя, обрабатывать нажатия клавиш, перемещения курсора, клики мышкой. JavaScript также дает возможность вводить сообщения, посылать запросы на сервер, а также загружает данные без перезагрузки страницы, и так далее. Главная задача Frontend-разработчика Если вы имеете творческий подход к работе, жаждете разрабатывать и создавать динамические пользовательские интерфейсы, вам однозначно дорога во фронтенд. Вся фронтенд разработка выполняется на стороне пользователя, она не менее важна чем бекенд разработка (о ней мы также упомянем чуть ниже), так как это то, что пользователь видит и с чем взаимодействует. Основная задача фронтенд специалиста — это связать представленные дизайнером графические макеты Web-приложения (страницы сайта) с бэкендом и при необходимости реализовать вычислительный функционал на стороне пользователя. Основные технологии в арсенале фронтендера это HTML, CSS и JavaScript. Конечно, при работе в команде нужно знать и разбираться во многих процессах, смежных с работой фронтенд-разработки. Будучи уже опытным фронтенд-разработчиком нужно быть знакомым с бэкенд-технологиями и понимать принципы взаимодействия пользователя и с приложениями (UX). Что должен знать опытный фронтенд-разработчик? В последнее время вакансия фронтенд-разработчика довольно востребована и актуальна на сайтах по поиску работы. В то же время можно встретить массу вакансий смежных или похожих по обязанностям с фронтенд-разработчиками. Важно отметить, что многие все же путают вакансию фронтенд-разработчика с верстальщиком сайта или дизайнером. В некоторой мере, изучив рынок труда складывается впечатление, что фронтенд-разработчик — это человек-машина, которая предоставляет целый спектр услуг, такой себе разнорабочий в IT пространстве. Некоторые работодатели совершенно не различают фронтенд-разработчика от верстальщика, предъявляя к соискателю вакансии на должность фронтенд-разработчика знание навыков совершенно не относящихся к его профилю. Работодатели часто сами не знают, что верстальщик — это фактически узкопрофильный специалист. Его задача заключается в верстке макета, полученного от дизайнера, используя при этом только HTML+CSS, и это всего треть от того, что должен знать junior frontend разработчик. Что же касается опытного фронтенд девелопера, он не просто “верстает макеты”, он отлично знает JavaScript, ориентируется в фреймворках и библиотеках, имеет представление и понимание того, что размещается на серверной стороне, и нередко знает дополнительные языки, например PHP или C#. Фронтенд-разработчик смыслит в препроцессорах и сборщиках GULP, LESS, SASS, GRUNT, работает с SVG-объектами, DOM, API, AJAX и CORS и так далее. Кроме всего прочего присутствует понимание принципов адаптивной и отзывчивой верстки, UI/UX-проектирования, кросс-браузерности и кросс-платформенности, базового тестирования, возможно, также, и знание навыков мобильной разработки. Продвинутый фронтенд девелопер также умеет использовать графические редакторы, работает с контролем версий Git, GitHub, CVS, с шаблонами различных CMS. Стоит отметить, что очень важно, также, и знание английского языка на уровне свободного общения с заказчиками и чтения документации. Чтобы стать востребованным и опытным специалистом в области Фронтенд разработки, необходимо освоить следующие технологии: HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills); свободно работать с JavaScript; Понимать логику работы клиент-серверной архитектуры в контексте написания реальных приложений; Знать популярные библиотеки и феймворки: React.js, jQuery, Angular.JS, Redux, js, понимать принципы построения современных одностраничных приложений (Single Page Application); Препроцессоры CSS (Sass, Less, Stylus и т. д.); Популярные CMS (WordPress, Drupal, Joomla и т.д.); OOCSS / BEM / SMACSS; ECMAScript 6; HTML5 API; SVG; DOM; Понимать принципы построения backend (Node.js, PHP, Ruby, .NET и т. д.); JavaScript транспайлеры (Babel); Инструменты дебаггинга (Chrome Dev Tools, Firebug и так далее); Графические редакторы (Photoshop, Illustrator и прочее); Инструменты контроля версий (Git, GitHub, CVS и так далее); Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и так далее). Также, фронтендер должен разбираться и уметь разрабатывать веб-интерфейсы и веб-приложения, тестировать и масштабировать веб-приложения, читать чужой код с пониманием того, как он работает, владеть навыками soft-skills и быть подготовленным к прохождению собеседования, уметь презентовать себя и свой продукт, иметь качественное и “живое” портфолио. Не стоит пугаться от всего перечня навыков и знаний фронтендщика, ведь не бязательно на проекте будут использоваться они все, на разных проектах используются различные комбинации технологий. Фронтендер всегда может найти проект исходя из имеющихся скилов, но главной особенностью фронтенд-разработки и программирования в целом является как раз постоянное обучение, и пополнение багажа знаний и скилов. На кусах фронтенд разработки в Dan.It вы сможете приобрести знания и освоить все навыки, необходимые востребованному frontend-разработчику.
© Dan-it.com.ua