Web Development

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

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

Skillbox

Что такое фронтенд-разработка и разработчик?

Вы когда-нибудь заходили на свой любимый сайт и задавали себе вопрос: “Как именно он работает?” или “Интересно, смогу ли я сделать столь же функциональный сайт, как этот?”.

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

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

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

Какие навыки требуются для фронтенд-разработчиков?

Вполне очевидно, что не все навыки подходят новичкам или наоборот профессионалам. Поэтому для вашего удобства мы разделили их на 4 группы:

1. Навыки для новичков во фронтенд-разработке

• HTML+CSS

HTML (аббревиатура от HyperText Markup Language — «язык гипертекстовой разметки») и CSS —  самые базовые навыки во фронтенд-разработке. HTML создает “скелет” веб-страницы, в то время как CSS отвечает за внешний вид веб-страницы. Текст, изображения и цветовой стиль сайта реализованы с помощью HTML + CSS. По этой причине жизненно необходимо освоить два этих языка в начале вашего пути.

Говоря простым языком, HTML, в основном, используется для создания макета сайта, поэтому вам нужно стать адептом таких тегов, как div, form, table, ul, li, span, font и т.д. Между тем, CSS в основном используется для завершения HTML-макета, используя так называемые “CSS стили”. 

В связи с этим вам необходимо ознакомиться с такими свойствами, как float, position, height, width, overflow, margin, padding и т.п. Два этих языка относительно просты в изучении и представляют собой основу, от которой вы будете отталкиваться.

JavaScript

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

Согласно опросу Stack Overflow, JavaScript является наиболее популярным и лидирующим языком среди разработчиков —  он доминирует с долей в 62,5% на рынке языков программирования. 

jQuery

jQuery — это JavaScript библиотека, созданная для взаимодействия JavaScript и HTML, совместимая с CSS3 и различными браузерами, такими как Safari 2.0+, IE 6.0+ and Opera 9.0+ и т.д. Она позволяет удобнее обрабатывать HTML, события и анимацию. Технология AJAX эквивалентна коллекциям плагинов и расширений JS, которые делают ваш JS-код более быстрым и простым в реализации. 

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

Кроме того, использование в одном проекте Bootstrap с другим JavaScript фреймворком, таким как ,например, Angular.js — обычное дело. Зная об этих фреймворках, вы обнаружите, что процесс разработки станет занимать у вас намного меньше времени, чем раньше.

Как быстрее начать работу во фронтенде?

1. HTML+CSS

  • HTML5: Недостающее руководство, рассказывает про все новейшие функции в HTML5, занимая общей сложностью 518 страниц. 
  • CSS3: Недостающее руководство, более 600 страниц текста, в которых содержится информация о том, как создавать удивительные современные макеты.
  • Секреты CSS, в этой книге рассказывается про продвинутые функции, которые помогут вам настроить стиль страницы для уникальной типографики, фонов и пользовательских CSS форм.
  • HTML & CSS, впервые опубликована в 2011 году, после ее прочтения даже новичок сможет начать разрабатывать полноценные сайты.

2. JavaScript

  • Секреты JavaScript ниндзя, научит вас писать JavaScript код, который эффективно работает и сокращает объем потребляемой памяти.  
  • JavaScript: Сильные стороны, одна из лучших книг для изучения шаблонов (паттернов) проектирования и best practices (лучших практик).
  • JavaScript Шаблоны, содержит около 230 страниц практических советов по реализации каждого из рассматриваемых шаблонов с примерами программного кода.

3. jQuery

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

4. Веб-разработка

  • Отзывчивый веб-дизайн с HTML5 и CSS3, научит вас всему, что нужно знать об отзывчивом веб-дизайне.
  • High Performance Web Sites, книга полна полезных методов по уменьшению количества HTTP-запросов, размеров файлов и внешних библиотек. Также она включает в себя передовые методы по улучшению качества кода. 

2. Навыки для разработчиков среднего уровня

ES6
Появление ES6 (т.е ECMAScript 2015) принесло с собой новые сюрпризы для фронтенд-разработчиков. ES6 проделала долгий путь от ES1 к ES6. В последней версии данной спецификации JS были добавлены крайне интересные функции, наподобие деструктивного присвоения, стрелочных функций, шаблонных строк и т.д. Учитывая популярность Node.js и Angular.js, мы считаем, что ES6 скоро станет основным трендом во фронтенд фреймворках.

Chrome DevTools
Chrome Developer Tools — это инструменты для создания и отладки веб-сайтов, встроенные, как можно догадаться, в Google Chrome. Данный инструмент состоит из следующих разделов:

  • Раздел “Toggle device toolbar” помогает при создании полностью адаптивного веб-сайта, ориентированного в первую очередь на мобильные устройства. Можно посмотреть, как будет выглядеть открытая страница на девайсе с другим расширением экрана.
  • Панель “Elements”позволяет визуально менять наполнение сайта посредством изменения html/css кода в панели элементов. Изменения сохраняются локально в вашем браузере, не затрагивая реальный код сайта.
  • Раздел “Console”протоколирует сетевые запросы, ошибки и предупреждения JavaScript и CSS, ошибки и предупреждения по безопасности. Также в консоли можно выполнять выражения JavaScript.
  • Раздел “Sources” предназначен для отладки кода. В исходных файлах выбирается необходимый элемент, выполняется его отладка, а в зоне информации и контроля можно запускать/останавливать отлаженный код.

Кроме этого есть такие разделы, как Network, Performance, Memory, Application, Security, Customize, Control DevTools и многое другое. Здесь можно прочесть полную документацию, касающуюся Chrome Developer Tools. 

Angular, React and Vue
Как самые популярные фреймворки для веб-разработки, Angular, React и Vue имеют разные пользовательские сценарии (user scenarios) и характеристики:

  • Angular — это фреймворк, написанный на языке TypeScript и разрабатываемый командой разработчиков из Google. Используется для разработки нативных, гибридных и веб-приложений.
  • React — JavaScript библиотека, разрабатываемая и поддерживаемая Facebook, которая используется для создания пользовательских интерфейсов. Также React может использоваться для разработки одностраничных и мобильных приложений.
  • Vue — один из самых обсуждаемых JavaScript фреймворков, который используется для веб-разработки и одностраничных приложений.

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

3. Навыки для разработчиков продвинутого уровня

Разработка на Node.js
Node.js — это не язык и не фреймворк, а программная платформа, превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node крайне удобен для создания легковесных REST/JSON интерфейсов, одностраничных приложений, а также для систем реального времени (чаты, букмекерские приложения и многое другое).

• RESTful API

REST(сокращение от Representational State Transfer — «передача состояния представления») — архитектурный стиль взаимодействия компонентов распределённого приложения в сети. Всемирная паутина основана на архитектуре REST, поэтому если вы создадите API-интерфейс non-RESTful, то получите неоптимальную систему в плане оптимизированной архитектуры. Чтобы получить RESTful API — вам нужно ознакомиться с шестью обязательными ограничениями, которые вы можете найти в Википедии. 

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

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

4. Навыки для разработчиков профессионального уровня

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

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

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

Продолжайте учиться и самосовершенствоваться

Как сказал Стив Джобс: “Stay hungry, Stay foolish”. Оставайтесь интеллектуально “голодными”, будьте в постоянном поиске пищи для ума, только таким образом вы будете двигаться вперед.  

Перевод статьи Amy Smith: The Ultimate Front End Developer Skills Checklist for New Starters