От нуля до фронтендера (о своем пути простыми словами)
Знаете, чтобы стать программистом с нуля, нужно достаточно много времени, чтобы переучиться при переходе в эту сферу из другой профессии. Могу, так сказать, ответить за свой базар на личном опыте. К примеру, возьмем область фронтенд разработки — создания визуальных интерфейсов для сайтов и приложений в интернете.
Какой порог входа? Сначала допустим, что вы как минимум умеете пользоваться компьютером и заходить в интернет. Для начала, вам желательно знать английский: все термины будут именно на этом языке. А все что на русском — скорее всего калька или перевод тех же самых английских терминов. Почему английских? Да просто потому, что большинство создателей языков программирования — англоговорящие люди, которые сразу ориентируются на глобальный рынок. А всемирную паутину так вообще изобрел британец. Да, есть конечно и языки программирования на русском, китайском и других языках –, но на их долю приходится весьма скудная часть рынка.
Теперь перейдем к основам. Вам понадобится язык гипертекстовой разметки HTML, чтобы создавать веб-страницы и их элементы. Он насчитывает около 100 тегов — названий элементов в треугольных скобках, а также бесчисленное множество атрибутов для них. Однако, в этом языке нет логики программирования: циклов, условий, переменных и тому подобного. Поэтому освоить правила HTML не так сложно, как может показаться на первый взгляд. Но не стоит забывать про особенности последней версии языка (на данный момент — это HTML5). Нужно всегда быть в курсе последних нововведений: плагин Emmet и шаблонизатор Pug позволяют писать HTML код в сокращенном виде, ускоряя процесс разработки.
Каркас страницы готов, и самое время ее красиво оформить. Обратимся к CSS — каскадным таблицам стилей. Здесь вы встретите еще большее количество терминов, а именно стилевых свойств, которые можно применить к элементам HTML на сайте. А еще придется освоить правила верстки, которые довольно часто могут казаться вам нелогичными на первый взгляд. Но освоившись с тем, как нужно расставлять и стилизовать элементы на странице, не спешите радоваться. Вам еще нужно разобрать такие темы как Flexbox и CSS Grid — универсальные инструменты для расположения почти чего угодно на странице. А про позиционирование элементов друг над другом и создание анимаций с переходами я вообще промолчу: в этом аспекте можно тренироваться бесконечно. Кстати, я тут упоминал HTML5, так вот сейчас еще не забудьте про CSS3, если хотите быть на коне.
Думаете, что большую часть дела уже знаете? А вот и нет, знакомьтесь, перед вами JavaScript, язык программирования для веб-страниц, который добавит вам на сайт интерактива и, при желании, головной боли. Здесь вы найдете и признанные ошибки в языке, о которых надо помнить, и необходимость преобразования новых версий языка в более давние для совместимости со старыми браузерами, и постоянные доработки стандарта языка, и самое главное — целую уйму фреймворков и библиотек, которые должны все упрощать, но на самом деле могут принести вам и гору проблем.
Библиотеки — это такие коробки, откуда можно взять готовые инструменты. Привет, jQuery, давно не виделись! А фреймворки дают не только готовые инструменты, но и определяют саму структуру вашего программного кода. Так вот в этом языке их масса, и они плодятся с каждым годом, а сообщество разработчиков постоянно спорит, какой из них лучше. Вот бы еще знать, какой фреймворк начать учить первым, чтобы было легче устроиться на первую работу? Быть или не быть, React или Angular? А может быть Vue? Стоп, а как же Svelte? Может, еще рано списывать со счетов Ember и Backbone? Да ладно там эти фреймворки, вы уверены, что вообще хорошо ориентируетесь в версиях ES5 и ES6 этого языка? А как насчет ES2023? Кстати, преобразовать код из одной версии в другую поможет так называемый транспилятор Babel. Но одно могу обещать наверняка — если полюбите этот язык, то уже не сможете от него оторваться.
Для тех, кто скучает по Java и другим языкам со статической типизацией, есть TypeScript. В нем надо везде указывать, где переменная — это число, а где — строка, а где — интерфейс (уже страшно). Кстати, его активно используют с React и Angular фреймворками.
И спешу вас обрадовать, у CSS тоже есть свои фреймворки! Bootstrap, Tailwind, Bulma, Foundation, Material UI… Нет смысла учить сразу все, но парочку из списка стоит опробовать на практике. Нет, этого все равно недостаточно, нужны еще CSS методологии! Держите скорее: BEM, ITCSS, OOCSS, SMACSS… Как же много всего напридумывали в сообществе разработчиков! А как насчет расширить возможности CSS и создать более широкий язык? То, что надо! Sass, Less и Stylus решат ваши проблемы на месте, только не забудьте потом преобразовать код обратно в простой CSS.
А кто вам поможет с автоматическими преобразованиями кода между версиями языков, минификацией кода и другими рутинными задачами? Менеджер задач, а кто же еще. Раньше использовали Grunt, сейчас чаще Gulp. Копнем поглубже:, а как собрать приложение воедино, когда столько всего в нем используется? Время освоить бандлер! Использовать могучий Webpack или проворный Parcel — выбирать вам или вашему руководителю.
Итак, бессменную троицу вы уже хорошо запомнили — HTML, CSS, JavaScript. Кто там следующий, войдите в кабинет! А где же вы собираетесь теперь писать весь этот шедевр? Правильный ответ — в редакторе кода или IDE (интегрированная среда разработки). Среди них выбор огромен: VS Code, Atom, Intellij IDEA или его брат для веб-разработки WebStorm, Sublime Text или просто Notepad. Истинные знатоки еще вспомнят Vim, Emacs или Nano. Да, это вам не Microsoft Word, который лидирует на рынке текстовых редакторов. А еще давайте учтем, что в каждом редакторе кода есть свои расширения и цветовые темы, которые можно установить, а также свои горячие клавиши, в которых стоит разбираться для эффективной работы.
Смотреть свои новоиспеченные веб-страницы будете в браузере, а лучше даже сразу в нескольких, чтобы сразу проверять, что нигде ничего не поехало. Да, разные браузеры могут по-разному показывать некоторые места на вашем сайте. Основные браузеры надо знать в лицо: Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge и самый проблемный динозавр среди них — Internet Explorer (к счастью, про него уже можно забыть — официально прекратили поддержку). Самое интересное, что некоторые свойства CSS могут не работать сходу во всех браузерах, и придется добавлять к ним специальные вендорные префиксы. Не волнуйтесь, для этого есть плагин автопрефиксер и другие полезные штуки, облегчающие жизнь.
А теперь вопрос: как же нам посмотреть фронтенд код любой веб-страницы в интернете? Открыть панель инструментов разработчика в том самом браузере! Это лучший помощник веб-разработчика при решении проблем, да и просто при верстке сайта. Здесь можно увидеть всю структуру страницы, ее стили, запросы на сервер и много чего еще полезного. Всем крайне рекомендую!
А раз мы вспомнили про браузер, то стоит вспомнить и про протокол передачи данных HTTP. Его вы будете использовать всякий раз при загрузке страницы. Конечно, лучше, когда соединение защищено — HTTPS. Где протокол, там и его методы связи с сервером, например, GET и POST. Также стоит помнить основные коды состояния: 404 — сервер не может найти ресурс, 200 — запрос успешный, и так далее.
Также неплохо было бы разбираться в таких практических вопросах как: что такое DNS, из чего состоит URL, что такое UTM метки, покупка и подключение домена, хостинг сайта, редиректы, SSL сертификат, настройка SEO — поисковой оптимизации, доступность, веб-аналитика и основные метрики сайта. Ну и конечно, умение быстро собрать сайт на конструкторе тоже будет плюсом: WordPress, Webflow, Wix, Joomla и Tilda к вашим услугам.
Вдобавок ко всему давайте представим, что вы работаете в команде. Тогда вам срочно нужно организовать общее хранилище кода. Для работы над своей частью проекта вам поможет Git — инструмент контроля версий. Теперь вы сможете не запутаться между версиями коллег, разрешить расхождения в коде и хранить свой проект в нескольких версиях. А хранить программный код на удаленном сервере вместо своего родного компьютера позволят сервисы Github, Gitlab и Bitbucket. Ничего себе!
Только не обольщайтесь, для Git и других инструментов вам понадобится умение работать с командной строкой. Да и вообще иногда быстрее открыть файл через терминал, а не кликая мышкой по папкам на рабочем столе. Работая с терминалом, сможете в полной мере ощутить себя хакером. Только не забудьте надеть капюшон на голову для пущей убедительности, пока смотрите содержимое файла в редакторе Nano. И, раз уж я решил тут все перечислять, вот список популярных терминалов: Windows Terminal, PowerShell, GitBash, iTerm2, Zsh. Угадайте, где же часто используется терминал? Правильно, в операционной системе Linux. А еще на ней работают серверы. В любом случае, знание Linux вам пригодится для работы.
Кто там сказал серверы? Написать бэкенд код для простого сервера можно на платформе Node.js. Как можете заметить по названию, она берет свое начало в JavaScript. Установить его на компьютер опять же проще через терминал. Там же вы познакомитесь и с менеджером пакетов npm, который позволит установить внешние пакеты для вашего проекта через консоль.
Когда будете передавать данные на сервер или наоборот, помните про формат JSON. Он повсеместно используется API — программным интерфейсом приложения, который и будет посылать вам данные для сайта в этом формате.
А ведь перед публичным размещением проекта его нужно еще протестировать! Здесь вам пригодится Jest, Cypress и другие инструменты на выбор. Кстати, бесплатно опубликовать сайт можно на платформах Github Pages и Netlify.
Чуть не забыл: чтобы претворять в жизнь дизайн макет сайта от заботливых дизайнеров, вам еще понадобится знать основы Figma или Adobe Photoshop. Надо же понимать, сколько пикселей стоит отступ между параграфом и заголовком и уметь выгружать картинки в формате PNG из файла.
Ну все, вот вы и начинающий фронтенд разработчик! Я насчитал всего-навсего свыше 20 инструментов, которыми вы должны уметь пользоваться. Кружится голова — примите таблеточку. Помимо прочего, вам не помешает хорошее логическое мышление и знание алгоритмов и структур данных — это обожают проверять на собеседованиях, да и в работе тоже пригодится.
P.S. Это я вам еще не рассказал про экосистему инструментов вокруг каждого популярного фреймворка –, но об этом уже почитайте сами.
