В наше время веб-сайты есть у всех и вся, а возможностей стать фронтенд-разработчиком великое множество. Но поскольку все вокруг меняется с огромной скоростью, становится очень трудно идти в ногу со временем, особенно когда вы только начинаете. Кроме того, не всегда до конца понятно как именно стать фронтенд-разработчиком, так как в Интернете доступны сотни вариантов обучения.
Именно поэтому в этой статье собраны воедино самые необходимые навыки для фронтенд-разработчиков начинающего, среднего, продвинутого, а также профессионального уровня. Неважно, новичок ли вы или настоящий профессионал — есть вероятность, что некоторые из этих навыков помогут вам стать еще лучше. Теперь давайте обо всем подробнее.
Что такое фронтенд-разработка и разработчик?
Вы когда-нибудь заходили на свой любимый сайт и задавали себе вопрос: “Как именно он работает?” или “Интересно, смогу ли я сделать столь же функциональный сайт, как этот?”.
На самом деле, все эти вещи называются фронтенд-разработкой. Веб-дизайн — это то, как выглядит веб-сайт, в то время как фронтенд-разработка — это то, как дизайн реализуется на веб-сайте и взаимодействует с пользователями. То есть, проще говоря, фронтенд-разработка — это создание клиентской части сайта. А фронтенд-разработчик — это человек, который несет ответственность за создание клиентской части.
Согласно исследованиям, в 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
